@aceshooting/lyra-ui 11.2.0 → 12.0.0

package/dist/vue.d.ts

@@ -92,6 +92,7 @@ import type { LyraFlowControls } from './components/data/flow-controls/flow-cont
 import type { LyraFlowMinimap } from './components/data/flow-minimap/flow-minimap.class.js';
 import type { LyraFlowNode } from './components/data/flow-node/flow-node.class.js';
 import type { LyraFlowRunStatus } from './components/data/flow-run-status/flow-run-status.class.js';
+import type { LyraFunnel } from './components/data/funnel/funnel.class.js';
 import type { LyraGauge } from './components/data/gauge/gauge.class.js';
 import type { LyraGraphQueryBuilder, LyraGraphQueryBuilderEventMap } from './components/data/graph-query-builder/graph-query-builder.class.js';
 import type { LyraHeatmap, LyraHeatmapEventMap } from './components/data/heatmap/heatmap.class.js';
@@ -375,7 +376,7 @@ export type LyraAppRailVueProps = LyraVueCustomElement<LyraAppRail, 'forceMode'
     'rail-width-px'?: LyraAppRail['railWidthPx'];
     'storage-key'?: LyraAppRail['storageKey'];
 }>;
-export type LyraAppRailItemVueProps = LyraVueCustomElement<LyraAppRailItem, 'current' | 'disabled' | 'href' | 'locale' | 'strings' | 'target' | 'tooltip', {}, {}, never, '--lr-app-rail-item-active-bg' | '--lr-app-rail-item-active-color' | '--lr-app-rail-item-current-bg' | '--lr-app-rail-item-current-color' | '--lr-app-rail-item-hover-bg' | '--lr-app-rail-item-hover-color', {
+export type LyraAppRailItemVueProps = LyraVueCustomElement<LyraAppRailItem, 'active' | 'current' | 'disabled' | 'href' | 'locale' | 'strings' | 'target' | 'tooltip', {}, {}, never, '--lr-app-rail-item-active-bg' | '--lr-app-rail-item-active-color' | '--lr-app-rail-item-current-bg' | '--lr-app-rail-item-current-color' | '--lr-app-rail-item-hover-bg' | '--lr-app-rail-item-hover-color', {
     'icon-only'?: LyraAttributeValue<boolean>;
 }>;
 export type LyraApprovalQueueVueProps = LyraVueCustomElement<LyraApprovalQueue, 'editable' | 'label' | 'locale' | 'open' | 'requests' | 'selectedInvocationId' | 'strings', {}, LyraApprovalQueueEventMap, 'lr-approval-close' | 'lr-approval-decision' | 'lr-approval-select', '--lr-approval-queue-selected-border', {
@@ -582,7 +583,8 @@ export type LyraCheckpointVueProps = LyraVueCustomElement<LyraCheckpoint, 'check
     'confirm-restore'?: LyraCheckpoint['confirmRestore'];
 }>;
 export type LyraChipVueProps = LyraVueCustomElement<LyraChip, 'disabled' | 'locale' | 'pill' | 'removable' | 'selected' | 'size' | 'strings' | 'toggleable' | 'value' | 'variant', {}, LyraChipEventMap, 'lr-chip-select' | 'lr-remove', '--lr-chip-accent' | '--lr-chip-bg' | '--lr-chip-border' | '--lr-chip-font-size' | '--lr-chip-gap' | '--lr-chip-height' | '--lr-chip-icon-size' | '--lr-chip-min-height' | '--lr-chip-padding-block' | '--lr-chip-padding-inline' | '--lr-chip-pressed-bg' | '--lr-chip-pressed-border' | '--lr-chip-radius', {}>;
-export type LyraChipGroupVueProps = LyraVueCustomElement<LyraChipGroup, 'locale' | 'maxVisible' | 'strings', {}, LyraChipGroupEventMap, 'lr-overflow-toggle', '--lr-chip-group-overflow-expanded-border-style' | '--lr-chip-group-overflow-expanded-color', {
+export type LyraChipGroupVueProps = LyraVueCustomElement<LyraChipGroup, 'accessibleLabel' | 'locale' | 'maxVisible' | 'strings', {}, LyraChipGroupEventMap, 'lr-overflow-toggle', '--lr-chip-group-overflow-expanded-border-style' | '--lr-chip-group-overflow-expanded-color', {
+    'aria-label'?: LyraChipGroup['accessibleLabel'];
     'max-visible'?: LyraChipGroup['maxVisible'];
 }>;
 export type LyraChunkInspectorVueProps = LyraVueCustomElement<LyraChunkInspector, 'activeChunkId' | 'chunks' | 'compact' | 'label' | 'locale' | 'sort' | 'strings' | 'thresholds' | 'virtualizeAt', {}, LyraChunkInspectorEventMap, 'lr-chunk-open' | 'lr-expand', '--lr-chunk-inspector-current-bg' | '--lr-chunk-inspector-current-color', {
@@ -975,6 +977,10 @@ export type LyraFormatNumberVueProps = LyraVueCustomElement<LyraFormatNumber, 'c
     'no-grouping'?: LyraFormatNumber['noGrouping'];
     'without-grouping'?: LyraFormatNumber['withoutGrouping'];
 }>;
+export type LyraFunnelVueProps = LyraVueCustomElement<LyraFunnel, 'comparison' | 'comparisonLabel' | 'dropoff' | 'label' | 'locale' | 'sharePrecision' | 'stages' | 'strings', {}, {}, never, '--lr-funnel-bar-color' | '--lr-funnel-bar-size' | '--lr-funnel-comparison-color' | '--lr-funnel-track-color', {
+    'comparison-label'?: LyraFunnel['comparisonLabel'];
+    'share-precision'?: LyraFunnel['sharePrecision'];
+}>;
 export type LyraGaugeVueProps = LyraVueCustomElement<LyraGauge, 'label' | 'locale' | 'max' | 'min' | 'shape' | 'strings' | 'value' | 'valueText', {}, {}, never, '--lr-gauge-fill', {
     'value-text'?: LyraGauge['valueText'];
 }>;
@@ -1017,7 +1023,7 @@ export type LyraHandoffDividerVueProps = LyraVueCustomElement<LyraHandoffDivider
     'from-agent'?: LyraHandoffDivider['fromAgent'];
     'to-agent'?: LyraHandoffDivider['toAgent'];
 }>;
-export type LyraHeatmapVueProps = LyraVueCustomElement<LyraHeatmap, 'accessibleCells' | 'annotations' | 'bucketCount' | 'cellColor' | 'cellInteractive' | 'cellSize' | 'cellText' | 'colLabelHeight' | 'colLabelRotation' | 'colorSteps' | 'data' | 'domain' | 'fitToWidth' | 'legendStops' | 'locale' | 'maxCellSize' | 'midpoint' | 'minCellSize' | 'rowLabelWidth' | 'scale' | 'selectedCell' | 'strings' | 'valueLabel', {}, LyraHeatmapEventMap, 'lr-cell-click' | 'lr-matrix-geometry-change', '--lr-heatmap-annotation-color' | '--lr-heatmap-color-steps-gradient' | '--lr-heatmap-focus-ring-color' | '--lr-heatmap-label-font' | '--lr-heatmap-no-data-fill' | '--lr-heatmap-scale-hi' | '--lr-heatmap-scale-lo' | '--lr-heatmap-selected-color' | '--lr-heatmap-tooltip-bg' | '--lr-heatmap-tooltip-text', {
+export type LyraHeatmapVueProps = LyraVueCustomElement<LyraHeatmap, 'accessibleCells' | 'annotations' | 'bucketCount' | 'cellColor' | 'cellInteractive' | 'cellSize' | 'cellText' | 'colLabelHeight' | 'colLabelRotation' | 'colorSteps' | 'data' | 'domain' | 'fitToWidth' | 'legendStops' | 'locale' | 'maxCellSize' | 'midpoint' | 'minCellSize' | 'rowLabelWidth' | 'scale' | 'selectedCell' | 'stickyLabels' | 'strings' | 'valueLabel', {}, LyraHeatmapEventMap, 'lr-cell-click' | 'lr-matrix-geometry-change', '--lr-heatmap-annotation-color' | '--lr-heatmap-color-steps-gradient' | '--lr-heatmap-focus-ring-color' | '--lr-heatmap-grid-max-block-size' | '--lr-heatmap-label-font' | '--lr-heatmap-no-data-fill' | '--lr-heatmap-scale-hi' | '--lr-heatmap-scale-lo' | '--lr-heatmap-selected-color' | '--lr-heatmap-sticky-label-bg' | '--lr-heatmap-tooltip-bg' | '--lr-heatmap-tooltip-text', {
     'accessible-cells'?: LyraHeatmap['accessibleCells'];
     'bucket-count'?: LyraHeatmap['bucketCount'];
     'cell-size'?: LyraHeatmap['cellSize'];
@@ -1027,6 +1033,7 @@ export type LyraHeatmapVueProps = LyraVueCustomElement<LyraHeatmap, 'accessibleC
     'max-cell-size'?: LyraHeatmap['maxCellSize'];
     'min-cell-size'?: LyraHeatmap['minCellSize'];
     'row-label-width'?: LyraHeatmap['rowLabelWidth'];
+    'sticky-labels'?: LyraHeatmap['stickyLabels'];
     'value-label'?: LyraHeatmap['valueLabel'];
 }>;
 export type LyraHighlightLayerVueProps = LyraVueCustomElement<LyraHighlightLayer, 'activeHighlightId' | 'interactive' | 'items' | 'locale' | 'strings', {}, LyraHighlightLayerEventMap, 'lr-highlight-activate', '--lr-highlight-layer-accent-background' | '--lr-highlight-layer-accent-outline' | '--lr-highlight-layer-danger-background' | '--lr-highlight-layer-danger-outline' | '--lr-highlight-layer-flash-background' | '--lr-highlight-layer-neutral-background' | '--lr-highlight-layer-neutral-outline' | '--lr-highlight-layer-success-background' | '--lr-highlight-layer-success-outline' | '--lr-highlight-layer-warning-background' | '--lr-highlight-layer-warning-outline', {
@@ -1978,7 +1985,7 @@ export type LyraVoicePickerVueProps = LyraVueCustomElement<LyraVoicePicker, 'all
     'inputmode'?: LyraVoicePicker['inputMode'];
     'value'?: LyraVoicePicker['defaultValue'];
 }>;
-export type LyraWidgetVueProps = LyraVueCustomElement<LyraWidget, 'accessibleLabel' | 'activeViewId' | 'backdropInset' | 'collapsed' | 'collapsible' | 'compact' | 'expandable' | 'fullscreen' | 'fullscreenInset' | 'label' | 'locale' | 'storageKey' | 'strings' | 'sublabel' | 'views', {}, LyraWidgetEventMap, 'lr-collapse-change' | 'lr-collapse-request' | 'lr-fullscreen-change' | 'lr-fullscreen-request' | 'lr-view-change' | 'lr-view-request', '--lr-scroll-fade-size' | '--lr-widget-backdrop-inset' | '--lr-widget-fullscreen-inset' | '--lr-widget-overlay-color' | '--lr-widget-view-toggle-active-bg' | '--lr-widget-view-toggle-active-border-color' | '--lr-widget-view-toggle-active-color' | '--lr-widget-view-toggle-hover-bg' | '--lr-widget-view-toggle-hover-color', {
+export type LyraWidgetVueProps = LyraVueCustomElement<LyraWidget, 'accessibleLabel' | 'activeView' | 'activeViewId' | 'backdropInset' | 'collapsed' | 'collapsible' | 'compact' | 'expandable' | 'fullscreen' | 'fullscreenInset' | 'label' | 'locale' | 'storageKey' | 'strings' | 'sublabel' | 'views', {}, LyraWidgetEventMap, 'lr-collapse-change' | 'lr-collapse-request' | 'lr-fullscreen-change' | 'lr-fullscreen-request' | 'lr-view-change' | 'lr-view-request', '--lr-scroll-fade-size' | '--lr-widget-backdrop-inset' | '--lr-widget-fullscreen-inset' | '--lr-widget-overlay-color' | '--lr-widget-view-toggle-active-bg' | '--lr-widget-view-toggle-active-border-color' | '--lr-widget-view-toggle-active-color' | '--lr-widget-view-toggle-hover-bg' | '--lr-widget-view-toggle-hover-color', {
     'aria-label'?: LyraWidget['accessibleLabel'];
     'backdrop-inset'?: LyraWidget['backdropInset'];
     'fullscreen-inset'?: LyraWidget['fullscreenInset'];
@@ -2117,6 +2124,7 @@ export interface LyraVueGlobalComponents {
     'lr-format-bytes': LyraFormatBytesVueProps;
     'lr-format-date': LyraFormatDateVueProps;
     'lr-format-number': LyraFormatNumberVueProps;
+    'lr-funnel': LyraFunnelVueProps;
     'lr-gauge': LyraGaugeVueProps;
     'lr-generation-metrics': LyraGenerationMetricsVueProps;
     'lr-geojson-view': LyraGeojsonViewVueProps;

package/llms/components/lr-app-rail-item.md

@@ -6,7 +6,8 @@
 - **Class** `LyraAppRailItem`, also available unregistered from `@aceshooting/lyra-ui/components/layout/app-rail/app-rail-item.class.js`
 - **Family** `components/layout/` — see `llms/index.md` for its siblings
 - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md`
-- **Deprecations** none
+- **Deprecated attribute** `active` since `11.2.0`; use attribute `current`; removal not before `13.0.0` — The attribute half of the restored `active` property alias. `active` was this member's original public name in both forms; the rename to `current` was never announced, so markup that already wrote `<lr-app-rail-item active>` stopped marking the item current with no error. Shares the property record's compatibility window because it is the same correction.
+- **Deprecated property** `active` since `11.2.0`; use property `current`; removal not before `13.0.0` — `active` was this property's original public name and was documented as such when it shipped. It was renamed to `current` with no changelog entry, no alias and no deprecation record, so every shipped consumer's `.active=` binding silently became a dead expando -- a Lit property binding on a custom element is untyped, so nothing in a consumer's type check, test suite or build could see it. The measured downstream effect was an app rail with no current-item indicator and a permanent aria-current="false". Restoring the name is a correction, not a new API, so the compatibility window runs long: this alias is what shipped consumers already wrote.
 - **Optional peers** none
 - **Themeable via** 4 parts, 6 custom properties — see this component's own `@csspart`/`@cssprop` list below
 - **Documented with** `lr-app-rail` (same section below)
@@ -253,6 +254,12 @@ removing the label from the accessibility tree.
   reflects `aria-current="page"` on `[part='base']` and drives the current visual treatment. The rail
   has no built-in routing, so the consumer sets this per item (e.g. by comparing `href` against the
   current location).
+- `active: boolean = false` — **deprecated alias for `current`**, read alongside it: the item is
+  current when either is true. `active` was this member's original public name, in both property and
+  attribute form; it was renamed to `current` without an alias, so shipped consumers writing
+  `.active=${…}` or `<lr-app-rail-item active>` silently lost their current-item indicator and kept a
+  permanent `aria-current="false"`. A Lit property binding on a custom element is untyped, so nothing
+  in a consumer's type check or test suite could catch it. Prefer `current` in new code.
 - `tooltip: boolean = false` (reflected) — opt-in hover/focus flyout (`[part='tooltip']`) showing
   this item's label text while the rail's `icon-only` mode (set externally by the parent
   `<lr-app-rail>` as the viewport narrows) hides it from view. No effect outside icon-only mode,

package/llms/components/lr-app-rail.md

@@ -253,6 +253,12 @@ removing the label from the accessibility tree.
   reflects `aria-current="page"` on `[part='base']` and drives the current visual treatment. The rail
   has no built-in routing, so the consumer sets this per item (e.g. by comparing `href` against the
   current location).
+- `active: boolean = false` — **deprecated alias for `current`**, read alongside it: the item is
+  current when either is true. `active` was this member's original public name, in both property and
+  attribute form; it was renamed to `current` without an alias, so shipped consumers writing
+  `.active=${…}` or `<lr-app-rail-item active>` silently lost their current-item indicator and kept a
+  permanent `aria-current="false"`. A Lit property binding on a custom element is untyped, so nothing
+  in a consumer's type check or test suite could catch it. Prefer `current` in new code.
 - `tooltip: boolean = false` (reflected) — opt-in hover/focus flyout (`[part='tooltip']`) showing
   this item's label text while the rail's `icon-only` mode (set externally by the parent
   `<lr-app-rail>` as the viewport narrows) hides it from view. No effect outside icon-only mode,

package/llms/components/lr-chip-group.md

@@ -180,6 +180,13 @@ no `.items` array prop).
 
 **Properties:**
 
+- `accessibleLabel: string = ''` (attribute `aria-label`) — accessible name for the group,
+  forwarded to `[part='base']`, which carries `role='group'` whenever a name is supplied. Supply
+  one for any chip row that means something as a set (a filter row, a tag list); without it the
+  container stays roleless, because an unnamed group role adds verbosity without information.
+  A host `aria-label` does **not** reach a shadow root on its own — this property is what makes it
+  reach `[part='base']`, the element that owns the role. Mirrors how `lr-radio-group` and
+  `lr-segmented` name their own `radiogroup`.
 - `maxVisible?: number` (attribute `max-visible`) — maximum number of assigned children shown before
   the rest collapse behind a "+N" indicator; flattened slot-forwarded children count the same as
   direct children. Author-hidden or inert children do not consume capacity or inflate the hidden

package/llms/components/lr-chip.md

@@ -180,6 +180,13 @@ no `.items` array prop).
 
 **Properties:**
 
+- `accessibleLabel: string = ''` (attribute `aria-label`) — accessible name for the group,
+  forwarded to `[part='base']`, which carries `role='group'` whenever a name is supplied. Supply
+  one for any chip row that means something as a set (a filter row, a tag list); without it the
+  container stays roleless, because an unnamed group role adds verbosity without information.
+  A host `aria-label` does **not** reach a shadow root on its own — this property is what makes it
+  reach `[part='base']`, the element that owns the role. Mirrors how `lr-radio-group` and
+  `lr-segmented` name their own `radiogroup`.
 - `maxVisible?: number` (attribute `max-visible`) — maximum number of assigned children shown before
   the rest collapse behind a "+N" indicator; flattened slot-forwarded children count the same as
   direct children. Author-hidden or inert children do not consume capacity or inflate the hidden

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

@@ -133,9 +133,21 @@ default). An inherited or direct public value remains authoritative in every tie
 Text field + calendar popover, **form-associated** via the shared `FormAssociated` mixin (`name`,
 `value`, `disabled`, `required` all inherited).
 
-**Properties (42):**
+**Properties (44):**
 
 - `appearance: 'filled'|'outlined'|'filled-outlined' = 'outlined'` (reflected)
+- `appliedPreset: LyraDateRangePreset | undefined` (read-only, new in 11.3.0) — the `presets` entry
+  whose button produced the current `value`, or `undefined` when the value was picked on the
+  calendar, typed into the field, cleared, or reset. Read it inside your own `change`/`input`
+  handler; it is updated before those events are relayed, so a handler observes the preset that
+  caused the very commit it is handling, and it is `undefined` while the popover has never been
+  opened. Mirrors the nested `lr-date-picker`'s identically-named property across this component's
+  shadow boundary, which is where the readback is actually needed: the compact
+  text-field-plus-popover shape is the one a dashboard filter uses, the nested picker instance is
+  unreachable from outside (a CSS part cannot yield it), and the fact is not recoverable from
+  `value` — re-deriving it by string-matching is the mapping table `presets` exists to delete and is
+  ambiguous anyway. A property rather than an event detail because `input`/`change` here are
+  **native** events that cannot carry one
 - `assumeInteractionOn: string[] = ['input']` (JS only)
 - `autocomplete: string = ''`
 - `dayContent?: LyraDatePickerDayContent` (JS only)
@@ -160,6 +172,12 @@ Text field + calendar popover, **form-associated** via the shared `FormAssociate
 - `pill: boolean = false` (reflected)
 - `placement: LyraDateInputPlacement = 'bottom-start'` (reflected; all 12 side/alignment
   placements are accepted)
+- `presets: LyraDateRangePreset[] = []` (JS only, new in 11.1.0) — forwarded verbatim to the nested
+  `lr-date-picker`, whose own `presets` documents the semantics (range mode only, open bounds
+  resolving to `min`/`max`, unset renders nothing). Forwarded rather than reimplemented because the
+  picker lives in this component's shadow root, so a consumer has no route to it. The row's parts
+  are re-exported as `presets`/`preset-button`, and `appliedPreset` above reports which entry
+  produced the current value
 - `readonly: boolean = false` and `required: boolean = false` (reflected)
 - `size: LyraSize = 'm'` (reflected; `2xs`–`xl` and aliases)
 - `today: string = ''` (reflected ISO override)

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

@@ -133,9 +133,21 @@ default). An inherited or direct public value remains authoritative in every tie
 Text field + calendar popover, **form-associated** via the shared `FormAssociated` mixin (`name`,
 `value`, `disabled`, `required` all inherited).
 
-**Properties (42):**
+**Properties (44):**
 
 - `appearance: 'filled'|'outlined'|'filled-outlined' = 'outlined'` (reflected)
+- `appliedPreset: LyraDateRangePreset | undefined` (read-only, new in 11.3.0) — the `presets` entry
+  whose button produced the current `value`, or `undefined` when the value was picked on the
+  calendar, typed into the field, cleared, or reset. Read it inside your own `change`/`input`
+  handler; it is updated before those events are relayed, so a handler observes the preset that
+  caused the very commit it is handling, and it is `undefined` while the popover has never been
+  opened. Mirrors the nested `lr-date-picker`'s identically-named property across this component's
+  shadow boundary, which is where the readback is actually needed: the compact
+  text-field-plus-popover shape is the one a dashboard filter uses, the nested picker instance is
+  unreachable from outside (a CSS part cannot yield it), and the fact is not recoverable from
+  `value` — re-deriving it by string-matching is the mapping table `presets` exists to delete and is
+  ambiguous anyway. A property rather than an event detail because `input`/`change` here are
+  **native** events that cannot carry one
 - `assumeInteractionOn: string[] = ['input']` (JS only)
 - `autocomplete: string = ''`
 - `dayContent?: LyraDatePickerDayContent` (JS only)
@@ -160,6 +172,12 @@ Text field + calendar popover, **form-associated** via the shared `FormAssociate
 - `pill: boolean = false` (reflected)
 - `placement: LyraDateInputPlacement = 'bottom-start'` (reflected; all 12 side/alignment
   placements are accepted)
+- `presets: LyraDateRangePreset[] = []` (JS only, new in 11.1.0) — forwarded verbatim to the nested
+  `lr-date-picker`, whose own `presets` documents the semantics (range mode only, open bounds
+  resolving to `min`/`max`, unset renders nothing). Forwarded rather than reimplemented because the
+  picker lives in this component's shadow root, so a consumer has no route to it. The row's parts
+  are re-exported as `presets`/`preset-button`, and `appliedPreset` above reports which entry
+  produced the current value
 - `readonly: boolean = false` and `required: boolean = false` (reflected)
 - `size: LyraSize = 'm'` (reflected; `2xs`–`xl` and aliases)
 - `today: string = ''` (reflected ISO override)

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

@@ -52,7 +52,8 @@ value therefore stays inside a 320px LTR or RTL bar, with the chip's own label e
 overflow ownership rather than widening the page.
 
 Each edit exposes one filter-bar `lr-input` carrying a detached, deeply frozen snapshot of the
-complete value object. A built-in or
+complete value object, plus the `filterId` that changed and (new in 11.3.0) `appliedPreset` — see
+"Date-range quick ranges" below. A built-in or
 custom control's own `lr-input`/`lr-change` aliases stay inside the wrapper so their incompatible
 detail shapes cannot escape as duplicate bar events; native-style `input`/`change` events from the
 composed controls continue bubbling normally.
@@ -102,6 +103,54 @@ to `<lr-input>` for an open-ended free-text query rather than a closed choice se
 filter's value is the raw query string, verbatim, and its chip shows exactly that string — the same
 text the user typed, not a truncated or normalized form.
 
+### Date-range quick ranges
+
+A `'date-range'` definition also accepts `presets?: readonly LyraDateRangePreset[]` (new in 11.3.0),
+forwarded to its composed `<lr-date-input>` exactly like `min`/`max`, so the quick-range row
+("Today", "Last 7 days", "All time") renders inside that filter's own calendar popover. Entries are
+`LyraDateRangePreset { label, start?, end? }` with ISO `YYYY-MM-DD` bounds; an omitted bound is open
+and resolves to the filter's `min`/`max`, and an open bound with no corresponding limit renders that
+button disabled. `presets` is deliberately **not** accepted on a single `'date'` filter: a preset
+names two dates, so `lr-date-picker` ignores the list outside range mode, and a list passed there is
+dropped rather than rendering a row that cannot do anything.
+
+The `lr-input` emitted by such a commit carries `appliedPreset`, the definition entry whose button
+produced it — the bar's own frozen snapshot, so it compares identical to `filters[i].presets[j]`. It
+is `undefined` for every other filter type and for a range picked or typed by hand. A filter bar
+whose values round-trip through a query string needs it because `value` holds only the frozen ISO
+range: persisting "Last 7 days" as a preset id keeps it meaning the last 7 days after the next
+reload, and re-deriving it by string-matching `value` is both the mapping table `presets` exists to
+delete and ambiguous (Today and This month coincide on the 1st). It rides the event rather than
+`value` because it is metadata about one edit, not a filter value — `value` stays the plain,
+JSON-serializable record it has always been.
+
+```ts
+const filters: LyraFilterBarFilterDefinition[] = [
+  {
+    filterId: "period",
+    label: "Reporting period",
+    type: "date-range",
+    min: "2020-01-01",
+    max: "2030-12-31",
+    presets: [
+      { label: "Last 7 days", start: "2026-08-13", end: "2026-08-19" },
+      { label: "This month", start: "2026-08-01", end: "2026-08-31" },
+      { label: "All time" },
+    ],
+  },
+];
+
+bar.addEventListener("lr-input", (event) => {
+  const { value, filterId, appliedPreset } = event.detail;
+  persist({ ...value, periodPreset: appliedPreset?.label });
+});
+```
+
+Before this, the only way to give a filter-bar date range a quick-range row was `type: 'custom'`,
+which means hand-rendering an `lr-date-input` plus a full adapter (`clearValue`, `isEmpty`,
+`formatValue`) to set one property, and forfeits the built-in date-range chip localization described
+next.
+
 Date chips localize exactly one round-trip-valid ISO `YYYY-MM-DD` segment; date-range chips require
 exactly two slash-separated segments. Four-digit
 years `0000`–`0099` retain those literal years rather than inheriting JavaScript's 1900 offset;

package/llms/components/lr-flag.md

@@ -219,6 +219,20 @@ import "@aceshooting/lyra-ui/components/media/flag/flag-peer.js";
   unneeded 249-entry fetch. Only the standard tier is bulk-fetched this way;
   `fidelity="compact"/"detailed"` on individual elements still resolves through its own lazy
   per-code loader.
+- Rendering many flags at once **and** leaving every `<lr-flag>` on the default
+  `fidelity="standard"`: import
+  `@aceshooting/lyra-ui/components/media/flag/flag-peer-bulk-standard.js` instead of
+  `flag-peer-bulk.js` (never more than one of the three peer entries — each
+  `setFlagUrlResolver()` call replaces the previous resolver). It registers
+  `@aceshooting/lyra-flags/standard`'s `createFlagUrlResolver()`, which is backed by the same
+  standard-tier-only eager map as the root's, without statically importing the detailed and
+  compact loader maps the root entry needs for its per-call `variant`. Those maps are what
+  `flag-peer-bulk.js` pays for its batching: on a real production build with a 156-country flag
+  column, routing bulk resolution through the package root emitted +65 detailed SVGs and +31
+  compact WebPs — +15.8MB of assets no route rendered — swamping the chunk-count win the bulk path
+  exists for. The tradeoff is the tier commitment: `fidelity="compact"/"detailed"` on an individual
+  element resolves to that code's standard asset instead (a silent no-op, not an error), so use
+  `flag-peer-bulk.js` when per-instance fidelity must actually be honoured.
 - 65 of `@aceshooting/lyra-flags`' 249 flags (any whose design includes a detailed coat of
   arms/seal/emblem, e.g. `es`, `pt`, `sv`) ship **three** fidelity tiers, selected via the
   `fidelity` property (`flagUrl(code, { variant: fidelity })` under the hood): `"compact"` — a tiny WebP raster for

package/llms/components/lr-funnel.md

@@ -0,0 +1,122 @@
+<!-- GENERATED by scripts/build-llms.mjs from llms/data.md — do not edit this file. -->
+
+# `lr-funnel`
+
+- **Import** `import '@aceshooting/lyra-ui/components/lr-funnel.js';` (stable tag alias; registers the tag)
+- **Class** `LyraFunnel`, also available unregistered from `@aceshooting/lyra-ui/components/data/funnel/funnel.class.js`
+- **Family** `components/data/` — see `llms/index.md` for its siblings
+- **Status** `experimental` since `12.0.0` — see the maturity and deprecation policy in `llms/shared.md`
+- **Deprecations** none
+- **Optional peers** none
+- **Themeable via** 14 parts, 4 custom properties — see this component's own `@csspart`/`@cssprop` list below
+- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
+
+---
+
+## `lr-funnel`
+
+Dependency-free conversion funnel (no charting library): an ordered set of stages, each drawn as a
+bar whose length is that stage's share of the **first** stage, read top-to-bottom as progressive
+drop-off. It sits beside `lr-gauge` and `lr-heatmap` as an analytics primitive rather than a general
+chart type.
+
+It is deliberately not a sorted bar chart: it normalizes to the first stage rather than to the data
+maximum, draws no value axis, and reads as stage-to-stage retention rather than category comparison.
+Reach for `lr-bar-chart`/`lr-lite-chart` when you actually want a value axis and category comparison.
+
+The whole chart is plain HTML — stage names, absolute values, shares and drop-off percentages are
+real text inside an `<ol>`, so there is no sighted-only drawing needing a separate transcript. The
+list carries the accessible name; a host `aria-label` overrides `label`.
+
+**Properties:**
+
+- `stages: readonly LyraFunnelStage[] = []` (property only; every share is measured against
+  `stages[0]`)
+- `comparison: readonly LyraFunnelStage[] = []` (property only — an optional baseline/peer cohort
+  drawn behind each bar as a dashed outline, normalized to **its own** first stage so a cohort's
+  funnel *shape* stays comparable against a baseline whose absolute volumes are not)
+- `comparisonLabel: string = ''` (attribute `comparison-label`; falls back to a localized generic
+  label)
+- `label: string = ''` (accessible name for the stage list)
+- `dropoff: boolean = true` (reflected; `dropoff="false"` in markup really does turn it off —
+  the property uses the explicit `false`-parsing converter, not attribute presence)
+- `sharePrecision: number = 0` (attribute `share-precision`; fraction digits for every share and
+  drop-off percentage, clamped to `0`–`20`)
+
+```ts
+interface LyraFunnelStage {
+  readonly label: string;
+  readonly value: number;
+  readonly color?: string; // CSS color; unparseable values fall back to --lr-funnel-bar-color
+}
+```
+
+**Events:** none.
+
+**Slots:** none.
+
+**CSS parts:** `base`, `stages` (the `<ol>`), `stage`, `dropoff`, `stage-header`, `stage-label`,
+`stage-value`, `stage-share`, `comparison-value`, `track`, `bar`, `bar-overflow` (a second token on
+`bar` when the stage exceeds the first stage), `comparison-bar`, `empty`
+
+**Themeable custom properties:** `--lr-funnel-bar-color` (default `var(--lr-color-brand)`),
+`--lr-funnel-comparison-color` (default `var(--lr-color-border-strong)`), `--lr-funnel-track-color`
+(default `var(--lr-color-surface-raised)`), `--lr-funnel-bar-size` (track thickness, default
+`var(--lr-size-1-5rem)`).
+
+**Optional peer deps:** none.
+
+```html
+<script type="module">
+  import '@aceshooting/lyra-ui/components/data/funnel/funnel.js';
+</script>
+
+<lr-funnel id="signup" label="Self-serve signup" share-precision="1"></lr-funnel>
+
+<script type="module">
+  const funnel = document.querySelector('#signup');
+  funnel.stages = [
+    { label: 'Visited pricing', value: 12480 },
+    { label: 'Started trial', value: 4310 },
+    { label: 'Converted to paid', value: 512 },
+  ];
+  // Normalized to ITS OWN first stage, so a 380-visitor account still compares against a
+  // 12,480-visitor peer group.
+  funnel.comparison = [
+    { label: 'Visited pricing', value: 380 },
+    { label: 'Started trial', value: 141 },
+    { label: 'Converted to paid', value: 12 },
+  ];
+  funnel.comparisonLabel = 'Acme Corp';
+</script>
+```
+
+**Known gotchas:**
+
+- **Shares are of the first stage, not of the previous one.** `stage-share` answers "how much of the
+  top of the funnel is left here?"; the separate `dropoff` row answers "what changed since the
+  previous stage?". Both are rendered because the percentage is usually the interesting number and
+  the absolute count is the credibility check.
+- **A zero or negative first stage cannot define a share.** Every `stage-share` is omitted, every bar
+  is zero-length, and only the absolute values render. Nothing is silently divided by zero and no
+  `NaN` reaches the geometry.
+- **A stage larger than its predecessor is legal** (funnel re-entry). Its share is reported
+  truthfully above 100% in text, while the bar clamps to the track and gains the `bar-overflow` part
+  token so you can style it. Drop-off for that stage reads as an increase.
+- **Drop-off is omitted, not zeroed, when the previous stage is non-positive** — a change relative to
+  zero is undefined.
+- **A comparison series of a different length pairs by index.** Extra comparison entries are ignored;
+  stages past its end simply get no comparison bar. A comparison series whose own first value is
+  zero or negative draws nothing.
+- **Non-finite `value`s are treated as `0`** rather than blanking the stage, so one bad row cannot
+  take the chart with it.
+- Values, shares and drop-off percentages all format through the component's effective locale
+  (`locale` attribute, or an inherited one) — never a hardcoded `en`.
+- Bars grow from the inline-start edge and every dimension is a logical property, so `dir="rtl"`
+  needs no extra work. The component never sets its own `dir`.
+- Layout responds to the **container** (`container-type: inline-size` on `base`), not the viewport:
+  below roughly `18rem` of allocated width the stage name moves to its own line so the value and
+  share stay together. Bar motion is a token-driven transition that stops under
+  `prefers-reduced-motion`.
+- No events, no interaction model, no zoom/pan. If you need a clickable funnel, wrap the element and
+  handle clicks yourself.

package/llms/components/lr-heatmap.md

@@ -8,7 +8,7 @@
 - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md`
 - **Deprecations** none
 - **Optional peers** none
-- **Themeable via** 15 parts, 10 custom properties — see this component's own `@csspart`/`@cssprop` list below
+- **Themeable via** 18 parts, 12 custom properties — see this component's own `@csspart`/`@cssprop` list below
 - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
 
 ---
@@ -98,6 +98,38 @@ weekdayLabelText?: (jsWeekday:number)=>string|undefined; monthLabelText?:
   `colLabelHeight="auto"` to have the band size itself to the rotated extent. **Not mirrored under
   `dir="rtl"`** — both grid modes deliberately retain physical LTR geometry, so leaning one axis'
   labels the other way would be incoherent
+- `stickyLabels: 'none' | 'rows' | 'cols' | 'both' = 'none'` (attribute `sticky-labels`, reflected)
+  — freezes a **matrix** label band against the grid's own scrolling. `'rows'` pins the row-label
+  gutter so it survives horizontal scrolling, `'cols'` pins the column-label band so it survives
+  vertical scrolling, `'both'` pins both. Labels and cells otherwise share one bitmap, so neither
+  band can be `position: sticky` on its own and a tall matrix scrolls its column header out of
+  view; the only workaround was a light-DOM mirror row that had to hardcode the gutter width and
+  cell size, which made it mutually exclusive with `row-label-width="auto"`. A frozen band is
+  repainted into its own layer in the same draw pass, from the same resolved `matrixGeometry` the
+  cells were painted with, so it tracks a `row-label-width`/`col-label-height` `"auto"`
+  re-resolution, a resize, and a DPR change without drifting a pixel. Freezing needs something to
+  scroll, so the frozen modes wrap the grid in a `[part="grid"]` scrollport: it is bounded inline by
+  the host's own allocation — a matrix wider than a 320px host scrolls inside the component instead
+  of overflowing it — and unbounded in block until you set `--lr-heatmap-grid-max-block-size`, which
+  a frozen column band needs in order to have vertical scrolling to stay behind. The bands are
+  `aria-hidden` duplicates of pixels the canvas already painted, so the accessible representation is
+  unchanged, and the `accessibleCells` overlay moves inside the scrollport so the cell buttons
+  scroll with the canvas they cover. The grid keeps this component's physical LTR geometry under
+  `dir="rtl"`, so the frozen gutter stays on the same physical side as the labels the canvas paints.
+  Matrix mode only, like `matrixGeometry`: the property is read in calendar mode but has no effect
+  there, since a calendar's axes are a different geometry (fixed weekday gutter, month band, and the
+  optional `columnX`/`rowY` overrides). Unset (`'none'`, the default) renders exactly what it always
+  did — one canvas, no scrollport, no extra elements — and an unsupported value normalizes to it.
+  The union is re-exported from the package root as `LyraHeatmapStickyLabels`, so a typed consumer
+  can annotate a variable or a framework prop with it. Everything positioned in canvas coordinates
+  moves into the scrollport with the cells: `[part="tooltip"]` renders inside it, so it stays on
+  the cell it describes through a scroll instead of drifting by the scroll offset, and because
+  `overflow: auto` clips whatever leaves the scrollport, the tooltip is kept inside the visible
+  window too — clamped along the inline axis and flipped to below its cell when a frozen band
+  leaves no room above it. Arrow-key navigation scrolls the focused cell into that window, clear of
+  the frozen bands, which the frozen modes need in their own right: the canvas is the roving tab
+  stop, its focus ring is painted into the bitmap rather than carried by a focusable element the
+  browser would scroll to, and it calls `preventDefault()` on the arrows
 - `maxCellSize?: number` (attribute `max-cell-size`) — ceiling, in CSS px, on the cell size
   `fitToWidth` derives from the host width, in **both** modes. Exists because `fitToWidth` divides
   the _whole_ host width across the grid, so a 5-week calendar or a 3-column matrix in a wide pane
@@ -237,9 +269,12 @@ color?: string; label?: string; partOfRamp?: boolean }`: a discrete legend key r
 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,
-in CSS pixels; `undefined` in calendar mode. Lets a light-DOM consumer (e.g. a sticky header mirror
-for a tall matrix) line up with the canvas without hardcoding the same numbers `row-label-width`/
-`col-label-height`'s `"auto"` resolution would otherwise keep private.
+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.
 
 **Events:** `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),
@@ -250,8 +285,12 @@ in calendar mode)
 
 **Slots:** none.
 
