@adia-ai/web-components 0.6.50 → 0.7.1

package/components/select/select.class.js

@@ -71,6 +71,7 @@ export class UISelect extends UIFormElement {
   static template = () => null;
 
   #options = [];
+  #ownTrigger = false; // true when WE stamped the trigger (vs a consumer-custom one)
   #listbox = null;
   #anchorCleanup = null;
   #query = '';
@@ -386,14 +387,18 @@ export class UISelect extends UIFormElement {
 
     // Stamp default trigger if none provided
     if (!this.querySelector('[slot="trigger"]')) {
+      this.#ownTrigger = true;
       // Detach listbox before innerHTML wipe so it isn't destroyed
       const lb = this.#listbox;
       if (lb?.parentNode === this) this.removeChild(lb);
 
+      // Initial leading reflects the host [avatar]/[icon]; #syncLeading() then
+      // reconciles it to the SELECTED option's icon/avatar on every render. The
+      // `data-select-leading` marker scopes that reconciliation to our element.
       const leading = this.avatar
-        ? `<img slot="leading" src="${this.avatar}" alt="" />`
+        ? `<img slot="leading" data-select-leading src="${escapeHTML(this.avatar)}" alt="" />`
         : this.icon
-          ? `<icon-ui slot="leading" name="${this.icon}"></icon-ui>`
+          ? `<icon-ui slot="leading" data-select-leading name="${escapeHTML(this.icon)}"></icon-ui>`
           : '';
       const displayMarkup = this.searchable
         ? `<input slot="display" type="text" role="combobox" aria-autocomplete="list" autocomplete="off" placeholder="${escapeHTML(this.placeholder || '')}" value="${escapeHTML(this.#displayText() === this.placeholder ? '' : this.#displayText())}" />`
@@ -470,6 +475,9 @@ export class UISelect extends UIFormElement {
       }
     }
 
+    // Reflect the selected option's icon/avatar in the trigger leading.
+    this.#syncLeading();
+
     // SPEC-040 — stamp / reconcile chips + "+N more" pill on every render.
     if (this.multiple) this.#stampChips();
     // Show clear-all only in multi-select mode when [clearable] + chips present.
@@ -548,12 +556,12 @@ export class UISelect extends UIFormElement {
       if (child.tagName === 'OPTGROUP') {
         const group = { label: child.label || child.getAttribute('label') || '', options: [] };
         for (const opt of child.querySelectorAll('option')) {
-          group.options.push({ value: opt.value, label: opt.textContent.trim(), disabled: opt.disabled });
+          group.options.push({ value: opt.value, label: opt.textContent.trim(), disabled: opt.disabled, icon: opt.getAttribute('icon') || '', avatar: opt.getAttribute('avatar') || '' });
           if (opt.hasAttribute('selected')) preSelectedArr.push(opt.value);
         }
         this.#options.push(group);
       } else if (child.tagName === 'OPTION') {
-        this.#options.push({ value: child.value, label: child.textContent.trim(), disabled: child.disabled });
+        this.#options.push({ value: child.value, label: child.textContent.trim(), disabled: child.disabled, icon: child.getAttribute('icon') || '', avatar: child.getAttribute('avatar') || '' });
         if (child.hasAttribute('selected')) preSelectedArr.push(child.value);
       } else if (
         // §225: skip [slot="display"] / [slot="listbox"] / [slot="action"] etc. — these are
@@ -614,6 +622,52 @@ export class UISelect extends UIFormElement {
 
   get options() { return this.#options; }
 
+  // Per-option leading markup: avatar (img) beats icon (icon-ui). Shared by
+  // the listbox rows AND the trigger (resolved against the selected option).
+  static #optionLeadHTML(opt) {
+    if (!opt) return '';
+    if (opt.avatar) return `<img data-option-avatar src="${escapeHTML(opt.avatar)}" alt="" />`;
+    if (opt.icon) return `<icon-ui name="${escapeHTML(opt.icon)}"></icon-ui>`;
+    return '';
+  }
+
+  /**
+   * Reflect the SELECTED option's icon/avatar in the trigger's leading slot.
+   * Single-select only (multi-select shows chips). Falls back to the host
+   * [avatar]/[icon] when the selected option carries neither. Only manages the
+   * leading WE stamped (`[data-select-leading]`) — a consumer-custom trigger
+   * owns its own leading.
+   */
+  #syncLeading() {
+    if (this.multiple || !this.#ownTrigger) return;
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (!trigger) return;
+    const flat = this.#options.flatMap((o) => o.options || [o]);
+    const sel = flat.find((o) => !o.header && !o.separator && o.value === this.value);
+    const avatar = (sel && sel.avatar) || this.avatar || '';
+    const icon = (sel && sel.icon) || this.icon || '';
+    const existing = trigger.querySelector(':scope > [data-select-leading]');
+    let html = '';
+    if (avatar) html = `<img slot="leading" data-select-leading src="${escapeHTML(avatar)}" alt="" />`;
+    else if (icon) html = `<icon-ui slot="leading" data-select-leading name="${escapeHTML(icon)}"></icon-ui>`;
+    if (!html) { existing?.remove(); return; }
+    const tmp = document.createElement('template');
+    tmp.innerHTML = html;
+    const next = tmp.content.firstElementChild;
+    if (!existing) {
+      trigger.insertBefore(next, trigger.firstChild);
+    } else if (existing.tagName === next.tagName) {
+      // Same element type — update the changing attribute in place.
+      if (next.tagName === 'IMG') {
+        if (existing.getAttribute('src') !== next.getAttribute('src')) existing.setAttribute('src', next.getAttribute('src'));
+      } else if (existing.getAttribute('name') !== next.getAttribute('name')) {
+        existing.setAttribute('name', next.getAttribute('name'));
+      }
+    } else {
+      existing.replaceWith(next); // icon ↔ avatar switch
+    }
+  }
+
   #renderOptions() {
     if (!this.#listbox) return;
     this.#listbox.innerHTML = '';
@@ -653,6 +707,8 @@ export class UISelect extends UIFormElement {
       // SPEC-040 — multi-select option rows render a leading checkbox
       // indicator (CSS-driven via [data-multi-option]); the `check` icon
       // shows when aria-selected="true".
+      // Per-option leading glyph — avatar (img) wins over icon (icon-ui).
+      const lead = UISelect.#optionLeadHTML(opt);
       if (this.multiple) {
         el.setAttribute('data-multi-option', '');
         const box = document.createElement('span');
@@ -661,11 +717,11 @@ export class UISelect extends UIFormElement {
         el.appendChild(box);
         const label = document.createElement('span');
         label.setAttribute('data-option-label', '');
-        if (opt.icon) label.innerHTML = `<icon-ui name="${escapeHTML(opt.icon)}"></icon-ui>${escapeHTML(opt.label)}`;
+        if (lead) label.innerHTML = `${lead}${escapeHTML(opt.label)}`;
         else label.textContent = opt.label;
         el.appendChild(label);
-      } else if (opt.icon) {
-        el.innerHTML = `<icon-ui name="${escapeHTML(opt.icon)}"></icon-ui>${escapeHTML(opt.label)}`;
+      } else if (lead) {
+        el.innerHTML = `${lead}${escapeHTML(opt.label)}`;
       } else {
         el.textContent = opt.label;
       }

package/components/select/select.css

@@ -191,6 +191,11 @@
   :scope[data-multi-chips] [slot="trigger"] {
     flex-wrap: wrap;
     align-items: center;
+    /* Pack chips left with a small gap — override the base trigger's
+       `space-between` (which is for the single-select content↔caret split),
+       otherwise the chips spread across the full trigger width. The display
+       slot flex-grows (below) to push the caret to the trailing edge. */
+    justify-content: flex-start;
     gap: var(--a-space-1);
     /* min-height tracks single-row height when empty; flex-wrap allows
        it to grow as chips overflow. */
@@ -290,6 +295,8 @@ select-ui [slot="listbox"]:popover-open {
 }
 
 select-ui [role="option"] {
+  display: flex;
+  align-items: center;
   padding: var(--a-space-1) var(--a-ui-px);
   border-radius: var(--a-radius-sm);
   white-space: nowrap;
@@ -325,6 +332,17 @@ select-ui [role="option"] icon-ui {
   vertical-align: -0.125em;
 }
 
+/* Option with avatar — small inline image (matches the trigger leading
+   avatar radius), sized to the option line-height. */
+select-ui [role="option"] img[data-option-avatar] {
+  width: var(--a-ui-size);
+  height: var(--a-ui-size);
+  border-radius: var(--select-leading-radius, var(--select-leading-radius-default));
+  object-fit: cover;
+  margin-inline-end: var(--a-space-1);
+  vertical-align: -0.2em;
+}
+
 /* Separator */
 select-ui [data-separator] {
   height: 1px;

package/components/select/select.yaml

@@ -23,7 +23,7 @@ description: |
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
-  - icon-ui   # chevron + option-row affixes (created in render)
+  - icon-ui   # caret + option-row affixes (created in render)
   - tag-ui    # multi-select chip per selected option in the trigger
 props:
   name:
@@ -151,7 +151,7 @@ props:
     default: false
     reflect: true
   options:
-    description: "Option list. Array of {value, label, disabled?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children."
+    description: "Option list. Array of {value, label, disabled?, icon?, avatar?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar render in the list AND reflect in the trigger's selected state."
     type: array
     default: []
   pattern:
@@ -249,6 +249,13 @@ a2ui:
       tag names are silently ignored (per §225 v0.5.9) and warned once
       at runtime. Or set `.options` programmatically as an array of
       `{value, label, disabled?}` (grouped form: `{label, options:[…]}`).
+    - >-
+      Per-option visuals: give each <option> an `icon` (Phosphor name) or
+      `avatar` (image URL) — `<option value="light" icon="sun">`. Each row
+      renders its glyph in the list AND the trigger reflects the SELECTED
+      option's icon/avatar (theme pickers, assignee/account switchers).
+      `avatar` wins over `icon`; a host-level [icon]/[avatar] is the
+      fallback when the selected option carries neither.
     - >-
       For dynamic option lists rendered inside <editor-shell>, set the
       JSON via the [data-options] attribute — <editor-shell>'s

package/components/stack/stack.a2ui.json

@@ -14,8 +14,19 @@
   ],
   "properties": {
     "align": {
-      "description": "Alignment of stacked items",
+      "description": "Alignment of the layered children within the shared cell (maps to grid place-items). `center` (default) plus eight directional keywords.",
       "type": "string",
+      "enum": [
+        "center",
+        "top-left",
+        "top",
+        "top-right",
+        "left",
+        "right",
+        "bottom-left",
+        "bottom",
+        "bottom-right"
+      ],
       "default": "center"
     },
     "component": {

package/components/stack/stack.d.ts

@@ -21,6 +21,6 @@ cell.
 import { UIElement } from '../../core/element.js';
 
 export class UIStack extends UIElement {
-  /** Alignment of stacked items */
-  align: string;
+  /** Alignment of the layered children within the shared cell (maps to grid place-items). `center` (default) plus eight directional keywords. */
+  align: 'center' | 'top-left' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
 }

package/components/stack/stack.yaml

@@ -18,9 +18,21 @@ description: |
   cell.
 props:
   align:
-    description: Alignment of stacked items
+    description: >-
+      Alignment of the layered children within the shared cell (maps to
+      grid place-items). `center` (default) plus eight directional keywords.
     type: string
     default: center
+    enum:
+      - center
+      - top-left
+      - top
+      - top-right
+      - left
+      - right
+      - bottom-left
+      - bottom
+      - bottom-right
 events: {}
 slots:
   default:

package/components/stat/stat.a2ui.json

@@ -13,6 +13,11 @@
     }
   ],
   "properties": {
+    "bleed": {
+      "description": "Horizontal-bleed KPI layout. With a `slot=\"chart\"` child, the value / label / change stack on the left while the chart fills the right column at full height and bleeds to the card's top / right / bottom edges (the horizontal counterpart to a chart in a card `<section bleed>`). No effect without a chart slot.",
+      "type": "boolean",
+      "default": false
+    },
     "change": {
       "description": "Change indicator text (e.g. '+12%', '-3%')",
       "type": "string",

package/components/stat/stat.css

@@ -72,6 +72,61 @@
     grid-column: 1;
   }
 
+  /* ── Horizontal-bleed KPI tile ──
+     value / label / change stack on the LEFT; the chart fills the RIGHT
+     column at full height and bleeds to the card's top / right / bottom
+     edges (cancels the card-section inset via negative margins keyed to
+     the inherited --card-inset). The compact `slot="chart"` reflow above
+     keeps the chart resting on the value baseline; this opt-in spreads it
+     into a full-height trajectory panel. Compose inside a card section:
+       <card-ui><section>
+         <stat-ui bleed value=… label=… change=… trend=…>
+           <chart-ui slot="chart" type="area" …></chart-ui>
+         </stat-ui>
+       </section></card-ui>  */
+  :scope[bleed]:has([slot="chart"]) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, var(--stat-bleed-col, 46%));
+    grid-template-areas:
+      "label  chart"
+      "value  chart"
+      "change chart";
+    align-items: start;
+  }
+  :scope[bleed] [slot="value"],
+  :scope[bleed] [slot="change"] {
+    grid-column: 1;
+  }
+  /* Icon shares the label row, pinned to the text column's inner edge. */
+  :scope[bleed] [slot="label"] {
+    padding-inline-end: var(--a-space-5);
+  }
+  :scope[bleed] [slot="icon"] {
+    grid-area: label;
+    justify-self: end;
+    align-self: start;
+  }
+  :scope[bleed] [slot="chart"] {
+    grid-area: chart;
+    /* VERTICAL bleed via stretch: a stretched grid item's height is
+       `track − margins`, so a negative margin-block overflows the track by
+       that amount top + bottom. `height:auto` overrides the base
+       chart-ui[slot="chart"]{height:100%} so the stretch governs. */
+    align-self: stretch;
+    height: auto;
+    margin-block: calc(-1 * var(--card-inset, var(--card-inset-default, 0px)));
+    /* HORIZONTAL bleed via explicit width: chart-ui pins its own
+       `width:100%` (chart.css), which beats justify-self:stretch and would
+       freeze the box to the track — so a negative margin-inline-end can't
+       widen it. Instead size the box to `track + inset` and left-anchor it,
+       so the right edge overflows to the card edge while the left keeps the
+       column gap. The percentage resolves against the grid track. */
+    justify-self: start;
+    width: calc(100% + var(--card-inset, var(--card-inset-default, 0px)));
+    min-width: 0;
+    /* override the inline-chart 4:3 — fill the row span instead */
+    aspect-ratio: auto;
+  }
+
   /* ── Label (eyebrow) ── */
   [slot="label"] {
     grid-area: label;

package/components/stat/stat.d.ts

@@ -13,6 +13,8 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIStat extends UIElement {
+  /** Horizontal-bleed KPI layout. With a `slot="chart"` child, the value / label / change stack on the left while the chart fills the right column at full height and bleeds to the card's top / right / bottom edges (the horizontal counterpart to a chart in a card `<section bleed>`). No effect without a chart slot. */
+  bleed: boolean;
   /** Change indicator text (e.g. '+12%', '-3%') */
   change: string;
   /** Icon name displayed in the icon slot */

package/components/stat/stat.js

@@ -18,6 +18,10 @@ class UIStat extends UIElement {
     trend:   { type: String,  default: '',    reflect: true },
     icon:    { type: String,  default: '',    reflect: true },
     loading: { type: Boolean, default: false, reflect: true },
+    // Horizontal-bleed KPI layout: value/label/change stack on the left, the
+    // slot="chart" child fills the right column and bleeds to the card edges.
+    // Reflected so the [bleed] CSS selector gates the layout.
+    bleed:   { type: Boolean, default: false, reflect: true },
   };
 
   static template = () => null;

package/components/stat/stat.yaml

@@ -49,6 +49,15 @@ props:
     required: true
     type: string
     default: ""
+  bleed:
+    description: >-
+      Horizontal-bleed KPI layout. With a `slot="chart"` child, the value /
+      label / change stack on the left while the chart fills the right column
+      at full height and bleeds to the card's top / right / bottom edges (the
+      horizontal counterpart to a chart in a card `<section bleed>`). No effect
+      without a chart slot.
+    type: boolean
+    default: false
 events: {}
 slots:
   change:

package/components/swiper/swiper.class.js

@@ -249,14 +249,22 @@ export class UISwiper extends UIElement {
   }
 
   // ── Snap & page helpers ──
-  // `--swiper-columns` is set on the host by `[slides-per-view]` and
-  // cascades to the track; the responsive @container rules set it on
-  // the track directly. Reading the computed value on the track sees
-  // both paths.
-
+  // The column count drives the page/dot math. `[slides-per-view]` (and the
+  // responsive @container rules) set `--swiper-columns-default` on the host /
+  // track per the component-token contract; consumers may override via the
+  // public `--swiper-columns`. We must read the SAME fallback chain the CSS
+  // width calc uses — `var(--swiper-columns, var(--swiper-columns-default))` —
+  // not just the public token. Reading only `--swiper-columns` (unset unless a
+  // consumer overrides) made #getColumns() always fall back to 1, so the dot
+  // count was `total - 1 + 1 = total slides` instead of the real page count
+  // (bug-29: 5 slides at slides-per-view=3 stamped 5 dots, not 3). Regressed by
+  // the 2026-05-24 OD-5 `-default` token sweep, which renamed the CSS side but
+  // not this read site.
   #getColumns() {
     if (!this.#track) return 1;
-    const v = getComputedStyle(this.#track).getPropertyValue('--swiper-columns').trim();
+    const cs = getComputedStyle(this.#track);
+    const v = cs.getPropertyValue('--swiper-columns').trim()
+           || cs.getPropertyValue('--swiper-columns-default').trim();
     const n = parseInt(v, 10);
     return Number.isFinite(n) && n > 0 ? n : 1;
   }

package/components/switch/switch.css

@@ -115,6 +115,19 @@ switch-ui[checked] [slot="thumb"] {
     color: var(--switch-hint-fg, var(--a-fg-muted));
     line-height: var(--switch-hint-lh, 1.4);
   }
+  /* The hint is documented (yaml + props table) as rendering BELOW the label,
+     but the base `inline-flex` row laid the stamped `[slot="hint"]` out as a
+     third inline item (beside the label). When a hint is present, let the row
+     wrap and force the hint onto its own full-width line, indented under the
+     label (past the track + gap). `:has()`-scoped so hint-less switches keep
+     the unchanged single-row layout (no long-label side effects); no display-
+     model change (stays inline-flex). The hint span is stamped only when
+     [hint] is set (switch.class.js), so this never adds a phantom line. */
+  :scope:has([slot="hint"]) { flex-wrap: wrap; }
+  :scope:has([slot="hint"]) [slot="hint"] {
+    flex-basis: 100%;
+    padding-inline-start: calc(var(--switch-track-width, var(--switch-track-width-default)) + var(--switch-gap, var(--switch-gap-default)));
+  }
 
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="track"] { box-shadow: var(--switch-focus-ring, var(--switch-focus-ring-default)); }

package/components/table/table.a2ui.json

@@ -169,7 +169,7 @@
         }
       },
       "row-collapse": {
-        "description": "Fired when an already-expanded row's chevron is activated (collapses the row). Mirror of row-expand.",
+        "description": "Fired when an already-expanded row's caret is activated (collapses the row). Mirror of row-expand.",
         "detail": {
           "index": {
             "description": "Row index in the underlying data array.",
@@ -182,7 +182,7 @@
         }
       },
       "row-expand": {
-        "description": "Fired when an expandable row's chevron is activated. detail.index is the row position; detail.row is the row data.",
+        "description": "Fired when an expandable row's caret is activated. detail.index is the row position; detail.row is the row data.",
         "detail": {
           "index": {
             "description": "Row index in the underlying data array.",

package/components/table/table.css

@@ -323,7 +323,12 @@
     color: var(--table-fg-hover, var(--table-fg-hover-default));
   }
 
-  [data-selected] {
+  /* Selected row — must out-specify the base row rule `[data-body] >
+     [role="row"]` (0,2,0) and the hover rule (0,2,1), or the highlight never
+     paints. Scoping to `[data-body] > [role="row"][data-selected]` lifts it to
+     (0,4,0). (The striped-even override below handles selected+striped, which
+     is higher still.) */
+  [data-body] > [role="row"][data-selected] {
     background: var(--table-row-bg-selected, var(--table-row-bg-selected-default));
   }
 
@@ -341,6 +346,13 @@
     background: var(--table-row-bg-hover, var(--table-row-bg-hover-default));
   }
 
+  /* Selected wins over the stripe — same (0,5,0) specificity as the striped-
+     even rule above, placed AFTER it so source order resolves the tie in
+     favor of selection (a selected row reads as selected regardless of stripe). */
+  :scope[striped] [data-body] > [role="row"][data-selected] {
+    background: var(--table-row-bg-selected, var(--table-row-bg-selected-default));
+  }
+
   /* ═══════ Selection checkboxes ═══════ */
 
   [data-check-col] {

package/components/table/table.yaml

@@ -146,7 +146,7 @@ events:
         type: number
         description: New column width in pixels.
   row-collapse:
-    description: Fired when an already-expanded row's chevron is activated (collapses the row). Mirror of row-expand.
+    description: Fired when an already-expanded row's caret is activated (collapses the row). Mirror of row-expand.
     detail:
       index:
         type: number
@@ -155,7 +155,7 @@ events:
         type: object
         description: Row data object.
   row-expand:
-    description: Fired when an expandable row's chevron is activated. detail.index is the row position; detail.row is the row data.
+    description: Fired when an expandable row's caret is activated. detail.index is the row position; detail.row is the row data.
     detail:
       index:
         type: number

package/components/time-picker/time-picker.css

@@ -30,7 +30,7 @@
   :scope {
     /* ── Base ── */
     box-sizing: border-box;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: var(--time-picker-gap, var(--time-picker-gap-default));
     min-height: var(--time-picker-height, var(--time-picker-height-default));
@@ -50,6 +50,9 @@
       box-shadow   var(--time-picker-duration, var(--time-picker-duration-default)) var(--time-picker-easing, var(--time-picker-easing-default));
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-flex; }
+
   /* ── Segments ── */
   :scope [data-segment] {
     display: inline-block;

package/components/timeline/timeline.class.js

@@ -87,7 +87,7 @@ export class UITimelineItem extends UIElement {
     spinner:     { type: Boolean, default: false,     reflect: true },
   };
 
-  // §205 (v0.5.7): dynamic chevron icons stamped on expanded-state ternary
+  // §205 (v0.5.7): dynamic caret icons stamped on expanded-state ternary
   // (timeline.class.js:167). Per FEEDBACK-16 §1 + §209 slot-11 ternary-walker discovery.
   // Note: `this.icon` consumer-supplied — not declared here.
   static requiredIcons = ['caret-down', 'caret-right'];
@@ -134,7 +134,7 @@ export class UITimelineItem extends UIElement {
       this.querySelector(':scope > [slot="icon"]')?.remove();
     }
 
-    // Outcomes sub-list + toggle chevron
+    // Outcomes sub-list + toggle caret
     let body = this.querySelector(':scope > [slot="outcomes"]');
     if (this.#outcomes.length > 0) {
       if (!body) {
@@ -150,7 +150,7 @@ export class UITimelineItem extends UIElement {
       }
       body.hidden = !this.#expanded;
 
-      // Toggle chevron lives on the row — we stamp a button once
+      // Toggle caret lives on the row — we stamp a button once
       let toggle = this.querySelector(':scope > [data-timeline-toggle]');
       if (!toggle) {
         toggle = document.createElement('button');

package/components/timeline/timeline.css

@@ -39,10 +39,18 @@
     --timeline-line-fg-default:            var(--a-border-subtle);
     --timeline-line-fg-done-default:       var(--a-border);
 
+    /* Marker box — the shared circular footprint the icon marker fills and
+       the dot / spinner center within (the column track --timeline-marker-w
+       is a touch wider for breathing room). One token sizes the whole marker
+       system; consumers (agent-reasoning-ui, chat surfaces) override it to
+       scale every marker type coherently. */
+    --timeline-marker-box-size-default:    1rem;
+
     /* Icon (replaces dot) */
-    --timeline-icon-size-default:          1rem;
+    --timeline-icon-size-default:          var(--timeline-marker-box-size, var(--timeline-marker-box-size-default));
     --timeline-icon-bg-default:            var(--a-bg-muted);
     --timeline-icon-fg-default:            var(--a-fg-subtle);
+    --timeline-icon-border-default:        var(--a-border-subtle);
     --timeline-icon-bg-success-default:    var(--a-success-muted);
     --timeline-icon-fg-success-default:    var(--a-success-strong);
     --timeline-icon-bg-accent-default:     var(--a-accent-muted);
@@ -85,6 +93,7 @@
   /* Compact variant (agent-reasoning + chat-adjacent) */
   :scope[size="sm"] {
     --timeline-marker-w-default: 1rem;
+    --timeline-marker-box-size-default: 0.875rem;
     --timeline-dot-size-default: 6px;
     --timeline-gap-row-default: var(--a-space-2);
     --timeline-label-size-default: var(--a-ui-sm);
@@ -133,9 +142,14 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     --timeline-item-line-fg:            var(--timeline-line-fg, var(--a-border-subtle));
     --timeline-item-line-fg-done:       var(--timeline-line-fg-done, var(--a-border));
 
-    --timeline-item-icon-size:          var(--timeline-icon-size, 1rem);
+    /* Reads the override THEN the inherited -default (set on timeline-ui,
+       and shrunk by [size="sm"]) THEN a literal — so the marker box scales
+       with both consumer overrides AND the sm compact variant. */
+    --timeline-item-marker-box-size:    var(--timeline-marker-box-size, var(--timeline-marker-box-size-default, 1rem));
+    --timeline-item-icon-size:          var(--timeline-icon-size, var(--timeline-item-marker-box-size));
     --timeline-item-icon-bg:            var(--timeline-icon-bg, var(--a-bg-muted));
     --timeline-item-icon-fg:            var(--timeline-icon-fg, var(--a-fg-subtle));
+    --timeline-item-icon-border:        var(--timeline-icon-border, var(--a-border-subtle));
     --timeline-item-icon-bg-success:    var(--timeline-icon-bg-success, var(--a-success-muted));
     --timeline-item-icon-fg-success:    var(--timeline-icon-fg-success, var(--a-success-strong));
     --timeline-item-icon-bg-accent:     var(--timeline-icon-bg-accent, var(--a-accent-muted));
@@ -245,6 +259,10 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     border-radius: 50%;
     background: var(--timeline-item-icon-bg);
     color: var(--timeline-item-icon-fg);
+    /* Subtle ring so the default (no-variant) chip reads as a marker even
+       when its muted fill blends with the surrounding surface; the colored
+       variants below restate background only, keeping this ring. */
+    border: 1px solid var(--timeline-item-icon-border);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -342,12 +360,12 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     background: var(--timeline-item-subdot-bg);
   }
 
-  /* ═══════ Toggle chevron (outcomes) ═══════ */
+  /* ═══════ Toggle caret (outcomes) ═══════ */
 
   :scope > [data-timeline-toggle] {
     position: absolute;
     inset-inline-end: 0;
-    /* Place the chevron's icon-center on row 1's optical center.
+    /* Place the caret's icon-center on row 1's optical center.
        The button has --a-space-0-5 vertical padding, so the icon
        sits that much lower inside the box; we subtract that so the
        icon (not the box) lines up with the time-slot text center. */
@@ -372,7 +390,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     color: var(--timeline-item-label-fg, var(--a-fg));
   }
 
-  /* Reserve room so the time isn't overlapped by the chevron */
+  /* Reserve room so the time isn't overlapped by the caret */
   :scope:has(> [data-timeline-toggle]) [slot="time"] {
     margin-inline-end: var(--timeline-item-toggle-time-margin);
   }

package/components/toggle-group/toggle-group.css

@@ -19,11 +19,14 @@ toggle-option-ui:not([disabled]):hover {
 
   :scope {
     box-sizing: border-box;
-    display: inline-flex;
+    display: flex;
     border: var(--toggle-group-border-width, var(--toggle-group-border-width-default)) solid var(--toggle-group-border-color, var(--toggle-group-border-color-default));
     border-radius: var(--toggle-group-radius, var(--toggle-group-radius-default));
     overflow: hidden;
   }
+
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-flex; }
 }
 
 @scope (toggle-option-ui) {

package/components/toggle-scheme/toggle-scheme.css

@@ -4,12 +4,15 @@
   }
 
   :scope {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     line-height: 0;
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-flex; }
+
   :scope[disabled] {
     pointer-events: none;
   }