@aceshooting/lyra-ui 11.0.0 → 11.2.0

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@aceshooting/lyra-ui",
-  "version": "11.0.0",
+  "version": "11.2.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6647,7 +6647,7 @@
         },
         {
           "name": "lr-date-input",
-          "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.\nThe ISO model is explicitly proleptic Gregorian for every locale. Display uses locale digits\nand `Intl.DateTimeFormat.formatRange()`; parsing normalizes those digits and bidi marks so the\ncomponent's own Arabic/Persian presentation always round-trips to the same ISO value.\n\nThis component uses a single text field; typing accepts ISO or a\nlocale-parseable date. Enter commits the typed text and then performs the implicit form\nsubmission a native `<input>` would (see `internal/submit-on-enter.ts` — the internal input is\nin a shadow root and has no form owner, so the platform can never do it here); the commit runs\nfirst so the submitted value is the date the field visibly shows.\nThat text field is also the popup-opening `role=\"combobox\"` owner, with explicit\n`aria-haspopup`, `aria-controls`, and `aria-expanded`; the adjacent button remains an equivalent\npointer/keyboard toggle rather than carrying the only popup relationship.\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.\nIn a constrained row the editable input shrinks first, while each public `start`/`end`\nadornment is capped at 40% so unbroken consumer content cannot widen the field.\n\n---\n\n**Component metadata**\n\n- Status: `experimental`\n- Since: `4.0.0`\n- Rationale: This exact tag already appears in published Lyra versions and remains experimental under full semver protection while its public API and usage patterns mature.\n- Graduation: Eligible for stable status once its documented API, populated accessibility states, cross-browser behavior, and compatibility contract demonstrate sustained reliability.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `clear-icon` | Replaces the clear icon. |\n| `day-YYYY-MM-DD` | Content for an individual ISO calendar day. |\n| `end` | Adornment after the text field and the built-in clear action, and before the calendar toggle — so consumer content never sits outboard of the calendar button. |\n| `error` | Lyra extension for custom validation markup. |\n| `expand-icon` | Replaces the calendar icon. |\n| `footer` | Calendar footer content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n| `next-icon` | Replaces the next-month icon in the calendar. |\n| `previous-icon` | Replaces the previous-month icon in the calendar. |\n| `start` | Adornment at the inline-start of the input row, before the text field. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | Permanent compatibility name for the nested base wrapper. |\n| `clear-button` | The clear control. |\n| `date-input` | The date-input wrapper. |\n| `date-picker` | The nested date picker. |\n| `end` | Wrapper around the `end` adornment slot; `hidden` while nothing is slotted. |\n| `error` | The validation message. |\n| `expand-button` | The calendar popup toggle. |\n| `expand-icon` | The calendar icon. |\n| `form-control` | The outer form-control wrapper. |\n| `form-control-input` | The editable date surface. |\n| `form-control-label` | The outer label wrapper. |\n| `hint` | The hint message. |\n| `input` | The text input. |\n| `input-wrapper` | The input and button wrapper. |\n| `label` | Permanent compatibility name for the inner label-content wrapper. |\n| `popup` | The positioned calendar popup. |\n| `range-separator` | The range separator. |\n| `segment` | The editable date segment wrapper. |\n| `segment-literal` | A literal inside the editable date surface. |\n| `start` | Wrapper around the `start` adornment slot; `hidden` while nothing is slotted. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-date-input-padding-block` (default: `var(--lr-space-xs)`) — Block padding of the input row, scaled by `size`.\n- `--lr-date-input-padding-inline` (default: `var(--lr-space-s)`) — Inline padding of the input row, scaled by `size`.\n- `--lr-date-input-font-size` (default: `inherit`) — Font size of the text input, scaled by `size`.\n- `--lr-date-input-placeholder-color` (default: `var(--lr-color-text-quiet)`) — Placeholder text color.\n- `--lr-date-input-gap` (default: `var(--lr-space-xs)`) — Gap between input-row children.\n- `--lr-date-input-radius` (default: `var(--lr-radius)`) — Input-row corner radius. `pill` changes its private default to `--lr-radius-pill`; an inherited or direct public value still wins.\n- `--lr-date-input-focus-border-color` (default: `var(--lr-color-brand)`) — Focused row border color.\n- `--lr-date-input-action-hover-color` (default: `var(--lr-color-text)`) — Clear/calendar action color on hover.\n- `--lr-date-input-action-hover-bg` (default: `transparent`) — Clear/calendar action background on hover.\n- `--lr-date-input-action-hover-radius` (default: `var(--lr-date-input-radius)`) — Clear/calendar action corner radius on hover.\n- `--lr-date-input-action-active-color` (default: `var(--lr-date-input-action-hover-color,var(--lr-color-text))`) — Clear/calendar action color while pressed.\n- `--lr-date-input-action-active-bg` (default: `color-mix(...)`) — Clear/calendar action background while pressed.\n- `--lr-date-input-action-active-radius` (default: `var(--lr-date-input-radius)`) — Clear/calendar action corner radius while pressed.\n- `--lr-date-input-control-min-height` (default: `var(--lr-form-control-height)`) — Minimum block size of the input row, read from the shared form-control height ladder so retuning `--lr-theme-form-control-height-*` moves this control and every sibling field together. Each default sits below the row's transitively-pinned height, so it is dead until a consumer raises it -- the unset render is unchanged.\n- `--lr-date-input-control-height` — Exact block size of the input row. Undeclared by default, so the row grows to fit its content (floored by `--lr-date-input-control-min-height`). Set it to pin a fixed height; the calendar toggle keeps its own 24x24 touch target even when this pins a shorter row.\n- `--show-duration` (default: `var(--lr-transition-fast)`) — Popup enter-transition duration.\n- `--hide-duration` (default: `var(--lr-transition-fast)`) — Popup exit-transition duration.\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-color` (default: `var(--lr-color-danger)`) — Color of that marker, retunable without touching any other danger-coloured surface.\n- `--lr-form-control-required-offset` (default: `0`) — Inline space between the label text and the marker.",
+          "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.\nThe ISO model is explicitly proleptic Gregorian for every locale. Display uses locale digits\nand `Intl.DateTimeFormat.formatRange()`; parsing normalizes those digits and bidi marks so the\ncomponent's own Arabic/Persian presentation always round-trips to the same ISO value.\n\nThis component uses a single text field; typing accepts ISO or a\nlocale-parseable date. Enter commits the typed text and then performs the implicit form\nsubmission a native `<input>` would (see `internal/submit-on-enter.ts` — the internal input is\nin a shadow root and has no form owner, so the platform can never do it here); the commit runs\nfirst so the submitted value is the date the field visibly shows.\nThat text field is also the popup-opening `role=\"combobox\"` owner, with explicit\n`aria-haspopup`, `aria-controls`, and `aria-expanded`; the adjacent button remains an equivalent\npointer/keyboard toggle rather than carrying the only popup relationship.\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.\nIn a constrained row the editable input shrinks first, while each public `start`/`end`\nadornment is capped at 40% so unbroken consumer content cannot widen the field.\n\n---\n\n**Component metadata**\n\n- Status: `experimental`\n- Since: `4.0.0`\n- Rationale: This exact tag already appears in published Lyra versions and remains experimental under full semver protection while its public API and usage patterns mature.\n- Graduation: Eligible for stable status once its documented API, populated accessibility states, cross-browser behavior, and compatibility contract demonstrate sustained reliability.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `clear-icon` | Replaces the clear icon. |\n| `day-YYYY-MM-DD` | Content for an individual ISO calendar day. |\n| `end` | Adornment after the text field and the built-in clear action, and before the calendar toggle — so consumer content never sits outboard of the calendar button. |\n| `error` | Lyra extension for custom validation markup. |\n| `expand-icon` | Replaces the calendar icon. |\n| `footer` | Calendar footer content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n| `next-icon` | Replaces the next-month icon in the calendar. |\n| `previous-icon` | Replaces the previous-month icon in the calendar. |\n| `start` | Adornment at the inline-start of the input row, before the text field. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | Permanent compatibility name for the nested base wrapper. |\n| `clear-button` | The clear control. |\n| `date-input` | The date-input wrapper. |\n| `date-picker` | The nested date picker. |\n| `end` | Wrapper around the `end` adornment slot; `hidden` while nothing is slotted. |\n| `error` | The validation message. |\n| `expand-button` | The calendar popup toggle. |\n| `expand-icon` | The calendar icon. |\n| `form-control` | The outer form-control wrapper. |\n| `form-control-input` | The editable date surface. |\n| `form-control-label` | The outer label wrapper. |\n| `hint` | The hint message. |\n| `input` | The text input. |\n| `input-wrapper` | The input and button wrapper. |\n| `label` | Permanent compatibility name for the inner label-content wrapper. |\n| `popup` | The positioned calendar popup. |\n| `preset-button` | One quick-range button, forwarded from `<lr-date-picker>`. |\n| `presets` | The nested picker's quick-range row, forwarded from `<lr-date-picker>`. |\n| `range-separator` | The range separator. |\n| `segment` | The editable date segment wrapper. |\n| `segment-literal` | A literal inside the editable date surface. |\n| `start` | Wrapper around the `start` adornment slot; `hidden` while nothing is slotted. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-date-input-padding-block` (default: `var(--lr-space-xs)`) — Block padding of the input row, scaled by `size`.\n- `--lr-date-input-padding-inline` (default: `var(--lr-space-s)`) — Inline padding of the input row, scaled by `size`.\n- `--lr-date-input-font-size` (default: `inherit`) — Font size of the text input, scaled by `size`.\n- `--lr-date-input-placeholder-color` (default: `var(--lr-color-text-quiet)`) — Placeholder text color.\n- `--lr-date-input-gap` (default: `var(--lr-space-xs)`) — Gap between input-row children.\n- `--lr-date-input-radius` (default: `var(--lr-radius)`) — Input-row corner radius. `pill` changes its private default to `--lr-radius-pill`; an inherited or direct public value still wins.\n- `--lr-date-input-focus-border-color` (default: `var(--lr-color-brand)`) — Focused row border color.\n- `--lr-date-input-action-hover-color` (default: `var(--lr-color-text)`) — Clear/calendar action color on hover.\n- `--lr-date-input-action-hover-bg` (default: `transparent`) — Clear/calendar action background on hover.\n- `--lr-date-input-action-hover-radius` (default: `var(--lr-date-input-radius)`) — Clear/calendar action corner radius on hover.\n- `--lr-date-input-action-active-color` (default: `var(--lr-date-input-action-hover-color,var(--lr-color-text))`) — Clear/calendar action color while pressed.\n- `--lr-date-input-action-active-bg` (default: `color-mix(...)`) — Clear/calendar action background while pressed.\n- `--lr-date-input-action-active-radius` (default: `var(--lr-date-input-radius)`) — Clear/calendar action corner radius while pressed.\n- `--lr-date-input-control-min-height` (default: `var(--lr-form-control-height)`) — Minimum block size of the input row, read from the shared form-control height ladder so retuning `--lr-theme-form-control-height-*` moves this control and every sibling field together. Each default sits below the row's transitively-pinned height, so it is dead until a consumer raises it -- the unset render is unchanged.\n- `--lr-date-input-control-height` — Exact block size of the input row. Undeclared by default, so the row grows to fit its content (floored by `--lr-date-input-control-min-height`). Set it to pin a fixed height; the calendar toggle keeps its own 24x24 touch target even when this pins a shorter row.\n- `--show-duration` (default: `var(--lr-transition-fast)`) — Popup enter-transition duration.\n- `--hide-duration` (default: `var(--lr-transition-fast)`) — Popup exit-transition duration.\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-color` (default: `var(--lr-color-danger)`) — Color of that marker, retunable without touching any other danger-coloured surface.\n- `--lr-form-control-required-offset` (default: `0`) — Inline space between the label text and the marker.",
           "attributes": [
             {
               "name": "appearance",
@@ -9800,7 +9800,7 @@
         },
         {
           "name": "lr-flag",
-          "description": "`<lr-flag>` — a country/language flag.\n\nFlag images are shipped by the optional peer package `@aceshooting/lyra-flags`,\nnot bundled into lyra-ui itself, so importing the core library pulls zero flag\nweight. Give it a `country` (ISO 3166-1 alpha-2) or a `language` tag (mapped to\na representative country). While that peer package's `flagUrl()` resolves,\nthe host carries `aria-busy=\"true\"`; a decorative skeleton and ordinary, non-live localized\nloading text render in its place. A missing or failed peer resolver fails closed with a localized visible error and a\nshared light-DOM assertive announcement, plus a one-time `console.warn` naming the code and the\n`flag-peer.js` import that registers a resolver -- the visible error alone cannot tell a\ndeveloper that the fix is a missing import rather than missing flag data;\nan installed resolver returning no URL for an unknown code remains a valid\nempty result.\n\n**Bundle-size note:** `country`/`language` resolve through the peer package's\n`flagUrl(code)`, which lazily fetches one requested flag at runtime. A\nbundler may still emit the complete reachable lazy-chunk graph; use a\nliteral asset subpath import when the deployment artifact must be pruned.\nIf you already\nhave a flag's URL at build time (e.g. from your own literal\n`import frUrl from '@aceshooting/lyra-flags/flags/fr.svg?url'`), pass it as\n`src` instead to skip the peer-package round trip (and its loading-skeleton\nflash) entirely.\n\nThe ~65 flags whose design includes a detailed coat of arms/seal/emblem (e.g. `es`, `pt`) ship\nthree fidelity tiers; choose one with `fidelity`: `\"compact\"` (a tiny WebP raster for icon-scale\nuse — menu items, language selectors, dense lists), the default `\"standard\"` (icon-optimized\nvector for card/row sizes), or `\"detailed\"` (the pristine full-detail vector for hero-scale\ndisplay). A no-op for every other code — all tiers resolve to the same file. See `fidelity`'s own\ndoc.\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| `fallback` | Rendered in place of the flag when `country`/`language` cannot resolve to a current flag (an unassigned, historical, or malformed code). Wins over the `fallback` property. Distinct from the peer-resolver failure that produces `[part=\"error\"]`: an unresolvable code is data, not a defect. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | Ordinary localized visible error rendered when the optional peer resolver is unavailable or fails; each fresh resolution failure appends the same localized message to the shared light-DOM assertive announcement sink. |\n| `fallback-image` | The `fallback` property's placeholder image, when no `fallback` slot content is supplied. |\n| `image` | The underlying <img>. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-flag-aspect-ratio` (default: `4 / 3`) — Rectangular flag aspect ratio.\n- `--lr-flag-object-fit` (default: `cover`) — How the image fits its flag frame.\n- `--lr-flag-radius` — Rectangular flag corner radius.",
+          "description": "`<lr-flag>` — a country/language flag.\n\nFlag images are shipped by the optional peer package `@aceshooting/lyra-flags`,\nnot bundled into lyra-ui itself, so importing the core library pulls zero flag\nweight. Give it a `country` (ISO 3166-1 alpha-2) or a `language` tag (mapped to\na representative country). While that peer package's `flagUrl()` resolves,\nthe host carries `aria-busy=\"true\"`; a decorative skeleton and ordinary, non-live localized\nloading text render in its place. A missing or failed peer resolver fails closed with a localized visible error and a\nshared light-DOM assertive announcement, plus a one-time `console.warn` naming the code and the\n`flag-peer.js` import that registers a resolver -- the visible error alone cannot tell a\ndeveloper that the fix is a missing import rather than missing flag data;\nan installed resolver returning no URL for an unknown code remains a valid\nempty result.\n\n**Bundle-size note:** `country`/`language` resolve through the peer package's\n`flagUrl(code)`, which lazily fetches one requested flag at runtime. A\nbundler may still emit the complete reachable lazy-chunk graph; use a\nliteral asset subpath import when the deployment artifact must be pruned.\nIf every `<lr-flag>` in your app is pinned to the same `fidelity` (no\nper-instance switching), register `@aceshooting/lyra-flags/standard`/`/compact`/`/detailed` with\n`setFlagUrlResolver()` instead of importing `flag-peer.js` (which always registers the full\nthree-tier resolver) — the tier-specific entry excludes the other two tiers' generated loader\nmaps from the reachable graph; see that package's README for the exact shape.\nIf you already\nhave a flag's URL at build time (e.g. from your own literal\n`import frUrl from '@aceshooting/lyra-flags/flags/fr.svg?url'`), pass it as\n`src` instead to skip the peer-package round trip (and its loading-skeleton\nflash) entirely.\n\n**Rendering many flags at once** (a country table, a picker listing every locale): resolve every\ncode up front with `@aceshooting/lyra-flags`'s `flagUrls()` (one call, returns `{code: url}` for\nall 249 flags) and pass results through `src`, instead of letting each `<lr-flag>` instance\nindependently call `flagUrl()` — this skips one peer-resolution round trip per instance. Image\nfetches themselves are unaffected either way (each flag is a distinct asset; there is no sprite).\nOr import `flag-peer-bulk.js` instead of `flag-peer.js` (never both) to get this automatically,\nregistering a resolver backed by one shared `flagUrls()` call — worthwhile only when the page\nrenders most/all flags; a page with a handful pays an unneeded 249-entry fetch.\n\n**Sizing:** the host has no intrinsic `width` — it sizes from `font-size` (`block-size: 1em`,\n`inline-size` derived from `--lr-flag-aspect-ratio` via CSS `aspect-ratio`), so `<lr-flag>` scales\nnaturally with surrounding text (e.g. `style=\"font-size: 2rem\"`). Do not set `width`/`inline-size`\ndirectly: making both axes definite defeats `aspect-ratio` (which only participates when at most\none axis is definite per the CSS sizing spec), squashing the image instead of scaling it.\n\nThe ~65 flags whose design includes a detailed coat of arms/seal/emblem (e.g. `es`, `pt`) ship\nthree fidelity tiers; choose one with `fidelity`: `\"compact\"` (a tiny WebP raster for icon-scale\nuse — menu items, language selectors, dense lists), the default `\"standard\"` (icon-optimized\nvector for card/row sizes), or `\"detailed\"` (the pristine full-detail vector for hero-scale\ndisplay). A no-op for every other code — all tiers resolve to the same file. See `fidelity`'s own\ndoc.\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| `fallback` | Rendered in place of the flag when `country`/`language` cannot resolve to a current flag (an unassigned, historical, or malformed code). Wins over the `fallback` property. Distinct from the peer-resolver failure that produces `[part=\"error\"]`: an unresolvable code is data, not a defect. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | Ordinary localized visible error rendered when the optional peer resolver is unavailable or fails; each fresh resolution failure appends the same localized message to the shared light-DOM assertive announcement sink. |\n| `fallback-image` | The `fallback` property's placeholder image, when no `fallback` slot content is supplied. |\n| `image` | The underlying <img>. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-flag-aspect-ratio` (default: `4 / 3`) — Rectangular flag aspect ratio.\n- `--lr-flag-object-fit` (default: `cover`) — How the image fits its flag frame.\n- `--lr-flag-radius` — Rectangular flag corner radius.",
           "attributes": [
             {
               "name": "country",
@@ -13120,7 +13120,7 @@
         },
         {
           "name": "lr-lite-chart",
-          "description": "`<lr-lite-chart>` — a dependency-free bar/line chart, plain SVG/DOM\nrendering with zero peer dependencies (unlike `lr-chart`, which wraps\n`chart.js`). For a project whose architecture forbids a charting\ndependency outright, this covers the common bar/line case: grouped or\nstacked bars, multi-series lines, per-point click, and hover tooltips\n(native SVG `<title>`, no positioning JS needed) — not a full `lr-chart`\nreplacement (no zoom/pan, no pie/doughnut/radar/scatter/bubble types, no\nhorizontal/dual-y-axis, no raw-config passthrough, no interactive legend\ntoggle — unlike `lr-chart`/`lr-box-plot`, clicking a `legend-item` here does\nnot hide its series; the legend is a static color key).\n\nBecause this renders real DOM (not canvas), it reuses `lr-chart`'s\n`--lr-chart-*` theme tokens directly via CSS `var()` — no\n`getComputedStyle()`-based re-theming step is needed the way `chart.ts`\nneeds one for its canvas.\n\nBy default (`layout=\"fit\"`) the plot always squeezes to the measured host\nwidth. Three independent, opt-in escape hatches for dense/aligned data:\n`layout=\"scroll\"` (+ `barWidth`) gives every bar a fixed pixel width and\nlets the plot overflow the host horizontally (scrollable) instead of\nsqueezing; `maxLabels` decimates which x-axis text labels render (bars\nalways still render) once there are more categories than that; and\n`barX` lets a consumer hand in its own per-category x-coordinate function\n— e.g. to pixel-align this chart's bars with a sibling `lr-heatmap`'s\ncalendar columns — overriding the internal slot math for both bars and\ntheir labels. All three are additive and no-ops when left unset.\n\nSeven further additive, opt-in properties: `pointText` overrides the\nper-bar/per-point `<title>` tooltip and accessible-name text (mirrors\n`lr-heatmap`'s `cellText` hook), falling back to the built-in raw-value\ntemplate when unset; `roundedBars` draws bars as a rounded-top path\ninstead of a square-cornered rect; `skipZero` omits a bar entirely (not\njust zero-height) for an exactly-`0` value; `valueAxisGutter`/`barGapRatio`\noverride the internal `PAD_LEFT`/`BAR_GROUP_GAP` layout constants; `scale`\n(`type=\"bar\"` only) switches the bar-height mapping from the default\nlinear `niceDomain` fraction to a `Math.sqrt(value / domainMax)`\ncompression (mirroring `lr-heatmap`'s matrix-mode `sqrt` scale) so a\nskewed dataset's smaller bars don't get washed out by one dominant value\n— gridlines/tick labels stay on the linear domain regardless, only the bar\nmarks' own height changes, and `type=\"line\"` ignores `scale` entirely; and\n`withoutValueAxis` suppresses `renderGrid()`'s gridlines/tick labels altogether\n(x-axis category labels, rendered separately, are unaffected). An eighth,\n`legendText`, appends a formatter-supplied string after each series' label in the\nbuilt-in legend row (e.g. a value or share) — no-op while `legend` is unset, matching the same\nfallback-to-unchanged convention as every other hook here. The built-in multi-series accessible\ntable can independently format its finite numeric cells through `tableCellFormatter`; for a\nstacked bar chart, `tableTotals` adds an opt-in localized total column. Both are no-ops when\nunset.\n\nPublic collection properties take bounded, clone-owned readonly snapshots. Create a new\ncollection and reassign it after changes; mutating the assigned array does not update the view.\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| `data-table` | An optional consumer-provided complete/paginated accessible data alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `axis-label` | Each axis tick label. |\n| `axis-title` | The x/y axis title text, when set. |\n| `bar` | Each bar rect (type=\"bar\"). Carries `data-selected` and `aria-pressed=\"true\"` when its category index is in `selectedIndices`. While `forced-colors: active` matches, its fill is a per-series SVG texture instead of a flat color, so series that collapse onto the same system color stay distinguishable. |\n| `base` | The host's flex layout wrapper. |\n| `data-list` | A visually hidden sampled list of plotted data points (single-series only). |\n| `data-table` | A visually hidden sampled category×series data table, rendered instead of `data-list` when there is more than one dataset so a screen-reader user hears series grouping rather than one flattened N×M sequence. |\n| `data-truncation` | Explanation shown when built-in marks/data alternatives sample more than 1,000 records. |\n| `description` | The visually hidden accessible chart description, when set. |\n| `grid-line` | Each horizontal gridline. |\n| `legend` | The legend row, when `legend` is set. |\n| `legend-item` | Each legend entry. |\n| `legend-swatch` | Each legend entry's color swatch. While `forced-colors: active` matches, it carries a `data-encoding` attribute selecting the CSS texture that matches its series' plotted encoding. |\n| `legend-text` | Extra per-item text after the series label, rendered only when `legendText` is set. |\n| `line` | Each series' stroked line path (type=\"line\"). While `forced-colors: active` matches, it carries a per-series `stroke-dasharray` for the same reason. |\n| `live-region` | The current mark announcement for keyboard users. |\n| `point` | Each series' per-point keyboard target (type=\"line\"). Carries `data-selected` and explicit `aria-pressed` state. |\n| `table` | The generated semantic table inside the `data-table` container. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-color-1` (default: `var(--lr-color-chart-1)`) — First series color.\n- `--lr-chart-color-2` (default: `var(--lr-color-chart-2)`) — Second series color.\n- `--lr-chart-color-3` (default: `var(--lr-color-chart-3)`) — Third series color.\n- `--lr-chart-color-4` (default: `var(--lr-color-chart-4)`) — Fourth series color.\n- `--lr-chart-color-5` (default: `var(--lr-color-chart-5)`) — Fifth series color.\n- `--lr-chart-color-6` (default: `var(--lr-color-chart-6)`) — Sixth series color.\n- `--lr-chart-color-7` (default: `var(--lr-color-chart-7)`) — Seventh series color.\n- `--lr-chart-color-8` (default: `var(--lr-color-chart-8)`) — Eighth series color.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color.\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — Consumer-owned chart height. The `height` property supplies only a private fallback, so this public token always wins when set.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color.\n- `--lr-chart-legend-side-max` (default: `var(--lr-size-15rem)`) — Maximum side-legend track size.\n- `--lr-chart-pattern-step` (default: `var(--lr-space-2xs)`) — Tile size of the texture painted on `[part='legend-swatch']` while `forced-colors: active` matches, where the eight-color series ramp collapses onto a repeating system-color cycle and the texture becomes the only channel keeping series apart. Declared on the swatch part rather than the host; the stripe width within a tile stays `--lr-border-width-thin`, so a larger step spaces the stripes further apart. Shared verbatim with `<lr-chart>` and `<lr-box-plot>`.\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis and legend-detail color.\n- `--lr-lite-chart-selected-outline-color` (default: `var(--lr-color-brand)`) — Stroke for a bar/point whose category index is in `selectedIndices`.\n- `--lr-lite-chart-selected-outline-width` (default: `var(--lr-size-2px)`) — Stroke width for a bar/point whose category index is in `selectedIndices`.",
+          "description": "`<lr-lite-chart>` — a dependency-free bar/line chart, plain SVG/DOM\nrendering with zero peer dependencies (unlike `lr-chart`, which wraps\n`chart.js`). For a project whose architecture forbids a charting\ndependency outright, this covers the common bar/line case: grouped or\nstacked bars, multi-series lines, per-point click, and hover tooltips\n(native SVG `<title>`, no positioning JS needed) — not a full `lr-chart`\nreplacement (no zoom/pan, no pie/doughnut/radar/scatter/bubble types, no\nhorizontal/dual-y-axis, no raw-config passthrough, no interactive legend\ntoggle — unlike `lr-chart`/`lr-box-plot`, clicking a `legend-item` here does\nnot hide its series; the legend is a static color key).\n\nBecause this renders real DOM (not canvas), it reuses `lr-chart`'s\n`--lr-chart-*` theme tokens directly via CSS `var()` — no\n`getComputedStyle()`-based re-theming step is needed the way `chart.ts`\nneeds one for its canvas.\n\nBy default (`layout=\"fit\"`) the plot always squeezes to the measured host\nwidth. Three independent, opt-in escape hatches for dense/aligned data:\n`layout=\"scroll\"` (+ `barWidth`) gives every bar a fixed pixel width and\nlets the plot overflow the host horizontally (scrollable) instead of\nsqueezing; `maxLabels` decimates which x-axis text labels render (bars\nalways still render) once there are more categories than that; and\n`barX` lets a consumer hand in its own per-category x-coordinate function\n— e.g. to pixel-align this chart's bars with a sibling `lr-heatmap`'s\ncalendar columns — overriding the internal slot math for both bars and\ntheir labels. All three are additive and no-ops when left unset.\n\nSeven further additive, opt-in properties: `pointText` overrides the\nper-bar/per-point `<title>` tooltip and accessible-name text (mirrors\n`lr-heatmap`'s `cellText` hook), falling back to the built-in raw-value\ntemplate when unset; `roundedBars` draws bars as a rounded-top path\ninstead of a square-cornered rect; `skipZero` omits a bar entirely (not\njust zero-height) for an exactly-`0` value; `valueAxisGutter`/`barGapRatio`\noverride the internal `PAD_LEFT`/`BAR_GROUP_GAP` layout constants; `scale`\n(`type=\"bar\"` only) switches the bar-height mapping from the default\nlinear `niceDomain` fraction to a `Math.sqrt(value / domainMax)`\ncompression (mirroring `lr-heatmap`'s matrix-mode `sqrt` scale) so a\nskewed dataset's smaller bars don't get washed out by one dominant value\n— gridlines/tick labels stay on the linear domain regardless, only the bar\nmarks' own height changes, and `type=\"line\"` ignores `scale` entirely; and\n`withoutValueAxis` suppresses `renderGrid()`'s gridlines/tick labels altogether\n(x-axis category labels, rendered separately, are unaffected). An eighth,\n`legendText`, appends a formatter-supplied string after each series' label in the\nbuilt-in legend row (e.g. a value or share) — no-op while `legend` is unset, matching the same\nfallback-to-unchanged convention as every other hook here. The built-in multi-series accessible\ntable can independently format its finite numeric cells through `tableCellFormatter`; for a\nstacked bar chart, `tableTotals` adds an opt-in localized total column. Both are no-ops when\nunset.\n\nPublic collection properties take bounded, clone-owned readonly snapshots. Create a new\ncollection and reassign it after changes; mutating the assigned array does not update the view.\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| `data-table` | An optional consumer-provided complete/paginated accessible data alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `axis-label` | Each axis tick label. |\n| `axis-title` | The x/y axis title text, when set. |\n| `bar` | Each bar rect (type=\"bar\"). Carries `data-selected` and `aria-pressed=\"true\"` when its category index is in `selectedIndices`. While `forced-colors: active` matches, its fill is a per-series SVG texture instead of a flat color, so series that collapse onto the same system color stay distinguishable. |\n| `base` | The host's flex layout wrapper. |\n| `data-list` | A visually hidden sampled list of plotted data points (single-series only). |\n| `data-table` | A visually hidden sampled category×series data table, rendered instead of `data-list` when there is more than one dataset so a screen-reader user hears series grouping rather than one flattened N×M sequence. |\n| `data-table-toggle` | The disclosure button rendered by `dataTableToggle`. |\n| `data-truncation` | Explanation shown when built-in marks/data alternatives sample more than 1,000 records. |\n| `description` | The visually hidden accessible chart description, when set. |\n| `grid-line` | Each horizontal gridline. |\n| `legend` | The legend row, when `legend` is set. |\n| `legend-item` | Each legend entry. |\n| `legend-swatch` | Each legend entry's color swatch. While `forced-colors: active` matches, it carries a `data-encoding` attribute selecting the CSS texture that matches its series' plotted encoding. |\n| `legend-text` | Extra per-item text after the series label, rendered only when `legendText` is set. |\n| `line` | Each series' stroked line path (type=\"line\"). While `forced-colors: active` matches, it carries a per-series `stroke-dasharray` for the same reason. |\n| `live-region` | The current mark announcement for keyboard users. |\n| `point` | Each series' per-point keyboard target (type=\"line\"). Carries `data-selected` and explicit `aria-pressed` state. |\n| `table` | The generated semantic table inside the `data-table` container. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-color-1` (default: `var(--lr-color-chart-1)`) — First series color.\n- `--lr-chart-color-2` (default: `var(--lr-color-chart-2)`) — Second series color.\n- `--lr-chart-color-3` (default: `var(--lr-color-chart-3)`) — Third series color.\n- `--lr-chart-color-4` (default: `var(--lr-color-chart-4)`) — Fourth series color.\n- `--lr-chart-color-5` (default: `var(--lr-color-chart-5)`) — Fifth series color.\n- `--lr-chart-color-6` (default: `var(--lr-color-chart-6)`) — Sixth series color.\n- `--lr-chart-color-7` (default: `var(--lr-color-chart-7)`) — Seventh series color.\n- `--lr-chart-color-8` (default: `var(--lr-color-chart-8)`) — Eighth series color.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color.\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — Consumer-owned chart height. The `height` property supplies only a private fallback, so this public token always wins when set.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color.\n- `--lr-chart-legend-side-max` (default: `var(--lr-size-15rem)`) — Maximum side-legend track size.\n- `--lr-chart-pattern-step` (default: `var(--lr-space-2xs)`) — Tile size of the texture painted on `[part='legend-swatch']` while `forced-colors: active` matches, where the eight-color series ramp collapses onto a repeating system-color cycle and the texture becomes the only channel keeping series apart. Declared on the swatch part rather than the host; the stripe width within a tile stays `--lr-border-width-thin`, so a larger step spaces the stripes further apart. Shared verbatim with `<lr-chart>` and `<lr-box-plot>`.\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis and legend-detail color.\n- `--lr-lite-chart-data-table-toggle-active-bg` — Pressed background of the `dataTableToggle` disclosure button; defaults to a mix of the hover background with the shared active mix partner.\n- `--lr-lite-chart-data-table-toggle-hover-bg` (default: `var(--lr-color-brand-quiet)`) — Hover background of the `dataTableToggle` disclosure button.\n- `--lr-lite-chart-selected-outline-color` (default: `var(--lr-color-brand)`) — Stroke for a bar/point whose category index is in `selectedIndices`.\n- `--lr-lite-chart-selected-outline-width` (default: `var(--lr-size-2px)`) — Stroke width for a bar/point whose category index is in `selectedIndices`.",
           "attributes": [
             {
               "name": "accessible-label",
@@ -13148,6 +13148,15 @@
                 ]
               }
             },
+            {
+              "name": "data-table-toggle",
+              "description": "Render a disclosure button above the accessible data table so a sighted reader can reveal the\nnumbers on demand, turning `showDataTable` into the disclosure's INITIAL state rather than its\nwhole behavior. The table stays in the DOM in both states, so assistive technology never loses\nit.\n\nMatters more here than on `<lr-chart>`: this component exists to avoid the Chart.js peers, so\nwithout it an app that chose it for that reason had to either hand-roll a `<details>` around a\nduplicated table or adopt `<lr-chart>` and pull in Chart.js for a button — the cheap component\nstuck with the expensive workaround.\n\nType: `boolean`  \nDefault: `false`",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "description",
               "description": "Optional accessible chart description.\n\nType: `string | null`  \nDefault: `null`"
@@ -13233,6 +13242,15 @@
                 ]
               }
             },
+            {
+              "name": "show-data-table",
+              "description": "Makes the generated data table visible; it stays screen-reader available when false. Same\nmeaning as `<lr-chart>`'s property of the same name.\n\nType: `boolean`  \nDefault: `false`",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "skip-zero",
               "description": "`type=\"bar\"` only: omits a bar entirely (no mark, no `tabindex`, no tooltip) for a value that\nis exactly `0` — `null`/non-finite values are always skipped regardless of this flag. Default\n`false` preserves today's behavior of a zero-height but focusable/titled bar.\n\nType: `boolean`  \nDefault: `false`",
@@ -29698,6 +29716,14 @@
           "name": "--lr-link-color",
           "description": "**`<lr-graph>`** (default: `var(--lr-color-border)`) — Default link stroke, overridden per-link by a link's own `color`."
         },
+        {
+          "name": "--lr-lite-chart-data-table-toggle-active-bg",
+          "description": "**`<lr-lite-chart>`** — Pressed background of the `dataTableToggle` disclosure button; defaults to a mix of the hover background with the shared active mix partner."
+        },
+        {
+          "name": "--lr-lite-chart-data-table-toggle-hover-bg",
+          "description": "**`<lr-lite-chart>`** (default: `var(--lr-color-brand-quiet)`) — Hover background of the `dataTableToggle` disclosure button."
+        },
         {
           "name": "--lr-lite-chart-selected-outline-color",
           "description": "**`<lr-lite-chart>`** (default: `var(--lr-color-brand)`) — Stroke for a bar/point whose category index is in `selectedIndices`."