@adia-ai/web-components 0.8.34 → 0.8.36

package/components/text/text.examples.md

@@ -11,8 +11,8 @@
 ```html
 <row-ui gap="6" align="start" wrap>
   <col-ui gap="2">
-    <text-ui variant="caption" color="muted">verse</text-ui>
-    <div verse style="max-width:240px">
+    <text-ui variant="caption" color="muted">scale="ui-sm"</text-ui>
+    <div scale="ui-sm" style="max-width:240px">
       <col-ui gap="2">
         <text-ui variant="heading">Heading</text-ui>
         <text-ui variant="body">Body copy showing how this register sizes running text and the leading between lines.</text-ui>
@@ -31,8 +31,8 @@
     </div>
   </col-ui>
   <col-ui gap="2">
-    <text-ui variant="caption" color="muted">prose</text-ui>
-    <div prose style="max-width:240px">
+    <text-ui variant="caption" color="muted">scale="content-md"</text-ui>
+    <div scale="content-md" style="max-width:240px">
       <col-ui gap="2">
         <text-ui variant="heading">Heading</text-ui>
         <text-ui variant="body">Body copy showing how this register sizes running text and the leading between lines.</text-ui>

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

@@ -29,12 +29,12 @@
       "type": "string"
     },
     "spinner": {
-      "description": "Show a spinner instead of the icon while status=pending.",
+      "description": "Show a spinner instead of the dot/icon while status=\"active\".",
       "type": "boolean",
       "default": false
     },
     "status": {
-      "description": "Lifecycle state (idle | pending | done | failed).",
+      "description": "Lifecycle state (idle | active | completed | error). Pairs with `spinner` on \"active\" for an in-progress step.",
       "type": "string",
       "default": "idle"
     },

package/components/timeline/timeline-item.yaml

@@ -39,11 +39,11 @@ props:
     type: string
     default: 'default'
   status:
-    description: Lifecycle state (idle | pending | done | failed).
+    description: Lifecycle state (idle | active | completed | error). Pairs with `spinner` on "active" for an in-progress step.
     type: string
     default: 'idle'
   spinner:
-    description: Show a spinner instead of the icon while status=pending.
+    description: Show a spinner instead of the dot/icon while status="active".
     type: boolean
     default: false
 

package/components/timeline/timeline.css

@@ -176,6 +176,17 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     --timeline-item-toggle-px:          var(--a-space-0-5);
     --timeline-item-toggle-time-margin: 1.5rem;
     --timeline-item-outcome-indent:     0.75rem;
+
+    /* Row-1's rendered height — [slot="label"]'s own line-height (1.4,
+       set at var(--timeline-item-label-size), timeline.css below). Marker
+       centering (dot/line/icon/caret) must measure against THIS, not a
+       bare `1.4em`: `em` on the marker's own box resolves against
+       timeline-item-ui's ambient/inherited font-size, which is NOT
+       guaranteed to equal --timeline-item-label-size (it doesn't, by
+       default — nothing sets font-size on timeline-item-ui itself), so a
+       literal `1.4em` silently drifted off the label's real line-height
+       and threw every marker's vertical center off by that gap (gh#1090). */
+    --timeline-item-row-h:              calc(var(--timeline-item-label-size) * 1.4);
   }
 
   :scope {
@@ -200,7 +211,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     content: '';
     position: absolute;
     left: calc((var(--timeline-item-marker-w) - var(--timeline-item-dot-size)) / 2);
-    top: calc((1.4em - var(--timeline-item-dot-size)) / 2 + 1px);
+    top: calc((var(--timeline-item-row-h) - var(--timeline-item-dot-size)) / 2 + 1px);
     width: var(--timeline-item-dot-size);
     height: var(--timeline-item-dot-size);
     border-radius: 50%;
@@ -235,7 +246,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     content: '';
     position: absolute;
     left: calc((var(--timeline-item-marker-w) - var(--timeline-item-line-size)) / 2);
-    top: calc((1.4em + var(--timeline-item-dot-size)) / 2 + 2px);
+    top: calc((var(--timeline-item-row-h) + var(--timeline-item-dot-size)) / 2 + 2px);
     bottom: calc(-1 * var(--timeline-item-gap-row));
     width: var(--timeline-item-line-size);
     background: var(--timeline-item-line-fg);
@@ -252,8 +263,17 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     grid-column: marker;
     grid-row: 1;
     justify-self: center;
-    align-self: baseline;
-    margin-top: calc((1.4em - var(--timeline-item-icon-size)) / 2);
+    /* `baseline` anchors a baseline-less box (icon-ui has no text) by its
+       synthesized baseline — the bottom margin edge (CSS Box Alignment) —
+       to the row's shared text baseline. That pins the icon's BOTTOM to
+       near the bottom of the label's glyphs and makes the margin-top
+       centering below a no-op (the alignment step repositions the box
+       after margin is applied, so no margin-top value moves the rendered
+       circle). `start` anchors the row's block-start instead, so
+       margin-top's `(row-h - icon-size)/2` genuinely centers the icon
+       against the label's line-height (gh#1090). */
+    align-self: start;
+    margin-top: calc((var(--timeline-item-row-h) - var(--timeline-item-icon-size)) / 2);
     width: var(--timeline-item-icon-size);
     height: var(--timeline-item-icon-size);
     border-radius: 50%;
@@ -278,7 +298,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
 
   /* Push connector line past the icon circle */
   :scope:has([slot="icon"])::after {
-    top: calc((1.4em + var(--timeline-item-icon-size)) / 2 + 2px);
+    top: calc((var(--timeline-item-row-h) + var(--timeline-item-icon-size)) / 2 + 2px);
   }
 
   /* ═══════ Content slots ═══════ */
@@ -400,6 +420,14 @@ timeline-ui[size="sm"] > timeline-item-ui[status="active"][spinner]::before {
 timeline-ui[orientation="horizontal"] > timeline-item-ui {
   display: flex;
   flex-direction: column;
+  /* Reset the vertical-mode grid's `align-items: baseline` (timeline.css
+     above) — baseline is incompatible with cross-axis stretch, so without
+     this reset [slot="label"]/[slot="description"]/[slot="time"] (plain
+     <span>s) shrink-to-fit their own text instead of spanning the item's
+     full width, leaving `text-align: center` below with no extra width to
+     center within (labels rendered flush against the item's left edge —
+     gh#1090). */
+  align-items: stretch;
   flex: 1 1 0;
   min-width: 0;
   padding-top: calc(var(--timeline-dot-size) + var(--timeline-gap-col));

package/components/timeline/timeline.d.ts

@@ -40,9 +40,9 @@ export class UITimelineItem extends UIElement {
   duration: string;
   /** Optional leading icon name (Phosphor). */
   icon: string;
-  /** Show a spinner instead of the icon while status=pending. */
+  /** Show a spinner instead of the dot/icon while status="active". */
   spinner: boolean;
-  /** Lifecycle state (idle | pending | done | failed). */
+  /** Lifecycle state (idle | active | completed | error). Pairs with `spinner` on "active" for an in-progress step. */
   status: string;
   /** Primary step label. */
   text: string;

package/components/toast/toast.css

@@ -2,6 +2,17 @@
    TOAST-N — Notification popup with auto-dismiss.
    ═══════════════════════════════════════════════════════════════ */
 
+/* DEAD-CODE NOTICE (gh#1104, ties to Phase 4 of
+   .claude/docs/specs/feed-channel.md / SPEC-FEED-CHANNEL-001):
+   <toast-ui> is a self-removing facade — toast.class.js's
+   `connected()` posts into <feed-ui>/UIFeed then `queueMicrotask`s
+   `this.remove()`, so this element never survives to a paint. Every
+   rule below (including the `primary` variant) is unreachable at
+   runtime. The real paint site is feed.css's `@scope (feed-item-ui)`
+   block — edit THAT file to change what a posted toast looks like.
+   Kept here (not deleted) as the documented visual contract + the
+   reference the feed-item-ui `primary` variant was ported from. */
+
 /* Safari 17.x bug: `:scope[data-open]` and `:scope[data-closing]`
    (Flavor B — attribute-removal restyle) don't reliably restyle on
    attribute toggling inside `@scope`. Selectors moved out as plain
@@ -73,6 +84,10 @@ toast-ui[data-closing][position="top-left"] {
     box-shadow: var(--toast-shadow);
     opacity: 0;
     pointer-events: auto;
+    /* Elevated-surface separation over busy page content (gh#1091) —
+       mirrors loading-overlay.css's [variant="blur"] treatment. */
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
   }
 
   /* ── Position variants ── */
@@ -112,26 +127,34 @@ toast-ui[data-closing][position="top-left"] {
      light-dark scheme-aware token), NOT `--a-{variant}-text-strong`
      (the latter is locked dark for warning + light for the others —
      designed for solid `--variant-strong` fills, where the bg never
-     flips). Mirrors alert.css's variant wiring. */
+     flips). Mirrors alert.css's variant wiring.
+
+     `--toast-bg` rides `-container-high` (NOT the plain `-container`
+     alert.css uses) — a floating overlay over arbitrary page content
+     needs a stronger tonal step than an inline, already-boxed alert to
+     read as separated (gh#1091). `-container-high` is a real generated
+     role per family in colors/material-static.css (the same tier
+     `--a-{family}-subtle` aliases to per component-token-contract.md's
+     `-strong` semantics note) — not a hand-authored addition. */
 
   :where(:scope),
   :where(:scope[variant="info"]) {
-    --toast-bg:     var(--md-sys-color-info-container);
+    --toast-bg:     var(--md-sys-color-info-container-high);
     --toast-fg:     var(--md-sys-color-info-on-surface);
     --toast-border: var(--md-sys-color-info-outline-variant);
   }
   :where(:scope[variant="success"]) {
-    --toast-bg:     var(--md-sys-color-success-container);
+    --toast-bg:     var(--md-sys-color-success-container-high);
     --toast-fg:     var(--md-sys-color-success-on-surface);
     --toast-border: var(--md-sys-color-success-outline-variant);
   }
   :where(:scope[variant="warning"]) {
-    --toast-bg:     var(--md-sys-color-warning-container);
+    --toast-bg:     var(--md-sys-color-warning-container-high);
     --toast-fg:     var(--md-sys-color-warning-on-surface);
     --toast-border: var(--md-sys-color-warning-outline-variant);
   }
   :where(:scope[variant="danger"]) {
-    --toast-bg:     var(--md-sys-color-danger-container);
+    --toast-bg:     var(--md-sys-color-danger-container-high);
     --toast-fg:     var(--md-sys-color-danger-on-surface);
     --toast-border: var(--md-sys-color-danger-outline-variant);
   }