@adia-ai/web-components 0.6.33 → 0.6.35

package/components/nav/nav.css

@@ -6,36 +6,36 @@
 @scope (nav-ui) {
   :where(:scope) {
     /* Shared */
-    --nav-gap:       var(--a-space-1);
-    --nav-px:        var(--a-space-2);
-    --nav-py:        var(--a-space-2);
-    --nav-font-size: var(--a-ui-size);
-    --nav-bg:        transparent;
-    --nav-divider-bg: var(--a-border-subtle);
-    --nav-divider-my: var(--a-space-1);
+    --nav-gap-default:       var(--a-space-1);
+    --nav-px-default:        var(--a-space-2);
+    --nav-py-default:        var(--a-space-2);
+    --nav-font-size-default: var(--a-ui-size);
+    --nav-bg-default:        transparent;
+    --nav-divider-bg-default: var(--a-border-subtle);
+    --nav-divider-my-default: var(--a-space-1);
 
     /* Primary-variant collapse */
-    --nav-width:           auto;
-    --nav-width-collapsed: 48px;
-    --nav-duration: var(--a-duration);  /* §230-bundle (v0.5.9): canonical mid-tier duration (250ms). Was orphaned --a-duration-base. */
-    --nav-easing:   var(--a-easing, ease);
+    --nav-width-default:           auto;
+    --nav-width-collapsed-default: 48px;
+    --nav-duration-default: var(--a-duration);  /* §230-bundle (v0.5.9): canonical mid-tier duration (250ms). Was orphaned --a-duration-base. */
+    --nav-easing-default:   var(--a-easing, ease);
 
     /* Group-heading kicker */
-    --nav-label-fg:        var(--a-fg-muted);
-    --nav-label-font-size: var(--a-kicker-sm);
-    --nav-label-weight:    var(--a-weight-medium);
-    --nav-label-px:        var(--a-space-2);
-    --nav-label-py:        var(--a-space-3) var(--a-space-1);
+    --nav-label-fg-default:        var(--a-fg-muted);
+    --nav-label-font-size-default: var(--a-kicker-sm);
+    --nav-label-weight-default:    var(--a-weight-medium);
+    --nav-label-px-default:        var(--a-space-2);
+    --nav-label-py-default:        var(--a-space-3) var(--a-space-1);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--nav-gap);
-    padding: var(--nav-py) var(--nav-px);
-    background: var(--nav-bg);
-    font-size: var(--nav-font-size);
+    gap: var(--nav-gap, var(--nav-gap-default));
+    padding: var(--nav-py, var(--nav-py-default)) var(--nav-px, var(--nav-px-default));
+    background: var(--nav-bg, var(--nav-bg-default));
+    font-size: var(--nav-font-size, var(--nav-font-size-default));
     min-width: 0;
     overflow-y: auto;
     overflow-x: hidden;
@@ -47,30 +47,30 @@
   /* ── Primary variant (default) ── */
 
   :scope:not([variant="section"]) {
-    width: var(--nav-width);
-    transition: width var(--nav-duration) var(--nav-easing);
+    width: var(--nav-width, var(--nav-width-default));
+    transition: width var(--nav-duration, var(--nav-duration-default)) var(--nav-easing, var(--nav-easing-default));
   }
 
   :scope:not([variant="section"])[collapsed] {
-    width: var(--nav-width-collapsed);
-    --nav-px: var(--a-space-1);
+    width: var(--nav-width-collapsed, var(--nav-width-collapsed-default));
+    --nav-px-default: var(--a-space-1);
   }
 
   /* Container-query collapse — when nav lives in a sidebar that goes
      narrow, behave as if [collapsed] regardless of attribute. */
   @container sidebar (max-width: 96px) {
     :scope:not([variant="section"]) {
-      --nav-px: var(--a-space-1);
+      --nav-px-default: var(--a-space-1);
     }
   }
 
   /* Group label kicker (group header text inside nav-group) */
   [data-nav-label] {
     display: block;
-    padding: var(--nav-label-py) var(--nav-label-px);
-    font-size: var(--nav-label-font-size);
-    font-weight: var(--nav-label-weight);
-    color: var(--nav-label-fg);
+    padding: var(--nav-label-py, var(--nav-label-py-default)) var(--nav-label-px, var(--nav-label-px-default));
+    font-size: var(--nav-label-font-size, var(--nav-label-font-size-default));
+    font-weight: var(--nav-label-weight, var(--nav-label-weight-default));
+    color: var(--nav-label-fg, var(--nav-label-fg-default));
     text-transform: uppercase;
     letter-spacing: 0.06em;
     white-space: nowrap;
@@ -81,17 +81,17 @@
   [data-nav-divider] {
     border: none;
     height: 1px;
-    background: var(--nav-divider-bg);
-    margin: var(--nav-divider-my) 0;
+    background: var(--nav-divider-bg, var(--nav-divider-bg-default));
+    margin: var(--nav-divider-my, var(--nav-divider-my-default)) 0;
   }
 
   /* Auto-dividers between groups when [divider] set */
   :scope[divider] > nav-group-ui + nav-group-ui,
   :scope[divider] > nav-item-ui + nav-group-ui,
   :scope[divider] > nav-group-ui + nav-item-ui {
-    border-top: 1px solid var(--nav-divider-bg);
-    margin-top: var(--nav-divider-my);
-    padding-top: var(--nav-divider-my);
+    border-top: 1px solid var(--nav-divider-bg, var(--nav-divider-bg-default));
+    margin-top: var(--nav-divider-my, var(--nav-divider-my-default));
+    padding-top: var(--nav-divider-my, var(--nav-divider-my-default));
   }
 
   /* Spacer — pushes items below to bottom */
@@ -113,18 +113,18 @@
   /* ── Section variant ── */
 
   :scope[variant="section"] {
-    --nav-px: 0;
-    --nav-py: 0;
+    --nav-px-default: 0;
+    --nav-py-default: 0;
   }
 
   /* Heading rendered from [heading] attribute on section variant. */
   :scope[variant="section"][heading]:not([heading=""])::before {
     content: attr(heading);
     display: block;
-    padding: var(--nav-label-py) var(--nav-label-px);
-    font-size: var(--nav-label-font-size);
-    font-weight: var(--nav-label-weight);
-    color: var(--nav-label-fg);
+    padding: var(--nav-label-py, var(--nav-label-py-default)) var(--nav-label-px, var(--nav-label-px-default));
+    font-size: var(--nav-label-font-size, var(--nav-label-font-size-default));
+    font-weight: var(--nav-label-weight, var(--nav-label-weight-default));
+    color: var(--nav-label-fg, var(--nav-label-fg-default));
     text-transform: uppercase;
     letter-spacing: 0.06em;
     white-space: nowrap;

package/components/nav/nav.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UINav } from './class.js';
+import { UINav } from './nav.class.js';
 
 defineIfFree('nav-ui', UINav);
 

package/components/nav-group/nav-group.css

@@ -1,25 +1,25 @@
 @scope (nav-group-ui) {
   :where(:scope) {
-    --nav-group-row-height:    var(--a-size);
-    --nav-group-row-height-sm: var(--a-size-sm);
-    --nav-group-row-height-lg: var(--a-size-lg);
-    --nav-group-row-px:        var(--a-ui-px);
-    --nav-group-row-gap:       var(--a-space-1);
-    --nav-group-row-radius:    var(--a-radius-md);
-    --nav-group-font-size:     var(--a-ui-size);
-    --nav-group-font-size-sm:  var(--a-ui-sm);
-    --nav-group-font-size-lg:  var(--a-ui-lg);
-    --nav-group-font-weight:   var(--a-weight-normal);
-    --nav-group-fg:            var(--a-fg);
-    --nav-group-fg-hover:      var(--a-fg-strong);
-    --nav-group-fg-muted:      var(--a-fg-muted);
-    --nav-group-fg-selected:   var(--a-fg-strong);
-    --nav-group-bg-hover:      var(--a-bg-muted);
-    --nav-group-icon-size:     calc(var(--nav-group-row-height) - var(--a-space-2));
-    --nav-group-badge-size:    var(--a-ui-sm);
+    --nav-group-row-height-default:    var(--a-size);
+    --nav-group-row-height-sm-default: var(--a-size-sm);
+    --nav-group-row-height-lg-default: var(--a-size-lg);
+    --nav-group-row-px-default:        var(--a-ui-px);
+    --nav-group-row-gap-default:       var(--a-space-1);
+    --nav-group-row-radius-default:    var(--a-radius-md);
+    --nav-group-font-size-default:     var(--a-ui-size);
+    --nav-group-font-size-sm-default:  var(--a-ui-sm);
+    --nav-group-font-size-lg-default:  var(--a-ui-lg);
+    --nav-group-font-weight-default:   var(--a-weight-normal);
+    --nav-group-fg-default:            var(--a-fg);
+    --nav-group-fg-hover-default:      var(--a-fg-strong);
+    --nav-group-fg-muted-default:      var(--a-fg-muted);
+    --nav-group-fg-selected-default:   var(--a-fg-strong);
+    --nav-group-bg-hover-default:      var(--a-bg-muted);
+    --nav-group-icon-size-default:     calc(var(--nav-group-row-height, var(--nav-group-row-height-default)) - var(--a-space-2));
+    --nav-group-badge-size-default:    var(--a-ui-sm);
 
     --nav-item-child-height:    var(--a-size-sm);
-    --nav-item-child-font:      var(--nav-group-font-size);
+    --nav-item-child-font:      var(--nav-group-font-size, var(--nav-group-font-size-default));
   }
 
   :scope {
@@ -35,29 +35,29 @@
   :scope[open]::after {
     content: '';
     position: absolute;
-    left: calc(var(--nav-group-row-px) + var(--nav-group-icon-size) / 2);
+    left: calc(var(--nav-group-row-px, var(--nav-group-row-px-default)) + var(--nav-group-icon-size, var(--nav-group-icon-size-default)) / 2);
     transform: translateX(-50%);
-    top: var(--nav-group-row-height);
-    bottom: calc(var(--nav-group-row-height) / 2);
+    top: var(--nav-group-row-height, var(--nav-group-row-height-default));
+    bottom: calc(var(--nav-group-row-height, var(--nav-group-row-height-default)) / 2);
     width: 1px;
     background: var(--nav-group-indent-rail-bg);
     pointer-events: none;
   }
   :scope[open] > [slot="header"],
  :scope[open] > [slot="header"] [slot="icon"] {
-    color: var(--nav-group-fg-selected);
+    color: var(--nav-group-fg-selected, var(--nav-group-fg-selected-default));
   }
 
   /* Header row */
   [slot="header"] {
     display: flex;
     align-items: center;
-    gap: var(--nav-group-row-gap);
-    height: var(--nav-group-row-height);
-    padding: 0 var(--nav-group-row-px);
-    border-radius: var(--nav-group-row-radius);
-    font-size: var(--nav-group-font-size);
-    color: var(--nav-group-fg);
+    gap: var(--nav-group-row-gap, var(--nav-group-row-gap-default));
+    height: var(--nav-group-row-height, var(--nav-group-row-height-default));
+    padding: 0 var(--nav-group-row-px, var(--nav-group-row-px-default));
+    border-radius: var(--nav-group-row-radius, var(--nav-group-row-radius-default));
+    font-size: var(--nav-group-font-size, var(--nav-group-font-size-default));
+    color: var(--nav-group-fg, var(--nav-group-fg-default));
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
@@ -68,25 +68,25 @@
   }
 
   [slot="header"]:hover {
-    background: var(--nav-group-bg-hover);
-    color: var(--nav-group-fg-hover);
+    background: var(--nav-group-bg-hover, var(--nav-group-bg-hover-default));
+    color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
   }
 
   [slot="header"]:hover [slot="icon"] {
-    color: var(--nav-group-fg-hover);
+    color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
   }
 
   [slot="header"]:focus-visible {
-    background: var(--nav-group-bg-hover);
-    color: var(--nav-group-fg-hover);
+    background: var(--nav-group-bg-hover, var(--nav-group-bg-hover-default));
+    color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
     outline: none;
   }
 
   [slot="header"] [slot="icon"] {
-    width: var(--nav-group-icon-size);
-    height: var(--nav-group-icon-size);
+    width: var(--nav-group-icon-size, var(--nav-group-icon-size-default));
+    height: var(--nav-group-icon-size, var(--nav-group-icon-size-default));
     flex-shrink: 0;
-    color: var(--nav-group-fg-muted);
+    color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
     transition: color var(--nav-duration-fast) var(--nav-easing);
     display: flex;
     align-items: center;
@@ -106,8 +106,8 @@
   }
 
   [slot="header"] [slot="badge"] {
-    font-size: var(--nav-group-badge-size);
-    color: var(--nav-group-fg-muted);
+    font-size: var(--nav-group-badge-size, var(--nav-group-badge-size-default));
+    color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
     background: var(--nav-group-badge-bg);
     padding: 1px var(--nav-group-badge-px);
     border-radius: var(--nav-group-badge-radius);
@@ -116,7 +116,7 @@
 
   [slot="header"] [slot="caret"] {
     /*--a-icon-size: 0.5rem;*/
-    color: var(--nav-group-fg-muted);
+    color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
     transition:
       transform var(--nav-duration-fast) var(--nav-easing),
       color var(--nav-duration-fast) var(--nav-easing);
@@ -127,7 +127,7 @@
   }
 
   [slot="header"]:hover [slot="caret"] {
-    color: var(--nav-group-fg-hover);
+    color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
   }
 
   :scope:not([open]) > [slot="header"] [slot="caret"] {
@@ -192,13 +192,13 @@
 
   /* ── Size variants ── */
   :scope[size="sm"] {
-    --nav-group-row-height: var(--nav-group-row-height-sm);
-    --nav-group-font-size:  var(--nav-group-font-size-sm);
+    --nav-group-row-height-default: var(--nav-group-row-height-sm, var(--nav-group-row-height-sm-default));
+    --nav-group-font-size-default:  var(--nav-group-font-size-sm, var(--nav-group-font-size-sm-default));
   }
 
   :scope[size="lg"] {
-    --nav-group-row-height: var(--nav-group-row-height-lg);
-    --nav-group-font-size:  var(--nav-group-font-size-lg);
+    --nav-group-row-height-default: var(--nav-group-row-height-lg, var(--nav-group-row-height-lg-default));
+    --nav-group-font-size-default:  var(--nav-group-font-size-lg, var(--nav-group-font-size-lg-default));
   }
 }
 
@@ -222,7 +222,7 @@ nav-group-ui [slot="popover"] {
 nav-group-ui [slot="popover-label"] {
   padding: var(--a-space-1) var(--a-space-2);
   font-weight: var(--a-weight-medium);
-  color: var(--nav-group-fg-muted);
+  color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
   font-size: var(--a-ui-tiny);
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -231,7 +231,7 @@ nav-group-ui [slot="popover-label"] {
 nav-group-ui [slot="popover"] [role="option"] {
   padding: var(--a-space-1) var(--a-space-2);
   border-radius: var(--a-radius);
-  color: var(--nav-group-fg-muted);
+  color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
   cursor: pointer;
   white-space: nowrap;
   transition:
@@ -240,8 +240,8 @@ nav-group-ui [slot="popover"] [role="option"] {
 }
 
 nav-group-ui [slot="popover"] [role="option"]:hover {
-  background: var(--nav-group-bg-hover);
-  color: var(--nav-group-fg-hover);
+  background: var(--nav-group-bg-hover, var(--nav-group-bg-hover-default));
+  color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
 }
 
 /* Selected / current option — mirrors the main rail's nav-item selection:
@@ -249,8 +249,8 @@ nav-group-ui [slot="popover"] [role="option"]:hover {
 nav-group-ui [slot="popover"] [role="option"][aria-current="page"],
 nav-group-ui [slot="popover"] [role="option"][aria-selected="true"] {
   position: relative;
-  background: var(--nav-group-bg-hover);
-  color: var(--nav-group-fg-selected);
+  background: var(--nav-group-bg-hover, var(--nav-group-bg-hover-default));
+  color: var(--nav-group-fg-selected, var(--nav-group-fg-selected-default));
   font-weight: var(--a-weight-medium);
 }
 
@@ -283,7 +283,7 @@ nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"] {
   padding: var(--a-space-3) var(--a-space-2) var(--a-space-1);
   font-size: var(--a-kicker-sm, var(--a-ui-tiny));
   font-weight: var(--a-weight-medium);
-  color: var(--nav-group-fg-muted);
+  color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
   text-transform: uppercase;
   letter-spacing: 0.06em;
   cursor: default;
@@ -295,7 +295,7 @@ nav-group-ui[variant="section"] > [slot="header"]:focus-visible,
 nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"]:hover,
 nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"]:focus-visible {
   background: transparent;
-  color: var(--nav-group-fg-muted);
+  color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
 }
 
 nav-group-ui[variant="section"] > [slot="header"] [slot="caret"],

package/components/nav-group/nav-group.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UINavGroup } from './class.js';
+import { UINavGroup } from './nav-group.class.js';
 
 defineIfFree('nav-group-ui', UINavGroup);
 

package/components/nav-item/nav-item.css

@@ -6,49 +6,49 @@
    consumers extending below the floor and is harmlessly redundant on
    engines without the bug. */
 nav-item-ui:hover {
-  background: var(--nav-item-bg-hover);
-  color: var(--nav-item-fg-hover);
+  background: var(--nav-item-bg-hover, var(--nav-item-bg-hover-default));
+  color: var(--nav-item-fg-hover, var(--nav-item-fg-hover-default));
 }
 nav-item-ui:hover [slot="icon"] {
-  color: var(--nav-item-fg-hover);
+  color: var(--nav-item-fg-hover, var(--nav-item-fg-hover-default));
 }
 nav-item-ui[selected] {
-  background: var(--nav-item-bg-selected);
-  color: var(--nav-item-fg-selected);
+  background: var(--nav-item-bg-selected, var(--nav-item-bg-selected-default));
+  color: var(--nav-item-fg-selected, var(--nav-item-fg-selected-default));
 }
 nav-item-ui[selected] [slot="icon"] {
-  color: var(--nav-item-icon-fg-selected);
+  color: var(--nav-item-icon-fg-selected, var(--nav-item-icon-fg-selected-default));
 }
 nav-item-ui[selected] [slot="icon"]:empty::before {
   content: '';
   width: 2px;
   height: 1em;
   border-radius: 1px;
-  background: var(--nav-item-accent);
+  background: var(--nav-item-accent, var(--nav-item-accent-default));
 }
 
 @scope (nav-item-ui) {
   :where(:scope) {
-    --nav-item-accent:          var(--a-accent);
-    --nav-item-row-height:      var(--a-size);
-    --nav-item-row-height-sm:   var(--a-size-sm);
-    --nav-item-row-height-lg:   var(--a-size-lg);
-    --nav-item-row-px:          var(--a-ui-px);
-    --nav-item-row-gap:         var(--a-space-1);
-    --nav-item-row-radius:      var(--a-radius-md);
-    --nav-item-font-size:       var(--a-ui-size);
-    --nav-item-font-size-sm:    var(--a-ui-sm);
-    --nav-item-font-size-lg:    var(--a-ui-lg);
-    --nav-item-font-weight:     var(--a-weight-normal);
-    --nav-item-fg:              var(--a-ui-text-subtle);
-    --nav-item-fg-hover:        var(--a-ui-text-hover);
-    --nav-item-fg-selected:     var(--a-ui-text-selected);
-    --nav-item-icon-fg:         var(--a-ui-text-muted);
-    --nav-item-icon-fg-selected: var(--nav-item-accent);
-    --nav-item-bg-hover:        var(--a-ui-bg-hover);
-    --nav-item-bg-selected:     var(--a-ui-bg-selected);
-    --nav-item-icon-size:       calc(var(--nav-item-row-height) - var(--a-space-2));
-    --nav-item-badge-size:      var(--a-ui-sm);
+    --nav-item-accent-default:          var(--a-accent);
+    --nav-item-row-height-default:      var(--a-size);
+    --nav-item-row-height-sm-default:   var(--a-size-sm);
+    --nav-item-row-height-lg-default:   var(--a-size-lg);
+    --nav-item-row-px-default:          var(--a-ui-px);
+    --nav-item-row-gap-default:         var(--a-space-1);
+    --nav-item-row-radius-default:      var(--a-radius-md);
+    --nav-item-font-size-default:       var(--a-ui-size);
+    --nav-item-font-size-sm-default:    var(--a-ui-sm);
+    --nav-item-font-size-lg-default:    var(--a-ui-lg);
+    --nav-item-font-weight-default:     var(--a-weight-normal);
+    --nav-item-fg-default:              var(--a-ui-text-subtle);
+    --nav-item-fg-hover-default:        var(--a-ui-text-hover);
+    --nav-item-fg-selected-default:     var(--a-ui-text-selected);
+    --nav-item-icon-fg-default:         var(--a-ui-text-muted);
+    --nav-item-icon-fg-selected-default: var(--nav-item-accent, var(--nav-item-accent-default));
+    --nav-item-bg-hover-default:        var(--a-ui-bg-hover);
+    --nav-item-bg-selected-default:     var(--a-ui-bg-selected);
+    --nav-item-icon-size-default:       calc(var(--nav-item-row-height, var(--nav-item-row-height-default)) - var(--a-space-2));
+    --nav-item-badge-size-default:      var(--a-ui-sm);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -56,12 +56,12 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    gap: var(--nav-item-row-gap);
-    height: var(--nav-item-row-height);
-    padding: 0 var(--nav-item-row-px);
-    border-radius: var(--nav-item-row-radius);
-    font-size: var(--nav-item-font-size);
-    color: var(--nav-item-fg);
+    gap: var(--nav-item-row-gap, var(--nav-item-row-gap-default));
+    height: var(--nav-item-row-height, var(--nav-item-row-height-default));
+    padding: 0 var(--nav-item-row-px, var(--nav-item-row-px-default));
+    border-radius: var(--nav-item-row-radius, var(--nav-item-row-radius-default));
+    font-size: var(--nav-item-font-size, var(--nav-item-font-size-default));
+    color: var(--nav-item-fg, var(--nav-item-fg-default));
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
@@ -69,12 +69,12 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
       background var(--nav-duration-fast) var(--nav-easing),
       color var(--nav-duration-fast) var(--nav-easing);
     outline: none;
-    font-weight: var(--nav-item-font-weight);
+    font-weight: var(--nav-item-font-weight, var(--nav-item-font-weight-default));
   }
 
   :scope:focus-visible {
-    background: var(--nav-item-bg-hover);
-    color: var(--nav-item-fg-hover);
+    background: var(--nav-item-bg-hover, var(--nav-item-bg-hover-default));
+    color: var(--nav-item-fg-hover, var(--nav-item-fg-hover-default));
     outline: none;
   }
 
@@ -82,13 +82,13 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
 
   /* Icon slot — always present, reserves space even when empty */
   [slot="icon"] {
-    width: var(--nav-item-icon-size);
-    height: var(--nav-item-icon-size);
+    width: var(--nav-item-icon-size, var(--nav-item-icon-size-default));
+    height: var(--nav-item-icon-size, var(--nav-item-icon-size-default));
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--nav-item-icon-fg);
+    color: var(--nav-item-icon-fg, var(--nav-item-icon-fg-default));
     transition: color var(--nav-duration-fast) var(--nav-easing);
   }
 
@@ -106,7 +106,7 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
   }
 
   [slot="badge"] {
-    font-size: var(--nav-item-badge-size);
+    font-size: var(--nav-item-badge-size, var(--nav-item-badge-size-default));
     color: var(--nav-item-badge-fg);
     background: var(--nav-item-badge-bg);
     padding: 1px var(--nav-item-badge-px);
@@ -153,13 +153,13 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
 
   /* ── Size variants ── */
   :scope[size="sm"] {
-    --nav-item-row-height: var(--nav-item-row-height-sm);
-    --nav-item-font-size:  var(--nav-item-font-size-sm);
+    --nav-item-row-height-default: var(--nav-item-row-height-sm, var(--nav-item-row-height-sm-default));
+    --nav-item-font-size-default:  var(--nav-item-font-size-sm, var(--nav-item-font-size-sm-default));
   }
 
   :scope[size="lg"] {
-    --nav-item-row-height: var(--nav-item-row-height-lg);
-    --nav-item-font-size:  var(--nav-item-font-size-lg);
+    --nav-item-row-height-default: var(--nav-item-row-height-lg, var(--nav-item-row-height-lg-default));
+    --nav-item-font-size-default:  var(--nav-item-font-size-lg, var(--nav-item-font-size-lg-default));
   }
 }
 

package/components/nav-item/nav-item.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UINavItem } from './class.js';
+import { UINavItem } from './nav-item.class.js';
 
 defineIfFree('nav-item-ui', UINavItem);
 

package/components/noodles/noodles.css

@@ -1,22 +1,22 @@
 @scope (noodles-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --noodles-duration:             var(--a-duration-fast);
-    --noodles-easing:               var(--a-easing);
-    --noodles-stroke:               var(--a-accent-bg);
+    --noodles-duration-default:             var(--a-duration-fast);
+    --noodles-easing-default:               var(--a-easing);
+    --noodles-stroke-default:               var(--a-accent-bg);
     /* Component-intrinsic visual constants; no --a-space-* equivalent */
-    --noodles-stroke-width:         2px;
-    --noodles-stroke-readonly:      var(--a-fg-muted);
+    --noodles-stroke-width-default:         2px;
+    --noodles-stroke-readonly-default:      var(--a-fg-muted);
     /* Component-intrinsic visual constants; no --a-space-* equivalent */
-    --noodles-port-size:            10px;
-    --noodles-port-bg:              var(--a-accent-bg);
-    --noodles-port-border:          var(--a-bg);
-    --noodles-port-hover-ring:      0 0 0 3px var(--a-bg-muted);
-    --noodles-port-drop-scale:      1.4;
-    --noodles-port-drag-opacity:    0.4;
-    --noodles-dash-length:          8;
-    --noodles-dash-gap:             4;
-    --noodles-anim-speed:           0.6s;
+    --noodles-port-size-default:            10px;
+    --noodles-port-bg-default:              var(--a-accent-bg);
+    --noodles-port-border-default:          var(--a-bg);
+    --noodles-port-hover-ring-default:      0 0 0 3px var(--a-bg-muted);
+    --noodles-port-drop-scale-default:      1.4;
+    --noodles-port-drag-opacity-default:    0.4;
+    --noodles-dash-length-default:          8;
+    --noodles-dash-gap-default:             4;
+    --noodles-anim-speed-default:           0.6s;
   }
 
   :scope {
@@ -41,25 +41,25 @@
 
   :scope > svg[data-noodle-svg] path {
     fill: none;
-    stroke: var(--noodles-stroke);
-    stroke-width: var(--noodles-stroke-width);
+    stroke: var(--noodles-stroke, var(--noodles-stroke-default));
+    stroke-width: var(--noodles-stroke-width, var(--noodles-stroke-width-default));
     stroke-linecap: round;
     stroke-linejoin: round;
     transition:
-      stroke var(--noodles-duration) var(--noodles-easing),
-      stroke-dasharray var(--noodles-duration) var(--noodles-easing);
+      stroke var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default)),
+      stroke-dasharray var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default));
   }
 
   /* ── State: readonly ── */
   :scope[readonly] > svg[data-noodle-svg] path {
-    stroke: var(--noodles-stroke-readonly);
+    stroke: var(--noodles-stroke-readonly, var(--noodles-stroke-readonly-default));
     stroke-dasharray: 6 4;
   }
 
   /* ── State: animated ── */
   :scope[animated] > svg[data-noodle-svg] path {
-    stroke-dasharray: var(--noodles-dash-length) var(--noodles-dash-gap);
-    animation: noodle-march var(--noodles-anim-speed) linear infinite;
+    stroke-dasharray: var(--noodles-dash-length, var(--noodles-dash-length-default)) var(--noodles-dash-gap, var(--noodles-dash-gap-default));
+    animation: noodle-march var(--noodles-anim-speed, var(--noodles-anim-speed-default)) linear infinite;
   }
 
   @keyframes noodle-march {
@@ -71,33 +71,33 @@
   /* ── Port indicators ── */
   [data-noodle-port-indicator] {
     position: absolute;
-    width: var(--noodles-port-size);
-    height: var(--noodles-port-size);
+    width: var(--noodles-port-size, var(--noodles-port-size-default));
+    height: var(--noodles-port-size, var(--noodles-port-size-default));
     border-radius: 50%;
-    background: var(--noodles-port-bg);
-    border: 2px solid var(--noodles-port-border);
+    background: var(--noodles-port-bg, var(--noodles-port-bg-default));
+    border: 2px solid var(--noodles-port-border, var(--noodles-port-border-default));
     transform: translate(-50%, -50%);
     z-index: 2;
     cursor: crosshair;
     pointer-events: auto;
     transition:
-      transform var(--noodles-duration) var(--noodles-easing),
-      opacity var(--noodles-duration) var(--noodles-easing),
-      box-shadow var(--noodles-duration) var(--noodles-easing);
+      transform var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default)),
+      opacity var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default)),
+      box-shadow var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default));
   }
 
   [data-noodle-port-indicator]:hover {
-    box-shadow: var(--noodles-port-hover-ring);
+    box-shadow: var(--noodles-port-hover-ring, var(--noodles-port-hover-ring-default));
   }
 
   /* ── State: drop ready ── */
   [data-noodle-drop-ready] {
-    transform: translate(-50%, -50%) scale(var(--noodles-port-drop-scale));
+    transform: translate(-50%, -50%) scale(var(--noodles-port-drop-scale, var(--noodles-port-drop-scale-default)));
   }
 
   /* ── State: dragging ── */
   [data-noodle-dragging] {
-    opacity: var(--noodles-port-drag-opacity);
+    opacity: var(--noodles-port-drag-opacity, var(--noodles-port-drag-opacity-default));
   }
 
   /* ── State: readonly ports ── */