@adia-ai/web-components 0.8.30 → 0.8.31

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.31] — 2026-08-07
+
+### Fixed
+- **tabs-ui vertical: contents regain clearance from the active-indicator line** (gh#707). gh#705 moved tab spacing from button padding to the strip gap — right for horizontal (the indicator rides the bottom edge), but vertical's indicator rides the inline-start edge, where that padding WAS the separation. Vertical tab-buttons now carry `padding-inline-start: var(--a-space-3)`; horizontal stays padding-free.
+- **`tabs-ui` strip gap owns the button spacing, not `tab-button` padding (gh#705).** `[slot="tab-button"]` carried `padding-inline: var(--tabs-button-px)` (8px); the horizontal padding moves to the strip: `--tabs-gap` goes from `--a-space-1` (4px) to `--a-space-3` (12px = 4px + one padding unit), and `--tabs-button-px` is retired (no consumers outside the component — grepped clean). Hit-target: `--tabs-button-height` (`var(--a-size)`, 24/30/36px at sm/md/lg) already clears the 24px WCAG 2.5.8 AA minimum on its own; text-labeled buttons (the documented anatomy — `tab-ui`'s `[text]`+optional `[icon]`) keep width comfortably above 24px, so no compensating tap-target padding was added — accepted, not compensated. Demo doc table (`tabs.examples.html`) and its derived site page updated.
+- **`swatch-ui` observes `auto-contrast`, matching its own yaml/CSS/demo** (gh#702). `autoContrast` declared no `attribute:` override, so the element watched `autocontrast` — the demo's `auto-contrast` attribute never flipped the property and the OKLab legibility probe never ran from markup. First surfaced by PR #700's blast-radius sweep (the estate's only other camelCase boolean); with the a2ui adapter now writing kebab-case, the override also keeps `autoContrast` live on the a2ui path.
+- **`pipeline-status-ui` yaml matched its class again** (gh#677). yaml documented `complete`/`message`/`stage`; the class implements `stage`/`message`/`status`. The class is the source of truth (source wins), so yaml now documents `status` (idle/active/completed/error enum) and drops the phantom `complete` boolean; sidecars regenerated.
+- **`chat-input-ui` no longer lets the raw `<textarea-ui>` `submit` event bubble past its own re-dispatch (gh#676).** `chat-input-ui` re-emits a richer `submit` (with `text`/`model`/`attachments`), but the original raw event kept bubbling too — any ancestor listener attached directly to `chat-input-ui` (e.g. `chat-composer`'s forwarding listener) received both, doubling agent turns per Enter. Fixed at the semantic boundary: `stopPropagation()` on the incoming `submit` before re-dispatching, so every `chat-input-ui` consumer gets exactly one event, not per-consumer workarounds.
+- **`chat-thread-ui` stops the inner `chat-input-ui` `submit` event at its own re-dispatch boundary (gh#690)** — the third boundary in the same bug class as gh#676 (fixed in PR #681 for `chat-input-ui` and `chat-composer`, but this one was missed since no in-estate consumer sat on it yet). Same fix: `stopPropagation()` on the incoming `submit` before re-dispatching `chat-thread-ui`'s own `submit`, so a listener on `chat-thread-ui` gets exactly one event per Enter.
+- **`list-item-ui`'s `render()` no longer re-stamps over a `[slot="content"]` row on a post-connect prop change (gh#689).** `#stamp()` already refused to touch a content-slotted row at connect; `render()` lacked the same gate, so setting `.icon`/`.text`/`.description` after connect stamped icon/span elements into a row the consumer fully owns via `[slot="content"]` — silently contradicting the yaml's "stamps NOTHING" claim. `render()` now gates on `[slot="content"]` identically to `#stamp()`, making that claim true again.
+
+### Added
+- **`segmented-ui allow-empty`** (gh#693) — opts out of the connect-time self-select of the first enabled segment when `value` is falsy. Without it (the default, unchanged), an empty `value` silently picks the first segment; with it, a falsy `value` renders every segment unselected until a real value arrives, for path-bound consumers whose bound value can be a genuine empty state (e.g. no disposition recorded yet). The group stays keyboard-reachable in the empty state (first enabled segment gets `tabindex="0"`, mirroring `list-ui`'s roving-tabindex fallback).
+
+### Maintenance
+- **`audit-static-properties-vs-yaml` now catches class→yaml drift, not just yaml→class** (gh#677). The existing audit only asked "does yaml promise a prop the class doesn't deliver?" — it couldn't see the opposite: a class renames/adds a runtime prop and yaml keeps documenting a stale or absent name (exactly the `pipeline-status-ui` shape above, where `status` was fully invisible to yaml). New reverse-direction pass flags any class.js `static properties` entry with zero yaml match as critical, closing the blind spot; also fixes a co-located-multi-class false-positive risk (`toggle-group.class.js`, `tree.class.js`) by scoping the static-properties scan to the yaml-named class's own brace-balanced block instead of the first match in the file. Swept clean across all 175 scanned component yamls — zero other drift instances.
+- **`list-item.yaml` declares its real anatomy** (gh#653): the `text` and `content` slots are consumed by `list.class.js` (a consumer-provided `[slot="text"]` is never overwritten; `[slot="content"]` suppresses all stamping) and styled by `list.css`, but were undeclared in the yaml SoT — so the derived catalog and every wire producer reading it could not see them. Docs-vs-source drift, repaired on the source's side; sidecars regenerated.
+- **`components/` touched in this release window** (19 file(s), e.g. `chat-thread/chat-input.js`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.30] — 2026-08-07
 
 ### Maintenance

package/components/chat-thread/chat-input.js

@@ -181,7 +181,15 @@ class UIChatInput extends UIElement {
     this.model = this.#modelEl?.value || '';
   };
 
-  #onSubmit = () => {
+  #onSubmit = (e) => {
+    // Stop the raw <textarea-ui> 'submit' event here, at the re-dispatch
+    // boundary — this component re-emits its own 'submit' below with
+    // richer detail (text/model/attachments). Letting the raw event keep
+    // bubbling past this point means every ancestor listening for
+    // 'submit' (e.g. chat-composer's forwarding listener, attached
+    // directly to this element) receives it TWICE: once as the raw event
+    // bubbling through, once as the semantic re-dispatch (gh#676).
+    if (e?.type === 'submit') e.stopPropagation();
     if (this.disabled || this.loading) return;
     const text = this.value;
     if (!text && !this.#attachments.length) return;

package/components/chat-thread/chat-thread.class.js

@@ -93,6 +93,12 @@ export class UIChatThread extends UIElement {
   }
 
   #onSubmit = (e) => {
+    // Stop the inner chat-input-ui 'submit' event at this re-dispatch
+    // boundary — this component re-emits its own 'submit' below. Letting
+    // the inner event keep bubbling means any ancestor listening for
+    // 'submit' on chat-thread-ui receives it TWICE (same bug class as
+    // gh#676 / gh#681).
+    if (e?.type === 'submit') e.stopPropagation();
     if (this.streaming) return;
     const { text, model } = e.detail || {};
     if (!text) return;

package/components/list/list-item.a2ui.json

@@ -60,8 +60,14 @@
       "action": {
         "description": "Trailing action affordance on the row (typically a `<button-ui>`). Promotes the row's grid from 2-column (icon | content) to 3-column (icon | content | action), right-aligned + vertically centered across both content rows. Used by `<onboarding-checklist-ui>` item rows and any consumer that needs an end-aligned action button on a list-item."
       },
+      "content": {
+        "description": "Full-row escape hatch: when a [slot=\"content\"] child is present the component stamps NOTHING (no icon/text/description spans) and the child owns the entire row. Use for cards, rows, or any custom composition that the icon | content | action grid cannot express."
+      },
       "icon": {
         "description": "Override the [icon] glyph with a custom slotted element (e.g. a colored <icon-ui>, an image, or an avatar-ui). Mutually exclusive with the [icon] attribute — slot child wins if both are present."
+      },
+      "text": {
+        "description": "Override slot for richer primary-text markup than the plain [text] attribute string. Styled by `:scope [slot=\"text\"]` (list.css) and honored by UIListItem's stamping logic — a consumer-provided [slot=\"text\"] child is never overwritten (only component-stamped ones are). Undeclared until gh#653; the element source always supported it."
       }
     },
     "states": [],

package/components/list/list-item.yaml

@@ -30,6 +30,19 @@ props:
     type: string
 
 slots:
+  text:
+    description: >-
+      Override slot for richer primary-text markup than the plain [text]
+      attribute string. Styled by `:scope [slot="text"]` (list.css) and
+      honored by UIListItem's stamping logic — a consumer-provided
+      [slot="text"] child is never overwritten (only component-stamped ones
+      are). Undeclared until gh#653; the element source always supported it.
+  content:
+    description: >-
+      Full-row escape hatch: when a [slot="content"] child is present the
+      component stamps NOTHING (no icon/text/description spans) and the
+      child owns the entire row. Use for cards, rows, or any custom
+      composition that the icon | content | action grid cannot express.
   icon:
     description: >-
       Override the [icon] glyph with a custom slotted element (e.g. a colored

package/components/list/list.class.js

@@ -220,6 +220,12 @@ export class UIListItem extends UIElement {
   }
 
   render() {
+    // A [slot="content"] row owns its own markup entirely — same gate as
+    // #stamp() (:189). Without it, a post-connect icon/text/description
+    // prop change stamps icon/span elements into a content-slotted row,
+    // even though #stamp() never touched it at connect (gh#689).
+    if (this.#ownChild('[slot="content"]')) return;
+
     // Sync icon — only touch elements we stamped.
     const iconEl = this.#ownChild('[slot="icon"]');
     if (this.icon) {

package/components/pipeline-status/pipeline-status.a2ui.json

@@ -13,23 +13,29 @@
     }
   ],
   "properties": {
-    "complete": {
-      "description": "Component property: complete.",
-      "type": "boolean",
-      "default": false
-    },
     "component": {
       "const": "PipelineStatus"
     },
     "message": {
-      "description": "Component property: message.",
+      "description": "Current stage description shown alongside the stage label.",
       "type": "string",
       "default": ""
     },
     "stage": {
-      "description": "Component property: stage.",
+      "description": "Current stage name (interpret, analyze, plan, generate, validate, render).",
       "type": "string",
       "default": ""
+    },
+    "status": {
+      "description": "Canonical stage-progress state. Set to `completed` to render the\nfinal state and collapse the history log.",
+      "type": "string",
+      "enum": [
+        "idle",
+        "active",
+        "completed",
+        "error"
+      ],
+      "default": "idle"
     }
   },
   "required": [
@@ -59,7 +65,7 @@
       },
       {
         "description": "Pipeline status marked complete; indicator switches to success state.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"PipelineStatus\",\n    \"stage\": \"Done\",\n    \"message\": \"All 100 intents passed\",\n    \"complete\": true\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"PipelineStatus\",\n    \"stage\": \"Done\",\n    \"message\": \"All 100 intents passed\",\n    \"status\": \"completed\"\n  }\n]",
         "name": "complete"
       }
     ],

package/components/pipeline-status/pipeline-status.d.ts

@@ -13,10 +13,11 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIPipelineStatus extends UIElement {
-  /** Component property: complete. */
-  complete: boolean;
-  /** Component property: message. */
+  /** Current stage description shown alongside the stage label. */
   message: string;
-  /** Component property: stage. */
+  /** Current stage name (interpret, analyze, plan, generate, validate, render). */
   stage: string;
+  /** Canonical stage-progress state. Set to `completed` to render the
+final state and collapse the history log. */
+  status: 'idle' | 'active' | 'completed' | 'error';
 }

package/components/pipeline-status/pipeline-status.yaml

@@ -11,19 +11,25 @@ description: >-
   updates via the status property. Use for long-running agent or build
   pipelines; for multi-step wizards use <stepper-ui> instead.
 props:
-  complete:
-    description: 'Component property: complete.'
-    type: boolean
-    default: false
-    reflect: false  # declarative presentational attribute — CSS/author-time read, non-reactive by design
-  message:
-    description: 'Component property: message.'
+  stage:
+    description: 'Current stage name (interpret, analyze, plan, generate, validate, render).'
     type: string
     default: ''
-  stage:
-    description: 'Component property: stage.'
+  message:
+    description: 'Current stage description shown alongside the stage label.'
     type: string
     default: ''
+  status:
+    description: |-
+      Canonical stage-progress state. Set to `completed` to render the
+      final state and collapse the history log.
+    type: string
+    default: idle
+    enum:
+      - idle
+      - active
+      - completed
+      - error
 events: {}
 slots:
   default:
@@ -37,7 +43,7 @@ a2ui:
   rules:
     - rule: 'Single updating pipeline status indicator — status pill with optional progress bar.'
       reason: 'Long-running task indicator.'
-    - rule: 'stage + complete + message attributes drive the current display state.'
+    - rule: 'stage + status + message attributes drive the current display state.'
       reason: 'State contract.'
     - rule: 'For multi-step wizards use <stepper-ui>; for chronological history use <timeline-ui>; pipeline-status is a single current-state pill.'
       reason: 'Sibling boundary.'
@@ -61,7 +67,7 @@ examples:
 - name: complete
   description: Pipeline status marked complete; indicator switches to success state.
   a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"PipelineStatus\",\n    \"stage\": \"Done\",\n    \"message\"\
-    : \"All 100 intents passed\",\n    \"complete\": true\n  }\n]"
+    : \"All 100 intents passed\",\n    \"status\": \"completed\"\n  }\n]"
 keywords:
 - pipelinestatus
 - pipeline-status

package/components/segmented/segmented.a2ui.json

@@ -13,6 +13,11 @@
     }
   ],
   "properties": {
+    "allowEmpty": {
+      "description": "Suppresses the connect-time self-select of the first enabled segment when value is falsy. Without it, an empty value silently selects the first segment; with it, a falsy value renders every segment unselected until a real value arrives — for path-bound consumers whose bound value can be a genuine empty state.",
+      "type": "boolean",
+      "default": false
+    },
     "component": {
       "const": "Segmented"
     },

package/components/segmented/segmented.class.js

@@ -29,6 +29,14 @@ export class UISegmented extends UIFormElement {
   static properties = {
     ...UIFormElement.properties,
     value: { type: String, default: '', reflect: true },
+    // gh#693: absent (default false) preserves the original self-select
+    // behavior below. A path-bound consumer whose bound value can be a
+    // real empty state (e.g. "no disposition recorded yet") sets this to
+    // suppress the connect-time self-select, so a falsy `value` renders
+    // every segment unselected instead of silently picking one — a
+    // display-truth defect where the UI claimed a state the data never
+    // recorded.
+    allowEmpty: { type: Boolean, default: false, reflect: true, attribute: 'allow-empty' },
   };
 
   static template = () => null;
@@ -55,8 +63,10 @@ export class UISegmented extends UIFormElement {
       this.addEventListener('keydown', this.#handleKeydown);
     }
 
-    // Default to first segment if no value
-    if (!this.value) {
+    // Default to first segment if no value — unless allow-empty opts out
+    // (a falsy path-bound value must render as truly empty, not silently
+    // pick one, gh#693).
+    if (!this.value && !this.allowEmpty) {
       const first = this.querySelector('segment-ui:not([disabled])');
       if (first) this.value = first.value || first.getAttribute('value') || '';
     }
@@ -128,16 +138,24 @@ export class UISegmented extends UIFormElement {
     if (!segs.length) return;
 
     // Sync selection state
+    let anyActive = false;
     for (const seg of segs) {
       const segVal = seg.value || seg.getAttribute('value') || '';
       const isActive = segVal === this.value;
       if (isActive) {
         seg.setAttribute('selected', '');
+        anyActive = true;
       } else {
         seg.removeAttribute('selected');
       }
       seg.setAttribute('tabindex', isActive ? '0' : '-1');
     }
+    // allow-empty's "nothing selected" state must still be keyboard
+    // reachable — mirrors list-ui's roving-tabindex fallback (list.class.js).
+    if (!anyActive) {
+      const firstEnabled = segs.find((s) => !s.disabled);
+      firstEnabled?.setAttribute('tabindex', '0');
+    }
 
     if (this.label) this.setAttribute('aria-label', this.label);
 

package/components/segmented/segmented.yaml

@@ -11,6 +11,11 @@ props:
     description: Value of the currently selected segment.
     type: string
     default: ''
+  allowEmpty:
+    description: Suppresses the connect-time self-select of the first enabled segment when value is falsy. Without it, an empty value silently selects the first segment; with it, a falsy value renders every segment unselected until a real value arrives — for path-bound consumers whose bound value can be a genuine empty state.
+    type: boolean
+    default: false
+    attribute: allow-empty
 events:
   change:
     description: Fired when the selected segment changes. detail contains { value }.

package/components/swatch/swatch.class.js

@@ -166,7 +166,7 @@ export class UISwatch extends UIElement {
     copyValue:    { type: String,  default: '' },  // not reflected — long color strings as attrs read poorly
     selectable:   { type: Boolean, default: false,    reflect: true },
     selected:     { type: Boolean, default: false,    reflect: true },
-    autoContrast: { type: Boolean, default: false,    reflect: true },
+    autoContrast: { type: Boolean, default: false,    reflect: true, attribute: 'auto-contrast' },
     // §253 (v0.5.12, FB-23 §1): label position relative to the tile.
     // `below` (default) = current shape="block" stacked layout.
     // `overlay` = label sits ON the tile via absolute positioning;

package/components/tabs/tabs.css

@@ -5,10 +5,12 @@
     --tabs-bg:              transparent;
     --tabs-radius:          var(--a-radius-md);
     --tabs-button-height:   var(--a-size);
-    --tabs-button-px:       var(--a-space-2);
     --tabs-font-size:       var(--a-ui-md);
     --tabs-font-family:     var(--a-font-family-ui);
-    --tabs-gap:             var(--a-space-1);
+    /* Strip owns the button-to-button spacing — 4px base gap + one
+       padding unit (8px) folded in, since tab-button carries no
+       horizontal padding of its own (gh#705). */
+    --tabs-gap:             var(--a-space-3);
     --tabs-indicator-color: var(--md-sys-color-primary);
     --tabs-indicator-height: 2px;
     --tabs-fg:              var(--md-sys-color-neutral-on-surface-variant);
@@ -101,6 +103,13 @@
       height var(--tabs-duration) var(--tabs-easing-out);
   }
 
+  /* Vertical: the indicator lives on the inline-start edge (not the bottom),
+     so contents need clearance from the line — the horizontal strip-gap
+     spacing (gh#705) can't provide it on this axis. */
+  :scope[orientation="vertical"] [slot="tab-button"] {
+    padding-inline-start: var(--a-space-3);
+  }
+
   /* Vertical panel area takes remaining space */
   :scope[orientation="vertical"] > tab-ui {
     flex: 1;
@@ -114,7 +123,6 @@
     align-items: center;
     gap: var(--tabs-button-gap);
     height: var(--tabs-button-height);
-    padding-inline: var(--tabs-button-px);
     border: none;
     background: none;
     color: var(--tabs-fg);