@adia-ai/web-components 0.7.3 → 0.7.5

package/components/demo-toggle/demo-toggle.css

@@ -1,25 +1,25 @@
 @scope (demo-toggle-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --demo-toggle-radius-default:        var(--a-radius-lg);
-    --demo-toggle-gap-default:           var(--a-space-3);
-    --demo-toggle-stage-padding-default: var(--a-space-4);
-    --demo-toggle-bar-px-default:        var(--a-space-3);
-    --demo-toggle-bar-py-default:        var(--a-space-2);
+    --demo-toggle-radius:        var(--a-radius-lg);
+    --demo-toggle-gap:           var(--a-space-3);
+    --demo-toggle-stage-padding: var(--a-space-4);
+    --demo-toggle-bar-px:        var(--a-space-3);
+    --demo-toggle-bar-py:        var(--a-space-2);
 
     /* ── Colors ── */
-    --demo-toggle-bg-default:            var(--a-canvas-1);
-    --demo-toggle-border-default:        var(--a-border);
-    --demo-toggle-bar-bg-default:        var(--a-bg-muted);
-    --demo-toggle-bar-fg-default:        var(--a-fg);
+    --demo-toggle-bg:            var(--a-canvas-1);
+    --demo-toggle-border:        var(--a-border);
+    --demo-toggle-bar-bg:        var(--a-bg-muted);
+    --demo-toggle-bar-fg:        var(--a-fg);
 
     /* ── Typography ── */
-    --demo-toggle-label-size-default:    var(--a-ui-size);
-    --demo-toggle-label-weight-default:  var(--a-weight-medium, 500);
+    --demo-toggle-label-size:    var(--a-ui-size);
+    --demo-toggle-label-weight:  var(--a-weight-medium, 500);
 
     /* ── Transition ── */
-    --demo-toggle-duration-default:      var(--a-duration-fast);
-    --demo-toggle-easing-default:        var(--a-easing);
+    --demo-toggle-duration:      var(--a-duration-fast);
+    --demo-toggle-easing:        var(--a-easing);
   }
 
   :scope {
@@ -30,9 +30,9 @@
     gap: 0;
     width: 100%;
 
-    background: var(--demo-toggle-bg, var(--demo-toggle-bg-default));
-    border: 1px solid var(--demo-toggle-border, var(--demo-toggle-border-default));
-    border-radius: var(--demo-toggle-radius, var(--demo-toggle-radius-default));
+    background: var(--demo-toggle-bg);
+    border: 1px solid var(--demo-toggle-border);
+    border-radius: var(--demo-toggle-radius);
     overflow: hidden;
     isolation: isolate;
   }
@@ -40,18 +40,18 @@
   /* -- Header bar -- */
   [slot="bar"] {
     width: 100%;
-    padding: var(--demo-toggle-bar-py, var(--demo-toggle-bar-py-default)) var(--demo-toggle-bar-px, var(--demo-toggle-bar-px-default));
-    background: var(--demo-toggle-bar-bg, var(--demo-toggle-bar-bg-default));
-    color: var(--demo-toggle-bar-fg, var(--demo-toggle-bar-fg-default));
-    border-bottom: 1px solid var(--demo-toggle-border, var(--demo-toggle-border-default));
+    padding: var(--demo-toggle-bar-py) var(--demo-toggle-bar-px);
+    background: var(--demo-toggle-bar-bg);
+    color: var(--demo-toggle-bar-fg);
+    border-bottom: 1px solid var(--demo-toggle-border);
     justify-content: space-between;
   }
 
   [data-demo-toggle-label] {
-    font-size: var(--demo-toggle-label-size, var(--demo-toggle-label-size-default));
-    font-weight: var(--demo-toggle-label-weight, var(--demo-toggle-label-weight-default));
-    color: var(--demo-toggle-bar-fg, var(--demo-toggle-bar-fg-default));
-    transition: color var(--demo-toggle-duration, var(--demo-toggle-duration-default)) var(--demo-toggle-easing, var(--demo-toggle-easing-default));
+    font-size: var(--demo-toggle-label-size);
+    font-weight: var(--demo-toggle-label-weight);
+    color: var(--demo-toggle-bar-fg);
+    transition: color var(--demo-toggle-duration) var(--demo-toggle-easing);
   }
 
   /* -- Stage area (where the slotted content lives) -- */
