@agent-ui-kit/components 0.0.3

package/dist/controls/timeline-item/timeline-item.css

@@ -0,0 +1,495 @@
+/* timeline-item.css — ui-timeline-item, the single-file component stylesheet (ADR-0003;
+ * timeline-family.lld.md §2.4/§5 · SPEC-R3/R4/R13/R15). Three sections:
+ *
+ *   [0] THE MARKER-SYSTEM RAMP — a NEW explicit per-(scale × size) integer table (ADR-0122 F2's novelty
+ *       leg, the ADR-0038 no-multiplier law, the ADR-0035/0036 hoisted-per-[scale] pattern). Bare
+ *       `:root`/`[scale=...]` selectors (the dimensions.css idiom) declare the RAMP FAMILY
+ *       `--ui-timeline-item-{marker-box,dot-size,connector-width,gutter,row-gap}-{sm,md,lg}` — literals,
+ *       no calc/multiplier. Kept LOCAL to this file (not shared/dimensions.css) because the marker system
+ *       is consumed by ONLY ui-timeline-item — a family-scoped novelty, the ADR-0048 calendar precedent's
+ *       shape, not its substance (the calendar aliases the EXISTING --md-sys-height-* ramp; this table is
+ *       genuinely new). Every declared/consumed token is prefixed `--ui-timeline-item-` (own-name, per
+ *       family-coherence's B invariant) — a deliberate rename off the LLD's illustrative `--ui-timeline-*`
+ *       spelling, since that prefix is NOT this control's own name and would cross-file-leak under the
+ *       fleet's per-control token-ownership gate; ui-timeline/ui-status-stream never touch these tokens.
+ *   [1] TOKEN BLOCK — `:where(ui-timeline-item)` DECLARES the CONSUMED `--ui-timeline-item-*` chain,
+ *       picking a ramp row via `[size]` (Kim's (scale × size) → row lookup: `[scale]` (ambient) selects
+ *       the register via [0]'s tiers; `size` (an author prop) picks the row within it) + status-keyed ink.
+ *   [2] STYLES BLOCK — `@scope (ui-timeline-item)` CONSUMES only `--ui-timeline-item-*` (+ the shared
+ *       focus-ring/type-scale allowlist): host-as-grid (marker | content | aside), the marker's `::before`
+ *       dot/ring/pulse + `::after` connector (a REAL row-gap realized as `margin-block-end`, suppressed on
+ *       `[data-last]` — so the item is its OWN row-rhythm authority, no cross-file host coordination), the
+ *       `data-role` content cells (empty ones collapse), and a `forced-colors` block keeping every status
+ *       marker legible by SHAPE (SPEC-R4 AC2).
+ *
+ * Standalone stylesheet — linked via the component-styles barrel; NEVER injected from timeline-item.ts.
+ */
+
+/* ════════════════ [0] THE MARKER-SYSTEM RAMP — bare :root / [scale=…] (dimensions.css idiom) ════════════════ */
+
+:root {
+  /* The default register (≡ [scale="ui-md"] / [scale="content-sm"] — Kim's band-overlap law, SPEC-R13 AC2's
+     frozen row: connector-width is deliberately 2 across every size AND every scale tier — the stepping
+     lesson the geometry probe must not assume away). */
+  --ui-timeline-item-marker-box-sm: 14px;
+  --ui-timeline-item-marker-box-md: 16px;
+  --ui-timeline-item-marker-box-lg: 20px;
+  --ui-timeline-item-dot-size-sm: 6px;
+  --ui-timeline-item-dot-size-md: 8px;
+  --ui-timeline-item-dot-size-lg: 10px;
+  --ui-timeline-item-connector-width-sm: 2px;
+  --ui-timeline-item-connector-width-md: 2px;
+  --ui-timeline-item-connector-width-lg: 2px;
+  --ui-timeline-item-gutter-sm: 18px;
+  --ui-timeline-item-gutter-md: 20px;
+  --ui-timeline-item-gutter-lg: 24px;
+  --ui-timeline-item-row-gap-sm: 8px;
+  --ui-timeline-item-row-gap-md: 12px;
+  --ui-timeline-item-row-gap-lg: 16px;
+}
+
+/* ui-sm — the compact register (tighter than the default). */
+[scale='ui-sm'] {
+  --ui-timeline-item-marker-box-sm: 12px;
+  --ui-timeline-item-marker-box-md: 14px;
+  --ui-timeline-item-marker-box-lg: 18px;
+  --ui-timeline-item-dot-size-sm: 5px;
+  --ui-timeline-item-dot-size-md: 6px;
+  --ui-timeline-item-dot-size-lg: 8px;
+  --ui-timeline-item-connector-width-sm: 2px;
+  --ui-timeline-item-connector-width-md: 2px;
+  --ui-timeline-item-connector-width-lg: 2px;
+  --ui-timeline-item-gutter-sm: 16px;
+  --ui-timeline-item-gutter-md: 18px;
+  --ui-timeline-item-gutter-lg: 22px;
+  --ui-timeline-item-row-gap-sm: 6px;
+  --ui-timeline-item-row-gap-md: 8px;
+  --ui-timeline-item-row-gap-lg: 12px;
+}
+/* ui-md — the default register, restated explicitly (byte-identical to :root) so every [scale] tier is a
+   complete, self-contained row (the ADR-0038 discipline: no tier relies on falling through to :root). */
+[scale='ui-md'] {
+  --ui-timeline-item-marker-box-sm: 14px;
+  --ui-timeline-item-marker-box-md: 16px;
+  --ui-timeline-item-marker-box-lg: 20px;
+  --ui-timeline-item-dot-size-sm: 6px;
+  --ui-timeline-item-dot-size-md: 8px;
+  --ui-timeline-item-dot-size-lg: 10px;
+  --ui-timeline-item-connector-width-sm: 2px;
+  --ui-timeline-item-connector-width-md: 2px;
+  --ui-timeline-item-connector-width-lg: 2px;
+  --ui-timeline-item-gutter-sm: 18px;
+  --ui-timeline-item-gutter-md: 20px;
+  --ui-timeline-item-gutter-lg: 24px;
+  --ui-timeline-item-row-gap-sm: 8px;
+  --ui-timeline-item-row-gap-md: 12px;
+  --ui-timeline-item-row-gap-lg: 16px;
+}
+/* ui-lg — a step up (also = the content-md register, Kim's 6-names→4-registers band overlap). */
+[scale='ui-lg'] {
+  --ui-timeline-item-marker-box-sm: 16px;
+  --ui-timeline-item-marker-box-md: 20px;
+  --ui-timeline-item-marker-box-lg: 24px;
+  --ui-timeline-item-dot-size-sm: 7px;
+  --ui-timeline-item-dot-size-md: 10px;
+  --ui-timeline-item-dot-size-lg: 12px;
+  --ui-timeline-item-connector-width-sm: 2px;
+  --ui-timeline-item-connector-width-md: 2px;
+  --ui-timeline-item-connector-width-lg: 2px;
+  --ui-timeline-item-gutter-sm: 20px;
+  --ui-timeline-item-gutter-md: 24px;
+  --ui-timeline-item-gutter-lg: 28px;
+  --ui-timeline-item-row-gap-sm: 10px;
+  --ui-timeline-item-row-gap-md: 16px;
+  --ui-timeline-item-row-gap-lg: 20px;
+}
+/* content-sm ≡ ui-md (Kim's band-overlap law: the content-* band is the ui-* band shifted up one row —
+   6 [scale] names render 4 distinct marker-system registers, matching --md-sys-height-* and --md-sys-font-*). */
+[scale='content-sm'] {
+  --ui-timeline-item-marker-box-sm: 14px;
+  --ui-timeline-item-marker-box-md: 16px;
+  --ui-timeline-item-marker-box-lg: 20px;
+  --ui-timeline-item-dot-size-sm: 6px;
+  --ui-timeline-item-dot-size-md: 8px;
+  --ui-timeline-item-dot-size-lg: 10px;
+  --ui-timeline-item-connector-width-sm: 2px;
+  --ui-timeline-item-connector-width-md: 2px;
+  --ui-timeline-item-connector-width-lg: 2px;
+  --ui-timeline-item-gutter-sm: 18px;
+  --ui-timeline-item-gutter-md: 20px;
+  --ui-timeline-item-gutter-lg: 24px;
+  --ui-timeline-item-row-gap-sm: 8px;
+  --ui-timeline-item-row-gap-md: 12px;
+  --ui-timeline-item-row-gap-lg: 16px;
+}
+/* content-md ≡ ui-lg (same band-overlap law). */
+[scale='content-md'] {
+  --ui-timeline-item-marker-box-sm: 16px;
+  --ui-timeline-item-marker-box-md: 20px;
+  --ui-timeline-item-marker-box-lg: 24px;
+  --ui-timeline-item-dot-size-sm: 7px;
+  --ui-timeline-item-dot-size-md: 10px;
+  --ui-timeline-item-dot-size-lg: 12px;
+  --ui-timeline-item-connector-width-sm: 2px;
+  --ui-timeline-item-connector-width-md: 2px;
+  --ui-timeline-item-connector-width-lg: 2px;
+  --ui-timeline-item-gutter-sm: 20px;
+  --ui-timeline-item-gutter-md: 24px;
+  --ui-timeline-item-gutter-lg: 28px;
+  --ui-timeline-item-row-gap-sm: 10px;
+  --ui-timeline-item-row-gap-md: 16px;
+  --ui-timeline-item-row-gap-lg: 20px;
+}
+/* content-lg — the largest register, its own row (no overlap partner, mirroring --md-sys-height-*). */
+[scale='content-lg'] {
+  --ui-timeline-item-marker-box-sm: 20px;
+  --ui-timeline-item-marker-box-md: 24px;
+  --ui-timeline-item-marker-box-lg: 28px;
+  --ui-timeline-item-dot-size-sm: 9px;
+  --ui-timeline-item-dot-size-md: 12px;
+  --ui-timeline-item-dot-size-lg: 14px;
+  --ui-timeline-item-connector-width-sm: 2px;
+  --ui-timeline-item-connector-width-md: 2px;
+  --ui-timeline-item-connector-width-lg: 2px;
+  --ui-timeline-item-gutter-sm: 24px;
+  --ui-timeline-item-gutter-md: 28px;
+  --ui-timeline-item-gutter-lg: 32px;
+  --ui-timeline-item-row-gap-sm: 12px;
+  --ui-timeline-item-row-gap-md: 20px;
+  --ui-timeline-item-row-gap-lg: 24px;
+}
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-timeline-item) declares --ui-timeline-item-* ════════════════ */
+
+:where(ui-timeline-item) {
+  --ui-timeline-item-truncated-border: var(--md-sys-color-warning); /* TKT-0066: was a direct role read in @scope */
+  /* size → picks the row within the ambient [scale] register (Kim's (scale × size) → row lookup). Frame
+     quantities (marker-box/dot/connector/gutter) are density-INVARIANT (the centering law); row-gap is
+     the ONE rhythm quantity and rides [density] via the shared `--md-sys-density` multiplier below. */
+  --ui-timeline-item-marker-box: var(--ui-timeline-item-marker-box-md);
+  --ui-timeline-item-dot-size: var(--ui-timeline-item-dot-size-md);
+  --ui-timeline-item-connector-width: var(--ui-timeline-item-connector-width-md);
+  --ui-timeline-item-gutter: var(--ui-timeline-item-gutter-md);
+  --ui-timeline-item-column-gap: var(--md-sys-space-sm); /* TKT-0066 item 5 ruling: constants route through the own chain */
+  --ui-timeline-item-row-gap: calc(var(--ui-timeline-item-row-gap-md) * var(--md-sys-density));
+  /* a slotted/consumer marker icon reads the CONTENT-ICON register, not this table (LLD §5). */
+  --ui-timeline-item-icon-size: var(--md-sys-icon-md);
+
+  /* status-keyed ink — the SECONDARY, redundant channel (ADR-0057); the marker SHAPE is the primary one. */
+  --ui-timeline-item-marker-ink: var(--md-sys-color-neutral-on-surface-variant);
+  /* a structural DIVIDER, not text ink (the Figma reasoning-chain card's dimmer connector) — the
+     outline-variant role, not on-surface-variant (that role is reserved for legible secondary TEXT). */
+  --ui-timeline-item-connector-ink: var(--md-sys-color-neutral-outline-variant);
+  --ui-timeline-item-ink: var(--md-sys-color-neutral-on-surface);
+  --ui-timeline-item-muted-ink: var(--md-sys-color-neutral-on-surface-variant);
+}
+:where(ui-timeline-item[size='sm']) {
+  --ui-timeline-item-marker-box: var(--ui-timeline-item-marker-box-sm);
+  --ui-timeline-item-dot-size: var(--ui-timeline-item-dot-size-sm);
+  --ui-timeline-item-connector-width: var(--ui-timeline-item-connector-width-sm);
+  --ui-timeline-item-gutter: var(--ui-timeline-item-gutter-sm);
+  --ui-timeline-item-row-gap: calc(var(--ui-timeline-item-row-gap-sm) * var(--md-sys-density));
+  --ui-timeline-item-icon-size: var(--md-sys-icon-sm);
+}
+:where(ui-timeline-item[size='lg']) {
+  --ui-timeline-item-marker-box: var(--ui-timeline-item-marker-box-lg);
+  --ui-timeline-item-dot-size: var(--ui-timeline-item-dot-size-lg);
+  --ui-timeline-item-connector-width: var(--ui-timeline-item-connector-width-lg);
+  --ui-timeline-item-gutter: var(--ui-timeline-item-gutter-lg);
+  --ui-timeline-item-row-gap: calc(var(--ui-timeline-item-row-gap-lg) * var(--md-sys-density));
+  --ui-timeline-item-icon-size: var(--md-sys-icon-lg);
+}
+
+/* status → the redundant ink channel (never the ONLY channel — SHAPE carries the state, styles block below). */
+:where(ui-timeline-item[status='pending']) {
+  --ui-timeline-item-marker-ink: var(--md-sys-color-neutral-on-surface-variant);
+}
+:where(ui-timeline-item[status='active']) {
+  --ui-timeline-item-marker-ink: var(--md-sys-color-primary);
+}
+:where(ui-timeline-item[status='done']) {
+  --ui-timeline-item-marker-ink: var(--md-sys-color-success);
+}
+:where(ui-timeline-item[status='error']) {
+  --ui-timeline-item-marker-ink: var(--md-sys-color-danger);
+}
+/* warning (ADR-0146 F7) — a lesser advisory outcome the single `error` state cannot express. The SHAPE
+   (the injected triangle-exclamation glyph) is the primary signifier (ADR-0057); this warning-role ink is
+   the redundant secondary channel, the SAME role the completion-invariant truncated ring already reads. */
+:where(ui-timeline-item[status='warning']) {
+  --ui-timeline-item-marker-ink: var(--md-sys-color-warning);
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-timeline-item) consumes ONLY --ui-timeline-item-* ════════════════ */
+
+@scope (ui-timeline-item) {
+  :scope {
+    display: grid;
+    grid-template-columns: var(--ui-timeline-item-gutter) 1fr auto;
+    grid-template-rows: auto auto;
+    column-gap: var(--ui-timeline-item-column-gap);
+    align-items: start;
+    color: var(--ui-timeline-item-ink);
+    /* the item is its OWN row-rhythm authority — a real margin, not a cross-file host-set gap (LLD §8's
+       accepted tradeoff: alignment/rhythm via inherited/local tokens, not subgrid). */
+    margin-block-end: var(--ui-timeline-item-row-gap);
+  }
+  /* the terminal row of a host (ui-timeline/ui-status-stream marks its last child `[data-last]`) carries
+     no trailing rhythm and no dangling connector (SPEC-R6 AC2). */
+  :scope[data-last] {
+    margin-block-end: 0;
+  }
+
+  /* ── the marker cell — dot/ring/pulse (::before) + connector (::after), gutter column, full row span ── */
+  :scope [data-part='marker'] {
+    position: relative;
+    grid-column: 1;
+    grid-row: 1 / -1;
+    inline-size: var(--ui-timeline-item-marker-box);
+    block-size: var(--ui-timeline-item-marker-box);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ui-timeline-item-marker-ink);
+  }
+  /* the plain dot — '' (neutral) + 'active' share it (filled); 'pending' hollows it via a border instead
+     of a fill (SPEC-R4: a distinct SHAPE, not hue alone). 'done'/'error' suppress it entirely (below). */
+  :scope [data-part='marker']::before {
+    content: '';
+    position: absolute;
+    inline-size: var(--ui-timeline-item-dot-size);
+    block-size: var(--ui-timeline-item-dot-size);
+    border-radius: 50%;
+    background: var(--ui-timeline-item-marker-ink);
+  }
+  :scope[status='pending'] [data-part='marker']::before {
+    background: transparent;
+    border: var(--ui-timeline-item-connector-width) solid var(--ui-timeline-item-marker-ink);
+  }
+  /* 'active' — a consumer-opt-in pulse (SPEC-R4: "a pulse/spinner is a consumer-opt-in presentation
+     hint"), realized as a box-shadow ping so the dot's OWN box never resizes (the centering law); static
+     under reduced-motion (SPEC-R4 AC3). */
+  :scope[status='active'] [data-part='marker']::before {
+    animation: ui-timeline-item-pulse 1.6s ease-out infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :scope[status='active'] [data-part='marker']::before {
+      animation: none;
+    }
+  }
+  @keyframes ui-timeline-item-pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--ui-timeline-item-marker-ink);
+    }
+    100% {
+      box-shadow: 0 0 0 calc(var(--ui-timeline-item-dot-size) / 1.5) transparent;
+    }
+  }
+
+  /* the GROUP-level `active` glyph (circle-notch, GROUP_STATUS_GLYPH) is Phosphor's own spinner shape —
+     it reads as "working" only once actually spinning; static under reduced-motion (the pulse precedent).
+     Gated on BOTH `[data-glyph='circle-notch']` AND `[status='active']` (component-review finding) — a
+     consumer who sets a STATIC `icon="circle-notch"` (a free marker glyph, orthogonal to status) must not
+     spin forever; only the group-glyph's OWN active-status meaning animates. */
+  :scope[status='active'] [data-role='marker'][data-glyph='circle-notch'] {
+    animation: ui-timeline-item-spin 1s linear infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :scope[status='active'] [data-role='marker'][data-glyph='circle-notch'] {
+      animation: none;
+    }
+  }
+  @keyframes ui-timeline-item-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* the connector — a REAL element, not a pseudo (bridges the item's own margin-block-end row-gap so the
+     line is visually continuous into the next item); suppressed on the host's terminal item. */
+  :scope [data-part='marker']::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    inset-inline-start: calc(50% - var(--ui-timeline-item-connector-width) / 2);
+    inline-size: var(--ui-timeline-item-connector-width);
+    block-size: var(--ui-timeline-item-row-gap);
+    background: var(--ui-timeline-item-connector-ink);
+  }
+  :scope[data-last] [data-part='marker']::after {
+    display: none;
+  }
+
+  /* a consumer-adopted / icon-prop-driven / status-glyph marker suppresses the plain dot (NOT the
+     connector — the two are independent facts) and sizes to the content-icon register (LLD §5). */
+  :scope:has([data-role='marker']) [data-part='marker']::before {
+    display: none;
+  }
+  :scope [data-role='marker'] {
+    inline-size: var(--ui-timeline-item-icon-size);
+    block-size: var(--ui-timeline-item-icon-size);
+  }
+
+  /* ── content cells — label/timestamp share row 1, description/trailing share row 2 ── */
+  :scope [data-role='label'] {
+    grid-column: 2;
+    grid-row: 1;
+    font-weight: 500;
+  }
+  :scope [data-role='timestamp'] {
+    grid-column: 3;
+    grid-row: 1;
+    color: var(--ui-timeline-item-muted-ink);
+    white-space: nowrap;
+  }
+  :scope [data-role='description'] {
+    grid-column: 2;
+    grid-row: 2;
+    color: var(--ui-timeline-item-muted-ink);
+  }
+  :scope [data-role='trailing'] {
+    grid-column: 3;
+    grid-row: 2;
+  }
+  /* empty cells collapse — no phantom gutter (SPEC-R3 AC1). */
+  :scope > [data-role]:empty {
+    display: none;
+  }
+
+  /* ── a GROUP item (hosts a nested sub-timeline, ADR-0146 F5) reads as a denser CARD header: the
+     label + its dot-separated status text share row 1 with the elapsed time — the Figma reasoning-chain
+     card's single-line "Task Group · <status>  ⋯  32s" — rather than the leaf's two-row label/description
+     stack. `@scope (ui-timeline-item)` carries no `to()` bound, so these rules are NOT limited to the
+     matching group's own cells — the plain descendant selectors below (no `>`) also reach every ITEM
+     nested inside that group's `<ui-timeline>` (a "Task Step" row is itself a `ui-timeline-item`, several
+     DOM levels down, at any recursion depth — ADR-0143). That cascade-through is exactly what the Figma
+     card wants too — a step row ALSO reads "Task Step 02 · What went wrong  6s" on one line — so it is
+     kept, not fought. Only a leaf with NO grouped ancestor at all (never nested under any `:has([data-role=
+     'nested'])` item) keeps the original, unrelated two-row layout untouched.
+
+     Component-review correction: the FIRST cut of this rule repointed the cells (`description`/`timestamp`)
+     onto the new 4-column template via a plain descendant selector, but left `grid-template-columns` itself
+     scoped to ONLY the group root — so every nested "Task Step" row still laid out its CELLS against the
+     old 3-column template (a stray 1fr on the label column, the timestamp landing in an uncounted implicit
+     4th track). `grid-template-columns` must reach the SAME descendant set the cell placements do. */
+  :scope:has([data-role='nested']),
+  :scope:has([data-role='nested']) ui-timeline-item {
+    grid-template-columns: var(--ui-timeline-item-gutter) auto 1fr auto;
+  }
+  :scope:has([data-role='nested']) [data-role='description'] {
+    grid-column: 3;
+    grid-row: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis; /* NOT flex — text-overflow only clips reliably on a block container's own inline content, not an anonymous flex item */
+    white-space: nowrap;
+  }
+  :scope:has([data-role='nested']) [data-role='description']::before {
+    content: '\00B7\0020'; /* a middle-dot separator + a spacer (the Metadata row's "Dot" glyph, Figma node 21:1403 et al.) — plain inline content, so it ellipses together with the text rather than as a separate flex item */
+  }
+  :scope:has([data-role='nested']) [data-role='timestamp'] {
+    grid-column: 4;
+  }
+  /* `trailing` (the collapsed-summary preview, ADR-0143 F3) is always meant to stack directly under
+     `timestamp` — it kept the base layout's literal `grid-column: 3` even though the group override above
+     repoints `timestamp` to column 4, landing the preview under `description` instead (code-review finding).
+     `grid-row` is untouched (still row 2, the base rule) — only the column follows timestamp's move. */
+  :scope:has([data-role='nested']) [data-role='trailing'] {
+    grid-column: 4;
+  }
+  /* elapsed-time readouts read as tabular mono figures (the Figma reasoning-chain CARD's "Label Mono" /
+     SF Mono treatment) — a telemetry/timestamp cell is machine-emitted data, not authored prose. Scoped to
+     the group block deliberately (code-review finding): an earlier cut left this unconditional, so a plain
+     leaf item's own human-authored timestamp prose (e.g. timeline-demo.ts's "Apr 15, 2:30 PM") silently
+     rendered in monospace too — outside this PR's stated "grouped cards" scope. */
+  :scope:has([data-role='nested']) [data-role='timestamp'],
+  :scope:has([data-role='nested']) [data-role='trailing'] {
+    font-family: var(--md-sys-typeface-mono);
+    font-variant-numeric: tabular-nums;
+  }
+  /* `detail`/`text` span columns 2 THROUGH THE END (`-1`), not the base layout's literal `2 / 4` — under
+     the group's 4-column template, `4` is the timestamp column, one short of the true last column. `-1`
+     stays correct regardless of column count instead of hard-coding a track index a sibling rule changes. */
+  :scope:has([data-role='nested']) [data-part='detail'],
+  :scope:has([data-role='nested']) [data-role='text'] {
+    grid-column: 2 / -1;
+  }
+  /* the composed detail toggle, contextually compacted (the disclosure's OWN declared --ui-disclosure-*
+     custom properties — the sanctioned override surface, never its internal [data-part] rendering) — a
+     full control-height row reads as a stray, oversized affordance below a now-single-line header. Reaches
+     every nested item's OWN detail too (no `>` — consistent with the cascade-through above: a "Task Step"
+     row's own continuation disclosure, if it has one, compacts the same way its ancestor group's does). */
+  :scope:has([data-role='nested']) [data-part='detail'] {
+    /* NOT `inherit` — an explicit `inherit` on a custom property re-triggers inheritance lookup instead of
+       reading the ambient computed value; since ui-timeline-item never declares --ui-disclosure-font, that
+       lookup dead-ends guaranteed-invalid, which cascades into --ui-disclosure-glyph (chevron sizing) also
+       going invalid — the chevron's inline/block-size then falls back to `auto`, and a same-box-referencing
+       `width="100%"` SVG with an indeterminate containing block resolves to the browser's 300×300 replaced-
+       element default (verified empirically — a real, reproduced regression, not a hypothetical). */
+    --ui-disclosure-height: 1.25em;
+    --ui-disclosure-ink: var(--ui-timeline-item-muted-ink);
+    --ui-disclosure-gap: var(--ui-timeline-item-column-gap);
+  }
+
+  /* the streamed chain-of-thought text cell (ui-status-stream's #growText, timeline-item.md's residual
+     imperative fact) — an implicit row below the label/description/timestamp/trailing rows. */
+  :scope [data-role='text'] {
+    grid-column: 2 / 4;
+    grid-row: 3;
+    color: var(--ui-timeline-item-muted-ink);
+    white-space: pre-wrap;
+  }
+
+  /* the composed detail (ui-disclosure) spans the content+aside columns, an implicit row below any
+     streamed text (so a status-stream entry with BOTH reads top-to-bottom: text, then the detail toggle). */
+  :scope [data-part='detail'] {
+    grid-column: 2 / 4;
+    grid-row: 4;
+  }
+  /* the PRE-adoption consumer child (moved into [data-part='detail'] by #ensureAnatomy, synchronously in
+     connected()) — hidden in the brief window before upgrade/adoption so it never paints loose, unstyled
+     content outside the grid (the same anti-FOUC discipline the toast/disclosure adopted-part precedent
+     relies on implicitly; here made explicit since the source attribute survives the move). */
+  :scope > [data-role='detail'] {
+    display: none;
+  }
+
+  /* :state(truncated) — ui-status-stream's completion invariant (SPEC-R11): a dashed ring OVERRIDES
+     whatever status shape/glyph was showing (a torn stream never lies "still working"). The dash pattern
+     is a non-color-only signifier — `border-style` alone distinguishes it under forced-colors, where the
+     warning fill is not the sole cue. Wins over the injected done/error glyph by clearing it back to the
+     CSS dot (the marker glyph effect never runs for truncation — it is a pure CSS override). */
+  :scope:state(truncated) [data-part='marker']::before {
+    display: block;
+    background: transparent;
+    border: var(--ui-timeline-item-connector-width) dashed var(--ui-timeline-item-truncated-border);
+    /* an active entry's pulse must NOT survive truncation — a torn stream showing a still-pulsing marker
+       is exactly the "still working" cue SPEC-R11 exists to kill (component-review finding). Wins over the
+       [status='active']::before pulse rule above by source order (equal specificity). */
+    animation: none;
+  }
+  :scope:state(truncated) [data-role='marker'] {
+    display: none; /* the dashed ring is the sole marker once truncated — no competing built-in glyph */
+  }
+
+  /* forced-colors (WHCM) — every marker SHAPE keeps a system-colour border/fill so the state survives
+     when fills flatten (SPEC-R4 AC2). The pending ring, the connector, and the label/description ink all
+     already resolve through a WHCM-mapped role at the token layer; this block is the explicit,
+     computed-style-provable belt-and-suspenders (the disclosure precedent). */
+  @media (forced-colors: active) {
+    :scope {
+      color: CanvasText;
+    }
+    :scope [data-part='marker']::before {
+      background: CanvasText;
+      border-color: CanvasText;
+    }
+    :scope [data-part='marker']::after {
+      background: CanvasText;
+    }
+    :scope [data-role='description'],
+    :scope [data-role='timestamp'] {
+      color: CanvasText;
+    }
+  }
+}

