@adia-ai/web-components 0.7.3 → 0.7.5

package/components/input/input.css

@@ -2,49 +2,50 @@
    inside `@scope` don't match the scope root. Plain selectors outside work.
    See docs/BROWSER-COMPAT.md §3a. */
 input-ui[variant="ghost"]:hover {
-  --input-bg-default: var(--a-bg-muted);
+  --input-bg: var(--a-bg-muted);
 }
 input-ui:not([disabled]) [slot="field"]:hover {
-  background: var(--input-bg-hover, var(--input-bg-hover-default));
-  border-color: var(--input-border-hover, var(--input-border-hover-default));
-  color: var(--input-fg-hover, var(--input-fg-hover-default));
+  background: var(--input-bg-hover);
+  border-color: var(--input-border-hover);
+  color: var(--input-fg-hover);
 }
 input-ui:not([disabled]) [slot="field"]:hover [slot="prefix"],
 input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
-  color: var(--input-affix-fg-hover, var(--input-affix-fg-hover-default));
+  color: var(--input-affix-fg-hover);
 }
 
 @scope (input-ui) {
   :where(:scope) {
     /* ── Tokens (wired to --a-ui-*) ── */
-    --input-bg-default:              var(--a-ui-bg);
-    --input-fg-default:              var(--a-ui-text);
-    --input-border-default:          var(--a-ui-border);
-    --input-border-hover-default:    var(--a-ui-border-hover);
-    --input-focus-ring-default:      var(--a-focus-ring);
-    --input-focus-ring-invalid-default: var(--a-focus-ring-invalid);
-    --input-radius-default:          var(--a-radius);
-    --input-height-default:          var(--a-size);
-    --input-px-default:              var(--a-ui-px);
-    --input-font-size-default:       var(--a-ui-size);
-    --input-placeholder-fg-default:  var(--a-ui-text-placeholder);
-    --input-affix-fg-default:        var(--a-ui-text-placeholder);
-    --input-field-gap-default:       var(--a-space-1);
-    --input-label-min-width-default: 8ch;
+    --input-bg:              var(--a-ui-bg);
+    --input-fg:              var(--a-ui-text);
+    --input-border:          var(--a-ui-border);
+    --input-border-hover:    var(--a-ui-border-hover);
+    --input-focus-ring:      var(--a-focus-ring);
+    --input-focus-ring-invalid: var(--a-focus-ring-invalid);
+    --input-radius:          var(--a-radius);
+    --input-height:          var(--a-size);
+    --input-px:              var(--a-ui-px);
+    --input-font-size:       var(--a-ui-size);
+    --input-font-family:     var(--a-font-family-ui);
+    --input-placeholder-fg:  var(--a-ui-text-placeholder);
+    --input-affix-fg:        var(--a-ui-text-placeholder);
+    --input-field-gap:       var(--a-space-1);
+    --input-label-min-width: 8ch;
 
     /* ── Transitions ── */
-    --input-duration-default:        var(--a-duration-fast);
-    --input-easing-default:          var(--a-easing);
+    --input-duration:        var(--a-duration-fast);
+    --input-easing:          var(--a-easing);
 
     /* ── State: hover/focus ── */
-    --input-bg-hover-default:        var(--a-ui-bg-hover);
-    --input-fg-hover-default:        var(--a-ui-text-hover);
-    --input-affix-fg-hover-default:  var(--a-ui-text-subtle);
-    --input-fg-focus-default:        var(--a-ui-text-active);
+    --input-bg-hover:        var(--a-ui-bg-hover);
+    --input-fg-hover:        var(--a-ui-text-hover);
+    --input-affix-fg-hover:  var(--a-ui-text-subtle);
+    --input-fg-focus:        var(--a-ui-text-active);
 
     /* ── State: disabled ── */
-    --input-bg-disabled-default:     var(--a-ui-bg-disabled);
-    --input-fg-disabled-default:     var(--a-ui-text-disabled);
+    --input-bg-disabled:     var(--a-ui-bg-disabled);
+    --input-fg-disabled:     var(--a-ui-text-disabled);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -65,9 +66,9 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      label wider than the floor grows past it. */
   [slot="label"] {
     flex-shrink: 0;
-    min-width: var(--input-label-min-width, var(--input-label-min-width-default));
-    color: var(--input-affix-fg, var(--input-affix-fg-default));
-    font-size: var(--input-font-size, var(--input-font-size-default));
+    min-width: var(--input-label-min-width);
+    color: var(--input-affix-fg);
+    font-size: var(--input-font-size);
     user-select: none;
     pointer-events: none;
   }
@@ -76,15 +77,17 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
   [slot="field"] {
     display: flex;
     align-items: center;
-    gap: var(--input-field-gap, var(--input-field-gap-default));
-    min-height: var(--input-height, var(--input-height-default));
-    padding: 0 var(--input-px, var(--input-px-default));
-    border: 1px solid var(--input-border, var(--input-border-default));
-    border-radius: var(--input-radius, var(--input-radius-default));
-    background: var(--input-bg, var(--input-bg-default));
-    color: var(--input-fg, var(--input-fg-default));
+    gap: var(--input-field-gap);
+    min-height: var(--input-height);
+    padding: 0 var(--input-px);
+    border: 1px solid var(--input-border);
+    border-radius: var(--input-radius);
+    background: var(--input-bg);
+    color: var(--input-fg);
     font: inherit;
-    font-size: var(--input-font-size, var(--input-font-size-default));
+    /* font-family floor — see segment.css rationale. */
+    font-family: var(--input-font-family);
+    font-size: var(--input-font-size);
     /* line-height: 1.4 (not 1) so descender-bearing glyphs (g, j, p, q, y)
        have room inside [slot="text"]'s line box. With line-height: 1 the
        line box equals the em-square and descenders extend below it; the
@@ -96,22 +99,22 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     /* Cover every property the hover / focus / invalid states change so
        the field doesn't half-snap (border slides, but bg/colour/ring snap). */
     transition:
-      background  var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default)),
-      border-color var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default)),
-      color       var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default)),
-      box-shadow  var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default));
+      background  var(--input-duration) var(--input-easing),
+      border-color var(--input-duration) var(--input-easing),
+      color       var(--input-duration) var(--input-easing),
+      box-shadow  var(--input-duration) var(--input-easing);
   }
   /* hover rules moved outside @scope — see Safari 17.x bug note at top. */
   :scope:not([disabled]):focus-within [slot="field"] {
     /* Canonical ring — consumes the L3 --input-focus-ring token
        which aliases --a-focus-ring. Border stays stable; the ring
        is the focus affordance (WCAG 2.2 SC 2.4.11/2.4.13). */
-    box-shadow: var(--input-focus-ring, var(--input-focus-ring-default));
-    color: var(--input-fg-focus, var(--input-fg-focus-default));
+    box-shadow: var(--input-focus-ring);
+    color: var(--input-fg-focus);
   }
   :scope[aria-invalid="true"]:not([disabled]):focus-within [slot="field"],
   :scope[error]:not([disabled]):focus-within [slot="field"] {
-    box-shadow: var(--input-focus-ring-invalid, var(--input-focus-ring-invalid-default));
+    box-shadow: var(--input-focus-ring-invalid);
   }
 
   /* Text (contenteditable span) */
