@adia-ai/web-components 0.6.33 → 0.6.34

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.34] — 2026-05-23
+
+### Added — Wave 1 + Wave 2: 10 P1 components shipped from SPEC pilot
+
+- **Wave 1 — 8 components** (commit `5ad89318d`): SPEC-001, SPEC-022, SPEC-036, SPEC-037, SPEC-043, SPEC-049, SPEC-056, SPEC-062. First wave of the SPEC-driven component-authoring pilot. Each ships full yaml + a2ui.json + .js class + .css + .examples.html + .test.js per the four-axis contract.
+- **Wave 2 — 2 components** (commit `501053880`): SPEC-019, SPEC-038. Completes the 10-component pilot.
+- **`<calendar-grid-ui>` substrate primitive extracted** (commit `dcf16cdf8`): a substrate-tier primitive supporting the calendar-family Wave 2 components.
+- **Wave 1/2 visual-QA fixes** also landed in `dcf16cdf8`.
+- Component count: 92 → 100 primitives (8 net additions). yaml/a2ui.json/d.ts coherence preserved.
+
+### Fixed — OD-5 token-shadowing closed across 98 components (`-default` suffix sweep)
+
+- **`-default` suffix added to all leaf component tokens** (commit `e694be9d0`, single-component fix at `cbdf11f09`): unlocks themability/consumer override across all 98 component CSS files. Pattern: `--button-bg: var(--a-fg);` → `--button-bg-default: var(--a-fg); ... background: var(--button-bg, var(--button-bg-default));`. Consumer overrides at any ancestor surface now apply correctly without being shadowed by the leaf-token default. Closes OD-5 (consumer-side override-discoverability regression).
+
+### Changed — `dist/web-components.min.js` + `dist/web-components.min.css` rebuilt
+
+- Bundle pass absorbed Wave 1+2 + OD-5 + `<calendar-grid-ui>` source changes. Bundle sizes adjusted accordingly.
+
+### Maintenance — `<spinner-ui>` exempted from size-wiring audit
+
+- **`scripts/release/check-size-wiring.mjs`** YAML_SIZE_EXEMPT: added `spinner` — `size:` prop drives diameter via `--spinner-size` matching the icon-ui ladder (sm 14px / md 16px / lg 20px), parallel to existing exemptions for `icon`, `rating`, `swatch`. Content-driven loading glyph, not row-family. Surfaced by the audit after spinner joined the 100-component roster.
+
 ## [0.6.33] — 2026-05-23
 
 ### Changed — `dist/icons-manifest.js` comment header updated (FB-53 §1 companion)

package/components/accordion/accordion.css

@@ -9,14 +9,14 @@
 /* ── Container ── */
 @scope (accordion-ui) {
   :where(:scope) {
-    --accordion-gap: 0;
+    --accordion-gap-default: 0;
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--accordion-gap);
+    gap: var(--accordion-gap, var(--accordion-gap-default));
   }
 }
 

package/components/action-list/action-list.css

