@aceshooting/lyra-ui 11.0.0 → 11.1.0

package/llms-full.txt

@@ -4041,7 +4041,7 @@ An `lr-option` row remains bounded by its owning listbox: the default label elli
 `start`/`end` (or `prefix`/`suffix`) adornment is capped at 40% of the row. Unbroken metadata
 therefore cannot widen a 320px LTR or RTL picker.
 
-**Adornments in the popup (fixed in 10.1.0).** Before 10.1.0 this paragraph described behavior the
+**Adornments in the popup (fixed in 11.0.0).** Before 11.0.0 this paragraph described behavior the
 code did not have: `lr-combobox` builds its popup from normalized row *data* rather than from the
 light-DOM nodes, so a slotted `start`/`end`/`prefix`/`suffix` adornment had nowhere to land and
 simply never rendered — the documented slots and their documented parts were both dead inside the
@@ -4128,7 +4128,7 @@ An async `source` row can carry the same two fields (`start`, `end`) alongside i
 - `maxOptionsVisible: number = 3` (attribute `max-options-visible` — caps how many selected **tags**
   show before collapsing to `+N`; nothing to do with the suggestion list, see the three-caps note
   below)
-- `visibleOptions?: number` (attribute `visible-options`, new in 10.1.0) — bounds the popup to about
+- `visibleOptions?: number` (attribute `visible-options`, new in 11.0.0) — bounds the popup to about
   this many suggestion rows, leaving the rest reachable by scrolling. Purely presentational: every
   row is still rendered. Measured from where row N actually starts rather than computed from a
   token, because a row's height varies with `sub` lines, adornments and group labels. Unset imposes
@@ -4205,7 +4205,7 @@ alias. Set the boolean `autocorrect` IDL, or use `autocorrect="on"` / `autocorre
 `ComboboxSourceRow = { readonly value: string; readonly label: string; readonly sub?: string; readonly icon?: unknown; readonly start?: unknown;
 readonly end?: unknown; readonly badge?: string |
 number; accessibleLabel?: string; data?: unknown; dotColor?: string; group?: string; disabled?:
-boolean }` — the row shape used by the async `source` path. `start` and `end` (new in 10.1.0) are
+boolean }` — the row shape used by the async `source` path. `start` and `end` (new in 11.0.0) are
 the async counterparts of `<lr-option>`'s `start`/`end` adornment slots and render as the
 `option-start` / `option-end` parts, inert and aria-hidden exactly like `icon`. `icon` renders as a decorative leading
 visual whose rendered subtree stays visible but is inert and hidden from assistive technology;