@@ -139,7 +142,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
   }
 
   input[slot="text"]::placeholder {
-    color: var(--input-placeholder-fg, var(--input-placeholder-fg-default));
+    color: var(--input-placeholder-fg);
   }
 
   /* Placeholder (contenteditable only).
@@ -152,7 +155,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      so the caret renders at the actual content-start where it belongs. */
   span[slot="text"][data-empty]::before {
     content: attr(data-placeholder);
-    color: var(--input-placeholder-fg, var(--input-placeholder-fg-default));
+    color: var(--input-placeholder-fg);
     pointer-events: none;
     position: absolute;
     inset: 0;
@@ -171,7 +174,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     font-weight: var(--a-weight-medium, 500);
     /* Reserve space for the absolutely-positioned controls column so the
        value never collides with the stepper buttons. */
-    padding-inline-end: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
+    padding-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
   }
 
   /* Suffix sits flush after the value in number mode (no auto margin so
@@ -182,7 +185,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
        suffix never collides with the stepper buttons. The padding moves
        from `[slot="text"]` to `[slot="suffix"]` when a suffix is present
        — only one element needs the reservation since they're adjacent. */
-    margin-inline-end: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
+    margin-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
   }
   [data-number]:has([slot="suffix"]) [slot="text"] {
     padding-inline-end: 0;
@@ -198,8 +201,8 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     inset-inline-end: 0;
     display: grid;
     grid-template-rows: 1fr 1fr;
-    border-inline-start: 1px solid var(--input-border, var(--input-border-default));
-    width: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
+    border-inline-start: 1px solid var(--input-border);
+    width: var(--input-controls-width, calc(var(--input-height) * 0.7));
     user-select: none;
     overflow: hidden;
   }
