@aceshooting/lyra-ui 14.1.1 → 14.3.0

package/llms/components/lr-accordion-item.md

@@ -159,6 +159,42 @@ findable `hidden="until-found"` closed-state gate.
 The Details icon wrapper also carries Shoelace's `summary-icon` alias, so either part name styles
 the same node. `header-actions` is the wrapper around the `header-actions` slot.
 
+For rich independent actions, reserve a useful basis on `header-actions` so the complete action
+group wraps onto another row before its checkbox label becomes too narrow. The header already
+wraps; its summary belongs to a private native-details flex item, so setting `flex` on
+`::part(summary)` does not control that item's allocation. This recipe uses public parts and
+ordinary light-DOM layout:
+
+```html
+<style>
+  lr-details.responsive-actions::part(header-actions) {
+    flex: 1 1 12rem;
+    min-inline-size: min(100%, 12rem);
+    padding: var(--lr-space-xs);
+    box-sizing: border-box;
+  }
+  .details-action-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--lr-space-s);
+    min-inline-size: 0;
+  }
+  .details-action-group lr-checkbox { flex: 1 1 auto; min-inline-size: 0; }
+</style>
+<lr-details class="responsive-actions" summary="Settings">
+  <span slot="header-actions" class="details-action-group">
+    <lr-checkbox size="s">Show distribution details</lr-checkbox>
+    <lr-badge>Live</lr-badge>
+  </span>
+  Distribution settings.
+</lr-details>
+```
+
+Import the granular details, checkbox and badge registration entries. Adjust the `12rem` basis
+for the actual labels. Logical sizing supports RTL and narrower allocations; the checkbox remains
+independently focusable and operable when the summary is disabled.
+
 **Themeable custom properties:** accordion item exposes `--lr-accordion-item-spacing` (default
 `var(--lr-form-control-padding-inline)`), `--lr-accordion-item-show-duration` and
 `--lr-accordion-item-hide-duration` (both default `var(--lr-duration-base)`), and

package/llms/components/lr-accordion.md

@@ -159,6 +159,42 @@ findable `hidden="until-found"` closed-state gate.
 The Details icon wrapper also carries Shoelace's `summary-icon` alias, so either part name styles
 the same node. `header-actions` is the wrapper around the `header-actions` slot.
 
+For rich independent actions, reserve a useful basis on `header-actions` so the complete action
+group wraps onto another row before its checkbox label becomes too narrow. The header already
+wraps; its summary belongs to a private native-details flex item, so setting `flex` on
+`::part(summary)` does not control that item's allocation. This recipe uses public parts and
+ordinary light-DOM layout:
+
+```html
+<style>
+  lr-details.responsive-actions::part(header-actions) {
+    flex: 1 1 12rem;
+    min-inline-size: min(100%, 12rem);
+    padding: var(--lr-space-xs);
+    box-sizing: border-box;
+  }
+  .details-action-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--lr-space-s);
+    min-inline-size: 0;
+  }
+  .details-action-group lr-checkbox { flex: 1 1 auto; min-inline-size: 0; }
+</style>
+<lr-details class="responsive-actions" summary="Settings">
+  <span slot="header-actions" class="details-action-group">
+    <lr-checkbox size="s">Show distribution details</lr-checkbox>
+    <lr-badge>Live</lr-badge>
+  </span>
+  Distribution settings.
+</lr-details>
+```
+
+Import the granular details, checkbox and badge registration entries. Adjust the `12rem` basis
+for the actual labels. Logical sizing supports RTL and narrower allocations; the checkbox remains
+independently focusable and operable when the summary is disabled.
+
 **Themeable custom properties:** accordion item exposes `--lr-accordion-item-spacing` (default
 `var(--lr-form-control-padding-inline)`), `--lr-accordion-item-show-duration` and
 `--lr-accordion-item-hide-duration` (both default `var(--lr-duration-base)`), and

package/llms/components/lr-bar-chart.md

@@ -25,8 +25,9 @@ Everything else is inherited verbatim from `lr-chart`; each name below has the s
 and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
 of every entry in these lists.**
 
-**Properties:** `description`, `grid`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
-(`legend-position`), `max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
+**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
+(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
+`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
 `stacked`, `withoutAnimation` (`without-animation`),
 `withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
 `yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
@@ -42,6 +43,8 @@ of every entry in these lists.**
 index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
 `lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
 complete `hiddenDatasets` snapshot).
+Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
+`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
 
 **Slots:** default JSON configuration script, `data-table`, `center`.
 

package/llms/components/lr-bubble-chart.md

@@ -25,8 +25,9 @@ Everything else is inherited verbatim from `lr-chart`; each name below has the s
 and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
 of every entry in these lists.**
 
-**Properties:** `description`, `grid`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
-(`legend-position`), `max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
+**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
+(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
+`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
 `stacked`, `withoutAnimation` (`without-animation`),
 `withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
 `yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
