@aceshooting/lyra-ui 5.0.0 → 5.1.0

package/custom-elements.json

@@ -46,6 +46,10 @@
               "description": "The clickable header (`<button>`).",
               "name": "header"
             },
+            {
+              "description": "The header's title text — `label`, or its localized default when `label` is left at `'Activity'`.",
+              "name": "label"
+            },
             {
               "description": "The decorative mode indicator dot; pulses while `mode=\"live\"`.",
               "name": "status-dot"
@@ -705,6 +709,13 @@
           "kind": "class",
           "description": "`<lr-agent-run>` — the top-level shell for one `AgentRun`: lifecycle-status badge, elapsed\ntime, current step, model/cost summary, and built-in Cancel/Retry controls in a header, plus\nfour named composition slots (`tasks`/`tools`/`reasoning`/`output`) for the run's actual\ncontent. This is deliberately a SHELL, not a new step-rendering surface — every piece of\nper-step or per-invocation rendering routes through an existing primitive:\n\n- **Elapsed time**: composes `<lr-generation-status>` (`active`/`started-at`, its own built-in\n  Stop button hidden via `show-stop=\"false\"` since this component renders its own Cancel/Retry\n  pair instead) for the *live, ticking* readout while the run is genuinely in progress\n  (`running`/`collecting`/`waiting-input`/`waiting-approval`). `<lr-stream-status>` doesn't fit:\n  its `phase` vocabulary\n  (`idle`/`connecting`/`streaming`/`stalled`) models transport/connection health, not an agent\n  run's nine built-in lifecycle statuses (plus application-defined extensions), and it exposes no elapsed-time readout at all — exactly the\n  distinction `<lr-generation-status>`'s own class doc already draws between the two. Once the\n  run reaches a terminal state (`done`/`error`/`cancelled`) with both a `startedAt` and an\n  `endedAt`, this component instead renders a small locally-formatted static duration\n  (`endedAt - startedAt`): `<lr-generation-status>`'s freeze-on-`active=false` semantics only\n  ever freeze at whatever it last computed *live*, so mounting it directly against a completed\n  run loaded from history (e.g. `startedAt` yesterday, `endedAt` five minutes later, loaded\n  today) would either show a stale zero or the wrong multi-hour span — it has no way to render a\n  fixed historical span on demand. That static fallback reuses the same small `formatDuration()`\n  algorithm `<lr-usage-badge>` and `<lr-tool-call-chip>` already duplicate locally for the same\n  reason (see this file's own copy).\n- **Model + cost summary**: composes `<lr-usage-badge>`, fed `run.costEstimate` (formatted via\n  `formatCost`, or a plain `Intl.NumberFormat` by default — this library never assumes a\n  currency, see `<lr-format-number>`'s own explicit `currency` prop) as its `cost-text`.\n  `run.model` (a plain string with no analogous `<lr-usage-badge>` property) renders alongside\n  as plain text.\n- **Current step**: a single-line summary of whichever `run.steps` entry currently has\n  `status.kind === 'running'` (the last such entry, if more than one) — a plain text line, not a\n  list, so it doesn't duplicate `<lr-task-list>`'s own per-item rendering.\n- **Tasks slot default content**: when the host doesn't slot anything into `tasks` and\n  `run.steps` is non-empty, this component's own `<slot>` fallback renders a `<lr-task-list>`\n  populated by mapping every `AgentStep` to a `TaskItem` (see `toTaskItem()`) — a plain data\n  adapter between the two existing shapes, not new rendering.\n- **Status badge**: composes `<lr-badge>`. **Empty state**: composes `<lr-empty>` when `run` is\n  `null`.\n\n`tools`/`reasoning`/`output` are plain named slots with no default content — entirely the\nhost's own composition (typically `<lr-tool-call-chip>`/`<lr-tool-result-view>` rows,\nreasoning/streaming text, and final output respectively). An `actions` slot adds extra header\ncontrols alongside the built-in Cancel/Retry pair. The `header` and `summary` slots replace the\nbuilt-in lifecycle header and model/usage/metrics summary respectively. `statusLabels` and\n`statusVariants` make application-defined lifecycle kinds first-class, while `metrics` renders\narbitrary labeled values such as prompt and completion token counts.\n\nThe built-in Cancel button renders while `showCancel` is true and the run's status is one of\n`TICKING_KINDS` (still genuinely in progress); Retry renders while `showRetry` is true and the\nstatus is `error` or `cancelled`. Clicking either fires `lr-cancel`/`lr-retry` with\n`CancelEventDetail`/`RetryEventDetail` from `src/ai/types.ts` — this component never cancels or\nretries anything itself, it only requests. `RetryEventDetail.attempt` is a 1-based counter\nlocal to this component, incremented on every `lr-retry` click and reset to `0` whenever\n`run.id` changes (a genuinely new run replacing the old one, as opposed to the same run's status\nmerely updating in place).\n\nLifecycle transitions into an attention-needing or terminal state (`waiting-input`,\n`waiting-approval`, `done`, `error`, `cancelled`) are announced through an internal\n`<lr-live-region>`, mirroring `<lr-stream-status>`'s own stall/recover announcements —\n`running`/`idle` transitions are frequent and not independently actionable, so they stay\nsilent, and whatever status a freshly-assigned `run` (a new `run.id`) happens to already carry\nis never itself treated as an eventful transition, only a later in-place change is.",
           "name": "LyraAgentRun",
+          "cssProperties": [
+            {
+              "description": "Current-step icon spin animation duration and timing.",
+              "name": "--lr-agent-run-spin",
+              "default": "1s linear"
+            }
+          ],
           "cssParts": [
             {
               "description": "Wrapper around the `actions` slot and the built-in Cancel/Retry buttons.",
@@ -4033,6 +4044,13 @@
           "kind": "class",
           "description": "`<lr-compare-panel>` — side-by-side A/B output comparison with a winner\nvote (LMSYS-arena / LangSmith-pairwise style): two slotted panes, a vote\nbar, synchronized reading.",
           "name": "LyraComparePanel",
+          "cssProperties": [
+            {
+              "description": "Cap on how tall each pane's scroll region grows before it scrolls internally.",
+              "name": "--lr-compare-panel-max-height",
+              "default": "var(--lr-size-24rem)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The outer wrapper.",
@@ -9997,6 +10015,18 @@
           "kind": "class",
           "description": "`<lr-stack-trace>` — parses common V8/JS-TS, Firefox/Safari, and Python stack traces into a\nleading message plus activatable frames, splitting chained/caused-by errors into separate\ngroups. Frames matching `internalPatterns` (`node_modules/`, `node:internal`,\n`site-packages/`, ... by default) fold behind a count-labeled toggle. Falls back to verbatim\nraw text when nothing parses. First-party invention (no Web Awesome equivalent).",
           "name": "LyraStackTrace",
+          "cssProperties": [
+            {
+              "description": "Cap on how tall `[part=\"base\"]` grows before it scrolls internally. `none` lets the component grow with its content; the `max-height` attribute sets this token.",
+              "name": "--lr-stack-trace-max-height",
+              "default": "none"
+            },
+            {
+              "description": "Font family for the parsed frames and the verbatim raw fallback.",
+              "name": "--lr-stack-trace-font",
+              "default": "var(--lr-font-mono)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The root wrapper; respects `max-height`.",
@@ -11193,6 +11223,13 @@
           "kind": "class",
           "description": "`<lr-terminal>` — read-only ANSI console for streamed agent/tool output. Not a PTY: no\nstdin/keystroke handling, no cursor-addressed full-screen apps.",
           "name": "LyraTerminal",
+          "cssProperties": [
+            {
+              "description": "Block size of `[part=\"viewport\"]`, the scrollable log region. Not declared on `:host`, so it is inherited — set it on the host or any ancestor.",
+              "name": "--lr-terminal-height",
+              "default": "var(--lr-size-20rem)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The visually-hidden `role=\"status\"` region used when `announce-output` is set.",
@@ -12915,6 +12952,13 @@
           "kind": "class",
           "description": "`<lr-thinking-panel>` — a collapsible panel for an AI agent's\nintermediate reasoning/\"thinking\" transcript, kept visually and\nsemantically distinct from its final response. Same collapsible\nheader-button-plus-region shape as `<lr-source-list>`; the default slot\nis entirely free-form (a consumer-composed `<lr-streaming-text>`,\n`<lr-markdown>`, or plain text) — this component has no dependency on\neither and imposes no structure on what's slotted.\n\n`mode` (`'live'` while reasoning is actively streaming in, `'post-hoc'`\nonce it's complete and being reviewed after the fact) drives two concrete\nbehavior differences, not just a styling hook:\n- **Header hint.** While `duration-ms` is unset, `'live'` shows a pulsing\n  \"Thinking…\" placeholder in `[part=\"duration\"]`; `'post-hoc'` shows\n  nothing there instead (a finished review with no known duration has\n  nothing useful to say in that slot). Once `duration-ms` is set, both\n  modes show the same static `\"Thought for …\"` text — a `'post-hoc'`\n  consumer that captured a duration is free to supply it too.\n- **Auto-scroll.** Only `'live'` mode auto-follows new content appended to\n  the default slot while `expanded` (see below); `'post-hoc'` never\n  scrolls on its own, since reviewing finished reasoning is expected to\n  start from the top like reading any other completed document. This\n  library otherwise defaults to *not* editorializing about a host's data\n  (see `<lr-empty>`'s plain-`description` stance), but scroll position\n  is presentation, not data, so this one behavior difference earns its\n  keep rather than being left as a bare visual/semantic hint the host\n  would have to reimplement identically itself.\n\nLive-mode auto-scroll (\"stick to bottom\") is the classic chat-transcript\nconvention: while `mode=\"live\"` and `expanded`, new content keeps the\npanel scrolled to its latest line — *unless* the user has manually\nscrolled up to (re-)read earlier content, in which case their position is\nnever yanked away from them. This is tracked continuously via a `scroll`\nlistener on `[part=\"body\"]` (not recomputed from the mutation itself,\nwhich necessarily observes the DOM only *after* it has already changed):\nevery user-driven scroll records whether the body was left within\n`NEAR_BOTTOM_PX` of its own max scroll position, and only a mutation that\narrives while that's still true triggers a follow-up scroll-to-bottom.\nOpening an already-`'live'` panel (or one that later becomes `'live'`)\nalways resets this to \"anchored\" and jumps to the latest content, the same\nway a chat app's own transcript does when you re-open it.\n\nNew content is detected via a `MutationObserver` on this element's own\nlight DOM (`childList`+`subtree`+`characterData`) rather than the default\nslot's `slotchange` event, because `slotchange` only fires when the set of\ntop-level assigned nodes changes — never for a text node mutating *inside*\nan already-slotted element, which is the more likely shape for streamed\nreasoning (a consumer appending chunks to an existing node's `textContent`\nrather than re-slotting a whole new element per token). The one thing this\ncan't see is a mutation entirely inside a slotted custom element's own\nshadow root (e.g. a `<lr-markdown>` re-rendering its shadow tree after a\n`content` property change) — Shadow DOM encapsulation blocks that by\ndesign, and there is no way for this component to reach across that\nboundary. A slotted element whose *own* internal updates should drive this\npanel's auto-scroll needs to append/mutate visible light-DOM text itself\n(as `<lr-streaming-text>` is expected to), or the host can call this\npanel's own `scrollToBottom()` directly.\n\n`aria-controls` linking the header to the body region uses `nextId()`\n(`../../internal/a11y.js`) for a collision-safe id, the same convention\n`<lr-source-list>` and `<lr-widget>` already establish for every\ntoggle-controls-region pairing in this library.",
           "name": "LyraThinkingPanel",
+          "cssProperties": [
+            {
+              "description": "Cap on how tall the expanded reasoning transcript grows before `[part=\"body\"]` scrolls internally.",
+              "name": "--lr-thinking-panel-max-block-size",
+              "default": "var(--lr-size-16rem)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The outer container.",
@@ -13456,6 +13500,18 @@
           "kind": "class",
           "description": "`<lr-tool-approval-dialog>` — a human-in-the-loop gate: presents one\nproposed tool/function call (`toolName` + `args`) and blocks an agent from\nexecuting it until a person explicitly approves or denies it, with an\noptional inline \"edit the arguments before approving\" step.\n\nThis renders its own dialog panel rather than nesting a `<lr-dialog>` in\nits shadow template. Shared overlay infrastructure coordinates stacking,\nfocus trapping, Escape/backdrop dismissal, and focus return with every\nother overlay in the same document.\n\nApprove/Deny/Edit are built-in chrome (not a `footer` slot a consumer must\nassemble) — this component's interaction shape is fixed enough (there is\nexactly one correct set of actions for \"approve this call\") that requiring\nevery consumer to re-build it would just be boilerplate. A `footer` slot is\nstill offered for *supplementary* content a consumer wants alongside those\nbuttons (e.g. a \"remember this choice for this tool\" checkbox) — its\ncontent renders to the start of the action row, before Deny/Edit/Approve.\n\nEditing: while `editable`, an Edit button swaps the read-only\n`<lr-json-viewer>` for a plain `<textarea>` pre-filled with\n`JSON.stringify(args, null, 2)`. Every keystroke is re-validated with\n`JSON.parse` — the Approve button is `disabled` for as long as the current\ntextarea content fails to parse, so a malformed edit can never be silently\napproved as either the broken text or a stale copy of the original args.\nThe editor defaults to `spellcheck=\"false\"`, `autocapitalize=\"off\"`,\n`autocorrect=\"off\"`, and `autocomplete=\"off\"` because its content is raw\nJSON, never prose. The corresponding native editing properties remain\nconfigurable for integrations that need different browser behavior.\nThe same button relabels to \"Cancel\" while editing; clicking it discards\nthe draft entirely and returns to the read-only view of the *original*\n`args` — there is no separate \"save\" step independent of Approve itself.\nBoth `editing` and any in-progress draft reset back to the read-only view\nevery time the dialog transitions from closed to open, so a reused\ninstance never leaks one proposal's half-finished edit into the next.\n`editable` flipping to `false` mid-edit does the same (see `willUpdate()`)\nand, if the textarea it unmounts still held focus, `updated()` refocuses\nDeny so the focus trap keeps engaging instead of silently letting focus\nfall through to the document.\n\nInitial focus deliberately does *not* land on Approve:\napproving a tool call is a consequential, potentially irreversible action,\nso a user who opens this dialog and reflexively presses Enter/Space before\nreading anything should deny, not approve. Deny gets the initial focus\ninstead — the same \"focus the safe action\" convention a native destructive-\nconfirmation dialog (delete, discard, etc.) typically follows for its own\nCancel button — rather than the inert dialog panel, which would need an\nextra Tab press before *any* action is reachable at all.",
           "name": "LyraToolApprovalDialog",
+          "cssProperties": [
+            {
+              "description": "Backdrop scrim color.",
+              "name": "--lr-tool-approval-dialog-overlay-color",
+              "default": "var(--lr-color-overlay)"
+            },
+            {
+              "description": "Font family for the tool name and the raw-JSON args editor.",
+              "name": "--lr-tool-approval-dialog-mono-font",
+              "default": "var(--lr-font-mono)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The built-in Approve button — `disabled` while an in-progress edit is invalid JSON.",
@@ -14208,6 +14264,21 @@
               "description": "Pending-icon pulse duration and timing.",
               "name": "--lr-transition-ambient",
               "default": "1.8s ease-in-out"
+            },
+            {
+              "description": "Per-status accent color for the status glyph and status text. Reassigned by this component's own `:host([status=\"…\"])` rules (`running` → brand, `success` → success, `error` → danger, `denied` → warning), so a page-level override only wins for the default/`pending` tone.",
+              "name": "--lr-tool-call-chip-accent",
+              "default": "var(--lr-color-text-quiet)"
+            },
+            {
+              "description": "Per-status chip background. Reassigned by the same `:host([status=\"…\"])` rules (each status's `-quiet` tint).",
+              "name": "--lr-tool-call-chip-bg",
+              "default": "var(--lr-color-surface)"
+            },
+            {
+              "description": "Per-status chip border color. Reassigned by the same `:host([status=\"…\"])` rules (`transparent` for every non-`pending` status).",
+              "name": "--lr-tool-call-chip-border",
+              "default": "var(--lr-color-border)"
             }
           ],
           "cssParts": [
@@ -16768,6 +16839,13 @@
           "kind": "class",
           "description": "`<lr-tool-result-view>` — renders a tool call's result via whichever\ncustom renderer a host app has registered for it (see `registerToolRenderer()`\nin `registry.ts`), falling back to `<lr-json-viewer>` whenever no\nrenderer matches, a candidate renderer's `matches()` predicate throws during\ndispatch, a renderer's optional `load()` rejects, or its `render()` throws.\nThis component owns none of the actual visual weight of a\npopulated tool result — that's entirely whatever the registered renderer\nreturns; this is just the dispatch + fallback + loading-state shell.\n\nDispatch runs against `registry` when set, otherwise against the\nmodule-level default registry `registerToolRenderer()` writes to — see\n`findToolRenderer()`'s two-step (exact name, then shape-based `matches()`)\nlookup order for the full rule.\n\n`fallback` implements two kinds: `\"json\"` (the default, an unconditional `<lr-json-viewer>`)\nand `\"text\"`, which renders a *string* `result` as preformatted text instead — falling back to\nthe `\"json\"` behavior when `result` isn't a string, so setting `fallback=\"text\"` defensively\nagainst an unpredictable result shape never renders broken output. `copyable` adds a\ncopy-to-clipboard affordance to either fallback kind (forwarded to `<lr-json-viewer>`'s own\n`copyable` for `\"json\"`; a `<lr-copy-button>` alongside the text for `\"text\"`).",
           "name": "LyraToolResultView",
+          "cssProperties": [
+            {
+              "description": "Font family for the `fallback=\"text\"` preformatted output.",
+              "name": "--lr-tool-result-view-font",
+              "default": "var(--lr-font-mono)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The root wrapper around the resolved renderer's output (or the loading/fallback view).",
@@ -17305,6 +17383,13 @@
           "kind": "class",
           "description": "`<lr-tool-select-dialog>` — a category-grouped, filterable, searchable\ntool-enablement dialog for picking which agent tools are available in a\nconversation.\n\nThis renders its own dialog panel rather than nesting a `<lr-dialog>` in\nits shadow template. Shared overlay infrastructure coordinates stacking,\nfocus trapping, Escape/backdrop dismissal, and focus return with every\nother overlay in the same document.\n\n`useDefaults` is a single top-level switch: while `true`, every per-tool\ncheckbox below renders disabled (still reflecting whatever `selected`\nholds — a consumer should populate that with its own default tool set\nwhenever `useDefaults` is true) and a hint explains that turning the\nswitch off is how to customize. Turning it off is the \"customize\"\naffordance — it's the only thing that both flips `useDefaults` to `false`\n*and* unlocks the per-tool checkboxes for editing, so there's exactly one\ncontrol for that transition rather than a separate button duplicating it.\n\nThere is no built-in footer/close button — like `<lr-dialog>`, dismissal\nhappens via Escape, a backdrop click, or a consumer's own `footer`-slotted\naction calling `close()`. This also means the search input is the very\nfirst focusable element in the panel with no special-casing needed, so\nit's what receives focus on open (see `updated()`).",
           "name": "LyraToolSelectDialog",
+          "cssProperties": [
+            {
+              "description": "Backdrop scrim color.",
+              "name": "--lr-tool-select-dialog-overlay-color",
+              "default": "var(--lr-color-overlay)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The full-viewport scrim behind the panel.",
@@ -18202,6 +18287,11 @@
               "description": "Vertical gap between entries.",
               "name": "--lr-tool-timeline-gap",
               "default": "var(--lr-space-l)"
+            },
+            {
+              "description": "Diameter of an entry's rail dot; also the width of the marker gutter column.",
+              "name": "--lr-tool-timeline-marker-size",
+              "default": "var(--lr-size-0-625rem)"
             }
           ],
           "cssParts": [
@@ -20775,6 +20865,62 @@
               }
             }
           ],
+          "cssProperties": [
+            {
+              "description": "The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.",
+              "name": "--lr-chart-height",
+              "default": "var(--lr-size-280px)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).",
+              "name": "--lr-chart-grid-color",
+              "default": "var(--lr-color-border)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tick-color",
+              "default": "var(--lr-color-text-quiet)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Legend label color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-legend-color",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip background color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-bg",
+              "default": "var(--lr-color-surface)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip text color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-text",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "accessible-description",
@@ -22946,6 +23092,62 @@
               }
             }
           ],
+          "cssProperties": [
+            {
+              "description": "The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.",
+              "name": "--lr-chart-height",
+              "default": "var(--lr-size-280px)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).",
+              "name": "--lr-chart-grid-color",
+              "default": "var(--lr-color-border)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tick-color",
+              "default": "var(--lr-color-text-quiet)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Legend label color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-legend-color",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip background color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-bg",
+              "default": "var(--lr-color-surface)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip text color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-text",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "accessible-description",
@@ -23300,6 +23502,38 @@
           "kind": "class",
           "description": "`<lr-chart>` — the core Chart.js wrapper every other `lr-*-chart` tag\nsubclasses. Requires the optional peer deps `chart.js` + `chartjs-plugin-zoom`.\n\n**API mirror note:** the real `wa-chart` docs page\n(https://webawesome.com/docs/components/chart/) documents a `config:\nChartJS['config']` property alongside its simplified attributes — \"a\nflexible wrapper around Chart.js\" supporting *both* simplified attributes\nand full Chart.js configuration passthrough, not a `data`/`options` prop\npair. `lr-chart` mirrors that dual surface: the `Series`-based\n`datasets`/`labels`/`type`/`legend`/`xLabel`/`yLabel`/`zoom` attributes\nbelow are the simplified surface (compatible with WA's `type`, `xLabel`,\n`yLabel`, `withoutLegend`-equivalent `legend`, etc.), and the additional\n`config` property is the raw-passthrough escape hatch — a\n`Partial<ChartConfiguration>` deep-merged over the generated config in\n`buildConfig()`, mirroring WA's `config` property without discarding the\n`Series` shape the rest of this component family (subclasses, box-plot,\nhistogram) is built on.",
           "name": "LyraChart",
+          "cssProperties": [
+            {
+              "description": "The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.",
+              "name": "--lr-chart-height",
+              "default": "var(--lr-size-280px)"
+            },
+            {
+              "description": "Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).",
+              "name": "--lr-chart-grid-color",
+              "default": "var(--lr-color-border)"
+            },
+            {
+              "description": "Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tick-color",
+              "default": "var(--lr-color-text-quiet)"
+            },
+            {
+              "description": "Legend label color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-legend-color",
+              "default": "var(--lr-color-text)"
+            },
+            {
+              "description": "Tooltip background color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-bg",
+              "default": "var(--lr-color-surface)"
+            },
+            {
+              "description": "Tooltip text color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-text",
+              "default": "var(--lr-color-text)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The chart wrapper.",
@@ -25743,6 +25977,62 @@
               }
             }
           ],
+          "cssProperties": [
+            {
+              "description": "The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.",
+              "name": "--lr-chart-height",
+              "default": "var(--lr-size-280px)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).",
+              "name": "--lr-chart-grid-color",
+              "default": "var(--lr-color-border)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tick-color",
+              "default": "var(--lr-color-text-quiet)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Legend label color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-legend-color",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip background color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-bg",
+              "default": "var(--lr-color-surface)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip text color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-text",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "accessible-description",
@@ -27571,6 +27861,62 @@
               }
             }
           ],
+          "cssProperties": [
+            {
+              "description": "The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.",
+              "name": "--lr-chart-height",
+              "default": "var(--lr-size-280px)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).",
+              "name": "--lr-chart-grid-color",
+              "default": "var(--lr-color-border)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tick-color",
+              "default": "var(--lr-color-text-quiet)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Legend label color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-legend-color",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip background color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-bg",
+              "default": "var(--lr-color-surface)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip text color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-text",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            }
+          ],
           "events": [
             {
               "description": "Fired when a click lands on (or nearest, intersect-only — see `handlePointClick()`) a data point/segment. `detail: { datasetIndex: number, index: number, label: string | undefined, value: unknown }`.",
@@ -28896,6 +29242,62 @@
               }
             }
           ],
+          "cssProperties": [
+            {
+              "description": "The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.",
+              "name": "--lr-chart-height",
+              "default": "var(--lr-size-280px)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).",
+              "name": "--lr-chart-grid-color",
+              "default": "var(--lr-color-border)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tick-color",
+              "default": "var(--lr-color-text-quiet)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Legend label color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-legend-color",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip background color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-bg",
+              "default": "var(--lr-color-surface)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip text color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-text",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "accessible-description",
@@ -31717,6 +32119,62 @@
               }
             }
           ],
+          "cssProperties": [
+            {
+              "description": "The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.",
+              "name": "--lr-chart-height",
+              "default": "var(--lr-size-280px)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).",
+              "name": "--lr-chart-grid-color",
+              "default": "var(--lr-color-border)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tick-color",
+              "default": "var(--lr-color-text-quiet)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Legend label color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-legend-color",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip background color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-bg",
+              "default": "var(--lr-color-surface)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip text color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-text",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "accessible-description",
@@ -33218,6 +33676,62 @@
               }
             }
           ],
+          "cssProperties": [
+            {
+              "description": "The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.",
+              "name": "--lr-chart-height",
+              "default": "var(--lr-size-280px)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).",
+              "name": "--lr-chart-grid-color",
+              "default": "var(--lr-color-border)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tick-color",
+              "default": "var(--lr-color-text-quiet)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Legend label color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-legend-color",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip background color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-bg",
+              "default": "var(--lr-color-surface)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip text color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-text",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "accessible-description",
@@ -34719,6 +35233,62 @@
               }
             }
           ],
+          "cssProperties": [
+            {
+              "description": "The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.",
+              "name": "--lr-chart-height",
+              "default": "var(--lr-size-280px)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).",
+              "name": "--lr-chart-grid-color",
+              "default": "var(--lr-color-border)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tick-color",
+              "default": "var(--lr-color-text-quiet)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Legend label color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-legend-color",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip background color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-bg",
+              "default": "var(--lr-color-surface)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip text color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-text",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "accessible-description",
@@ -36220,6 +36790,62 @@
               }
             }
           ],
+          "cssProperties": [
+            {
+              "description": "The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.",
+              "name": "--lr-chart-height",
+              "default": "var(--lr-size-280px)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).",
+              "name": "--lr-chart-grid-color",
+              "default": "var(--lr-color-border)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tick-color",
+              "default": "var(--lr-color-text-quiet)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Legend label color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-legend-color",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip background color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-bg",
+              "default": "var(--lr-color-surface)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            },
+            {
+              "description": "Tooltip text color. Resolved via `getComputedStyle` on every draw.",
+              "name": "--lr-chart-tooltip-text",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraChart",
+                "module": "src/components/charts/chart/chart.class.ts"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "accessible-description",
@@ -37419,6 +38045,11 @@
               "description": "Inactive/idle color.",
               "name": "--lr-audio-visualizer-quiet-color",
               "default": "var(--lr-color-brand-quiet)"
+            },
+            {
+              "description": "The host's block size, which the canvas fills at 100%.",
+              "name": "--lr-audio-visualizer-height",
+              "default": "var(--lr-size-3rem)"
             }
           ],
           "cssParts": [
@@ -38291,6 +38922,10 @@
               "description": "The next-branch chevron button.",
               "name": "next-button"
             },
+            {
+              "description": "The chevron glyph wrapper inside `next-button`.",
+              "name": "next-glyph"
+            },
             {
               "description": "The visible \"2 / 5\" text.",
               "name": "position"
@@ -38298,6 +38933,10 @@
             {
               "description": "The previous-branch chevron button.",
               "name": "previous-button"
+            },
+            {
+              "description": "The chevron glyph wrapper inside `previous-button`.",
+              "name": "previous-glyph"
             }
           ],
           "members": [
@@ -39901,6 +40540,26 @@
               "name": "--lr-chat-message-max-width",
               "default": "80%"
             },
+            {
+              "description": "Bubble fill for every role except `user`.",
+              "name": "--lr-chat-message-bubble-bg",
+              "default": "var(--lr-color-surface)"
+            },
+            {
+              "description": "Bubble text color for every role except `user`.",
+              "name": "--lr-chat-message-bubble-color",
+              "default": "var(--lr-color-text)"
+            },
+            {
+              "description": "Bubble fill for `data-role=\"user\"`.",
+              "name": "--lr-chat-message-user-bubble-bg",
+              "default": "var(--lr-color-brand-quiet)"
+            },
+            {
+              "description": "Bubble text color for `data-role=\"user\"`.",
+              "name": "--lr-chat-message-user-bubble-color",
+              "default": "var(--lr-color-text)"
+            },
             {
               "description": "Streaming-indicator animation duration and timing function.",
               "name": "--lr-transition-ambient",
@@ -39929,7 +40588,7 @@
               "name": "body"
             },
             {
-              "description": "The message bubble root. Programmatically focusable (`tabindex=\"-1\"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lr-retry` listener flipping `status` away from `\"failed\"`).",
+              "description": "The message bubble root. Programmatically focusable (`tabindex=\"-1\"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lr-retry` listener flipping `status` away from `\"failed\"`). Its fill/text derive from `--lr-chat-message-bubble-bg`/`--lr-chat-message-bubble-color` for every role except `user`, which derives from `--lr-chat-message-user-bubble-bg`/`--lr-chat-message-user-bubble-color` instead — override those cssprops rather than the shared `--lr-color-*` tokens they default to.",
               "name": "bubble"
             },
             {
@@ -43240,6 +43899,18 @@
           "kind": "class",
           "description": "`<lr-code-block>` — fenced code display with optional lazy syntax\nhighlighting and a copy button. No highlighting grammar ships in this\ncomponent itself: it lazy-loads the optional peer dependency `shiki` (see\n`code-loader.ts`) for the actual tokenizing, and degrades to a plain\n`<pre><code>` when that peer isn't installed or `language` is unset/\nunrecognized — the exact same optional-peer shape `<lr-markdown>` and\n`<lr-chart>` already establish. That fallback is the *default* rendering\npath, not a degraded one: unhighlighted code is perfectly usable, and it's\nwhat every instance renders at zero extra bytes until shiki resolves.\n\nA `<lr-skeleton>` placeholder stands in only while shiki itself is\nloading for the very first time on the page (cached — see\n`loadShikiHighlighter()`) and `language` is set. It's deliberately *not*\nshown again for a subsequent per-language grammar load (e.g. a second\n`<lr-code-block>` requesting a language no earlier instance has used\nyet) — that grammar fetch is typically fast, and the plain-text fallback\nis already a perfectly readable placeholder for it, so a second\nloading-chrome state would add complexity for little practical benefit.\n\nSet a host `aria-label` (or the matching `accessibleLabel` property) to\noverride the filename/language-derived name on the internal focusable code\nregion. The name is forwarded to the element that owns `role=\"group\"`, not\nleft only on the custom-element host across the shadow boundary.\n\n`languages` is an additive, opt-in escape hatch from that default path for\na consumer whose language set is fixed and known ahead of time: a map of\nlanguage id to an already-imported shiki grammar module (e.g. `import bash\nfrom 'shiki/langs/bash.mjs'`). When `language` matches a key in `languages`,\nthis component seeds a fine-grained `createHighlighterCore()` highlighter\nwith *only* the pre-supplied grammars (see `code-loader.ts`'s\n`loadShikiHighlighterCore()`) instead of waiting on `loadShikiHighlighter()`\nand its dynamic per-language `loadLanguage()` import. The payoff isn't\nruntime cost — the default dynamic-import path is already well-optimized\nfor that — it's *build output*: shiki's main entry point bundles a dynamic\n`import()` per bundled language (~200 of them) because a bundler can't\nstatically narrow which of those a `loadLanguage(lang: string)` call might\nrequest at runtime, so it conservatively emits a build-output chunk for\nevery one of them. `shiki/core`'s fine-grained API has no such table — a\nbundler only ever sees the exact grammar modules `languages` itself\n`import`s, so a consumer who pins its full language set this way trades a\nhand-maintained list for a build output scoped to just those languages\ninstead of shiki's entire bundled set. A language requested but absent\nfrom `languages` still falls back to the ordinary dynamic-import path\nunchanged, so this is a partial opt-in, not a replacement for it.\n\nAdopts the `line-range` slice of this library's shared anchor-target contract:\n`highlights`/`activeHighlightId` paint (and `highlight-lines` additionally marks) per-line\nemphasis in both the shiki and plain-text-fallback rendering paths identically, and\n`scrollToAnchor()` resolves a `line-range` anchor. `interactive-lines` is a separate, purely\nlocal affordance that turns the (`line-numbers`-gated) gutter into a keyboard-navigable,\nclickable roving-tabindex group emitting `lr-line-click` — it doesn't require `highlights` to\nbe set.",
           "name": "LyraCodeBlock",
+          "cssProperties": [
+            {
+              "description": "Scroll cap applied to `body`. The `max-height` attribute, when set, writes this same property inline on `body` and therefore wins.",
+              "name": "--lr-code-block-max-height",
+              "default": "none"
+            },
+            {
+              "description": "Monospace family for the rendered `pre` and `code`.",
+              "name": "--lr-code-block-font",
+              "default": "var(--lr-font-mono)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The outer container.",
@@ -44378,6 +45049,14 @@
               "description": "The last-message preview snippet. Only rendered when `excerpt` is non-empty.",
               "name": "excerpt"
             },
+            {
+              "description": "The wrapper around the `leading` slot, inside `option`. Always rendered, but `hidden` while that slot is empty.",
+              "name": "leading"
+            },
+            {
+              "description": "The wrapper around the `meta` slot. Only rendered in the built-in content path (not when the `content` slot is used), and `hidden` while the `meta` slot is empty.",
+              "name": "meta"
+            },
             {
               "description": "The selectable region (`role=\"button\"`, removed while renaming -- see the class doc). Wraps `content` and `timestamp`.",
               "name": "option"
@@ -47414,6 +48093,13 @@
           "kind": "class",
           "description": "`<lr-markdown>` — sanitized Markdown-to-HTML rendering (GFM tables,\nfenced code blocks, links, blockquotes) built on the optional peer\ndependencies `marked` (parsing) and `dompurify` (sanitizing), both\nlazy-loaded via `markdown-loader.ts` on first connect.\n\nRendering never ships unsanitized or broken markup silently:\n- If `marked` fails to load, or throws while parsing malformed input, the\n  component falls back to plain text (`white-space: pre-wrap`, no HTML\n  parsing at all) and fires `lr-render-error`.\n- If `sanitize` is `true` (the default) and `dompurify` fails to load, the\n  component *also* falls back to plain text + `lr-render-error` — it\n  never renders marked's raw HTML output when sanitization was requested\n  (or defaulted to) but is unavailable, even though `marked` itself loaded\n  fine.\n- If `sanitize` is explicitly `false`, marked's raw output renders as-is\n  regardless of whether `dompurify` is installed — the consumer opted out\n  of sanitization, so `dompurify`'s absence is irrelevant to that path.\n\nThat same plain-text fallback rendering (`data-fallback` on the `content`\npart) is also, unconditionally and by default, a brief *transient* state on\nevery connect, not just a failure path: `connectedCallback()`'s dynamic\n`import()` of `marked`/`dompurify` (see `markdown-loader.ts`) is\nasynchronous, so the very first paint of any `<lr-markdown>` on a page\nshows plain text for at least one microtask — even when both peers are\nalready installed and load without error — until that import resolves and\na second render replaces it with the real Markdown output. Set\n`eager-load` to skip that window once the shared dependency cache is\nalready warm; see that property's doc for exactly what \"warm\" requires.\n\n`heading`/`code`/`blockquote`/`table`/`link`/`image` tokens are rendered\nthrough a `marked` renderer override that injects `part=\"...\"` attributes\ndirectly into the produced HTML — a single pass, not a second DOM walk\nafter insertion.\n\nFenced code blocks are syntax-highlighted via the same optional `shiki` peer `<lr-code-block>`\nuses (`highlightCode`, default `true` — a pure upgrade gated by whether `shiki` is installed at\nall, not a separate opt-in). `languages`/`languagesOnly` mirror `<lr-code-block>`'s own\nfine-grained bundle-size controls. The very first render of any content is always plain\n(identical to today's output); highlighting arrives as an asynchronous upgrade one render later,\nonce shiki resolves. No highlighting is attempted while `streaming` is `true` — it applies once a\nstream settles, so there is no added per-chunk cost while content is still arriving.\n\nWhen `heading-anchors` is set, every rendered heading's slug (computed via the shared\nGitHub-slugger-style `Slugger`) is stamped as its `id`; `getHeadingTree()` computes that same\noutline on every parse regardless of `heading-anchors`, so a host can build a table of contents\neven while ids aren't in the DOM yet. `scrollToAnchor()` (from the adopted `DocumentAnchorTarget`\nmixin) resolves `fragment` anchors against that outline and `text-quote` anchors via\n`internal/text-quote.ts`'s shared scope/resolve helpers; `highlights` re-resolve by quote after\nevery render (never by node identity), so a highlight painted before a `streaming` update\nfinishes still finds its quote once the matching text arrives. Highlight painting uses\n`internal/text-highlights.ts`'s `acquireHighlightHandle()` -- the CSS Custom Highlight API where\nthe browser supports it (no DOM mutation at all), a `<mark>`-wrap fallback otherwise.\n\n`math` renders `$...$`/`$$...$$` TeX as MathML via the optional `katex` peer's\n`renderToString(tex, { output: 'mathml' })` -- MathML Core renders natively and accessibly in\nevergreen browsers with no extra stylesheet or webfont needing to cross the shadow boundary. A\nmissing `katex` peer renders the literal, unparsed TeX source (delimiters included) and fires one\n`lr-render-error`.",
           "name": "LyraMarkdown",
+          "cssProperties": [
+            {
+              "description": "Monospace family for rendered `<code>` inside `content`.",
+              "name": "--lr-markdown-font-mono",
+              "default": "var(--lr-font-mono)"
+            }
+          ],
           "cssParts": [
             {
               "description": "Every rendered `<blockquote>`.",
@@ -51831,6 +52517,13 @@
           "kind": "class",
           "description": "`<lr-push-to-talk>` — a mic capture button owning the full `getUserMedia` + `MediaRecorder`\nlifecycle: permission request, recording, optional chunked streaming, teardown. The one place in\nthis library that touches the microphone — no SDK, no LiveKit/ElevenLabs import, native browser\nAPIs only.\n\n`mode=\"hold\"` (the default) is a press-and-hold gesture: pointerdown/Enter-or-Space-keydown starts,\npointerup/keyup/blur stops. `mode=\"toggle\"` is click-to-start/click-to-stop with `aria-pressed`.\nEscape cancels the in-progress take in either mode (discarding it — `lr-record-cancel`, never\n`lr-record-stop`). `state` is a read-only lifecycle reflected to the `data-state` attribute (not\n`state`, avoiding any ambiguity with a native form-control `state`): `'idle' | 'requesting' |\n'denied' | 'recording' | 'error'`. A host-level `aria-label` (set on `<lr-push-to-talk>` itself)\noverrides the computed trigger label.",
           "name": "LyraPushToTalk",
+          "cssProperties": [
+            {
+              "description": "Inline and block size of the circular `trigger` button.",
+              "name": "--lr-push-to-talk-size",
+              "default": "var(--lr-size-3rem)"
+            }
+          ],
           "cssParts": [
             {
               "description": "Wrapper around the `icon` slot / default mic glyph.",
@@ -52741,6 +53434,18 @@
           "kind": "class",
           "description": "`<lr-stream-status>` — a compact status indicator for a single streaming\nconnection (SSE, WebSocket, long-poll, …), with built-in heartbeat-aware\nstall detection.\n\nThe host drives `phase` directly for `idle`/`connecting`/`streaming`, and\ncalls `recordActivity()` on every *semantic* frame received while\nstreaming — a real content chunk, never a transport-level keep-alive ping.\nThis component has no payload-inspection logic of its own: \"ignore\nheartbeats\" is entirely a call-site discipline — the host simply never\ncalls `recordActivity()` for a ping, so pings never reset the stall timer\nand a connection that's only sending keep-alives (no real content) for\nlonger than `stall-threshold-ms` correctly reads as stalled.\n\nInternally, an inactivity timer runs only while `phase === 'streaming'`.\nIt's (re)armed whenever the phase transitions to `'streaming'` (directly,\nor via `recordActivity()` recovering from `'stalled'`), on every\nsubsequent `recordActivity()` call while already streaming, whenever\n`stall-threshold-ms` itself changes while already streaming (the new\nvalue takes effect immediately, the same way `<lr-toast-item>`'s\n`duration` re-applies mid-flight, rather than waiting for the next\n`recordActivity()`/phase change), and whenever this element (re)connects\nto the DOM while `phase` is still `'streaming'` (a disconnect always\ndisarms it, so moving the element elsewhere in the page — disconnect then\nreconnect with `phase` unchanged — must resume detection rather than\nsilently disabling it for the rest of the streaming session). It's\ndisarmed the instant `phase` becomes anything else, including a\nhost-driven reassignment away from `'streaming'` — so a stale timer can\nnever fire a stall transition after the host has already moved on. If it\never fires, `phase` becomes `'stalled'` and `lr-stall` is dispatched.\n\n`phase` remains a fully public, directly settable property at all times —\na host can assign `'stalled'` (or any other phase) itself as a manual\noverride, and this component never fights that assignment. `lr-stall`/\n`lr-recover` fire on *any* transition into/out of `'stalled'`\nrespectively, whether timer-driven or host-driven, and never for a\nreassignment to the same value (Lit's default `hasChanged` already skips a\nno-op set, same as every other reflected `@property` in this library).\nLike `<lr-chat-message>`'s `status`, whatever phase this element happens\nto *mount* with is never itself treated as an eventful transition — only a\nlater change fires an event or an announcement.\n\nAccessibility: phase transitions into/out of `'stalled'` are announced\nthrough an internal `<lr-live-region>` (see that component for the\nthrottled/coalesced-announcement machinery this composes) rather than a\nhand-rolled `aria-live` region. `recordActivity()` itself never announces\nanything, no matter how often the host calls it — only the *transition*\nannounces, exactly once per transition, which is the entire point of\nrouting through the throttled announcer instead of writing to a live\nregion on every call. Entering `'stalled'` announces with `mode=\"assertive\"`\n(a stall can need the user's attention, e.g. before they give up and\nnavigate away); leaving `'stalled'` always announces with `mode=\"polite\"`\n(good news doesn't need to interrupt), but the *wording* depends on where\nit lands: `\"Connection restored.\"` only when the destination is\n`'streaming'` (a genuine recovery), or a neutral `\"No longer stalled.\"`\nwhen the destination is `'idle'`/`'connecting'` instead — that's the host\ngiving up on the stream, not the stream recovering, and a screen-reader\nuser must never be told the opposite of what a sighted user sees on\nscreen. The decorative indicator dot is `aria-hidden` — it's a\ncolor/motion cue only, never the sole carrier of state.\n\nVisual: `'stalled'` is styled as a warning, not a danger — a stall is\nusually recoverable (the stream may resume on its own, or the host's own\nretry logic may kick in), so treating it as an actionable warning rather\nthan a hard failure keeps the tone proportionate. A host that wants to\nescalate to danger styling after N stalls can scope its own CSS off\n`[phase=\"stalled\"]`, or simply stop rendering this component and show its\nown danger-styled error state instead.",
           "name": "LyraStreamStatus",
+          "cssProperties": [
+            {
+              "description": "`indicator` dot color. Swapped by the reflected `phase`: `var(--lr-color-brand)` for `connecting`/`streaming`, `var(--lr-color-warning)` for `stalled`.",
+              "name": "--lr-stream-status-dot-color",
+              "default": "var(--lr-color-text-quiet)"
+            },
+            {
+              "description": "`indicator` dot opacity. Swapped by the reflected `phase`: `0.6` for `connecting`, `1` for `streaming` and `stalled`.",
+              "name": "--lr-stream-status-dot-opacity",
+              "default": "0.35"
+            }
+          ],
           "cssParts": [
             {
               "description": "Wrapper around the `actions` slot.",
@@ -53304,6 +54009,18 @@
           "kind": "class",
           "description": "`<lr-streaming-text>` — a token-coalescing incremental text renderer for\nstreaming assistant output, with an optional blinking cursor and\nauto-detected Markdown rendering.\n\nThe host is expected to assign the *entire* current text on every update\nto `content`, not a delta -- this component does no accumulation or\nordering of its own. That matches how most streaming-UI state (SSE/\nWebSocket token accumulation into a growing string in application state)\nis already managed.\n\nToken-by-token streaming can update `content` far faster than a human can\nusefully perceive a re-render -- dozens of times a second for a fast\nmodel. Re-rendering on every single assignment thrashes layout for no\nvisible benefit, so updates funnel through `Announcer`\n(`../../internal/announcer.js`), reused here purely as the generic\n\"coalesce rapid calls, flush the latest\" timing primitive its own class\ndoc says other components should reuse -- with none of its usual\nDOM/ARIA plumbing (that's `<lr-live-region>`'s job, not this\ncomponent's). Within any `coalesce-ms` window, only the *last* `content`\nvalue assigned actually reaches the rendered DOM. Two cases always bypass\nthe throttle and flush immediately instead of waiting out the window: the\nvery first `content` assignment after mount (so an already-complete\nmessage never shows an artificial startup delay), and any transition of\n`streaming` between `true` and `false` in either direction (so the final\nchunk of a finished stream can never be left stranded mid-window, and a\nstream restarting on a reused element can never keep showing the\nprevious stream's stale final content for the length of the window).\n\n`markdown` is a tri-state property, not a plain boolean: left unset (the\ndefault), it auto-detects via a lightweight regex heuristic (see\n`looksLikeMarkdown`) run against whatever text is currently displayed --\ngood enough to route obviously-Markdown output through `<lr-markdown>`\nwithout the host needing to know or declare it up front, at the cost of\nan occasional one-time mode flip if Markdown syntax only appears partway\nthrough a stream. Explicitly setting `markdown` to `true`/`false` always\nwins over the heuristic. Rendering itself is never reimplemented here:\nMarkdown mode composes `<lr-markdown>` (`../markdown/markdown.js`)\ndirectly, forwarding this component's own `streaming` through as that\ncomponent's own forward-compatible `streaming` hint prop; plain-text mode\nrenders into a `white-space: pre-wrap` span instead.\n\nThe blinking cursor (shown only while `streaming` is `true`) degrades to\na static, always-visible bar under `prefers-reduced-motion: reduce`\nrather than disabling the animation into an invisible frozen frame --\nthe same pattern `<lr-typing-indicator>`'s own `cursor` variant uses. In\nplain-text mode the cursor sits inline at the tail of the final\ncharacter, since the text is one continuous inline flow; in Markdown\nmode it renders as its own trailing block below the rendered content\ninstead of attempting to splice into whatever nested block Markdown\nhappens to end with (a paragraph, a table cell, a list item, a fenced\ncode block, …) -- genuinely interleaving into arbitrary rendered Markdown\nwithout reaching across `<lr-markdown>`'s own shadow boundary isn't a\ntractable general solution, so this component doesn't attempt it.\n\nPurely presentational: no events, driven entirely by its properties. It\nalso doesn't announce anything to assistive tech itself -- a host that\nneeds streamed text announced already has `<lr-live-region>` for that\n(composed, for example, inside `<lr-chat-message>`).",
           "name": "LyraStreamingText",
+          "cssProperties": [
+            {
+              "description": "Width of the `cursor` bar (also its border radius).",
+              "name": "--lr-streaming-text-cursor-width",
+              "default": "var(--lr-size-0-125rem)"
+            },
+            {
+              "description": "Height of the `cursor` bar.",
+              "name": "--lr-streaming-text-cursor-height",
+              "default": "var(--lr-size-1em)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The root container.",
@@ -55420,6 +56137,10 @@
               "description": "Present (alongside `entry`) on an interim row.",
               "name": "interim"
             },
+            {
+              "description": "The wrapper around the interim (not-yet-final) entries, rendered as a sibling of `log`. Only rendered while at least one interim entry exists.",
+              "name": "interim-area"
+            },
             {
               "description": "The \"jump to latest\" affordance, shown only while `follow` is `false`.",
               "name": "jump-button"
@@ -59392,11 +60113,31 @@
           "kind": "class",
           "description": "`<lr-calendar>` — responsive month calendar with event markers and agenda mode.\n\nMonth-view event markers are a mouse-only quick-select affordance layered on\ntop of the focusable day cell: the day grid's own roving-tabindex/arrow-key\nnavigation already targets the day `<button>`, and nesting a second\nfocusable control inside that same native `<button>` is not valid (a\n`<button>` element must not contain interactive/tabindex descendants, and\n`role=\"button\"` itself forbids focusable descendants regardless). Agenda\nview renders each event as its own real `<button part=\"agenda-event\">` and\nis the fully keyboard-accessible way to reach `lr-event-select`.",
           "name": "LyraCalendar",
+          "cssProperties": [
+            {
+              "description": "Minimum block size of a day cell.",
+              "name": "--lr-calendar-day-min-block-size",
+              "default": "var(--lr-size-6rem)"
+            },
+            {
+              "description": "Minimum block size of a day cell once the host is narrower than 28rem.",
+              "name": "--lr-calendar-day-min-block-size-narrow",
+              "default": "4rem"
+            }
+          ],
           "cssParts": [
             {
               "description": "Agenda list.",
               "name": "agenda"
             },
+            {
+              "description": "One focusable event button in agenda view (`view=\"agenda\"` only).",
+              "name": "agenda-event"
+            },
+            {
+              "description": "The day-of-month number inside a day cell.",
+              "name": "date"
+            },
             {
               "description": "Day cell.",
               "name": "day"
@@ -59413,10 +60154,18 @@
               "description": "Calendar header.",
               "name": "header"
             },
+            {
+              "description": "A previous/next navigation control in the header (the previous button, and the wrapper around the next button).",
+              "name": "nav"
+            },
             {
               "description": "The previous/next chevron glyph, mirrored under RTL.",
               "name": "nav-glyph"
             },
+            {
+              "description": "The header's month/year title.",
+              "name": "title"
+            },
             {
               "description": "One week row within the month grid.",
               "name": "week"
@@ -60021,6 +60770,12 @@
           "kind": "class",
           "description": "`<lr-context-meter>` — a segmented occupancy meter (bar or ring) for\nshowing how a fixed capacity (a model's context window, a token budget,\nany consumable quota) is divided across labeled categories. First-party\ninvention; no equivalent exists in Web Awesome.\n\nPure data visualization: it renders `segments`/`total` as given and never\ncomputes token counts, costs, or any other domain-specific estimate\nitself — the one exception is the plain arithmetic sum of the segment\nvalues used to build the accessible \"X of Y used\" summary below.",
           "name": "LyraContextMeter",
+          "cssProperties": [
+            {
+              "description": "Per-segment color. Set inline on `[part=\"segment\"]` by the component itself whenever that segment supplies a `color`; unset (and the token unread) otherwise, leaving the `data-tone` palette in charge.",
+              "name": "--lr-context-meter-segment-color"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's root wrapper (a `<div>` for `bar`, an `<svg>` for `ring`).",
@@ -60576,6 +61331,10 @@
               "description": "Body cell.",
               "name": "cell"
             },
+            {
+              "description": "The single full-width cell rendered in place of body rows while `loading`, or when `rows` is empty.",
+              "name": "empty"
+            },
             {
               "description": "Native table grid.",
               "name": "grid"
@@ -63063,9 +63822,9 @@
           "name": "LyraFlowCanvas",
           "cssProperties": [
             {
-              "description": "Dotted background spacing.",
+              "description": "Dotted background spacing. The canvas also writes it inline as `${grid}px` from the `grid` property, which wins over the stylesheet fallback whenever a grid is in effect.",
               "name": "--lr-flow-canvas-grid-size",
-              "default": "8px"
+              "default": "var(--lr-size-0-5rem)"
             },
             {
               "description": "Running-edge march animation duration.",
@@ -65978,12 +66737,12 @@
             {
               "description": "Map inline size.",
               "name": "--lr-flow-minimap-inline-size",
-              "default": "12rem"
+              "default": "var(--lr-size-12rem)"
             },
             {
               "description": "Map block size.",
               "name": "--lr-flow-minimap-block-size",
-              "default": "8rem"
+              "default": "var(--lr-size-8rem)"
             }
           ],
           "cssParts": [
@@ -66570,7 +67329,7 @@
             {
               "description": "Minimum card inline size.",
               "name": "--lr-flow-node-min-inline-size",
-              "default": "11rem"
+              "default": "calc(var(--lr-size-10rem) + var(--lr-size-1rem))"
             }
           ],
           "cssParts": [
@@ -69683,7 +70442,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<lr-heatmap>` — a Canvas heatmap with a DPR-aware, resize-aware redraw\nloop, in one of two `mode`s:\n\n- `\"matrix\"` (default): a `rowLabels` x `colLabels` grid of `values`. `-1`\n  (or any non-finite value) is treated as \"no data\". `scale=\"sqrt\"`\n  compresses the ramp via `sqrtStep()` so one heavy cell doesn't wash out\n  the rest; the default `\"linear\"` scale maps linearly instead.\n- `\"calendar\"`: a GitHub-style Sunday-Saturday (or `firstDayOfWeek`-anchored\n  — see below) x week grid built from `days`. `scale` governs its\n  bucketing too: the default `\"linear\"` buckets by `quartileBucket()`\n  (today's original behavior, unchanged); `\"sqrt\"` instead compresses via\n  the same `sqrtStep()` magnitude compression matrix mode uses, so one\n  heavy day doesn't wash out the rest. As in matrix mode, a cell whose\n  `value` is negative or non-finite is treated as \"no data\" rather than\n  being bucketed — as is a grid position with no matching entry in `days`\n  at all (a gap in a sparse calendar).\n\nThe sequential color ramp's endpoints are read from the\n`--lr-heatmap-scale-lo`/`-hi` custom properties (declared in\n`heatmap.styles.ts`) so hosts can retheme it — canvas can't consume\n`var()` directly, so they're resolved once per draw via\n`getComputedStyle`, then normalized to RGB by `resolveRgb()` (any valid\nCSS color syntax, not just hex — see its doc comment).\n\nEvery cell is independently addressable: a `pointermove` hit test over the\ncanvas shows `[part=\"tooltip\"]` with that cell's label + value (hidden on\n`pointerleave`); the canvas is `tabindex=\"0\"` with arrow-key roving focus\n(a stroked ring redrawn over the focused cell on every draw, plus a\nvisually-hidden `aria-live=\"polite\"` status announcement — avoids a\nDOM-node-per-cell overlay, which would be hundreds of nodes for a year\ncalendar); and a click, or Enter/Space on the focused cell, fires\n`lr-cell-click`. `annotations` additionally strokes a ring around\nspecific cells (e.g. to call out an anomaly), each one optionally\nsurfaced in the legend too via `[part=\"legend-annotation\"]`.\nSet `accessibleCells` when each cell needs a persistent DOM control for\nassistive technology. The opt-in overlay uses native buttons with a\nroving tabindex, localized `aria-label`, and explicit `aria-pressed` state\nderived from the controlled `selectedCell` property; the canvas remains the\nvisual rendering surface underneath.\n\n`columnX` (calendar mode only) overrides the x-origin computed for each\nweek column — drawing, hit-testing, the focus ring, and month-label\npositioning all consult it consistently, so a consumer can pixel-align a\ncalendar's week columns with a sibling chart's coordinate system. Unset\n(the default) keeps the original evenly-spaced formula. `rowY` is its\ncalendar-mode vertical analogue — overrides the y-origin computed for each\nweekday row, consulted consistently by drawing, hit-testing, and the focus\nring via the private `rowYFor()` helper (mirroring `columnXFor()` exactly).\n\n`firstDayOfWeek` (calendar mode only, default `0`/Sunday, no-op in matrix\nmode) anchors the calendar grid at a different weekday — `0`-`6`, same\nnumbering as `CalendarCellPos.weekday` (`0` Sunday .. `6` Saturday) —\nthreaded into `buildCalendarGrid()`.\n\n`cellSize`/`fitToWidth` (previously matrix-mode only) also drive calendar\nmode's per-cell size: unset, calendar mode keeps today's original 11px\ncell size unchanged; explicitly set, the same fixed size (or, with\n`fitToWidth`, the same host-width-derived size matrix mode already\nsupports) governs calendar mode's grid too.",
+          "description": "`<lr-heatmap>` — a Canvas heatmap with a DPR-aware, resize-aware redraw\nloop, in one of two `mode`s:\n\n- `\"matrix\"` (default): a `rowLabels` x `colLabels` grid of `values`. `-1`\n  (or any non-finite value) is treated as \"no data\". `scale=\"sqrt\"`\n  compresses the ramp via `sqrtStep()` so one heavy cell doesn't wash out\n  the rest; the default `\"linear\"` scale maps linearly instead.\n- `\"calendar\"`: a GitHub-style Sunday-Saturday (or `firstDayOfWeek`-anchored\n  — see below) x week grid built from `days`. `scale` governs its\n  bucketing too: the default `\"linear\"` buckets by `quartileBucket()`\n  (today's original behavior, unchanged); `\"sqrt\"` instead compresses via\n  the same `sqrtStep()` magnitude compression matrix mode uses, so one\n  heavy day doesn't wash out the rest. As in matrix mode, a cell whose\n  `value` is negative or non-finite is treated as \"no data\" rather than\n  being bucketed — as is a grid position with no matching entry in `days`\n  at all (a gap in a sparse calendar).\n\nThe sequential color ramp's endpoints are read from the\n`--lr-heatmap-scale-lo`/`-hi` custom properties (declared in\n`heatmap.styles.ts`) so hosts can retheme it — canvas can't consume\n`var()` directly, so they're resolved once per draw via\n`getComputedStyle`, then normalized to RGB by `resolveRgb()` (any valid\nCSS color syntax, not just hex — see its doc comment).\n\nEvery cell is independently addressable: a `pointermove` hit test over the\ncanvas shows `[part=\"tooltip\"]` with that cell's label + value (hidden on\n`pointerleave`); the canvas is `tabindex=\"0\"` with arrow-key roving focus\n(a stroked ring redrawn over the focused cell on every draw, plus a\nvisually-hidden `aria-live=\"polite\"` status announcement — avoids a\nDOM-node-per-cell overlay, which would be hundreds of nodes for a year\ncalendar); and a click, or Enter/Space on the focused cell, fires\n`lr-cell-click`. `annotations` additionally strokes a ring around\nspecific cells (e.g. to call out an anomaly), each one optionally\nsurfaced in the legend too via `[part=\"legend-annotation\"]`.\n\n`legendStops` swaps the legend's two-endpoint gradient bar for a discrete\nkey of swatches, so a consumer whose `cellColor` callback paints an\nentirely different domain than the `--lr-heatmap-scale-lo`/`-hi` ramp can\nkeep the built-in legend (labels, number formatting, annotation entries)\ninstead of hiding `[part=\"legend\"]` and hand-rolling swatches. It is\npresentation only — it never feeds back into the cell colors.\n\nSet `accessibleCells` when each cell needs a persistent DOM control for\nassistive technology. The opt-in overlay uses native buttons with a\nroving tabindex, localized `aria-label`, and explicit `aria-pressed` state\nderived from the controlled `selectedCell` property; the canvas remains the\nvisual rendering surface underneath.\n\n`columnX` (calendar mode only) overrides the x-origin computed for each\nweek column — drawing, hit-testing, the focus ring, and month-label\npositioning all consult it consistently, so a consumer can pixel-align a\ncalendar's week columns with a sibling chart's coordinate system. Unset\n(the default) keeps the original evenly-spaced formula. `rowY` is its\ncalendar-mode vertical analogue — overrides the y-origin computed for each\nweekday row, consulted consistently by drawing, hit-testing, and the focus\nring via the private `rowYFor()` helper (mirroring `columnXFor()` exactly).\n\n`firstDayOfWeek` (calendar mode only, default `0`/Sunday, no-op in matrix\nmode) anchors the calendar grid at a different weekday — `0`-`6`, same\nnumbering as `CalendarCellPos.weekday` (`0` Sunday .. `6` Saturday) —\nthreaded into `buildCalendarGrid()`.\n\n`cellSize`/`fitToWidth` (previously matrix-mode only) also drive calendar\nmode's per-cell size: unset, calendar mode keeps today's original 11px\ncell size unchanged; explicitly set, the same fixed size (or, with\n`fitToWidth`, the same host-width-derived size matrix mode already\nsupports) governs calendar mode's grid too.",
           "name": "LyraHeatmap",
           "cssProperties": [
             {
@@ -69729,6 +70488,11 @@
               "description": "Border color for the selected cell.",
               "name": "--lr-heatmap-selected-color",
               "default": "var(--lr-color-success)"
+            },
+            {
+              "description": "Gradient painted on the continuous legend bar. Set on the host by the component itself while `colorSteps` is supplied, and removed again when it is not; the fallback is the two-endpoint scale ramp.",
+              "name": "--lr-heatmap-color-steps-gradient",
+              "default": "linear-gradient(to right, var(--lr-heatmap-scale-lo), var(--lr-heatmap-scale-hi))"
             }
           ],
           "cssParts": [
@@ -69757,13 +70521,25 @@
               "name": "legend-annotation"
             },
             {
-              "description": "The high legend endpoint.",
+              "description": "The high legend endpoint (omitted when `legendStops` is supplied).",
               "name": "legend-hi"
             },
             {
-              "description": "The low legend endpoint.",
+              "description": "The low legend endpoint (omitted when `legendStops` is supplied).",
               "name": "legend-lo"
             },
+            {
+              "description": "One discrete `legendStops` entry — swatch plus label.",
+              "name": "legend-stop"
+            },
+            {
+              "description": "The text of one `legendStops` entry.",
+              "name": "legend-stop-label"
+            },
+            {
+              "description": "The color swatch of one `legendStops` entry.",
+              "name": "legend-swatch"
+            },
             {
               "description": "The visually hidden keyboard announcement region.",
               "name": "live-region"
@@ -70087,6 +70863,14 @@
               "default": "null",
               "description": "The cell currently under the pointer (`null` when not hovering one) — drives `[part=\"tooltip\"]`."
             },
+            {
+              "kind": "field",
+              "name": "legendStops",
+              "type": {
+                "text": "HeatmapLegendStop[] | undefined"
+              },
+              "description": "A discrete legend key rendered *instead of* the `--lr-heatmap-scale-lo`/`-hi` gradient bar\nand its `[part=\"legend-lo\"]`/`[part=\"legend-hi\"]` endpoint labels — one\n`[part=\"legend-stop\"]` per entry, in array order, each a `[part=\"legend-swatch\"]` in that\nentry's `color` plus a `[part=\"legend-stop-label\"]`. Labels default to this component's own\nlocale-aware numeric formatting of `value`, so a stop only needs an explicit `label` when\nthe number isn't the right caption (\"none\", \"≥ 90%\").\n\nExists for the consumer who supplies `cellColor`: because that callback overrides a cell's\ncolor entirely, the built-in two-endpoint bar can describe a ramp the grid no longer uses.\nSupplying the same colors here keeps the legend honest without hiding `[part=\"legend\"]` and\nre-implementing swatches, labels and the annotation entries by hand.\n\nStrictly presentation: the stops are never consulted by the color ramp, the bucket math, the\ntooltip, or the accessible name — supplying them changes nothing a cell renders. Any\n`annotations` with a `label` still render their `[part=\"legend-annotation\"]` entries after\nthe stops. Unset (the default) or an empty array reproduces today's exact gradient legend."
+            },
             {
               "kind": "field",
               "name": "liveText",
@@ -71403,6 +72187,25 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "renderLegendScale",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "range",
+                  "type": {
+                    "text": "[number, number] | null"
+                  }
+                }
+              ],
+              "description": "The legend's color description: the discrete `legendStops` key when one is supplied, the\noriginal `--lr-heatmap-scale-lo`/`-hi` gradient bar and its endpoint labels otherwise. An\nunset (or empty) `legendStops` therefore reproduces the pre-`legendStops` markup exactly."
+            },
             {
               "kind": "method",
               "name": "repaintCalendarFocusCell",
@@ -73634,6 +74437,23 @@
           "kind": "class",
           "description": "`<lr-sequence-strip>` — a compact, one-thin-cell-per-item strip visualizing a sequence of\ncategorical states, with an optional secondary per-cell marker. Pure CSS/flex, no chart.js/SVG/\ncanvas — sized/named consistently with the sparkline/heatmap family, but a glanceable aggregate\nvisualization (`role=\"img\"`, one summarizing `aria-label`), not a `role=\"list\"` of\nseparately-operable items: no per-cell keyboard focus, no per-cell click event, matching\n`<lr-sparkline>`'s accessibility model rather than `<lr-heatmap>`'s heavier canvas +\nkeyboard-roving one.",
           "name": "LyraSequenceStrip",
+          "cssProperties": [
+            {
+              "description": "Block size of the strip.",
+              "name": "--lr-sequence-strip-height",
+              "default": "var(--lr-size-1-5rem)"
+            },
+            {
+              "description": "Color of the bottom marker on a `marker: true` cell.",
+              "name": "--lr-sequence-strip-marker-color",
+              "default": "var(--lr-color-text)"
+            },
+            {
+              "description": "Inline and block size of a legend swatch.",
+              "name": "--lr-sequence-strip-legend-swatch-size",
+              "default": "var(--lr-size-0-625rem)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The root strip wrapper (`role=\"img\"`).",
@@ -73643,6 +74463,22 @@
               "description": "Each item's cell, background-colored by its category.",
               "name": "cell"
             },
+            {
+              "description": "The static category key rendered below the strip when `showLegend` is set (`aria-hidden` — it repeats the strip's own `aria-label` visually).",
+              "name": "legend"
+            },
+            {
+              "description": "One swatch + label pair in the legend, one per `categories` entry.",
+              "name": "legend-item"
+            },
+            {
+              "description": "The text of a legend item (the category's `label`, or its `key`).",
+              "name": "legend-label"
+            },
+            {
+              "description": "The color chip of a legend item, matching that category's cell color.",
+              "name": "legend-swatch"
+            },
             {
               "description": "The small bottom marker on a cell whose item sets `marker: true`.",
               "name": "marker"
@@ -73779,6 +74615,17 @@
                 "module": "src/internal/lyra-element.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "showLegend",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Renders a static `[part=\"legend\"]` key of every `categories` entry below the strip, so the\ncolor-to-category mapping is readable without hovering each cell. Deliberately\nnon-interactive: unlike `<lr-graph-legend>` this toggles nothing and emits nothing — the\nstrip is a presentational aggregate, and the key describes the scheme, not the current data\n(a category with no matching item still gets a row).",
+              "attribute": "show-legend",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "stopLocaleSubscription",
@@ -74035,6 +74882,17 @@
                 "module": "src/internal/lyra-element.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderLegend",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "description": "The legend repeats, in visible form, exactly the category names the strip already announces\nthrough `[part=\"base\"]`'s `role=\"img\"` + `aria-label` summary. Exposing it to assistive\ntechnology as well would read the same scheme out twice, so the whole subtree is\n`aria-hidden` — it is a decorative duplicate, and it renders outside the `role=\"img\"` element\nso hiding it removes nothing from the announced summary."
+            },
             {
               "kind": "method",
               "name": "scheduleAfterUpdate",
@@ -74089,6 +74947,15 @@
               "default": "'horizontal'",
               "description": "Only `'horizontal'` (the default) is supported today — vertical is plausible future scope, not\nbuilt speculatively without a motivating case.",
               "fieldName": "orientation"
+            },
+            {
+              "name": "show-legend",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Renders a static `[part=\"legend\"]` key of every `categories` entry below the strip, so the\ncolor-to-category mapping is readable without hovering each cell. Deliberately\nnon-interactive: unlike `<lr-graph-legend>` this toggles nothing and emits nothing — the\nstrip is a presentational aggregate, and the key describes the scheme, not the current data\n(a category with no matching item still gets a row).",
+              "fieldName": "showLegend"
             }
           ],
           "superclass": {
@@ -75432,6 +76299,30 @@
               "description": "Hover/focus opacity of the resize handle.",
               "name": "--lr-table-resize-handle-opacity",
               "default": "0.12"
+            },
+            {
+              "description": "Cap on the scroll container's block size, past which the table body scrolls.",
+              "name": "--lr-table-max-height",
+              "default": "none"
+            },
+            {
+              "description": "Low endpoint of the heat-tint ramp used by `heatValue` columns.",
+              "name": "--lr-table-heat-tint-lo",
+              "default": "var(--lr-color-brand-quiet)"
+            },
+            {
+              "description": "High endpoint of the heat-tint ramp used by `heatValue` columns.",
+              "name": "--lr-table-heat-tint-hi",
+              "default": "var(--lr-color-brand)"
+            },
+            {
+              "description": "This cell's position on the heat-tint ramp, as a percentage string. Set inline by the component on each `[data-heat]` cell; not consumer-settable.",
+              "name": "--lr-table-heat-t"
+            },
+            {
+              "description": "Distance a `sticky` column pins from the inline edge. Measured and set inline per column by the component so multiple sticky columns stack instead of overlapping; falls back to `0` for the first one, or before the first measurement pass.",
+              "name": "--lr-table-sticky-offset",
+              "default": "0"
             }
           ],
           "cssParts": [
@@ -77308,6 +78199,31 @@
               "description": "Marker fill/accent color. Swapped per `variant` (see the class doc's variant table); a consumer overriding this directly on one item wins over the variant default via normal CSS cascade/specificity.",
               "name": "--lr-timeline-marker-color",
               "default": "var(--lr-color-text-quiet)"
+            },
+            {
+              "description": "Internal orientation plumbing, not a retheming knob: `[part=\"base\"]`'s `flex-direction`, set by an ancestor `<lr-timeline>`'s `:host` and inherited across the slot boundary (`row` vertical, `column` horizontal). The `row` fallback applies when the item is used standalone.",
+              "name": "--lr-timeline-item-direction",
+              "default": "row"
+            },
+            {
+              "description": "Internal orientation plumbing, not a retheming knob: `[part=\"track\"]`'s `flex-direction`, always the opposite axis from `--lr-timeline-item-direction` and set alongside it by `<lr-timeline>`.",
+              "name": "--lr-timeline-item-track-direction",
+              "default": "column"
+            },
+            {
+              "description": "Internal orientation plumbing, not a retheming knob: `[part=\"content\"]`'s `padding-block-end`, set by a vertical `<lr-timeline>` so the rail reaches the next item's marker. `0` when standalone or horizontal; retheme `--lr-timeline-gap` on `<lr-timeline>` instead.",
+              "name": "--lr-timeline-item-gap-block-end",
+              "default": "0"
+            },
+            {
+              "description": "Internal orientation plumbing, not a retheming knob: the inline-axis counterpart of `--lr-timeline-item-gap-block-end`, non-zero only under a horizontal `<lr-timeline>`.",
+              "name": "--lr-timeline-item-gap-inline-end",
+              "default": "0"
+            },
+            {
+              "description": "Internal plumbing, not a retheming knob: `[part=\"rail\"]`'s `visibility`, set to `hidden` by `<lr-timeline>`'s `::slotted(:last-child)` rule so the final item has no trailing rail.",
+              "name": "--lr-timeline-item-rail-visibility",
+              "default": "visible"
             }
           ],
           "cssParts": [
@@ -78267,6 +79183,13 @@
           "kind": "class",
           "description": "`<lr-tree-node>` — internal recursive renderer for `<lr-tree>`.\n\n`role=\"treeitem\"` (plus `aria-expanded`/`aria-level`/`aria-setsize`/\n`aria-posinset` and the roving `tabindex`, driven by `<lr-tree>`) live on\nthe *host* element, not the internal `[part=\"row\"]` div — that makes this\nnode's own nested children (rendered in *its own* shadow root as further\n`role=\"group\"` content) genuine DOM descendants of the treeitem, which is\nwhat the WAI-ARIA treeitem pattern requires (previously a shadow-root\nsibling).",
           "name": "LyraTreeNode",
+          "cssProperties": [
+            {
+              "description": "Internal indent plumbing, not a retheming knob: this node's `depth`, written inline onto `[part=\"row\"]` by the component and multiplied by `--lr-space-l` (capped at `--lr-size-8rem`) to produce the row's `padding-inline-start`.",
+              "name": "--lr-tree-depth",
+              "default": "0"
+            }
+          ],
           "cssParts": [
             {
               "description": "The optional node badge (the legacy `item.badge`, and/or one chip per `item.badges` entry, tone-mapped via `data-tone`).",
@@ -80252,6 +81175,81 @@
               "description": "Rotation period of the `loading` spinner.",
               "name": "--lr-button-spinner-duration",
               "default": "1s"
+            },
+            {
+              "description": "Text/glyph color for the chrome-less appearances (`outlined`, `plain`, `link`). Swapped per `variant` to that variant's semantic color.",
+              "name": "--lr-button-accent",
+              "default": "var(--lr-color-text)"
+            },
+            {
+              "description": "Background of `appearance=\"filled\"`. Swapped per `variant` to that variant's semantic color.",
+              "name": "--lr-button-fill",
+              "default": "var(--lr-color-surface)"
+            },
+            {
+              "description": "Text color on top of `--lr-button-fill`. Swapped per `variant` to that variant's `on-*` color.",
+              "name": "--lr-button-on-fill",
+              "default": "var(--lr-color-text)"
+            },
+            {
+              "description": "Background of `appearance=\"accent\"` (and its border color). Swapped per `variant` to that variant's semantic color.",
+              "name": "--lr-button-accent-fill",
+              "default": "var(--lr-color-neutral)"
+            },
+            {
+              "description": "Text color on top of `--lr-button-accent-fill`. Swapped per `variant` to that variant's `on-*` color.",
+              "name": "--lr-button-accent-on-fill",
+              "default": "var(--lr-color-on-neutral)"
+            },
+            {
+              "description": "Border color of the internal button. Swapped per `variant` to that variant's semantic color.",
+              "name": "--lr-button-border",
+              "default": "var(--lr-color-border)"
+            },
+            {
+              "description": "Border color of `appearance=\"outlined\"`, which overrides `--lr-button-border`.",
+              "name": "--lr-button-outlined-border",
+              "default": "var(--lr-color-border-strong)"
+            },
+            {
+              "description": "Border color of `appearance=\"quiet\"`.",
+              "name": "--lr-button-quiet-border",
+              "default": "var(--lr-color-border)"
+            },
+            {
+              "description": "Text color of `appearance=\"quiet\"`.",
+              "name": "--lr-button-quiet-text",
+              "default": "var(--lr-color-text-quiet)"
+            },
+            {
+              "description": "`min-block-size` at `size=\"2xs\"`.",
+              "name": "--lr-button-size-2xs",
+              "default": "var(--lr-size-1-25rem)"
+            },
+            {
+              "description": "`min-block-size` at `size=\"xs\"`.",
+              "name": "--lr-button-size-xs",
+              "default": "var(--lr-size-1-5rem)"
+            },
+            {
+              "description": "`min-block-size` at `size=\"s\"`.",
+              "name": "--lr-button-size-s",
+              "default": "var(--lr-size-1-75rem)"
+            },
+            {
+              "description": "`min-block-size` at `size=\"m\"`.",
+              "name": "--lr-button-size-m",
+              "default": "var(--lr-size-2rem)"
+            },
+            {
+              "description": "`min-block-size` at `size=\"l\"`.",
+              "name": "--lr-button-size-l",
+              "default": "var(--lr-size-2-5rem)"
+            },
+            {
+              "description": "`min-block-size` at `size=\"xl\"`.",
+              "name": "--lr-button-size-xl",
+              "default": "var(--lr-size-3rem)"
             }
           ],
           "cssParts": [
@@ -82506,8 +83504,25 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<lr-code-editor>` — dependency-free multiline code editing surface with optional line numbers.\n\nKeyboard contract (no keyboard trap, WCAG 2.1.2): Tab inserts `tabSize` spaces at the caret.\nShift+Tab is never captured, so it always performs native reverse focus traversal. Pressing\nEscape releases the next Tab for native forward traversal instead of indenting; typing any other\nkey, or focus leaving the editor, re-arms Tab indentation.",
+          "description": "`<lr-code-editor>` — dependency-free multiline code editing surface with optional line numbers.\n\nKeyboard contract (no keyboard trap, WCAG 2.1.2): Tab inserts one indent unit of spaces at the\ncaret. Shift+Tab is never captured, so it always performs native reverse focus traversal.\nPressing Escape releases the next Tab for native forward traversal instead of indenting; typing\nany other key, or focus leaving the editor, re-arms Tab indentation.\n\nTab-width precedence, highest first: an explicitly assigned `tabSize` (property or `tab-size`\nattribute) wins over everything; otherwise a host-level `--lr-code-editor-tab-size` override\nwins; otherwise the stylesheet's `:host` default of `2` applies. The property therefore stays the\nprimary knob, but it no longer silently shadows the token while it sits at its default -- see\n`indentWidth` for how the same order drives the Tab key, not just the rendered tab stops.",
           "name": "LyraCodeEditor",
+          "cssProperties": [
+            {
+              "description": "Minimum block size of the editor frame and its textarea.",
+              "name": "--lr-code-editor-min-block-size",
+              "default": "var(--lr-size-8rem)"
+            },
+            {
+              "description": "Line height shared by the gutter and the textarea, so line numbers stay aligned with their lines.",
+              "name": "--lr-code-editor-line-height",
+              "default": "1.5"
+            },
+            {
+              "description": "The textarea's `tab-size`. The single channel for tab width — the class writes this token rather than setting `tab-size` directly.",
+              "name": "--lr-code-editor-tab-size",
+              "default": "2"
+            }
+          ],
           "cssParts": [
             {
               "description": "Editor frame.",
@@ -82674,6 +83689,16 @@
               "default": "''",
               "attribute": "hint"
             },
+            {
+              "kind": "field",
+              "name": "indentWidth",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "Spaces a Tab press inserts, resolved with the documented precedence: an explicitly assigned\n`tabSize`, else the rendered `--lr-code-editor-tab-size` when it is a plain number, else the\ndefault. A length-valued token (`40px`, `2ch`, ...) is a purely visual tab-stop metric for\nliteral tab characters, so it is deliberately not reinterpreted as a count of spaces.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "label",
@@ -82875,9 +83900,18 @@
               "type": {
                 "text": "number"
               },
-              "description": "Spaces inserted per Tab keypress, and the native `tab-size` CSS value. Confirmed-crash\nhistory: this used to feed `' '.repeat(Math.max(1, this.tabSize))` directly in `onKeyDown`\nbelow -- `String.prototype.repeat()` throws a `RangeError` for a count of `+Infinity`\nspecifically (e.g. a literal `tab-size=\"Infinity\"` attribute, which `Number(\"Infinity\")`\nhappily converts to), and `Math.max(1, NaN)` is itself `NaN`, silently producing an empty,\nnon-indenting insert for a NaN `tabSize`. Sanitized to a finite integer in `[1, 16]` at\nassignment time instead, so both the `repeat()` call and the inline `tab-size` style always\nsee a safe value.",
+              "description": "Spaces inserted per Tab keypress, and the rendered `tab-size`. Assigning it (or setting the\n`tab-size` attribute) pins both, overriding any `--lr-code-editor-tab-size` the host set;\nleaving it alone lets that token drive them instead. Confirmed-crash history: this used to\nfeed `' '.repeat(Math.max(1, this.tabSize))` directly in `onKeyDown` below --\n`String.prototype.repeat()` throws a `RangeError` for a count of `+Infinity` specifically\n(e.g. a literal `tab-size=\"Infinity\"` attribute, which `Number(\"Infinity\")` happily converts\nto), and `Math.max(1, NaN)` is itself `NaN`, silently producing an empty, non-indenting insert\nfor a NaN `tabSize`. Sanitized to a finite integer in `[1, 16]` at assignment time instead, so\nboth the `repeat()` call and the emitted tab-width style always see a safe value.",
               "attribute": "tab-size"
             },
+            {
+              "kind": "field",
+              "name": "tabSizeAssigned",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "textarea",
@@ -83314,7 +84348,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "Spaces inserted per Tab keypress, and the native `tab-size` CSS value. Confirmed-crash\nhistory: this used to feed `' '.repeat(Math.max(1, this.tabSize))` directly in `onKeyDown`\nbelow -- `String.prototype.repeat()` throws a `RangeError` for a count of `+Infinity`\nspecifically (e.g. a literal `tab-size=\"Infinity\"` attribute, which `Number(\"Infinity\")`\nhappily converts to), and `Math.max(1, NaN)` is itself `NaN`, silently producing an empty,\nnon-indenting insert for a NaN `tabSize`. Sanitized to a finite integer in `[1, 16]` at\nassignment time instead, so both the `repeat()` call and the inline `tab-size` style always\nsee a safe value.",
+              "description": "Spaces inserted per Tab keypress, and the rendered `tab-size`. Assigning it (or setting the\n`tab-size` attribute) pins both, overriding any `--lr-code-editor-tab-size` the host set;\nleaving it alone lets that token drive them instead. Confirmed-crash history: this used to\nfeed `' '.repeat(Math.max(1, this.tabSize))` directly in `onKeyDown` below --\n`String.prototype.repeat()` throws a `RangeError` for a count of `+Infinity` specifically\n(e.g. a literal `tab-size=\"Infinity\"` attribute, which `Number(\"Infinity\")` happily converts\nto), and `Math.max(1, NaN)` is itself `NaN`, silently producing an empty, non-indenting insert\nfor a NaN `tabSize`. Sanitized to a finite integer in `[1, 16]` at assignment time instead, so\nboth the `repeat()` call and the emitted tab-width style always see a safe value.",
               "fieldName": "tabSize"
             },
             {
@@ -85503,6 +86537,13 @@
               "description": "The value was cleared.",
               "name": "lr-clear"
             },
+            {
+              "type": {
+                "text": "CustomEvent<ComboboxFilterDetail>"
+              },
+              "description": "The in-progress filter text changed through user input. `detail.value` is the live filter string, which is not the same thing as the host's `value` (the committed selection). User-input only: the programmatic paths that blank the filter — picking a row, the clear button, `form.reset()`, dismissing the listbox, a `value` write, `setRangeText()` — are all silent, mirroring `<lr-input>`'s `lr-input`.",
+              "name": "lr-filter"
+            },
             {
               "description": "The listbox closed.",
               "name": "lr-hide"
@@ -85770,7 +86811,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "`<lr-option>` — a selectable option for `<lr-combobox>`.\nMirrors `<wa-option>`. Acts as the data source; the combobox renders the\ninteractive rows in its own shadow root and filters/caps them.\n\nThe label is the element's text content (or an explicit `label` attribute).",
           "name": "LyraOption",
           "members": [
             {
@@ -86723,6 +87764,23 @@
           "kind": "class",
           "description": "`<lr-date-input>` — a date field with an attached calendar popover.\nMirrors the core `<wa-date-input>` API under `lr-`. Value is ISO 8601\n(`YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` in range mode). Form-associated.\n\nThis component uses a single text field; typing accepts ISO or a\nlocale-parseable date.\n\n`size` uses the same `2xs`–`xl` scale as `lr-input`/`lr-select`/`lr-combobox`'s own `size`,\ndefault `m`. The calendar-toggle and clear buttons keep a constant touch-target size at every\ntier (mirroring `lr-input`'s own password-toggle button), so only the field's density scales.",
           "name": "LyraDateInput",
+          "cssProperties": [
+            {
+              "description": "Block padding of the input row, scaled by `size`.",
+              "name": "--lr-date-input-padding-block",
+              "default": "var(--lr-space-xs)"
+            },
+            {
+              "description": "Inline padding of the input row, scaled by `size`.",
+              "name": "--lr-date-input-padding-inline",
+              "default": "var(--lr-space-s)"
+            },
+            {
+              "description": "Font size of the text input, scaled by `size`.",
+              "name": "--lr-date-input-font-size",
+              "default": "inherit"
+            }
+          ],
           "cssParts": [
             {
               "description": "The clear control.",
@@ -89572,6 +90630,23 @@
           "kind": "class",
           "description": "`<lr-emoji-picker>` — a searchable, keyboard-navigable, form-associated emoji picker. In the\nsame \"zero/optional-peer dependency\" spirit as `<lr-lite-chart>`/`<lr-heatmap>`: `groups` is\nfully consumer-suppliable (this component ships no emoji data of its own), with an *optional*\nconvenience auto-loader for a default set — see `emoji-data-loader.ts` and the class doc there for\nexactly what that covers.\n\nKeyboard model: the grid is a roving-tabindex listbox (a single Tab stop — only the active emoji\nis tabbable). Arrow keys move the active option (Left/Right follow reading direction and swap\nunder RTL; Up/Down move by one visual row, measured from the live wrap layout), Home/End jump to\nthe first/last option, and Enter/Space picks. The search input doubles as a `role=\"combobox\"`\nover the same listbox: the arrow keys and Enter also work there while focus stays in the input,\nwith `aria-activedescendant` tracking the active option. Large data sets automatically window\ntheir visible rows so scrolling does not create one button per supplied emoji in the DOM.",
           "name": "LyraEmojiPicker",
+          "cssProperties": [
+            {
+              "description": "Each emoji button's box. Clamped up to `--lr-icon-button-size`: a smaller value does not shrink the button.",
+              "name": "--lr-emoji-picker-item-size",
+              "default": "var(--lr-icon-button-size)"
+            },
+            {
+              "description": "Gap between emoji within a windowed row.",
+              "name": "--lr-emoji-picker-gap",
+              "default": "var(--lr-space-2xs)"
+            },
+            {
+              "description": "One windowed row's height. Must stay at or above the item size plus the group-label band, or consecutive absolutely-positioned rows overlap.",
+              "name": "--lr-emoji-picker-row-height",
+              "default": "calc(var(--lr-emoji-picker-item-size) + var(--lr-space-l))"
+            }
+          ],
           "cssParts": [
             {
               "description": "The root wrapper.",
@@ -89596,6 +90671,22 @@
             {
               "description": "The search/filter `<input>` (`role=\"combobox\"` over the grid).",
               "name": "search"
+            },
+            {
+              "description": "The flex row holding one windowed row's emoji buttons.",
+              "name": "virtual-items"
+            },
+            {
+              "description": "The `aria-hidden` placeholder that reserves a row's group-label band when that row has no label, keeping every row the same height. Rendered on the windowed path only.",
+              "name": "virtual-label"
+            },
+            {
+              "description": "One windowed row, absolutely positioned at the `--lr-emoji-picker-row-height` pitch. Rendered on the windowed path only.",
+              "name": "virtual-row"
+            },
+            {
+              "description": "The full-height scroll spacer that gives the grid its scrollbar while only the visible rows exist in the DOM. Rendered on the windowed path only.",
+              "name": "virtual-spacer"
             }
           ],
           "members": [
@@ -89676,6 +90767,30 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "geometryCache",
+              "type": {
+                "text": "EmojiPickerGeometry | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "geometryObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "geometryProbe",
+              "type": {
+                "text": "{ root: HTMLElement; item: HTMLElement; gap: HTMLElement; row: HTMLElement } | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "gridId",
@@ -89770,6 +90885,11 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "onGeometryResize",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "onGridFocusIn",
@@ -89922,30 +91042,6 @@
               },
               "description": "Options in the first rendered row. Measured from live layout at call time because the\nflex-wrap column count is fluid (container width, emoji font metrics)."
             },
-            {
-              "kind": "method",
-              "name": "cssPixelValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "fallback",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "emit",
@@ -89983,6 +91079,17 @@
                 "module": "src/internal/lyra-element.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "geometry",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "EmojiPickerGeometry"
+                }
+              },
+              "description": "The windowed layout's pixel geometry. `getComputedStyle(host).getPropertyValue('--x')` hands\nback a custom property's *computed token stream* (`2.5rem`, `calc(2.5rem + 1rem)`) and never a\npixel length, so parsing it reads a `rem` value's leading number as pixels and cannot read a\n`calc()` at all. Measuring the probe boxes the stylesheet sizes from those same tokens makes\nthe browser do the unit math instead, for every unit `calc()` included.\n\nMeasured at most once per geometry change, not per frame: the result is cached, and the probe\nboxes themselves are the invalidation signal (see `observeGeometryProbe`)."
+            },
             {
               "kind": "method",
               "name": "haystackFor",
@@ -90038,6 +91145,17 @@
                 "module": "src/internal/lyra-element.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "observeGeometryProbe",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The probe boxes double as the change sensor: anything that can move the geometry -- a token\noverride applied after the first render, a theme swap, a root/host font-size change feeding a\n`rem`/`em` value -- resizes them, so the cached pixels are re-derived exactly when they can\nactually differ, with no per-frame reads."
+            },
             {
               "kind": "method",
               "name": "optionButtons",
@@ -90190,21 +91308,22 @@
             },
             {
               "kind": "method",
-              "name": "syncGridObserver",
+              "name": "syncGeometryProbe",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "description": "Creates the measurement probe the first time the windowed path needs it. Runs before\n`render()` so the very first windowed render already measures real pixels."
             },
             {
               "kind": "method",
-              "name": "virtualRowHeight",
+              "name": "syncGridObserver",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "number"
+                  "text": "void"
                 }
               }
             },
@@ -90305,6 +91424,13 @@
           "kind": "class",
           "description": "`<lr-icon-button>` — an accessible icon-only action button.",
           "name": "LyraIconButton",
+          "cssProperties": [
+            {
+              "description": "Inline and block size of the native button. A library-wide token (declared on `:root` by `tokens.styles.ts`, and the shared minimum tappable size several other components size their icon controls against), so overriding it globally resizes all of them together.",
+              "name": "--lr-icon-button-size",
+              "default": "2.5rem"
+            }
+          ],
           "cssParts": [
             {
               "description": "Native button.",
@@ -90794,6 +91920,18 @@
             {
               "description": "Outer control height floor, scaled by `size`.",
               "name": "--lr-input-control-min-height"
+            },
+            {
+              "description": "Block padding of the native input, scaled by `size`.",
+              "name": "--lr-input-padding-block"
+            },
+            {
+              "description": "Inline padding of the control row, scaled by `size`.",
+              "name": "--lr-input-padding-inline"
+            },
+            {
+              "description": "Font size of the native input, scaled by `size`.",
+              "name": "--lr-input-font-size"
             }
           ],
           "cssParts": [
@@ -91088,17 +92226,18 @@
               "kind": "field",
               "name": "max",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
+              "description": "Upper counterpart of `min`, with the same parsing and the same default of `undefined`.",
               "attribute": "max"
             },
             {
               "kind": "field",
               "name": "min",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
-              "description": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).",
+              "description": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).\nDefaults to `undefined` (no lower bound). The `min` attribute is parsed as a number here; the\ndeclared type also admits a string so a subclass bound to a non-numeric native input type can\nnarrow the attribute parsing to that type's own literal form (`<lr-time-input>`'s `09:00`)\nwithout redeclaring the whole property surface.",
               "attribute": "min"
             },
             {
@@ -91636,16 +92775,17 @@
             {
               "name": "max",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
+              "description": "Upper counterpart of `min`, with the same parsing and the same default of `undefined`.",
               "fieldName": "max"
             },
             {
               "name": "min",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
-              "description": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).",
+              "description": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).\nDefaults to `undefined` (no lower bound). The `min` attribute is parsed as a number here; the\ndeclared type also admits a string so a subclass bound to a non-numeric native input type can\nnarrow the attribute parsing to that type's own literal form (`<lr-time-input>`'s `09:00`)\nwithout redeclaring the whole property surface.",
               "fieldName": "min"
             },
             {
@@ -92060,8 +93200,9 @@
               "kind": "field",
               "name": "max",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
+              "description": "Upper counterpart of `min`, with the same parsing and the same default of `undefined`.",
               "attribute": "max",
               "inheritedFrom": {
                 "name": "LyraInput",
@@ -92072,9 +93213,9 @@
               "kind": "field",
               "name": "min",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
-              "description": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).",
+              "description": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).\nDefaults to `undefined` (no lower bound). The `min` attribute is parsed as a number here; the\ndeclared type also admits a string so a subclass bound to a non-numeric native input type can\nnarrow the attribute parsing to that type's own literal form (`<lr-time-input>`'s `09:00`)\nwithout redeclaring the whole property surface.",
               "attribute": "min",
               "inheritedFrom": {
                 "name": "LyraInput",
@@ -92721,6 +93862,30 @@
                 "name": "LyraInput",
                 "module": "src/components/forms/input/input.class.ts"
               }
+            },
+            {
+              "description": "Block padding of the native input, scaled by `size`.",
+              "name": "--lr-input-padding-block",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "Inline padding of the control row, scaled by `size`.",
+              "name": "--lr-input-padding-inline",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "Font size of the native input, scaled by `size`.",
+              "name": "--lr-input-font-size",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
             }
           ],
           "attributes": [
@@ -92862,8 +94027,9 @@
             {
               "name": "max",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
+              "description": "Upper counterpart of `min`, with the same parsing and the same default of `undefined`.",
               "fieldName": "max",
               "inheritedFrom": {
                 "name": "LyraInput",
@@ -92873,9 +94039,9 @@
             {
               "name": "min",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
-              "description": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).",
+              "description": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).\nDefaults to `undefined` (no lower bound). The `min` attribute is parsed as a number here; the\ndeclared type also admits a string so a subclass bound to a non-numeric native input type can\nnarrow the attribute parsing to that type's own literal form (`<lr-time-input>`'s `09:00`)\nwithout redeclaring the whole property surface.",
               "fieldName": "min",
               "inheritedFrom": {
                 "name": "LyraInput",
@@ -93070,7 +94236,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<lr-time-input>` — a native time-input alias with Lyra form chrome and events.",
+          "description": "`<lr-time-input>` — a native time-input alias with Lyra form chrome and events.\n\nAdds no API of its own beyond re-typing the inherited `min`/`max` bounds for time values; every\nother property, event, slot and part is `<lr-input>`'s.",
           "name": "LyraTimeInput",
           "members": [
             {
@@ -93368,8 +94534,9 @@
               "kind": "field",
               "name": "max",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
+              "description": "Latest selectable time, in the same form as `min`, reported by the native input as\n`rangeOverflow`. Defaults to `undefined` (no upper bound).",
               "attribute": "max",
               "inheritedFrom": {
                 "name": "LyraInput",
@@ -93380,9 +94547,9 @@
               "kind": "field",
               "name": "min",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
-              "description": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).",
+              "description": "Earliest selectable time, as the native `<input type=\"time\">` spells it (`HH:MM`, or\n`HH:MM:SS` alongside a seconds-precision `step`). Forwarded verbatim to that native input,\nwhose own constraint validation reports `rangeUnderflow`. Defaults to `undefined` (no lower\nbound). Unlike `<lr-input type=\"number\">`'s numeric `min`, the attribute form is *not*\nparsed as a number.",
               "attribute": "min",
               "inheritedFrom": {
                 "name": "LyraInput",
@@ -93891,146 +95058,6 @@
               }
             }
           ],
-          "superclass": {
-            "name": "LyraInput",
-            "module": "/src/components/forms/input/input.class.js"
-          },
-          "tagName": "lr-time-input",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "Adornment after the native input and built-in actions.",
-              "name": "end",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "Custom error content.",
-              "name": "error",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "Custom hint content.",
-              "name": "hint",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "Custom label content.",
-              "name": "label",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "Adornment before the native input.",
-              "name": "start",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The clear action, rendered for non-empty clearable text/search inputs.",
-              "name": "clear-button",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "Wrapper around the `end` adornment slot.",
-              "name": "end",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "The error message.",
-              "name": "error",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "The outer wrapper around label, input, error and hint.",
-              "name": "form-control",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "The `<label>` element.",
-              "name": "form-control-label",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "The hint message.",
-              "name": "hint",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "The native `<input>` element.",
-              "name": "input",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "The row wrapping the native input and the password-toggle button.",
-              "name": "input-wrapper",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "The show/hide-password button, present only when `type=\"password\"`.",
-              "name": "password-toggle",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            },
-            {
-              "description": "Wrapper around the `start` adornment slot.",
-              "name": "start",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            }
-          ],
-          "cssProperties": [
-            {
-              "description": "Outer control height floor, scaled by `size`.",
-              "name": "--lr-input-control-min-height",
-              "inheritedFrom": {
-                "name": "LyraInput",
-                "module": "src/components/forms/input/input.class.ts"
-              }
-            }
-          ],
           "attributes": [
             {
               "name": "aria-label",
@@ -94170,8 +95197,9 @@
             {
               "name": "max",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
+              "description": "Latest selectable time, in the same form as `min`, reported by the native input as\n`rangeOverflow`. Defaults to `undefined` (no upper bound).",
               "fieldName": "max",
               "inheritedFrom": {
                 "name": "LyraInput",
@@ -94181,9 +95209,9 @@
             {
               "name": "min",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
-              "description": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).",
+              "description": "Earliest selectable time, as the native `<input type=\"time\">` spells it (`HH:MM`, or\n`HH:MM:SS` alongside a seconds-precision `step`). Forwarded verbatim to that native input,\nwhose own constraint validation reports `rangeUnderflow`. Defaults to `undefined` (no lower\nbound). Unlike `<lr-input type=\"number\">`'s numeric `min`, the attribute form is *not*\nparsed as a number.",
               "fieldName": "min",
               "inheritedFrom": {
                 "name": "LyraInput",
@@ -94278,6 +95306,170 @@
               }
             }
           ],
+          "superclass": {
+            "name": "LyraInput",
+            "module": "/src/components/forms/input/input.class.js"
+          },
+          "tagName": "lr-time-input",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "Adornment after the native input and built-in actions.",
+              "name": "end",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "Custom error content.",
+              "name": "error",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "Custom hint content.",
+              "name": "hint",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "Custom label content.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "Adornment before the native input.",
+              "name": "start",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The clear action, rendered for non-empty clearable text/search inputs.",
+              "name": "clear-button",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "Wrapper around the `end` adornment slot.",
+              "name": "end",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "The error message.",
+              "name": "error",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "The outer wrapper around label, input, error and hint.",
+              "name": "form-control",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "The `<label>` element.",
+              "name": "form-control-label",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "The hint message.",
+              "name": "hint",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "The native `<input>` element.",
+              "name": "input",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "The row wrapping the native input and the password-toggle button.",
+              "name": "input-wrapper",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "The show/hide-password button, present only when `type=\"password\"`.",
+              "name": "password-toggle",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "Wrapper around the `start` adornment slot.",
+              "name": "start",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            }
+          ],
+          "cssProperties": [
+            {
+              "description": "Outer control height floor, scaled by `size`.",
+              "name": "--lr-input-control-min-height",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "Block padding of the native input, scaled by `size`.",
+              "name": "--lr-input-padding-block",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "Inline padding of the control row, scaled by `size`.",
+              "name": "--lr-input-padding-inline",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            },
+            {
+              "description": "Font size of the native input, scaled by `size`.",
+              "name": "--lr-input-font-size",
+              "inheritedFrom": {
+                "name": "LyraInput",
+                "module": "src/components/forms/input/input.class.ts"
+              }
+            }
+          ],
           "events": [
             {
               "description": "Re-dispatched from the internal native `<input>`'s own `blur` — bubbling and composed (unlike the native event, which is neither).",
@@ -97340,6 +98532,7 @@
               "type": {
                 "text": "NodeList"
               },
+              "description": "Delegates straight to `ElementInternals.labels` -- no logic of its own. Reading it from this\ncomponent's minimal (no wrapping `<form>`, no `keys`) fixture reliably hangs headless Chromium\nindefinitely (very likely a Playwright/Chromium defect in the native accessor itself, not\nanything this getter does); see\n`docs/superpowers/feature_requests/2026-07-19-latent-bugs-found-during-coverage-push.md` item 3.\n`rubric-form.test.ts`'s getters test deliberately omits a `.labels` assertion because of this --\ndo not add one back without first confirming the hang is actually resolved.",
               "readonly": true
             },
             {
@@ -98092,6 +99285,23 @@
             {
               "description": "Decorative expand-icon box size, scaled by `size`.",
               "name": "--lr-select-expand-size"
+            },
+            {
+              "description": "Trigger padding shorthand, scaled by `size`.",
+              "name": "--lr-select-trigger-padding"
+            },
+            {
+              "description": "Trigger block-size floor, scaled by `size`. Applied only for the `xs`/`s`/`l`/`xl` tiers — see the stylesheet note; the default tier stays floor-free.",
+              "name": "--lr-select-trigger-min-height"
+            },
+            {
+              "description": "Trigger font size, scaled by `size`.",
+              "name": "--lr-select-font-size"
+            },
+            {
+              "description": "Exact trigger height. Left at `auto` the trigger is floored only; set it to a length to both floor and cap the trigger (e.g. to pixel-match a sibling field in the same row).",
+              "name": "--lr-select-trigger-height",
+              "default": "auto"
             }
           ],
           "cssParts": [
@@ -100051,7 +101261,7 @@
             {
               "description": "Blur radius of that same ring. 0 by default (a crisp ring); set a real length (e.g. 0.4rem) for a soft glow instead.",
               "name": "--lr-swatch-picker-selected-blur",
-              "default": "0px"
+              "default": "0"
             },
             {
               "description": "Duration of a rhythmic brighten-and-settle \"shine\" on the selected swatch. `0s` (the default) is a no-op -- today's static look for every existing consumer. Set a real duration (e.g. 1.6s) for a pulsing shine; disabled outright under `prefers-reduced-motion: reduce`. Independent of `--lr-swatch-picker-selected-blur` (a separate `filter: brightness()` animation, not `box-shadow`), so the two compose freely, and works identically for a plain color circle and an icon swatch alike.",
@@ -100523,6 +101733,23 @@
           "kind": "class",
           "description": "`<lr-switch>` — a boolean toggle-switch form control. Structurally the\nsame idea as a checkbox (form-associated via `ElementInternals`, click and\nSpace/Enter both toggle) but with switch semantics: `role=\"switch\"` +\n`aria-checked` read to assistive tech as an on/off state rather than a\nchecked/unchecked one, and there is no indeterminate state.\n\n`checked` is not a plain string, so this attaches `ElementInternals`\ndirectly and implements its own `updateValidity()` rather than using the\n`FormAssociated` mixin (that mixin's `value` accessor assumes a string —\nsee `<lr-combobox>` for the same direct-`ElementInternals` shape with a\nnon-string value).\n\nShips an opt-in `hint`/`errorText` form-control chrome (props + matching named slots +\n`hint`/`error` CSS parts), mirroring `<lr-select>`'s pattern for those two pieces -- left\nunset, neither renders. Deliberately no separate top-of-field `label` prop/slot/part mirroring\n`<lr-select>`'s `form-control-label`: the default slot already *is* this control's visible,\nclickable label (same as `<lr-checkbox>`), so a second label surface would be redundant.",
           "name": "LyraSwitch",
+          "cssProperties": [
+            {
+              "description": "Inline size of the track, and (with the block size) the distance the thumb travels when checked.",
+              "name": "--lr-switch-track-inline-size",
+              "default": "var(--lr-size-2-25rem)"
+            },
+            {
+              "description": "Block size of the track; the thumb's diameter is derived from it minus twice `--lr-switch-thumb-offset`.",
+              "name": "--lr-switch-track-block-size",
+              "default": "var(--lr-size-1-25rem)"
+            },
+            {
+              "description": "Inset of the thumb from the track's edges.",
+              "name": "--lr-switch-thumb-offset",
+              "default": "var(--lr-size-2px)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The whole interactive control (`role=\"switch\"`); wraps the track and label.",
@@ -103182,6 +104409,18 @@
           "kind": "class",
           "description": "`<lr-token-input>` — an editable, form-associated list of removable tokens.",
           "name": "LyraTokenInput",
+          "cssProperties": [
+            {
+              "description": "`flex-basis` of the native text input within the token row.",
+              "name": "--lr-token-input-input-inline-size",
+              "default": "var(--lr-size-8rem)"
+            },
+            {
+              "description": "Inline-size floor of the native text input, so it stays usable once tokens wrap.",
+              "name": "--lr-token-input-min-input-inline-size",
+              "default": "var(--lr-size-4rem)"
+            }
+          ],
           "cssParts": [
             {
               "description": "Validation message.",
@@ -104644,6 +105883,28 @@
           "kind": "class",
           "description": "`<lr-app-rail>` — a responsive navigation rail that adapts across three\npresentations as the *viewport* narrows (not this element's own inline\nsize — see the `mode` accessor doc for why): `'full'` (nav items show\nicon + label, inline), `'icon-only'` (a narrower inline rail, icons only),\nand `'mobile'` (hidden behind a toggle button; opening it shows a\nfocus-trapped floating overlay over the page).\n\nBreakpoints are viewport-width `matchMedia()` queries against\n`icon-only-breakpoint`/`mobile-breakpoint`, not a `ResizeObserver` on this\nelement — a nav rail's presentation should track the actual device/window\nwidth the way a native OS shell's navigation does, not however much\nhorizontal space a particular layout happens to give it.\n\nThe `'mobile'` state participates in the library's shared overlay stack,\nwhich supplies focus trapping, Escape/backdrop dismissal, inerting, and\nfocus restoration without nesting a `<lr-dialog>` in this component's\nshadow template. `[part=\"base\"]` (the inline\n`'full'`/`'icon-only'` presentation) and `[part=\"panel\"]` (the mobile\noverlay) are the *same* element promoted in place across modes (mirrors\n`<lr-widget>`'s fullscreen mode) — never both at once, and never two\nseparate copies of the slotted content, which slot projection can't\nproduce anyway (a light-DOM node is only ever assigned to one `<slot>`).\nIt's a plain `<div>` with an explicit `role=\"navigation\"` rather than a\nliteral `<nav>` tag: a `<nav>`'s implicit role can't be overridden to\n`role=\"dialog\"` while the overlay is modal without an `aria-allowed-role`\nviolation (verified against axe), whereas an explicit `role=\"navigation\"`\non a generic element can be swapped for `role=\"dialog\"` freely.",
           "name": "LyraAppRail",
+          "cssProperties": [
+            {
+              "description": "The inline rail's width in `'full'` mode. Overridden by an inline width while a `resizable` rail has an explicit `railWidthPx`.",
+              "name": "--lr-app-rail-width",
+              "default": "var(--lr-size-15rem)"
+            },
+            {
+              "description": "The inline rail's width in `'icon-only'` mode, and the maximum width of each slotted `<lr-app-rail-item>` in that mode.",
+              "name": "--lr-app-rail-icon-width",
+              "default": "var(--lr-size-4rem)"
+            },
+            {
+              "description": "The mobile overlay panel's width, capped at `85vw`.",
+              "name": "--lr-app-rail-mobile-width",
+              "default": "var(--lr-size-18rem)"
+            },
+            {
+              "description": "The mobile overlay scrim's background.",
+              "name": "--lr-app-rail-overlay-color",
+              "default": "var(--lr-color-overlay)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The mobile overlay's scrim. Only rendered while open.",
@@ -106476,7 +107737,8 @@
           "cssProperties": [
             {
               "description": "Gap between grouped controls.",
-              "name": "--lr-button-group-gap"
+              "name": "--lr-button-group-gap",
+              "default": "var(--lr-space-2xs)"
             }
           ],
           "cssParts": [
@@ -108426,6 +109688,33 @@
           "kind": "class",
           "description": "`<lr-command-palette>` — searchable application command menu with keyboard navigation.\nShared overlay infrastructure (the same one `<lr-dialog>` uses) coordinates focus-trapping\nTab, Escape dismissal, and document scroll-locking for as long as the palette is open.",
           "name": "LyraCommandPalette",
+          "cssProperties": [
+            {
+              "description": "Stacking index of the backdrop.",
+              "name": "--lr-command-palette-z-index",
+              "default": "var(--lr-overlay-stack-index, var(--lr-layer-modal))"
+            },
+            {
+              "description": "Maximum dialog width.",
+              "name": "--lr-command-palette-max-inline-size",
+              "default": "var(--lr-size-48rem)"
+            },
+            {
+              "description": "Maximum dialog height.",
+              "name": "--lr-command-palette-max-block-size",
+              "default": "70vh"
+            },
+            {
+              "description": "Maximum height of the scrolling command list.",
+              "name": "--lr-command-palette-list-max-block-size",
+              "default": "50vh"
+            },
+            {
+              "description": "Gap between the viewport top and the dialog.",
+              "name": "--lr-command-palette-offset-block-start",
+              "default": "12vh"
+            }
+          ],
           "cssParts": [
             {
               "description": "Modal backdrop.",
@@ -108435,10 +109724,22 @@
               "description": "A command button.",
               "name": "command"
             },
+            {
+              "description": "A command's secondary description text. Rendered for every command; empty when the command has no `description`.",
+              "name": "description"
+            },
             {
               "description": "Palette dialog.",
               "name": "dialog"
             },
+            {
+              "description": "The \"no results\" message. Only rendered when the filter matches no command.",
+              "name": "empty"
+            },
+            {
+              "description": "A group heading, rendered before the first command of each `group`.",
+              "name": "group"
+            },
             {
               "description": "Search input.",
               "name": "input"
@@ -108446,6 +109747,14 @@
             {
               "description": "Command list.",
               "name": "list"
+            },
+            {
+              "description": "The search row wrapping the leading icon and the `input`.",
+              "name": "search"
+            },
+            {
+              "description": "A command's trailing shortcut hint. Only rendered when the command has a `shortcut`.",
+              "name": "shortcut"
             }
           ],
           "members": [
@@ -109080,7 +110389,8 @@
           "cssProperties": [
             {
               "description": "Gap between grouped controls.",
-              "name": "--lr-control-group-gap"
+              "name": "--lr-control-group-gap",
+              "default": "var(--lr-space-xs)"
             }
           ],
           "cssParts": [
@@ -109466,6 +110776,23 @@
           "kind": "class",
           "description": "`<lr-dashboard-grid>` — a responsive, keyboard-accessible widget grid: positions `layout`\nentries (`DashboardCell`: `x`/`y`/`w`/`h` grid units + a widget descriptor) on a CSS Grid,\ncomposing `<lr-widget>` + `<lr-widget-renderer>` for each cell's default content, and owns all\ndrag/resize/collision interaction as controlled events -- it never mutates `layout` itself, nor\never touches `localStorage`/network; the host applies (or ignores) every emitted event and owns\npersistence entirely, mirroring `lr-flow-canvas`/`lr-table`'s own controlled-component\nconvention. Readonly (viewer) by default; opt into editor gestures individually via\n`cells-draggable`/`cells-resizable`, or lock the whole grid via `locked`.\n\nCell content: a `layout` entry with no matching light-DOM child (matched by `cell-id`) gets a\ndefault `<lr-widget label=\"...\">` wrapping an `<lr-widget-renderer .tree=${cell.widget}>`\nauto-created and adopted into `slot=\"cell-{id}\"` -- this component's own job is the grid\nlayout/drag/resize/collision/persistence-event mechanics *around* that content, not widget\nrendering itself (see `lr-widget-renderer`'s own doc for its declarative-tree contract). A\nconsumer wanting full control over one cell's markup can instead author\n`<div cell-id=\"...\">...</div>` as a direct child; it is adopted in place of the default cell.\n\nKeyboard: cells share one roving tabindex, in row-major (`sortSpatial`) order. Arrow\nkeys/Home/End move the roving focus (RTL-aware: physical Left/Right always match what the\ncursor visually does, matching `lr-flow-canvas`'s own convention). While a cell has focus,\nCtrl/Cmd+Arrow moves it by one grid unit and Ctrl/Cmd+Shift+Arrow resizes it by one grid unit\n(Right/Down grow, Left/Up shrink) -- the full keyboard-operable equivalent of the pointer\ndrag/resize gestures below, per this library's accessibility bar (no pointer-only interaction).\n\nCollision: every move/resize request -- pointer or keyboard -- is resolved through `collision`\n(`'reject'` the default, `'push'`, or `'overlap'`; see `resolvePlacement()` in `layout.ts` for\nthe exact rule). A rejected request leaves `layout` untouched and only announces; an accepted\none emits `lr-cell-move`/`lr-cell-resize` plus a `lr-layout-change` snapshot of the full\nproposed layout (including any `'push'` cascade) -- the host's one persistence hook: listen for\nit and persist `event.detail.layout` however it likes (`localStorage`, a network call, neither).\n\nResponsive: below a ~40rem container allocation (`@container`, not the viewport -- a dashboard\ngrid is commonly embedded in a panel of varying width), cells stack into a single flowing\ncolumn in the same row-major order the grid itself renders them in, instead of overflowing or\nshrinking columns unreadably.",
           "name": "LyraDashboardGrid",
+          "cssProperties": [
+            {
+              "description": "Column count of the underlying CSS Grid. Written inline on `[part=\"base\"]` from the `columns` property on every render, so the fallback only applies to a `[part=\"base\"]` this component has not rendered yet.",
+              "name": "--lr-dashboard-grid-columns",
+              "default": "12"
+            },
+            {
+              "description": "Row track height. Written inline on `[part=\"base\"]` from the `rowHeight` property (in px) on every render.",
+              "name": "--lr-dashboard-grid-row-height",
+              "default": "var(--lr-size-5rem)"
+            },
+            {
+              "description": "Gap between cells on both axes. Written inline on `[part=\"base\"]` from the `gap` property (in px) on every render.",
+              "name": "--lr-dashboard-grid-gap",
+              "default": "var(--lr-space-m)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The grid root.",
@@ -112035,6 +113362,13 @@
           "kind": "class",
           "description": "`<lr-dock-panel>` — a single panel docked to one edge of whatever\ncontains it, resizable by dragging its inner edge. Unlike `<lr-split>`\n(which owns and lays out N sibling panels, and requires restructuring a\nlayout so every panel becomes its direct child), this is one self-\ncontained element you drop next to your existing content -- typically as\nan absolutely-positioned child of a `position: relative` parent, or as a\nflex item alongside a main-content sibling. It deliberately imposes no\n`position`/`inset` of its own (see the styles module): it only manages its\nown size along the resize axis (`inline-size` for `start`/`end`,\n`block-size` for `top`/`bottom`) and fills 100% of the cross axis, leaving\nwhere it sits in the page entirely up to the consumer's own layout.\n\n`lr-split` stays the right primitive for the multi-sibling-panel case;\nthis is the primitive for the single-edge-docked case, kept as a separate\ncomponent rather than a second mode bolted onto `lr-split`'s API.\n\nPointer-drag-resize mirrors `lr-split`'s pointer-capture technique\n(pointerdown captures the pointer on the handle, pointermove computes a\nnew size, pointerup/pointercancel/lostpointercapture all release it) but\nfor a single draggable edge instead of N-1 dividers between N panels, and\nreasons in raw pixels throughout rather than percent -- `size` is a CSS\nlength, and pointer movement is naturally pixels, so there's no percent\ndomain to convert through here. Every resize (drag step, drag release, or\nkeyboard step) always commits `size` as a `px` string regardless of what\nunit `size`/`min-size`/`max-size` were originally expressed in -- a drag\ninherently produces a pixel-precise result, so re-expressing it in the\ncaller's original unit (e.g. back into `rem`) would just be lossy\nre-derivation for no benefit.\n\nCollapsing hides the slotted content but keeps the panel itself at a\nsmall persistent \"rail\" width/height (`--lr-dock-panel-collapsed-size`,\ndefault `var(--lr-icon-button-size)`) rather than collapsing to zero --\na zero-size collapsed panel would have nowhere left to host the toggle\nbutton that re-expands it. `size` itself is left untouched while\ncollapsed, so re-expanding restores exactly what it was.",
           "name": "LyraDockPanel",
+          "cssProperties": [
+            {
+              "description": "The extent the panel keeps along its resize axis while `collapsed` -- enough to still host the toggle button that re-expands it.",
+              "name": "--lr-dock-panel-collapsed-size",
+              "default": "var(--lr-icon-button-size)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The panel root.",
@@ -115931,6 +117265,13 @@
           "kind": "class",
           "description": "`<lr-responsive-panel>` — the same slotted content either docked inline\nin the page's normal layout flow (desktop) or presented as a full-screen/\nbottom-sheet overlay (mobile), depending on viewport width. Typical uses:\na settings panel or a conversation-history sidebar that's a permanent\ndocked pane on a wide screen but a modal on a phone.\n\nBreakpoint detection uses `matchMedia('(max-width: ' + mobileBreakpoint +\n')')`, re-evaluated live while connected -- resizing/rotating a device\nthat crosses the breakpoint while `mode=\"auto\"` (the default) updates the\neffective presentation without unmounting or re-creating the slotted\ncontent: inline and overlay presentation share the exact same shadow DOM\nstructure (only a css class, and the overlay-only `role`/`aria-modal`\nattributes and backdrop element, differ), so lit-html's diffing keeps\n`[part=\"body\"]` and its `<slot>` as the same DOM node across the\ntransition -- scroll position and focus inside the slotted content survive\nit for free. When an open inline panel becomes modal, focus already inside\nis preserved and outside focus moves to the first available target. Closing\nstill returns to the opener captured by the original inline open.\n\nThe overlay presentation uses the library's shared overlay coordinator for\nfocus trapping, Escape/backdrop dismissal, inerting, and stack ordering,\nwhile retaining this component's own responsive rendering and close event.\n\nAccessible name (overlay presentation only -- the inline presentation has\nno dialog semantics to name), in priority order: if the host element itself\nhas an `aria-label` attribute set, its value wins outright, overriding\nevery source below -- the standard ARIA convention for a consumer that\nwants full control over the announced name, matching lr-dialog's\n`accessibleLabel` pattern. Otherwise `label`, when set, is used verbatim.\nWhen both are empty, this falls back to the `header` slot's content -- a\nheading element (`h1`–`h6` or `[role=\"heading\"]`) among the slotted header\ncontent wins if present, otherwise the header slot's full text content is\nused, mirroring lr-dialog's `detectHeading()`/`headingText` fallback (see\ndialog.ts's module doc for why this uses `aria-label`, a copied string,\nrather than `aria-labelledby`: the header content is light DOM while\n`[part=\"panel\"]` lives in this element's shadow tree, and an ID-reference\nattribute can't resolve across that boundary). A panel opened without a\nhost `aria-label`, `label`, or header content still renders `role=\"dialog\"`\nwith no accessible name -- set one of those to avoid that.",
           "name": "LyraResponsivePanel",
+          "cssProperties": [
+            {
+              "description": "The overlay presentation's scrim color, applied to `[part=\"backdrop\"]`.",
+              "name": "--lr-responsive-panel-overlay-color",
+              "default": "var(--lr-color-overlay)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The full-viewport scrim behind the panel -- only rendered in the overlay presentation.",
@@ -116695,11 +118036,13 @@
           "cssProperties": [
             {
               "description": "Control size.",
-              "name": "--lr-scroller-control-size"
+              "name": "--lr-scroller-control-size",
+              "default": "var(--lr-size-2rem)"
             },
             {
               "description": "Minimum vertical scroller size.",
-              "name": "--lr-scroller-min-block-size"
+              "name": "--lr-scroller-min-block-size",
+              "default": "var(--lr-size-10rem)"
             }
           ],
           "cssParts": [
@@ -117288,6 +118631,21 @@
               "description": "Width of the static fade at each horizontal scroll edge.",
               "name": "--lr-scroll-fade-size",
               "default": "2rem"
+            },
+            {
+              "description": "Minimum height of the `base` track. Re-set per `size` (`2xs` through `xl`); the `auto` default applies at the unset/`m` size.",
+              "name": "--lr-segmented-track-min-height",
+              "default": "auto"
+            },
+            {
+              "description": "Each segment's padding. Re-set per `size`; this default applies at the unset/`m` size.",
+              "name": "--lr-segmented-segment-padding",
+              "default": "var(--lr-size-0-125rem) var(--lr-space-s)"
+            },
+            {
+              "description": "Each segment's font size. Re-set per `size`; this default applies at the unset/`m` size.",
+              "name": "--lr-segmented-font-size",
+              "default": "var(--lr-font-size-sm)"
             }
           ],
           "cssParts": [
@@ -117774,6 +119132,13 @@
           "kind": "class",
           "description": "`<lr-split>` — resizable panels for dashboard layouts. Direct light-DOM\nchildren are the panels; a divider is auto-inserted between each pair.\n\nOptionally, one pane can opt in to responsive collapse via `collapse`\n(`\"start\"`/`\"end\"`, default `\"none\"` — no behavior change when unset): as\nthe split's own container narrows past `railBreakpoint` that pane clamps\nto a fixed `railWidth`, and past the narrower `floatBreakpoint` it instead\nbecomes an absolutely-positioned overlay \"floating card\" above the other\npane. This component only handles the width-collapse mechanics and\nsignals the current state — via the `collapseState`-derived\n`data-collapse-state` attribute (set on both the host and the collapsing\npanel itself) and the `lr-split-collapse-change` event — it renders no\nicon-only/collapsed UI of its own; slotted content is expected to adapt to\nits own clamped width (e.g. via its own container query).\n\n`collapseState` is a public accessor with force/auto semantics mirroring\n`<lr-app-rail>`'s `mode`: it's normally derived automatically from the\nmeasured container width (via a `ResizeObserver` on `[part=\"base\"]`)\nwhenever it crosses `railBreakpoint`/`floatBreakpoint`, but assigning it a\nconcrete `'wide'`/`'rail'`/`'floating'` value pins it there and stops that\nautomatic tracking — useful for a consumer-driven toggle (e.g. a button\nthat forces `'floating'` regardless of width). Assigning the write-only\n`'auto'` sentinel releases the pin and immediately re-derives the state\nfrom the current measured width, resuming automatic tracking. `'auto'` is\nnever a value this getter returns.\n\nThe `'floating'` state is a hidden-by-default drawer, gated by `open`\n(mirrors `<lr-app-rail>`'s mobile overlay): while `collapseState` is\n`'floating'` and `open` is `false` (the default), the collapsing panel\nrenders nothing — `hidden`, out of the accessibility tree, not just\nvisually hidden — instead of the always-visible overlay card this state\nrendered before `open` existed. Setting `open = true` reveals it as a\nfocus-trapped floating panel with a `[part=\"backdrop\"]` scrim; Escape or a\nbackdrop click set `open` back to `false`. `open` is preserved (not reset)\nwhile `collapseState` isn't `'floating'`, but no drawer chrome renders\nuntil it is again — except that leaving `'floating'` while `open` is\n`true` (a breakpoint crossing back to `'wide'`/`'rail'`, or a forced\nreassignment) also closes it, the same way `<lr-app-rail>` closes its\nmobile overlay when leaving `'mobile'` while open.",
           "name": "LyraSplit",
+          "cssProperties": [
+            {
+              "description": "The `'floating'` drawer scrim's color, applied to `[part=\"backdrop\"]`.",
+              "name": "--lr-split-overlay-color",
+              "default": "var(--lr-color-overlay)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The `'floating'` drawer's scrim. Only rendered while `collapseState === 'floating'` and `open`.",
@@ -117958,7 +119323,7 @@
               "type": {
                 "text": "SplitOrientation"
               },
-              "description": "The live layout and resize axis after applying `orientationBreakpoint` — identical to\n`orientation` whenever `orientationBreakpoint` is unset. Also reflected as the\n`data-effective-orientation` host attribute (only present while `orientationBreakpoint`\nis set, mirroring `data-collapse-state`'s only-present-while-active contract) so CSS can\ntarget the live axis directly instead of every consumer duplicating this fallback.",
+              "description": "The live layout and resize axis after applying `orientationBreakpoint` — identical to\n`orientation` whenever `orientationBreakpoint` is unset (or set to something that doesn't\nresolve to a length). Also reflected as the `data-effective-orientation` host attribute (only\npresent while `orientationBreakpoint` resolves, mirroring `data-collapse-state`'s\nonly-present-while-active contract) so CSS can\ntarget the live axis directly instead of every consumer duplicating this fallback.",
               "readonly": true
             },
             {
@@ -118107,11 +119472,29 @@
               "kind": "field",
               "name": "orientationBreakpoint",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
-              "description": "Opt-in inline-size breakpoint (px). Below it, `narrowOrientation` becomes effective.",
+              "description": "Opt-in inline-size breakpoint for this component's *own* measured allocation. Below it,\n`narrowOrientation` becomes effective. Unset by default — the whole responsive-orientation\nfeature (and its `ResizeObserver`) is off, and `effectiveOrientation` just tracks\n`orientation`.\n\nAccepts a bare pixel number (`900`, `orientation-breakpoint=\"900\"` — the original form) or a\nCSS length string: `'900px'`, `'56.25rem'`, `'3em'`. Under the default\n`orientationBreakpointBasis=\"container\"`, `rem` resolves against the *document root*'s\ncomputed font size — the rule a `@container` query follows, not a `@media` query's — and `em`\nagainst this element's own computed font size. The length is re-resolved on every measurement,\nnever cached at first render, so a root font-size change moves the crossing width with no\ninvalidation step. To stay in step with a sibling `@media (max-width: 56.25rem)` rule, use\n`orientationBreakpointBasis=\"viewport\"`, which hands the length to the browser instead; see\nthat property for why the two resolve `rem` differently.\n\nAnything else — `''`, `'auto'`, garbage, a non-finite number, and deliberately `%`/`vw`/`vh`/\n`calc()` (which would mix reference boxes against an element-relative measurement) — behaves\nexactly as unset. Set `orientationBreakpointBasis=\"viewport\"` for a viewport-relative\nbreakpoint instead.",
               "attribute": "orientation-breakpoint"
             },
+            {
+              "kind": "field",
+              "name": "orientationBreakpointBasis",
+              "type": {
+                "text": "OrientationBreakpointBasis"
+              },
+              "default": "'container'",
+              "description": "Which box `orientationBreakpoint` measures. `'container'` (the default) observes this\ncomponent's own `[part=\"base\"]` inline size via `ResizeObserver`, comparing strictly `<`.\n`'viewport'` instead evaluates `matchMedia('(max-width: <breakpoint>)')`, which is inclusive\n(`<=`) — native `max-width` semantics, deliberately, so the crossing point matches a CSS\n`@media` rule authored with the same length exactly.\n\nUse `'viewport'` when two siblings in one row must flip together at a shared breakpoint: a row\nthat stacks via a pure-CSS `@media` rule makes each sibling's own width non-monotonic across\nthe transition, so no self-measured threshold can express it. `'viewport'` also lets the\nbrowser resolve a `rem` breakpoint with real `@media` semantics, keeping it in step with such\na rule across browser zoom and user font-size preferences.",
+              "attribute": "orientation-breakpoint-basis",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "orientationBreakpoints",
+              "privacy": "private",
+              "default": "new OrientationBreakpointController(this, () => this.updateEffectiveOrientation(this.measuredInlineSize, true), )",
+              "description": "Owns breakpoint resolution, basis selection, and the viewport `MediaQueryList` lifecycle\n(including teardown on disconnect) — see `OrientationBreakpointController`."
+            },
             {
               "kind": "field",
               "name": "overlayActive",
@@ -118187,6 +119570,16 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "resolvedOrientationBreakpoint",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private",
+              "description": "`orientationBreakpoint` resolved to pixels, or `undefined` when it's unset or unresolvable\n(see the property's own doc). Deliberately a getter, not a cached field: every read\nre-resolves, so a `rem` breakpoint tracks the live root font size — caching it at first render\nwould silently freeze the crossing width and defeat the whole point of accepting `rem`. `this`\nis passed as the `em` reference element.\n\nEvery consumer of the breakpoint gates on *this* rather than on `orientationBreakpoint != null`\n— an unresolvable value (`\"abc\"`, `\"80vw\"`) must behave as fully unset, otherwise it would arm\nthe `ResizeObserver` and publish a `data-effective-orientation` marker for a threshold that can\nnever be crossed.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "responsiveObservationEnabled",
@@ -118194,7 +119587,7 @@
                 "text": "boolean"
               },
               "privacy": "private",
-              "description": "Whether the shared collapse/orientation `ResizeObserver` needs to be armed at all — true\nwhen either responsive feature (`collapse` or `orientationBreakpoint`) is opted into, since\nboth are driven off the same measured `[part=\"base\"]` width (see `armCollapseObserver()`).",
+              "description": "Whether the shared collapse/orientation `ResizeObserver` needs to be armed at all — true when\neither responsive feature (`collapse` or a *container-basis* `orientationBreakpoint`) is opted\ninto, since both are driven off the same measured `[part=\"base\"]` width (see\n`armCollapseObserver()`). A viewport-basis breakpoint is driven by `matchMedia` instead and\ncontributes no arming of its own.",
               "readonly": true
             },
             {
@@ -118833,7 +120226,7 @@
                   }
                 }
               ],
-              "description": "Classifies a measured inline size into the effective resize/layout axis and, only on an\nactual transition, applies it — mirrors `updateCollapseState()`'s shape. `shouldEmit` is\nfalse for the property-driven re-derivation in `willUpdate()` (no fresh measurement, just\nre-mapping the last known width) and true for the shared `ResizeObserver` callback's fresh\nmeasurement, matching `applyCollapseStateChange()`'s only-fire-on-a-real-transition contract\nfor `lr-split-orientation-change`. Safe to call `requestUpdate()` unconditionally here even\nfrom the mid-cycle `willUpdate()` path — see `willUpdate()`'s own doc comment for why that's\nthe documented exception (unlike `updated()`/`firstUpdated()`, `willUpdate()` runs before\nLit clears its pending-update flag, so this can't schedule a redundant second update)."
+              "description": "Classifies a measured inline size into the effective resize/layout axis and, only on an\nactual transition, applies it — mirrors `updateCollapseState()`'s shape. `shouldEmit` is\ntrue only when the caller is acting on a *fresh* read: the shared `ResizeObserver`\ncallback's own fresh measurement (container basis), or the `willUpdate()` caller when basis\nis `'viewport'` (where `configure()` just re-armed `matchMedia` synchronously, so `isBelow()`\nis already live rather than a stale snapshot). It's false for the container-basis\nproperty-driven re-derivation in `willUpdate()`, which only re-maps the last known\n`measuredInlineSize` and defers the emit to the `ResizeObserver`'s next fresh callback.\nMatches `applyCollapseStateChange()`'s only-fire-on-a-real-transition contract for\n`lr-split-orientation-change`. Safe to call `requestUpdate()` unconditionally here even from\nthe mid-cycle `willUpdate()` path — see `willUpdate()`'s own doc comment for why that's the\ndocumented exception (unlike `updated()`/`firstUpdated()`, `willUpdate()` runs before Lit\nclears its pending-update flag, so this can't schedule a redundant second update)."
             },
             {
               "kind": "method",
@@ -118949,11 +120342,20 @@
             {
               "name": "orientation-breakpoint",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
-              "description": "Opt-in inline-size breakpoint (px). Below it, `narrowOrientation` becomes effective.",
+              "description": "Opt-in inline-size breakpoint for this component's *own* measured allocation. Below it,\n`narrowOrientation` becomes effective. Unset by default — the whole responsive-orientation\nfeature (and its `ResizeObserver`) is off, and `effectiveOrientation` just tracks\n`orientation`.\n\nAccepts a bare pixel number (`900`, `orientation-breakpoint=\"900\"` — the original form) or a\nCSS length string: `'900px'`, `'56.25rem'`, `'3em'`. Under the default\n`orientationBreakpointBasis=\"container\"`, `rem` resolves against the *document root*'s\ncomputed font size — the rule a `@container` query follows, not a `@media` query's — and `em`\nagainst this element's own computed font size. The length is re-resolved on every measurement,\nnever cached at first render, so a root font-size change moves the crossing width with no\ninvalidation step. To stay in step with a sibling `@media (max-width: 56.25rem)` rule, use\n`orientationBreakpointBasis=\"viewport\"`, which hands the length to the browser instead; see\nthat property for why the two resolve `rem` differently.\n\nAnything else — `''`, `'auto'`, garbage, a non-finite number, and deliberately `%`/`vw`/`vh`/\n`calc()` (which would mix reference boxes against an element-relative measurement) — behaves\nexactly as unset. Set `orientationBreakpointBasis=\"viewport\"` for a viewport-relative\nbreakpoint instead.",
               "fieldName": "orientationBreakpoint"
             },
+            {
+              "name": "orientation-breakpoint-basis",
+              "type": {
+                "text": "OrientationBreakpointBasis"
+              },
+              "default": "'container'",
+              "description": "Which box `orientationBreakpoint` measures. `'container'` (the default) observes this\ncomponent's own `[part=\"base\"]` inline size via `ResizeObserver`, comparing strictly `<`.\n`'viewport'` instead evaluates `matchMedia('(max-width: <breakpoint>)')`, which is inclusive\n(`<=`) — native `max-width` semantics, deliberately, so the crossing point matches a CSS\n`@media` rule authored with the same length exactly.\n\nUse `'viewport'` when two siblings in one row must flip together at a shared breakpoint: a row\nthat stacks via a pure-CSS `@media` rule makes each sibling's own width non-monotonic across\nthe transition, so no self-measured threshold can express it. `'viewport'` also lets the\nbrowser resolve a `rem` breakpoint with real `@media` semantics, keeping it in step with such\na rule across browser zoom and user font-size preferences.",
+              "fieldName": "orientationBreakpointBasis"
+            },
             {
               "name": "rail-breakpoint",
               "type": {
@@ -119028,7 +120430,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<lr-stepper>` — ordered multi-step wizard/form navigation: label + index per step,\ncurrent/completed/locked/error state, click-to-jump. First-party invention (no Web Awesome\nequivalent). Fully data-driven and controlled, like `lr-table`'s `columns`/`rows` -- it never\nmutates `steps` itself; a click or Enter/Space on a non-disabled step fires a cancelable\n`lr-step-select`, and the host decides whether/how `steps` changes in response (mirroring\n`lr-dialog-close`'s cancelable-event convention).\n\nAn opt-in `orientationBreakpoint` (unset by default -- no behavior change) makes the effective\nlayout/navigation axis respond to the stepper's own measured inline size instead of only the\nauthored `orientation`: below that width (px, measured on `[part=\"base\"]` via `ResizeObserver`),\n`narrowOrientation` becomes effective; at/above it, `orientation` does. This mirrors `<lr-split>`'s\nidentically-named `orientationBreakpoint`/`narrowOrientation` contract -- the observation boundary\nis the component's own allocation, not the viewport, so a stepper placed in a narrow split pane or\ndialog still responds correctly even in a wide window. The effective axis is exposed via the\n`effectiveOrientation` getter, a `data-effective-orientation` host attribute (only present while\n`orientationBreakpoint` is set), and `lr-stepper-orientation-change`.",
+          "description": "`<lr-stepper>` — ordered multi-step wizard/form navigation: label + index per step,\ncurrent/completed/locked/error state, click-to-jump. First-party invention (no Web Awesome\nequivalent). Fully data-driven and controlled, like `lr-table`'s `columns`/`rows` -- it never\nmutates `steps` itself; a click or Enter/Space on a non-disabled step fires a cancelable\n`lr-step-select`, and the host decides whether/how `steps` changes in response (mirroring\n`lr-dialog-close`'s cancelable-event convention).\n\nAn opt-in `orientationBreakpoint` (unset by default -- no behavior change) makes the effective\nlayout/navigation axis respond to a measured inline size instead of only the authored\n`orientation`: below that width (a pixel number or a `px`/`rem`/`em` CSS length), `narrowOrientation`\nbecomes effective; at/above it, `orientation` does. This mirrors `<lr-split>`'s identically-named\n`orientationBreakpoint`/`narrowOrientation`/`orientationBreakpointBasis` contract. Under the default\n`orientationBreakpointBasis=\"container\"` the breakpoint is measured on this stepper's own\n`[part=\"base\"]` inline size via `ResizeObserver`, so a stepper placed in a narrow split pane or\ndialog still responds correctly even in a wide window; `orientationBreakpointBasis=\"viewport\"`\ninstead evaluates `matchMedia('(max-width: <breakpoint>)')`, needed when the stepper has a fixed\nwidth in a row that stacks at a shared breakpoint. The effective axis is exposed via the\n`effectiveOrientation` getter, a `data-effective-orientation` host attribute (only present while\nthe breakpoint feature is active), and `lr-stepper-orientation-change`.",
           "name": "LyraStepper",
           "cssParts": [
             {
@@ -119188,11 +120590,29 @@
               "kind": "field",
               "name": "orientationBreakpoint",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
-              "description": "Opt-in inline-size breakpoint (px, measured on `[part=\"base\"]`). Below it, `narrowOrientation`\nbecomes effective instead of `orientation`. Unset (the default): no behavior change, the\nauthored `orientation` always applies.",
+              "description": "Opt-in inline-size breakpoint, measured on `[part=\"base\"]`. Below it, `narrowOrientation`\nbecomes effective instead of `orientation`. Unset (the default): no behavior change, the\nauthored `orientation` always applies.\n\nAccepts a bare pixel number (`500`, `'500'`), an explicit `px` length (`'500px'`), a `rem`\nlength (`'31.25rem'`) or an `em` length (`'3em'`). Under the default\n`orientationBreakpointBasis=\"container\"`, `rem` resolves against the **document root**'s\ncomputed font size -- the rule a `@container` query follows, and *not* a `@media` query's --\nwhile `em` resolves against this element's own computed font size. The length is re-resolved\non every measurement, never cached, so browser zoom, a user font-size preference or an app\nbase-size token change are picked up with no invalidation step. To stay in step with a\nsibling `@media (max-width: …rem)` rule, use `orientationBreakpointBasis=\"viewport\"`, which\nhands the length to the browser instead; see that property for why the two differ.\n\nAny other value -- `%`, `vw`, `calc()`, `'auto'`, an unparseable string -- behaves exactly as\nunset (no responsive observation at all), rather than as an armed breakpoint that can never\nbe crossed. Set `orientationBreakpointBasis=\"viewport\"` for a viewport-relative breakpoint\ninstead.",
               "attribute": "orientation-breakpoint"
             },
+            {
+              "kind": "field",
+              "name": "orientationBreakpointBasis",
+              "type": {
+                "text": "OrientationBreakpointBasis"
+              },
+              "default": "'container'",
+              "description": "Which box `orientationBreakpoint` measures. `'container'` (the default) observes this\nstepper's own `[part=\"base\"]` inline size via `ResizeObserver`, comparing strictly `<`.\n`'viewport'` instead evaluates `matchMedia('(max-width: <breakpoint>)')`, which is inclusive\n(`<=`) -- native `max-width` semantics, deliberately, so the crossing point matches a CSS\n`@media` rule authored with the same length exactly.\n\nA stepper given a fixed width in a row layout cannot react to that row stacking by measuring\nitself -- its own width never changes. That case requires `'viewport'`, which also lets the\nbrowser resolve a `rem` breakpoint with real `@media` semantics.",
+              "attribute": "orientation-breakpoint-basis",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "orientationBreakpoints",
+              "privacy": "private",
+              "default": "new OrientationBreakpointController(this, () => this.updateEffectiveOrientation(this.baseEl?.clientWidth ?? Number.POSITIVE_INFINITY, true), )",
+              "description": "Owns breakpoint resolution, basis selection, and the viewport `MediaQueryList` lifecycle\n(including teardown on disconnect) -- see `OrientationBreakpointController`."
+            },
             {
               "kind": "field",
               "name": "pendingLoadController",
@@ -119213,6 +120633,16 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "resolvedOrientationBreakpoint",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private",
+              "description": "`orientationBreakpoint` in pixels, or `undefined` when unset *or* unparseable -- meaningful\nonly under `orientationBreakpointBasis=\"container\"`, where this controller owns the crossing\ncomparison. Deliberately re-resolved per call (never cached): a `rem` breakpoint has to track\nthe live root font size. Never use this to decide whether the feature is on -- under\n`\"viewport\"` basis it's not the number actually in effect; use `orientationBreakpoints.active`\nfor that (see `OrientationBreakpointController`'s class doc).",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "steps",
@@ -119503,7 +120933,7 @@
                   }
                 }
               ],
-              "description": "Classifies a measured inline size into the effective layout/navigation axis and, only on an\nactual transition, applies it -- mirrors `<lr-split>`'s identically-shaped\n`updateEffectiveOrientation()`. `emitOnChange` is false for the property-driven re-derivation\nin `willUpdate()` and true for the `ResizeObserver` callback's fresh measurement."
+              "description": "Classifies a measured inline size into the effective layout/navigation axis and, only on an\nactual transition, applies it -- mirrors `<lr-split>`'s identically-shaped\n`updateEffectiveOrientation()`. `emitOnChange` is false for the property-driven re-derivation\nin `willUpdate()` (except a genuine viewport-basis transition after the first update -- see\n`willUpdate()`'s own doc comment) and true for the `ResizeObserver`/`matchMedia` callbacks'\nown fresh measurements."
             }
           ],
           "events": [
@@ -119560,10 +120990,19 @@
             {
               "name": "orientation-breakpoint",
               "type": {
-                "text": "number | undefined"
+                "text": "number | string | undefined"
               },
-              "description": "Opt-in inline-size breakpoint (px, measured on `[part=\"base\"]`). Below it, `narrowOrientation`\nbecomes effective instead of `orientation`. Unset (the default): no behavior change, the\nauthored `orientation` always applies.",
+              "description": "Opt-in inline-size breakpoint, measured on `[part=\"base\"]`. Below it, `narrowOrientation`\nbecomes effective instead of `orientation`. Unset (the default): no behavior change, the\nauthored `orientation` always applies.\n\nAccepts a bare pixel number (`500`, `'500'`), an explicit `px` length (`'500px'`), a `rem`\nlength (`'31.25rem'`) or an `em` length (`'3em'`). Under the default\n`orientationBreakpointBasis=\"container\"`, `rem` resolves against the **document root**'s\ncomputed font size -- the rule a `@container` query follows, and *not* a `@media` query's --\nwhile `em` resolves against this element's own computed font size. The length is re-resolved\non every measurement, never cached, so browser zoom, a user font-size preference or an app\nbase-size token change are picked up with no invalidation step. To stay in step with a\nsibling `@media (max-width: …rem)` rule, use `orientationBreakpointBasis=\"viewport\"`, which\nhands the length to the browser instead; see that property for why the two differ.\n\nAny other value -- `%`, `vw`, `calc()`, `'auto'`, an unparseable string -- behaves exactly as\nunset (no responsive observation at all), rather than as an armed breakpoint that can never\nbe crossed. Set `orientationBreakpointBasis=\"viewport\"` for a viewport-relative breakpoint\ninstead.",
               "fieldName": "orientationBreakpoint"
+            },
+            {
+              "name": "orientation-breakpoint-basis",
+              "type": {
+                "text": "OrientationBreakpointBasis"
+              },
+              "default": "'container'",
+              "description": "Which box `orientationBreakpoint` measures. `'container'` (the default) observes this\nstepper's own `[part=\"base\"]` inline size via `ResizeObserver`, comparing strictly `<`.\n`'viewport'` instead evaluates `matchMedia('(max-width: <breakpoint>)')`, which is inclusive\n(`<=`) -- native `max-width` semantics, deliberately, so the crossing point matches a CSS\n`@media` rule authored with the same length exactly.\n\nA stepper given a fixed width in a row layout cannot react to that row stacking by measuring\nitself -- its own width never changes. That case requires `'viewport'`, which also lets the\nbrowser resolve a `rem` breakpoint with real `@media` semantics.",
+              "fieldName": "orientationBreakpointBasis"
             }
           ],
           "superclass": {
@@ -120248,6 +121687,13 @@
           "kind": "class",
           "description": "`<lr-virtual-list>` — a generic windowed/virtualized list host. Renders\nonly the items within the current viewport (plus `overscan` padding rows\non each side) as real DOM, regardless of how large `items` is, so a\nmulti-thousand-row chat history sidebar or long message thread stays cheap\nto scroll.\n\nContent is entirely caller-supplied: `renderItem(item, index)` returns\nwhatever `lit-html` value should represent that row (typically a\n`TemplateResult`), and `keyFunction(item, index)` gives it a stable\nidentity for `repeat()`'s DOM-reconciliation key, so scroll position and\nany per-row state (e.g. an `<audio>` element's playback position) survive\nan `items` mutation instead of every row remounting from scratch.\n\n**Windowing math.** Every row — in both `row-height` modes — is positioned\nby a `transform: translateY(offset)` computed from a single cumulative\n`offsets` array (`offsets[i]` = the pixel top of row `i`), rather than by\npage flow. This is what lets only a small DOM window exist while the\nscrollbar still reflects the *true* total content height:\n- **`row-height=\"auto\"` (default).** Each currently-rendered row is\n  watched by a `ResizeObserver`; its real height lands in a per-key\n  `Map`, and any row not yet measured contributes `DEFAULT_ROW_ESTIMATE_PX`\n  to the offsets array until it has been. `offsets` is *not* the same\n  thing as a page-count-based `padding-top`/`padding-bottom` spacer pair —\n  that approach reflows every unmeasured row's position on every new\n  measurement, which is exactly what per-row transform offsets avoid: only\n  the rows *after* a newly-measured one shift, and even that shift is a\n  cheap style recompute, not a layout-affecting padding change.\n- **Fixed numeric `row-height`.** No measurement needed — `offsets[i]` is\n  just `i * rowHeightPx`, computed by the exact same cumulative-array code\n  path (a dedicated \"single spacer + start-index\" special case was\n  considered and would work too, but reusing one code path for both modes\n  avoids maintaining two parallel rendering strategies for a difference\n  that's otherwise just \"how is row *i*'s height looked up\").\n\nThe `offsets` array is rebuilt only when `items`, `row-height`, or\n`keyFunction` change, or a row's measured height changes -- not on every\nupdate, so a pure scroll-position tick (potentially every rAF while\nscrolling) only re-runs the cheap range/visibility math in\n`computeRange()`, never the `O(n)` offsets rebuild (which, in\n`row-height=\"auto\"` mode, also means a `keyFunction` call per item). For\nthe list sizes this component is meant for (a scrollable history sidebar,\nrealistically hundreds to a few thousand rows) that rebuild is a trivial\n`O(n)` arithmetic loop even when it does run; it is *not* the right\napproach for a hundred-thousand-row list without further work (e.g. a\nFenwick/segment tree for `O(log n)` offset queries+updates), which is out\nof scope here.\n\n**Accessibility.** The scroll container is `role=\"list\"` and each rendered\nrow is `role=\"listitem\"`, deliberately *not* `listbox`/`option` — this\ncomponent only provides windowing, not the roving-tabindex/\n`aria-activedescendant` keyboard-interaction contract ARIA requires\nalongside a real `listbox`. A consumer that wants full single-select\nlistbox semantics on top of this should compose that behavior itself (see\n`<lr-select>`'s pattern), the same way this component's `active-id`\nonly *scrolls* the matching row into view and marks it `aria-current` —\nit never claims to be a selection widget. `aria-setsize`/`aria-posinset`\nare computed from the row's real index in the full `items` array (not its\nposition among the currently-rendered DOM window), so a screen reader\nstill announces e.g. \"item 12 of 340\" correctly. `[part=\"base\"]` itself\ncarries `tabindex=\"0\"` — `renderItem`'s content is caller-supplied and not\nguaranteed to contain a focusable element, and a scrollable region with no\nfocusable content of its own is otherwise unreachable by keyboard (native\narrow/Page Up/Page Down scrolling included).\n\n**Grouping.** When supplied, `groups` renders a labeled group marker at the\ncorresponding `startIndex`. Group markers are positioned independently of\nthe row window, so they remain available when the first row in a group is\noutside the current overscanned range.\n\n**Programmatic scrolling.** `scrollToIndex()` is the public counterpart to `active-id`'s automatic\nscroll-into-view -- used by `<lr-chat-viewport>`'s virtual mode and any other host that needs to\nscroll to a specific row without also changing which row is \"active.\"\n\n**`item-role=\"row\"` mode.** Additive to the default `'listitem'` mapping above: `[part=\"base\"]`\nbecomes `role=\"rowgroup\"`, `[part=\"spacer\"]` becomes `role=\"presentation\"`, and each row becomes\n`role=\"row\"` with `aria-rowindex` (the row's 1-based index plus `row-index-offset`) instead of\n`aria-setsize`/`aria-posinset`. For a consumer composing its own `role=\"table\"` wrapper and header\nrow around this component (see `<lr-dataset-viewer>`), where `row-index-offset=\"1\"` accounts for\nthat external header row occupying `aria-rowindex=\"1\"`.",
           "name": "LyraVirtualList",
+          "cssProperties": [
+            {
+              "description": "The scroll viewport's height. A virtualized list needs a bounded scroll extent, so this ships a default rather than collapsing to zero when a caller does not size the host.",
+              "name": "--lr-virtual-list-height",
+              "default": "var(--lr-size-24rem)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The scrollable container (`role=\"list\"`).",
@@ -121286,13 +122732,30 @@
           "kind": "class",
           "description": "`<lr-widget>` — a titled panel shell with an optional collapse toggle and\nan optional fullscreen-expand toggle. Fullscreen promotes the same host\nelement in place (a CSS state, not a clone/portal), so slotted content\n(a chart, a running simulation, scroll position) survives the transition.",
           "name": "LyraWidget",
+          "cssProperties": [
+            {
+              "description": "The fullscreen scrim's color, applied to `[part=\"backdrop\"]`.",
+              "name": "--lr-widget-overlay-color",
+              "default": "var(--lr-color-overlay)"
+            },
+            {
+              "description": "The `inset` applied to `[part=\"base\"]` while `fullscreen`. Also set inline from the `fullscreen-inset` attribute.",
+              "name": "--lr-widget-fullscreen-inset",
+              "default": "max(var(--lr-space-l), var(--lr-safe-area-top)) max(var(--lr-space-l), var(--lr-safe-area-inline-end)) max(var(--lr-space-l), var(--lr-safe-area-bottom)) max(var(--lr-space-l), var(--lr-safe-area-inline-start))"
+            },
+            {
+              "description": "The `inset` applied to `[part=\"backdrop\"]`, so the scrim can be pulled back independently of the panel. Also set inline from the `backdrop-inset` attribute (falling back to `fullscreen-inset`). `fullscreen-inset` overrides the default `var(--lr-space-l)` inset applied to `[part=\"base\"]` and `[part=\"backdrop\"]` while fullscreen (e.g. `\"0 0 0 240px\"` to leave a persistent sidebar visible). `compact` tightens header/body padding — same convention as `lr-empty`'s `compact`.",
+              "name": "--lr-widget-backdrop-inset",
+              "default": "var(--lr-widget-fullscreen-inset)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The wrapper around the `actions` slot.",
               "name": "actions"
             },
             {
-              "description": "The fullscreen scrim behind the panel. `fullscreen-inset` overrides the default `var(--lr-space-l)` inset applied to `[part=\"base\"]` and `[part=\"backdrop\"]` while fullscreen (e.g. `\"0 0 0 240px\"` to leave a persistent sidebar visible). `compact` tightens header/body padding — same convention as `lr-empty`'s `compact`.",
+              "description": "The fullscreen scrim behind the panel.",
               "name": "backdrop"
             },
             {
@@ -123643,6 +125106,36 @@
               "description": "Duration of one indeterminate upload-spinner rotation. The ambient loop stops under reduced motion.",
               "name": "--lr-attachment-chip-spinner-duration",
               "default": "0.8s"
+            },
+            {
+              "description": "Accent color used for the status text, spinner, and progress fill. Auto-swapped per `status` (`uploading`/`error`/`done`); the default is the neutral `pending` tone.",
+              "name": "--lr-attachment-chip-accent",
+              "default": "var(--lr-color-text-quiet)"
+            },
+            {
+              "description": "Chip background, auto-swapped per `status` to that status's `-quiet` tint.",
+              "name": "--lr-attachment-chip-bg",
+              "default": "var(--lr-color-surface)"
+            },
+            {
+              "description": "Chip border color. Every non-`pending` `status` sets it to `transparent`.",
+              "name": "--lr-attachment-chip-border",
+              "default": "var(--lr-color-border)"
+            },
+            {
+              "description": "Thumbnail size while `compact`, rethemeable independently of `--lr-icon-button-size`.",
+              "name": "--lr-attachment-chip-compact-thumbnail-size",
+              "default": "var(--lr-size-1-75rem)"
+            },
+            {
+              "description": "Font size of `[part=\"base\"]` while `compact`.",
+              "name": "--lr-attachment-chip-compact-font-size",
+              "default": "var(--lr-font-size-xs)"
+            },
+            {
+              "description": "Gap between the chip's parts while `compact`.",
+              "name": "--lr-attachment-chip-compact-gap",
+              "default": "var(--lr-size-0-25rem)"
             }
           ],
           "cssParts": [
@@ -126788,6 +128281,23 @@
           "kind": "class",
           "description": "`<lr-avatar>` — a small, fixed-size identity marker: default-slotted icon/glyph content, an\nimage, or an initials fallback, in that priority order (whichever's set takes over from the\nnext). First-party invention (no Web Awesome equivalent) -- purely presentational, no built-in\ninteractivity; a consumer wraps it in their own `<button>`/`<lr-menu>` trigger for a\nuser-menu affordance.",
           "name": "LyraAvatar",
+          "cssProperties": [
+            {
+              "description": "Inline and block size of the container. `size` swaps it to `var(--lr-size-1-5rem)` (`sm`) or `var(--lr-size-2-5rem)` (`lg`).",
+              "name": "--lr-avatar-size",
+              "default": "var(--lr-size-2rem)"
+            },
+            {
+              "description": "Container background. Each non-neutral `tone` sets it to that tone's `-quiet` tint.",
+              "name": "--lr-avatar-bg",
+              "default": "var(--lr-color-border)"
+            },
+            {
+              "description": "Initials/glyph color. Each non-neutral `tone` sets it to that tone's loud color.",
+              "name": "--lr-avatar-color",
+              "default": "var(--lr-color-text)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The outer circle/square container.",
@@ -132284,6 +133794,13 @@
           "kind": "class",
           "description": "`<lr-media-card>` — a lightweight inline preview for one already-sent,\nalready-available attachment inside a rendered chat message body (e.g.\nplugged into `<lr-chat-message>`'s `attachments` slot, or embedded\ndirectly by a markdown/message renderer). Distinct from two other,\nsimilarly-named components in this family: `<lr-document-preview>` is a\nfuller viewer with header chrome and an async server-side-conversion\nstate machine (`status=\"converting\"`), and `<lr-attachment-chip>` is a\npre-send queued-file chip with upload progress. This component has\nneither concern — it only ever shows a `src` that's already final.\n\n**Format dispatch.** `kind` selects `'image'` (a plain `<img>`), `'video'`\n(a plain `<video controls>`), or `'file'` (an icon + filename chip with a\ndownload/open affordance). Leave `kind` unset to auto-detect from\n`mime-type` (`image/*` / `video/*` / anything else -> `'file'`);\nexplicitly setting `kind` always wins over detection.\n\n**Safe-URL checking.** `src` is validated before it's ever assigned to an\n`<img>`/`<video>` `src` or an `<a href>` — only `http:`/`https:`/`blob:`\n(plus `data:` for a *media* `src` only) or a scheme-relative/relative URL\nwith no scheme at all pass; anything else (`javascript:`, `vbscript:`,\nand similarly suspicious schemes) is rejected. `safeMediaSrc()` and\n`safeLinkHref()` share a platform-URL-based validator; their sink-specific\nallowlists explain why `data:` gets two different answers depending on\nwhere it is used. An `image`/`video` `kind` whose `src` fails the\nmedia-src check falls back to the generic file-chip rendering — this is\nthe \"plain preview unavailable state\" a dangerous URL degrades to, rather\nthan ever reaching a real media/anchor sink. That fallback also re-checks\n`src` against the stricter href allowlist for its own download affordance,\nbut since the href allowlist is a strict subset of the media-src allowlist,\nthat re-check can only ever change the outcome for a direct/auto-detected\n`kind=\"file\"` `src` — an `image`/`video` `src` that already failed the\nwider media-src check necessarily fails the narrower href check too, so\nthe fallback for those two kinds is always the plain, unclickable `span`.\n\n**The `video` case renders its open affordance separately from `base`.**\n`image`/`file` wrap their *entire* card in one native `<button>`/`<a>` —\nsafe because an `<img>` and a plain icon+text chip have no interactive\ncontent of their own to conflict with. A `<video controls>` element is\nitself interactive content (its own play/seek/volume controls), and HTML\nforbids nesting interactive content inside a `<button>`/`<a>` — doing so\nanyway would also make every click on the video's own controls bubble up\nand spuriously fire `lr-open`. So for `kind=\"video\"`, `base` is a plain,\nnon-interactive wrapper around `[part=\"media\"]`, and a small separate\n`[part=\"open-button\"]` (not one of this component's originally-scoped\nparts, added as the \"explicit view/open affordance\" the class is free to\nprovide) is the thing that actually fires `lr-open`.\n\n**Navigation.** This component never navigates on its own for `image`/\n`video` — activating the card only fires `lr-open`; a host decides what\n\"open\" means (a lightbox, a new tab, whatever). The `file`-chip case is\nthe one exception: when `src` passes the (stricter) href safety check, the\nchip is a real `<a href download>` so a bare drop-in still does something\nuseful — but `lr-open` fires first and is `cancelable`; a host that\ncalls `preventDefault()` on it suppresses that default download/open so it\ncan substitute its own handling instead.\n\n**Accessible action name.** The host `aria-label` maps to\n`accessibleLabel` and overrides the filename/alt/per-kind action name on\nwhichever internal element is actionable for the resolved kind. The name\nis therefore applied directly to the button or link across the shadow\nboundary; it does not replace the image alt text or the video control's\nown label.",
           "name": "LyraMediaCard",
+          "cssProperties": [
+            {
+              "description": "Cap on the block size of the `<img>`/`<video>` in `[part=\"media\"]`.",
+              "name": "--lr-media-card-max-height",
+              "default": "var(--lr-size-20rem)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The root interactive/container element. A `<button>` for `kind=\"image\"`, a plain wrapper `<div>` for `kind=\"video\"`, and either an `<a>` (when `src` passes the href safety check) or a plain `<span>` (otherwise) for the `file`-chip fallback.",
@@ -132971,6 +134488,13 @@
           "kind": "class",
           "description": "`<lr-playback>` — steps an index through `[0, length)` on a fixed\ninterval (play/pause), the common building block behind ad-hoc\nplay-timers in time-series dashboards.",
           "name": "LyraPlayback",
+          "cssProperties": [
+            {
+              "description": "Font size of the play/pause glyph, derived from the shared icon-button hit-target size.",
+              "name": "--lr-playback-icon-size",
+              "default": "calc(var(--lr-icon-button-size) * 0.35)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The playback controls wrapper.",
@@ -134385,6 +135909,11 @@
             {
               "description": "Minimum viewport block size.",
               "name": "--lr-zoomable-frame-min-block-size"
+            },
+            {
+              "description": "The scale factor applied to `[part=\"content\"]`. Written by the component itself on every render from the current `zoom`, so it is a read-out rather than a consumer knob; set the `zoom` property instead.",
+              "name": "--lr-zoomable-frame-zoom",
+              "default": "1"
             }
           ],
           "cssParts": [
@@ -134989,6 +136518,23 @@
           "kind": "class",
           "description": "`<lr-badge>` — a compact status label.",
           "name": "LyraBadge",
+          "cssProperties": [
+            {
+              "description": "The badge's background. Each non-neutral `variant` sets it to that variant's `-quiet` tint.",
+              "name": "--lr-badge-background",
+              "default": "var(--lr-color-surface)"
+            },
+            {
+              "description": "The badge's border color. Each non-neutral `variant` sets it to that variant's loud color.",
+              "name": "--lr-badge-border",
+              "default": "var(--lr-color-border)"
+            },
+            {
+              "description": "The badge's text color. Each non-neutral `variant` sets it to that variant's loud color.",
+              "name": "--lr-badge-color",
+              "default": "var(--lr-color-text)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The badge surface.",
@@ -135397,6 +136943,35 @@
               }
             }
           ],
+          "cssProperties": [
+            {
+              "description": "The badge's background. Each non-neutral `variant` sets it to that variant's `-quiet` tint.",
+              "name": "--lr-badge-background",
+              "default": "var(--lr-color-surface)",
+              "inheritedFrom": {
+                "name": "LyraBadge",
+                "module": "src/components/overlays/badge/badge.class.ts"
+              }
+            },
+            {
+              "description": "The badge's border color. Each non-neutral `variant` sets it to that variant's loud color.",
+              "name": "--lr-badge-border",
+              "default": "var(--lr-color-border)",
+              "inheritedFrom": {
+                "name": "LyraBadge",
+                "module": "src/components/overlays/badge/badge.class.ts"
+              }
+            },
+            {
+              "description": "The badge's text color. Each non-neutral `variant` sets it to that variant's loud color.",
+              "name": "--lr-badge-color",
+              "default": "var(--lr-color-text)",
+              "inheritedFrom": {
+                "name": "LyraBadge",
+                "module": "src/components/overlays/badge/badge.class.ts"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "locale",
@@ -135769,6 +137344,23 @@
           "kind": "class",
           "description": "`<lr-callout>` — an inline message surface for status, warning, and error content.\nSet `inline` for lightweight reactive status/error text: it removes the panel chrome while\npreserving the semantic role, optional leading icon, and close action.",
           "name": "LyraCallout",
+          "cssProperties": [
+            {
+              "description": "The callout surface's background. Each non-neutral `variant` sets it to that variant's `-quiet` tint.",
+              "name": "--lr-callout-background",
+              "default": "var(--lr-color-surface)"
+            },
+            {
+              "description": "The callout surface's border color. Each non-neutral `variant` sets it to that variant's loud color.",
+              "name": "--lr-callout-border",
+              "default": "var(--lr-color-border)"
+            },
+            {
+              "description": "The callout's text color. Each non-neutral `variant` sets it to that variant's loud color.",
+              "name": "--lr-callout-color",
+              "default": "var(--lr-color-text)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The callout surface.",
@@ -136754,10 +138346,55 @@
           "description": "`<lr-chip>` — a small, content-agnostic pill for a short label: a tag, an\nactive-filter/scope indicator, etc. Distinct from `<lr-attachment-chip>`\n(specifically file-shaped, with a thumbnail/size/upload-progress) — this\none carries no domain assumptions at all, just a label and an optional\nleading icon/dot.\n\n`tone` tints the whole pill using the same loud-color-on-quiet-tint\nconvention `<lr-tool-call-chip>`/`<lr-citation-badge>` already\nestablish for status coloring: background is the tone's `-quiet` tint,\ntext/icon is the tone's loud color. `neutral` (the default) has no\ndedicated token pair of its own, so it falls back to a plain\nbordered-surface look — the same \"no signal\" treatment\n`<lr-citation-badge>`'s `default` status and `<lr-tool-call-chip>`'s\n`pending` status already use.\n\nThis is a controlled component: clicking the remove (×) button only fires\n`lr-remove` — the chip never removes itself from the DOM on its own\ninteraction, the same contract `<lr-attachment-chip>`/\n`<lr-conversation-item>` already follow. A consumer owns the underlying\nlist and decides whether/how the click actually removes anything.",
           "name": "LyraChip",
           "cssProperties": [
+            {
+              "description": "Text/icon color of the pill. Each `tone` sets it to that tone's loud color.",
+              "name": "--lr-chip-accent",
+              "default": "var(--lr-color-text)"
+            },
+            {
+              "description": "Background of the pill. Each `tone` sets it to that tone's `-quiet` tint.",
+              "name": "--lr-chip-bg",
+              "default": "var(--lr-color-surface)"
+            },
+            {
+              "description": "Border color of the pill. Every non-neutral `tone` sets it to `transparent`.",
+              "name": "--lr-chip-border",
+              "default": "var(--lr-color-border)"
+            },
+            {
+              "description": "Label font size. Each `size` sets it to that step's font size.",
+              "name": "--lr-chip-font-size",
+              "default": "var(--lr-font-size-sm)"
+            },
+            {
+              "description": "Gap between the icon, label, and remove button. Each `size` sets it to that step's gap.",
+              "name": "--lr-chip-gap",
+              "default": "var(--lr-space-xs)"
+            },
+            {
+              "description": "Font size of the `icon` slot wrapper. Each `size` sets it to that step's icon size.",
+              "name": "--lr-chip-icon-size",
+              "default": "var(--lr-font-size-sm)"
+            },
+            {
+              "description": "Block padding of the pill. Each `size` sets it to that step's block padding.",
+              "name": "--lr-chip-padding-block",
+              "default": "var(--lr-size-0-25rem)"
+            },
+            {
+              "description": "Inline padding of the pill. Each `size` sets it to that step's inline padding.",
+              "name": "--lr-chip-padding-inline",
+              "default": "var(--lr-space-s)"
+            },
             {
               "description": "Background while a toggleable chip is selected, independently themeable from its resting background.",
               "name": "--lr-chip-pressed-bg",
               "default": "var(--lr-chip-bg)"
+            },
+            {
+              "description": "Border color while a toggleable chip is selected, independently themeable from the label/icon color.",
+              "name": "--lr-chip-pressed-border",
+              "default": "var(--lr-chip-accent)"
             }
           ],
           "cssParts": [
@@ -137348,6 +138985,23 @@
           "kind": "class",
           "description": "`<lr-dialog>` — a general-purpose modal/overlay. `role=\"dialog\"`,\nfocus-trapped while open, dismissible via Escape or a backdrop click, and\nscroll-locks the document for as long as it's open. Chrome stays minimal by\ndefault — no built-in title bar or close button; a consumer supplies a\nheading and any close affordance itself via the default/`footer` slots.\n`heading`/`closable` are an opt-in convenience for the common case where\nhand-building that chrome isn't worth it (see below).\n\nAccessible name / visible header, in priority order:\n0. If the host element itself has an `aria-label` attribute set, its value\n   becomes `aria-label` on the panel outright, overriding every source\n   below (including a slotted heading) — the standard ARIA convention for\n   a consumer that wants full control over the announced name regardless\n   of whatever `heading`/`label` props are also set. Also suppresses the\n   visible header/`heading` row and the sr-only `label` element from\n   rendering at all, same as case 1 already does to cases 2/3 below.\n1. Otherwise, if a heading element (`h1`–`h6` or `[role=\"heading\"]`) is a *direct\n   child* (not inside `slot=\"footer\"`), its text content becomes\n   `aria-label` on the panel — unchanged, and takes priority over `heading`\n   below so an existing consumer that already slots its own heading keeps\n   rendering it exactly as before.\n2. Otherwise, when `heading` is set, a visible header row (`part=\"header\"`)\n   renders containing that text (`part=\"heading\"`), which becomes the\n   `aria-labelledby` target.\n3. Otherwise, when `label` is set, an invisible (`.sr-only`, exposed as the\n   `label` part) element carrying that text is rendered inside the panel\n   and `aria-labelledby` points at it instead.\nOnly one of cases 2/3 ever renders at a time, so exactly one element ever\nclaims `aria-labelledby`. `label` itself never renders visible chrome on\nits own — `::part(label)` can be restyled to make the sr-only text visible,\nor `heading` can be set instead, if a consumer wants visible chrome without\nslotting a real heading element.\n\nThe slotted-heading case deliberately uses `aria-label` (a copied string)\nrather than `aria-labelledby` pointing at the heading's `id`: the heading is\n*light-DOM* content while `[part=\"panel\"]` lives in this element's\n*shadow* tree, and an ID-reference attribute can't resolve across that\nboundary (verified against axe's `aria-dialog-name` rule) — unlike the\n`heading`/`label`-prop cases above, where the target element is rendered\ninside the same shadow root it labels, so `aria-labelledby` there is safe.\n\n`closable` renders a close (X) button in the header row (creating one, with\nno heading text, if `heading` is unset) that closes the dialog via the same\n`close()` path as Escape/backdrop-dismiss, with reason `'close-button'`.\n\nStacking: opening one `<lr-dialog>` while another is already open (e.g. a\n`confirm()` launched from within an already-open dialog) is supported --\nEscape and the Tab focus trap only ever act on the topmost open dialog, so\ndialogs beneath it stay open and untouched until the one on top closes.",
           "name": "LyraDialog",
+          "cssProperties": [
+            {
+              "description": "Backdrop scrim color.",
+              "name": "--lr-dialog-overlay-color",
+              "default": "var(--lr-color-overlay)"
+            },
+            {
+              "description": "Assertive inline size for the panel. Left at `auto` the panel shrink-wraps to its content.",
+              "name": "--lr-dialog-width",
+              "default": "auto"
+            },
+            {
+              "description": "Cap on the panel's inline size. Falls back to `--lr-dialog-width` when that is set, so an assertive width is not clipped by the 32rem default; the viewport (`100%`) is always a hard limit on top.",
+              "name": "--lr-dialog-max-width",
+              "default": "var(--lr-dialog-width, var(--lr-size-32rem))"
+            }
+          ],
           "cssParts": [
             {
               "description": "The full-viewport scrim behind the panel.",
@@ -137986,6 +139640,43 @@
             {
               "description": "Block size for top/bottom drawers.",
               "name": "--lr-drawer-height"
+            },
+            {
+              "description": "Horizontal offset the panel animates in from for start/end drawers. Set per placement (and flipped under RTL) by the stylesheet; only read when `prefers-reduced-motion` is `no-preference`.",
+              "name": "--lr-drawer-enter-x",
+              "default": "calc(-1 * var(--lr-size-1rem))"
+            },
+            {
+              "description": "Vertical offset the panel animates in from for top/bottom drawers. Set to `var(--lr-size-1rem)` for `bottom`; only read when `prefers-reduced-motion` is `no-preference`.",
+              "name": "--lr-drawer-enter-y",
+              "default": "calc(-1 * var(--lr-size-1rem))"
+            },
+            {
+              "description": "Backdrop scrim color.",
+              "name": "--lr-dialog-overlay-color",
+              "default": "var(--lr-color-overlay)",
+              "inheritedFrom": {
+                "name": "LyraDialog",
+                "module": "src/components/overlays/dialog/dialog.class.ts"
+              }
+            },
+            {
+              "description": "Assertive inline size for the panel. Left at `auto` the panel shrink-wraps to its content.",
+              "name": "--lr-dialog-width",
+              "default": "auto",
+              "inheritedFrom": {
+                "name": "LyraDialog",
+                "module": "src/components/overlays/dialog/dialog.class.ts"
+              }
+            },
+            {
+              "description": "Cap on the panel's inline size. Falls back to `--lr-dialog-width` when that is set, so an assertive width is not clipped by the 32rem default; the viewport (`100%`) is always a hard limit on top.",
+              "name": "--lr-dialog-max-width",
+              "default": "var(--lr-dialog-width, var(--lr-size-32rem))",
+              "inheritedFrom": {
+                "name": "LyraDialog",
+                "module": "src/components/overlays/dialog/dialog.class.ts"
+              }
             }
           ],
           "slots": [
@@ -142345,6 +144036,13 @@
           "kind": "class",
           "description": "`<lr-progress-ring>` — a circular determinate or indeterminate progress indicator.",
           "name": "LyraProgressRing",
+          "cssProperties": [
+            {
+              "description": "Outer diameter of the ring.",
+              "name": "--lr-progress-ring-size",
+              "default": "var(--lr-size-2-5rem)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The progress wrapper.",
@@ -143377,6 +145075,16 @@
               "description": "Animation duration and timing function shared by the pulse and sheen effects.",
               "name": "--lr-transition-ambient",
               "default": "1.8s ease-in-out"
+            },
+            {
+              "description": "Inline size of the placeholder.",
+              "name": "--lr-skeleton-w",
+              "default": "100%"
+            },
+            {
+              "description": "Block size of the placeholder.",
+              "name": "--lr-skeleton-h",
+              "default": "var(--lr-size-1em)"
             }
           ],
           "cssParts": [
@@ -143842,6 +145550,23 @@
           "kind": "class",
           "description": "`<lr-spinner>` — an indeterminate busy indicator.",
           "name": "LyraSpinner",
+          "cssProperties": [
+            {
+              "description": "Outer diameter of the indicator.",
+              "name": "--lr-spinner-size",
+              "default": "var(--lr-size-1-25rem)"
+            },
+            {
+              "description": "Thickness of the ring track.",
+              "name": "--lr-spinner-track-width",
+              "default": "var(--lr-border-width-medium)"
+            },
+            {
+              "description": "Duration of one rotation. Not read under `prefers-reduced-motion: reduce`, where the animation is disabled entirely.",
+              "name": "--lr-spinner-duration",
+              "default": "800ms"
+            }
+          ],
           "cssParts": [
             {
               "description": "The wrapper.",
@@ -144251,6 +145976,38 @@
           "kind": "class",
           "description": "`<lr-toast-item>` — a single toast notification.\nMirrors the Web Awesome `<wa-toast-item>` API under the `lr-` prefix.",
           "name": "LyraToastItem",
+          "cssProperties": [
+            {
+              "description": "Width of the accent bar, and the extra inline-start padding reserved for it.",
+              "name": "--lr-toast-accent-width",
+              "default": "var(--lr-size-4px)"
+            },
+            {
+              "description": "Color of the accent bar and the icon, auto-swapped per `variant`.",
+              "name": "--lr-toast-accent-color",
+              "default": "var(--lr-color-border)"
+            },
+            {
+              "description": "Padding of the item, auto-swapped per `size`.",
+              "name": "--lr-toast-padding",
+              "default": "var(--lr-space-m)"
+            },
+            {
+              "description": "Font size of the item, auto-swapped per `size`.",
+              "name": "--lr-toast-font-size",
+              "default": "var(--lr-font-size-md)"
+            },
+            {
+              "description": "Opacity/transform transition used while showing.",
+              "name": "--lr-toast-show-duration",
+              "default": "var(--lr-transition-base, 180ms ease-out)"
+            },
+            {
+              "description": "Opacity/transform transition used while hiding.",
+              "name": "--lr-toast-hide-duration",
+              "default": "var(--lr-transition-base, 180ms ease-out)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The colored accent bar.",
@@ -144915,6 +146672,48 @@
           "kind": "class",
           "description": "`<lr-toast>` — the stacking toast region. One per page is recommended.\nMirrors the Web Awesome `<wa-toast>` API under the `lr-` prefix.",
           "name": "LyraToast",
+          "cssProperties": [
+            {
+              "description": "Gap between stacked items.",
+              "name": "--lr-toast-gap",
+              "default": "var(--lr-space-s)"
+            },
+            {
+              "description": "Inline size of the stack, capped by the viewport minus the placement insets.",
+              "name": "--lr-toast-width",
+              "default": "var(--lr-size-28rem)"
+            },
+            {
+              "description": "Width of a slotted item's accent bar. Read by `<lr-toast-item>`'s own stylesheet, so set it on the item.",
+              "name": "--lr-toast-accent-width",
+              "default": "var(--lr-size-4px)"
+            },
+            {
+              "description": "Accent bar / icon color of a slotted item, auto-swapped per its `variant`. Read by `<lr-toast-item>`, so set it on the item.",
+              "name": "--lr-toast-accent-color",
+              "default": "var(--lr-color-border)"
+            },
+            {
+              "description": "Padding of a slotted item, auto-swapped per its `size`. Read by `<lr-toast-item>`, so set it on the item.",
+              "name": "--lr-toast-padding",
+              "default": "var(--lr-space-m)"
+            },
+            {
+              "description": "Font size of a slotted item, auto-swapped per its `size`. Read by `<lr-toast-item>`, so set it on the item.",
+              "name": "--lr-toast-font-size",
+              "default": "var(--lr-font-size-md)"
+            },
+            {
+              "description": "Show transition of a slotted item. Read by `<lr-toast-item>`, so set it on the item.",
+              "name": "--lr-toast-show-duration",
+              "default": "var(--lr-transition-base, 180ms ease-out)"
+            },
+            {
+              "description": "Hide transition of a slotted item. Read by `<lr-toast-item>`, so set it on the item.",
+              "name": "--lr-toast-hide-duration",
+              "default": "var(--lr-transition-base, 180ms ease-out)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The fl-column container holding the items.",
@@ -145971,6 +147770,23 @@
           "kind": "class",
           "description": "`<lr-citation-badge>` — an inline `[n]` citation marker with a hover/\nfocus preview popover and confidence/verification-status coloring. Used\nfor an agent response's inline citations, each carrying a `source-id`\nthat matches a corresponding `<lr-source-card>` shown elsewhere on the\npage (a sibling component in this same family — this component doesn't\nimport or know anything about it, only carries the id through its\nevents).\n\nThe default slot is *not* the badge's visible content — the badge always\nrenders `[index]` — it's reserved for optional rich preview content (e.g.\na filename + short excerpt) shown in a floating popover on hover/focus,\npositioned with `internal/positioner.js`'s `place()` the same way\n`<lr-tool-call-chip>` positions its own detail tooltip. No popover shows\nat all when the slot carries no content, and the popover never traps\nfocus — it's supplementary preview content, not a modal, so Tab continues\npast the badge normally even while it happens to be visible from a mouse\nhover. When preview content exists, the button keeps a stable\n`aria-describedby` relationship to the `role=\"tooltip\"` panel while it is\nboth hidden and visible, so assistive technology can resolve the preview\nas soon as focus causes it to open.\n\nTwo distinct signals fire from the same badge: `lr-citation-activate`\n(click, or Enter while focused — native `<button>` behavior, no listener\nneeded for the Enter case) is the lightweight \"jump to this source\"\nsignal a host wires to scrolling/highlighting the matching\n`<lr-source-card>`. `lr-citation-open` (dblclick, or Space while\nfocused) is a distinct \"full preview\" signal — `href` in its detail is\n`undefined` when the `href` prop isn't set; the consumer decides what\n\"open\" means (a new tab, a dialog, etc). A double-click still fires two\n`lr-citation-activate` events (one per constituent click — standard\nbrowser `dblclick` behavior) in addition to the one `lr-citation-open`;\na consumer that only cares about the richer signal on a double-click\nshould ignore the paired activate events in that case.\n\nStatus coloring: `verified`/`high` use the success tones (a claim that's\nbeen checked out, or the model is confident in). `medium`/`low` use\nwarning (progressively less certain, but still a real citation).\n`unverified` uses danger — deliberately distinct from `low`: \"hasn't been\nchecked at all\" is a different (arguably riskier) claim than \"checked but\nuncertain\". `default` renders as plain neutral text with no background\ntint, for citations that carry no confidence/verification signal at all.",
           "name": "LyraCitationBadge",
+          "cssProperties": [
+            {
+              "description": "Text color of `base`, and its hover border color. Swapped by the reflected `status`: `var(--lr-color-success)` for `high`/`verified`, `var(--lr-color-warning)` for `medium`/`low`, `var(--lr-color-danger)` for `unverified`.",
+              "name": "--lr-citation-badge-accent",
+              "default": "var(--lr-color-text-quiet)"
+            },
+            {
+              "description": "Background of `base`. Swapped by the reflected `status` to the matching `-quiet` tone (`success`/`warning`/`danger`).",
+              "name": "--lr-citation-badge-bg",
+              "default": "transparent"
+            },
+            {
+              "description": "Resting border color of `base`; no `status` changes it, so it stays transparent unless a host overrides it.",
+              "name": "--lr-citation-badge-border",
+              "default": "transparent"
+            }
+          ],
           "cssParts": [
             {
               "description": "The clickable badge (`<button>`).",
@@ -147616,6 +149432,11 @@
               "description": "Background color.",
               "name": "--lr-entity-chip-bg",
               "default": "var(--lr-color-brand-quiet)"
+            },
+            {
+              "description": "Border color of the chip.",
+              "name": "--lr-entity-chip-border",
+              "default": "transparent"
             }
           ],
           "cssParts": [
@@ -152897,6 +154718,10 @@
               "description": "The row's `<lr-progress-bar>`, only rendered for an active (uploading through indexing) stage.",
               "name": "item-progress"
             },
+            {
+              "description": "The row's `<lr-badge>` showing the localized stage label; its `variant` tracks `stage`.",
+              "name": "item-stage"
+            },
             {
               "description": "The row container in non-virtualized mode (`role=\"list\"`).",
               "name": "list"
@@ -160317,6 +162142,10 @@
               "description": "One metadata entry's key (a `<dt>`).",
               "name": "evidence-metadata-key"
             },
+            {
+              "description": "One metadata entry's `<dt>`/`<dd>` pair wrapper, inside `evidence-metadata`.",
+              "name": "evidence-metadata-row"
+            },
             {
               "description": "One metadata entry's value (a `<dd>`).",
               "name": "evidence-metadata-value"
@@ -163160,6 +164989,13 @@
           "kind": "class",
           "description": "`<lr-diff-view>` — a real two-string line diff (Myers/LCS-style alignment), rendered as\ninterleaved unified-diff output -- not diff-flavored syntax highlighting over an\nalready-formatted string (`lr-code-block`'s `language=\"diff\"` only lexically colors a string\nthe consumer already unified-diffed; it has no two-string-compare entry point). First-party\ninvention (no Web Awesome equivalent).",
           "name": "LyraDiffView",
+          "cssProperties": [
+            {
+              "description": "Font family used for the diff lines.",
+              "name": "--lr-diff-view-font",
+              "default": "var(--lr-font-mono)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The root wrapper.",
@@ -166886,6 +168722,13 @@
           "kind": "class",
           "description": "`<lr-icon>` — a tiny dependency-free SVG icon primitive using a named path set.",
           "name": "LyraIcon",
+          "cssProperties": [
+            {
+              "description": "Inline and block size of the icon box.",
+              "name": "--lr-icon-size",
+              "default": "var(--lr-size-1-25rem)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The rendered SVG.",
@@ -167790,6 +169633,18 @@
           "kind": "class",
           "description": "`<lr-json-viewer>` — a collapsible, copyable tree view for an arbitrary\nJSON-serializable value (object/array/string/number/boolean/null/\nundefined). Serves as the fallback renderer wherever a raw payload (tool\ncall arguments, a tool result, an API response) needs inspecting without a\nbespoke view.\n\nExpand/collapse state is keyed by structural path (not by object identity),\nso it survives a `data` reassignment that keeps the same shape -- e.g. a\nstreaming tool result being patched in place.",
           "name": "LyraJsonViewer",
+          "cssProperties": [
+            {
+              "description": "Cap on `[part=\"base\"]`'s block size, past which the viewer scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`.",
+              "name": "--lr-json-viewer-max-height",
+              "default": "none"
+            },
+            {
+              "description": "Font family used for the rendered tree.",
+              "name": "--lr-json-viewer-font",
+              "default": "var(--lr-font-mono)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The root scroll container; respects `max-height`.",
@@ -168590,6 +170445,43 @@
           "kind": "class",
           "description": "`<lr-known-date>` — a date a user already knows (a birthdate, a passport\nissue/expiry date) collected as three plain, labeled day/month/year number\nfields in the locale's natural field order, rather than a calendar popup.\nForm-associated; the submitted form value is always canonical ISO 8601\n(`YYYY-MM-DD`), or `''` while any field is blank or the combination isn't a\nreal calendar date. Mirrors Web Awesome's `wa-known-date` API surface under\n`lr-`, with `appearance`/`pill`/`form` dropped and `size` normalized to\nthis library's own `xs`–`xl` scale, matching every other lyra form control\nmirrored from a Web Awesome counterpart.\n\nA field's own `<input>` shows exactly what was typed (never reformatted or\nreverted) -- only the composite `value` is zero-padded. Auto-advance\n(typing a field's last digit moves focus to the next field) and\nbackspace-to-previous-field-when-empty are this library's own additions on\ntop of Web Awesome's bare typing model, which documents no auto-advance;\ndon't remove them to \"restore\" WA parity. Arrow-key field-to-field\nnavigation at a field's text boundary is RTL-aware: the *physical* key that\nmeans \"toward the next field\" flips under an inherited `dir=\"rtl\"`, while\nthe field order itself (locale-derived) does not. Non-digit keystrokes are\nrejected before they reach a field's state -- no locale-specific numeral\ninput (e.g. Arabic-Indic digits) is supported.\n\nNo resizable text-editing surface exists (three fixed-width digit fields),\nso resize forwarding doesn't apply, and `spellcheck`/`autocapitalize`/\n`autocorrect`/`wrap` don't meaningfully apply to 2–4-digit numeric fields\neither -- the same carve-out `lr-input[type=\"number\"]` already documents.",
           "name": "LyraKnownDate",
+          "cssProperties": [
+            {
+              "description": "Block padding of each `field-input`, auto-swapped per `size`.",
+              "name": "--lr-known-date-field-padding-block",
+              "default": "var(--lr-space-s)"
+            },
+            {
+              "description": "Inline padding of each `field-input`, auto-swapped per `size`.",
+              "name": "--lr-known-date-field-padding-inline",
+              "default": "var(--lr-space-s)"
+            },
+            {
+              "description": "Font size of each `field-input`, auto-swapped per `size`.",
+              "name": "--lr-known-date-field-font-size",
+              "default": "var(--lr-font-size-md-sm)"
+            },
+            {
+              "description": "Gap between the three field blocks.",
+              "name": "--lr-known-date-field-gap",
+              "default": "var(--lr-space-s)"
+            },
+            {
+              "description": "Inline size of the day field.",
+              "name": "--lr-known-date-day-field-width",
+              "default": "var(--lr-size-3-5em)"
+            },
+            {
+              "description": "Inline size of the month field.",
+              "name": "--lr-known-date-month-field-width",
+              "default": "var(--lr-size-3-5em)"
+            },
+            {
+              "description": "Inline size of the year field.",
+              "name": "--lr-known-date-year-field-width",
+              "default": "var(--lr-size-5em)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The validation message.",
@@ -174777,6 +176669,13 @@
           "kind": "class",
           "description": "Parses `.ics` calendars with the optional `ical.js` peer and renders each\nVEVENT as plain text, preserving summaries, times, locations, and details.",
           "name": "LyraCalendarViewer",
+          "cssProperties": [
+            {
+              "description": "Maximum block size of `[part=\"body\"]` before it scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`.",
+              "name": "--lr-calendar-viewer-max-height",
+              "default": "none"
+            }
+          ],
           "cssParts": [
             {
               "description": "The root container.",
@@ -176654,6 +178553,18 @@
           "kind": "class",
           "description": "Fetches delimited text and renders a virtualized, accessible data table: a `role=\"table\"`\ncontainer with a sticky `role=\"row\"` header, composed with `<lr-virtual-list item-role=\"row\">`\nfor the body so files far larger than a real synchronous `<table>` can render without locking the\nmain thread.\n\nAdopts `DocumentAnchorTarget`: a `cell-range` anchor addresses the raw file grid, 1-based, with\nthe header row always occupying row 1 (this component always parses with PapaParse's `header:\ntrue`, so the first row is never part of the virtualized body) -- `scrollToAnchor()` scrolls the\naddressed row into view via the virtualized list's `active-id`. A `sheet`-qualified anchor never\nresolves here -- this viewer has no sheets. `highlights` paint as a `part=\"cell-highlight\"` cell\nwrapping a focusable `part=\"cell-highlight-action\"` native button (keeping the ARIA table tree\nintact) on membership, recomputed per row inside `renderRow()` so a row scrolled out and back\nin reconstructs its highlight for free, with no persistent DOM to keep in sync. `search()` is a\ncase-insensitive substring match over every body cell's raw string value, ordered row then column.",
           "name": "LyraDatasetViewer",
+          "cssProperties": [
+            {
+              "description": "Maximum block size of `[part=\"body\"]` before it scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`.",
+              "name": "--lr-dataset-viewer-max-height",
+              "default": "none"
+            },
+            {
+              "description": "Outline color of a highlighted cell. The active highlight sets it inline to `var(--lr-color-warning, var(--lr-color-brand))`.",
+              "name": "--lr-dataset-viewer-highlight-color",
+              "default": "var(--lr-color-brand)"
+            }
+          ],
           "cssParts": [
             {
               "description": "The root wrapper.",
@@ -177389,7 +179300,7 @@
             {
               "description": "Maximum block size of a side-by-side pane before it scrolls internally.",
               "name": "--lr-document-compare-pane-max-height",
-              "default": "24rem"
+              "default": "var(--lr-size-24rem)"
             }
           ],
           "cssParts": [
@@ -178076,6 +179987,11 @@
               "description": "Duration of one indeterminate loading-indicator rotation.",
               "name": "--lr-document-preview-spin-duration",
               "default": "0.8s"
+            },
+            {
+              "description": "Unitless 0-100 completion of the determinate loading ring (multiplied by `1%` in its conic gradient). Written inline by the component from the clamped `progress` value, so it is a read-out rather than a consumer knob.",
+              "name": "--lr-document-preview-progress",
+              "default": "0"
             }
           ],
           "cssParts": [
@@ -181740,6 +183656,13 @@
           "kind": "class",
           "description": "Parses `.eml` messages with the optional `postal-mime` peer and renders\ntheir HTML body only after DOMPurify sanitization. Plain-text messages remain\nuseful without DOMPurify. Attachment rows are real buttons that emit\n`lr-attachment-open` with the attachment's decoded bytes -- this component itself never\nopens, downloads, or object-URLs the content; a host routes the event into e.g.\n`URL.createObjectURL(new Blob([content], { type: mimeType }))` -> `lr-document-viewer` ->\nrevoke on `lr-close`. `fold-quotes` collapses trailing quoted-reply text/HTML behind a\nlocalized toggle.",
           "name": "LyraEmailViewer",
+          "cssProperties": [
+            {
+              "description": "Maximum block size of `[part=\"body\"]` before it scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`.",
+              "name": "--lr-email-viewer-max-height",
+              "default": "none"
+            }
+          ],
           "cssParts": [
             {
               "description": "An attachment's open button.",
@@ -183489,6 +185412,13 @@
           "kind": "class",
           "description": "Fetches and safely renders an inline HTML document.",
           "name": "LyraHtmlViewer",
+          "cssProperties": [
+            {
+              "description": "Maximum block size of `[part=\"body\"]` before it scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`.",
+              "name": "--lr-html-viewer-max-height",
+              "default": "none"
+            }
+          ],
           "cssParts": [
             {
               "description": "The root container.",