@@ -61,7 +61,7 @@
   :scope [slot="off"] {
     box-sizing: border-box;
     width: 100%;
-    padding: var(--demo-toggle-stage-padding, var(--demo-toggle-stage-padding-default));
+    padding: var(--demo-toggle-stage-padding);
   }
 
   :scope[data-state="on"]  [slot="off"] { display: none; }
@@ -114,7 +114,7 @@
 
   /* State-themed bar — when on, lean accent; when off, leave neutral. */
   :scope[data-state="on"] {
-    --demo-toggle-bar-bg-default: var(--a-accent-muted);
-    --demo-toggle-bar-fg-default: var(--a-accent-strong);
+    --demo-toggle-bar-bg: var(--a-accent-muted);
+    --demo-toggle-bar-fg: var(--a-accent-strong);
   }
 }

package/components/description-list/description-list.css

@@ -1,19 +1,19 @@
 @scope (description-list-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --description-list-gap-row-default:        var(--a-space-2);
-    --description-list-gap-column-default:     var(--a-space-3);
-    --description-list-term-min-width-default: 8rem;
+    --description-list-gap-row:        var(--a-space-2);
+    --description-list-gap-column:     var(--a-space-3);
+    --description-list-term-min-width: 8rem;
 
     /* ── Typography ── */
-    --description-list-term-font-size-default: var(--a-ui-sm);
-    --description-list-term-weight-default:    var(--a-weight-medium);
-    --description-list-desc-font-size-default: var(--a-ui-sm);
-    --description-list-desc-weight-default:    var(--a-weight-normal);
+    --description-list-term-font-size: var(--a-ui-sm);
+    --description-list-term-weight:    var(--a-weight-medium);
+    --description-list-desc-font-size: var(--a-ui-sm);
+    --description-list-desc-weight:    var(--a-weight-normal);
 
     /* ── Colors ── */
-    --description-list-term-fg-default:        var(--a-fg-muted);
-    --description-list-desc-fg-default:        var(--a-fg);
+    --description-list-term-fg:        var(--a-fg-muted);
+    --description-list-desc-fg:        var(--a-fg);
   }
 
   :scope {
@@ -21,7 +21,7 @@
     box-sizing: border-box;
     display: grid;
     grid-template-columns: 1fr;
-    gap: var(--description-list-gap-row, var(--description-list-gap-row-default)) var(--description-list-gap-column, var(--description-list-gap-column-default));
+    gap: var(--description-list-gap-row) var(--description-list-gap-column);
     margin: 0;
     padding: 0;
   }
@@ -29,18 +29,18 @@
   [data-dl-term],
   dt {
     margin: 0;
-    font-size: var(--description-list-term-font-size, var(--description-list-term-font-size-default));
-    font-weight: var(--description-list-term-weight, var(--description-list-term-weight-default));
-    color: var(--description-list-term-fg, var(--description-list-term-fg-default));
+    font-size: var(--description-list-term-font-size);
+    font-weight: var(--description-list-term-weight);
+    color: var(--description-list-term-fg);
     line-height: 1.3;
   }
 
   [data-dl-desc],
   dd {
     margin: 0;
-    font-size: var(--description-list-desc-font-size, var(--description-list-desc-font-size-default));
-    font-weight: var(--description-list-desc-weight, var(--description-list-desc-weight-default));
-    color: var(--description-list-desc-fg, var(--description-list-desc-fg-default));
+    font-size: var(--description-list-desc-font-size);
+    font-weight: var(--description-list-desc-weight);
+    color: var(--description-list-desc-fg);
     line-height: 1.4;
   }
 
@@ -51,12 +51,12 @@
      and the explicit `[layout="stacked"]` both get the same rhythm. */
   :scope:not([layout="inline"]) [data-dl-desc]:not(:last-child),
   :scope:not([layout="inline"]) dd:not(:last-child) {
-    margin-bottom: var(--description-list-gap-row, var(--description-list-gap-row-default));
+    margin-bottom: var(--description-list-gap-row);
   }
 
   /* Inline: term and desc on one row */
   :scope[layout="inline"] {
-    grid-template-columns: minmax(var(--description-list-term-min-width, var(--description-list-term-min-width-default)), max-content) 1fr;
+    grid-template-columns: minmax(var(--description-list-term-min-width), max-content) 1fr;
     align-items: baseline;
   }
 

