@nonoun/native-ui 0.2.8 → 0.2.10

package/dist/components-lean.css

@@ -1136,6 +1136,23 @@
     cursor: text;
   }
 
+  /* ── Popover Listbox Positioning ──
+     WHY: Must come after ui-listbox.css base rule (which sets min-width: 0
+     for flex-child shrinking) so min-width: anchor-size(inline) wins by
+     source order — both are zero-specificity via :where(). */
+
+  :where(ui-combobox) > :where(ui-listbox[popover]) {
+    position: fixed;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
+    margin-block-start: var(--ui-popover-gap);
+    min-width: anchor-size(inline);
+    max-height: var(--ui-popover-max-height);
+    overflow-y: auto;
+  }
+
 }
 
 @layer ui {
@@ -1796,6 +1813,39 @@
     display: none;
   }
 
+  /* ── Popover Animation ──
+     WHY: Shared entry/exit transition for all popover listboxes.
+     Context CSS overrides --_popover-origin and --_popover-from
+     to match the popover's anchor direction (e.g. sidebar flyouts
+     open to the right → rotateY instead of rotateX). */
+
+  :where(ui-listbox[popover]) {
+    --_popover-origin: top center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(-20deg);
+
+    transform-origin: var(--_popover-origin);
+    opacity: 0;
+    transform: var(--_popover-from);
+
+    transition:
+      opacity var(--_duration) var(--_easing),
+      transform var(--_duration) var(--_easing),
+      display var(--_duration) var(--_easing) allow-discrete,
+      overlay var(--_duration) var(--_easing) allow-discrete;
+  }
+
+  :where(ui-listbox[popover]):popover-open {
+    opacity: 1;
+    transform: none;
+  }
+
+  @starting-style {
+    :where(ui-listbox[popover]):popover-open {
+      opacity: 0;
+      transform: var(--_popover-from);
+    }
+  }
+
   /* ── Option / Command Item Base ── */
 
   :where(ui-option, ui-command-item, [role="option"]) {
@@ -2176,10 +2226,14 @@
      instead of expanding the <details>. Same pattern as sidebar-trigger menus. */
 
   :where(ui-nav-group) > :where(ui-listbox.nav-group-flyout[popover]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(20deg);
+
     position: fixed;
     position-area: inline-end span-block-end;
     position-try-fallbacks: --nav-flyout-flip-up;
-    margin: 0;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
     margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
@@ -2190,6 +2244,10 @@
     position-area: inline-end span-block-start;
   }
 
+  @position-try --nav-flyout-flip-down {
+    position-area: inline-end span-block-end;
+  }
+
   /* ── Container Query: Collapsed Sidebar ── */
   /* WHY: Nav components own their own collapsed behavior via @container.
      The sidebar aside declares container-name: sidebar. When it shrinks
@@ -2233,6 +2291,14 @@
       font-size: var(--_font-size, 1rem);
     }
 
+    /* WHY: In collapsed mode the group is a small icon — centering
+       the flyout vertically with the anchor is more natural than top-aligning.
+       Fallbacks handle viewport clipping (top/bottom edge). */
+    :where(ui-nav-group) > :where(ui-listbox.nav-group-flyout[popover]) {
+      position-area: inline-end;
+      position-try-fallbacks: --nav-flyout-flip-up, --nav-flyout-flip-down;
+    }
+
     /* Collapse inter-group spacing in icon rail. */
     :where(ui-nav-group) + :where(ui-nav-group) {
       margin-block-start: 0;
@@ -2466,6 +2532,8 @@
     min-width: 0;
     align-items: center;
     position: relative;
+    /* WHY: Isolate internal z-index (thumb z-index: 1) from parent stacking context */
+    isolation: isolate;
 
     min-height: var(--_track-height);
 
@@ -2747,6 +2815,23 @@
     display: contents;
   }
 
+  /* ── Popover Listbox Positioning ──
+     WHY: Must come after ui-listbox.css base rule (which sets min-width: 0
+     for flex-child shrinking) so min-width: anchor-size(inline) wins by
+     source order — both are zero-specificity via :where(). */
+
+  :where(ui-select) > :where(ui-listbox[popover]) {
+    position: fixed;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
+    margin-block-start: var(--ui-popover-gap);
+    min-width: anchor-size(inline);
+    max-height: var(--ui-popover-max-height);
+    overflow-y: auto;
+  }
+
 }
 
 @layer ui {
@@ -3873,7 +3958,7 @@
     /* Default placement: above the anchor */
     position-area: block-start;
     position-try-fallbacks: flip-block, flip-inline;
-    margin: 0;
+    margin: var(--ui-popover-viewport-margin);
 
     max-width: var(--ui-tooltip-max-width);
     padding-block: calc(var(--_space) * 1.5);
@@ -3895,8 +3980,12 @@
     inset: unset;
     overflow: visible;
 
+    --_popover-origin: bottom center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(10deg);
+
+    transform-origin: var(--_popover-origin);
     opacity: 0;
-    transform: scale(0.96);
+    transform: var(--_popover-from);
     transition:
       opacity var(--_duration) var(--_easing),
       transform var(--_duration) var(--_easing),
@@ -3908,35 +3997,43 @@
 
   :where(ui-tooltip[popover]):popover-open {
     opacity: 1;
-    transform: scale(1);
+    transform: none;
   }
 
   /* Starting style for entry animation */
   @starting-style {
     :where(ui-tooltip[popover]):popover-open {
       opacity: 0;
-      transform: scale(0.96);
+      transform: var(--_popover-from);
     }
   }
 
   /* ── Placement Variants ── */
 
   :where(ui-tooltip[placement="top"]) {
+    --_popover-origin: bottom center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(10deg);
     position-area: block-start;
     margin-block-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="bottom"]) {
+    --_popover-origin: top center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(-10deg);
     position-area: block-end;
     margin-block-start: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="left"]) {
+    --_popover-origin: right center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(-10deg);
     position-area: inline-start;
     margin-inline-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="right"]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(10deg);
     position-area: inline-end;
     margin-inline-start: calc(var(--_space) * 2);
   }