@@ -4842,9 +4842,13 @@ Inline month-grid calendar, not form-associated (used standalone or embedded ins
 **Properties (28):**
 
 - `dayContent` (JS only): `LyraDatePickerDayContent | undefined`
-- `presets: LyraDateRangePreset[] = []` (JS only, new in 10.1.0) —
-  `LyraDateRangePreset { label: string; start: string; end: string }`, where `start`/`end` are ISO
-  `YYYY-MM-DD`. Renders a `[part="presets"]` quick-range button row above the calendar, for the
+- `presets: LyraDateRangePreset[] = []` (JS only, new in 11.0.0) —
+  `LyraDateRangePreset { label: string; start?: string; end?: string }`, where `start`/`end` are ISO
+  `YYYY-MM-DD`. **Either bound may be omitted (new in 11.1.0)** to mean an OPEN bound, resolving to
+  the picker's `min` / `max` respectively — that is how an "All time" preset is expressed. When the
+  corresponding `min`/`max` is unset there is nothing to resolve to (a `value` of
+  `YYYY-MM-DD/YYYY-MM-DD` has no unbounded spelling), so that preset's button renders **disabled**
+  rather than looking live and doing nothing when pressed. Renders a `[part="presets"]` quick-range button row above the calendar, for the
   dashboard time-filter shape (Today / Last 7 days / Last 30 days / This month / All time).
   **Range mode only** — a preset names two dates, so it is ignored for a single-date picker rather
   than rendering a row that cannot do anything; unset renders nothing at all. Applying one commits
@@ -4855,6 +4859,16 @@ Inline month-grid calendar, not form-associated (used standalone or embedded ins
   The active button carries `aria-pressed="true"` and `data-active`. Deliberately the same
   `label`/`start`/`end` shape as `<lr-time-range>`'s `TimeRangePreset`, so the library has one
   preset vocabulary rather than two — the only difference is the unit (ISO dates, not numbers)
+- `appliedPreset: LyraDateRangePreset | undefined` (read-only, new in 11.1.0) — the preset whose
+  button produced the current `value`, or `undefined` when the range was picked by hand. Read it
+  inside your own `change`/`input` handler. It exists because a dashboard filter has to persist
+  *which* preset is active rather than the pair it froze to: "Last 7 days" must still mean the last
+  7 days after tomorrow's reload. That fact is not recoverable from `value` — re-deriving it by
+  string-matching is the mapping table `presets` exists to delete, and it is ambiguous anyway
+  (Today and This month coincide on the 1st of a month, and a hand-picked range can equal a
+  preset's pair by construction). A property rather than an event detail because `input`/`change`
+  here are **native** events, deliberately indistinguishable from a manual selection so existing
+  handlers need no special case, and a native `Event` cannot carry a detail without changing type
 - `disabled: boolean = false` (reflected)
 - `disabledDates: string | string[] | Date[] = ''` (attribute `disabled-dates`)
 - `disabledDaysOfWeek: string = ''` (attribute `disabled-days-of-week`)
@@ -5022,7 +5036,9 @@ capped at 40% and ellipsize unbroken content. Clear and calendar actions retain
 **Custom states:** `blank`, `disabled`, `open`, and `range`; the shared form-associated mixin also
 exposes its validity states.
 
-**CSS parts (19):** `clear-button`, `date-input`, `date-picker`, `end`, `expand-button`,
+**CSS parts (21):** `clear-button`, `date-input`, `date-picker`, `presets` and `preset-button`
+(forwarded from the nested `lr-date-picker` via `exportparts`, so the quick-range row is styleable
+from outside — new in 11.1.0), `end`, `expand-button`,
 `expand-icon`, `form-control`, `form-control-input`, `form-control-label`, `hint`, `input`,
 `input-wrapper`, `popup`, `range-separator`, `segment`, `segment-literal`, `start`, permanent
 compatibility name `base` (a nested wrapper inside `date-input`), and permanent compatibility name
@@ -5155,7 +5171,7 @@ and `dateTimeFormat(locale, options)`.
 - `--lr-date-picker-nav-active-bg` — Pressed navigation background; defaults to the hover color
   mixed by `--lr-color-mix-active`.
 - `--lr-date-picker-preset-hover-bg`, `--lr-date-picker-preset-active-bg`, and
-  `--lr-date-picker-preset-selected-bg` (new in 10.1.0) — hover, pressed, and
+  `--lr-date-picker-preset-selected-bg` (new in 11.0.0) — hover, pressed, and
   currently-selected paint for a `presets` quick-range button. Defaults are
   `var(--lr-color-brand-quiet)`, that hover colour mixed by `--lr-color-mix-active`, and
   `var(--lr-color-brand)` respectively.
@@ -10836,7 +10852,7 @@ weekdayLabelText?: (jsWeekday:number)=>string|undefined; monthLabelText?:
   A malformed value is ignored rather than collapsing the gutter. Calendar mode is unaffected; it
   has its own fixed weekday gutter
 - `colLabelHeight?: number | 'auto'` (attribute `col-label-height`, not reflected, `'auto'` new in
-  10.1.0) — height, in CSS px, of the matrix column-label band, or `'auto'` to measure the labels
+  11.0.0) — height, in CSS px, of the matrix column-label band, or `'auto'` to measure the labels
   and size the band to fit them. Under a non-zero `colLabelRotation` the measurement projects each
   label's width through the rotation, which is what makes a rotated axis usable without hand-tuning
   a magic number. Never below the built-in `20`, and bounded above by a sanity ceiling so a
@@ -10845,7 +10861,7 @@ weekdayLabelText?: (jsWeekday:number)=>string|undefined; monthLabelText?:
   be bounded relative to them, whereas the canvas simply grows taller for this band and the cells
   keep their size. Unset keeps the built-in `20`, so no existing chart reflows. A malformed value is
   ignored
-- `colLabelRotation?: number` (attribute `col-label-rotation`, new in 10.1.0) — rotation, in
+- `colLabelRotation?: number` (attribute `col-label-rotation`, new in 11.0.0) — rotation, in
   degrees, applied to matrix column labels. Unset or `0` paints them horizontally exactly as before.
   In a dense matrix the per-column width is far narrower than a typical label, so horizontal labels
   collide with their neighbours; `45` or `90` is the standard remedy. Each label rotates about an
@@ -18551,7 +18567,7 @@ A click-triggered, light-dismiss floating surface positioned with the shared Flo
 - `accessibleLabel: string = ''` (attribute **`aria-label`**) — names the popup. An authored host
   attribute wins by presence, including `aria-label=""`; only when it is absent does the property
   or localized "Popover" ("Menu" when `popupRole` is `menu`) fallback apply
-- `popupRole: 'dialog'|'menu'|'none' = 'dialog'` (attribute `popup-role`). `none` (new in 10.1.0)
+- `popupRole: 'dialog'|'menu'|'none' = 'dialog'` (attribute `popup-role`). `none` (new in 11.0.0)
   renders **no** `role` and no generated `aria-label` on the popup surface, and leaves
   `aria-haspopup` off the trigger, so slotted content owns its own semantics and accessible name.
   It exists for the WAI-ARIA **disclosure navigation** pattern: a flyout of links is not an
@@ -21991,7 +22007,7 @@ string; geojson: GeoJSON.FeatureCollection; field: string; stops: [number, strin
   the documented way to weight a ramp toward the low end). **`stops` stay in the data's own units
   under either mode**, so the legend keeps reading in real values instead of log units — no
   pre-transforming to log10 and hand-relabelling the legend back.
-  `'step'` (new in 10.1.0) emits maplibre's `['step', …]` instead of `['interpolate', …]`, giving
+  `'step'` (new in 11.0.0) emits maplibre's `['step', …]` instead of `['interpolate', …]`, giving
   **discrete bands rather than a continuous ramp**. Use it whenever the legend advertises a fixed
   set of ranges with one swatch each: a ramp would put colours on the map that appear nowhere in the
   legend, and would render two regions in the same advertised band as visibly different colours
@@ -22024,7 +22040,7 @@ GeoJSON.FeatureCollection; tone?: 'accent' | 'success' | 'warning' |
   GeoJSON source plus three geometry-filtered layers
   (fill, line, and circle, so a mixed `FeatureCollection` renders correctly), colored from the
   matching `--lr-color-*` token (`tone` defaults to `'accent'` → `--lr-color-brand`).
-  `color` and `strokeColor` (both new in 10.1.0) override that per surface — `color` paints the
+  `color` and `strokeColor` (both new in 11.0.0) override that per surface — `color` paints the
   polygon fill, `strokeColor` the line and circle layers, falling back to `color` and then to `tone`.
   They are separable because a fill and its outline want opposite things on a
   choropleth-plus-overlay map, and the difference is measurable rather than aesthetic: the fill
@@ -24638,7 +24654,7 @@ property).
   ignored without evaluating script or exposing prototype-pollution keys to the merge.
 - `showDataTable: boolean = false` (attribute `show-data-table`) — makes the always-available
   accessible data table visible rather than screen-reader-only
-- `dataTableToggle: boolean = false` (attribute `data-table-toggle`, new in 10.1.0) — renders a
+- `dataTableToggle: boolean = false` (attribute `data-table-toggle`, new in 11.0.0) — renders a
   localized disclosure button (`part="data-table-toggle"`) above the data table so a *sighted*
   reader can reveal the numbers on demand. `showDataTable` alone is all-or-nothing, which left
   consumers wrapping a duplicated table in their own `<details>`. With the toggle on,
@@ -24960,6 +24976,21 @@ passthrough). Not a subclass of `LyraChart`.
 - `tableTotals: boolean = false` (attribute `table-totals`) — adds a localized total column to the
   multi-series accessible table when `type="bar"` and `stacked` are both active. Ignored for
   grouped bars, line charts, and the single-series `data-list`.
