@adia-ai/web-components 0.6.37 → 0.6.39

package/components/list/list.css

@@ -126,19 +126,27 @@
     min-height: var(--a-space-6);
   }
 
-  :scope > [slot="icon"] {
+  /* Slot positioning uses descendant (not direct-child >) because the
+     template engine wraps `${...}` conditional renders in
+     <span style="display:contents"> housekeeping nodes — so slot="…"
+     children land as grandchildren in template-rendered hosts.
+     display:contents makes the wrapper layout-transparent (the grid
+     places the inner element), but CSS selectors still see the wrapper
+     as a real node. Descendant selectors handle both shapes (direct
+     authored children + template-engine-wrapped conditionals). */
+  :scope [slot="icon"] {
     grid-column: 1;
     grid-row: 1 / -1;
     align-self: center;
     color: var(--list-item-icon-color);
   }
 
-  :scope > [slot="text"] {
+  :scope [slot="text"] {
     grid-column: 2;
     grid-row: 1;
   }
 
-  :scope > [slot="description"] {
+  :scope [slot="description"] {
     grid-column: 2;
     grid-row: 2;
     color: var(--list-item-desc-color);
@@ -146,11 +154,33 @@
     line-height: 1.3;
   }
 
+  /* When a [slot="action"] child is present, the grid becomes 3-column:
+     icon | content | action. The :has() selector promotes the template
+     only when an action exists, so 2-column layouts stay unaffected.
+     Action is right-aligned + vertically centered (spans both content rows).
+     Used by onboarding-checklist-ui item rows + any consumer that needs an
+     end-aligned action button on a list-item row.
+     NOTE: NOT using `> [slot="action"]` (direct-child) — the template
+     engine wraps conditional `${...}` renders in <span style="display:
+     contents"> housekeeping nodes, so slot="action" lands as a grandchild
+     in template-rendered hosts. display:contents makes the wrapper a
+     transparent grid pass-through at layout time, but CSS selectors still
+     see it as a node. Descendant combinator handles both shapes. */
+  :scope:has([slot="action"]) {
+    grid-template-columns: auto 1fr auto;
+  }
+  :scope [slot="action"] {
+    grid-column: 3;
+    grid-row: 1 / -1;
+    align-self: center;
+    justify-self: end;
+  }
+
   /* Custom-content escape hatch — consumer authored a [slot="content"]
      child, the auto-stamp early-returned, and the consumer owns the
      full body. Span all columns so the consumer's layout isn't boxed
      into the content column. */
-  :scope > [slot="content"] {
+  :scope [slot="content"] {
     grid-column: 1 / -1;
   }
 
@@ -167,8 +197,8 @@
     box-shadow: inset 2px 0 0 var(--a-accent-strong);
   }
 
-  :scope[data-active] > [slot="icon"],
-  :scope[data-active] > [slot="description"] {
+  :scope[data-active] [slot="icon"],
+  :scope[data-active] [slot="description"] {
     color: var(--a-accent-strong);
   }
 }

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/mark/mark.a2ui.json

@@ -0,0 +1,109 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Mark.json",
+  "title": "Mark",
+  "description": "Highlighted inline text — token-driven theme-aware wrapper around the\nnative `<mark>` semantic. Use for search-result match highlighting,\ndiff additions in prose, \"new since last visit\" emphasis, and any\ninline text that needs a visual rail without changing its weight.\n\nDistinct from `<text-ui strong>` (semantic emphasis via weight) and\nfrom `<tag-ui>` (block-shaped pill chrome). mark-ui keeps the inline\ntext flow intact — same line-height, same baseline — just paints a\nbackground highlight behind the matched span.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Mark"
+    },
+    "variant": {
+      "description": "Highlight color variant. Default `warning` is the conventional yellow-marker tone.",
+      "type": "string",
+      "enum": [
+        "warning",
+        "info",
+        "success",
+        "danger",
+        "muted"
+      ],
+      "default": "warning"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "<mark-ui>matched</mark-ui> — same semantic role but theme-aware.",
+        "why": "Native <mark> uses UA default (yellow-on-white) that doesn't adapt to theme — invisible in dark mode + jarring in light mode.",
+        "wrong": "<mark>matched</mark>"
+      }
+    ],
+    "category": "typography",
+    "composes": [],
+    "events": {},
+    "examples": [
+      {
+        "description": "Highlight the search query within a result title.",
+        "a2ui": "[\n  { \"id\": \"row\", \"component\": \"Row\", \"children\": [\"pre\", \"mk\", \"post\"] },\n  { \"id\": \"pre\", \"component\": \"Text\", \"textContent\": \"Quarterly \" },\n  { \"id\": \"mk\",  \"component\": \"Mark\", \"textContent\": \"revenue\" },\n  { \"id\": \"post\", \"component\": \"Text\", \"textContent\": \" report — Q4 2025\" }\n]\n",
+        "name": "search-match"
+      }
+    ],
+    "keywords": [
+      "mark",
+      "highlight",
+      "search-match",
+      "emphasis"
+    ],
+    "name": "UIMark",
+    "related": [
+      "text",
+      "tag"
+    ],
+    "slots": {
+      "default": {
+        "description": "The text content to highlight (plain text or inline elements)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default — highlighted background painted behind the slotted text.",
+        "name": "idle"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "highlight": [
+        "mark",
+        "emphasis"
+      ],
+      "search-match": [
+        "mark",
+        "highlight"
+      ]
+    },
+    "tag": "mark-ui",
+    "tokens": {
+      "--mark-bg": {
+        "description": "Background color of the highlight.",
+        "default": "var(--a-warning-muted)"
+      },
+      "--mark-fg": {
+        "description": "Foreground (text) color inside the highlight.",
+        "default": "var(--a-warning-text)"
+      },
+      "--mark-px": {
+        "description": "Horizontal padding around the highlighted text.",
+        "default": "var(--a-space-0-5)"
+      },
+      "--mark-radius": {
+        "description": "Border radius of the highlight box.",
+        "default": "var(--a-radius-xs)"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/mark/mark.class.js

@@ -0,0 +1,22 @@
+/**
+ * `<mark-ui>` — token-driven inline text highlight (search-match,
+ * "new since", diff prose). Theme-aware wrapper around the native
+ * `<mark>` semantic role. Pure CSS atom — no template, no JS behavior.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIMark extends UIElement {
+  static properties = {
+    variant: { type: String, default: 'warning', reflect: true }, // warning | info | success | danger | muted
+  };
+
+  static template = () => null;
+
+  connected() {
+    super.connected();
+    // Inherit the <mark> role for screen readers — "highlighted" / "marked"
+    // is the conventional AT announcement for search matches.
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'mark');
+  }
+}

package/components/mark/mark.css

@@ -0,0 +1,39 @@
+@scope (mark-ui) {
+  :where(:scope) {
+    --mark-bg-default:     var(--a-warning-muted);
+    --mark-fg-default:     var(--a-warning-text);
+    --mark-px-default:     var(--a-space-0-5);
+    --mark-radius-default: var(--a-radius-xs);
+  }
+
+  :scope {
+    /* Inline so it sits in normal text flow without breaking baselines.
+       Padding-inline only — vertical padding would push line-height. */
+    display: inline;
+    box-sizing: border-box;
+    padding-inline: var(--mark-px, var(--mark-px-default));
+    background: var(--mark-bg, var(--mark-bg-default));
+    color: var(--mark-fg, var(--mark-fg-default));
+    border-radius: var(--mark-radius, var(--mark-radius-default));
+    /* Preserve text decoration from ancestors (e.g. link underlines) */
+    text-decoration: inherit;
+  }
+
+  /* Variants — same role × state pair as alert-ui / tag-ui */
+  :scope[variant="info"] {
+    --mark-bg-default: var(--a-info-muted);
+    --mark-fg-default: var(--a-info-text);
+  }
+  :scope[variant="success"] {
+    --mark-bg-default: var(--a-success-muted);
+    --mark-fg-default: var(--a-success-text);
+  }
+  :scope[variant="danger"] {
+    --mark-bg-default: var(--a-danger-muted);
+    --mark-fg-default: var(--a-danger-text);
+  }
+  :scope[variant="muted"] {
+    --mark-bg-default: var(--a-bg-muted);
+    --mark-fg-default: var(--a-fg);
+  }
+}

package/components/mark/mark.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `<mark-ui>` — Highlighted inline text — token-driven theme-aware wrapper around the
+native `<mark>` semantic. Use for search-result match highlighting,
+diff additions in prose, "new since last visit" emphasis, and any
+inline text that needs a visual rail without changing its weight.
+
+Distinct from `<text-ui strong>` (semantic emphasis via weight) and
+from `<tag-ui>` (block-shaped pill chrome). mark-ui keeps the inline
+text flow intact — same line-height, same baseline — just paints a
+background highlight behind the matched span.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/mark
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIMark extends UIElement {
+  /** Highlight color variant. Default `warning` is the conventional yellow-marker tone. */
+  variant: 'warning' | 'info' | 'success' | 'danger' | 'muted';
+}

package/components/mark/mark.js

@@ -0,0 +1,12 @@
+/**
+ * `<mark-ui>` — auto-registers the tag on import.
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIMark } from './mark.class.js';
+
+defineIfFree('mark-ui', UIMark);
+
+export { UIMark };

package/components/mark/mark.yaml

@@ -0,0 +1,87 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIMark
+tag: mark-ui
+status: stable
+component: Mark
+category: typography
+version: 1
+description: |
+  Highlighted inline text — token-driven theme-aware wrapper around the
+  native `<mark>` semantic. Use for search-result match highlighting,
+  diff additions in prose, "new since last visit" emphasis, and any
+  inline text that needs a visual rail without changing its weight.
+
+  Distinct from `<text-ui strong>` (semantic emphasis via weight) and
+  from `<tag-ui>` (block-shaped pill chrome). mark-ui keeps the inline
+  text flow intact — same line-height, same baseline — just paints a
+  background highlight behind the matched span.
+props:
+  variant:
+    description: Highlight color variant. Default `warning` is the conventional yellow-marker tone.
+    type: string
+    default: warning
+    enum:
+      - warning
+      - info
+      - success
+      - danger
+      - muted
+    reflect: true
+events: {}
+slots:
+  default:
+    description: The text content to highlight (plain text or inline elements).
+states:
+  - name: idle
+    description: Default — highlighted background painted behind the slotted text.
+traits: []
+tokens:
+  --mark-bg:
+    description: Background color of the highlight.
+    default: var(--a-warning-muted)
+  --mark-fg:
+    description: Foreground (text) color inside the highlight.
+    default: var(--a-warning-text)
+  --mark-px:
+    description: Horizontal padding around the highlighted text.
+    default: var(--a-space-0-5)
+  --mark-radius:
+    description: Border radius of the highlight box.
+    default: var(--a-radius-xs)
+a2ui:
+  rules:
+    - rule: 'Use mark-ui for search-result match highlighting — wrap the matched substring in <mark-ui> within the surrounding text. Inline; preserves text flow.'
+      reason: 'Search-result highlight pattern.'
+    - rule: 'variant=warning (default) is the conventional yellow-marker tone; info for brand-color highlights; success for "new since" / "added" emphasis; danger for "removed" / "deleted-line" in diff prose.'
+      reason: 'Semantic variant vocabulary.'
+    - rule: 'Distinct from <text-ui strong> (weight emphasis), <tag-ui> (block pill), <code-ui> (monospace). mark-ui is specifically the "visual rail behind matched text" use case.'
+      reason: 'Sibling-component boundary.'
+anti_patterns:
+  - wrong: '<mark>matched</mark>'
+    why: 'Native <mark> uses UA default (yellow-on-white) that doesn''t adapt to theme — invisible in dark mode + jarring in light mode.'
+    fix: '<mark-ui>matched</mark-ui> — same semantic role but theme-aware.'
+examples:
+  - name: search-match
+    description: Highlight the search query within a result title.
+    a2ui: |
+      [
+        { "id": "row", "component": "Row", "children": ["pre", "mk", "post"] },
+        { "id": "pre", "component": "Text", "textContent": "Quarterly " },
+        { "id": "mk",  "component": "Mark", "textContent": "revenue" },
+        { "id": "post", "component": "Text", "textContent": " report — Q4 2025" }
+      ]
+keywords:
+  - mark
+  - highlight
+  - search-match
+  - emphasis
+synonyms:
+  highlight:
+    - mark
+    - emphasis
+  search-match:
+    - mark
+    - highlight
+related:
+  - text
+  - tag

package/components/modal/modal.a2ui.json

@@ -76,6 +76,15 @@
     "slots": {
       "default": {
         "description": "Content placed inside the modal surface. Accepts any elements (card-ui, command-ui, custom markup)."
+      },
+      "body": {
+        "description": "Main body region for prose, forms, or arbitrary content. Sits between header and footer; scrolls when content overflows."
+      },
+      "footer": {
+        "description": "Optional footer region rendered below the body, typically for action buttons. Author-fills with Confirm / Cancel buttons or similar trailing affordances."
+      },
+      "header": {
+        "description": "Optional header region rendered above the body. Author-fillable with title + supporting markup. CSS positions it at the top of the modal surface with consistent padding + the dismiss-close affordance."
       }
     },
     "states": [

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

@@ -45,6 +45,20 @@ events:
 slots:
   default:
     description: Content placed inside the modal surface. Accepts any elements (card-ui, command-ui, custom markup).
+  header:
+    description: >-
+      Optional header region rendered above the body. Author-fillable with
+      title + supporting markup. CSS positions it at the top of the modal
+      surface with consistent padding + the dismiss-close affordance.
+  body:
+    description: >-
+      Main body region for prose, forms, or arbitrary content. Sits between
+      header and footer; scrolls when content overflows.
+  footer:
+    description: >-
+      Optional footer region rendered below the body, typically for action
+      buttons. Author-fills with Confirm / Cancel buttons or similar trailing
+      affordances.
 states:
 - name: idle
   description: Default, ready for interaction.

package/components/nav-group/nav-group.a2ui.json

@@ -98,6 +98,9 @@
       },
       "header": {
         "description": "Optional custom header. Auto-generated when missing."
+      },
+      "icon": {
+        "description": "Override the leading [icon] glyph in the auto-generated header with a custom slotted element. Mutually exclusive with the [icon] attribute."
       }
     },
     "states": [

package/components/nav-group/nav-group.yaml

@@ -63,6 +63,11 @@ slots:
     description: "Children — typically <nav-item-ui> rows."
   header:
     description: "Optional custom header. Auto-generated when missing."
+  icon:
+    description: >-
+      Override the leading [icon] glyph in the auto-generated header
+      with a custom slotted element. Mutually exclusive with the [icon]
+      attribute.
 
 states:
   - name: closed

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

@@ -105,6 +105,9 @@
     "slots": {
       "default": {
         "description": "Optional override of the default icon + text + badge stamping."
+      },
+      "icon": {
+        "description": "Override the leading [icon] glyph with a custom slotted element (custom icon-ui, image, avatar). Mutually exclusive with the [icon] attribute — slot child wins."
       }
     },
     "states": [

package/components/nav-item/nav-item.yaml

@@ -68,6 +68,11 @@ events:
 slots:
   default:
     description: "Optional override of the default icon + text + badge stamping."
+  icon:
+    description: >-
+      Override the leading [icon] glyph with a custom slotted element
+      (custom icon-ui, image, avatar). Mutually exclusive with the
+      [icon] attribute — slot child wins.
 
 states:
   - name: idle

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/segmented/segmented.class.js

@@ -152,9 +152,17 @@ export class UISegmented extends UIFormElement {
       return;
     }
 
-    // Lazy-create indicator (prepend so it's behind segments in paint order)
-    const isNew = !this.#indicator;
+    // Indicator — there must be EXACTLY ONE [data-indicator] child at all
+    // times. If the instance ref is missing OR detached, strip every stale
+    // indicator from the DOM (defensive: re-renders after disconnect/
+    // reconnect cycles, HMR, or stamp() can leave the field nulled while
+    // the previous indicator span persists in DOM → multiple translateX'd
+    // pills paint simultaneously). Then create a fresh one.
+    const isNew = !this.#indicator || !this.contains(this.#indicator);
     if (isNew) {
+      for (const stale of this.querySelectorAll(':scope > [data-indicator]')) {
+        stale.remove();
+      }
       this.#indicator = document.createElement('span');
       this.#indicator.setAttribute('data-indicator', '');
       this.prepend(this.#indicator);

package/components/select/select.a2ui.json

@@ -220,6 +220,9 @@
       "upload"
     ],
     "slots": {
+      "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]."
+      },
       "label": {
         "description": "Label element above the trigger"
       },