@adia-ai/web-components 0.6.37 → 0.6.39

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/select/select.yaml

@@ -220,6 +220,11 @@ slots:
     description: Popover container for options (role=listbox)
   trigger:
     description: Button that opens the listbox
+  hint:
+    description: >-
+      Override slot for hint markup richer than the plain [hint] attribute
+      string (inline links, code spans). Renders beneath the trigger at
+      body-subtle typography. Mutually exclusive with [hint].
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/slider/slider.a2ui.json

@@ -133,6 +133,12 @@
       "embed"
     ],
     "slots": {
+      "header": {
+        "description": "Wholesale override of the stamped label + value-readout header row. Use only when full custom-header markup is needed; otherwise prefer the granular `label` / `value` slots and the [label] attribute."
+      },
+      "hint": {
+        "description": "Override slot for hint markup richer than the plain [hint] attribute string (inline links, code spans). Renders beneath the slider at body-subtle typography. Mutually exclusive with [hint]."
+      },
       "input": {
         "description": "Native range input element"
       },

package/components/slider/slider.yaml

@@ -96,6 +96,16 @@ slots:
     description: Label element above the slider
   value:
     description: Current value display
+  header:
+    description: >-
+      Wholesale override of the stamped label + value-readout header row.
+      Use only when full custom-header markup is needed; otherwise prefer
+      the granular `label` / `value` slots and the [label] attribute.
+  hint:
+    description: >-
+      Override slot for hint markup richer than the plain [hint] attribute
+      string (inline links, code spans). Renders beneath the slider at
+      body-subtle typography. Mutually exclusive with [hint].
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/stat/stat.css

@@ -38,34 +38,38 @@
 
   /* ── Chart slot (inline sparkline) ──
      When an author adds <chart-ui slot="chart"> (or any sparkline-shape
-     child), the grid reflows so the chart occupies the right column
-     across the value + change rows, fixed to the stat's right edge.
-     Hero number and chart read as a single visual unit. */
+     child), the grid reflows so the chart sits in the value row and
+     ends at the value's baseline — hero number and chart read as one
+     visual unit, the chart "resting on" the value text. */
   :scope:has([slot="chart"]) {
     grid-template-columns: minmax(0, 1fr) minmax(5rem, 40%);
     grid-template-areas:
       "label  icon"
       "value  chart"
-      "change chart";
+      "change .";
     align-items: end;
   }
 
-  /* Cap the chart slot at a sparkline-appropriate size — otherwise the
-     chart's default aspect ratio stretches the row heights and bloats
-     the whole card. Consumers who want a taller inline chart can
-     override --stat-chart-max-height on the host. Uses `chart-ui[slot]`
-     compound selector to beat chart-ui's own `:scope { max-height: 28rem }`
-     (specificity 0,1,1 beats 0,0,1). `[slot="chart"]` alone is (0,1,0)
-     — enough on paper but empirically losing to chart-ui's own scope in
-     practice; the type selector makes it explicit. */
+  /* Chart cell — bottom-aligned to the value row's baseline; aspect
+     ratio 4:3 (width:height) keeps it readable as a small inline chart
+     rather than a thin sparkline rail. Consumers override via
+     --stat-chart-aspect. */
   [slot="chart"] {
     grid-area: chart;
-    align-self: center;
+    align-self: end;
     min-width: 0;
     width: 100%;
+    aspect-ratio: var(--stat-chart-aspect, 4 / 3);
   }
   chart-ui[slot="chart"] {
-    max-height: var(--stat-chart-max-height, 3rem);
+    height: 100%;
+  }
+
+  /* When chart is present, value must NOT span into the chart column
+     (its default `grid-column: 1 / -1` would overlap the chart cell and
+     misalign both). Confine it to col 1. */
+  :scope:has([slot="chart"]) [slot="value"] {
+    grid-column: 1;
   }
 
   /* ── Label (eyebrow) ── */

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

@@ -70,6 +70,9 @@
       "description": {
         "description": "Custom description content; falls through to `[description]` prop if not slotted."
       },
+      "icon": {
+        "description": "Override the step-status glyph with a custom slotted element. By default the step renders a numeral / check / x indicator based on [status]; slot an `<icon-ui>` or image to customize."
+      },
       "label": {
         "description": "Custom label content; falls through to `[text]` prop if not slotted."
       }

package/components/stepper/stepper-item.yaml