@@ -215,7 +218,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     --button-height: 0;
     --button-radius: 0;
     --button-bg: transparent;
-    --button-fg: var(--input-affix-fg, var(--input-affix-fg-default));
+    --button-fg: var(--input-affix-fg);
     --button-px: 0;
     min-width: 0;
     min-height: 0;
@@ -231,7 +234,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      any value inherited from its parent button-ui. Tying it to
      --input-height keeps the caret proportional across sm/md/lg. */
   [data-number] [slot="controls"] icon-ui {
-    --icon-size: calc(var(--input-height, var(--input-height-default)) * 0.4);
+    --icon-size: calc(var(--input-height) * 0.4);
   }
   [data-number] [slot="controls"] button-ui:hover {
     --button-bg: var(--a-ui-bg-hover);
@@ -248,11 +251,11 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      inline-start border on the column + the bottom-border on the upper
      button. */
   [data-number] [slot="controls"] button-ui:first-child {
-    border-bottom: 1px solid var(--input-border, var(--input-border-default));
-    border-start-end-radius: calc(var(--input-radius, var(--input-radius-default)) - 1px);
+    border-bottom: 1px solid var(--input-border);
+    border-start-end-radius: calc(var(--input-radius) - 1px);
   }
   [data-number] [slot="controls"] button-ui:last-child {
-    border-end-end-radius: calc(var(--input-radius, var(--input-radius-default)) - 1px);
+    border-end-end-radius: calc(var(--input-radius) - 1px);
   }
 
   /* Raw mode strips the chrome — also strip the controls column's
@@ -279,8 +282,8 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--input-affix-fg, var(--input-affix-fg-default));
-    font-size: var(--input-font-size, var(--input-font-size-default));
+    color: var(--input-affix-fg);
+    font-size: var(--input-font-size);
     line-height: 1;
     user-select: none;
     pointer-events: none;
@@ -330,10 +333,10 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      instead so the button visually matches the input's intrinsic size. */
   [slot="field"] > [slot="leading"] button-ui,
   [slot="field"] > [slot="trailing"] button-ui {
-    --button-height: calc(var(--input-height, var(--input-height-default)) - 4px);
+    --button-height: calc(var(--input-height) - 4px);
     --button-bg: transparent;
     --button-border: transparent;
-    --button-fg: var(--input-affix-fg, var(--input-affix-fg-default));
+    --button-fg: var(--input-affix-fg);
     --button-px: var(--a-space-1);
   }
 
@@ -348,13 +351,13 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      absolutely positioned at inset-inline-end: 0; trailing sits in the
      flex flow.) Same pattern as [slot="suffix"] in number mode. */
   [data-number]:has(> [slot="trailing"]) > [slot="trailing"] {
-    margin-inline-end: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
+    margin-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
   }
 
   /* Disabled */
   :scope[disabled] [slot="field"] {
-    background: var(--input-bg-disabled, var(--input-bg-disabled-default));
-    color: var(--input-fg-disabled, var(--input-fg-disabled-default));
+    background: var(--input-bg-disabled);
+    color: var(--input-fg-disabled);
     cursor: not-allowed;
   }
 