@@ -42,6 +43,8 @@ of every entry in these lists.**
 index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
 `lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
 complete `hiddenDatasets` snapshot).
+Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
+`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
 
 **Slots:** default JSON configuration script, `data-table`, `center`.
 

package/llms/components/lr-button.md

@@ -337,6 +337,11 @@ box no matter what tier or override is in play.
   are resolved onto the focused internal control through `ariaDescribedByElements`; external
   `aria-labelledby` is not copied across the shadow boundary.
 - Host `aria-haspopup` and `aria-expanded` values are forwarded to the internal semantic control.
+  For toggle buttons, host `aria-pressed="true|false|mixed"` reaches the focused native button.
+  Navigation can use `aria-current="page|step|location|date|time|true|false"`. Both states update
+  reactively, including native `ariaPressed`/`ariaCurrent` property assignments, attribute removal
+  and `href` changes. Empty or unsupported tokens are omitted. The native button/link role remains
+  unchanged: use pressed state for button toggles and current state for navigation links.
   For host `aria-controls`, targets in the host's own root are resolved through the reflected
   element-reference API so a popup relationship survives the component's shadow boundary; browsers
   with that API expose the relationship through `ariaControlsElements` and intentionally serialize

package/llms/components/lr-chart.md

@@ -26,6 +26,24 @@ an effective raw `config.options.indexAxis` override. Both formatter APIs follow
 structured points retain their y-value formatting.
 
 **Properties:**
+- `axes: LyraChartAxes = 'both'` — `'x' | 'y' | 'both' | 'none'`, controlling complete cartesian
+  axes: labels, ticks, borders and grid lines. The `y` setting includes `y2`; invalid values use
+  `both`. Radial charts ignore this setting. Use `grid` when only grid lines should disappear.
+- `compact: boolean = false` — hides cartesian axes and removes automatic plot padding. Combine
+  with `withoutLegend` and a short `height` (for example `64px`) for an inline histogram or
+  sparkline. Tooltips, accessible data, formatting and keyboard activation remain available.
+  `config` still wins over generated options, so explicit scale visibility or layout padding
+  can override the preset. Leaving compact mode restores `axes`. Radial charts are unaffected.
+
+  For a monthly histogram above `lr-slider`, give both controls the same inline allocation and
+  use `lr-bar-chart compact without-legend height="64px"`. Map range values to bin edges: with
+  twelve months, set the slider's `min=0`, `max=12`, `step=1` and treat its values as the half-open
+  interval `[minValue, maxValue)`. Equal edges select no months. Use `show-value`,
+  `value-display="formatted"` and `value-placement="label"` to display application-formatted month
+  names without a separate readout listener. Commit filtering on `lr-change`; `lr-input` remains
+  available for live previews. Chart categories retain their authored physical order: for an RTL
+  slider that starts at the right edge, reverse both histogram labels and counts. The Monthly
+  Range bar-chart story demonstrates both directions without scale configuration.
 - `type: LyraChartType = 'bar'` — `LyraChartType = 'line' | 'bar' | 'scatter' | 'pie' | 'doughnut' |
   'radar' | 'polarArea' | 'bubble'` — every named default used by a typed `lr-*-chart` is
   already a first-class member, so `<lr-chart type="pie">` needs no subclass or cast to work;
@@ -109,6 +127,28 @@ structured points retain their y-value formatting.
   would clip. Its pressed state follows `hiddenDatasets` whenever that controlled snapshot is
   defined, otherwise the effective dataset's declarative `hidden` value before Chart.js is ready
   and across chart type/plugin rebuilds.
+- `legendMode: LyraChartLegendMode = 'dataset'` (attribute `legend-mode`) — `dataset` preserves
+  dataset toggles. `datum` shows one category toggle per slice in pie, doughnut and polar-area
+  charts; other types retain dataset legends. Category names use source labels with localized
+  numbered fallbacks. Colors and values come from the first dataset. With multiple datasets/rings,
+  a category toggle hides that source index in every ring, matching Chart.js category visibility.
+- `hiddenDatums: readonly number[] = []` (attribute: false) — clone-owned hidden source category
+  indexes for radial charts. `[]` restores all categories. Invalid, duplicate and out-of-range
+  indexes are ignored when applied or emitted. Programmatic changes are silent; accepted datum
+  legend toggles write the complete next snapshot. Data and type replacements, reconnection and
+  sampling retain source-index meaning. This state is independent of `hiddenDatasets`; hiding a
+  whole dataset continues to hide its ring. Accessible data and CSV export retain hidden values.
+- `legendDisplay: LyraChartLegendDisplay = 'auto'` (attribute `legend-display`) — `auto` preserves
+  the existing label with optional legend formatting. `label` always shows labels alone, even when
+  `formatter`/`valueFormatter` supplies values for tooltips or axes. `value` appends the formatted
+  numeric value. `percentage` appends a locale-formatted share independently of these callbacks:
+  the denominator is the sum of absolute represented legend values, including hidden entries.
+  Dataset entries use sampled sums; category entries use the first dataset's represented values.
+  Zero totals give 0%. These options affect the DOM legend; tooltip/axis/table formatting is unchanged.
+  Simplified pie/doughnut datasets with magnitudes above `Number.MAX_SAFE_INTEGER` are uniformly
+  rescaled for finite canvas geometry. Lyra tooltips, data labels, legends, events and CSV retain
+  original values; direct Chart.js callbacks see the rescaled peer data. Explicit `config.data`
+  remains the unmodified full-fidelity escape hatch.
 - `legendPosition: LyraChartLegendPosition = 'top'` (attribute `legend-position`) — accepts the
   Chart.js `left|top|right|bottom|center|chartArea|{ [scaleId]: number }` positions plus logical
   `start`/`end`; the additive `auto` chooses right above 480px and bottom below that allocation
