@adia-ai/web-components 0.6.38 → 0.6.40

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.40] — 2026-05-26
+
+### Fixed — `index.js` barrel side-effect-imports `core/provider.js` (cold-start `<router-ui>` registration)
+
+- **`packages/web-components/index.js`** — the barrel now side-effect-imports `core/provider.js`, which registers `<router-ui>` from the default cold-start path. Closes the FB-69-class regression where consumers importing the cluster-barrel hit "router-ui is not registered" when first navigating in a cold session. Files: `packages/web-components/index.js`.
+
+## [0.6.39] — 2026-05-26
+
+### Added — `<tour-ui>` spotlight-driven product tour primitive (Wave 5e last P1, #259)
+
+- **`<tour-ui>`** — spotlight-driven product tour primitive. Closes the last Wave 5e P1. Component count 177 → 179 (+2 with tour + tour-step sub-primitive).
+
+### Fixed — substrate defensive slot-selector sweep + admin-entity-item icon size
+
+- **Substrate sweep**: slot selectors changed from direct-child to descendant across remaining primitives. Defensive companion to the v0.6.38 `<list-item-ui>` fix — same drift class in adjacent components.
+- **`<admin-entity-item>`**: icon size now matches `<nav-item-ui>`'s row icon (24px) instead of hardcoded 16px. Brings the canonical brand-chrome pattern into visual parity with the nav-item it sits next to.
+- **`<list-item-ui>`**: now declares `slot="action"` — closes P2 from the v0.6.38 `dogfood:status` gate.
+
 ## [0.6.38] — 2026-05-26
 
 ### Added — Wave 5e cohort: 3 new primitives + slot-vocab-vs-css backlog closed

package/components/date-range-picker/date-range-picker.css

@@ -81,7 +81,7 @@
      stamped by date-range-picker.class.js — these rules override button-ui's defaults at
      equal specificity so the picker trigger reads as part of the
      input/picker family rather than a generic button. */
-  :scope > [slot="trigger"] {
+  :scope [slot="trigger"] {
     min-width: var(--date-range-picker-trigger-min-width, var(--date-range-picker-trigger-min-width-default));
     min-height: var(--date-range-picker-trigger-height, var(--date-range-picker-trigger-height-default));
     padding: 0 var(--date-range-picker-trigger-px, var(--date-range-picker-trigger-px-default));
@@ -101,12 +101,12 @@
       border-color var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default)),
       background   var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default));
   }
