@adia-ai/web-components 0.7.3 → 0.7.5

package/components/breadcrumb/breadcrumb.css

@@ -1,34 +1,34 @@
 @scope (breadcrumb-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --breadcrumb-gap-default:          var(--a-space-1);
-    --breadcrumb-max-width-default:    12rem;
+    --breadcrumb-gap:          var(--a-space-1);
+    --breadcrumb-max-width:    12rem;
 
     /* ── Typography ── */
-    --breadcrumb-font-size-default:    var(--a-ui-size);
-    --breadcrumb-current-weight-default: var(--a-weight-medium);
+    --breadcrumb-font-size:    var(--a-ui-size);
+    --breadcrumb-current-weight: var(--a-weight-medium);
 
     /* ── Colors ── */
-    --breadcrumb-fg-default:           var(--a-fg-subtle);
-    --breadcrumb-fg-hover-default:     var(--a-fg);
-    --breadcrumb-separator-fg-default: var(--a-fg-muted);
-    --breadcrumb-current-fg-default:   var(--a-fg-strong);
+    --breadcrumb-fg:           var(--a-fg-subtle);
+    --breadcrumb-fg-hover:     var(--a-fg);
+    --breadcrumb-separator-fg: var(--a-fg-muted);
+    --breadcrumb-current-fg:   var(--a-fg-strong);
 
     /* ── Transition ── */
-    --breadcrumb-duration-default:     var(--a-duration-fast);
-    --breadcrumb-easing-default:       var(--a-easing);
+    --breadcrumb-duration:     var(--a-duration-fast);
+    --breadcrumb-easing:       var(--a-easing);
 
     /* ── Link ── */
-    --breadcrumb-link-radius-default:  var(--a-radius-sm);
-    --breadcrumb-link-focus-ring-default: var(--a-focus-ring);
+    --breadcrumb-link-radius:  var(--a-radius-sm);
+    --breadcrumb-link-focus-ring: var(--a-focus-ring);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    gap: var(--breadcrumb-gap, var(--breadcrumb-gap-default));
-    font-size: var(--breadcrumb-font-size, var(--breadcrumb-font-size-default));
+    gap: var(--breadcrumb-gap);
+    font-size: var(--breadcrumb-font-size);
   }
 
   /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
