@adia-ai/web-components 0.6.50 → 0.7.0

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;
   }