@@ -44,6 +44,11 @@ slots:
     description: Custom label content; falls through to `[text]` prop if not slotted.
   description:
     description: Custom description content; falls through to `[description]` prop if not slotted.
+  icon:
+    description: >-
+      Override the step-status glyph with a custom slotted element. By default
+      the step renders a numeral / check / x indicator based on [status];
+      slot an `<icon-ui>` or image to customize.
 
 keywords:
   - stepper-item

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

@@ -75,7 +75,14 @@
       "FeedItem",
       "Stepper"
     ],
-    "slots": {},
+    "slots": {
+      "description": {
+        "description": "Override slot for rich description markup (inline links, code spans, embedded badges). Renders beneath the primary text at body-subtle typography."
+      },
+      "icon": {
+        "description": "Override the [icon] glyph with a custom slotted element. Use for branded icons, avatars, or non-Phosphor sources. Mutually exclusive with the [icon] attribute."
+      }
+    },
     "states": [],
     "status": "stable",
     "synonyms": {

package/components/timeline/timeline-item.yaml

@@ -47,6 +47,18 @@ props:
     type: boolean
     default: false
 
+slots:
+  icon:
+    description: >-
+      Override the [icon] glyph with a custom slotted element. Use for
+      branded icons, avatars, or non-Phosphor sources. Mutually exclusive
+      with the [icon] attribute.
+  description:
+    description: >-
+      Override slot for rich description markup (inline links, code spans,
+      embedded badges). Renders beneath the primary text at body-subtle
+      typography.
+
 keywords:
   - timeline-item
   - timeline-row

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

package/components/tour/tour-step.a2ui.json

@@ -0,0 +1,92 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/TourStep.json",
+  "title": "TourStep",
+  "description": "Single step inside a `<tour-ui>` walkthrough. Declares a target\nelement (via CSS selector), a title, and body content. The host\n`<tour-ui>` reads these declaratively and renders them in the\npopover as the user advances through the tour.\n\n`<tour-step>` itself renders nothing — it's a data carrier (light\nDOM source of truth). The tour-ui orchestrator clones the body\ncontent into the spotlight popover when the step becomes active.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "title": {
+      "description": "Step heading rendered in the popover.",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "TourStep"
+    },
+    "placement": {
+      "description": "Preferred popover placement relative to the target. Same vocabulary\nas `core/anchor.js` (`top`, `bottom`, `left`, `right`,\n`bottom-start`, `bottom-end`, etc.). Auto-flips on viewport overflow\nvia position-try-fallbacks.\n",
+      "type": "string",
+      "enum": [
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end",
+        "left-start",
+        "left-end",
+        "right-start",
+        "right-end"
+      ],
+      "default": "bottom"
+    },
+    "target": {
+      "description": "CSS selector for the element to spotlight when this step is\nactive. Resolved via `document.querySelector(target)` at step\nactivation time. If the selector matches nothing, the spotlight\nfalls back to viewport-center and the popover anchors to the\npage (no halo cutout).\n",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "<tour-step target=\"#dashboard\">",
+        "why": "target is a CSS selector — bare \"dashboard\" doesn't match.",
+        "wrong": "<tour-step target=\"dashboard\">"
+      }
+    ],
+    "category": "feedback",
+    "composes": [],
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "tour-step",
+      "walkthrough-step",
+      "guided-step"
+    ],
+    "name": "UITourStep",
+    "related": [
+      "tour"
+    ],
+    "slots": {
+      "default": {
+        "description": "Body content rendered inside the step popover (plain text or inline HTML)."
+      }
+    },
+    "states": [],
+    "status": "stable",
+    "synonyms": {
+      "step": [
+        "tour-step",
+        "walkthrough-step"
+      ]
+    },
+    "tag": "tour-step-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/tour/tour-step.yaml

