@nonoun/native-ui 0.2.7 → 0.2.9

package/dist/components-lean.css

@@ -1,3 +1,54 @@
+@layer ui {
+
+  /* ── Icon Base ── */
+
+  :where(ui-icon) {
+    --ui-icon-size: var(--_icon-size);
+    --ui-icon-color: currentColor;
+
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ui-icon-size);
+    height: var(--ui-icon-size);
+    color: var(--ui-icon-color);
+    flex-shrink: 0;
+    vertical-align: middle;
+    line-height: 0;
+  }
+
+  :where(ui-icon) > :where(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* WHY: Unregistered icons (no SVG content) should collapse to zero size
+     so surrounding buttons/slots don't render with phantom dimensions */
+  :where(ui-icon:empty) {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  /* ── Icon Size Variants ── */
+
+  :where(ui-icon[size="xs"]) { --ui-icon-size: var(--ui-icon-xs); }
+  :where(ui-icon[size="sm"]) { --ui-icon-size: var(--ui-icon-sm); }
+  :where(ui-icon[size="md"]) { --ui-icon-size: var(--ui-icon-md); }
+  :where(ui-icon[size="lg"]) { --ui-icon-size: var(--ui-icon-lg); }
+  :where(ui-icon[size="xl"]) { --ui-icon-size: var(--ui-icon-xl); }
+
+  /* ── Forced Colors ── */
+
+  @media (forced-colors: active) {
+    :where(ui-icon) {
+      --ui-icon-color: ButtonText;
+    }
+  }
+
+}
+
 @layer ui {
 
   /* ── Accordion Container ── */
@@ -467,7 +518,8 @@
     display: inline-flex;
     flex-direction: column;
     gap: calc(var(--_space));
-    padding: calc(var(--_space) * 2);
+    padding-block: calc(var(--_space) * 2);
+    padding-inline: calc(var(--_space) * 2);
     border: 1px solid var(--_border-color);
     border-radius: var(--_radius);
     background: var(--_background);
@@ -674,11 +726,17 @@
   }
 
   :where(ui-calendar) :where([data-range-start]) {
-    border-radius: calc(var(--_radius) - var(--_space)) 0 0 calc(var(--_radius) - var(--_space));
+    border-start-start-radius: calc(var(--_radius) - var(--_space));
+    border-end-start-radius: calc(var(--_radius) - var(--_space));
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
 
   :where(ui-calendar) :where([data-range-end]) {
-    border-radius: 0 calc(var(--_radius) - var(--_space)) calc(var(--_radius) - var(--_space)) 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-start-end-radius: calc(var(--_radius) - var(--_space));
+    border-end-end-radius: calc(var(--_radius) - var(--_space));
   }
 
   :where(ui-calendar) :where([data-range-start][data-range-end]) {
@@ -1015,13 +1073,14 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-checkbox)[pressed]::before {
+  :where(ui-checkbox)[pressed]::before{
     background: var(--_background-active, var(--_widget-active));
     border-color: var(--_border-color-active, var(--_border-active));
   }
 
   :where(ui-checkbox)[aria-checked="true"][pressed]::before,
-  :where(ui-checkbox)[aria-checked="mixed"][pressed]::before {
+  :where(ui-checkbox)[aria-checked="mixed"][pressed]::before
+  :where(ui-checkbox)[aria-checked="mixed"][force-active]::before {
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -1077,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 {
@@ -1129,7 +1205,8 @@
   :where(ui-command-list) {
     overflow-y: auto;
     max-height: var(--ui-popover-max-height);
-    padding: var(--_space);
+    padding-block: var(--_space);
+    padding-inline: var(--_space);
   }
 
   /* ── Command Group ── */
@@ -1221,7 +1298,8 @@
   }
 
   :where(ui-dialog) > :where(dialog)::backdrop {
-    background: var(--ui-backdrop-color) / var(--ui-backdrop-opacity);
+    background: var(--ui-backdrop-color);
+    opacity: var(--ui-backdrop-opacity);
   }
 
 }
@@ -1261,7 +1339,8 @@
   /* WHY: Animate backdrop opacity on open for a smooth reveal. */
 
   :where(ui-drawer) > :where(dialog)::backdrop {
-    background: var(--ui-backdrop-color) / var(--ui-backdrop-opacity);
+    background: var(--ui-backdrop-color);
+    opacity: var(--ui-backdrop-opacity);
     animation: drawer-backdrop-in var(--_duration) ease-out;
   }
 
@@ -1717,7 +1796,8 @@
     min-width: 0;
     flex-direction: column;
     gap: 0;
-    padding: var(--_space);
+    padding-block: var(--_space);
+    padding-inline: var(--_space);
     border-radius: var(--_radius);
     border: 1px solid var(--_border-color, var(--_border-rest));
     background: var(--_background, var(--_control));
@@ -1733,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"]) {
@@ -1893,10 +2006,6 @@
     color: var(--_ink-hover);
   }
 
-  :where(ui-nav-item)[active] {
-    color: var(--_ink-hover);
-  }
-
   :where(ui-nav-item):active{
     color: var(--_ink-active);
   }
@@ -2117,10 +2226,15 @@
      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 0 0 var(--ui-popover-gap);
+    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);
     overflow-y: auto;
@@ -2130,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
@@ -2173,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;
@@ -2348,12 +2474,12 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-radio)[pressed]::before {
+  :where(ui-radio)[pressed]::before{
     background: var(--_background-active, var(--_widget-active));
     border-color: var(--_border-color-active, var(--_border-active));
   }
 
-  :where(ui-radio)[aria-checked="true"][pressed]::before {
+  :where(ui-radio)[aria-checked="true"][pressed]::before{
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -2406,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);
 
@@ -2499,11 +2627,11 @@
 
   /* ── Active (dragging) ── */
 
-  :where(ui-range)[pressed]::after {
+  :where(ui-range)[pressed]::after{
     background: var(--_surface-active);
   }
 
-  :where(ui-range)[pressed] > :where(.ui-range-thumb) {
+  :where(ui-range)[pressed] > :where(.ui-range-thumb){
     border-color: var(--_surface-active);
     box-shadow: var(--ui-shadow-sm), 0 0 0 6px var(--_surface);
   }
@@ -2687,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 {
@@ -3078,12 +3223,12 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-switch)[pressed]::before {
+  :where(ui-switch)[pressed]::before{
     background: var(--_track-bg-active);
     border-color: var(--_track-border-active);
   }
 
-  :where(ui-switch)[aria-checked="true"][pressed]::before {
+  :where(ui-switch)[aria-checked="true"][pressed]::before{
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -3813,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);
@@ -3835,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),
@@ -3848,37 +3997,45 @@
 
   :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-bottom: calc(var(--_space) * 2);
+    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-top: calc(var(--_space) * 2);
+    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-right: calc(var(--_space) * 2);
+    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-left: calc(var(--_space) * 2);
+    margin-inline-start: calc(var(--_space) * 2);
   }
 
   /* ── Hidden (not :popover-open) ── */
@@ -3902,7 +4059,8 @@
     flex: 1 1 0%;
     min-width: 0;
     flex-direction: column;
-    padding: var(--_space);
+    padding-block: var(--_space);
+    padding-inline: var(--_space);
     font-size: var(--_font-size);
     line-height: var(--_line-height);
   }
@@ -3985,7 +4143,7 @@
 
   /* ── Disabled ── */
 
-  :where(ui-tree-item[disabled]) > :where([slot="label"]) {
+  :where(ui-tree-item[aria-disabled="true"]) > :where([slot="label"]) {
     color: var(--_ink-disabled);
     cursor: not-allowed;
     pointer-events: none;
@@ -4693,11 +4851,11 @@
   /* WHY: When collapsed to icon rail, the sidebar edge meets content — drop left padding. */
 
   :where(ui-layout-sidebar)[collapsed] :where(ui-layout-canvas) {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   :where(ui-layout-sidebar)[collapsed] :where(ui-layout-breadcrumb) {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   /* ── Sidebar Header ── */
@@ -4864,10 +5022,15 @@
      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 0 0 var(--ui-popover-gap);
+    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);
     overflow-y: auto;
@@ -4877,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
@@ -4917,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;
+    }
   }
 
 }
@@ -5125,57 +5300,6 @@
 
 }
 
-@layer ui {
-
-  /* ── Icon Base ── */
-
-  :where(ui-icon) {
-    --ui-icon-size: var(--_icon-size);
-    --ui-icon-color: currentColor;
-
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--ui-icon-size);
-    height: var(--ui-icon-size);
-    color: var(--ui-icon-color);
-    flex-shrink: 0;
-    vertical-align: middle;
-    line-height: 0;
-  }
-
-  :where(ui-icon) > :where(svg) {
-    width: 100%;
-    height: 100%;
-  }
-
-  /* WHY: Unregistered icons (no SVG content) should collapse to zero size
-     so surrounding buttons/slots don't render with phantom dimensions */
-  :where(ui-icon:empty) {
-    width: 0;
-    height: 0;
-    overflow: hidden;
-  }
-
-  /* ── Icon Size Variants ── */
-
-  :where(ui-icon[size="xs"]) { --ui-icon-size: var(--ui-icon-xs); }
-  :where(ui-icon[size="sm"]) { --ui-icon-size: var(--ui-icon-sm); }
-  :where(ui-icon[size="md"]) { --ui-icon-size: var(--ui-icon-md); }
-  :where(ui-icon[size="lg"]) { --ui-icon-size: var(--ui-icon-lg); }
-  :where(ui-icon[size="xl"]) { --ui-icon-size: var(--ui-icon-xl); }
-
-  /* ── Forced Colors ── */
-
-  @media (forced-colors: active) {
-    :where(ui-icon) {
-      --ui-icon-color: ButtonText;
-    }
-  }
-
-}
-
 @layer ui {
 
   /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━