-  :scope > [slot="trigger"]:hover {
+  :scope [slot="trigger"]:hover {
     border-color: var(--date-range-picker-trigger-border-hover, var(--date-range-picker-trigger-border-hover-default));
     background: var(--date-range-picker-trigger-bg-hover, var(--date-range-picker-trigger-bg-hover-default));
   }
   :scope:focus-visible { outline: none; }
-  :scope:focus-visible > [slot="trigger"] {
+  :scope:focus-visible [slot="trigger"] {
     box-shadow: var(--date-range-picker-trigger-focus-ring, var(--date-range-picker-trigger-focus-ring-default));
   }
 
@@ -115,7 +115,7 @@
     opacity: 0.5;
     pointer-events: none;
   }
-  :scope[readonly] > [slot="trigger"] {
+  :scope[readonly] [slot="trigger"] {
     cursor: default;
   }
 }

package/components/datetime-picker/datetime-picker.css

@@ -55,7 +55,7 @@
 
   /* Default trigger sizing — composes button-ui's surface; just
      stretches the min-width so "Jan 1, 2026 14:30" fits. */
-  :scope > [slot="trigger"] {
+  :scope [slot="trigger"] {
     min-width: var(--datetime-picker-trigger-min-width, var(--datetime-picker-trigger-min-width-default));
   }
 
@@ -64,7 +64,7 @@
     opacity: 0.5;
     pointer-events: none;
   }
-  :scope[readonly] > [slot="trigger"] {
+  :scope[readonly] [slot="trigger"] {
     cursor: default;
   }
 }
@@ -131,7 +131,7 @@ datetime-picker-ui [slot="popover"] > [data-time-pane] {
 
 /* Footer area (consumer-supplied [slot="footer"]) — spans all three
    columns under the panes. */
-datetime-picker-ui [slot="popover"] > [slot="footer"] {
+datetime-picker-ui [slot="popover"] [slot="footer"] {
   grid-column: 1 / -1;
   display: flex;
   justify-content: flex-end;

package/components/demo-toggle/demo-toggle.css

@@ -57,15 +57,15 @@
   /* -- Stage area (where the slotted content lives) -- */
   /* Slotted children are anything that isn't the [slot="bar"]. They sit in
      the second flex row; default mode shows only the active slot. */
-  :scope > [slot="on"],
-  :scope > [slot="off"] {
+  :scope [slot="on"],
+  :scope [slot="off"] {
     box-sizing: border-box;
     width: 100%;
     padding: var(--demo-toggle-stage-padding, var(--demo-toggle-stage-padding-default));
   }
 
-  :scope[data-state="on"]  > [slot="off"] { display: none; }
-  :scope[data-state="off"] > [slot="on"]  { display: none; }
+  :scope[data-state="on"]  [slot="off"] { display: none; }
+  :scope[data-state="off"] [slot="on"]  { display: none; }
 
   /* Overlay mode — both slots stack on the same coordinates so toggling
      never reflows the surrounding layout. The inactive slot is
@@ -76,8 +76,8 @@
     /* The bar is row 1; the stage cell is row 2. The cell's children all
        claim the same grid-area so they overlap. */
   }
-  :scope[data-mode="overlay"] > [slot="on"],
-  :scope[data-mode="overlay"] > [slot="off"] {
+  :scope[data-mode="overlay"] [slot="on"],
+  :scope[data-mode="overlay"] [slot="off"] {
     display: block;
   }
   :scope[data-mode="overlay"] {
@@ -86,7 +86,7 @@
        via the second slot's positioning. */
     position: relative;
   }
-  :scope[data-mode="overlay"] > [slot="on"] {
+  :scope[data-mode="overlay"] [slot="on"] {
     position: absolute;
     inset: 0;
     /* Bar height — the slot starts beneath the bar. We can't query the
@@ -98,17 +98,17 @@
     top: auto;
     height: auto;
   }
-  :scope[data-mode="overlay"][data-state="on"]  > [slot="off"] {
+  :scope[data-mode="overlay"][data-state="on"]  [slot="off"] {
     visibility: hidden;
   }
-  :scope[data-mode="overlay"][data-state="off"] > [slot="on"]  {
+  :scope[data-mode="overlay"][data-state="off"] [slot="on"]  {
     visibility: hidden;
   }
   /* Reset display:none branches above for overlay — already handled by
      visibility:hidden, but the default-mode display:none rules above
      would otherwise fight overlay. Override here. */
-  :scope[data-mode="overlay"][data-state="on"]  > [slot="off"],
-  :scope[data-mode="overlay"][data-state="off"] > [slot="on"] {
+  :scope[data-mode="overlay"][data-state="on"]  [slot="off"],
+  :scope[data-mode="overlay"][data-state="off"] [slot="on"] {
     display: block;
   }
 

package/components/feed/feed.css

@@ -144,14 +144,14 @@ feed-item-ui[data-closing] {
     transform: translateY(0.5rem);
     pointer-events: auto;
   }
-  :scope > [slot="body"] {
+  :scope [slot="body"] {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 0.125rem;
   }
-  :scope > [slot="body"] strong {
+  :scope [slot="body"] strong {
     font-weight: var(--a-weight-semibold);
   }
   :scope > [data-feed-close] {

package/components/field/field.css

@@ -42,7 +42,7 @@
      (~7-8 px) than non-field-ui siblings in a `<row-ui align="center">`.
      FB-54 (v0.6.32) — closes the trap for compact filter bars that
      mix field-ui with bare primitives. */
-  :scope:has(> [slot="hint"], > [slot="error"]) {
+  :scope:has([slot="hint"], [slot="error"]) {
     row-gap: var(--field-gap, var(--field-gap-default));
   }
 
@@ -56,12 +56,12 @@
   }
 
   /* Stacked + no label, no trailing → drop the empty top row. */
-  :scope:not([label]):not(:has(> [slot="trailing"])) {
+  :scope:not([label]):not(:has([slot="trailing"])) {
     grid-template-areas:
       "control"
       "message";
   }
-  :scope:not([label]):not(:has(> [slot="trailing"])):has(> [slot="action"]) {
+  :scope:not([label]):not(:has([slot="trailing"])):has([slot="action"]) {
     grid-template-columns: minmax(0, 1fr) auto;
     grid-template-areas:
       "control action"
@@ -69,10 +69,10 @@
   }
 
   /* Hide the label cell when the label attr is absent. */
-  :scope:not([label]) > [slot="label"] { display: none; }
+  :scope:not([label]) [slot="label"] { display: none; }
 
   /* ── Slot styling ── */
-  :scope > [slot="label"] {
+  :scope [slot="label"] {
     grid-area: label;
     color: var(--field-label-color, var(--field-label-color-default));
     font-size: var(--field-label-size, var(--field-label-size-default));
@@ -80,12 +80,12 @@
     cursor: pointer;
     min-width: 0;
   }
-  :scope > [slot="label"] > [data-field-required] {
+  :scope [slot="label"] > [data-field-required] {
     color: var(--field-required-color, var(--field-required-color-default));
     margin-inline-start: 0.15em;
     font-weight: var(--a-weight-bold);
   }
-  :scope > [slot="trailing"] {
+  :scope [slot="trailing"] {
     grid-area: trailing;
     justify-self: end;
     color: var(--field-trailing-color, var(--field-trailing-color-default));
@@ -95,20 +95,20 @@
     grid-area: control;
     min-width: 0;
   }
-  :scope > [slot="action"] {
+  :scope [slot="action"] {
     grid-area: action;
     justify-self: end;
   }
-  :scope > [slot="hint"],
-  :scope > [slot="error"] {
+  :scope [slot="hint"],
+  :scope [slot="error"] {
     grid-area: message;
     line-height: 1.3;
   }
-  :scope > [slot="hint"] {
+  :scope [slot="hint"] {
     color: var(--field-hint-color, var(--field-hint-color-default));
     font-size: var(--field-hint-size, var(--field-hint-size-default));
   }
-  :scope > [slot="error"] {
+  :scope [slot="error"] {
     color: var(--field-error-color, var(--field-error-color-default));
     font-size: var(--field-error-size, var(--field-error-size-default));
     font-weight: var(--a-weight-medium);
@@ -125,31 +125,31 @@
       "label   control"
       ".       message";
   }
-  :scope[inline]:has(> [slot="trailing"]):not(:has(> [slot="action"])) {
+  :scope[inline]:has([slot="trailing"]):not(:has([slot="action"])) {
     grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) auto minmax(0, 1fr);
     grid-template-areas:
       "label   trailing control"
       ".       .        message";
   }
-  :scope[inline]:not(:has(> [slot="trailing"])):has(> [slot="action"]) {
+  :scope[inline]:not(:has([slot="trailing"])):has([slot="action"]) {
     grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) minmax(0, 1fr) auto;
     grid-template-areas:
       "label   control action"
       ".       message message";
   }
-  :scope[inline]:has(> [slot="trailing"]):has(> [slot="action"]) {
+  :scope[inline]:has([slot="trailing"]):has([slot="action"]) {
     grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) auto minmax(0, 1fr) auto;
     grid-template-areas:
       "label   trailing control action"
       ".       .        message message";
   }
-  :scope[inline]:not([label]):not(:has(> [slot="trailing"])):not(:has(> [slot="action"])) {
+  :scope[inline]:not([label]):not(:has([slot="trailing"])):not(:has([slot="action"])) {
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       "control"
       "message";
   }
-  :scope[inline]:not([label]):not(:has(> [slot="trailing"])):has(> [slot="action"]) {
+  :scope[inline]:not([label]):not(:has([slot="trailing"])):has([slot="action"]) {
     grid-template-columns: minmax(0, 1fr) auto;
     grid-template-areas:
       "control action"
@@ -172,7 +172,7 @@
   /* align="end": label text is right-aligned within the label cell.   */
   /* Useful in multi-field forms where labels share a visual column     */
   /* and trailing-flush alignment aids scanability (right-to-input).   */
-  :scope[align="end"] > [slot="label"] {
+  :scope[align="end"] [slot="label"] {
     justify-self: end;
     text-align: end;
   }

package/components/heatmap/heatmap.css

@@ -39,7 +39,7 @@
   }
 
   /* Title slot */
-  :scope > [slot="title"] {
+  :scope [slot="title"] {
     font-weight: 600;
     margin: 0;
   }

package/components/index.js

@@ -95,6 +95,7 @@ export { UIVisuallyHidden } from './visually-hidden/visually-hidden.js';
 export { UISkipNav } from './skip-nav/skip-nav.js';
 export { UIMark } from './mark/mark.js';
 export { UIInlineEdit } from './inline-edit/inline-edit.js';
+export { UITour, UITourStep } from './tour/tour.js';
 export { UIToolbar, UIToolbarGroup } from './toolbar/toolbar.js';
 export { UINav } from './nav/nav.js';
 export { UINavGroup } from './nav-group/nav-group.js';

package/components/inline-message/inline-message.css

@@ -45,7 +45,7 @@
      `order` flips visual order back to [icon, text] without requiring
      us to splice nodes ahead of consumer-provided body content. Same
      pattern used by alert.css. */
-  :scope > [slot="leading"] {
+  :scope [slot="leading"] {
     flex-shrink: 0;
     align-self: center;
     color: var(--inline-message-icon-fg, var(--inline-message-icon-fg-default));

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

@@ -57,6 +57,9 @@
       "description": {
         "description": "Override slot for richer description markup than the plain [description] attribute string (inline links, code spans, multiple lines). Renders beneath the primary text at body-subtle typography."
       },
+      "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."
+      },
       "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."
       }

package/components/list/list-item.yaml

@@ -40,6 +40,13 @@ slots:
       Override slot for richer description markup than the plain [description]
       attribute string (inline links, code spans, multiple lines). Renders
       beneath the primary text at body-subtle typography.
+  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.
 
 keywords:
   - list-item

package/components/list-window/list-window.css

@@ -71,13 +71,13 @@
 
   /* Sticky slots — sit at the top/bottom of the scroll container so they
      stay visible while the window scrolls. */
-  :scope > [slot="before"] {
+  :scope [slot="before"] {
     position: sticky;
     top: 0;
     z-index: 1;
     background: var(--list-window-bg, var(--list-window-bg-default));
   }
-  :scope > [slot="after"] {
+  :scope [slot="after"] {
     position: sticky;
     bottom: 0;
     z-index: 1;
@@ -103,11 +103,11 @@
   :scope[empty] > [data-window] {
     display: none;
   }
-  :scope[empty] > [slot="empty"] {
+  :scope[empty] [slot="empty"] {
     display: block;
   }
 
-  :scope:not([empty]) > [slot="empty"] {
+  :scope:not([empty]) [slot="empty"] {
     display: none;
   }
 

package/components/modal/modal.css

@@ -40,10 +40,10 @@
   :scope[size="lg"] { --modal-width-default: min(48rem, 90vw); }
 
   /* ═══════ Closed ═══════ */
-  :scope > [slot="dialog"]:not([open]) { display: none; }
+  :scope [slot="dialog"]:not([open]) { display: none; }
 
   /* ═══════ Full-viewport dialog shell ═══════ */
-  :scope > [slot="dialog"][open] {
+  :scope [slot="dialog"][open] {
     box-sizing: border-box;
     position: fixed;
     inset: 0;
@@ -62,16 +62,16 @@
   }
 
   /* ═══════ Backdrop ═══════ */
-  :scope > [slot="dialog"]::backdrop {
+  :scope [slot="dialog"]::backdrop {
     background: var(--modal-backdrop, var(--modal-backdrop-default));
     opacity: 0;
     transition: opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
   }
-  :scope > [slot="dialog"][data-open]::backdrop    { opacity: 1; }
-  :scope > [slot="dialog"][data-closing]::backdrop { opacity: 0; }
+  :scope [slot="dialog"][data-open]::backdrop    { opacity: 1; }
+  :scope [slot="dialog"][data-closing]::backdrop { opacity: 0; }
 
   /* ═══════ Content panel ═══════ */
-  :scope > [slot="dialog"] > [slot="panel"] {
+  :scope [slot="dialog"] [slot="panel"] {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -89,7 +89,7 @@
   }
 
   /* ═══════ Open animation ═══════ */
-  :scope > [slot="dialog"][data-open] > [slot="panel"] {
+  :scope [slot="dialog"][data-open] [slot="panel"] {
     transition: transform var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default)),
                 opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
     transform: scale(1);
@@ -97,7 +97,7 @@
   }
 
   /* ═══════ Close animation ═══════ */
-  :scope > [slot="dialog"][data-closing] > [slot="panel"] {
+  :scope [slot="dialog"][data-closing] [slot="panel"] {
     transition: transform var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default)),
                 opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
     transform: scale(0.95);

package/components/option-card/option-card.css

@@ -21,10 +21,10 @@ option-card-ui[checked]::before {
       var(--option-card-radio-fill, var(--option-card-radio-fill-default)) 30% 100%
     );
 }
-option-card-ui[checked] > [slot="heading"] {
+option-card-ui[checked] [slot="heading"] {
   color: var(--option-card-heading-color-checked, var(--option-card-heading-color-checked-default));
 }
-option-card-ui[checked] > [slot="icon"] {
+option-card-ui[checked] [slot="icon"] {
   color: var(--option-card-icon-color-checked, var(--option-card-icon-color-checked-default));
 }
 
@@ -107,13 +107,13 @@ option-card-ui[checked] > [slot="icon"] {
 
   /* When an icon slot is present, insert a third column for it
      between indicator and heading. */
-  :scope:has(> [slot="icon"]) {
+  :scope:has([slot="icon"]) {
     grid-template-columns: auto auto minmax(0, 1fr);
     grid-template-areas:
       "indicator icon heading"
       "indicator icon description";
   }
-  :scope > [slot="icon"] {
+  :scope [slot="icon"] {
     grid-area: icon;
     align-self: start;
     color: var(--option-card-icon-color, var(--option-card-icon-color-default));
@@ -139,14 +139,14 @@ option-card-ui[checked] > [slot="icon"] {
   }
 
   /* ── Slots — heading + description ── */
-  :scope > [slot="heading"] {
+  :scope [slot="heading"] {
     grid-area: heading;
     color: var(--option-card-heading-color, var(--option-card-heading-color-default));
     font-weight: var(--option-card-heading-weight, var(--option-card-heading-weight-default));
     font-size: var(--option-card-heading-size, var(--option-card-heading-size-default));
     transition: color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
   }
-  :scope > [slot="description"] {
+  :scope [slot="description"] {
     grid-area: description;
     color: var(--option-card-desc-color, var(--option-card-desc-color-default));
     font-size: var(--option-card-desc-size, var(--option-card-desc-size-default));
@@ -162,7 +162,7 @@ option-card-ui[checked] > [slot="icon"] {
     margin-block-start: var(--a-space-3);
     display: none;
   }
-  :scope:has(> [slot="icon"]) > :not([slot]) {
+  :scope:has([slot="icon"]) > :not([slot]) {
     grid-column: 3 / -1;
   }
   /* hover + [checked] state rules moved outside @scope — see Safari 17.x bug note at top.
@@ -184,7 +184,7 @@ option-card-ui[checked] > [slot="icon"] {
     padding: var(--a-space-4);
     align-items: start;
   }
-  :scope[layout="tile"] > [slot="icon"] {
+  :scope[layout="tile"] [slot="icon"] {
     grid-area: icon;
     justify-self: start;
     align-self: start;
@@ -196,7 +196,7 @@ option-card-ui[checked] > [slot="icon"] {
     justify-self: end;
     margin-block-start: 0;
   }
-  :scope[layout="tile"] > [slot="heading"] {
+  :scope[layout="tile"] [slot="heading"] {
     margin-block-start: var(--a-space-2);
   }
   :scope[layout="tile"] > :not([slot]) {

package/components/select/select.css

@@ -160,9 +160,9 @@
   }
 
   /* Caret color is held against button-ui's stronger cascade by chaining
-     :scope > [slot="trigger"] > [slot="caret"] — matches at the same
+     :scope [slot="trigger"] [slot="caret"] — matches at the same
      specificity as button-ui's own slot rules without !important. */
-  :scope > [slot="trigger"] > [slot="caret"] {
+  :scope [slot="trigger"] [slot="caret"] {
     color: var(--select-caret-fg, var(--select-caret-fg-default));
     flex-shrink: 0;
   }
@@ -179,7 +179,7 @@
     background: var(--select-ghost-bg-hover, var(--select-ghost-bg-hover-default));
     color: var(--select-fg, var(--select-fg-default));
   }
-  :scope[variant="ghost"] > [slot="trigger"]:hover > [slot="caret"] {
+  :scope[variant="ghost"] [slot="trigger"]:hover [slot="caret"] {
     color: var(--select-fg-subtle, var(--select-fg-subtle-default));
   }
 
@@ -188,7 +188,7 @@
      active. Layout switches from inline-text trigger to wrap-flex chip row.
      Tag-ui chips inside [data-chips] inherit the host's tag-ui token set;
      the +more pill is a CSS-only button styled to match. */
-  :scope[data-multi-chips] > [slot="trigger"] {
+  :scope[data-multi-chips] [slot="trigger"] {
     flex-wrap: wrap;
     align-items: center;
     gap: var(--a-space-1);
@@ -381,7 +381,7 @@ select-ui[divider] [role="group"] + [role="group"] {
 
 /* ── Hint (§184, v0.5.5, FEEDBACK-08 §7) ──
    Caption beneath the trigger; wired to aria-describedby on the host. */
-select-ui > [slot="hint"] {
+select-ui [slot="hint"] {
   display: block;
   margin-top: var(--select-hint-mt, var(--a-space-1));
   font-size: var(--select-hint-size, var(--a-ui-xs));

package/components/timeline/timeline.css

@@ -232,9 +232,9 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
 
   /* ═══════ Icon mode — icon-ui in [slot="icon"] replaces the dot ═══════ */
 
-  :scope:has(> [slot="icon"])::before { display: none; }
+  :scope:has([slot="icon"])::before { display: none; }
 
-  :scope > [slot="icon"] {
+  :scope [slot="icon"] {
     grid-column: marker;
     grid-row: 1;
     justify-self: center;
@@ -253,19 +253,19 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     box-sizing: border-box;
   }
 
-  :scope[variant="success"] > [slot="icon"] { background: var(--timeline-item-icon-bg-success); color: var(--timeline-item-icon-fg-success); }
-  :scope[variant="accent"]  > [slot="icon"] { background: var(--timeline-item-icon-bg-accent);  color: var(--timeline-item-icon-fg-accent); }
-  :scope[variant="warning"] > [slot="icon"] { background: var(--timeline-item-icon-bg-warning); color: var(--timeline-item-icon-fg-warning); }
-  :scope[variant="danger"]  > [slot="icon"] { background: var(--timeline-item-icon-bg-danger);  color: var(--timeline-item-icon-fg-danger); }
+  :scope[variant="success"] [slot="icon"] { background: var(--timeline-item-icon-bg-success); color: var(--timeline-item-icon-fg-success); }
+  :scope[variant="accent"]  [slot="icon"] { background: var(--timeline-item-icon-bg-accent);  color: var(--timeline-item-icon-fg-accent); }
+  :scope[variant="warning"] [slot="icon"] { background: var(--timeline-item-icon-bg-warning); color: var(--timeline-item-icon-fg-warning); }
+  :scope[variant="danger"]  [slot="icon"] { background: var(--timeline-item-icon-bg-danger);  color: var(--timeline-item-icon-fg-danger); }
 
   /* Push connector line past the icon circle */
-  :scope:has(> [slot="icon"])::after {
+  :scope:has([slot="icon"])::after {
     top: calc((1.4em + var(--timeline-item-icon-size)) / 2 + 2px);
   }
 
   /* ═══════ Content slots ═══════ */
 
-  :scope > [slot="label"] {
+  :scope [slot="label"] {
     grid-column: content;
     grid-row: 1;
     font-weight: var(--timeline-item-label-weight);
@@ -276,11 +276,11 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     min-width: 0;
   }
 
-  :scope[status="completed"] > [slot="label"] {
+  :scope[status="completed"] [slot="label"] {
     color: var(--timeline-item-label-fg-muted);
   }
 
-  :scope > [slot="description"] {
+  :scope [slot="description"] {
     grid-column: content / -1;
     grid-row: 2;
     color: var(--timeline-item-desc-fg);
@@ -289,7 +289,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     margin-top: var(--a-space-0-5);
   }
 
-  :scope > [slot="time"] {
+  :scope [slot="time"] {
     grid-column: aside;
     grid-row: 1;
     color: var(--timeline-item-time-fg);
@@ -307,7 +307,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
 
   /* ═══════ Outcomes — nested sub-rows ═══════ */
 
-  :scope > [slot="outcomes"] {
+  :scope [slot="outcomes"] {
     grid-column: content / -1;
     grid-row: 3;
     margin: var(--a-space-1) 0 0 0;
@@ -322,16 +322,16 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     animation: tl-fade var(--timeline-item-duration) var(--timeline-item-easing);
   }
 
-  :scope > [slot="outcomes"][hidden] { display: none; }
+  :scope [slot="outcomes"][hidden] { display: none; }
 
-  :scope > [slot="outcomes"] > li {
+  :scope [slot="outcomes"] > li {
     position: relative;
     padding-left: var(--timeline-item-outcome-indent);
     overflow-wrap: break-word;
     min-width: 0;
   }
 
-  :scope > [slot="outcomes"] > li::before {
+  :scope [slot="outcomes"] > li::before {
     content: '';
     position: absolute;
     left: calc((var(--timeline-item-outcome-indent) - var(--timeline-item-subdot-size)) / 2);
@@ -373,7 +373,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
   }
 
   /* Reserve room so the time isn't overlapped by the chevron */
-  :scope:has(> [data-timeline-toggle]) > [slot="time"] {
+  :scope:has(> [data-timeline-toggle]) [slot="time"] {
     margin-inline-end: var(--timeline-item-toggle-time-margin);
   }
 
@@ -416,9 +416,9 @@ timeline-ui[orientation="horizontal"] > timeline-item-ui::after {
   height: var(--timeline-line-size, var(--timeline-line-size-default));
 }
 
-timeline-ui[orientation="horizontal"] > timeline-item-ui > [slot="label"],
-timeline-ui[orientation="horizontal"] > timeline-item-ui > [slot="description"],
-timeline-ui[orientation="horizontal"] > timeline-item-ui > [slot="time"] {
+timeline-ui[orientation="horizontal"] > timeline-item-ui [slot="label"],
+timeline-ui[orientation="horizontal"] > timeline-item-ui [slot="description"],
+timeline-ui[orientation="horizontal"] > timeline-item-ui [slot="time"] {
   grid-column: auto;
   grid-row: auto;
   margin-top: var(--a-space-1);