@@ -371,9 +374,9 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
 
   /* Ghost variant */
   :scope[variant="ghost"] {
-    --input-bg-default: transparent;
-    --input-border-default: transparent;
-    --input-border-hover-default: transparent;
+    --input-bg: transparent;
+    --input-border: transparent;
+    --input-border-hover: transparent;
   }
   /* :scope[variant="ghost"]:hover moved outside @scope — see Safari
      17.x bug note at top of file. */

package/components/inspector/inspector.css

@@ -1,16 +1,16 @@
 @scope (inspector-ui) {
   :where(:scope) {
-    --inspector-pane-font-size-default: var(--a-ui-tiny);
-    --inspector-border-default:         1px solid var(--a-border-subtle);
-    --inspector-radius-default:         var(--a-radius);
+    --inspector-pane-font-size: var(--a-ui-tiny);
+    --inspector-border:         1px solid var(--a-border-subtle);
+    --inspector-radius:         var(--a-radius);
   }
 
   :scope {
     display:        flex;
     flex-direction: column;
     overflow:       hidden;
-    border:         var(--inspector-border, var(--inspector-border-default));
-    border-radius:  var(--inspector-radius, var(--inspector-radius-default));
+    border:         var(--inspector-border);
+    border-radius:  var(--inspector-radius);
     min-width:      0;
   }
 
@@ -26,6 +26,6 @@
   :scope tab-ui > code-ui {
     display: block;
     overflow: auto;
-    font-size: var(--inspector-pane-font-size, var(--inspector-pane-font-size-default));
+    font-size: var(--inspector-pane-font-size);
   }
 }

package/components/integration-card/integration-card.css

@@ -1,32 +1,32 @@
 @scope (integration-card-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --integration-card-bg-default:              var(--a-bg);
-    --integration-card-border-default:          1px solid var(--a-border-subtle);
-    --integration-card-radius-default:          var(--a-radius-md);
-    --integration-card-px-default:              var(--a-space-4);
-    --integration-card-py-default:              var(--a-space-4);
-    --integration-card-gap-default:             var(--a-space-3);
+    --integration-card-bg:              var(--a-bg);
+    --integration-card-border:          1px solid var(--a-border-subtle);
+    --integration-card-radius:          var(--a-radius-md);
+    --integration-card-px:              var(--a-space-4);
+    --integration-card-py:              var(--a-space-4);
+    --integration-card-gap:             var(--a-space-3);
 
     /* ── Inner rhythm ── */
-    --integration-card-row-gap-default:         var(--a-space-3);
-    --integration-card-text-gap-default:        var(--a-space-1);
+    --integration-card-row-gap:         var(--a-space-3);
+    --integration-card-text-gap:        var(--a-space-1);
 
     /* ── Logo ── */
-    --integration-card-logo-size-default:       var(--a-space-7);
-    --integration-card-logo-radius-default:     var(--a-radius-sm);
+    --integration-card-logo-size:       var(--a-space-7);
+    --integration-card-logo-radius:     var(--a-radius-sm);
 
     /* ── Typography ── */
-    --integration-card-heading-fg-default:      var(--a-fg-strong);
-    --integration-card-heading-size-default:    var(--a-ui-size);
-    --integration-card-heading-weight-default:  var(--a-weight-medium);
-    --integration-card-description-fg-default:  var(--a-fg-muted);
-    --integration-card-description-size-default: var(--a-ui-sm);
-    --integration-card-error-fg-default:        var(--a-danger-text);
-    --integration-card-error-size-default:      var(--a-ui-sm);
+    --integration-card-heading-fg:      var(--a-fg-strong);
+    --integration-card-heading-size:    var(--a-ui-size);
+    --integration-card-heading-weight:  var(--a-weight-medium);
+    --integration-card-description-fg:  var(--a-fg-muted);
+    --integration-card-description-size: var(--a-ui-sm);
+    --integration-card-error-fg:        var(--a-danger-text);
+    --integration-card-error-size:      var(--a-ui-sm);
 
     /* ── States ── */
-    --integration-card-disabled-opacity-default: 0.6;
+    --integration-card-disabled-opacity: 0.6;
   }
 
   /* ── Base — vertical stack: body row + (description) + (error) + footer ── */