+- `showDataTable: boolean = false` (attribute `show-data-table`, new in 11.1.0) — makes the
+  generated accessible table visible rather than screen-reader-only. Same meaning as `lr-chart`'s
+  property of the same name.
+- `dataTableToggle: boolean = false` (attribute `data-table-toggle`, new in 11.1.0) — renders a
+  localized disclosure button (`part="data-table-toggle"`, with `aria-expanded` and
+  `aria-controls`) above the table, so a *sighted* reader can reveal the numbers on demand;
+  `showDataTable` then becomes the disclosure's **initial** state rather than its whole behavior.
+  The table stays in the DOM in both states, so assistive technology never loses it. This matters
+  more here than on `lr-chart`: this component exists to avoid the Chart.js peers, so without it an
+  app that chose it for exactly that reason had to either hand-roll a `<details>` around a
+  duplicated table or adopt `lr-chart` and pull in Chart.js for a button — the cheap component
+  stuck with the expensive workaround. Unset, nothing renders and behavior is unchanged.
+  Themeable via `--lr-lite-chart-data-table-toggle-hover-bg` (default
+  `var(--lr-color-brand-quiet)`) and `--lr-lite-chart-data-table-toggle-active-bg` (default: that
+  hover colour mixed by `--lr-color-mix-active`).
 - `layout: 'fit' | 'scroll' = 'fit'` (reflected) — `'fit'` (default) is the original squeeze-the-
   whole-plot-to-host-width behavior, unchanged. `'scroll'` gives bars a fixed `barWidth` instead: plot
   content width becomes `categoryCount * barWidth` (can exceed the host's measured width), and
@@ -25066,7 +25097,8 @@ data alternative.
 mark), `line`, `legend`, `legend-item`, `legend-swatch`, `legend-text` (extra per-item text after
 the series label, rendered only when `legendText` is set), `live-region` (the current mark
 announcement for keyboard users), `data-list` (a visually hidden sampled list of plotted data
-points — single-series only), `data-table` (the generated/slotted alternative container), `table`
+points — single-series only), `data-table` (the generated/slotted alternative container),
+`data-table-toggle` (the `dataTableToggle` disclosure button — new in 11.1.0), `table`
 (the generated semantic category×series table rendered when there is more than one dataset), and
 `data-truncation` (the
 visible/announced sampling notice).
