@aceshooting/lyra-ui 8.0.0 → 8.2.0

package/llms-full.txt

@@ -5277,7 +5277,9 @@ options and its messages, scaled by `size` through the shared control ladder.
 **Methods:** `setCustomValidity(message = '')` sets or clears a group-level consumer error. A
 non-empty message raises `customError` and blocks submission; `setCustomValidity('')` and
 `resetValidity()` restore the group's computed validity, including `valueMissing` when a required
-group has no selected radio.
+group has no selected radio. `focus()` moves focus to the selected (or first enabled) radio;
+`click()` mirrors it by activating that same radio, so the group behaves like a single control
+under both APIs rather than leaving `click()` a no-op.
 
 ## `lr-checkbox-group`
 
@@ -5306,6 +5308,8 @@ goes back to `valueMissing`. It survives every child toggle, slot change and for
 Session restore uses a `FormData` state containing the repeated selected strings; it is independent
 of the control's current `name`, preserves duplicate-value cardinality, waits for early-arriving
 option children, and falls back to an empty selection for malformed state. Restoration is silent.
+`click()` forwards focus to the first enabled checkbox, so the host behaves like a single control
+rather than a no-op under a `<label>`-driven or programmatic click.
 **CSS parts:** `form-control`, `form-control-label`, `options` / `form-control-input`, `hint`,
 `error`.
 **The required marker.** `required` with a non-empty group `label` paints the library's shared
@@ -5932,6 +5936,8 @@ express ("this item was already annotated by someone else"): a non-empty message
 required keys, and any key with an unsupported `type`, still hold it invalid. It is independent of
 the per-key `errors` map, which stays a read-out of this rubric's own field rules, so a message set
 here is never attributed to one key. It survives every `value`/`keys` write and a form reset.