package/dist/controls/timeline-item/timeline-item.d.ts

@@ -0,0 +1,79 @@
+import { UIElement, type ReactiveProps } from '../../dom/index.js';
+import '../disclosure/disclosure.js';
+declare const props: {
+    status: {
+        reflect: true;
+        type: import("../../index.js").PropType<"" | "error" | "warning" | "pending" | "active" | "done">;
+        default: "" | "error" | "warning" | "pending" | "active" | "done";
+        attribute?: string | false;
+    };
+    label: {
+        reflect: true;
+        type: import("../../index.js").PropType<string>;
+        default: string;
+        attribute?: string | false;
+    };
+    description: import("../../index.js").PropConfig<string>;
+    timestamp: import("../../index.js").PropConfig<string>;
+    icon: import("../../index.js").PropConfig<string>;
+    size: {
+        reflect: true;
+        type: import("../../index.js").PropType<"sm" | "md" | "lg">;
+        default: "sm" | "md" | "lg";
+        attribute?: string | false;
+    };
+};
+export interface UITimelineItemElement extends ReactiveProps<typeof props> {
+}
+export declare class UITimelineItemElement extends UIElement {
+    #private;
+    static props: {
+        status: {
+            reflect: true;
+            type: import("../../index.js").PropType<"" | "error" | "warning" | "pending" | "active" | "done">;
+            default: "" | "error" | "warning" | "pending" | "active" | "done";
+            attribute?: string | false;
+        };
+        label: {
+            reflect: true;
+            type: import("../../index.js").PropType<string>;
+            default: string;
+            attribute?: string | false;
+        };
+        description: import("../../index.js").PropConfig<string>;
+        timestamp: import("../../index.js").PropConfig<string>;
+        icon: import("../../index.js").PropConfig<string>;
+        size: {
+            reflect: true;
+            type: import("../../index.js").PropType<"sm" | "md" | "lg">;
+            default: "sm" | "md" | "lg";
+            attribute?: string | false;
+        };
+    };
+    constructor();
+    protected connected(): void;
+    protected disconnected(): void;
+    /** Reveal/collapse the detail region (used by ui-status-stream's update({detail})); no-op if no detail. */
+    toggleDetail(open?: boolean): void;
+    /**
+     * ADR-0146 F5 (the ADR-0143 2026-07-18 amendment — Kim's narrow, additive exception) — LAZILY ensure a
+     * `[data-role="nested"]` slot exists on an ALREADY-CONNECTED item, for ui-status-stream's GROUPED entries.
+     * Returns the nested host, composing it into the SAME shared `ui-disclosure` `#ensureAnatomy()` uses at
+     * connect (ADR-0143 F1/F2) — never a second nesting mechanism (the family-coherence law the amendment
+     * preserves). The collapsed-summary preview + its `MutationObserver` (ADR-0143 F3) are armed here EXACTLY as
+     * `connected()` arms them for an authored nested slot, so the group's collapse + preview work with ZERO
+     * bespoke nesting code. This is the ONLY new public surface the amendment adds; it is a dead code path for
+     * the durable authored-markup host (which composes `nested` eagerly at connect) — a live host is its sole
+     * caller. `factory` mints the host (ui-status-stream passes a fresh `<ui-timeline>`) so THIS file stays
+     * import-free of `ui-timeline` (the cycle guard, file header). Idempotent: a second call returns the
+     * existing slot untouched. Must run while connected — it registers a scope-owned effect (`this.effect`
+     * throws outside the connected lifetime); ui-status-stream only calls it on an item already appended live.
+     */
+    ensureNestedSlot(factory: () => HTMLElement): HTMLElement;
+    /** Mark/unmark this item TRUNCATED — ui-status-stream's completion invariant (SPEC-R11): a distinct,
+     *  non-color-only interrupted affordance via a real custom state (`:state(truncated)` in CSS), never a
+     *  silent forever-spinner. `internals.states` is optional-chained (absent in jsdom, the fleet convention —
+     *  button.ts/checkbox.ts/text-field.ts). Imperative/CSS-state, not a `static props` field (LLD §7/§8). */
+    markTruncated(truncated: boolean): void;
+}
+export {};