@nonoun/native-ui 0.2.7 → 0.2.8

package/dist/native-ui-lean.css

@@ -2080,6 +2080,57 @@
   }
 }
 
+@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 ── */
@@ -2549,7 +2600,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);
@@ -2756,11 +2808,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]) {
@@ -3097,13 +3155,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);
   }
@@ -3211,7 +3270,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 ── */
@@ -3303,7 +3363,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);
   }
 
 }
@@ -3343,7 +3404,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;
   }
 
@@ -3799,7 +3861,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));
@@ -3975,10 +4038,6 @@
     color: var(--_ink-hover);
   }
 
-  :where(ui-nav-item)[active] {
-    color: var(--_ink-hover);
-  }
-
   :where(ui-nav-item):active{
     color: var(--_ink-active);
   }
@@ -4202,7 +4261,8 @@
     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: 0;
+    margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
     overflow-y: auto;
@@ -4430,12 +4490,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);
   }
@@ -4581,11 +4641,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);
   }
@@ -5160,12 +5220,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);
   }
@@ -5945,22 +6005,22 @@
 
   :where(ui-tooltip[placement="top"]) {
     position-area: block-start;
-    margin-bottom: calc(var(--_space) * 2);
+    margin-block-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="bottom"]) {
     position-area: block-end;
-    margin-top: calc(var(--_space) * 2);
+    margin-block-start: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="left"]) {
     position-area: inline-start;
-    margin-right: calc(var(--_space) * 2);
+    margin-inline-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="right"]) {
     position-area: inline-end;
-    margin-left: calc(var(--_space) * 2);
+    margin-inline-start: calc(var(--_space) * 2);
   }
 
   /* ── Hidden (not :popover-open) ── */
@@ -5984,7 +6044,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);
   }
@@ -6067,7 +6128,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;
@@ -6775,11 +6836,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 ── */
@@ -6949,7 +7010,8 @@
     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: 0;
+    margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
     overflow-y: auto;
@@ -7207,57 +7269,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 {
 
   /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

package/dist/native-ui.css

@@ -2080,6 +2080,57 @@
   }
 }
 
+@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 ── */
@@ -2556,7 +2607,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);
@@ -2768,11 +2820,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]) {
@@ -3112,13 +3170,16 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-checkbox)[pressed]::before {
+  :where(ui-checkbox)[pressed]::before,
+  :where(ui-checkbox)[force-active]::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="true"][force-active]::before,
+  :where(ui-checkbox)[aria-checked="mixed"][force-active]::before {
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -3227,7 +3288,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 ── */
@@ -3319,7 +3381,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);
   }
 
 }
@@ -3359,7 +3422,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;
   }
 
@@ -3821,7 +3885,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));
@@ -4001,10 +4066,6 @@
     color: var(--_ink-hover);
   }
 
-  :where(ui-nav-item)[active] {
-    color: var(--_ink-hover);
-  }
-
   :where(ui-nav-item):active,
   :where(ui-nav-item)[force-active] {
     color: var(--_ink-active);
@@ -4232,7 +4293,8 @@
     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: 0;
+    margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
     overflow-y: auto;
@@ -4463,12 +4525,14 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-radio)[pressed]::before {
+  :where(ui-radio)[pressed]::before,
+  :where(ui-radio)[force-active]::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,
+  :where(ui-radio)[aria-checked="true"][force-active]::before {
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -4618,11 +4682,13 @@
 
   /* ── Active (dragging) ── */
 
-  :where(ui-range)[pressed]::after {
+  :where(ui-range)[pressed]::after,
+  :where(ui-range)[force-active]::after {
     background: var(--_surface-active);
   }
 
-  :where(ui-range)[pressed] > :where(.ui-range-thumb) {
+  :where(ui-range)[pressed] > :where(.ui-range-thumb),
+  :where(ui-range)[force-active] > :where(.ui-range-thumb) {
     border-color: var(--_surface-active);
     box-shadow: var(--ui-shadow-sm), 0 0 0 6px var(--_surface);
   }
@@ -5208,12 +5274,14 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-switch)[pressed]::before {
+  :where(ui-switch)[pressed]::before,
+  :where(ui-switch)[force-active]::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,
+  :where(ui-switch)[aria-checked="true"][force-active]::before {
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -6010,22 +6078,22 @@
 
   :where(ui-tooltip[placement="top"]) {
     position-area: block-start;
-    margin-bottom: calc(var(--_space) * 2);
+    margin-block-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="bottom"]) {
     position-area: block-end;
-    margin-top: calc(var(--_space) * 2);
+    margin-block-start: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="left"]) {
     position-area: inline-start;
-    margin-right: calc(var(--_space) * 2);
+    margin-inline-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="right"]) {
     position-area: inline-end;
-    margin-left: calc(var(--_space) * 2);
+    margin-inline-start: calc(var(--_space) * 2);
   }
 
   /* ── Hidden (not :popover-open) ── */
@@ -6049,7 +6117,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);
   }
@@ -6134,7 +6203,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;
@@ -6844,11 +6913,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 ── */
@@ -7020,7 +7089,8 @@
     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: 0;
+    margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
     overflow-y: auto;
@@ -7278,57 +7348,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 {
 
   /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━