@@ -34,27 +34,27 @@
     box-sizing: border-box;
     display: grid;
     grid-template-rows: auto 1fr auto;
-    gap: var(--integration-card-gap, var(--integration-card-gap-default));
-    padding: var(--integration-card-py, var(--integration-card-py-default)) var(--integration-card-px, var(--integration-card-px-default));
-    background: var(--integration-card-bg, var(--integration-card-bg-default));
-    border: var(--integration-card-border, var(--integration-card-border-default));
-    border-radius: var(--integration-card-radius, var(--integration-card-radius-default));
+    gap: var(--integration-card-gap);
+    padding: var(--integration-card-py) var(--integration-card-px);
+    background: var(--integration-card-bg);
+    border: var(--integration-card-border);
+    border-radius: var(--integration-card-radius);
     width: stretch;
     min-width: 0;
   }
 
   /* ── Status-driven border tints ── */
   :scope[status="connected"] {
-    --integration-card-border-default: 1px solid var(--a-success-border, var(--a-success-strong));
+    --integration-card-border: 1px solid var(--a-success-border, var(--a-success-strong));
   }
   :scope[status="error"] {
-    --integration-card-border-default: 1px solid var(--a-danger-border, var(--a-danger-strong));
+    --integration-card-border: 1px solid var(--a-danger-border, var(--a-danger-strong));
   }
 
   /* ── Coming-soon + disabled → opacity reduction ── */
   :scope[status="coming-soon"],
   :scope[disabled] {
-    opacity: var(--integration-card-disabled-opacity, var(--integration-card-disabled-opacity-default));
+    opacity: var(--integration-card-disabled-opacity);
   }
 
   /* ── Body row — logo | heading | status badge ── */