@@ -36,7 +36,7 @@
 
   /* Separator — standalone span, never inside <a> */
   [data-sep] {
-    color: var(--breadcrumb-separator-fg, var(--breadcrumb-separator-fg-default));
+    color: var(--breadcrumb-separator-fg);
     flex-shrink: 0;
     pointer-events: none;
     user-select: none;
@@ -49,32 +49,32 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: var(--breadcrumb-max-width, var(--breadcrumb-max-width-default));
-    color: var(--breadcrumb-fg, var(--breadcrumb-fg-default));
+    max-width: var(--breadcrumb-max-width);
+    color: var(--breadcrumb-fg);
   }
 
   /* Links */
   a[data-item] {
     text-decoration: none;
-    border-radius: var(--breadcrumb-link-radius, var(--breadcrumb-link-radius-default));
-    transition: color var(--breadcrumb-duration, var(--breadcrumb-duration-default)) var(--breadcrumb-easing, var(--breadcrumb-easing-default));
+    border-radius: var(--breadcrumb-link-radius);
+    transition: color var(--breadcrumb-duration) var(--breadcrumb-easing);
   }
 
   a[data-item]:hover {
-    color: var(--breadcrumb-fg-hover, var(--breadcrumb-fg-hover-default));
+    color: var(--breadcrumb-fg-hover);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
 
   a[data-item]:focus-visible {
     outline: none;
-    box-shadow: var(--breadcrumb-link-focus-ring, var(--breadcrumb-link-focus-ring-default));
+    box-shadow: var(--breadcrumb-link-focus-ring);
   }
 
   /* Current (last item) */
   [data-item][aria-current] {
-    color: var(--breadcrumb-current-fg, var(--breadcrumb-current-fg-default));
-    font-weight: var(--breadcrumb-current-weight, var(--breadcrumb-current-weight-default));
+    color: var(--breadcrumb-current-fg);
+    font-weight: var(--breadcrumb-current-weight);
     pointer-events: none;
     text-decoration: none;
   }

package/components/button/button.css

@@ -6,80 +6,79 @@ button-ui:active { transform: scale(0.97); }
 
 button-ui:not([disabled]):hover,
 button-ui[variant="primary"]:not([disabled]):hover {
-  --button-bg-default: var(--button-bg-hover, var(--button-bg-hover-default));
-  --button-fg-default: var(--button-fg-hover, var(--button-fg-hover-default));
-  --button-border-default: var(--button-border-hover, var(--button-border-hover-default));
+  --button-bg: var(--button-bg-hover);
+  --button-fg: var(--button-fg-hover);
+  --button-border: var(--button-border-hover);
 }
 button-ui[variant="ghost"]:not([disabled]):hover {
-  --button-bg-default: var(--button-bg-ghost-hover, var(--button-bg-ghost-hover-default));
-  --button-fg-default: var(--button-fg-ghost-hover, var(--button-fg-ghost-hover-default));
-  --button-border-default: var(--button-border-ghost-hover, var(--button-border-ghost-hover-default));
+  --button-bg: var(--button-bg-ghost-hover);
+  --button-fg: var(--button-fg-ghost-hover);
+  --button-border: var(--button-border-ghost-hover);
 }
 button-ui[variant="outline"]:not([disabled]):hover {
-  --button-fg-default: var(--button-fg-hover, var(--button-fg-hover-default));
-  --button-border-default: var(--button-border-hover, var(--button-border-hover-default));
+  --button-fg: var(--button-fg-hover);
+  --button-border: var(--button-border-hover);
 }
 button-ui[color="danger"]:not([disabled]):hover {
-  --button-bg-default: var(--button-bg-hover, var(--button-bg-hover-default));
-  --button-fg-default: var(--button-fg-hover, var(--button-fg-hover-default));
-  --button-border-default: var(--button-border-hover, var(--button-border-hover-default));
+  --button-bg: var(--button-bg-hover);
+  --button-fg: var(--button-fg-hover);
+  --button-border: var(--button-border-hover);
 }
 
 @scope (button-ui) {
   :where(:scope) {
-    /* OD-5 token-shadowing fix: `-default` suffix on internal-target
-       tokens so the un-suffixed name (--button-bg / --button-fg /
-       --button-border) is reserved as a consumer-extension point.
-       Use sites read `var(--name, var(--name-default))` so a
-       surface-ancestor declaration of --button-bg can win over the
-       button's own state/variant cascade. Spec: docs/specs/genui-css-channel.md OD-5. */
-    --button-bg-default:       var(--a-ui-bg);
-    --button-fg-default:       var(--a-ui-text);
-    --button-border-default:   transparent;
-    --button-height-default:           var(--a-size);
-    --button-px-default:               var(--a-ui-px);
-    --button-radius-default:           var(--a-radius);
-    --button-font-size-default:        var(--a-ui-size);
-    --button-font-weight-default:      var(--a-ui-weight);
-    --button-gap-default:              var(--a-space-1);
-    --button-bg-hover-default:         var(--a-ui-bg-hover);
-    --button-fg-hover-default:         var(--a-ui-text-hover);
-    --button-border-hover-default:     transparent;
-    --button-bg-primary-default:       var(--a-primary);
-    --button-fg-primary-default:       var(--a-chrome-light);
-    --button-bg-outline-default:       transparent;
-    --button-fg-outline-default:       var(--a-fg);
-    --button-border-outline-default:   var(--a-ui-border);
-    --button-bg-ghost-default:         transparent;
-    --button-fg-ghost-default:         var(--a-fg-subtle);
-    --button-fg-ghost-hover-default:   var(--a-fg-strong);
-    --button-bg-ghost-hover-default:   var(--a-bg-hover);
-    --button-border-ghost-default:     transparent;
-    --button-border-ghost-hover-default: transparent;
-    --button-bg-danger-default:        var(--a-danger);
-    --button-fg-danger-default:        var(--a-danger-fg);
-    --button-bg-hover-danger-default:  var(--a-danger);
-    --button-bg-disabled-default:      var(--a-ui-bg-disabled);
-    --button-fg-disabled-default:      var(--a-ui-text-disabled);
-    --button-border-disabled-default:  transparent;
+    /* Component tokens — the un-suffixed `--button-*` names ARE the
+       component's tokens; variants/states re-point them below. Consumers
+       override per-element (`button-ui { --button-bg: … }` or inline) or
+       via `@layer overrides`. See docs/specs/component-token-contract.md. */
+    --button-bg:       var(--a-ui-bg);
+    --button-fg:       var(--a-ui-text);
+    --button-border:   transparent;
+    --button-height:           var(--a-size);
+    --button-px:               var(--a-ui-px);
+    --button-radius:           var(--a-radius);
+    --button-font-size:        var(--a-ui-size);
+    --button-font-weight:      var(--a-ui-weight);
+    --button-font-family:      var(--a-font-family-ui);
+    --button-gap:              var(--a-space-1);
+    --button-bg-hover:         var(--a-ui-bg-hover);
+    --button-fg-hover:         var(--a-ui-text-hover);
+    --button-border-hover:     transparent;
+    --button-bg-primary:       var(--a-primary);
+    --button-fg-primary:       var(--a-chrome-light);
+    --button-bg-outline:       transparent;
+    --button-fg-outline:       var(--a-fg);
+    --button-border-outline:   var(--a-ui-border);
+    --button-bg-ghost:         transparent;
+    --button-fg-ghost:         var(--a-fg-subtle);
+    --button-fg-ghost-hover:   var(--a-fg-strong);
+    --button-bg-ghost-hover:   var(--a-bg-hover);
+    --button-border-ghost:     transparent;
+    --button-border-ghost-hover: transparent;
+    --button-bg-danger:        var(--a-danger);
+    --button-fg-danger:        var(--a-chrome-light);  /* white on the saturated fill — see color rules */
+    --button-bg-hover-danger:  var(--a-danger);
+    --button-bg-disabled:      var(--a-ui-bg-disabled);
+    --button-fg-disabled:      var(--a-ui-text-disabled);
+    --button-border-disabled:  transparent;
 
     /* ── Transition ── */
-    --button-duration-default:         var(--a-duration-fast);
-    --button-easing-default:           var(--a-easing);
+    --button-duration:         var(--a-duration-fast);
+    --button-easing:           var(--a-easing);
 
     /* ── State ── */
-    --button-focus-ring-default:       var(--a-focus-ring);
+    --button-focus-ring:       var(--a-focus-ring);
 
     /* ── Trailing slot ── */
-    --button-trailing-font-size-default:  var(--a-ui-sm);
+    --button-trailing-font-size:  var(--a-ui-sm);
     /* kbd-pill tracks the button's OWN text color (currentColor) so it reads
        on any variant fill — on a primary button the fixed --a-fg-muted gray
        was nearly invisible against the white label. Border is a translucent
        slice of the same color so the pill outline adapts too. */
-    --button-trailing-fg-default:         currentColor;
-    --button-trailing-border-default:     color-mix(in oklab, currentColor 28%, transparent);
-    --button-trailing-radius-default:     var(--a-radius-sm);
-    --button-trailing-px-default:         var(--a-space-0-5);
+    --button-trailing-fg:         currentColor;
+    --button-trailing-border:     color-mix(in oklab, currentColor 28%, transparent);
+    --button-trailing-radius:     var(--a-radius-sm);
+    --button-trailing-px:         var(--a-space-0-5);
   }
 
   :scope {
@@ -87,27 +86,29 @@ button-ui[color="danger"]:not([disabled]):hover {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--button-gap, var(--button-gap-default));
-    min-width: var(--button-height, var(--button-height-default));   /* keep button at least as wide as it is tall */
-    min-height: var(--button-height, var(--button-height-default));
+    gap: var(--button-gap);
+    min-width: var(--button-height);   /* keep button at least as wide as it is tall */
+    min-height: var(--button-height);
     overflow: hidden;
-    padding-inline: var(--button-px, var(--button-px-default));
-    border: 1px solid var(--button-border, var(--button-border-default));
-    border-radius: var(--button-radius, var(--button-radius-default));
-    background: var(--button-bg, var(--button-bg-default));
-    color: var(--button-fg, var(--button-fg-default));
+    padding-inline: var(--button-px);
+    border: 1px solid var(--button-border);
+    border-radius: var(--button-radius);
+    background: var(--button-bg);
+    color: var(--button-fg);
     font: inherit;
-    font-size: var(--button-font-size, var(--button-font-size-default));
-    font-weight: var(--button-font-weight, var(--button-font-weight-default));
+    /* font-family floor — see segment.css rationale. */
+    font-family: var(--button-font-family);
+    font-size: var(--button-font-size);
+    font-weight: var(--button-font-weight);
     line-height: 1;
     cursor: pointer;
     user-select: none;
     transition:
-      background var(--button-duration, var(--button-duration-default)) var(--button-easing, var(--button-easing-default)),
-      border-color var(--button-duration, var(--button-duration-default)) var(--button-easing, var(--button-easing-default)),
-      color var(--button-duration, var(--button-duration-default)) var(--button-easing, var(--button-easing-default)),
-      opacity var(--button-duration, var(--button-duration-default)) var(--button-easing, var(--button-easing-default)),
-      transform var(--button-duration, var(--button-duration-default)) var(--button-easing, var(--button-easing-default));
+      background var(--button-duration) var(--button-easing),
+      border-color var(--button-duration) var(--button-easing),
+      color var(--button-duration) var(--button-easing),
+      opacity var(--button-duration) var(--button-easing),
+      transform var(--button-duration) var(--button-easing);
     white-space: nowrap;
   }
   :scope[text]::after {
@@ -140,38 +141,36 @@ button-ui[color="danger"]:not([disabled]):hover {
   [slot="trailing"] {
     order: 99;
     margin-inline-start: auto;
-    font-size: var(--button-trailing-font-size, var(--button-trailing-font-size-default));
-    color: var(--button-trailing-fg, var(--button-trailing-fg-default));
+    font-size: var(--button-trailing-font-size);
+    color: var(--button-trailing-fg);
     font-family: inherit;
-    border: 1px solid var(--button-trailing-border, var(--button-trailing-border-default));
-    border-radius: var(--button-trailing-radius, var(--button-trailing-radius-default));
-    padding: 0 var(--button-trailing-px, var(--button-trailing-px-default));
+    border: 1px solid var(--button-trailing-border);
+    border-radius: var(--button-trailing-radius);
+    padding: 0 var(--button-trailing-px);
     line-height: 1;
   }
 
   /* :scope:active moved outside @scope — see Safari 17.x bug note at top. */
-  :scope:focus-visible { outline: none; box-shadow: var(--button-focus-ring, var(--button-focus-ring-default)); }
+  :scope:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }
 
   /* ── Variants (rest state) ──
-     State/variant blocks override the `-default` (the fallback for
-     when no consumer extension is set). Consumer override of the
-     un-suffixed name (--button-bg etc.) wins at the use site via
-     `var(--button-bg, var(--button-bg-default))`. */
+     Variant/state blocks re-point the component tokens (--button-bg etc.);
+     the base layout in :scope stays untouched. */
   :scope[variant="primary"] {
-    --button-bg-default: var(--button-bg-primary, var(--button-bg-primary-default));
-    --button-fg-default: var(--button-fg-primary, var(--button-fg-primary-default));
+    --button-bg: var(--button-bg-primary);
+    --button-fg: var(--button-fg-primary);
   }
 
   :scope[variant="outline"] {
-    --button-bg-default: var(--button-bg-outline, var(--button-bg-outline-default));
-    --button-fg-default: var(--button-fg-outline, var(--button-fg-outline-default));
-    --button-border-default: var(--button-border-outline, var(--button-border-outline-default));
+    --button-bg: var(--button-bg-outline);
+    --button-fg: var(--button-fg-outline);
+    --button-border: var(--button-border-outline);
   }
 
   :scope[variant="ghost"] {
-    --button-bg-default: var(--button-bg-ghost, var(--button-bg-ghost-default));
-    --button-fg-default: var(--button-fg-ghost, var(--button-fg-ghost-default));
-    --button-border-default: var(--button-border-ghost, var(--button-border-ghost-default));
+    --button-bg: var(--button-bg-ghost);
+    --button-fg: var(--button-fg-ghost);
+    --button-border: var(--button-border-ghost);
   }
 
   /* ── Color (semantic axis) ──
@@ -180,30 +179,53 @@ button-ui[color="danger"]:not([disabled]):hover {
      vs `<button-ui variant="outline" color="danger">`.
      `variant="danger"` is a deprecated alias migrated to color via JS. */
   :scope[color="danger"] {
-    --button-bg-default: var(--button-bg-danger, var(--button-bg-danger-default));
-    --button-fg-default: var(--button-fg-danger, var(--button-fg-danger-default));
+    --button-bg: var(--button-bg-danger);
+    --button-fg: var(--button-fg-danger);
   }
   :scope[color="success"] {
     /* Consume the L3 `-bg` alias, not the L2 `-strong` step. Currently
        resolves identically (both = `-50`), but consuming `-bg` future-
        proofs if the surface-step ever redirects (as -warning-bg did
-       in v0.6.36 to fix muddy contrast). */
-    --button-bg-default: var(--a-success-bg);
-    --button-fg-default: var(--a-success-fg);
+       in v0.6.36 to fix muddy contrast).
+       Text is --a-chrome-light (white) on the saturated fill, like primary
+       (--button-fg-primary). --a-success-fg is success-COLORED text — near
+       invisible on the fill (feedback_text_on_accent_disc). Warning is the
+       exception: its --a-warning-bg fill is light, so it keeps dark -fg. */
+    --button-bg: var(--a-success-bg);
+    --button-fg: var(--a-chrome-light);
   }
   :scope[color="info"] {
-    --button-bg-default: var(--a-info-bg);
-    --button-fg-default: var(--a-info-fg);
+    --button-bg: var(--a-info-bg);
+    --button-fg: var(--a-chrome-light);
   }
   :scope[color="warning"] {
     /* `--a-warning-bg` (bright amber, scheme-independent) not
        `-strong` (mid-tone). The pair `-strong` + `-fg` gives muddy
        brown-on-brown — the L3 `-bg` is the canonical solid-warning
        surface paired with `-fg` (dark text). */
-    --button-bg-default: var(--a-warning-bg);
-    --button-fg-default: var(--a-warning-fg);
+    --button-bg: var(--a-warning-bg);
+    --button-fg: var(--a-warning-fg);
   }
 
+  /* ── Color × non-solid variants ──
+     The [color] rules above set a SOLID fill — that's the default rendering
+     (bare `color="danger"`). But with variant="outline"/"ghost" the button
+     must COMPOSE, not fill. These combined selectors (specificity 0,3,0) beat
+     the 0,2,0 [color] rules regardless of source order, restoring a transparent
+     fill + colored text (+ colored border for outline). Without them,
+     `variant="outline" color="success"` renders as a solid green pill — the
+     demo's "Approve" button (button.examples.html:50). --a-X-text is the
+     family-colored text designed to read on a neutral page surface; -border is
+     the L3 colored border alias. */
+  :scope[variant="outline"][color="danger"]  { --button-bg: transparent; --button-fg: var(--a-danger-text);  --button-border: var(--a-danger-border); }
+  :scope[variant="outline"][color="info"]     { --button-bg: transparent; --button-fg: var(--a-info-text);     --button-border: var(--a-info-border); }
+  :scope[variant="outline"][color="success"]  { --button-bg: transparent; --button-fg: var(--a-success-text);  --button-border: var(--a-success-border); }
+  :scope[variant="outline"][color="warning"]  { --button-bg: transparent; --button-fg: var(--a-warning-text);  --button-border: var(--a-warning-border); }
+  :scope[variant="ghost"][color="danger"]   { --button-bg: transparent; --button-fg: var(--a-danger-text); }
+  :scope[variant="ghost"][color="info"]      { --button-bg: transparent; --button-fg: var(--a-info-text); }
+  :scope[variant="ghost"][color="success"]   { --button-bg: transparent; --button-fg: var(--a-success-text); }
+  :scope[variant="ghost"][color="warning"]   { --button-bg: transparent; --button-fg: var(--a-warning-text); }
+
   /* Hover rules moved outside @scope — see Safari 17.x bug note at
      top of file. */
 
@@ -216,16 +238,16 @@ button-ui[color="danger"]:not([disabled]):hover {
 
   /* Disabled */
   :scope[disabled] {
-    --button-bg-default: var(--button-bg-disabled, var(--button-bg-disabled-default));
-    --button-fg-default: var(--button-fg-disabled, var(--button-fg-disabled-default));
-    --button-border-default: var(--button-border-disabled, var(--button-border-disabled-default));
+    --button-bg: var(--button-bg-disabled);
+    --button-fg: var(--button-fg-disabled);
+    --button-border: var(--button-border-disabled);
     pointer-events: none;
     cursor: not-allowed;
   }
 
   /* Icon-only (no text) */
   :scope:not([text]), :scope[text=""] {
-    --button-px-default: 0;
-    width: var(--button-height, var(--button-height-default));
+    --button-px: 0;
+    width: var(--button-height);
   }
 }