package/components/divider/divider.css

@@ -5,12 +5,12 @@
 @scope (divider-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --divider-color-default:    var(--a-border-subtle);
-    --divider-size-default:     1px;
-    --divider-spacing-default:  var(--a-space-3);
-    --divider-label-font-default: var(--a-ui-sm);
-    --divider-label-fg-default: var(--a-fg-muted);
-    --divider-label-px-default: var(--a-space-2);
+    --divider-color:    var(--a-border-subtle);
+    --divider-size:     1px;
+    --divider-spacing:  var(--a-space-3);
+    --divider-label-font: var(--a-ui-sm);
+    --divider-label-fg: var(--a-fg-muted);
+    --divider-label-px: var(--a-space-2);
   }
 
   /* ── Horizontal (default) ── */
@@ -19,38 +19,38 @@
     display: flex;
     align-items: center;
     width: 100%;
-    margin-block: var(--divider-spacing, var(--divider-spacing-default));
+    margin-block: var(--divider-spacing);
   }
 
   /* Horizontal line without label */
   :scope:not(:has([slot="label"]))::before {
     content: '';
     flex: 1;
-    height: var(--divider-size, var(--divider-size-default));
-    background: var(--divider-color, var(--divider-color-default));
+    height: var(--divider-size);
+    background: var(--divider-color);
   }
 
   /* Horizontal line with label — left line */
   :scope:has([slot="label"])::before {
     content: '';
     flex: 1;
-    height: var(--divider-size, var(--divider-size-default));
-    background: var(--divider-color, var(--divider-color-default));
+    height: var(--divider-size);
+    background: var(--divider-color);
   }
 
   /* Horizontal line with label — right line */
   :scope:has([slot="label"])::after {
     content: '';
     flex: 1;
-    height: var(--divider-size, var(--divider-size-default));
-    background: var(--divider-color, var(--divider-color-default));
+    height: var(--divider-size);
+    background: var(--divider-color);
   }
 
   /* ── Label ── */
   [slot="label"] {
-    padding-inline: var(--divider-label-px, var(--divider-label-px-default));
-    font-size: var(--divider-label-font, var(--divider-label-font-default));
-    color: var(--divider-label-fg, var(--divider-label-fg-default));
+    padding-inline: var(--divider-label-px);
+    font-size: var(--divider-label-font);
+    color: var(--divider-label-fg);
     white-space: nowrap;
     line-height: 1;
   }
@@ -63,40 +63,40 @@
     height: auto;
     align-self: stretch;
     margin-block: 0;
-    margin-inline: var(--divider-spacing, var(--divider-spacing-default));
+    margin-inline: var(--divider-spacing);
   }
 
   /* Vertical line without label */
   :scope[vertical]:not(:has([slot="label"]))::before {
     content: '';
     flex: 1;
-    width: var(--divider-size, var(--divider-size-default));
+    width: var(--divider-size);
     height: auto;
-    background: var(--divider-color, var(--divider-color-default));
+    background: var(--divider-color);
   }
 
   /* Vertical line with label — top line */
   :scope[vertical]:has([slot="label"])::before {
     content: '';
     flex: 1;
-    width: var(--divider-size, var(--divider-size-default));
+    width: var(--divider-size);
     height: auto;
-    background: var(--divider-color, var(--divider-color-default));
+    background: var(--divider-color);
   }
 
   /* Vertical line with label — bottom line */
   :scope[vertical]:has([slot="label"])::after {
     content: '';
     flex: 1;
-    width: var(--divider-size, var(--divider-size-default));
+    width: var(--divider-size);
     height: auto;
-    background: var(--divider-color, var(--divider-color-default));
+    background: var(--divider-color);
   }
 
   /* Vertical label */
   :scope[vertical] [slot="label"] {
     padding-inline: 0;
-    padding-block: var(--divider-label-px, var(--divider-label-px-default));
+    padding-block: var(--divider-label-px);
     writing-mode: vertical-lr;
   }
 }