@@ -0,0 +1,84 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UITourStep
+tag: tour-step-ui
+status: stable
+component: TourStep
+category: feedback
+version: 1
+description: |
+  Single step inside a `<tour-ui>` walkthrough. Declares a target
+  element (via CSS selector), a title, and body content. The host
+  `<tour-ui>` reads these declaratively and renders them in the
+  popover as the user advances through the tour.
+
+  `<tour-step>` itself renders nothing — it's a data carrier (light
+  DOM source of truth). The tour-ui orchestrator clones the body
+  content into the spotlight popover when the step becomes active.
+props:
+  target:
+    description: |
+      CSS selector for the element to spotlight when this step is
+      active. Resolved via `document.querySelector(target)` at step
+      activation time. If the selector matches nothing, the spotlight
+      falls back to viewport-center and the popover anchors to the
+      page (no halo cutout).
+    type: string
+    default: ''
+    reflect: true
+  title:
+    description: Step heading rendered in the popover.
+    type: string
+    default: ''
+    reflect: true
+  placement:
+    description: |
+      Preferred popover placement relative to the target. Same vocabulary
+      as `core/anchor.js` (`top`, `bottom`, `left`, `right`,
+      `bottom-start`, `bottom-end`, etc.). Auto-flips on viewport overflow
+      via position-try-fallbacks.
+    type: string
+    default: bottom
+    enum:
+      - top
+      - bottom
+      - left
+      - right
+      - top-start
+      - top-end
+      - bottom-start
+      - bottom-end
+      - left-start
+      - left-end
+      - right-start
+      - right-end
+    reflect: true
+events: {}
+slots:
+  default:
+    description: 'Body content rendered inside the step popover (plain text or inline HTML).'
+states: []
+traits: []
+tokens: {}
+a2ui:
+  rules:
+    - rule: 'Single step inside <tour-ui>. Declares target (CSS selector) + title + body content.'
+      reason: 'Data carrier for tour-ui.'
+    - rule: 'target is a CSS selector (e.g. "#dashboard", ".filters button"), NOT a bare ID. Use the # prefix.'
+      reason: 'Selector contract.'
+    - rule: 'Renders nothing on its own — tour-ui orchestrates the popover stamping when the step becomes active.'
+      reason: 'Stamp-nothing wrapper.'
+anti_patterns:
+  - wrong: '<tour-step target="dashboard">'
+    why: 'target is a CSS selector — bare "dashboard" doesn''t match.'
+    fix: '<tour-step target="#dashboard">'
+examples: []
+keywords:
+  - tour-step
+  - walkthrough-step
+  - guided-step
+synonyms:
+  step:
+    - tour-step
+    - walkthrough-step
+related:
+  - tour

package/components/tour/tour.a2ui.json