@@ -62,15 +62,15 @@
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
-    column-gap: var(--integration-card-row-gap, var(--integration-card-row-gap-default));
+    column-gap: var(--integration-card-row-gap);
   }
 
   /* ── Logo square ── */
   :scope > [data-integration-card-body] > [data-integration-card-logo] {
     grid-column: 1;
-    inline-size: var(--integration-card-logo-size, var(--integration-card-logo-size-default));
-    block-size: var(--integration-card-logo-size, var(--integration-card-logo-size-default));
-    border-radius: var(--integration-card-logo-radius, var(--integration-card-logo-radius-default));
+    inline-size: var(--integration-card-logo-size);
+    block-size: var(--integration-card-logo-size);
+    border-radius: var(--integration-card-logo-radius);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -87,16 +87,16 @@
     display: block;
   }
   :scope [data-integration-card-logo] > icon-ui {
-    --a-icon-size: calc(var(--integration-card-logo-size, var(--integration-card-logo-size-default)) - var(--a-space-1));
+    --a-icon-size: calc(var(--integration-card-logo-size) - var(--a-space-1));
     color: var(--a-fg-muted);
   }
 
   /* ── Heading (provider name) ── */
   :scope > [data-integration-card-body] > [data-integration-card-heading] {
     grid-column: 2;
-    color: var(--integration-card-heading-fg, var(--integration-card-heading-fg-default));
-    font-size: var(--integration-card-heading-size, var(--integration-card-heading-size-default));
-    font-weight: var(--integration-card-heading-weight, var(--integration-card-heading-weight-default));
+    color: var(--integration-card-heading-fg);
+    font-size: var(--integration-card-heading-size);
+    font-weight: var(--integration-card-heading-weight);
     line-height: 1.3;
     min-width: 0;
     overflow: hidden;
@@ -116,8 +116,8 @@
   /* ── Description ── */
   :scope > [data-integration-card-description] {
     margin: 0;
-    color: var(--integration-card-description-fg, var(--integration-card-description-fg-default));
-    font-size: var(--integration-card-description-size, var(--integration-card-description-size-default));
+    color: var(--integration-card-description-fg);
+    font-size: var(--integration-card-description-size);
     line-height: 1.4;
   }
   :scope > [data-integration-card-description][hidden] {
@@ -129,16 +129,16 @@
   :scope > p:not([data-integration-card-description]):not([data-integration-card-error]),
   :scope > small:not([data-integration-card-error]) {
     margin: 0;
-    color: var(--integration-card-description-fg, var(--integration-card-description-fg-default));
-    font-size: var(--integration-card-description-size, var(--integration-card-description-size-default));
+    color: var(--integration-card-description-fg);
+    font-size: var(--integration-card-description-size);
     line-height: 1.4;
   }
 
   /* ── Error message ── */
   :scope > [data-integration-card-error] {
     margin: 0;
-    color: var(--integration-card-error-fg, var(--integration-card-error-fg-default));
-    font-size: var(--integration-card-error-size, var(--integration-card-error-size-default));
+    color: var(--integration-card-error-fg);
+    font-size: var(--integration-card-error-size);
     line-height: 1.4;
   }
   :scope > [data-integration-card-error][hidden] {
@@ -149,7 +149,7 @@
   :scope > [data-integration-card-footer] {
     display: flex;
     align-items: center;
-    gap: var(--integration-card-row-gap, var(--integration-card-row-gap-default));
+    gap: var(--integration-card-row-gap);
     margin: 0;
     padding: 0;
   }

package/components/integration-card/integration-card.test.js

@@ -286,10 +286,10 @@ describe('integration-card-ui — CSS contract (source-grep)', () => {
 
     expect(CSS).toMatch(/@scope\s*\(\s*integration-card-ui\s*\)/);
     expect(CSS).toMatch(/:where\(:scope\)\s*\{/);
-    // OD-5 sweep: token declarations use -default suffix per component-token-contract.md
-    expect(CSS).toMatch(/--integration-card-bg-default:/);
-    expect(CSS).toMatch(/--integration-card-border-default:/);
-    expect(CSS).toMatch(/--integration-card-radius-default:/);
+    // Token declarations use the un-suffixed component-named tokens per component-token-contract.md
+    expect(CSS).toMatch(/--integration-card-bg:/);
+    expect(CSS).toMatch(/--integration-card-border:/);
+    expect(CSS).toMatch(/--integration-card-radius:/);
   });
 
   it('keeps status-driven border tint (status="connected") inside @scope', async () => {

package/components/kbd/kbd.css

@@ -1,33 +1,35 @@
 @scope (kbd-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --kbd-bg-default:        var(--a-bg-muted);
-    --kbd-fg-default:        var(--a-fg);
-    --kbd-border-default:    var(--a-border-subtle);
-    --kbd-radius-default:    var(--a-radius-sm);
-    --kbd-font-default:      var(--a-font-family-code);
+    --kbd-bg:        var(--a-bg-muted);
+    --kbd-fg:        var(--a-fg);
+    --kbd-border:    var(--a-border-subtle);
+    --kbd-radius:    var(--a-radius-sm);
+    --kbd-font:      var(--a-font-family-code);
+    --kbd-px:        var(--a-space-1);
+    --kbd-weight:    var(--a-weight-medium);
 
-    /* Size — defaults to md. Glyph is --a-ui-xs (12px) so md reads distinctly
-       larger than sm (--a-ui-tiny 10px) inside its 20px cap — previously both
-       md and sm resolved to --a-ui-tiny, so the glyphs were identical. */
-    --kbd-font-size-default: var(--a-ui-xs);
-    --kbd-height-default:    1.25rem;
-    --kbd-min-width-default: 1.25rem;
-    --kbd-px-default:        var(--a-space-1);
-    --kbd-weight-default:    var(--a-weight-medium);
+    /* Size tiers — sm 10 / md 12 / lg 14 glyph ramp (--a-ui-tiny/xs/md).
+       md reads distinctly larger than sm inside the 20px cap; previously
+       md and sm both resolved to --a-ui-tiny so the glyphs were identical.
+       md is the default; the [size] rules below re-point the active token. */
+    --kbd-font-size-sm: var(--a-ui-tiny);
+    --kbd-font-size-md: var(--a-ui-xs);
+    --kbd-font-size-lg: var(--a-ui-md);
+    --kbd-font-size:    var(--kbd-font-size-md);
 
-    /* Size: sm */
-    --kbd-font-size-sm-default: var(--a-ui-tiny);
-    --kbd-height-sm-default:    1rem;
-    --kbd-min-width-sm-default: 1rem;
+    --kbd-height-sm: 1rem;
+    --kbd-height-md: 1.25rem;
+    --kbd-height-lg: 1.5rem;
+    --kbd-height:    var(--kbd-height-md);
+
+    --kbd-min-width-sm: 1rem;
+    --kbd-min-width-md: 1.25rem;
+    --kbd-min-width-lg: 1.5rem;
+    --kbd-min-width:    var(--kbd-min-width-md);
 
-    /* Size: lg — glyph --a-ui-md (14px), the top of the three-tier ramp
-       (sm 10 / md 12 / lg 14). */
-    --kbd-font-size-lg-default: var(--a-ui-md);
-    --kbd-height-lg-default:    1.5rem;
-    --kbd-min-width-lg-default: 1.5rem;
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
-}
+  }
 
   :scope {
     /* ── Base ── */
@@ -35,32 +37,37 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--kbd-min-width, var(--kbd-min-width-default));
-    height: var(--kbd-height, var(--kbd-height-default));
-    padding-inline: var(--kbd-px, var(--kbd-px-default));
-    font-family: var(--kbd-font, var(--kbd-font-default));
-    font-size: var(--kbd-font-size, var(--kbd-font-size-default));
-    font-weight: var(--kbd-weight, var(--kbd-weight-default));
+    min-width: var(--kbd-min-width);
+    height: var(--kbd-height);
+    padding-inline: var(--kbd-px);
+    font-family: var(--kbd-font);
+    font-size: var(--kbd-font-size);
+    font-weight: var(--kbd-weight);
     line-height: 1;
-    color: var(--kbd-fg, var(--kbd-fg-default));
-    background: var(--kbd-bg, var(--kbd-bg-default));
-    border: 1px solid var(--kbd-border, var(--kbd-border-default));
+    color: var(--kbd-fg);
+    background: var(--kbd-bg);
+    border: 1px solid var(--kbd-border);
     border-bottom-width: 2px;
-    border-radius: var(--kbd-radius, var(--kbd-radius-default));
+    border-radius: var(--kbd-radius);
     vertical-align: middle;
     white-space: nowrap;
     user-select: none;
   }
 
-  /* Sizes */
+  /* Sizes — re-point the active token to the matching tier. */
   :scope[size="sm"] {
-    --kbd-font-size-default: var(--kbd-font-size-sm, var(--kbd-font-size-sm-default));
-    --kbd-height-default:    var(--kbd-height-sm, var(--kbd-height-sm-default));
-    --kbd-min-width-default: var(--kbd-min-width-sm, var(--kbd-min-width-sm-default));
+    --kbd-font-size: var(--kbd-font-size-sm);
+    --kbd-height:    var(--kbd-height-sm);
+    --kbd-min-width: var(--kbd-min-width-sm);
+  }
+  :scope[size="md"] {
+    --kbd-font-size: var(--kbd-font-size-md);
+    --kbd-height:    var(--kbd-height-md);
+    --kbd-min-width: var(--kbd-min-width-md);
   }
   :scope[size="lg"] {
-    --kbd-font-size-default: var(--kbd-font-size-lg, var(--kbd-font-size-lg-default));
-    --kbd-height-default:    var(--kbd-height-lg, var(--kbd-height-lg-default));
-    --kbd-min-width-default: var(--kbd-min-width-lg, var(--kbd-min-width-lg-default));
+    --kbd-font-size: var(--kbd-font-size-lg);
+    --kbd-height:    var(--kbd-height-lg);
+    --kbd-min-width: var(--kbd-min-width-lg);
   }
 }