@@ -4925,10 +5022,14 @@
      Flip: bottom-aligned, grows upward (span-block-start). */
 
   :where(ui-layout-sidebar-item) > :where(ui-listbox[popover]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(20deg);
+
     position: fixed;
     position-area: inline-end span-block-end;
     position-try-fallbacks: --sidebar-item-flip-up;
-    margin: 0;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
     margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
@@ -4939,6 +5040,10 @@
     position-area: inline-end span-block-start;
   }
 
+  @position-try --sidebar-item-flip-down {
+    position-area: inline-end span-block-end;
+  }
+
   /* ── Container Query: Collapsed Sidebar ── */
   /* WHY: Each component owns its own collapsed behavior via @container.
      The aside is the container (container-name: sidebar). When it shrinks
@@ -4979,6 +5084,14 @@
     :where(ui-layout-sidebar-item) > :where(:not([slot="icon"]):not(ui-listbox[popover]):not(.nav-group-flyout)) {
       display: none;
     }
+
+    /* WHY: In collapsed mode the sidebar item is a small icon — centering
+       the popover vertically with the anchor is more natural than top-aligning.
+       Fallbacks handle viewport clipping (top/bottom edge). */
+    :where(ui-layout-sidebar-item) > :where(ui-listbox[popover]) {
+      position-area: inline-end;
+      position-try-fallbacks: --sidebar-item-flip-up, --sidebar-item-flip-down;
+    }
   }
 
 }

package/dist/components.css

@@ -1154,6 +1154,23 @@
     cursor: text;
   }
 
+  /* ── Popover Listbox Positioning ──
+     WHY: Must come after ui-listbox.css base rule (which sets min-width: 0
+     for flex-child shrinking) so min-width: anchor-size(inline) wins by
+     source order — both are zero-specificity via :where(). */
+
+  :where(ui-combobox) > :where(ui-listbox[popover]) {
+    position: fixed;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
+    margin-block-start: var(--ui-popover-gap);
+    min-width: anchor-size(inline);
+    max-height: var(--ui-popover-max-height);
+    overflow-y: auto;
+  }
+
 }
 
 @layer ui {
@@ -1820,6 +1837,39 @@
     display: none;
   }
 