@@ -170,6 +210,14 @@ structured points retain their y-value formatting.
   explicit array replaces that generated member rather than concatenating with it. This effective
   model drives canvas rendering, `appendData()`, export, the accessible name/summary, keyboard
   navigation and activation events, the DOM legend, and the generated fallback table.
+  For generated **bar** series, an explicit series `width` wins. Otherwise authored bar
+  `borderWidth`/`borderRadius` defaults in `options.datasets.bar`, its nested `elements.bar`,
+  `options.elements.bar`, or root `options` are left for Chart.js to resolve, including scriptable,
+  indexable and `barBorderWidth`/`barBorderRadius` forms. Unset values retain Lyra's `--border-width`
+  and `--border-radius` defaults; removing config restores those defaults. Raw `config.data.datasets`
+  remain authoritative. Dense charts with transparent borders should set
+  `config.options.datasets.bar.borderWidth = 0` (or the public `--border-width: 0` CSS hook):
+  a one-pixel transparent stroke can consume the fill of a bar narrower than two pixels.
   As a declarative alternative, place one `<script type="application/json">` in the default slot;
   an explicitly assigned `config` property wins over the slotted object. Invalid/non-object JSON is
   ignored without evaluating script or exposing prototype-pollution keys to the merge.
@@ -284,6 +332,22 @@ family-wide handling; `lr-point-click` remains as a compatibility event. Also
 `{ datasetIndex: number, visible: boolean, hiddenDatasets: readonly number[] }`; the latter is the
 complete, sorted, valid next snapshot. Call `preventDefault()` on the proposal to veto the toggle;
 then no property change or commit event occurs.
+Category toggles use a separate pair, `lr-before-datum-visibility-change` (cancelable proposal) and
+`lr-datum-visibility-change` (accepted commit), carrying
+`{ index: number, visible: boolean, hiddenDatums: readonly number[] }`. Both details and their
+complete, sorted index snapshots are frozen. `index` is the source category index, including when
+the displayed data is sampled; it applies across all rings. Programmatic assignments emit neither
+pair. `preventDefault()` leaves both controlled state and the chart unchanged.
+
+```html
+<lr-doughnut-chart
+  legend-mode="datum"
+  legend-display="label"
+  .labels=${['A', 'B', 'C']}
+  .datasets=${[{ label: 'Distribution', data: [5, 3, 2] }]}
+  .hiddenDatums=${[]}
+></lr-doughnut-chart>
+```
 
 **Slots:** default — one optional `<script type="application/json">` Chart.js configuration;
 `data-table` — an optional consumer-provided complete, paginated, or virtualized accessible table
