@patternfly-java/core - npm Package Compare versions

Comparing version 0.6.16 to 0.7.0

core.css

@@ -25,6 +25,9 @@ /**
 /* ===================================================================
-   Tooltip using the popover API
+   Shared styles for components using the popover API
    =================================================================== */
-/* Reset [popover] UA styles for tooltips using the popover API */
-.pf-v6-c-tooltip[popover] {
+
+/* Reset [popover] UA styles */
+.pf-v6-c-tooltip[popover],
+.pf-v6-c-popover[popover],
+.pf-v6-c-overlay {
     border: none;
@@ -35,69 +38,177 @@ padding: 0;
     width: max-content;
-    max-width: var(--pf-v6-c-tooltip--MaxWidth);
     position: fixed;
 }
 
-/* CSS anchor positioning for tooltips using the popover API */
-.pf-v6-c-tooltip[popover].pf-m-top {
+/* ===================================================================
+   CSS anchor positioning rules in clockwise order
+
+      top-left   top   top-right
+              \   |   /
+               \  |  /
+          left-- ( ) --right
+               /  |  \
+              /   |   \
+   bottom-left bottom  bottom-right
+   =================================================================== */
+
+.pf-v6-c-tooltip[popover].pf-m-top,
+.pf-v6-c-popover[popover].pf-m-top,
+.pf-v6-c-overlay.pf-m-top {
     position-area: block-start;
 }
 
-.pf-v6-c-tooltip[popover].pf-m-bottom {
+.pf-v6-c-overlay.pf-m-top-right {
+    bottom: anchor(top);
+    right: anchor(right);
+}
+
+.pf-v6-c-tooltip[popover].pf-m-right,
+.pf-v6-c-popover[popover].pf-m-right,
+.pf-v6-c-overlay.pf-m-right {
+    position-area: inline-end;
+}
+
+.pf-v6-c-overlay.pf-m-bottom-right {
+    top: anchor(bottom);
+    right: anchor(right);
+}
+
+.pf-v6-c-tooltip[popover].pf-m-bottom,
+.pf-v6-c-popover[popover].pf-m-bottom,
+.pf-v6-c-overlay.pf-m-bottom {
     position-area: block-end;
 }
 
-.pf-v6-c-tooltip[popover].pf-m-left {
+.pf-v6-c-overlay.pf-m-bottom-left {
+    top: anchor(bottom);
+    left: anchor(left);
+}
+
+.pf-v6-c-tooltip[popover].pf-m-left,
+.pf-v6-c-popover[popover].pf-m-left,
+.pf-v6-c-overlay.pf-m-left {
     position-area: inline-start;
 }
 
-.pf-v6-c-tooltip[popover].pf-m-right {
-    position-area: inline-end;
+.pf-v6-c-overlay.pf-m-top-left {
+    bottom: anchor(top);
+    left: anchor(left);
 }
 
 /* ===================================================================
-   Popover using the popover API
+   CSS-native positioning
+
+   Activated by the pf-m-css-positioning modifier, which is added
+   by Overlay.attach() when the browser supports CSS Anchor Positioning.
    =================================================================== */
-/* Reset [popover] UA styles for popovers using the popover API */
-.pf-v6-c-popover[popover] {
-    border: none;
-    padding: 0;
-    background: none;
-    overflow: visible;
-    inset: auto;
-    width: max-content;
-    max-width: var(--pf-v6-c-popover--MaxWidth);
-    position: fixed;
+
+/* container-type for @container anchored() queries */
+.pf-v6-c-tooltip[popover].pf-m-css-positioning,
+.pf-v6-c-popover[popover].pf-m-css-positioning {
     container-type: anchored;
 }
 
-/* CSS anchor positioning for popovers using the popover API */
-.pf-v6-c-popover[popover].pf-m-top {
-    position-area: block-start;
+/* position-try-fallbacks for tooltip and popover */
+.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-bottom,
+.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-top,
+.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-bottom,
+.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-top,
+.pf-v6-c-overlay.pf-m-css-positioning.pf-m-bottom,
+.pf-v6-c-overlay.pf-m-css-positioning.pf-m-bottom-left,
+.pf-v6-c-overlay.pf-m-css-positioning.pf-m-bottom-right,
+.pf-v6-c-overlay.pf-m-css-positioning.pf-m-top,
+.pf-v6-c-overlay.pf-m-css-positioning.pf-m-top-left,
+.pf-v6-c-overlay.pf-m-css-positioning.pf-m-top-right {
     position-try-fallbacks: flip-block;
 }
 
-.pf-v6-c-popover[popover].pf-m-bottom {
-    position-area: block-end;
-    position-try-fallbacks: flip-block;
+.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-left,
+.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-right,
+.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-left,
+.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-right,
+.pf-v6-c-overlay.pf-m-css-positioning.pf-m-left,
+.pf-v6-c-overlay.pf-m-css-positioning.pf-m-right {
+    position-try-fallbacks: flip-inline;
 }
 
-.pf-v6-c-popover[popover].pf-m-left {
-    position-area: inline-start;
-    position-try-fallbacks: flip-inline;
+/* ===================================================================
+   Tooltip-specific styles
+   =================================================================== */
+
+.pf-v6-c-tooltip[popover] {
+    max-width: var(--pf-v6-c-tooltip--MaxWidth);
 }
 
-.pf-v6-c-popover[popover].pf-m-right {
-    position-area: inline-end;
-    position-try-fallbacks: flip-inline;
+/* ===================================================================
+   Popover-specific styles
+   =================================================================== */
+
+.pf-v6-c-popover[popover] {
+    inset: auto;
+    max-width: var(--pf-v6-c-popover--MaxWidth);
+    /* Reset font-weight for popovers nested inside bold containers (e.g. description list terms) */
+    font-weight: var(--pf-t--global--font--weight--body--default, 400);
 }
 
+/* ===================================================================
+   Overlay-specific styles
+   =================================================================== */
+
+.pf-v6-c-overlay {
+    inset: auto;
+}
+
 /*
-Uncomment as soon as https://github.com/parcel-bundler/lightningcss/issues/1176 is fixed
-Then remove the hack in showcase/src/web/main.js
-*/
+Arrow correction after CSS flip (requires @container anchored() support).
+LightningCSS can't parse these yet (parcel-bundler/lightningcss#1176) — the
+packager/optimizer also fails, not just the transformer. So these rules must be
+injected at runtime via adoptedStyleSheets (see showcase/src/web/main.js).
+Uncomment once lightningcss supports @container anchored().
 
-/*
-!* Was top, flipped to bottom *!
 @container anchored(fallback: flip-block) {
-    .pf-v6-c-popover[popover].pf-m-top .pf-v6-c-popover__arrow {
+    .pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-top .pf-v6-c-tooltip__arrow {
+        --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
+        --pf-v6-c-tooltip__arrow--InsetBlockEnd: auto;
+        --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
+        --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
+        --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
+        --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
+    }
+}
+
+@container anchored(fallback: flip-block) {
+    .pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-bottom .pf-v6-c-tooltip__arrow {
+        --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
+        --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
+        --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
+        --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
+        --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
+        --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
+    }
+}
+
+@container anchored(fallback: flip-inline) {
+    .pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-left .pf-v6-c-tooltip__arrow {
+        --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
+        --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
+        --pf-v6-c-tooltip__arrow--InsetInlineEnd: auto;
+        --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
+        --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
+        --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
+    }
+}
+
+@container anchored(fallback: flip-inline) {
+    .pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-right .pf-v6-c-tooltip__arrow {
+        --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
+        --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
+        --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
+        --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
+        --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
+        --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
+    }
+}
+
+@container anchored(fallback: flip-block) {
+    .pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-top .pf-v6-c-popover__arrow {
         --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-bottom--InsetBlockStart, 0);
@@ -112,5 +223,4 @@ --pf-v6-c-popover__arrow--InsetBlockEnd: auto;
 
-!* Was bottom, flipped to top *!
 @container anchored(fallback: flip-block) {
-    .pf-v6-c-popover[popover].pf-m-bottom .pf-v6-c-popover__arrow {
+    .pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-bottom .pf-v6-c-popover__arrow {
         --pf-v6-c-popover__arrow--InsetBlockStart: auto;
@@ -125,5 +235,4 @@ --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover--m-top--InsetBlockEnd, 0);
 
-!* Was left, flipped to right *!
 @container anchored(fallback: flip-inline) {
-    .pf-v6-c-popover[popover].pf-m-left .pf-v6-c-popover__arrow {
+    .pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-left .pf-v6-c-popover__arrow {
         --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-right--InsetBlockStart, 50%);
@@ -138,5 +247,4 @@ --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-right--InsetInlineStart, 0);
 
-!* Was right, flipped to left *!
 @container anchored(fallback: flip-inline) {
-    .pf-v6-c-popover[popover].pf-m-right .pf-v6-c-popover__arrow {
+    .pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-right .pf-v6-c-popover__arrow {
         --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-left--InsetBlockStart, 50%);
@@ -143,0 +251,0 @@ --pf-v6-c-popover__arrow--InsetInlineStart: auto;

package.json

 {
   "name": "@patternfly-java/core",
   "private": false,
-  "version": "0.6.16",
+  "version": "0.7.0",
   "description": "CSS for PatternFly Java.",
@@ -6,0 +6,0 @@ "homepage": "https://patternfly-java.github.io/",

No alert changes

Improved metrics

Total package byte prevSize

12278

75.5%

Lines of code

220

70.54%

No dependency changes