package/components/embed/embed.css

@@ -1,18 +1,18 @@
 @scope (embed-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --embed-bg-default:      var(--a-bg-muted);
-    --embed-radius-default:  var(--a-radius-md);
-    --embed-border-default:  var(--a-border-subtle);
+    --embed-bg:      var(--a-bg-muted);
+    --embed-radius:  var(--a-radius-md);
+    --embed-border:  var(--a-border-subtle);
   }
 
   :scope {
     box-sizing: border-box;
     display: block;
     overflow: hidden;
-    border-radius: var(--embed-radius, var(--embed-radius-default));
-    border: 1px solid var(--embed-border, var(--embed-border-default));
-    background: var(--embed-bg, var(--embed-bg-default));
+    border-radius: var(--embed-radius);
+    border: 1px solid var(--embed-border);
+    background: var(--embed-bg);
     position: relative;
   }
 

package/components/empty-state/empty-state.css

@@ -1,25 +1,25 @@
 @scope (empty-state-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --empty-state-px-default:             var(--a-space-6);
-    --empty-state-py-default:             var(--a-space-8);
-    --empty-state-gap-default:            var(--a-space-2);
-    --empty-state-action-mt-default:      var(--a-space-2);
-    --empty-state-icon-size-default:      3rem;
+    --empty-state-px:             var(--a-space-6);
+    --empty-state-py:             var(--a-space-8);
+    --empty-state-gap:            var(--a-space-2);
+    --empty-state-action-mt:      var(--a-space-2);
+    --empty-state-icon-size:      3rem;
 
     /* ── Colors ── */
-    --empty-state-icon-fg-default:        var(--a-fg-muted);
-    --empty-state-heading-fg-default:     var(--a-fg);
-    --empty-state-desc-fg-default:        var(--a-fg-muted);
+    --empty-state-icon-fg:        var(--a-fg-muted);
+    --empty-state-heading-fg:     var(--a-fg);
+    --empty-state-desc-fg:        var(--a-fg-muted);
 
     /* ── Typography ──
        Heading uses the dedicated heading ramp (16px), NOT --a-ui-lg (15px,
        the top of the control-label ramp) — at 15px the heading was only 1.07×
        the 14px description, a hierarchy too weak to read as a title. 17px
        lifts the ratio to ~1.21 (heading-medium weight adds further contrast). */
-    --empty-state-heading-size-default:   var(--a-heading-md);
-    --empty-state-heading-weight-default: var(--a-weight-medium);
-    --empty-state-desc-size-default:      var(--a-ui-size);
+    --empty-state-heading-size:   var(--a-heading-md);
+    --empty-state-heading-weight: var(--a-weight-medium);
+    --empty-state-desc-size:      var(--a-ui-size);
   }
 
   :scope {
@@ -29,49 +29,49 @@
     flex-direction: column;
     align-items: center;
     text-align: center;
-    padding: var(--empty-state-py, var(--empty-state-py-default)) var(--empty-state-px, var(--empty-state-px-default));
-    gap: var(--empty-state-gap, var(--empty-state-gap-default));
+    padding: var(--empty-state-py) var(--empty-state-px);
+    gap: var(--empty-state-gap);
   }
 
   /* ── Icon ── */
   [slot="icon"] {
-    font-size: var(--empty-state-icon-size, var(--empty-state-icon-size-default));
-    color: var(--empty-state-icon-fg, var(--empty-state-icon-fg-default));
+    font-size: var(--empty-state-icon-size);
+    color: var(--empty-state-icon-fg);
   }
 
   /* ── Heading ── */
   [slot="heading"] {
-    font-size: var(--empty-state-heading-size, var(--empty-state-heading-size-default));
-    font-weight: var(--empty-state-heading-weight, var(--empty-state-heading-weight-default));
-    color: var(--empty-state-heading-fg, var(--empty-state-heading-fg-default));
+    font-size: var(--empty-state-heading-size);
+    font-weight: var(--empty-state-heading-weight);
+    color: var(--empty-state-heading-fg);
     line-height: 1.3;
   }
 
   /* ── Description ── */
   [slot="description"] {
-    font-size: var(--empty-state-desc-size, var(--empty-state-desc-size-default));
-    color: var(--empty-state-desc-fg, var(--empty-state-desc-fg-default));
+    font-size: var(--empty-state-desc-size);
+    color: var(--empty-state-desc-fg);
     line-height: 1.5;
     max-width: 36ch;
   }
 
   /* ── Action slot ── */
   [slot="action"] {
-    margin-top: var(--empty-state-action-mt, var(--empty-state-action-mt-default));
+    margin-top: var(--empty-state-action-mt);
   }
 
   /* ── Semantic color variants ──
      Color the icon + text only; no background/border tint. */
   :scope[variant="danger"] {
-    --empty-state-icon-fg-default:    var(--a-danger-strong);
-    --empty-state-heading-fg-default: var(--a-danger-text);
-    --empty-state-desc-fg-default:    var(--a-danger-text);
+    --empty-state-icon-fg:    var(--a-danger-strong);
+    --empty-state-heading-fg: var(--a-danger-text);
+    --empty-state-desc-fg:    var(--a-danger-text);
   }
 
   :scope[variant="warning"] {
-    --empty-state-icon-fg-default:    var(--a-warning-strong);
-    --empty-state-heading-fg-default: var(--a-warning-text);
-    --empty-state-desc-fg-default:    var(--a-warning-text);
+    --empty-state-icon-fg:    var(--a-warning-strong);
+    --empty-state-heading-fg: var(--a-warning-text);
+    --empty-state-desc-fg:    var(--a-warning-text);
   }
 
   /* ── §223 (v0.5.9): [minimal] — single-line muted layout ──
@@ -98,8 +98,8 @@
     /* Keep the heading bolder + non-muted so it stays distinct from the
        muted inline description on the same baseline (otherwise '[icon]
        heading description' reads as one run-on phrase). */