@@ -25345,7 +25377,7 @@ browser). Does **not** extend `LyraChart` — a deliberately bespoke API.
 - `formatter?: LyraChartFormatter`, `valueFormatter?: LyraChartValueFormatter` — numeric axis,
   tooltip, table, summary, and export formatting; the context-object formatter takes precedence
 - `showDataTable: boolean = false` (attribute `show-data-table`) — reveals the accessible data table
-- `dataTableToggle: boolean = false` (attribute `data-table-toggle`, new in 10.1.0) — renders a
+- `dataTableToggle: boolean = false` (attribute `data-table-toggle`, new in 11.0.0) — renders a
   localized disclosure button (`part="data-table-toggle"`) above the data table so a *sighted*
   reader can reveal the numbers on demand. `showDataTable` alone is all-or-nothing, which left
   consumers wrapping a duplicated table in their own `<details>`. With the toggle on,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "11.0.0",
+  "version": "11.1.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",

package/vscode-css-data.json

@@ -6357,6 +6357,20 @@
         "value": "**`<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": {
+        "kind": "markdown",
+        "value": "**`<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": {
+        "kind": "markdown",
+        "value": "**`<lr-lite-chart>`** (default: `var(--lr-color-brand-quiet)`) — Hover background of the `dataTableToggle` disclosure button."
+      }
+    },
     {
       "name": "--lr-lite-chart-selected-outline-color",
       "description": {

package/vscode-html-data.json

@@ -7232,7 +7232,7 @@
       "name": "lr-date-input",
       "description": {
         "kind": "markdown",
-        "value": "`<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."
+        "value": "`<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": [
         {
@@ -14414,7 +14414,7 @@
       "name": "lr-lite-chart",
       "description": {
         "kind": "markdown",
-        "value": "`<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`."
+        "value": "`<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": [
         {
@@ -14445,6 +14445,13 @@
             "value": "Type: `boolean`  \nDefault: `true`"
           }
         },
+        {
+          "name": "data-table-toggle",
+          "description": {
+            "kind": "markdown",
+            "value": "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`"
+          }
+        },
         {
           "name": "description",
           "description": {
@@ -14555,6 +14562,13 @@
             }
           ]
         },
+        {
+          "name": "show-data-table",
+          "description": {
+            "kind": "markdown",
+            "value": "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`"
+          }
+        },
         {
           "name": "skip-zero",
           "description": {

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.1.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",
@@ -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`."