@adia-ai/web-components 0.7.3 → 0.7.5

package/components/link/link.css

@@ -7,16 +7,16 @@
 
 @scope (link-ui) {
   :where(:scope) {
-    --link-fg-default:              var(--a-link);
-    --link-fg-hover-default:        var(--a-link-hover);
-    --link-fg-visited-default:      var(--a-link-visited);
-    --link-underline-offset-default: 2px;
-    --link-focus-ring-default:      var(--a-focus-ring);
+    --link-fg:              var(--a-link);
+    --link-fg-hover:        var(--a-link-hover);
+    --link-fg-visited:      var(--a-link-visited);
+    --link-underline-offset: 2px;
+    --link-focus-ring:      var(--a-focus-ring);
   }
 
   :scope {
     display: inline;
-    color: var(--link-fg, var(--link-fg-default));
+    color: var(--link-fg);
     /* The text-decoration is on the inner <a>, not the host, so that
        host-level color overrides cascade correctly. */
   }
@@ -24,7 +24,7 @@
   :scope > a {
     color: inherit;
     text-decoration: underline;
-    text-underline-offset: var(--link-underline-offset, var(--link-underline-offset-default));
+    text-underline-offset: var(--link-underline-offset);
     cursor: pointer;
     /* Standard transition for color hover. */
     transition: color var(--a-duration-fast) var(--a-easing);
@@ -38,17 +38,17 @@
   }
 
   :scope > a:hover {
-    color: var(--link-fg-hover, var(--link-fg-hover-default));
+    color: var(--link-fg-hover);
   }
 
   :scope > a:visited {
-    color: var(--link-fg-visited, var(--link-fg-visited-default));
+    color: var(--link-fg-visited);
   }
 
   /* Focus ring on the anchor (the actual focusable element). */
   :scope > a:focus-visible {
     outline: none;
-    box-shadow: var(--link-focus-ring, var(--link-focus-ring-default));
+    box-shadow: var(--link-focus-ring);
     border-radius: var(--a-radius-sm);
   }
 
@@ -67,8 +67,8 @@
      affordance is implied by hover behavior + cursor. For "Already
      have an account?" type prose where the link role is contextual. */
   :scope[variant="quiet"] {
-    --link-fg-default: inherit;
-    --link-fg-hover-default: var(--a-link-hover);
+    --link-fg: inherit;
+    --link-fg-hover: var(--a-link-hover);
   }
   :scope[variant="quiet"] > a {
     text-decoration: none;

package/components/list/list.css

@@ -1,10 +1,10 @@
 @scope (list-ui) {
   :where(:scope) {
     /* ── Colors ── */
-    --list-divider-color-default: var(--a-border-subtle);
-    --list-bg-selected-default:   var(--a-accent-muted);
-    --list-fg-selected-default:   var(--a-accent-strong);
-    --list-border-selected-default: var(--a-accent-strong);
+    --list-divider-color: var(--a-border-subtle);
+    --list-bg-selected:   var(--a-accent-muted);
+    --list-fg-selected:   var(--a-accent-strong);
+    --list-border-selected: var(--a-accent-strong);
   }
 
   :scope {
@@ -17,7 +17,7 @@
 
   /* ── Divider ── */
   :scope[divider] list-item-ui + list-item-ui {
-    border-top: 1px solid var(--list-divider-color, var(--list-divider-color-default));
+    border-top: 1px solid var(--list-divider-color);
   }
 
   /* ── Item padding / margin (controlled by list-ui attributes) ──
@@ -68,9 +68,9 @@
   }
 
   :scope[selectable] > [role="listitem"][aria-selected="true"] {
-    background: var(--list-bg-selected, var(--list-bg-selected-default));
-    color: var(--list-fg-selected, var(--list-fg-selected-default));
-    border-inline-start-color: var(--list-border-selected, var(--list-border-selected-default));
+    background: var(--list-bg-selected);
+    color: var(--list-fg-selected);
+    border-inline-start-color: var(--list-border-selected);
   }
 
   :scope[selectable] > [role="listitem"]:focus-visible {

package/components/list-window/list-window.css

@@ -1,10 +1,10 @@
 @scope (list-window-ui) {
   /* ── Block 1 — TOKENS (zero-specificity, exposable for theming) ── */
   :where(:scope) {
-    --list-window-bg-default:              var(--a-bg);
-    --list-window-row-gap-default:         var(--a-space-1);
-    --list-window-overscan-bg-default:     transparent;
-    --list-window-sentinel-size-default:   var(--a-space-2);
+    --list-window-bg:              var(--a-bg);
+    --list-window-row-gap:         var(--a-space-1);
+    --list-window-overscan-bg:     transparent;
+    --list-window-sentinel-size:   var(--a-space-2);
   }
 
   /* ── Block 2 — BASE styles consuming the tokens above ── */
@@ -14,7 +14,7 @@
     position: relative;
     overflow: auto;
     contain: strict;
-    background: var(--list-window-bg, var(--list-window-bg-default));
+    background: var(--list-window-bg);
     isolation: isolate;
     outline: none;
   }
@@ -43,7 +43,7 @@
     inset-inline-end: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--list-window-row-gap, var(--list-window-row-gap-default));
+    gap: var(--list-window-row-gap);
     will-change: transform;
   }
 
@@ -63,7 +63,7 @@
     position: absolute;
     inset-inline-start: 0;
     inset-inline-end: 0;
-    height: var(--list-window-sentinel-size, var(--list-window-sentinel-size-default));
+    height: var(--list-window-sentinel-size);
     pointer-events: none;
   }
   :scope > [data-sentinel="top"]    { top: 0; }