-    font-weight: var(--empty-state-heading-weight, var(--empty-state-heading-weight-default));
-    color: var(--empty-state-heading-fg, var(--empty-state-heading-fg-default));
+    font-weight: var(--empty-state-heading-weight);
+    color: var(--empty-state-heading-fg);
     line-height: inherit;
   }
   :scope[minimal] [slot="description"] {

package/components/feed/feed.css

@@ -22,10 +22,10 @@ feed-item-ui[data-closing] {
    Popover API for top-layer placement. */
 @scope (feed-ui) {
   :where(:scope) {
-    --feed-gap-default:        var(--a-space-2);
-    --feed-padding-default:    var(--a-space-3);
-    --feed-max-width-default:  22rem;
-    --feed-offset-default:     var(--a-space-4);
+    --feed-gap:        var(--a-space-2);
+    --feed-padding:    var(--a-space-3);
+    --feed-max-width:  22rem;
+    --feed-offset:     var(--a-space-4);
   }
 
   :scope {
@@ -33,13 +33,13 @@ feed-item-ui[data-closing] {
     z-index: 9999;
     display: flex;
     flex-direction: column;
-    gap: var(--feed-gap, var(--feed-gap-default));
+    gap: var(--feed-gap);
     padding: 0;
     background: transparent;
     border: 0;
     pointer-events: none; /* Items re-enable pointer-events. */
     width: max-content;
-    max-width: var(--feed-max-width, var(--feed-max-width-default));
+    max-width: var(--feed-max-width);
     /* Items size to their own content (see feed-item-ui width: max-content);
        align them to the lane's anchored edge so short items hug the side
        rather than left-aligning inside a wider container. */
@@ -61,29 +61,29 @@ feed-item-ui[data-closing] {
   /* Position variants. Default = bottom-right. */
   :scope,
   :scope[position="bottom-right"] {
-    bottom: var(--feed-offset, var(--feed-offset-default)); right: var(--feed-offset, var(--feed-offset-default));
+    bottom: var(--feed-offset); right: var(--feed-offset);
   }
   :scope[position="bottom-left"] {
-    bottom: var(--feed-offset, var(--feed-offset-default)); left: var(--feed-offset, var(--feed-offset-default)); right: auto;
+    bottom: var(--feed-offset); left: var(--feed-offset); right: auto;
     align-items: flex-start;
   }
   :scope[position="bottom-center"] {
-    bottom: var(--feed-offset, var(--feed-offset-default));
+    bottom: var(--feed-offset);
     left: 50%; right: auto;
     transform: translateX(-50%);
     align-items: center;
   }
   :scope[position="top-right"] {
-    top: var(--feed-offset, var(--feed-offset-default)); right: var(--feed-offset, var(--feed-offset-default)); bottom: auto;
+    top: var(--feed-offset); right: var(--feed-offset); bottom: auto;
     flex-direction: column-reverse;
   }
   :scope[position="top-left"] {
-    top: var(--feed-offset, var(--feed-offset-default)); left: var(--feed-offset, var(--feed-offset-default)); right: auto; bottom: auto;
+    top: var(--feed-offset); left: var(--feed-offset); right: auto; bottom: auto;
     flex-direction: column-reverse;
     align-items: flex-start;
   }
   :scope[position="top-center"] {
-    top: var(--feed-offset, var(--feed-offset-default)); bottom: auto;
+    top: var(--feed-offset); bottom: auto;
     left: 50%; right: auto;
     transform: translateX(-50%);
     flex-direction: column-reverse;

package/components/field/field.css

@@ -1,23 +1,23 @@
 @scope (field-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --field-gap-default:             var(--a-space-2);
-    --field-label-color-default:     var(--a-fg);
-    --field-label-size-default:      var(--a-ui-sm);
-    --field-label-weight-default:    var(--a-weight-medium);
-    --field-required-color-default:  var(--a-danger-strong);
-    --field-trailing-color-default:  var(--a-fg-subtle);
-    --field-trailing-size-default:   var(--a-ui-sm);
-    --field-hint-color-default:      var(--a-fg-muted);
-    --field-hint-size-default:       var(--a-ui-sm);
-    --field-error-color-default:     var(--a-danger-strong);
-    --field-error-size-default:      var(--a-ui-sm);
+    --field-gap:             var(--a-space-2);
+    --field-label-color:     var(--a-fg);
+    --field-label-size:      var(--a-ui-sm);
+    --field-label-weight:    var(--a-weight-medium);
+    --field-required-color:  var(--a-danger-strong);
+    --field-trailing-color:  var(--a-fg-subtle);
+    --field-trailing-size:   var(--a-ui-sm);
+    --field-hint-color:      var(--a-fg-muted);
+    --field-hint-size:       var(--a-ui-sm);
+    --field-error-color:     var(--a-danger-strong);
+    --field-error-size:      var(--a-ui-sm);
 
     /* In inline mode, the label column auto-sizes by default (each
        field's label column is independent of its siblings). Consumers
        that want shared label-column alignment across stacked inline
        fields can raise this floor — e.g. 12rem in a multi-field form. */
-    --field-label-inline-min-default: 0;
+    --field-label-inline-min: 0;
   }
 
   /* ── Base — single grid; children placed by [slot] attribute via
@@ -32,7 +32,7 @@
       "label"
       "control"
       "message";
-    column-gap: var(--field-gap, var(--field-gap-default));
+    column-gap: var(--field-gap);
     align-items: center;
   }
 
@@ -50,7 +50,7 @@
      FB-54 (v0.6.32) — closes the trap for compact filter bars that
      mix field-ui with bare primitives. */
   :scope:has([slot="hint"], [slot="error"]) {
-    row-gap: var(--field-gap, var(--field-gap-default));
+    row-gap: var(--field-gap);
   }
 
   /* Stacked + (trailing or action) → 2-col */
@@ -81,22 +81,22 @@
   /* ── Slot styling ── */
   :scope [slot="label"] {
     grid-area: label;
-    color: var(--field-label-color, var(--field-label-color-default));
-    font-size: var(--field-label-size, var(--field-label-size-default));
-    font-weight: var(--field-label-weight, var(--field-label-weight-default));
+    color: var(--field-label-color);
+    font-size: var(--field-label-size);
+    font-weight: var(--field-label-weight);
     cursor: pointer;
     min-width: 0;
   }
   :scope [slot="label"] > [data-field-required] {
-    color: var(--field-required-color, var(--field-required-color-default));
+    color: var(--field-required-color);
     margin-inline-start: 0.15em;
     font-weight: var(--a-weight-bold);
   }
   :scope [slot="trailing"] {
     grid-area: trailing;
     justify-self: end;
-    color: var(--field-trailing-color, var(--field-trailing-color-default));
-    font-size: var(--field-trailing-size, var(--field-trailing-size-default));
+    color: var(--field-trailing-color);
+    font-size: var(--field-trailing-size);
   }
   :scope > :not([slot]) {
     grid-area: control;
@@ -112,12 +112,12 @@
     line-height: 1.3;
   }
   :scope [slot="hint"] {
-    color: var(--field-hint-color, var(--field-hint-color-default));
-    font-size: var(--field-hint-size, var(--field-hint-size-default));
+    color: var(--field-hint-color);
+    font-size: var(--field-hint-size);
   }
   :scope [slot="error"] {
-    color: var(--field-error-color, var(--field-error-color-default));
-    font-size: var(--field-error-size, var(--field-error-size-default));
+    color: var(--field-error-color);
+    font-size: var(--field-error-size);
     font-weight: var(--a-weight-medium);
   }
 
@@ -127,7 +127,7 @@
        optional slots are present so we don't carry zero-width
        tracks + their gaps. ── */
   :scope[inline] {
-    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) minmax(0, 1fr);
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) minmax(0, 1fr);
     grid-template-areas:
       "label   control"
       ".       message";
@@ -137,19 +137,19 @@
      result count), so it reads at the row's end, mirroring input-ui's own
      trailing slot. (bug-18) */
   :scope[inline]:has([slot="trailing"]):not(:has([slot="action"])) {
-    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) minmax(0, 1fr) auto;
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) minmax(0, 1fr) auto;
     grid-template-areas:
       "label   control trailing"
       ".       message message";
   }
   :scope[inline]:not(:has([slot="trailing"])):has([slot="action"]) {
-    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) minmax(0, 1fr) auto;
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) minmax(0, 1fr) auto;
     grid-template-areas:
       "label   control action"
       ".       message message";
   }
   :scope[inline]:has([slot="trailing"]):has([slot="action"]) {
-    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) minmax(0, 1fr) auto auto;
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) minmax(0, 1fr) auto auto;
     grid-template-areas:
       "label   control trailing action"
       ".       message message message";