@@ -0,0 +1,172 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Tour.json",
+  "title": "Tour",
+  "description": "Spotlight-driven product tour / guided walkthrough. Hosts a sequence\nof `<tour-step>` children, each targeting an element via CSS selector.\nWhen active, dims the page with a scrim, cuts a \"hole\" around the\ncurrent step's target, and renders a popover next to it with step\ncontent + Skip / Previous / Next navigation.\n\nUse for first-run onboarding tours, feature introductions after a\nrelease, and inline walkthroughs the user opts into (\"Take the tour\").\nDistinct from `<onboarding-checklist-ui>` (persistent todo-list of\nsetup steps the user works through at their own pace) and from\n`<tooltip-ui>` (single hover hint with no orchestration).\n\nArchitecture: tour-ui is a behavioral wrapper (`display: contents`)\nthat reads target / title / content from `<tour-step>` children. On\nstart, mounts a spotlight + popover surface into `document.body`\n(top-layer via Popover API). The spotlight is a transparent\nposition:fixed element with a huge box-shadow that produces the\ndimmed scrim outside its bounds (single-element backdrop, no clip-path\nor SVG mask needed). The popover is anchored to the target via the\nsame `core/anchor.js` pattern used by menu-ui / context-menu-ui /\npopover-ui.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "active": {
+      "description": "Whether the tour is currently running. Setting to `true` mounts\nthe spotlight + popover; setting to `false` tears down.\n",
+      "type": "boolean",
+      "default": false
+    },
+    "auto-start": {
+      "description": "Start the tour automatically when the element connects. Useful for\nfirst-run flows gated by a storage flag on the consumer side.\n",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Tour"
+    },
+    "step": {
+      "description": "Current step index (0-based). Setting this property advances the\ntour to that step (updating spotlight + popover position).\n",
+      "type": "number",
+      "default": 0
+    },
+    "storage-key": {
+      "description": "Optional localStorage key. When set, the tour records its\ncompletion state (`\"done\"`) to that key on finish/skip — and\nrefuses to auto-start on subsequent loads if the key is \"done\".\nUseful for \"show this tour once per user\" flows.\n",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "<tour-ui><tour-step target=\"#dashboard\" title=\"Dashboard\">Tour the dashboard…</tour-step>…</tour-ui>",
+        "why": "Bare divs have no target / title — tour-ui can't position the spotlight.",
+        "wrong": "<tour-ui><div>step 1 content</div><div>step 2 content</div></tour-ui>"
+      },
+      {
+        "fix": "<tour-step target=\"#dashboard\">",
+        "why": "target is a CSS selector — bare \"dashboard\" matches a <dashboard> element, NOT an id; use the # prefix.",
+        "wrong": "<tour-step target=\"dashboard\">"
+      }
+    ],
+    "category": "feedback",
+    "composes": [
+      "button-ui",
+      "tour-step-ui"
+    ],
+    "events": {
+      "tour-finish": {
+        "description": "Fired when the user completes the last step. detail = { totalSteps }. Bubbles."
+      },
+      "tour-skip": {
+        "description": "Fired when the user skips the tour mid-way. detail = { step, totalSteps }. Bubbles."
+      },
+      "tour-start": {
+        "description": "Fired when the tour starts (after spotlight + popover mount). detail = { step }. Bubbles."
+      },
+      "tour-step-change": {
+        "description": "Fired when the active step changes. detail = { from, to, totalSteps }. Bubbles."
+      }
+    },
+    "examples": [
+      {
+        "description": "A 3-step product tour anchored to selector-resolved elements.",
+        "a2ui": "[\n  { \"id\": \"tour\", \"component\": \"Tour\", \"auto-start\": true, \"children\": [\"s1\", \"s2\", \"s3\"] },\n  { \"id\": \"s1\", \"component\": \"TourStep\", \"target\": \"#dashboard\", \"title\": \"Your dashboard\", \"textContent\": \"Here's where you'll see your latest activity.\" },\n  { \"id\": \"s2\", \"component\": \"TourStep\", \"target\": \"#filters\", \"title\": \"Filters\", \"textContent\": \"Narrow results by status, owner, or date.\" },\n  { \"id\": \"s3\", \"component\": \"TourStep\", \"target\": \"#export\", \"title\": \"Export\", \"textContent\": \"Download a CSV of the current view.\" }\n]\n",
+        "name": "basic-tour"
+      }
+    ],
+    "keywords": [
+      "tour",
+      "product-tour",
+      "walkthrough",
+      "guided-tour",
+      "spotlight",
+      "coachmark",
+      "feature-introduction"
+    ],
+    "name": "UITour",
+    "related": [
+      "tooltip",
+      "popover",
+      "onboarding-checklist"
+    ],
+    "slots": {
+      "default": {
+        "description": "<tour-step> children — each declares target + title + body content."
+      }
+    },
+    "states": [
+      {
+        "description": "Tour is dormant; no scrim / popover rendered.",
+        "name": "idle"
+      },
+      {
+        "description": "Tour is running; scrim dims the page, current target is spotlighted.",
+        "name": "active"
+      },
+      {
+        "description": "Last step reached (Done is shown instead of Next).",
+        "name": "complete"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "spotlight": [
+        "coachmark",
+        "feature-highlight"
+      ],
+      "tour": [
+        "product-tour",
+        "guided-tour",
+        "walkthrough",
+        "feature-intro"
+      ]
+    },
+    "tag": "tour-ui",
+    "tokens": {
+      "--tour-popover-bg": {
+        "description": "Background of the step-content popover.",
+        "default": "var(--a-bg-subtle)"
+      },
+      "--tour-popover-border": {
+        "description": "Border color of the popover.",
+        "default": "var(--a-border-subtle)"
+      },
+      "--tour-popover-max-width": {
+        "description": "Maximum width of the popover.",
+        "default": "22rem"
+      },
+      "--tour-popover-min-width": {
+        "description": "Minimum width of the popover (so step text wraps reasonably).",
+        "default": "18rem"
+      },
+      "--tour-popover-radius": {
+        "description": "Border-radius of the popover.",
+        "default": "var(--a-radius-lg)"
+      },
+      "--tour-popover-shadow": {
+        "description": "Shadow of the popover.",
+        "default": "var(--a-shadow-lg)"
+      },
+      "--tour-scrim": {
+        "description": "Backdrop scrim color (everything outside the spotlight).",
+        "default": "var(--a-scrim-dialog)"
+      },
+      "--tour-spotlight-padding": {
+        "description": "Padding around the target bounding box (the spotlight's \"halo\").",
+        "default": "var(--a-space-2)"
+      },
+      "--tour-spotlight-radius": {
+        "description": "Border radius of the spotlight cutout.",
+        "default": "var(--a-radius-md)"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}