@@ -301,8 +365,8 @@ another application-owned presentation. Explicit `config.data` is the deliberate
 Chart.js escape hatch and is not rewritten by the simplified-surface sampler.
 
 **CSS parts:** `base`, `plot` (the fixed-height canvas/overlay region), `canvas`, `legend` (the
-wrapping DOM legend), `legend-item` (a dataset-visibility button), `legend-item-hidden` (added to
-that button while its dataset is hidden), `legend-swatch`,
+wrapping DOM legend), `legend-item` (a dataset/category visibility button), `legend-item-hidden`
+(added while the dataset/category is hidden), `legend-swatch`,
 `reset-zoom-button`, `description`, `notices` (wrapper for nonfatal feature warnings and
 bounded-alternative truncation notices), `data-table`, `data-table-toggle` (the `dataTableToggle` disclosure button), `data-truncation` (the bounded-alternative
 notice), `feature-warning` (a nonfatal missing optional-feature warning), `center` (the
@@ -439,7 +503,7 @@ announced. In particular, unavailable data labels do not remove generated table
   the observer, drawing starts when the peer and canvas are ready. An empty delivered callback
   retains the visible fallback. Peer loading and accessible DOM may settle while visibility is
   pending. Independently, `updated()` only reaches
-  Chart.js when at least one of `type`, `labels`, `datasets`, `description`, `grid`, `indexAxis`,
+  Chart.js when at least one of `type`, `labels`, `datasets`, `description`, `grid`, `axes`, `compact`, `indexAxis`,
   `label`, `hiddenDatasets`, `legendPosition`, `min`, `max`, `plugins`, the internal resolved auto legend
   position, `valueFormatter`, `formatter`, `area`, `height`, `xLabel`, `yLabel`, `y2Label`, `beginAtZero`,
   `stacked`, any `without*` control, `dataLabels`, `stackTotals`, `config`, the parsed

package/llms/components/lr-checkbox.md

@@ -127,7 +127,9 @@ compacts this control with it. Set it to pin the box independently of the tier.
 the label text: the box plus the gap beside it. It defaults to
 `calc(var(--lr-checkbox-box-size) + var(--lr-space-s))`, and the rendered gap is
 _derived_ from it, so the advertised value and the real label offset cannot drift. Setting it on
-the element (or on `lr-checkbox` in your own stylesheet) moves the label.
+the element (or on `lr-checkbox` in your own stylesheet) moves the label. The visible box
+aligns with the inline start of its transparent hit target, so a compact box plus gap remains
+clear of the label in both directions even when the hit target is wider than the box.
 
 It is published so you can align your own per-option hint text under the label without re-deriving
 that formula by reading the shadow styles. **But custom properties inherit down, not sideways**, so

package/llms/components/lr-date-input.md

@@ -310,44 +310,30 @@ use the same normalization path as direct property writes.
 `--lr-form-control-required-offset` retune or suppress it here exactly as they do on `lr-input`.
 With no label text the part is hidden and no glyph is painted.
 
-**Themeable custom properties:** `--lr-date-input-padding-block` (default `--lr-space-xs`) and
-`--lr-date-input-padding-inline` (default `--lr-space-s`) — the `input-wrapper`'s padding;
-`--lr-date-input-font-size` (default `inherit`) — the `input` part's font size;
-`--lr-date-input-control-min-height` (default `--lr-form-control-height`, i.e. `2.5rem` at the
-default `m` tier) — the `input-wrapper`'s block-size
-floor. Their private defaults follow `size` (`2xs`/`xs`/`s`/`l`/`xl`; `m` keeps the base defaults),
-using the same per-`size` values `lr-input` uses. Inherited or direct public values win in every
-tier. `pill` changes the private `--lr-date-input-radius` default to `--lr-radius-pill`; a public
-radius still wins. Plus shared
-tokens. The mapped `--show-duration` and `--hide-duration` hooks independently retime the popup's
-enter and exit transitions; both default to `var(--lr-transition-fast)`.
-The clear and calendar actions expose point-of-use state hooks:
-`--lr-date-input-action-hover-color`, `--lr-date-input-action-hover-bg`, and
+**Themeable custom properties:** `--lr-date-input-padding-block` (default
+`--lr-form-control-padding-block`) pads the native text input; `--lr-date-input-padding-inline`
+(default `--lr-form-control-padding-inline`) pads the row. `--lr-date-input-font-size` defaults to
+`--lr-form-control-font-size`. The row floor `--lr-date-input-control-min-height` defaults to
+`--lr-form-control-height`. All four defaults follow the shared size ladder, including
+`small`/`medium`/`large` aliases and inherited `--lr-theme-form-control-height-*` overrides.
+Inherited or direct public values win. `pill` changes the private radius default to
+`--lr-radius-pill`; a public `--lr-date-input-radius` still wins.
+
+Calendar and clear actions fit inside the selected row height while retaining at least 24×24
+CSS-pixel targets. At the default root size, rows measure 30/40/48/56px for s/m/l/xl; 2xs and xs
+grow to 26px to accommodate the 24px action plus the row borders. Custom content or font metrics
+can grow an unconstrained row. A theme setting the small tier to 36px produces a 36px date row.
+`--lr-date-input-control-height` remains undeclared by default and pins an exact row height when
+set. If it forces a row below its target size, the action overflows instead of shrinking.
+
+The mapped `--show-duration` and `--hide-duration` hooks independently retime the popup's enter
+and exit transitions; both default to `var(--lr-transition-fast)`. Clear and calendar action
+state hooks are `--lr-date-input-action-hover-color`, `--lr-date-input-action-hover-bg`, and
 `--lr-date-input-action-hover-radius` (defaults: text, transparent, and the input radius), plus
 `--lr-date-input-action-active-color`, `--lr-date-input-action-active-bg`, and
 `--lr-date-input-action-active-radius` for the pressed state. They inherit from theme ancestors;
 direct values on `lr-date-input` win without retuning library-wide tokens.
 
-`--lr-date-input-control-height` pins an **exact** `input-wrapper` height (both floors and caps it).
-It is **undeclared by default**, so the row grows to fit its content — see "exact-height hatches"
-under `lr-input`. Pinning it _below_ the calendar toggle's 24×24 target is safe: the toggle keeps
-its own `--lr-icon-button-size` floor and simply overflows a short row rather than shrinking, so
-WCAG 2.2 SC 2.5.8 is preserved either way.
-
-**Height parity with `lr-input` is density parity, not pixel parity.** The per-`size` padding and
-font-size scale is shared with `lr-input`, so the two look equally dense at a given `size` — but a
-same-`size` pair does **not** end up the same height, and code that assumes it will be
-disappointed at the small tiers. `[part='input-wrapper']` carries no intrinsic `min-block-size` of
-its own, while `[part='expand-button']` pins `min-block-size: var(--lr-icon-button-size)` that is
-deliberately **not** gated by `size` — the calendar toggle must keep a 24×24 touch target at every
-tier, and `lr-input`'s own password-toggle floors identically. So the row height is pinned
-transitively by that button: at `size="s"` an `lr-input` floors at `1.875rem`/30px, while an
-`lr-date-input` cannot go below roughly 40px plus its padding. Every default value of
-`--lr-date-input-control-min-height` sits below that transitive height, which means the floor is
-inert until you raise it past the button — a lower value changes nothing. To line the two controls
-up exactly, either raise `lr-input`'s floor to meet the date input, or lower
-`--lr-theme-icon-button-size` on a common ancestor (never below 24px).
-
 **Optional peer deps:** none.
 
 ```html

package/llms/components/lr-date-picker.md

@@ -310,44 +310,30 @@ use the same normalization path as direct property writes.
 `--lr-form-control-required-offset` retune or suppress it here exactly as they do on `lr-input`.
 With no label text the part is hidden and no glyph is painted.
 
-**Themeable custom properties:** `--lr-date-input-padding-block` (default `--lr-space-xs`) and
-`--lr-date-input-padding-inline` (default `--lr-space-s`) — the `input-wrapper`'s padding;
-`--lr-date-input-font-size` (default `inherit`) — the `input` part's font size;
-`--lr-date-input-control-min-height` (default `--lr-form-control-height`, i.e. `2.5rem` at the
-default `m` tier) — the `input-wrapper`'s block-size
-floor. Their private defaults follow `size` (`2xs`/`xs`/`s`/`l`/`xl`; `m` keeps the base defaults),
-using the same per-`size` values `lr-input` uses. Inherited or direct public values win in every
-tier. `pill` changes the private `--lr-date-input-radius` default to `--lr-radius-pill`; a public
-radius still wins. Plus shared
-tokens. The mapped `--show-duration` and `--hide-duration` hooks independently retime the popup's
-enter and exit transitions; both default to `var(--lr-transition-fast)`.
-The clear and calendar actions expose point-of-use state hooks:
-`--lr-date-input-action-hover-color`, `--lr-date-input-action-hover-bg`, and
+**Themeable custom properties:** `--lr-date-input-padding-block` (default
+`--lr-form-control-padding-block`) pads the native text input; `--lr-date-input-padding-inline`
+(default `--lr-form-control-padding-inline`) pads the row. `--lr-date-input-font-size` defaults to
+`--lr-form-control-font-size`. The row floor `--lr-date-input-control-min-height` defaults to
+`--lr-form-control-height`. All four defaults follow the shared size ladder, including
+`small`/`medium`/`large` aliases and inherited `--lr-theme-form-control-height-*` overrides.
+Inherited or direct public values win. `pill` changes the private radius default to
+`--lr-radius-pill`; a public `--lr-date-input-radius` still wins.
+
+Calendar and clear actions fit inside the selected row height while retaining at least 24×24
+CSS-pixel targets. At the default root size, rows measure 30/40/48/56px for s/m/l/xl; 2xs and xs
+grow to 26px to accommodate the 24px action plus the row borders. Custom content or font metrics
+can grow an unconstrained row. A theme setting the small tier to 36px produces a 36px date row.
+`--lr-date-input-control-height` remains undeclared by default and pins an exact row height when
+set. If it forces a row below its target size, the action overflows instead of shrinking.
+
+The mapped `--show-duration` and `--hide-duration` hooks independently retime the popup's enter
+and exit transitions; both default to `var(--lr-transition-fast)`. Clear and calendar action
+state hooks are `--lr-date-input-action-hover-color`, `--lr-date-input-action-hover-bg`, and
 `--lr-date-input-action-hover-radius` (defaults: text, transparent, and the input radius), plus
 `--lr-date-input-action-active-color`, `--lr-date-input-action-active-bg`, and
 `--lr-date-input-action-active-radius` for the pressed state. They inherit from theme ancestors;
 direct values on `lr-date-input` win without retuning library-wide tokens.
 
-`--lr-date-input-control-height` pins an **exact** `input-wrapper` height (both floors and caps it).
-It is **undeclared by default**, so the row grows to fit its content — see "exact-height hatches"
-under `lr-input`. Pinning it _below_ the calendar toggle's 24×24 target is safe: the toggle keeps
-its own `--lr-icon-button-size` floor and simply overflows a short row rather than shrinking, so
-WCAG 2.2 SC 2.5.8 is preserved either way.
-
-**Height parity with `lr-input` is density parity, not pixel parity.** The per-`size` padding and
-font-size scale is shared with `lr-input`, so the two look equally dense at a given `size` — but a
-same-`size` pair does **not** end up the same height, and code that assumes it will be
-disappointed at the small tiers. `[part='input-wrapper']` carries no intrinsic `min-block-size` of
-its own, while `[part='expand-button']` pins `min-block-size: var(--lr-icon-button-size)` that is
-deliberately **not** gated by `size` — the calendar toggle must keep a 24×24 touch target at every
-tier, and `lr-input`'s own password-toggle floors identically. So the row height is pinned
-transitively by that button: at `size="s"` an `lr-input` floors at `1.875rem`/30px, while an
-`lr-date-input` cannot go below roughly 40px plus its padding. Every default value of
-`--lr-date-input-control-min-height` sits below that transitive height, which means the floor is
-inert until you raise it past the button — a lower value changes nothing. To line the two controls
-up exactly, either raise `lr-input`'s floor to meet the date input, or lower
-`--lr-theme-icon-button-size` on a common ancestor (never below 24px).
-
 **Optional peer deps:** none.
 
 ```html

package/llms/components/lr-details.md

@@ -159,6 +159,42 @@ findable `hidden="until-found"` closed-state gate.
 The Details icon wrapper also carries Shoelace's `summary-icon` alias, so either part name styles
 the same node. `header-actions` is the wrapper around the `header-actions` slot.
 
+For rich independent actions, reserve a useful basis on `header-actions` so the complete action
+group wraps onto another row before its checkbox label becomes too narrow. The header already
+wraps; its summary belongs to a private native-details flex item, so setting `flex` on
+`::part(summary)` does not control that item's allocation. This recipe uses public parts and
+ordinary light-DOM layout:
+
+```html
+<style>
+  lr-details.responsive-actions::part(header-actions) {
+    flex: 1 1 12rem;
+    min-inline-size: min(100%, 12rem);
+    padding: var(--lr-space-xs);
+    box-sizing: border-box;
+  }
+  .details-action-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--lr-space-s);
+    min-inline-size: 0;
+  }
+  .details-action-group lr-checkbox { flex: 1 1 auto; min-inline-size: 0; }
+</style>
+<lr-details class="responsive-actions" summary="Settings">
+  <span slot="header-actions" class="details-action-group">
+    <lr-checkbox size="s">Show distribution details</lr-checkbox>
+    <lr-badge>Live</lr-badge>
+  </span>
+  Distribution settings.
+</lr-details>
+```
+
+Import the granular details, checkbox and badge registration entries. Adjust the `12rem` basis
+for the actual labels. Logical sizing supports RTL and narrower allocations; the checkbox remains
+independently focusable and operable when the summary is disabled.
+
 **Themeable custom properties:** accordion item exposes `--lr-accordion-item-spacing` (default
 `var(--lr-form-control-padding-inline)`), `--lr-accordion-item-show-duration` and
 `--lr-accordion-item-hide-duration` (both default `var(--lr-duration-base)`), and

package/llms/components/lr-doughnut-chart.md

@@ -25,8 +25,9 @@ Everything else is inherited verbatim from `lr-chart`; each name below has the s
 and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
 of every entry in these lists.**
 
-**Properties:** `description`, `grid`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
-(`legend-position`), `max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
+**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
+(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
+`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
 `stacked`, `withoutAnimation` (`without-animation`),
 `withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
 `yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
@@ -42,6 +43,8 @@ of every entry in these lists.**
 index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
 `lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
 complete `hiddenDatasets` snapshot).
+Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
+`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
 
 **Slots:** default JSON configuration script, `data-table`, `center`.
 

package/llms/components/lr-heatmap.md

@@ -83,6 +83,20 @@ weekdayLabelWidth?: number|'auto'; weekdayLabelText?: (jsWeekday:number)=>string
 - `cellSize: number = 22` (attribute `cell-size` — default `22` in matrix mode, `11` in calendar
   mode when left unset; explicitly setting it now governs both modes' per-cell size alike, and it's
   ignored in either mode when `fitToWidth` is set)
+- `cellGapX: number = 1` / `cellGapY: number = 1` (attributes `cell-gap-x` / `cell-gap-y`) —
+  matrix-only trailing horizontal/vertical gaps in CSS pixels, subtracted from the square
+  `cellSize` pitch. Negative values clamp to zero, non-finite values use `1`, and oversized gaps
+  leave at least one painted pixel. Custom geometry with `accessibleCells` grows the minimum pitch
+  and caps gaps to preserve the `--lr-icon-button-size` target floor. Calendar spacing is unchanged.
+- `cellRadius: number = 0` (attribute `cell-radius`) — matrix-only painted corner radius in CSS
+  pixels, clamped from zero to half the smaller painted side; non-finite values use zero. Custom
+  cell fills, focus/selection/annotation rings, semantic overlays, and PNG canvas output share the
+  same bounds. Custom gaps are excluded from canvas pointer hits; rounded cells retain rectangular
+  interaction bounds. The default one-pixel separator retains its existing hit area.
+- `colLabelInterval: number = 1` (attribute `col-label-interval`) — paint every Nth matrix column
+  label starting at column zero, including frozen labels and rotated label measurement. Truncated
+  to an integer of at least one; non-finite values use `1`. Every original `data.colLabels` value
+  remains available to tooltips, keyboard announcements, semantic cells, and `cellText`.
 - `fitToWidth: boolean = false` (attribute `fit-to-width` — derives `cellSize` from the host's
   measured `clientWidth` on every draw/resize instead of the fixed `cell-size`, so the grid actually
   fills the available width; now applies to calendar mode as well as matrix mode — see gotchas for
@@ -197,6 +211,44 @@ row?: number; col?: number; date?: string }`, matched the same way as `annotatio
   announcement when the focused cell is the selection. Purely a controlled property — mirrors
   `<lr-lite-chart>`'s `selectedIndices`, this component never mutates it itself. Unset (the default,
   `null`) reproduces today's exact output.
