@adia-ai/web-components 0.7.3 → 0.7.5

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

@@ -1,38 +1,38 @@
 @scope (nav-group-ui) {
   :where(:scope) {
-    --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-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-item-child-height:    var(--a-size-sm);
-    --nav-item-child-font:      var(--nav-group-font-size, var(--nav-group-font-size-default));
+    --nav-item-child-font:      var(--nav-group-font-size);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    /* Fallback to --nav-gap-default (cascaded from the ancestor nav-ui
+    /* Fallback to --nav-gap (cascaded from the ancestor nav-ui
        where it's defined) so child nav-items get the spec spacing even
        when the override token --nav-gap isn't explicitly set. Without
        the fallback `var(--nav-gap)` resolved to empty → invalid gap →
        items packed at 0 px stride. Reported 2026-05-25; latent since
        Apr-20 snapshot. */
-    gap: var(--nav-gap, var(--nav-gap-default, var(--a-space-1)));
+    gap: var(--nav-gap, var(--a-space-1));
     position: relative;
     font-weight: var(--nav-group-text-weight);
   }
@@ -41,29 +41,29 @@
   :scope[open]::after {
     content: '';
     position: absolute;
-    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);
+    left: calc(var(--nav-group-row-px) + var(--nav-group-icon-size) / 2);
     transform: translateX(-50%);
-    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);
+    top: var(--nav-group-row-height);
+    bottom: calc(var(--nav-group-row-height) / 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, var(--nav-group-fg-selected-default));
+    color: var(--nav-group-fg-selected);
   }
 
   /* Header row */
   [slot="header"] {
     display: flex;
     align-items: center;
-    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));
+    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);
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
@@ -74,25 +74,25 @@
   }
 
   [slot="header"]: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));
+    background: var(--nav-group-bg-hover);
+    color: var(--nav-group-fg-hover);
   }
 
   [slot="header"]:hover [slot="icon"] {
-    color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
+    color: var(--nav-group-fg-hover);
   }
 
   [slot="header"]:focus-visible {
-    background: var(--nav-group-bg-hover, var(--nav-group-bg-hover-default));
-    color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
+    background: var(--nav-group-bg-hover);
+    color: var(--nav-group-fg-hover);
     outline: none;
   }
 
   [slot="header"] [slot="icon"] {
-    width: var(--nav-group-icon-size, var(--nav-group-icon-size-default));
-    height: var(--nav-group-icon-size, var(--nav-group-icon-size-default));
+    width: var(--nav-group-icon-size);
+    height: var(--nav-group-icon-size);
     flex-shrink: 0;
-    color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
+    color: var(--nav-group-fg-muted);
     transition: color var(--nav-duration-fast) var(--nav-easing);
     display: flex;
     align-items: center;
@@ -112,8 +112,8 @@
   }
 
   [slot="header"] [slot="badge"] {
-    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));
+    font-size: var(--nav-group-badge-size);
+    color: var(--nav-group-fg-muted);
     background: var(--nav-group-badge-bg);
     padding: 1px var(--nav-group-badge-px);
     border-radius: var(--nav-group-badge-radius);
@@ -122,7 +122,7 @@
 
   [slot="header"] [slot="caret"] {
     /*--a-icon-size: 0.5rem;*/
-    color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
+    color: var(--nav-group-fg-muted);
     transition:
       transform var(--nav-duration-fast) var(--nav-easing),
       color var(--nav-duration-fast) var(--nav-easing);
@@ -133,7 +133,7 @@
   }
 
   [slot="header"]:hover [slot="caret"] {
-    color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
+    color: var(--nav-group-fg-hover);
   }
 
   :scope:not([open]) > [slot="header"] [slot="caret"] {
@@ -198,13 +198,13 @@
 
   /* ── Size variants ── */
   :scope[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));
+    --nav-group-row-height: var(--nav-group-row-height-sm);
+    --nav-group-font-size:  var(--nav-group-font-size-sm);
   }
 
   :scope[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));
+    --nav-group-row-height: var(--nav-group-row-height-lg);
+    --nav-group-font-size:  var(--nav-group-font-size-lg);
   }
 }
 
@@ -228,7 +228,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, var(--nav-group-fg-muted-default));
+  color: var(--nav-group-fg-muted);
   font-size: var(--a-ui-tiny);
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -237,7 +237,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, var(--nav-group-fg-muted-default));
+  color: var(--nav-group-fg-muted);
   cursor: pointer;
   white-space: nowrap;
   transition:
@@ -246,8 +246,8 @@ nav-group-ui [slot="popover"] [role="option"] {
 }
 
 nav-group-ui [slot="popover"] [role="option"]: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));
+  background: var(--nav-group-bg-hover);
+  color: var(--nav-group-fg-hover);
 }
 
 /* Selected / current option — mirrors the main rail's nav-item selection:
@@ -255,8 +255,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, var(--nav-group-bg-hover-default));
-  color: var(--nav-group-fg-selected, var(--nav-group-fg-selected-default));
+  background: var(--nav-group-bg-hover);
+  color: var(--nav-group-fg-selected);
   font-weight: var(--a-weight-medium);
 }
 
@@ -289,7 +289,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, var(--nav-group-fg-muted-default));
+  color: var(--nav-group-fg-muted);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   cursor: default;
@@ -301,7 +301,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, var(--nav-group-fg-muted-default));
+  color: var(--nav-group-fg-muted);
 }
 
 nav-group-ui[variant="section"] > [slot="header"] [slot="caret"],

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, var(--nav-item-bg-hover-default));
-  color: var(--nav-item-fg-hover, var(--nav-item-fg-hover-default));
+  background: var(--nav-item-bg-hover);
+  color: var(--nav-item-fg-hover);
 }
 nav-item-ui:hover [slot="icon"] {
-  color: var(--nav-item-fg-hover, var(--nav-item-fg-hover-default));
+  color: var(--nav-item-fg-hover);
 }
 nav-item-ui[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));
+  background: var(--nav-item-bg-selected);
+  color: var(--nav-item-fg-selected);
 }
 nav-item-ui[selected] [slot="icon"] {
-  color: var(--nav-item-icon-fg-selected, var(--nav-item-icon-fg-selected-default));
+  color: var(--nav-item-icon-fg-selected);
 }
 nav-item-ui[selected] [slot="icon"]:empty::before {
   content: '';
   width: 2px;
   height: 1em;
   border-radius: 1px;
-  background: var(--nav-item-accent, var(--nav-item-accent-default));
+  background: var(--nav-item-accent);
 }
 
 @scope (nav-item-ui) {
   :where(:scope) {
-    --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);
+    --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);
     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, 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));
+    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);
     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, var(--nav-item-font-weight-default));
+    font-weight: var(--nav-item-font-weight);
   }
 
   :scope:focus-visible {
-    background: var(--nav-item-bg-hover, var(--nav-item-bg-hover-default));
-    color: var(--nav-item-fg-hover, var(--nav-item-fg-hover-default));
+    background: var(--nav-item-bg-hover);
+    color: var(--nav-item-fg-hover);
     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, var(--nav-item-icon-size-default));
-    height: var(--nav-item-icon-size, var(--nav-item-icon-size-default));
+    width: var(--nav-item-icon-size);
+    height: var(--nav-item-icon-size);
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--nav-item-icon-fg, var(--nav-item-icon-fg-default));
+    color: var(--nav-item-icon-fg);
     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, var(--nav-item-badge-size-default));
+    font-size: var(--nav-item-badge-size);
     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-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));
+    --nav-item-row-height: var(--nav-item-row-height-sm);
+    --nav-item-font-size:  var(--nav-item-font-size-sm);
   }
 
   :scope[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));
+    --nav-item-row-height: var(--nav-item-row-height-lg);
+    --nav-item-font-size:  var(--nav-item-font-size-lg);
   }
 }
 

package/components/noodles/noodles.css

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

package/components/number-format/number-format.css

@@ -4,14 +4,14 @@
 
 @scope (number-format-ui) {
   :where(:scope) {
-    --number-format-fg-default: inherit;
-    --number-format-font-default: inherit;
+    --number-format-fg: inherit;
+    --number-format-font: inherit;
   }
 
   :scope {
     display: inline;
-    color: var(--number-format-fg, var(--number-format-fg-default));
-    font-family: var(--number-format-font, var(--number-format-font-default));
+    color: var(--number-format-fg);
+    font-family: var(--number-format-font);
     /* Tabular figures so column-aligned numeric displays line up cleanly. */
     font-variant-numeric: tabular-nums;
   }