+`click()` forwards to the active field (the same one a submit-and-next transition auto-focuses),
+so the host behaves like a single control under both a `<label>`-driven and a programmatic click.
 
 **CSS parts:** `base` (the outer `role="group"` wrapper), `field` (one key's wrapper), `label`, `description`,
 `scale` (the rendered score/category/comment control's wrapper), `error` (a field-level validation
@@ -6021,9 +6027,11 @@ required picker with nothing committed goes back to `valueMissing`. It survives
 
 **Slots:** `label`, `hint`, `error`.
 
-**CSS parts:** `form-control`, `form-control-label`, `trigger`, `listbox`, `option`,
-`option-flag` (present only while `showFlags` is on), `option-label`, `option-tag` (the row's
-secondary line — the raw BCP-47 tag), `expand-icon`, `hint`, `error`.
+**CSS parts:** `form-control`, `form-control-label`, `trigger`,
+`trigger-flag` (the trigger's leading `<lr-flag>` for the current value, present only while
+`showFlags` is on), `listbox`, `option`, `option-flag` (present only while `showFlags` is on),
+`option-label`, `option-tag` (the row's secondary line — the raw BCP-47 tag), `expand-icon`,
+`hint`, `error`.
 
 **The required marker.** `required` with a non-empty `label` paints the library's shared marker on
 `[part="form-control-label"]` — the one `::after` rule described under "The required-field marker"
@@ -8530,7 +8538,9 @@ restores the control's own computed validity rather than forcing it valid — a
 field edit) and `form.reset()`, exactly like a native control, where only another
 `setCustomValidity('')` clears it. The message is caller-supplied and is used verbatim, never
 localized, and it is whole-control state: it does not land in `errors`, which is keyed by the
-csspart of the field a message belongs to.
+csspart of the field a message belongs to. `click()` forwards focus to the first rendered field
+(start/end/hop-limit/direction/save-name, in that order), so the host behaves like a single
+control rather than a no-op under a `<label>`-driven or programmatic click.
 
 **Events:** `lr-input`, `lr-validity-change`, `lr-invalid` (no detail; one bubbling/composed alias
 when the complete builder fails a native validity check),
@@ -15873,18 +15883,18 @@ import '@aceshooting/lyra-ui/components/media/pan-zoom/pan-zoom.js';
 
 A compact chip representing one file queued for (or already part of) a chat message — used in a
 composer's pre-send attachment tray or a sent message's attachments display. Two independent ways
-to populate it: set `file` to a real `File` (fresh from a picker/drop), from which `name`/`size`/
-`mime-type` and the image thumbnail are all auto-derived; or set the plain `name`/`size`/
+to populate it: set `file` to a real `File` (fresh from a picker/drop), from which `name`/`bytes`/
+`mime-type` and the image thumbnail are all auto-derived; or set the plain `name`/`bytes`/
 `mime-type`/`thumbnail-src` props instead, for reconstructing a chip from server-persisted
 attachment metadata after a page reload, when no real `File` object exists any more. `file` always
 wins when both are present. When a real `File` or `preview-src` is available, the chip also offers
 a localized preview action that opens `<lr-document-viewer>` using the same effective MIME type.
 
 **Properties:**
-- `file?: File` (attribute `false`, i.e. property-only) — when set, `name`/`size`/`mimeType`/the
+- `file?: File` (attribute `false`, i.e. property-only) — when set, `name`/`bytes`/`mimeType`/the
   image thumbnail are all derived from it, taking precedence over the independent props below
 - `name: string = ''` — filename, used only while `file` is unset
-- `size: number = 0` — file size in bytes, used only while `file` is unset
+- `bytes: number = 0` — file size in bytes, used only while `file` is unset
 - `mimeType: string = ''` (attribute `mime-type`) — used only while `file` is unset
 - `thumbnailSrc: string = ''` (attribute `thumbnail-src`) — thumbnail image URL, used only while
   `file` is unset; rendered whenever present regardless of `mimeType` (no `file`-derived equivalent
@@ -15917,6 +15927,12 @@ a localized preview action that opens `<lr-document-viewer>` using the same effe
 - `untitledLabel: string = 'Untitled file'` (attribute `untitled-label`) — fallback filename and
   tooltip when neither `file` nor `name` supplies a name
 
+**Renamed in 8.0.0 — breaking:** the byte count is `bytes`, not `size` (same rename as
+`lr-file-icon`'s). Everywhere else in this library `size` names a tier on the shared size ladder,
+and a numeric byte count answering to the same property name is a collision a consumer only
+discovers at runtime. A leftover `size="245000"` is an unknown attribute now: `bytes` stays `0` and
+the `size` part renders nothing.
+
 The component identifies *which* attachment a `lr-remove`/`lr-retry` event is about via the
 platform's own `id` attribute/property rather than a second, differently-named prop. Set `id="..."`
 when you have a stable server-side attachment id; when unset and `file` is set, a stable id is
@@ -15929,7 +15945,9 @@ mimeType, src }`, emitted when the preview action opens the document viewer)
 
 **Slots:** none.
 
-**CSS parts:** `base`, `thumbnail`, `meta`, `name`, `size`, `status-text` (the visible text twin of
+**CSS parts:** `base`, `thumbnail`, `meta`, `name`, `size` (the formatted `bytes` count; the part
+keeps its pre-rename name — it is the rendered size *text*, and renaming a part would break shipped
+`::part()` rules for no gain), `status-text` (the visible text twin of
 the status accent color, so the state is carried in words and not only in color; empty and hidden
 for `pending`/`done`), `progress`, `progress-fill`, `spinner` (decorative/`aria-hidden` while the
 adjacent `status-text` supplies the wording), `retry-button`, `preview-button`,
@@ -15972,13 +15990,13 @@ decimal place), and a negative or non-finite input (`NaN`, `Infinity`) returns `
 size renders nothing instead of `"NaN B"`.
 
 ```html
-<lr-attachment-chip name="report.pdf" size="245000" mime-type="application/pdf" status="done"></lr-attachment-chip>
+<lr-attachment-chip name="report.pdf" bytes="245000" mime-type="application/pdf" status="done"></lr-attachment-chip>
 <lr-attachment-chip id="att-2" status="uploading" progress="42"></lr-attachment-chip>
 <script type="module">
   import { formatFileSize } from '@aceshooting/lyra-ui/components/media/attachment-chip/file-size.js';
 
   const chip = document.createElement('lr-attachment-chip');
-  chip.file = pickedFile; // name/size/mime-type/thumbnail all derived from the File
+  chip.file = pickedFile; // name/bytes/mime-type/thumbnail all derived from the File
   chip.addEventListener('lr-remove', (e) => removeAttachment(e.detail.id));
   chip.addEventListener('lr-retry', (e) => retryUpload(e.detail.id));
   chip.addEventListener('lr-preview', (e) => console.log(e.detail));
@@ -15995,10 +16013,10 @@ or to `undefined`, and again on disconnect. Because the same pass that allocates
 previous entry, reassigning `file` several times before the next paint leaks nothing.
 
 **Known gotchas:**
-- `file` always wins over `name`/`size`/`mimeType` when both are set — assigning those props while
+- `file` always wins over `name`/`bytes`/`mimeType` when both are set — assigning those props while
   `file` is also set has no visible effect on the rendered chip.
-- A `0`-byte size and an unset size are indistinguishable (there's no separate flag for "genuinely
-  empty file"); the `size` part is hidden entirely rather than showing a literal `"0 B"`.
+- A `0` `bytes` value and an unset `bytes` value are indistinguishable (there's no separate flag for
+  "genuinely empty file"); the `size` part is hidden entirely rather than showing a literal `"0 B"`.
 - `progress` only renders as a numeric bar when `status="uploading"` **and** `progress` is finite
   and `> 0`; otherwise it's either nothing (non-`uploading` status) or the indeterminate spinner
   (`uploading` with no known progress).
@@ -22926,6 +22944,9 @@ and makes the form invalid instead of being silently accepted.
   re-runs the validity sync) and a `form.reset()`, matching a native control. The message is
   whole-control state, so it is deliberately absent from `errors`, which is keyed by schema
   property; it is caller-supplied content and is used verbatim, never localized.
+- `click(): void` — forwards a host click to the first generated field's control, so the form
+  behaves like a single control under both a `<label>`-driven and a programmatic click; a no-op
+  while `disabled`.
 
 **Events:** `lr-input` (`detail: { value: Record<string, unknown> }` — the full current value
 object, every property with defaults resolved, not just the field that changed), `lr-validity-change`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "8.0.0",
+  "version": "8.2.0",
   "description": "Free, independent Lit web components: an open-source alternative to Shoelace and Web Awesome with accessible forms, dashboards, charts, and agent UI.",
   "keywords": [
     "web-components",
@@ -1364,7 +1364,7 @@
     "d3-force": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
-    "dompurify": "^3.4.12",
+    "dompurify": "^3.4.13",
     "emoji-picker-element-data": "^1.8.0",
     "epubjs": "^0.3.93",
     "ical.js": "^2.2.1",
@@ -1373,13 +1373,13 @@
     "libphonenumber-js": ">=1.11.0 <2",
     "mammoth": "^1.12.0",
     "maplibre-gl": ">=5 <7",
-    "marked": "^18.0.7",
+    "marked": "^18.0.9",
     "papaparse": "^5.5.4",
     "pdfjs-dist": "^6.2.108",
     "postal-mime": "^2.7.5",
     "qrcode": "^1.5.4",
     "react": ">=19 <20",
-    "shiki": "^4.3.1",
+    "shiki": "^4.4.2",
     "svelte": ">=5 <6",
     "vue": ">=3.5 <4",
     "xlsx": ">=0.20.3 <0.21.0"
@@ -1501,7 +1501,7 @@
     "d3-force": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
-    "dompurify": "^3.4.12",
+    "dompurify": "^3.4.13",
     "emoji-picker-element-data": "^1.8.0",
     "epubjs": "^0.3.93",
     "fast-check": "^4.9.0",
@@ -1511,8 +1511,8 @@
     "libphonenumber-js": "^1.13.10",
     "mammoth": "^1.12.0",
     "maplibre-gl": "^6.1.0",
-    "marked": "^18.0.7",
-    "oxc-parser": "^0.142.0",
+    "marked": "^18.0.9",
+    "oxc-parser": "^0.143.0",
     "papaparse": "^5.5.4",
     "pdfjs-dist": "^6.2.108",
     "pixelmatch": "^7.2.0",
@@ -1521,7 +1521,7 @@
     "postal-mime": "^2.7.5",
     "qrcode": "^1.5.4",
     "react": "^19.2.8",
-    "shiki": "^4.4.1",
+    "shiki": "^4.4.2",
     "svelte": "^5.56.8",
     "typescript": "^7.0.2",
     "vue": "^3.5.40",
@@ -1539,6 +1539,7 @@
     "test:visual": "node scripts/visual-regression.mjs",
     "test:platform": "wtr src/internal/form-associated.test.ts src/internal/form-control-labels.test.ts src/internal/overlay-manager.test.ts src/internal/rendered-state.test.ts src/internal/overlay-components.test.ts src/components/forms/input/input.test.ts src/components/forms/textarea/textarea.test.ts src/components/forms/checkbox/checkbox.test.ts src/components/forms/radio/radio.test.ts src/components/forms/slider/slider.test.ts src/components/forms/phone-input/phone-input.test.ts src/components/forms/token-input/token-input.test.ts src/components/forms/combobox/combobox.test.ts src/components/forms/select/select.test.ts src/components/forms/date-picker/date-input.test.ts src/components/layout/menu/menu.test.ts src/components/layout/split-panel/split-panel.test.ts src/components/overlays/overlay/overlay.test.ts src/components/overlays/dialog/dialog.test.ts src/components/overlays/drawer/drawer.test.ts src/components/agent-tools/tool-approval-dialog/tool-approval-dialog.test.ts src/components/layout/tab-group/tab-group.test.ts src/components/data/tree/tree.test.ts src/components/layout/carousel/carousel.test.ts src/components/data/table/table.test.ts src/components/layout/virtual-list/virtual-list.test.ts",
     "test:full-engine-shard": "node scripts/full-engine-shard.mjs",
+    "test:platform-shard": "node scripts/full-engine-shard.mjs",
     "test:coverage": "WTR_COVERAGE=1 wtr $(find src -name '*.test.ts' -print)",
     "check:coverage-floors": "node scripts/write-coverage-floors.mjs",
     "check:palette-freshness": "node scripts/check-palette-freshness.mjs",

package/vscode-html-data.json

@@ -75,7 +75,7 @@
       "name": "lr-accordion-item",
       "description": {
         "kind": "markdown",
-        "value": "`<lr-accordion-item>` — an accessible expandable section for `<lr-accordion>`.\n\n`expanded`/`label` are the canonical accordion vocabulary. The inherited Details vocabulary is\nalso supported: `open` aliases `expanded`, `summary` aliases `label`, the `summary` slot aliases\nthe `label` slot, and `show()`/`hide()` alias `expand()`/`collapse()`.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `4.0.0`\n- Rationale: This exact lr-* tag appears in a published Lyra release manifest and remains a supported public contract under semver.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Panel content. |\n| `collapse-icon` | Icon shown while the panel is open. |\n| `expand-icon` | Icon shown while the panel is closed. |\n| `icon` | Optional decorative expand/collapse icon. |\n| `label` | Header label; takes priority over `label`, `summary`, and the `summary` slot. |\n| `summary` | Summary content. Takes priority over `summary` when any light-DOM child carries `slot=\"summary\"` — the fallback localized \"Details\" text only appears when neither is set. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `accordion-item` | The outer wrapper. It is the same node as `base`. |\n| `base` | Compatibility name for the native details wrapper; use `details`. |\n| `button` | The trigger button. |\n| `content` | The panel content. |\n| `details` | The native details wrapper. It is the same node as `base`. |\n| `header` | The summary-row layout wrapper. |\n| `heading` | Heading around the trigger; omitted for `heading-level=\"none\"`. |\n| `icon` | The expand/collapse icon wrapper. |\n| `label` | Label container. |\n| `panel` | Expandable panel. |\n| `summary` | The summary control. |\n| `summary-icon` | Shoelace-compatible alias for `icon`; both names are on the same node. |\n\n---\n\n**CSS Custom Properties**\n\n- `--easing` — Compatibility alias for `--lr-accordion-item-easing`.\n- `--hide-duration` (default: `var(--lr-duration-base)`) — Collapse-icon transition duration.\n- `--lr-accordion-item-easing` (default: `var(--lr-easing-standard)`) — Expand/collapse easing.\n- `--lr-accordion-item-hide-duration` (default: `var(--lr-duration-base)`) — Collapse transition duration.\n- `--lr-accordion-item-show-duration` (default: `var(--lr-duration-base)`) — Expand transition duration.\n- `--lr-accordion-item-spacing` (default: `var(--lr-form-control-padding-inline)`) — Header/content spacing.\n- `--lr-details-font-size` (default: `var(--lr-form-control-font-size)`) — Text size of the summary and the panel. Each `size` tier sets it from the library's shared size ladder.\n- `--lr-details-spacing` (default: `var(--lr-form-control-padding-inline)`) — Block rhythm: the summary's block padding and the panel's trailing padding, kept equal so a stack of disclosures reads evenly. Each `size` tier sets it from the shared ladder's inline-padding knob, whose values suit a stacked panel; the ladder's own block padding exists to fit text inside a fixed control height and would collapse the summary row.\n- `--show-duration` (default: `var(--lr-duration-base)`) — Expand-icon transition duration.\n- `--spacing` — Upstream-compatible spacing override for the summary and content."
+        "value": "`<lr-accordion-item>` — an accessible expandable section for `<lr-accordion>`.\n\n`expanded`/`label` are the canonical accordion vocabulary. The inherited Details vocabulary is\nalso supported: `open` aliases `expanded`, `summary` aliases `label`, the `summary` slot aliases\nthe `label` slot, and `show()`/`hide()` alias `expand()`/`collapse()`.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `4.0.0`\n- Rationale: This exact lr-* tag appears in a published Lyra release manifest and remains a supported public contract under semver.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Panel content. |\n| `collapse-icon` | Icon shown while the panel is open. |\n| `expand-icon` | Icon shown while the panel is closed. |\n| `icon` | Optional decorative expand/collapse icon. |\n| `label` | Header label; takes priority over `label`, `summary`, and the `summary` slot. |\n| `summary` | Summary content. Takes priority over `summary` when any light-DOM child carries `slot=\"summary\"` — the fallback localized \"Details\" text only appears when neither is set. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `accordion-item` | The outer wrapper. It is the same node as `base`. |\n| `base` | Compatibility name for the outer wrapper; use `accordion-item`. |\n| `button` | The trigger button. |\n| `content` | Content container inside the panel. |\n| `details` | The native details wrapper. It is the same node as `base`. |\n| `header` | The summary-row layout wrapper. |\n| `heading` | Heading around the trigger; omitted for `heading-level=\"none\"`. |\n| `icon` | Expand/collapse icon container. |\n| `label` | Label container. |\n| `panel` | Expandable panel. |\n| `summary` | Details compatibility alias for `button`; both names are on the same trigger. |\n| `summary-icon` | Shoelace-compatible alias for `icon`; both names are on the same node. |\n\n---\n\n**CSS Custom Properties**\n\n- `--easing` — Compatibility alias for `--lr-accordion-item-easing`.\n- `--hide-duration` (default: `var(--lr-duration-base)`) — Collapse-icon transition duration.\n- `--lr-accordion-item-easing` (default: `var(--lr-easing-standard)`) — Expand/collapse easing.\n- `--lr-accordion-item-hide-duration` (default: `var(--lr-duration-base)`) — Collapse transition duration.\n- `--lr-accordion-item-show-duration` (default: `var(--lr-duration-base)`) — Expand transition duration.\n- `--lr-accordion-item-spacing` (default: `var(--lr-form-control-padding-inline)`) — Header/content spacing.\n- `--lr-details-font-size` (default: `var(--lr-form-control-font-size)`) — Text size of the summary and the panel. Each `size` tier sets it from the library's shared size ladder.\n- `--lr-details-spacing` (default: `var(--lr-form-control-padding-inline)`) — Block rhythm: the summary's block padding and the panel's trailing padding, kept equal so a stack of disclosures reads evenly. Each `size` tier sets it from the shared ladder's inline-padding knob, whose values suit a stacked panel; the ladder's own block padding exists to fit text inside a fixed control height and would collapse the summary row.\n- `--show-duration` (default: `var(--lr-duration-base)`) — Expand-icon transition duration.\n- `--spacing` — Upstream-compatible spacing override for the summary and content."
       },
       "attributes": [
         {
@@ -8767,7 +8767,7 @@
       "name": "lr-dropdown-item",
       "description": {
         "kind": "markdown",
-        "value": "`<lr-dropdown-item>` — the Web Awesome-compatible name for a menu item.\nIt is intentionally a subclass of `<lr-menu-item>`, so it participates in\nthe same roving focus, checkbox, selection, and menu event contracts — and\nin the same `size` ladder, including the `small`/`medium`/`large` spellings.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `4.0.0`\n- Rationale: This exact lr-* tag appears in a published Lyra release manifest and remains a supported public contract under semver.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The item's label content. |\n| `details` | Secondary WA-compatible detail text rendered after the label. |\n| `icon` | Optional leading icon. |\n| `prefix` | Shoelace-compatible alias for leading content. |\n| `submenu` | A nested `<lr-menu>` or direct mapped menu items that open beside this row. |\n| `suffix` | Shoelace-compatible trailing content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The row (`role` lives on the host — see the class doc). |\n| `checked-icon` | Shoelace-compatible wrapper around the checked glyph. |\n| `checkmark` | The checkmark glyph shown when a `type=\"checkbox\"` item is `checked`. Not rendered at all for `type=\"normal\"`. |\n| `details` | Wrapper around the `details` slot. |\n| `icon` | Wrapper around the `icon` slot. Not rendered at all when the slot is empty. |\n| `label` | Wrapper around the default slot. |\n| `prefix` | Wrapper around the `prefix` slot. |\n| `spinner` | Loading spinner. |\n| `spinner__base` | Shoelace-compatible alias on the loading spinner. |\n| `submenu` | The submenu panel/wrapper. |\n| `submenu-icon` | Wrapper around the chevron shown on a submenu parent. Not rendered at all without a `submenu` slot. Mirrors under RTL through this wrapper, never by swapping the glyph. |\n| `suffix` | Wrapper around the `suffix` slot. |\n\n---\n\n**CSS Custom Properties**\n\n- `--submenu-offset` (default: `-2px`) — Final signed distance between a submenu and its parent row. Negative values overlap the parent menu; positive values add separation. Mirrors under RTL."
+        "value": "`<lr-dropdown-item>` — the Web Awesome-compatible name for a menu item.\nIt is intentionally a subclass of `<lr-menu-item>`, so it participates in\nthe same roving focus, checkbox, selection, and menu event contracts — and\nin the same `size` ladder, including the `small`/`medium`/`large` spellings.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `4.0.0`\n- Rationale: This exact lr-* tag appears in a published Lyra release manifest and remains a supported public contract under semver.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The item's label content. |\n| `details` | Secondary WA-compatible detail text rendered after the label. |\n| `icon` | Optional leading icon. |\n| `prefix` | Shoelace-compatible alias for leading content. |\n| `submenu` | A nested `<lr-menu>` or direct mapped menu items that open beside this row. |\n| `suffix` | Shoelace-compatible trailing content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The visual item row. |\n| `checked-icon` | Shoelace-compatible checkbox-glyph wrapper. |\n| `checkmark` | WA-compatible checkbox glyph. |\n| `details` | WA-compatible detail wrapper. |\n| `icon` | Leading icon wrapper. |\n| `label` | Label wrapper. |\n| `prefix` | Shoelace-compatible leading-content wrapper. |\n| `spinner` | Loading spinner. |\n| `spinner__base` | Shoelace-compatible spinner alias. |\n| `submenu` | Submenu panel/wrapper. |\n| `submenu-icon` | Submenu chevron wrapper. |\n| `suffix` | Shoelace-compatible trailing-content wrapper. |\n\n---\n\n**CSS Custom Properties**\n\n- `--submenu-offset` (default: `-2px`) — Final signed distance between a submenu and its parent row. Negative values overlap the parent menu; positive values add separation. Mirrors under RTL."
       },
       "attributes": [
         {
@@ -13611,7 +13611,7 @@
       "name": "lr-locale-picker",
       "description": {
         "kind": "markdown",
-        "value": "`<lr-locale-picker>` — a closed-list locale switcher over the library's own locale registry.\n\nWith `locales` left unset (the default), the offered rows are exactly\n`getRegisteredLyraLocales()` — every locale with strings registered via `registerLyraLocale()`,\nplus `'en'` (always available through the library's built-in English fallback) — kept live via\n`subscribeLyraLocaleRegistry()` so a locale registered after mount (e.g. a lazily-loaded\ntranslation pack) appears without a manual refresh. Passing an explicit `locales` array\noverrides the auto-discovered list entirely: a curated subset, a custom order, custom labels,\nor a locale the host wants to offer before its strings are registered.\n\n`value` is the *committed* selection (form-submitted, drives `lr-change`) and starts `''`.\nWhile unset, the trigger displays `effectiveLocale` (the same ancestor-`lang`/registry\nresolution every other component already uses) as a live preview — but that preview is never a\ncommitment: `checkValidity()`/`required` are governed by the real `value`, which stays `''`\nuntil the host sets it or the user actually picks a row. This mirrors a native `<select>`\nrendering its first option's text without that being a committed selection.\n\nBuilt directly on the shared trigger-button/`aria-activedescendant` listbox technique\n`<lr-select>` uses (not composed from it) — a plain closed list, no filter/free-text mode; a\nlocale catalog is realistically dozens of rows, not thousands, so `<lr-combobox>`'s filterable\nmodel would be more surface than the job needs.\n\nSelecting a row sets `value` and emits a cancelable `lr-change` — if a listener doesn't call\n`event.preventDefault()`, the component applies the pick itself via `setLyraLocale()`. A host\nthat wants to intercept the pick (e.g. persist it to a profile first) calls\n`event.preventDefault()`; `value` still updates so the trigger reflects the pick, but the\npage-level locale is untouched until the host calls `setLyraLocale()` itself.\n\nDoes not touch `document.documentElement.lang`/`dir` — applying a picked locale's writing\ndirection to the page is left to the host, which already has everything it needs from\n`lr-change` to do that itself: the detail carries the resolved `direction` alongside `value`,\nso `document.documentElement.dir = event.detail.direction` is the whole of it.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `6.0.0`\n- Rationale: This exact lr-* tag appears in a published Lyra release manifest and remains a supported public contract under semver.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | The error message. |\n| `expand-icon` | The dropdown indicator. |\n| `form-control` | The outer wrapper around label, trigger, listbox, error and hint. |\n| `form-control-label` | The `<label>` element (only rendered — and only contributes to the accessible name — once `label` is non-empty). |\n| `hint` | The hint message. |\n| `listbox` | The options popover. |\n| `option` | An option row. |\n| `option-flag` | The row's leading `<lr-flag>` (present only while `showFlags` is on). |\n| `option-label` | An option row's label wrapper (native name + tag). |\n| `option-tag` | An option row's secondary line — the raw BCP-47 tag. |\n| `trigger` | The trigger button (positioning anchor). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-form-control-required-color` (default: `var(--lr-color-danger)`) — Color of that marker, retunable without touching any other danger-coloured surface.\n- `--lr-form-control-required-content` (default: `' *'`) — The required-field marker rendered after the label. Set it to `''` to suppress the marker, or to any other quoted string (`' (required)'`, a localized word) to replace it. Caller-supplied content, so it is never localized here.\n- `--lr-form-control-required-offset` (default: `0`) — Inline space between the label text and the marker.\n- `--lr-locale-picker-expand-size` — Decorative expand-icon box size, scaled by `size`.\n- `--lr-locale-picker-font-size` (default: `var(--lr-form-control-font-size)`) — Trigger font size, from the shared form-control size ladder.\n- `--lr-locale-picker-gap` (default: `var(--lr-space-xs)`) — Trigger and option child gap.\n- `--lr-locale-picker-open-border-color` (default: `var(--lr-color-brand)`) — Open trigger border color.\n- `--lr-locale-picker-option-active-bg` (default: `var(--lr-color-brand-quiet)`) — Background of a hovered or keyboard-active option row.\n- `--lr-locale-picker-option-selected-border-color` (default: `var(--lr-color-brand)`) — Selected option border.\n- `--lr-locale-picker-option-selected-color` (default: `var(--lr-color-brand)`) — Selected option text.\n- `--lr-locale-picker-radius` (default: `var(--lr-radius)`) — Trigger/listbox/option corner radius.\n- `--lr-locale-picker-trigger-height` — Exact trigger height. Unset by default (a floor only via `-trigger-min-height`); set a length to both floor and cap the trigger, e.g. to pixel-match a sibling field in the same toolbar row.\n- `--lr-locale-picker-trigger-hover-bg` (default: `var(--lr-color-brand-quiet)`) — Trigger hover background.\n- `--lr-locale-picker-trigger-min-height` (default: `var(--lr-form-control-height)`) — Trigger block-size floor. Reads the shared form-control height ladder, so retuning `--lr-theme-form-control-height-*` moves this control and every sibling field together.\n- `--lr-locale-picker-trigger-padding` — Trigger padding shorthand, scaled by `size`."
+        "value": "`<lr-locale-picker>` — a closed-list locale switcher over the library's own locale registry.\n\nWith `locales` left unset (the default), the offered rows are exactly\n`getRegisteredLyraLocales()` — every locale with strings registered via `registerLyraLocale()`,\nplus `'en'` (always available through the library's built-in English fallback) — kept live via\n`subscribeLyraLocaleRegistry()` so a locale registered after mount (e.g. a lazily-loaded\ntranslation pack) appears without a manual refresh. Passing an explicit `locales` array\noverrides the auto-discovered list entirely: a curated subset, a custom order, custom labels,\nor a locale the host wants to offer before its strings are registered.\n\n`value` is the *committed* selection (form-submitted, drives `lr-change`) and starts `''`.\nWhile unset, the trigger displays `effectiveLocale` (the same ancestor-`lang`/registry\nresolution every other component already uses) as a live preview — but that preview is never a\ncommitment: `checkValidity()`/`required` are governed by the real `value`, which stays `''`\nuntil the host sets it or the user actually picks a row. This mirrors a native `<select>`\nrendering its first option's text without that being a committed selection.\n\nBuilt directly on the shared trigger-button/`aria-activedescendant` listbox technique\n`<lr-select>` uses (not composed from it) — a plain closed list, no filter/free-text mode; a\nlocale catalog is realistically dozens of rows, not thousands, so `<lr-combobox>`'s filterable\nmodel would be more surface than the job needs.\n\nSelecting a row sets `value` and emits a cancelable `lr-change` — if a listener doesn't call\n`event.preventDefault()`, the component applies the pick itself via `setLyraLocale()`. A host\nthat wants to intercept the pick (e.g. persist it to a profile first) calls\n`event.preventDefault()`; `value` still updates so the trigger reflects the pick, but the\npage-level locale is untouched until the host calls `setLyraLocale()` itself.\n\nDoes not touch `document.documentElement.lang`/`dir` — applying a picked locale's writing\ndirection to the page is left to the host, which already has everything it needs from\n`lr-change` to do that itself: the detail carries the resolved `direction` alongside `value`,\nso `document.documentElement.dir = event.detail.direction` is the whole of it.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `6.0.0`\n- Rationale: This exact lr-* tag appears in a published Lyra release manifest and remains a supported public contract under semver.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | The error message. |\n| `expand-icon` | The dropdown indicator. |\n| `form-control` | The outer wrapper around label, trigger, listbox, error and hint. |\n| `form-control-label` | The `<label>` element (only rendered — and only contributes to the accessible name — once `label` is non-empty). |\n| `hint` | The hint message. |\n| `listbox` | The options popover. |\n| `option` | An option row. |\n| `option-flag` | The row's leading `<lr-flag>` (present only while `showFlags` is on). |\n| `option-label` | An option row's label wrapper (native name + tag). |\n| `option-tag` | An option row's secondary line — the raw BCP-47 tag. |\n| `trigger` | The trigger button (positioning anchor). |\n| `trigger-flag` | The trigger's leading `<lr-flag>` for the current value (present only while `showFlags` is on). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-form-control-required-color` (default: `var(--lr-color-danger)`) — Color of that marker, retunable without touching any other danger-coloured surface.\n- `--lr-form-control-required-content` (default: `' *'`) — The required-field marker rendered after the label. Set it to `''` to suppress the marker, or to any other quoted string (`' (required)'`, a localized word) to replace it. Caller-supplied content, so it is never localized here.\n- `--lr-form-control-required-offset` (default: `0`) — Inline space between the label text and the marker.\n- `--lr-locale-picker-expand-size` — Decorative expand-icon box size, scaled by `size`.\n- `--lr-locale-picker-font-size` (default: `var(--lr-form-control-font-size)`) — Trigger font size, from the shared form-control size ladder.\n- `--lr-locale-picker-gap` (default: `var(--lr-space-xs)`) — Trigger and option child gap.\n- `--lr-locale-picker-open-border-color` (default: `var(--lr-color-brand)`) — Open trigger border color.\n- `--lr-locale-picker-option-active-bg` (default: `var(--lr-color-brand-quiet)`) — Background of a hovered or keyboard-active option row.\n- `--lr-locale-picker-option-selected-border-color` (default: `var(--lr-color-brand)`) — Selected option border.\n- `--lr-locale-picker-option-selected-color` (default: `var(--lr-color-brand)`) — Selected option text.\n- `--lr-locale-picker-radius` (default: `var(--lr-radius)`) — Trigger/listbox/option corner radius.\n- `--lr-locale-picker-trigger-height` — Exact trigger height. Unset by default (a floor only via `-trigger-min-height`); set a length to both floor and cap the trigger, e.g. to pixel-match a sibling field in the same toolbar row.\n- `--lr-locale-picker-trigger-hover-bg` (default: `var(--lr-color-brand-quiet)`) — Trigger hover background.\n- `--lr-locale-picker-trigger-min-height` (default: `var(--lr-form-control-height)`) — Trigger block-size floor. Reads the shared form-control height ladder, so retuning `--lr-theme-form-control-height-*` moves this control and every sibling field together.\n- `--lr-locale-picker-trigger-padding` — Trigger padding shorthand, scaled by `size`."
       },
       "attributes": [
         {
@@ -14912,7 +14912,7 @@
       "name": "lr-native-time-input",
       "description": {
         "kind": "markdown",
-        "value": "`<lr-native-time-input>` — the browser-native time field preserved from Lyra 7.\n\nUse this control when the platform's own `input[type=time]` UI is preferred. The segmented,\nlocale-aware Web Awesome-compatible field is `<lr-time-input>`.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `8.0.0`\n- Rationale: This tag preserves the previously shipped native time-control contract while the primary lr-time-input name provides the segmented control.\n- Graduation: This compatibility surface remains stable while it preserves the Lyra 7 native behavior and has not entered a separately announced deprecation period.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `clear-icon` | Replaces the built-in clear glyph. |\n| `end` | Adornment after the native input and built-in actions. |\n| `error` | Custom error content. |\n| `help-text` | Shoelace alias for `hint`. |\n| `hide-password-icon` | Replaces the glyph shown while the password is visible. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n| `prefix` | Shoelace alias for `start`. |\n| `show-password-icon` | Replaces the glyph shown while the password is hidden. |\n| `start` | Adornment before the native input. |\n| `suffix` | Shoelace alias for `end`. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | Compatibility name for the control row; use `input-wrapper`. |\n| `clear-button` | The clear action, rendered for non-empty clearable text/search inputs. |\n| `end` | Wrapper around the `end` adornment slot. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, input, error and hint. |\n| `form-control-help-text` | Shoelace compatibility name for the hint message. |\n| `form-control-input` | Compatibility name for the control row. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `input` | The native `<input>` element. |\n| `input-wrapper` | The row wrapping the native input and built-in actions. It is the same node as `base`. |\n| `label` | Wrapper around the visible label content. |\n| `password-toggle` | The show/hide-password button, rendered only for `type=\"password\"` with `password-toggle` set. |\n| `password-toggle-button` | Wrapper around the password-toggle icon. |\n| `prefix` | Shoelace compatibility part on the `prefix` slot. |\n| `start` | Wrapper around the `start` adornment slot. |\n| `suffix` | Shoelace compatibility part on the `suffix` slot. |\n| `time-input` | The native time control row. It is the same node as `base` and the inherited `input-wrapper` part. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-form-control-required-color` (default: `var(--lr-color-danger)`) — Color of that marker, retunable without touching any other danger-coloured surface.\n- `--lr-form-control-required-content` (default: `' *'`) — The required-field marker rendered after the label. Set it to `''` to suppress the marker, or to any other quoted string (`' (required)'`, a localized word) to replace it. Caller-supplied content, so it is never localized here.\n- `--lr-form-control-required-offset` (default: `0`) — Inline space between the label text and the marker.\n- `--lr-input-border-color` (default: `var(--lr-color-border)`) — Border color of the control row, swapped per `appearance` in the same way as `--lr-input-fill`.\n- `--lr-input-control-height` — Exact outer control height. Unset by default, which leaves `--lr-input-control-min-height` as a floor only; set it to a length to both floor and cap the control row (e.g. to pixel-match `<lr-select>`/`<lr-combobox>` in the same toolbar). Because it is never declared by the component itself, it can be set from an ancestor or an outer-tree rule as well as inline on the element.\n- `--lr-input-control-min-height` (default: `var(--lr-form-control-height)`) — Outer control height floor, taken from the active `size` tier of the shared form-control ladder (`internal/sizes.styles.ts`), so an input is exactly as tall as an `<lr-button>`/`<lr-select>` of the same tier.\n- `--lr-input-fill` (default: `transparent`) — Background of the control row. Swapped per `appearance`; the documented default is `appearance=\"outlined\"`'s value.\n- `--lr-input-font-size` (default: `var(--lr-form-control-font-size)`) — Font size of the native input, from the active `size` tier.\n- `--lr-input-gap` (default: `var(--lr-space-xs)`) — Gap between the start/end adornments and the native input in the control row. Unlike the size knobs above it does not vary by `size` tier. Override it to retune without a `::part(input-wrapper)` rule.\n- `--lr-input-padding-block` (default: `var(--lr-form-control-padding-block)`) — Block padding of the native input, from the active `size` tier of the shared ladder.\n- `--lr-input-padding-inline` (default: `var(--lr-form-control-padding-inline)`) — Inline padding of the control row, from the active `size` tier.\n- `--lr-input-radius` (default: `var(--lr-form-control-radius)`) — Corner radius of the control row, from the active `size` tier of the shared ladder (the two tightest tiers take a smaller radius). `pill` swaps it to `--lr-radius-pill`."
+        "value": "`<lr-native-time-input>` — the browser-native time field preserved from Lyra 7.\n\nUse this control when the platform's own `input[type=time]` UI is preferred. The segmented,\nlocale-aware Web Awesome-compatible field is `<lr-time-input>`.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `8.0.0`\n- Rationale: This tag preserves the previously shipped native time-control contract while the primary lr-time-input name provides the segmented control.\n- Graduation: This compatibility surface remains stable while it preserves the Lyra 7 native behavior and has not entered a separately announced deprecation period.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `clear-icon` | Replaces the built-in clear glyph. |\n| `end` | Adornment after the native input and built-in actions. |\n| `error` | Custom error content. |\n| `help-text` | Shoelace alias for `hint`. |\n| `hide-password-icon` | Replaces the glyph shown while the password is visible. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n| `prefix` | Shoelace alias for `start`. |\n| `show-password-icon` | Replaces the glyph shown while the password is hidden. |\n| `start` | Adornment before the native input. |\n| `suffix` | Shoelace alias for `end`. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | Compatibility name for the control row; use `time-input`. |\n| `clear-button` | The clear action, rendered for non-empty clearable text/search inputs. |\n| `end` | Wrapper around the `end` adornment slot. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, input, error and hint. |\n| `form-control-help-text` | Shoelace compatibility name for the hint message. |\n| `form-control-input` | Compatibility name for the control row. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `input` | The native `<input>` element. |\n| `input-wrapper` | The row wrapping the native input and built-in actions. It is the same node as `base`. |\n| `label` | Wrapper around the visible label content. |\n| `password-toggle` | The show/hide-password button, rendered only for `type=\"password\"` with `password-toggle` set. |\n| `password-toggle-button` | Wrapper around the password-toggle icon. |\n| `prefix` | Shoelace compatibility part on the `prefix` slot. |\n| `start` | Wrapper around the `start` adornment slot. |\n| `suffix` | Shoelace compatibility part on the `suffix` slot. |\n| `time-input` | The native time control row. It is the same node as `base` and the inherited `input-wrapper` part. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-form-control-required-color` (default: `var(--lr-color-danger)`) — Color of that marker, retunable without touching any other danger-coloured surface.\n- `--lr-form-control-required-content` (default: `' *'`) — The required-field marker rendered after the label. Set it to `''` to suppress the marker, or to any other quoted string (`' (required)'`, a localized word) to replace it. Caller-supplied content, so it is never localized here.\n- `--lr-form-control-required-offset` (default: `0`) — Inline space between the label text and the marker.\n- `--lr-input-border-color` (default: `var(--lr-color-border)`) — Border color of the control row, swapped per `appearance` in the same way as `--lr-input-fill`.\n- `--lr-input-control-height` — Exact outer control height. Unset by default, which leaves `--lr-input-control-min-height` as a floor only; set it to a length to both floor and cap the control row (e.g. to pixel-match `<lr-select>`/`<lr-combobox>` in the same toolbar). Because it is never declared by the component itself, it can be set from an ancestor or an outer-tree rule as well as inline on the element.\n- `--lr-input-control-min-height` (default: `var(--lr-form-control-height)`) — Outer control height floor, taken from the active `size` tier of the shared form-control ladder (`internal/sizes.styles.ts`), so an input is exactly as tall as an `<lr-button>`/`<lr-select>` of the same tier.\n- `--lr-input-fill` (default: `transparent`) — Background of the control row. Swapped per `appearance`; the documented default is `appearance=\"outlined\"`'s value.\n- `--lr-input-font-size` (default: `var(--lr-form-control-font-size)`) — Font size of the native input, from the active `size` tier.\n- `--lr-input-gap` (default: `var(--lr-space-xs)`) — Gap between the start/end adornments and the native input in the control row. Unlike the size knobs above it does not vary by `size` tier. Override it to retune without a `::part(input-wrapper)` rule.\n- `--lr-input-padding-block` (default: `var(--lr-form-control-padding-block)`) — Block padding of the native input, from the active `size` tier of the shared ladder.\n- `--lr-input-padding-inline` (default: `var(--lr-form-control-padding-inline)`) — Inline padding of the control row, from the active `size` tier.\n- `--lr-input-radius` (default: `var(--lr-form-control-radius)`) — Corner radius of the control row, from the active `size` tier of the shared ladder (the two tightest tiers take a smaller radius). `pill` swaps it to `--lr-radius-pill`."
       },
       "attributes": [
         {
@@ -15411,7 +15411,7 @@
       "name": "lr-number-input",
       "description": {
         "kind": "markdown",
-        "value": "`<lr-number-input>` — a numeric field with the complete `lr-input` form, validation, and native\nediting contract, plus its own increment/decrement stepper pair.\n\nThe steppers replace the browser's built-in spin buttons rather than sitting beside them:\n`withoutSpinButtons` therefore defaults to `true` here (it defaults to `false` on `<lr-input>`),\nand both properties are independently settable, so `steppers=\"false\"\nwithout-spin-buttons=\"false\"` returns the field to a plain native `<input type=\"number\">`.\n\nEach stepper drives the inherited `stepUp()`/`stepDown()`, so `min`/`max` clamping and decimal\nhandling are the platform's. Unlike those silent methods, a stepper *click* is a user edit and\nemits the same `input`/`lr-input`/`change`/`lr-change` sequence typing would — but only when the\nvalue actually moved, so clicking at a bound is inert rather than emitting a no-op edit.\n\nThe steppers are deliberately outside the tab order (`tabindex=\"-1\"`), like the native spin\nbuttons they stand in for: a keyboard user steps the value with ArrowUp/ArrowDown on the field\nitself, which the native `<input type=\"number\">` already handles, so making them tab stops would\nadd two stops per field for no new capability. A click returns focus to the field.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `4.0.0`\n- Rationale: This exact lr-* tag appears in a published Lyra release manifest and remains a supported public contract under semver.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `clear-icon` | Replaces the built-in clear glyph. |\n| `decrement-icon` | Replaces the decrement stepper's built-in chevron. |\n| `end` | Adornment after the native input and built-in actions. |\n| `error` | Custom error content. |\n| `help-text` | Shoelace alias for `hint`. |\n| `hide-password-icon` | Replaces the glyph shown while the password is visible. |\n| `hint` | Custom hint content. |\n| `increment-icon` | Replaces the increment stepper's built-in chevron. |\n| `label` | Custom label content. |\n| `prefix` | Shoelace alias for `start`. |\n| `show-password-icon` | Replaces the glyph shown while the password is hidden. |\n| `start` | Adornment before the native input. |\n| `suffix` | Shoelace alias for `end`. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | Compatibility name for the control row; use `input-wrapper`. |\n| `clear-button` | The clear action, rendered for non-empty clearable text/search inputs. |\n| `end` | Wrapper around the `end` adornment slot. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, input, error and hint. |\n| `form-control-help-text` | Shoelace compatibility name for the hint message. |\n| `form-control-input` | Compatibility name for the control row. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `input` | The native `<input>` element. |\n| `input-wrapper` | The row wrapping the native input and built-in actions. It is the same node as `base`. |\n| `label` | Wrapper around the visible label content. |\n| `number-input` | The numeric control row. It is the same node as `base` and the inherited `input-wrapper` part. |\n| `password-toggle` | The show/hide-password button, rendered only for `type=\"password\"` with `password-toggle` set. |\n| `password-toggle-button` | Wrapper around the password-toggle icon. |\n| `prefix` | Shoelace compatibility part on the `prefix` slot. |\n| `start` | Wrapper around the `start` adornment slot. |\n| `stepper` | Shared part on both stepper buttons. |\n| `stepper-decrement` | The decrement button. |\n| `stepper-down` | Lyra compatibility name on `stepper-decrement`. |\n| `stepper-increment` | The increment button. |\n| `stepper-up` | Lyra compatibility name on `stepper-increment`. |\n| `suffix` | Shoelace compatibility part on the `suffix` slot. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-form-control-required-color` (default: `var(--lr-color-danger)`) — Color of that marker, retunable without touching any other danger-coloured surface.\n- `--lr-form-control-required-content` (default: `' *'`) — The required-field marker rendered after the label. Set it to `''` to suppress the marker, or to any other quoted string (`' (required)'`, a localized word) to replace it. Caller-supplied content, so it is never localized here.\n- `--lr-form-control-required-offset` (default: `0`) — Inline space between the label text and the marker.\n- `--lr-input-border-color` (default: `var(--lr-color-border)`) — Border color of the control row, swapped per `appearance` in the same way as `--lr-input-fill`.\n- `--lr-input-control-height` — Exact outer control height. Unset by default, which leaves `--lr-input-control-min-height` as a floor only; set it to a length to both floor and cap the control row (e.g. to pixel-match `<lr-select>`/`<lr-combobox>` in the same toolbar). Because it is never declared by the component itself, it can be set from an ancestor or an outer-tree rule as well as inline on the element.\n- `--lr-input-control-min-height` (default: `var(--lr-form-control-height)`) — Outer control height floor, taken from the active `size` tier of the shared form-control ladder (`internal/sizes.styles.ts`), so an input is exactly as tall as an `<lr-button>`/`<lr-select>` of the same tier.\n- `--lr-input-fill` (default: `transparent`) — Background of the control row. Swapped per `appearance`; the documented default is `appearance=\"outlined\"`'s value.\n- `--lr-input-font-size` (default: `var(--lr-form-control-font-size)`) — Font size of the native input, from the active `size` tier.\n- `--lr-input-gap` (default: `var(--lr-space-xs)`) — Gap between the start/end adornments and the native input in the control row. Unlike the size knobs above it does not vary by `size` tier. Override it to retune without a `::part(input-wrapper)` rule.\n- `--lr-input-padding-block` (default: `var(--lr-form-control-padding-block)`) — Block padding of the native input, from the active `size` tier of the shared ladder.\n- `--lr-input-padding-inline` (default: `var(--lr-form-control-padding-inline)`) — Inline padding of the control row, from the active `size` tier.\n- `--lr-input-radius` (default: `var(--lr-form-control-radius)`) — Corner radius of the control row, from the active `size` tier of the shared ladder (the two tightest tiers take a smaller radius). `pill` swaps it to `--lr-radius-pill`."
+        "value": "`<lr-number-input>` — a numeric field with the complete `lr-input` form, validation, and native\nediting contract, plus its own increment/decrement stepper pair.\n\nThe steppers replace the browser's built-in spin buttons rather than sitting beside them:\n`withoutSpinButtons` therefore defaults to `true` here (it defaults to `false` on `<lr-input>`),\nand both properties are independently settable, so `steppers=\"false\"\nwithout-spin-buttons=\"false\"` returns the field to a plain native `<input type=\"number\">`.\n\nEach stepper drives the inherited `stepUp()`/`stepDown()`, so `min`/`max` clamping and decimal\nhandling are the platform's. Unlike those silent methods, a stepper *click* is a user edit and\nemits the same `input`/`lr-input`/`change`/`lr-change` sequence typing would — but only when the\nvalue actually moved, so clicking at a bound is inert rather than emitting a no-op edit.\n\nThe steppers are deliberately outside the tab order (`tabindex=\"-1\"`), like the native spin\nbuttons they stand in for: a keyboard user steps the value with ArrowUp/ArrowDown on the field\nitself, which the native `<input type=\"number\">` already handles, so making them tab stops would\nadd two stops per field for no new capability. A click returns focus to the field.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `4.0.0`\n- Rationale: This exact lr-* tag appears in a published Lyra release manifest and remains a supported public contract under semver.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `clear-icon` | Replaces the built-in clear glyph. |\n| `decrement-icon` | Replaces the decrement stepper's built-in chevron. |\n| `end` | Adornment after the native input and built-in actions. |\n| `error` | Custom error content. |\n| `help-text` | Shoelace alias for `hint`. |\n| `hide-password-icon` | Replaces the glyph shown while the password is visible. |\n| `hint` | Custom hint content. |\n| `increment-icon` | Replaces the increment stepper's built-in chevron. |\n| `label` | Custom label content. |\n| `prefix` | Shoelace alias for `start`. |\n| `show-password-icon` | Replaces the glyph shown while the password is hidden. |\n| `start` | Adornment before the native input. |\n| `suffix` | Shoelace alias for `end`. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | Compatibility name for the control row; use `number-input`. |\n| `clear-button` | The clear action, rendered for non-empty clearable text/search inputs. |\n| `end` | Wrapper around the `end` adornment slot. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, input, error and hint. |\n| `form-control-help-text` | Shoelace compatibility name for the hint message. |\n| `form-control-input` | Compatibility name for the control row. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `input` | The native `<input>` element. |\n| `input-wrapper` | The row wrapping the native input and built-in actions. It is the same node as `base`. |\n| `label` | Wrapper around the visible label content. |\n| `number-input` | The numeric control row. It is the same node as `base` and the inherited `input-wrapper` part. |\n| `password-toggle` | The show/hide-password button, rendered only for `type=\"password\"` with `password-toggle` set. |\n| `password-toggle-button` | Wrapper around the password-toggle icon. |\n| `prefix` | Shoelace compatibility part on the `prefix` slot. |\n| `start` | Wrapper around the `start` adornment slot. |\n| `stepper` | Shared part on both stepper buttons. |\n| `stepper-decrement` | The decrement button. |\n| `stepper-down` | Lyra compatibility name on `stepper-decrement`. |\n| `stepper-increment` | The increment button. |\n| `stepper-up` | Lyra compatibility name on `stepper-increment`. |\n| `suffix` | Shoelace compatibility part on the `suffix` slot. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-form-control-required-color` (default: `var(--lr-color-danger)`) — Color of that marker, retunable without touching any other danger-coloured surface.\n- `--lr-form-control-required-content` (default: `' *'`) — The required-field marker rendered after the label. Set it to `''` to suppress the marker, or to any other quoted string (`' (required)'`, a localized word) to replace it. Caller-supplied content, so it is never localized here.\n- `--lr-form-control-required-offset` (default: `0`) — Inline space between the label text and the marker.\n- `--lr-input-border-color` (default: `var(--lr-color-border)`) — Border color of the control row, swapped per `appearance` in the same way as `--lr-input-fill`.\n- `--lr-input-control-height` — Exact outer control height. Unset by default, which leaves `--lr-input-control-min-height` as a floor only; set it to a length to both floor and cap the control row (e.g. to pixel-match `<lr-select>`/`<lr-combobox>` in the same toolbar). Because it is never declared by the component itself, it can be set from an ancestor or an outer-tree rule as well as inline on the element.\n- `--lr-input-control-min-height` (default: `var(--lr-form-control-height)`) — Outer control height floor, taken from the active `size` tier of the shared form-control ladder (`internal/sizes.styles.ts`), so an input is exactly as tall as an `<lr-button>`/`<lr-select>` of the same tier.\n- `--lr-input-fill` (default: `transparent`) — Background of the control row. Swapped per `appearance`; the documented default is `appearance=\"outlined\"`'s value.\n- `--lr-input-font-size` (default: `var(--lr-form-control-font-size)`) — Font size of the native input, from the active `size` tier.\n- `--lr-input-gap` (default: `var(--lr-space-xs)`) — Gap between the start/end adornments and the native input in the control row. Unlike the size knobs above it does not vary by `size` tier. Override it to retune without a `::part(input-wrapper)` rule.\n- `--lr-input-padding-block` (default: `var(--lr-form-control-padding-block)`) — Block padding of the native input, from the active `size` tier of the shared ladder.\n- `--lr-input-padding-inline` (default: `var(--lr-form-control-padding-inline)`) — Inline padding of the control row, from the active `size` tier.\n- `--lr-input-radius` (default: `var(--lr-form-control-radius)`) — Corner radius of the control row, from the active `size` tier of the shared ladder (the two tightest tiers take a smaller radius). `pill` swaps it to `--lr-radius-pill`."
       },
       "attributes": [
         {
@@ -18737,7 +18737,7 @@
       "name": "lr-radio-button",
       "description": {
         "kind": "markdown",
-        "value": "`<lr-radio-button>` — a single-choice control rendered as a button rather than a circle.\n\nThe same control as `<lr-radio>`, and deliberately a subclass of it: form association,\nvalidity, `form.reset()` restoration and the whole `<lr-radio-group>` ownership/roving-focus\ncontract are inherited rather than reimplemented, so the two can never drift apart. Only the\nchrome differs. A `<lr-radio-group>` accepts either tag, and the two can be mixed.\n\nConsecutive `<lr-radio-button>` siblings collapse their shared borders into one segmented\ncontrol automatically — nothing needs to be set on the group.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `8.0.0`\n- Rationale: This tag entered Lyra as a stable public API with documented behavior, accessibility, and cross-browser support.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Label content, including forwarded or element-only visuals. |\n| `prefix` | Content placed before the label, typically an icon. |\n| `suffix` | Content placed after the label. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The interactive radio control. |\n| `button` | Shoelace button-chrome alias in `appearance=\"button\"` mode. |\n| `button--checked` | Shoelace selected-button state alias. |\n| `checked-icon` | WA/Shoelace name for the same selected indicator. |\n| `circle` | The circular radio indicator. |\n| `control` | WA/Shoelace name for the indicator, or the interactive button in `appearance=\"button\"`. |\n| `control--checked` | Shoelace state alias on the selected indicator. |\n| `dot` | The selected indicator. |\n| `label` | The default slot wrapper. |\n| `prefix` | The leading-content wrapper. |\n| `suffix` | The trailing-content wrapper. |\n\n---\n\n**CSS Custom Properties**\n\n- `--checked-icon-color` (default: `var(--lr-radio-checked-dot-color)`) — WA-compatible selected-glyph color alias.\n- `--checked-icon-scale` (default: `1`) — WA-compatible selected-glyph scale alias.\n- `--lr-radio-checked-border-color` (default: `var(--lr-color-brand)`) — Border color of `[part='circle']` while `checked`. Retint just this control's checked ring without touching the shared `--lr-color-brand` token every other component also reads.\n- `--lr-radio-checked-dot-color` (default: `var(--lr-color-brand)`) — Background of `[part='dot']` while `checked`.\n- `--lr-radio-circle-size` (default: `min(var(--lr-icon-button-size), calc(var(--lr-form-control-height) * 0.7))`) — Edge length of `[part='circle']`. Derived from the `size` tier's shared control height so a radio lines up with an `<lr-input>`/`<lr-select>`/`<lr-button>` of the same `size`.\n- `--lr-radio-dot-size` (default: `min(calc(var(--lr-radio-circle-size) * 0.5), calc(var(--lr-form-control-height) * 0.3))`) — Edge length of `[part='dot']`, capped at half the circle so it can never outgrow its ring.\n- `--lr-radio-label-indent` (default: `calc(var(--lr-radio-circle-size) + var(--lr-space-s))`) — The inline distance from the control's start edge to the start of the label text, i.e. the circle's own floor plus the gap next to it — so it tracks `size` along with the circle. Published so a consumer composing per-option hint text under the label can align it without re-deriving that formula from the shadow styles, and used as the source of the real gap so the two cannot drift. Setting it on the element (or on `lr-radio` in your own stylesheet) moves the label; because custom properties inherit down and not sideways, it is *not* readable from a sibling node in your tree — align a sibling by computing the same formula from `--lr-theme-icon-button-size`, `--lr-theme-form-control-height-*` and `--lr-theme-space-s`, which you control.\n- `--lr-radio-radius` (default: `var(--lr-radius-pill)`) — Corner radius of the control's own chrome. A circular indicator is fully round at every setting; `<lr-radio-button>` re-points this knob at the shared control radius and swaps it for a pill when `pill` is set."
+        "value": "`<lr-radio-button>` — a single-choice control rendered as a button rather than a circle.\n\nThe same control as `<lr-radio>`, and deliberately a subclass of it: form association,\nvalidity, `form.reset()` restoration and the whole `<lr-radio-group>` ownership/roving-focus\ncontract are inherited rather than reimplemented, so the two can never drift apart. Only the\nchrome differs. A `<lr-radio-group>` accepts either tag, and the two can be mixed.\n\nConsecutive `<lr-radio-button>` siblings collapse their shared borders into one segmented\ncontrol automatically — nothing needs to be set on the group.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `8.0.0`\n- Rationale: This tag entered Lyra as a stable public API with documented behavior, accessibility, and cross-browser support.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Label content, including forwarded or element-only visuals. |\n| `prefix` | Content placed before the label, typically an icon. |\n| `suffix` | Content placed after the label. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The interactive button. Carries `checked` and `disabled` in the part name so a consumer can target either state through `::part()`. |\n| `button` | Shoelace name for the interactive button. |\n| `button--checked` | Shoelace state alias on the selected button. |\n| `checked-icon` | WA/Shoelace name for the same selected indicator. |\n| `circle` | The circular radio indicator. |\n| `control` | Compatibility alias for the interactive control. |\n| `control--checked` | Shoelace state alias on the selected indicator. |\n| `dot` | The selected indicator. |\n| `label` | The default slot wrapper. |\n| `prefix` | The leading-content wrapper. |\n| `suffix` | The trailing-content wrapper. |\n\n---\n\n**CSS Custom Properties**\n\n- `--checked-icon-color` (default: `var(--lr-radio-checked-dot-color)`) — WA-compatible selected-glyph color alias.\n- `--checked-icon-scale` (default: `1`) — WA-compatible selected-glyph scale alias.\n- `--lr-radio-checked-border-color` (default: `var(--lr-color-brand)`) — Border color of `[part='circle']` while `checked`. Retint just this control's checked ring without touching the shared `--lr-color-brand` token every other component also reads.\n- `--lr-radio-checked-dot-color` (default: `var(--lr-color-brand)`) — Background of `[part='dot']` while `checked`.\n- `--lr-radio-circle-size` (default: `min(var(--lr-icon-button-size), calc(var(--lr-form-control-height) * 0.7))`) — Edge length of `[part='circle']`. Derived from the `size` tier's shared control height so a radio lines up with an `<lr-input>`/`<lr-select>`/`<lr-button>` of the same `size`.\n- `--lr-radio-dot-size` (default: `min(calc(var(--lr-radio-circle-size) * 0.5), calc(var(--lr-form-control-height) * 0.3))`) — Edge length of `[part='dot']`, capped at half the circle so it can never outgrow its ring.\n- `--lr-radio-label-indent` (default: `calc(var(--lr-radio-circle-size) + var(--lr-space-s))`) — The inline distance from the control's start edge to the start of the label text, i.e. the circle's own floor plus the gap next to it — so it tracks `size` along with the circle. Published so a consumer composing per-option hint text under the label can align it without re-deriving that formula from the shadow styles, and used as the source of the real gap so the two cannot drift. Setting it on the element (or on `lr-radio` in your own stylesheet) moves the label; because custom properties inherit down and not sideways, it is *not* readable from a sibling node in your tree — align a sibling by computing the same formula from `--lr-theme-icon-button-size`, `--lr-theme-form-control-height-*` and `--lr-theme-space-s`, which you control.\n- `--lr-radio-radius` (default: `var(--lr-radius-pill)`) — Corner radius of the control's own chrome. A circular indicator is fully round at every setting; `<lr-radio-button>` re-points this knob at the shared control radius and swaps it for a pill when `pill` is set."
       },
       "attributes": [
         {
@@ -23100,7 +23100,7 @@
       "name": "lr-tag",
       "description": {
         "kind": "markdown",
-        "value": "`<lr-tag>` — the compact badge treatment with tag semantics: the same `variant`/`size`/\n`appearance`/`pill`/`attention` surface as `<lr-badge>`, plus an optional remove affordance for\na tag standing in for a dismissible selection, filter, or keyword.\n\nUnlike `<lr-chip>` (a deliberately controlled component that only ever announces a remove\nrequest), a removable tag removes *itself* on activation. `lr-remove` is the veto point for\nthat: cancel it with `preventDefault()` to keep the tag mounted and own the removal from your\nown state instead.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `4.0.0`\n- Rationale: This exact lr-* tag appears in a published Lyra release manifest and remains a supported public contract under semver.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Badge content. |\n| `end` | Content placed after the label, typically an icon. The wrapper collapses entirely (no stray gap) while empty. Mark purely decorative content `aria-hidden`. |\n| `start` | Content placed before the label, typically an icon. The wrapper collapses entirely (no stray gap) while empty. Mark purely decorative content `aria-hidden`. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `badge` | The badge surface. It is the same node as `base`. |\n| `base` | Compatibility name for the badge surface; use `badge`. |\n| `content` | Wrapper around the default slot; the part that truncates with an ellipsis. |\n| `end` | Wrapper around the `end` slot. Hidden entirely while empty. |\n| `remove-button` | The remove affordance, only rendered while `withRemove`. |\n| `remove-button__base` | Shoelace-compatible alias for `remove-button`; both names are on the same node. |\n| `start` | Wrapper around the `start` slot. Hidden entirely while empty. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-badge-attention-duration` (default: `var(--lr-duration-ambient)`) — One cycle of the `attention` animation.\n- `--lr-badge-attention-easing` (default: `var(--lr-easing-emphasized)`) — Timing function of the `attention` animation.\n- `--lr-badge-background` (default: `var(--lr-badge-fill)`) — Explicit override for the badge's background, winning over whatever `variant` and `appearance` resolved. Left unset (the default) so it still inherits from a consumer's own ancestor rule.\n- `--lr-badge-border` (default: `var(--lr-badge-stroke)`) — Explicit override for the badge's border color, on the same terms as `--lr-badge-background`.\n- `--lr-badge-bounce-distance` (default: `var(--lr-size-0-1875rem)`) — Peak travel of the `attention=\"bounce\"` hop.\n- `--lr-badge-color` (default: `var(--lr-badge-text)`) — Explicit override for the badge's text color, on the same terms as `--lr-badge-background`.\n- `--lr-badge-edge` (default: `var(--lr-color-border)`) — Palette slot: the variant's border color. Each non-neutral `variant` sets it to that variant's loud fill.\n- `--lr-badge-fill` (default: `var(--lr-badge-tint)`) — Surface slot: which palette entry `appearance` routed onto the background. Set it to retune a single appearance without touching the palette.\n- `--lr-badge-font-size` (default: `var(--lr-font-size-sm)`) — The badge's label font size. Each `size` sets it to that step's font size.\n- `--lr-badge-gap` (default: `var(--lr-space-2xs)`) — Space between the `start` slot, the label, and the `end` slot.\n- `--lr-badge-ink` (default: `var(--lr-color-text)`) — Palette slot: the variant's text color. Each non-neutral `variant` sets it to that variant's loud fill.\n- `--lr-badge-min-height` (default: `var(--lr-size-1-25rem)`) — The badge's minimum block size. Each `size` sets it to that step's minimum block size.\n- `--lr-badge-on-solid` (default: `var(--lr-color-on-loud)`) — Palette slot: the text color that stays legible on `--lr-badge-solid`.\n- `--lr-badge-padding-inline` (default: `var(--lr-space-s)`) — The badge's inline padding. Each `size` sets it to that step's inline padding.\n- `--lr-badge-pulse-color` (default: `color-mix(in srgb, currentColor 40%, transparent)`) — Color of the expanding ring drawn by `attention=\"pulse\"`.\n- `--lr-badge-pulse-spread` (default: `var(--lr-size-0-25rem)`) — How far the `attention=\"pulse\"` ring expands.\n- `--lr-badge-radius` (default: `var(--lr-radius)`) — Corner radius of the badge surface. `pill` raises it to `var(--lr-radius-pill)`. Does not vary by `size` tier.\n- `--lr-badge-solid` (default: `var(--lr-color-fill-loud)`) — Palette slot: the variant's loud fill, used by `appearance=\"accent\"`.\n- `--lr-badge-stroke` (default: `var(--lr-badge-edge)`) — Surface slot: which palette entry `appearance` routed onto the border color.\n- `--lr-badge-text` (default: `var(--lr-badge-ink)`) — Surface slot: which palette entry `appearance` routed onto the label color.\n- `--lr-badge-tint` (default: `var(--lr-color-surface)`) — Palette slot: the variant's quiet fill. Each non-neutral `variant` sets it to that variant's quiet fill from the shared semantic grid.\n- `--lr-tag-remove-hover-background` (default: `color-mix(in srgb, currentColor 16%, transparent)`) — Background of the remove button on hover.\n- `--lr-tag-remove-radius` (default: `var(--lr-badge-radius)`) — Corner radius of the remove button, defaulting to the tag's own corner so retuning one retunes both.\n- `--pulse-color` (default: `var(--lr-badge-pulse-color)`) — Upstream-compatible pulse-ring color."
+        "value": "`<lr-tag>` — the compact badge treatment with tag semantics: the same `variant`/`size`/\n`appearance`/`pill`/`attention` surface as `<lr-badge>`, plus an optional remove affordance for\na tag standing in for a dismissible selection, filter, or keyword.\n\nUnlike `<lr-chip>` (a deliberately controlled component that only ever announces a remove\nrequest), a removable tag removes *itself* on activation. `lr-remove` is the veto point for\nthat: cancel it with `preventDefault()` to keep the tag mounted and own the removal from your\nown state instead.\n\n---\n\n**Component metadata**\n\n- Status: `stable`\n- Since: `4.0.0`\n- Rationale: This exact lr-* tag appears in a published Lyra release manifest and remains a supported public contract under semver.\n- Graduation: Already stable; it retains that status while its documented behavior, accessibility, compatibility, and cross-browser support remain part of the public contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Badge content. |\n| `end` | Content placed after the label, typically an icon. The wrapper collapses entirely (no stray gap) while empty. Mark purely decorative content `aria-hidden`. |\n| `start` | Content placed before the label, typically an icon. The wrapper collapses entirely (no stray gap) while empty. Mark purely decorative content `aria-hidden`. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `badge` | The badge surface. It is the same node as `base`. |\n| `base` | The tag surface. |\n| `content` | Wrapper around the default slot; the part that truncates with an ellipsis. |\n| `end` | Wrapper around the `end` slot. Hidden entirely while empty. |\n| `remove-button` | The remove affordance, only rendered while `withRemove`. |\n| `remove-button__base` | Shoelace-compatible alias for `remove-button`; both names are on the same node. |\n| `start` | Wrapper around the `start` slot. Hidden entirely while empty. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-badge-attention-duration` (default: `var(--lr-duration-ambient)`) — One cycle of the `attention` animation.\n- `--lr-badge-attention-easing` (default: `var(--lr-easing-emphasized)`) — Timing function of the `attention` animation.\n- `--lr-badge-background` (default: `var(--lr-badge-fill)`) — Explicit override for the badge's background, winning over whatever `variant` and `appearance` resolved. Left unset (the default) so it still inherits from a consumer's own ancestor rule.\n- `--lr-badge-border` (default: `var(--lr-badge-stroke)`) — Explicit override for the badge's border color, on the same terms as `--lr-badge-background`.\n- `--lr-badge-bounce-distance` (default: `var(--lr-size-0-1875rem)`) — Peak travel of the `attention=\"bounce\"` hop.\n- `--lr-badge-color` (default: `var(--lr-badge-text)`) — Explicit override for the badge's text color, on the same terms as `--lr-badge-background`.\n- `--lr-badge-edge` (default: `var(--lr-color-border)`) — Palette slot: the variant's border color. Each non-neutral `variant` sets it to that variant's loud fill.\n- `--lr-badge-fill` (default: `var(--lr-badge-tint)`) — Surface slot: which palette entry `appearance` routed onto the background. Set it to retune a single appearance without touching the palette.\n- `--lr-badge-font-size` (default: `var(--lr-font-size-sm)`) — The badge's label font size. Each `size` sets it to that step's font size.\n- `--lr-badge-gap` (default: `var(--lr-space-2xs)`) — Space between the `start` slot, the label, and the `end` slot.\n- `--lr-badge-ink` (default: `var(--lr-color-text)`) — Palette slot: the variant's text color. Each non-neutral `variant` sets it to that variant's loud fill.\n- `--lr-badge-min-height` (default: `var(--lr-size-1-25rem)`) — The badge's minimum block size. Each `size` sets it to that step's minimum block size.\n- `--lr-badge-on-solid` (default: `var(--lr-color-on-loud)`) — Palette slot: the text color that stays legible on `--lr-badge-solid`.\n- `--lr-badge-padding-inline` (default: `var(--lr-space-s)`) — The badge's inline padding. Each `size` sets it to that step's inline padding.\n- `--lr-badge-pulse-color` (default: `color-mix(in srgb, currentColor 40%, transparent)`) — Color of the expanding ring drawn by `attention=\"pulse\"`.\n- `--lr-badge-pulse-spread` (default: `var(--lr-size-0-25rem)`) — How far the `attention=\"pulse\"` ring expands.\n- `--lr-badge-radius` (default: `var(--lr-radius)`) — Corner radius of the badge surface. `pill` raises it to `var(--lr-radius-pill)`. Does not vary by `size` tier.\n- `--lr-badge-solid` (default: `var(--lr-color-fill-loud)`) — Palette slot: the variant's loud fill, used by `appearance=\"accent\"`.\n- `--lr-badge-stroke` (default: `var(--lr-badge-edge)`) — Surface slot: which palette entry `appearance` routed onto the border color.\n- `--lr-badge-text` (default: `var(--lr-badge-ink)`) — Surface slot: which palette entry `appearance` routed onto the label color.\n- `--lr-badge-tint` (default: `var(--lr-color-surface)`) — Palette slot: the variant's quiet fill. Each non-neutral `variant` sets it to that variant's quiet fill from the shared semantic grid.\n- `--lr-tag-remove-hover-background` (default: `color-mix(in srgb, currentColor 16%, transparent)`) — Background of the remove button on hover.\n- `--lr-tag-remove-radius` (default: `var(--lr-badge-radius)`) — Corner radius of the remove button, defaulting to the tag's own corner so retuning one retunes both.\n- `--pulse-color` (default: `var(--lr-badge-pulse-color)`) — Upstream-compatible pulse-ring color."
       },
       "attributes": [
         {