+  /* ── Popover Animation ──
+     WHY: Shared entry/exit transition for all popover listboxes.
+     Context CSS overrides --_popover-origin and --_popover-from
+     to match the popover's anchor direction (e.g. sidebar flyouts
+     open to the right → rotateY instead of rotateX). */
+
+  :where(ui-listbox[popover]) {
+    --_popover-origin: top center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(-20deg);
+
+    transform-origin: var(--_popover-origin);
+    opacity: 0;
+    transform: var(--_popover-from);
+
+    transition:
+      opacity var(--_duration) var(--_easing),
+      transform var(--_duration) var(--_easing),
+      display var(--_duration) var(--_easing) allow-discrete,
+      overlay var(--_duration) var(--_easing) allow-discrete;
+  }
+
+  :where(ui-listbox[popover]):popover-open {
+    opacity: 1;
+    transform: none;
+  }
+
+  @starting-style {
+    :where(ui-listbox[popover]):popover-open {
+      opacity: 0;
+      transform: var(--_popover-from);
+    }
+  }
+
   /* ── Option / Command Item Base ── */
 
   :where(ui-option, ui-command-item, [role="option"]) {
@@ -2208,10 +2258,14 @@
      instead of expanding the <details>. Same pattern as sidebar-trigger menus. */
 
   :where(ui-nav-group) > :where(ui-listbox.nav-group-flyout[popover]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(20deg);
+
     position: fixed;
     position-area: inline-end span-block-end;
     position-try-fallbacks: --nav-flyout-flip-up;
-    margin: 0;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
     margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
@@ -2222,6 +2276,10 @@
     position-area: inline-end span-block-start;
   }
 
+  @position-try --nav-flyout-flip-down {
+    position-area: inline-end span-block-end;
+  }
+
   /* ── Container Query: Collapsed Sidebar ── */
   /* WHY: Nav components own their own collapsed behavior via @container.
      The sidebar aside declares container-name: sidebar. When it shrinks
@@ -2265,6 +2323,14 @@
       font-size: var(--_font-size, 1rem);
     }
 
+    /* WHY: In collapsed mode the group is a small icon — centering
+       the flyout vertically with the anchor is more natural than top-aligning.
+       Fallbacks handle viewport clipping (top/bottom edge). */
+    :where(ui-nav-group) > :where(ui-listbox.nav-group-flyout[popover]) {
+      position-area: inline-end;
+      position-try-fallbacks: --nav-flyout-flip-up, --nav-flyout-flip-down;
+    }
+
     /* Collapse inter-group spacing in icon rail. */
     :where(ui-nav-group) + :where(ui-nav-group) {
       margin-block-start: 0;
@@ -2504,6 +2570,8 @@
     min-width: 0;
     align-items: center;
     position: relative;
+    /* WHY: Isolate internal z-index (thumb z-index: 1) from parent stacking context */
+    isolation: isolate;
 
     min-height: var(--_track-height);
 
@@ -2794,6 +2862,23 @@
     display: contents;
   }
 
+  /* ── Popover Listbox Positioning ──
+     WHY: Must come after ui-listbox.css base rule (which sets min-width: 0
+     for flex-child shrinking) so min-width: anchor-size(inline) wins by
+     source order — both are zero-specificity via :where(). */
+
+  :where(ui-select) > :where(ui-listbox[popover]) {
+    position: fixed;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
+    margin-block-start: var(--ui-popover-gap);
+    min-width: anchor-size(inline);
+    max-height: var(--ui-popover-max-height);
+    overflow-y: auto;
+  }
+
 }
 
 @layer ui {
@@ -3946,7 +4031,7 @@
     /* Default placement: above the anchor */
     position-area: block-start;
     position-try-fallbacks: flip-block, flip-inline;
-    margin: 0;
+    margin: var(--ui-popover-viewport-margin);
 
     max-width: var(--ui-tooltip-max-width);
     padding-block: calc(var(--_space) * 1.5);
@@ -3968,8 +4053,12 @@
     inset: unset;
     overflow: visible;
 
+    --_popover-origin: bottom center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(10deg);
+
+    transform-origin: var(--_popover-origin);
     opacity: 0;
-    transform: scale(0.96);
+    transform: var(--_popover-from);
     transition:
       opacity var(--_duration) var(--_easing),
       transform var(--_duration) var(--_easing),
@@ -3981,35 +4070,43 @@
 
   :where(ui-tooltip[popover]):popover-open {
     opacity: 1;
-    transform: scale(1);
+    transform: none;
   }
 
   /* Starting style for entry animation */
   @starting-style {
     :where(ui-tooltip[popover]):popover-open {
       opacity: 0;
-      transform: scale(0.96);
+      transform: var(--_popover-from);
     }
   }
 
   /* ── Placement Variants ── */
 
   :where(ui-tooltip[placement="top"]) {
+    --_popover-origin: bottom center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(10deg);
     position-area: block-start;
     margin-block-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="bottom"]) {
+    --_popover-origin: top center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(-10deg);
     position-area: block-end;
     margin-block-start: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="left"]) {
+    --_popover-origin: right center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(-10deg);
     position-area: inline-start;
     margin-inline-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="right"]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(10deg);
     position-area: inline-end;
     margin-inline-start: calc(var(--_space) * 2);
   }
@@ -5004,10 +5101,14 @@
      Flip: bottom-aligned, grows upward (span-block-start). */
 
   :where(ui-layout-sidebar-item) > :where(ui-listbox[popover]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(20deg);
+
     position: fixed;
     position-area: inline-end span-block-end;
     position-try-fallbacks: --sidebar-item-flip-up;
-    margin: 0;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
     margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
@@ -5018,6 +5119,10 @@
     position-area: inline-end span-block-start;
   }
 
+  @position-try --sidebar-item-flip-down {
+    position-area: inline-end span-block-end;
+  }
+
   /* ── Container Query: Collapsed Sidebar ── */
   /* WHY: Each component owns its own collapsed behavior via @container.
      The aside is the container (container-name: sidebar). When it shrinks
@@ -5058,6 +5163,14 @@
     :where(ui-layout-sidebar-item) > :where(:not([slot="icon"]):not(ui-listbox[popover]):not(.nav-group-flyout)) {
       display: none;
     }
+
+    /* WHY: In collapsed mode the sidebar item is a small icon — centering
+       the popover vertically with the anchor is more natural than top-aligning.
+       Fallbacks handle viewport clipping (top/bottom edge). */
+    :where(ui-layout-sidebar-item) > :where(ui-listbox[popover]) {
+      position-area: inline-end;
+      position-try-fallbacks: --sidebar-item-flip-up, --sidebar-item-flip-down;
+    }
   }
 
 }