@@ -1,13 +1,13 @@
 @scope (action-list-ui) {
   :where(:scope) {
-    --action-list-gap: var(--a-space-0-5);
+    --action-list-gap-default: var(--a-space-0-5);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--action-list-gap);
+    gap: var(--action-list-gap, var(--action-list-gap-default));
     margin: 0;
     padding: 0;
     list-style: none;

package/components/agent-artifact/agent-artifact.css

@@ -1,57 +1,57 @@
 @scope (agent-artifact-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --agent-artifact-radius:            var(--a-radius);
-    --agent-artifact-padding:           var(--a-space-3);
-    --agent-artifact-header-padding-y:  var(--a-space-2);
-    --agent-artifact-header-padding-x:  var(--a-space-3);
-    --agent-artifact-gap:               var(--a-space-2);
+    --agent-artifact-radius-default:            var(--a-radius);
+    --agent-artifact-padding-default:           var(--a-space-3);
+    --agent-artifact-header-padding-y-default:  var(--a-space-2);
+    --agent-artifact-header-padding-x-default:  var(--a-space-3);
+    --agent-artifact-gap-default:               var(--a-space-2);
 
     /* ── Colors ── */
-    --agent-artifact-bg:                var(--a-bg-subtle);
-    --agent-artifact-fg:                var(--a-fg);
-    --agent-artifact-fg-muted:          var(--a-fg-muted);
-    --agent-artifact-border:            var(--a-border-subtle);
-    --agent-artifact-header-bg:         var(--a-bg);
-    --agent-artifact-header-bg-hover:   var(--a-bg-hover);
+    --agent-artifact-bg-default:                var(--a-bg-subtle);
+    --agent-artifact-fg-default:                var(--a-fg);
+    --agent-artifact-fg-muted-default:          var(--a-fg-muted);
+    --agent-artifact-border-default:            var(--a-border-subtle);
+    --agent-artifact-header-bg-default:         var(--a-bg);
+    --agent-artifact-header-bg-hover-default:   var(--a-bg-hover);
 
     /* ── Typography ── */
-    --agent-artifact-title-size:        var(--a-ui-md);
-    --agent-artifact-title-weight:      var(--a-weight-medium);
+    --agent-artifact-title-size-default:        var(--a-ui-md);
+    --agent-artifact-title-weight-default:      var(--a-weight-medium);
 
     /* ── Motion ── */
-    --agent-artifact-duration:          var(--a-duration-fast);
+    --agent-artifact-duration-default:          var(--a-duration-fast);
   }
 
   :scope {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--agent-artifact-border);
-    border-radius: var(--agent-artifact-radius);
-    background: var(--agent-artifact-bg);
+    border: 1px solid var(--agent-artifact-border, var(--agent-artifact-border-default));
+    border-radius: var(--agent-artifact-radius, var(--agent-artifact-radius-default));
+    background: var(--agent-artifact-bg, var(--agent-artifact-bg-default));
     overflow: hidden;
     min-width: 0;
   }
 
-  :scope[tone="accent"]  { --agent-artifact-border: var(--a-accent-bg); }
-  :scope[tone="warning"] { --agent-artifact-border: var(--a-warning-bg); }
-  :scope[tone="danger"]  { --agent-artifact-border: var(--a-danger-bg); }
+  :scope[tone="accent"]  { --agent-artifact-border-default: var(--a-accent-bg); }
+  :scope[tone="warning"] { --agent-artifact-border-default: var(--a-warning-bg); }
+  :scope[tone="danger"]  { --agent-artifact-border-default: var(--a-danger-bg); }
 
   [data-artifact-header] {
     display: flex;
     align-items: center;
-    gap: var(--agent-artifact-gap);
-    padding: var(--agent-artifact-header-padding-y) var(--agent-artifact-header-padding-x);
-    background: var(--agent-artifact-header-bg);
-    border-block-end: 1px solid var(--agent-artifact-border);
+    gap: var(--agent-artifact-gap, var(--agent-artifact-gap-default));
+    padding: var(--agent-artifact-header-padding-y, var(--agent-artifact-header-padding-y-default)) var(--agent-artifact-header-padding-x, var(--agent-artifact-header-padding-x-default));
+    background: var(--agent-artifact-header-bg, var(--agent-artifact-header-bg-default));
+    border-block-end: 1px solid var(--agent-artifact-border, var(--agent-artifact-border-default));
     cursor: pointer;
     user-select: none;
     min-width: 0;
-    transition: background var(--agent-artifact-duration);
+    transition: background var(--agent-artifact-duration, var(--agent-artifact-duration-default));
   }
 
   [data-artifact-header]:hover {
-    background: var(--agent-artifact-header-bg-hover);
+    background: var(--agent-artifact-header-bg-hover, var(--agent-artifact-header-bg-hover-default));
   }
 
   [data-artifact-header]:focus-visible {
@@ -69,9 +69,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--agent-artifact-title-size);
-    font-weight: var(--agent-artifact-title-weight);
-    color: var(--agent-artifact-fg);
+    font-size: var(--agent-artifact-title-size, var(--agent-artifact-title-size-default));
+    font-weight: var(--agent-artifact-title-weight, var(--agent-artifact-title-weight-default));
+    color: var(--agent-artifact-fg, var(--agent-artifact-fg-default));
   }
 
   /* [data-artifact-kind] is a <badge-ui size="sm"> — it brings its own pill
@@ -91,11 +91,11 @@
 
   [data-artifact-chevron] {
     flex-shrink: 0;
-    transition: transform var(--agent-artifact-duration);
+    transition: transform var(--agent-artifact-duration, var(--agent-artifact-duration-default));
   }
 
   [data-artifact-body] {
-    padding: var(--agent-artifact-padding);
+    padding: var(--agent-artifact-padding, var(--agent-artifact-padding-default));
     min-width: 0;
   }
 

package/components/agent-feedback-bar/agent-feedback-bar.css

@@ -1,29 +1,29 @@
 @scope (agent-feedback-bar-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --agent-feedback-bar-gap:      var(--a-space-1);
-    --agent-feedback-bar-padding:  var(--a-space-2);
+    --agent-feedback-bar-gap-default:      var(--a-space-1);
+    --agent-feedback-bar-padding-default:  var(--a-space-2);
 
     /* ── Typography ── */