-**CSS parts:** `base`, `canvas`, `cells` (opt-in per-cell overlay), `cell` (one opt-in native cell
-button), `tooltip` (hover tooltip, positioned over the hovered cell),
+**CSS parts:** `base`, `canvas`, `grid` (the scrollport wrapping the canvas while `stickyLabels`
+freezes an axis — absent entirely otherwise), `row-labels`/`col-labels` (the frozen label bands,
+rendered only for the axis `stickyLabels` names), `cells` (opt-in per-cell overlay), `cell` (one opt-in native cell
+button), `tooltip` (hover tooltip, positioned over the hovered cell — inside `[part="grid"]` while
+`stickyLabels` freezes an axis, so it scrolls with the cells, and a `[part="base"]` child
+otherwise),
 `live-region` (visually-hidden, `aria-hidden` mirror of the keyboard-focused cell; the actual
 announcement uses the shared light-DOM polite sink), `projection-limit` (localized assistive
 disclosure when bounded canonicalization truncates input), `legend`, `legend-lo`, `legend-hi` (both omitted, along with the gradient
@@ -287,7 +326,12 @@ dedicated token distinct from both the focus ring and the annotation ring so a h
 independently). `--lr-heatmap-tooltip-bg` (default
 `var(--lr-color-surface)`) and `--lr-heatmap-tooltip-text` (default `var(--lr-color-text)`) —
 unlike the canvas-drawn tokens above, `[part="tooltip"]` is a real DOM element and consumes these
-directly, no `getComputedStyle` bridging needed. Also consumes `--lr-color-text-quiet` (axis label
+directly, no `getComputedStyle` bridging needed. `--lr-heatmap-sticky-label-bg` (default
+`var(--lr-color-surface)` — the backdrop painted under a frozen `stickyLabels` band, resolved via
+`getComputedStyle` like the other canvas-drawn tokens; it must stay **opaque**, since it covers the
+same labels the scrolling canvas painted underneath it) and `--lr-heatmap-grid-max-block-size`
+(default `none` — the block-size ceiling of the `[part="grid"]` scrollport, consumed directly by
+that real DOM element; set it to give a frozen column band vertical scrolling to stay behind). Also consumes `--lr-color-text-quiet` (axis label
 color), `--lr-space-xs`, `--lr-radius`/`--lr-shadow` (tooltip box), and `--lr-focus-ring-width`/
 `--lr-focus-ring-offset` (the real `[part="canvas"]:focus-visible` DOM outline, stroked in the
 same color as `--lr-heatmap-focus-ring-color`).