@@ -75,13 +75,13 @@
     position: sticky;
     top: 0;
     z-index: 1;
-    background: var(--list-window-bg, var(--list-window-bg-default));
+    background: var(--list-window-bg);
   }
   :scope [slot="after"] {
     position: sticky;
     bottom: 0;
     z-index: 1;
-    background: var(--list-window-bg, var(--list-window-bg-default));
+    background: var(--list-window-bg);
   }
 
   /* ── Horizontal mode ── */
@@ -89,7 +89,7 @@
     flex-direction: row;
   }
   :scope[direction="horizontal"] > [data-sentinel] {
-    width: var(--list-window-sentinel-size, var(--list-window-sentinel-size-default));
+    width: var(--list-window-sentinel-size);
     height: auto;
     top: 0;
     bottom: 0;

package/components/loading-overlay/loading-overlay.css

@@ -1,16 +1,15 @@
 @scope (loading-overlay-ui) {
   /* ── Block 1 — TOKENS ─────────────────────────────────────────────
-     Loading-overlay covers a positioned parent. Backdrop tint, corner
-     radius, stacking order, and motion are all consumer-overridable
-     via the `var(--public, var(--public-default))` chain (per
-     component-token-contract.md §"The two-block @scope pattern"). */
+     Loading-overlay covers a positioned parent: backdrop tint, corner
+     radius, stacking order, and motion. Variants below re-point these
+     component-named tokens (per component-token-contract.md). */
   :where(:scope) {
-    --loading-overlay-bg-default:        var(--a-scrim-default);
-    --loading-overlay-radius-default:    var(--a-radius-md);
-    --loading-overlay-z-default:         50;
-    --loading-overlay-duration-default:  var(--a-duration);
-    --loading-overlay-easing-default:    var(--a-easing-out);
-    --loading-overlay-gap-default:       var(--a-space-3);
+    --loading-overlay-bg:        var(--a-scrim-default);
+    --loading-overlay-radius:    var(--a-radius-md);
+    --loading-overlay-z:         50;
+    --loading-overlay-duration:  var(--a-duration);
+    --loading-overlay-easing:    var(--a-easing-out);
+    --loading-overlay-gap:       var(--a-space-3);
   }
 
   /* ── Block 2 — BASE
@@ -25,15 +24,15 @@
     inset: 0;
     display: grid;
     place-items: center;
-    gap: var(--loading-overlay-gap, var(--loading-overlay-gap-default));
-    background: var(--loading-overlay-bg, var(--loading-overlay-bg-default));
-    border-radius: var(--loading-overlay-radius, var(--loading-overlay-radius-default));
-    z-index: var(--loading-overlay-z, var(--loading-overlay-z-default));
+    gap: var(--loading-overlay-gap);
+    background: var(--loading-overlay-bg);
+    border-radius: var(--loading-overlay-radius);
+    z-index: var(--loading-overlay-z);
     opacity: 0;
     pointer-events: none;
     transition:
-      opacity var(--loading-overlay-duration, var(--loading-overlay-duration-default))
-              var(--loading-overlay-easing, var(--loading-overlay-easing-default));
+      opacity var(--loading-overlay-duration)
+              var(--loading-overlay-easing);
   }
 
   /* ── Active state — fade in + capture pointer events ─────────────
@@ -52,11 +51,11 @@
      blur: light scrim plus backdrop-filter blur on the underlying
      content. Use sparingly — Safari < 18 paint cost. */
   :scope[variant="transparent"] {
-    --loading-overlay-bg-default: transparent;
+    --loading-overlay-bg: transparent;
   }
 
   :scope[variant="blur"] {
-    --loading-overlay-bg-default: var(--a-scrim-weak);
+    --loading-overlay-bg: var(--a-scrim-weak);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
   }

package/components/loading-overlay/loading-overlay.test.js

@@ -207,14 +207,14 @@ describe('loading-overlay-ui — CSS source contract', () => {
     expect(LO_CSS).toMatch(/^\s*:scope\s*\{/m);
   });
 
-  it('declares the documented component tokens with -default suffix', () => {
+  it('declares the documented component tokens', () => {
     for (const tok of [
-      '--loading-overlay-bg-default',
-      '--loading-overlay-radius-default',
-      '--loading-overlay-z-default',
-      '--loading-overlay-duration-default',
-      '--loading-overlay-easing-default',
-      '--loading-overlay-gap-default',
+      '--loading-overlay-bg',
+      '--loading-overlay-radius',
+      '--loading-overlay-z',
+      '--loading-overlay-duration',
+      '--loading-overlay-easing',
+      '--loading-overlay-gap',
     ]) {
       expect(LO_CSS).toContain(tok);
     }
@@ -237,7 +237,7 @@ describe('loading-overlay-ui — CSS source contract', () => {
   });
 
   it('transparent variant drops the backdrop fill', () => {
-    expect(LO_CSS).toMatch(/:scope\[variant="transparent"\][^}]*--loading-overlay-bg-default:\s*transparent/);
+    expect(LO_CSS).toMatch(/:scope\[variant="transparent"\][^}]*--loading-overlay-bg:\s*transparent/);
   });
 
   it('blur variant applies backdrop-filter blur', () => {

package/components/mark/mark.css

@@ -1,9 +1,9 @@
 @scope (mark-ui) {
   :where(:scope) {
-    --mark-bg-default:     var(--a-warning-muted);
-    --mark-fg-default:     var(--a-warning-text);
-    --mark-px-default:     var(--a-space-0-5);
-    --mark-radius-default: var(--a-radius-xs);
+    --mark-bg:     var(--a-warning-muted);
+    --mark-fg:     var(--a-warning-text);
+    --mark-px:     var(--a-space-0-5);
+    --mark-radius: var(--a-radius-xs);
   }
 
   :scope {
@@ -11,29 +11,29 @@
        Padding-inline only — vertical padding would push line-height. */
     display: inline;
     box-sizing: border-box;
-    padding-inline: var(--mark-px, var(--mark-px-default));
-    background: var(--mark-bg, var(--mark-bg-default));
-    color: var(--mark-fg, var(--mark-fg-default));
-    border-radius: var(--mark-radius, var(--mark-radius-default));
+    padding-inline: var(--mark-px);
+    background: var(--mark-bg);
+    color: var(--mark-fg);
+    border-radius: var(--mark-radius);
     /* Preserve text decoration from ancestors (e.g. link underlines) */
     text-decoration: inherit;
   }
 
   /* Variants — same role × state pair as alert-ui / tag-ui */
   :scope[variant="info"] {
-    --mark-bg-default: var(--a-info-muted);
-    --mark-fg-default: var(--a-info-text);
+    --mark-bg: var(--a-info-muted);
+    --mark-fg: var(--a-info-text);
   }
   :scope[variant="success"] {
-    --mark-bg-default: var(--a-success-muted);
-    --mark-fg-default: var(--a-success-text);
+    --mark-bg: var(--a-success-muted);
+    --mark-fg: var(--a-success-text);
   }
   :scope[variant="danger"] {
-    --mark-bg-default: var(--a-danger-muted);
-    --mark-fg-default: var(--a-danger-text);
+    --mark-bg: var(--a-danger-muted);
+    --mark-fg: var(--a-danger-text);
   }
   :scope[variant="muted"] {
-    --mark-bg-default: var(--a-bg-muted);
-    --mark-fg-default: var(--a-fg);
+    --mark-bg: var(--a-bg-muted);
+    --mark-fg: var(--a-fg);
   }
 }

package/components/menu/menu.css

@@ -1,13 +1,13 @@
 @scope (menu-ui) {
   :where(:scope) {
-    --menu-popover-padding-default:    var(--a-space-1);
-    --menu-popover-border-default:     var(--a-border-subtle);
-    --menu-popover-radius-default:     var(--a-radius-lg);
-    --menu-popover-bg-default:         var(--a-bg-subtle);
-    --menu-popover-shadow-default:     var(--a-shadow-lg);
-    --menu-popover-min-width-default:  10rem;
-    --menu-popover-font-size-default:  var(--a-ui-size);
-    --menu-popover-fg-default:         var(--a-fg);
+    --menu-popover-padding:    var(--a-space-1);
+    --menu-popover-border:     var(--a-border-subtle);
+    --menu-popover-radius:     var(--a-radius-lg);
+    --menu-popover-bg:         var(--a-bg-subtle);
+    --menu-popover-shadow:     var(--a-shadow-lg);
+    --menu-popover-min-width:  10rem;
+    --menu-popover-font-size:  var(--a-ui-size);
+    --menu-popover-fg:         var(--a-fg);
   }
 
   :scope {
@@ -38,7 +38,7 @@ menu-ui [data-menu-popover] {
   background: var(--a-bg-subtle);
   box-shadow: var(--a-shadow-lg);
   min-width: 10rem;
-  font-family: inherit;
+  font-family: var(--menu-font-family, var(--a-font-family-ui));
   font-size: var(--a-ui-size);
   color: var(--a-fg);
   /* Fade + lift in on first paint via @starting-style. Plain `transition`

package/components/modal/modal.class.js

@@ -122,16 +122,12 @@ export class UIModal extends UIElement {
   }
 
   #getDuration() {
-    // Read the same fallback chain the CSS transitions use —
-    // var(--modal-duration, var(--modal-duration-default)). Reading only the
-    // public token (unset unless a consumer overrides) made this always fall
-    // back to 200ms while the CSS exit animation ran for --modal-duration-default
-    // (= --a-duration = 250ms), so the dialog closed 50ms early, clipping the
-    // animation. Same class as swiper bug-29 (the OD-5 -default token sweep left
-    // JS read-sites pointed at the now-unset public token).
+    // Read the computed `--modal-duration` (= --a-duration = 250ms unless a
+    // consumer overrides) so the JS close timer matches the CSS exit animation
+    // exactly — a stale/unset value clipped the animation ~50ms early
+    // (bug class shared with swiper bug-29).
     const cs = getComputedStyle(this);
-    const raw = cs.getPropertyValue('--modal-duration').trim()
-             || cs.getPropertyValue('--modal-duration-default').trim();
+    const raw = cs.getPropertyValue('--modal-duration').trim();
     return parseFloat(raw) || 200;
   }
 

package/components/modal/modal.css

@@ -9,24 +9,24 @@
 
 @scope (modal-ui) {
   :where(:scope) {
-    --modal-width-default:          32rem;
-    --modal-radius-default:         var(--a-radius-lg);
-    --modal-bg-default:             var(--a-bg-subtle);
-    --modal-border-default:         var(--a-border-subtle);
-    --modal-shadow-default:         var(--a-shadow-lg);
-    --modal-backdrop-default:       var(--a-scrim-dialog);
-    --modal-duration-default:       var(--a-duration);
-    --modal-easing-default:         var(--a-easing-out);
-    --modal-heading-size-default:   var(--a-ui-lg);
-    --modal-heading-weight-default: var(--a-weight-semibold);
-    --modal-header-fg-default:      var(--a-fg);
-    --modal-close-fg-default:       var(--a-fg-muted);
-    --modal-close-hover-default:    var(--a-fg);
-    --modal-pad-header-default:     var(--a-space-3);
-    --modal-pad-body-default:       var(--a-space-4);
-    --modal-pad-footer-default:     var(--a-space-3);
-    --modal-font-family-default:    var(--a-font-family);
-    --modal-footer-gap-default:     var(--a-space-2);
+    --modal-width:          32rem;
+    --modal-radius:         var(--a-radius-lg);
+    --modal-bg:             var(--a-bg-subtle);
+    --modal-border:         var(--a-border-subtle);
+    --modal-shadow:         var(--a-shadow-lg);
+    --modal-backdrop:       var(--a-scrim-dialog);
+    --modal-duration:       var(--a-duration);
+    --modal-easing:         var(--a-easing-out);
+    --modal-heading-size:   var(--a-ui-lg);
+    --modal-heading-weight: var(--a-weight-semibold);
+    --modal-header-fg:      var(--a-fg);
+    --modal-close-fg:       var(--a-fg-muted);
+    --modal-close-hover:    var(--a-fg);
+    --modal-pad-header:     var(--a-space-3);
+    --modal-pad-body:       var(--a-space-4);
+    --modal-pad-footer:     var(--a-space-3);
+    --modal-font-family:    var(--a-font-family);
+    --modal-footer-gap:     var(--a-space-2);
   }
 
   :scope {
@@ -35,9 +35,9 @@
   }
 
   /* ── Size variants ── */
-  :scope[size="sm"] { --modal-width-default: min(24rem, 90vw); }
-  :scope[size="md"] { --modal-width-default: min(32rem, 90vw); }
-  :scope[size="lg"] { --modal-width-default: min(48rem, 90vw); }
+  :scope[size="sm"] { --modal-width: min(24rem, 90vw); }
+  :scope[size="md"] { --modal-width: min(32rem, 90vw); }
+  :scope[size="lg"] { --modal-width: min(48rem, 90vw); }
 
   /* ═══════ Closed ═══════ */
   :scope [slot="dialog"]:not([open]) { display: none; }
@@ -63,9 +63,9 @@
 
   /* ═══════ Backdrop ═══════ */
   :scope [slot="dialog"]::backdrop {
-    background: var(--modal-backdrop, var(--modal-backdrop-default));
+    background: var(--modal-backdrop);
     opacity: 0;
-    transition: opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
+    transition: opacity var(--modal-duration) var(--modal-easing);
   }
   :scope [slot="dialog"][data-open]::backdrop    { opacity: 1; }
   :scope [slot="dialog"][data-closing]::backdrop { opacity: 0; }
@@ -75,14 +75,14 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    width: var(--modal-width, var(--modal-width-default));
+    width: var(--modal-width);
     max-height: 85vh;
-    background: var(--modal-bg, var(--modal-bg-default));
-    color: var(--modal-header-fg, var(--modal-header-fg-default));
-    font-family: var(--modal-font-family, var(--modal-font-family-default));
-    border: 1px solid var(--modal-border, var(--modal-border-default));
-    border-radius: var(--modal-radius, var(--modal-radius-default));
-    box-shadow: var(--modal-shadow, var(--modal-shadow-default));
+    background: var(--modal-bg);
+    color: var(--modal-header-fg);
+    font-family: var(--modal-font-family);
+    border: 1px solid var(--modal-border);
+    border-radius: var(--modal-radius);
+    box-shadow: var(--modal-shadow);
     overflow: hidden;
     opacity: 0;
     transform: scale(0.95);
@@ -90,16 +90,16 @@
 
   /* ═══════ Open animation ═══════ */
   :scope [slot="dialog"][data-open] [slot="panel"] {
-    transition: transform var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default)),
-                opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
+    transition: transform var(--modal-duration) var(--modal-easing),
+                opacity var(--modal-duration) var(--modal-easing);
     transform: scale(1);
     opacity: 1;
   }
 
   /* ═══════ Close animation ═══════ */
   :scope [slot="dialog"][data-closing] [slot="panel"] {
-    transition: transform var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default)),
-                opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
+    transition: transform var(--modal-duration) var(--modal-easing),
+                opacity var(--modal-duration) var(--modal-easing);
     transform: scale(0.95);
     opacity: 0;
   }
@@ -109,11 +109,11 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--modal-pad-header, var(--modal-pad-header-default)) var(--modal-pad-body, var(--modal-pad-body-default));
-    border-bottom: 1px solid var(--modal-border, var(--modal-border-default));
-    font-size: var(--modal-heading-size, var(--modal-heading-size-default));
-    font-weight: var(--modal-heading-weight, var(--modal-heading-weight-default));
-    color: var(--modal-header-fg, var(--modal-header-fg-default));
+    padding: var(--modal-pad-header) var(--modal-pad-body);
+    border-bottom: 1px solid var(--modal-border);
+    font-size: var(--modal-heading-size);
+    font-weight: var(--modal-heading-weight);
+    color: var(--modal-header-fg);
     flex-shrink: 0;
   }
   /* `[text]` gate — same drift class as button-ui / tag-ui / badge-ui /
@@ -138,7 +138,7 @@
 
   /* ═══════ Body ═══════ */
   :scope [slot="body"] {
-    padding: var(--modal-pad-body, var(--modal-pad-body-default));
+    padding: var(--modal-pad-body);
     flex: 1;
     overflow: auto;
   }
@@ -154,9 +154,9 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: var(--modal-footer-gap, var(--modal-footer-gap-default));
-    padding: var(--modal-pad-footer, var(--modal-pad-footer-default)) var(--modal-pad-body, var(--modal-pad-body-default));
-    border-top: 1px solid var(--modal-border, var(--modal-border-default));
+    gap: var(--modal-footer-gap);
+    padding: var(--modal-pad-footer) var(--modal-pad-body);
+    border-top: 1px solid var(--modal-border);
     flex-shrink: 0;
   }
   /* No content → no footer chrome: an empty footer slot otherwise renders a

package/components/nav/nav.css

@@ -6,36 +6,36 @@
 @scope (nav-ui) {
   :where(:scope) {
     /* Shared */
-    --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);
+    --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);
 
     /* Primary-variant collapse */
-    --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);
+    --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);
 
     /* Group-heading kicker */