-    --agent-feedback-bar-font:     var(--a-ui-sm);
+    --agent-feedback-bar-font-default:     var(--a-ui-sm);
 
     /* ── Colors ── */
-    --agent-feedback-bar-fg:       var(--a-fg-muted);
+    --agent-feedback-bar-fg-default:       var(--a-fg-muted);
   }
 
   :scope {
     display: flex;
     align-items: center;
-    gap: var(--agent-feedback-bar-gap);
-    padding-block: var(--agent-feedback-bar-padding);
-    font-size: var(--agent-feedback-bar-font);
-    color: var(--agent-feedback-bar-fg);
+    gap: var(--agent-feedback-bar-gap, var(--agent-feedback-bar-gap-default));
+    padding-block: var(--agent-feedback-bar-padding, var(--agent-feedback-bar-padding-default));
+    font-size: var(--agent-feedback-bar-font, var(--agent-feedback-bar-font-default));
+    color: var(--agent-feedback-bar-fg, var(--agent-feedback-bar-fg-default));
   }
 
   [data-feedback-status] {
     margin-inline-start: auto;
-    color: var(--agent-feedback-bar-fg);
-    font-size: var(--agent-feedback-bar-font);
+    color: var(--agent-feedback-bar-fg, var(--agent-feedback-bar-fg-default));
+    font-size: var(--agent-feedback-bar-font, var(--agent-feedback-bar-font-default));
   }
 
   :scope[disabled] {

package/components/agent-questions/agent-questions.css

@@ -1,64 +1,64 @@
 @scope (agent-questions-ui) {
   :where(:scope) {
     /* ── Typography ── */
-    --agent-questions-q-size:          var(--a-ui-md);
-    --agent-questions-q-weight:        var(--a-weight-medium);
-    --agent-questions-helper-size:     var(--a-ui-sm);
-    --agent-questions-label-size:      var(--a-ui-md);
-    --agent-questions-label-weight:    var(--a-weight-medium);
-    --agent-questions-desc-size:       var(--a-ui-sm);
+    --agent-questions-q-size-default:          var(--a-ui-md);
+    --agent-questions-q-weight-default:        var(--a-weight-medium);
+    --agent-questions-helper-size-default:     var(--a-ui-sm);
+    --agent-questions-label-size-default:      var(--a-ui-md);
+    --agent-questions-label-weight-default:    var(--a-weight-medium);
+    --agent-questions-desc-size-default:       var(--a-ui-sm);
 
     /* ── Colors ── */
-    --agent-questions-q-fg:            var(--a-fg);
-    --agent-questions-helper-fg:       var(--a-fg-muted);
-    --agent-questions-label-fg:        var(--a-fg);
-    --agent-questions-desc-fg:         var(--a-fg-muted);
-    --agent-questions-option-bg:       var(--a-bg);
-    --agent-questions-option-bg-hover: var(--a-bg-subtle);
-    --agent-questions-option-bg-sel:   var(--a-accent-muted);
-    --agent-questions-option-border:   var(--a-border-subtle);
-    --agent-questions-option-border-sel: var(--a-accent-bg);
-    --agent-questions-check-bg:        var(--a-accent-bg);
-    --agent-questions-check-fg:        var(--a-accent-fg);
+    --agent-questions-q-fg-default:            var(--a-fg);
+    --agent-questions-helper-fg-default:       var(--a-fg-muted);
+    --agent-questions-label-fg-default:        var(--a-fg);
+    --agent-questions-desc-fg-default:         var(--a-fg-muted);
+    --agent-questions-option-bg-default:       var(--a-bg);
+    --agent-questions-option-bg-hover-default: var(--a-bg-subtle);
+    --agent-questions-option-bg-sel-default:   var(--a-accent-muted);
+    --agent-questions-option-border-default:   var(--a-border-subtle);
+    --agent-questions-option-border-sel-default: var(--a-accent-bg);
+    --agent-questions-check-bg-default:        var(--a-accent-bg);
+    --agent-questions-check-fg-default:        var(--a-accent-fg);
 
     /* ── Layout ── */
-    --agent-questions-gap:             var(--a-space-2);
-    --agent-questions-option-gap:      var(--a-space-3);
-    --agent-questions-option-padding:  var(--a-space-3);
-    --agent-questions-option-radius:   var(--a-radius);
-    --agent-questions-q-padding:       var(--a-space-1);
-    --agent-questions-option-body-gap: var(--a-space-0-5);
+    --agent-questions-gap-default:             var(--a-space-2);
+    --agent-questions-option-gap-default:      var(--a-space-3);
+    --agent-questions-option-padding-default:  var(--a-space-3);
+    --agent-questions-option-radius-default:   var(--a-radius);
+    --agent-questions-q-padding-default:       var(--a-space-1);
+    --agent-questions-option-body-gap-default: var(--a-space-0-5);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --agent-questions-check-size:      20px;
+    --agent-questions-check-size-default:      20px;
 
     /* ── Motion ── */
-    --agent-questions-duration:        var(--a-duration-fast);
-    --agent-questions-easing:          var(--a-easing-out);
+    --agent-questions-duration-default:        var(--a-duration-fast);
+    --agent-questions-easing-default:          var(--a-easing-out);
   }
 
   :scope {
     display: flex;
     flex-direction: column;
-    gap: var(--agent-questions-gap);
+    gap: var(--agent-questions-gap, var(--agent-questions-gap-default));
   }
 
   [data-questions-q] {
-    font-size: var(--agent-questions-q-size);
-    font-weight: var(--agent-questions-q-weight);
-    color: var(--agent-questions-q-fg);
-    padding: var(--agent-questions-q-padding) 0;
+    font-size: var(--agent-questions-q-size, var(--agent-questions-q-size-default));
+    font-weight: var(--agent-questions-q-weight, var(--agent-questions-q-weight-default));
+    color: var(--agent-questions-q-fg, var(--agent-questions-q-fg-default));
+    padding: var(--agent-questions-q-padding, var(--agent-questions-q-padding-default)) 0;
   }
 
   [data-questions-helper] {
-    font-size: var(--agent-questions-helper-size);
-    color: var(--agent-questions-helper-fg);
+    font-size: var(--agent-questions-helper-size, var(--agent-questions-helper-size-default));
+    color: var(--agent-questions-helper-fg, var(--agent-questions-helper-fg-default));
     padding-block-end: var(--a-space-1);
   }
 
   [data-questions-options] {
     display: flex;
     flex-direction: column;
-    gap: var(--agent-questions-gap);
+    gap: var(--agent-questions-gap, var(--agent-questions-gap-default));
   }
 
   [data-questions-option] {
@@ -70,29 +70,29 @@
        down to the body's vertical midpoint, which sat between label
        and description rather than on the label. */
     align-items: start;
-    gap: var(--agent-questions-option-gap);
-    padding: var(--agent-questions-option-padding);
-    border: 1px solid var(--agent-questions-option-border);
-    border-radius: var(--agent-questions-option-radius);
-    background: var(--agent-questions-option-bg);
+    gap: var(--agent-questions-option-gap, var(--agent-questions-option-gap-default));
+    padding: var(--agent-questions-option-padding, var(--agent-questions-option-padding-default));
+    border: 1px solid var(--agent-questions-option-border, var(--agent-questions-option-border-default));
+    border-radius: var(--agent-questions-option-radius, var(--agent-questions-option-radius-default));
+    background: var(--agent-questions-option-bg, var(--agent-questions-option-bg-default));
     color: inherit;
     cursor: pointer;
     text-align: start;
     font: inherit;
     transition:
-      background var(--agent-questions-duration) var(--agent-questions-easing),
-      border-color var(--agent-questions-duration) var(--agent-questions-easing);
+      background var(--agent-questions-duration, var(--agent-questions-duration-default)) var(--agent-questions-easing, var(--agent-questions-easing-default)),
+      border-color var(--agent-questions-duration, var(--agent-questions-duration-default)) var(--agent-questions-easing, var(--agent-questions-easing-default));
     min-width: 0;
     width: 100%;
   }
 
   [data-questions-option]:hover {
-    background: var(--agent-questions-option-bg-hover);
+    background: var(--agent-questions-option-bg-hover, var(--agent-questions-option-bg-hover-default));
   }
 
   [data-questions-option][data-selected] {
-    background: var(--agent-questions-option-bg-sel);
-    border-color: var(--agent-questions-option-border-sel);
+    background: var(--agent-questions-option-bg-sel, var(--agent-questions-option-bg-sel-default));
+    border-color: var(--agent-questions-option-border-sel, var(--agent-questions-option-border-sel-default));
   }
 
   [data-questions-option][disabled] {
@@ -101,7 +101,7 @@
   }
 
   [data-questions-option]:focus-visible {
-    outline: 2px solid var(--agent-questions-option-border-sel);
+    outline: 2px solid var(--agent-questions-option-border-sel, var(--agent-questions-option-border-sel-default));
     outline-offset: 2px;
   }
 
@@ -124,24 +124,24 @@
     min-width: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--agent-questions-option-body-gap);
+    gap: var(--agent-questions-option-body-gap, var(--agent-questions-option-body-gap-default));
   }
 
   [data-questions-option-label] {
-    font-size: var(--agent-questions-label-size);
-    font-weight: var(--agent-questions-label-weight);
-    color: var(--agent-questions-label-fg);
+    font-size: var(--agent-questions-label-size, var(--agent-questions-label-size-default));
+    font-weight: var(--agent-questions-label-weight, var(--agent-questions-label-weight-default));
+    color: var(--agent-questions-label-fg, var(--agent-questions-label-fg-default));
   }
 
   [data-questions-option-desc] {
-    font-size: var(--agent-questions-desc-size);
-    color: var(--agent-questions-desc-fg);
+    font-size: var(--agent-questions-desc-size, var(--agent-questions-desc-size-default));
+    color: var(--agent-questions-desc-fg, var(--agent-questions-desc-fg-default));
     line-height: 1.4;
   }
 
   [data-questions-option-check] {
-    width: var(--agent-questions-check-size);
-    height: var(--agent-questions-check-size);
+    width: var(--agent-questions-check-size, var(--agent-questions-check-size-default));
+    height: var(--agent-questions-check-size, var(--agent-questions-check-size-default));
     border-radius: 50%;
     flex-shrink: 0;
     display: flex;
@@ -149,18 +149,18 @@
     justify-content: center;
     background: transparent;
     opacity: 0;
-    transition: opacity var(--agent-questions-duration) var(--agent-questions-easing);
+    transition: opacity var(--agent-questions-duration, var(--agent-questions-duration-default)) var(--agent-questions-easing, var(--agent-questions-easing-default));
     /* Match the leading-icon offset so a row of [icon · label · check]
        reads as one horizontal line aligned to the label's first line. */
-    margin-top: calc((1.5em - var(--agent-questions-check-size)) / 2);
+    margin-top: calc((1.5em - var(--agent-questions-check-size, var(--agent-questions-check-size-default))) / 2);
   }
 
   [data-questions-option][data-selected] [data-questions-option-check] {
-    background: var(--agent-questions-check-bg);
+    background: var(--agent-questions-check-bg, var(--agent-questions-check-bg-default));
     opacity: 1;
   }
 
   [data-questions-option][data-selected] [data-questions-option-check] icon-ui {
-    color: var(--agent-questions-check-fg);
+    color: var(--agent-questions-check-fg, var(--agent-questions-check-fg-default));
   }
 }