package/components/field/field.test.js

@@ -232,8 +232,8 @@ describe('field-ui', () => {
     // descendant form `:has([slot="hint"], [slot="error"])` (v0.6.x); either
     // satisfies the FB-54 row-gap-presence-guard contract.
     expect(FIELD_CSS).toMatch(
-      // `var(--field-gap[,)]` accepts both the bare token and the override-aware
-      // `var(--field-gap, var(--field-gap-default))` chain (OD-5 token-shadowing).
+      // `var(--field-gap[,)]` matches the bare `var(--field-gap)` read (the `)`
+      // branch); the `,` branch tolerates any legacy fallback form.
       /:scope:has\((?:>\s*)?\[slot="hint"\]\s*,\s*(?:>\s*)?\[slot="error"\]\)\s*\{[^}]*row-gap:\s*var\(--field-gap[,)]/
     );
   });

package/components/fields/fields.css

@@ -1,9 +1,9 @@
 @scope (fields-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --fields-gap-default:        var(--a-space-3);
-    --fields-row-gap-default:    var(--fields-gap, var(--fields-gap-default));
-    --fields-column-gap-default: var(--fields-gap, var(--fields-gap-default));
+    --fields-gap:        var(--a-space-3);
+    --fields-row-gap:    var(--fields-gap);
+    --fields-column-gap: var(--fields-gap);
   }
 
   /* ── Base — 6-column grid ──
@@ -18,8 +18,8 @@
     box-sizing: border-box;
     display: grid;
     grid-template-columns: repeat(var(--fields-columns, 6), minmax(0, 1fr));
-    column-gap: var(--fields-column-gap, var(--fields-column-gap-default));
-    row-gap: var(--fields-row-gap, var(--fields-row-gap-default));
+    column-gap: var(--fields-column-gap);
+    row-gap: var(--fields-row-gap);
     align-items: start;
   }