-    --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);
+    --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);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    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));
+    gap: var(--nav-gap);
+    padding: var(--nav-py) var(--nav-px);
+    background: var(--nav-bg);
+    font-size: var(--nav-font-size);
     min-width: 0;
     overflow-y: auto;
     overflow-x: hidden;
@@ -47,30 +47,30 @@
   /* ── Primary variant (default) ── */
 
   :scope:not([variant="section"]) {
-    width: var(--nav-width, var(--nav-width-default));
-    transition: width var(--nav-duration, var(--nav-duration-default)) var(--nav-easing, var(--nav-easing-default));
+    width: var(--nav-width);
+    transition: width var(--nav-duration) var(--nav-easing);
   }
 
   :scope:not([variant="section"])[collapsed] {
-    width: var(--nav-width-collapsed, var(--nav-width-collapsed-default));
-    --nav-px-default: var(--a-space-1);
+    width: var(--nav-width-collapsed);
+    --nav-px: 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-default: var(--a-space-1);
+      --nav-px: 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-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));
+    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);
     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, var(--nav-divider-bg-default));
-    margin: var(--nav-divider-my, var(--nav-divider-my-default)) 0;
+    background: var(--nav-divider-bg);
+    margin: var(--nav-divider-my) 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, 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));
+    border-top: 1px solid var(--nav-divider-bg);
+    margin-top: var(--nav-divider-my);
+    padding-top: var(--nav-divider-my);
   }
 
   /* Spacer — pushes items below to bottom */
@@ -113,18 +113,18 @@
   /* ── Section variant ── */
 
   :scope[variant="section"] {
-    --nav-px-default: 0;
-    --nav-py-default: 0;
+    --nav-px: 0;
+    --nav-py: 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-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));
+    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);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     white-space: nowrap;