+- `multiple: boolean = false` — opts into controlled multi-cell selection through `selectedCells`.
+  The existing `selectedCell` is ignored while enabled and resumes when disabled. Single-cell
+  behavior is unchanged when omitted.
+- `selectedCells: readonly HeatmapSelectedCell[] = []` (attribute: false) — clone-owned selection
+  input, inspected up to `MAX_HEATMAP_CELLS` (10,000) entries. Duplicates, non-integer/out-of-grid
+  coordinates and non-interactive cells are ignored. Matrix records use `{ row, col }`; calendar
+  records use `{ date }`, including interactive calendar gaps. The component never assigns this
+  property in response to user input. It draws selected rings and, with `accessibleCells`, exposes
+  per-cell `aria-selected` plus grid `aria-multiselectable="true"`. The localized accessible summary
+  reports the selected count through `heatmapSelectedCount`.
+
+  `lr-selection-change` is a non-cancelable proposal: frozen `HeatmapSelectionChangeDetail {
+  selectedCells: readonly Readonly<HeatmapSelectedCell>[]; source: HeatmapSelectionSource }`, with
+  source `'pointer' | 'keyboard' | 'row' | 'column'`. Assign the event's array back to `selectedCells`
+  to accept it; property assignments are silent. Output is deduplicated in row/column order. Click
+  or Enter/Space toggles one cell and retains `lr-cell-click`. Pointer dragging paints or erases
+  according to the starting cell, previews transient selection, and proposes once on release;
+  pointer cancellation, Escape, disconnect, data/mode changes discard the gesture. A drag does
+  not emit a cell click. Shift+arrows extends/contracts a rectangle from the anchor while retaining
+  unrelated pre-range selection. Directions remain physical under RTL, matching the canvas.
+
+  `toggleRowSelection(row: number): void` and `toggleColumnSelection(col: number): void` propose
+  whole-axis toggles for application-owned controls: remove an entirely selected axis, otherwise
+  add its interactive cells. Shift+Space and Ctrl/Meta+Space invoke those actions for the focused
+  row/column. Calendar rows are weekday rows 0–6 and columns are zero-based weeks. Invalid indices
+  and calls outside `multiple` mode are no-ops. For a narrow day/hour matrix, use `accessibleCells`
+  and `stickyLabels="both"` to retain usable targets within the component's own scrollport.
+
+  ```js
+  import '@aceshooting/lyra-ui/components/lr-heatmap.js';
+  const heatmap = document.querySelector('lr-heatmap');
+  heatmap.multiple = true;
+  heatmap.accessibleCells = true;
+  heatmap.addEventListener('lr-selection-change', event => {
+    heatmap.selectedCells = event.detail.selectedCells;
+    // Derive filter state from the accepted row/column coordinates.
+  });
+  ```
 - `accessibleCells: boolean = false` (attribute `accessible-cells`) — renders `[part="cells"]` with
   at most 400 `[part="cell"]` native buttons around the active cell. The semantic grid exposes the
   full row/column counts, buttons expose localized `aria-label`s and explicit `aria-selected`, and
@@ -288,16 +340,23 @@ color?: string; label?: string; partOfRamp?: boolean }`: a discrete legend key r
 
 **Getters/methods:** `refreshTheme()` — redraws canvas content after an upstream design-token or
 color-scheme change; called automatically on theme changes, exposed for a consumer that needs to
-force a redraw manually. `matrixGeometry: Readonly<{ padLeft: number; padTop: number; cellSize:
-number }> | undefined` — the gutter/cell geometry the last matrix-mode draw actually painted with,
+force a redraw manually. `matrixGeometry: Readonly<LyraHeatmapMatrixGeometryChangeDetail> | undefined` — the gutter/cell geometry the last matrix-mode draw actually painted with,
 in CSS pixels; `undefined` in calendar mode. Lets a light-DOM consumer line up with the canvas
 without hardcoding the same numbers `row-label-width`/`col-label-height`'s `"auto"` resolution would
 otherwise keep private. For the case that motivated it — a frozen header or gutter on a tall or wide
 matrix — prefer `stickyLabels`, which freezes the band inside the component and needs no mirror at
 all; the getter remains the way to align a *separate* element (a sibling chart, a custom overlay)
-with the grid.
+with the grid. `LyraHeatmapMatrixGeometryChangeDetail` contains `padLeft`, `padTop`, and `cellSize`
+(the square pitch), plus optional `cellWidth`, `cellHeight`, and `cellRadius` for custom matrix
+presentation. When those optional fields are absent, painted width/height are `cellSize - 1` and
+radius is zero. The getter and geometry-change event always share one frozen snapshot, including
+changes to the resolved gaps/radius.
+
+For a fluid day/hour matrix, keep all 24 hour strings in `data.colLabels` and use
+`fit-to-width cell-gap-x="1" cell-gap-y="2" cell-radius="2" col-label-interval="3"`.
+For a single fluid square cell, use `fit-to-width` with equal horizontal and vertical gaps.
 
-**Events:** `lr-cell-click` (fired on click, or Enter/Space on the keyboard-focused cell —
+**Events:** `lr-selection-change` (not cancelable; frozen readonly `HeatmapSelectionChangeDetail { selectedCells, source }` proposal in multiple mode, with `source: 'pointer' | 'keyboard' | 'row' | 'column'`; accept it by assigning `selectedCells`). `lr-cell-click` (fired on click, or Enter/Space on the keyboard-focused cell —
 `detail: { row, col, value }` in matrix mode, `detail: { date, value }` in calendar mode),
 `lr-matrix-geometry-change` (fired after a matrix-mode draw whose resolved `matrixGeometry` differs
 from the previous draw — e.g. after `row-label-width="auto"`/`col-label-height="auto"` resolves

package/llms/components/lr-histogram.md

@@ -33,8 +33,9 @@ Bins `values` into `bins` equal-width buckets and renders as a bar chart (extend
   `values`/`bins` (memoized per instance, keyed by reference equality on `values` plus the
   normalized `bins`), and `type` always reads back `'bar'` regardless of any assignment. This
   specialist owns its controller because a non-bar type would contradict the derived distribution.
-- All other `LyraChart` properties are inherited and usable: `description`, `grid`, `indexAxis`
-  (`index-axis`), `hiddenDatasets`, `legendPosition` (`legend-position`), `max`, `min`, `plugins`,
+- All other `LyraChart` properties are inherited and usable: `description`, `grid`, `axes`, `compact`, `indexAxis`
+  (`index-axis`), `hiddenDatasets`, `hiddenDatums`, `legendPosition` (`legend-position`),
+  `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`), `max`, `min`, `plugins`,
   `withoutAnimation` (`without-animation`), `withoutLegend` (`without-legend`), `withoutTooltip`
   (`without-tooltip`), `valueFormatter`, `formatter`, `area`, `zoom`, `config`, `height`, `xLabel` (`x-label`),
   `yLabel` (`y-label`), `y2Label` (`y2-label`), `beginAtZero` (`begin-at-zero`),
@@ -46,9 +47,12 @@ maxSamples?)` appends finite raw samples and optionally retains only the newest
 `appendData()` remains a working compatibility adapter (no longer deprecated); prefer
 `appendSamples()` for new code.
 
-**Events:** `lr-zoom`, `lr-datum-activate`, `lr-point-click`, `lr-before-legend-visibility-change` (cancelable), and
+**Events:** `lr-zoom`, `lr-datum-activate`, `lr-point-click`, `lr-before-datum-visibility-change`
+(cancelable), `lr-datum-visibility-change`, `lr-before-legend-visibility-change` (cancelable), and
 `lr-legend-visibility-change` — inherited; `lr-point-click`'s `index` is the bucket index and
 `label` the generated bucket range string (`"lo–hi"`, both bounds at one decimal place).
+The inherited datum-visibility events apply only to radial controllers; the histogram keeps its
+bar controller and dataset legend even with `legend-mode="datum"`.
 
 **Slots:** default JSON configuration script, `data-table`, `center`.
 

package/llms/components/lr-line-chart.md

@@ -25,8 +25,9 @@ Everything else is inherited verbatim from `lr-chart`; each name below has the s
 and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
 of every entry in these lists.**
 
-**Properties:** `description`, `grid`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
-(`legend-position`), `max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
+**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
+(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
+`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
 `stacked`, `withoutAnimation` (`without-animation`),
 `withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
 `yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
@@ -42,6 +43,8 @@ of every entry in these lists.**
 index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
 `lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
 complete `hiddenDatasets` snapshot).
+Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
+`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
 
 **Slots:** default JSON configuration script, `data-table`, `center`.