@aceshooting/lyra-ui 14.1.0 → 14.2.0

package/llms/components/lr-slider.md

@@ -9,7 +9,7 @@
 - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt)
 - **Deprecations** none
 - **Optional peers** none
-- **Themeable via** 25 parts, 24 custom properties — see this component's own `@csspart`/`@cssprop` list below
+- **Themeable via** 26 parts, 24 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`
 
 ---
@@ -113,6 +113,15 @@ single numeric string entry.
 - `showValue: boolean = false` (attribute `show-value`) — opt-in numeric readout next to the track;
   a range readout joins both values with an en dash. The explicit HTML spelling
   `show-value="false"` stays false.
+- `valueDisplay: SliderValueDisplay = 'numeric'` (attribute `value-display`) — `'numeric' |
+  'formatted'`. Opt into `formatted` to reuse `valueFormatter` (or `tooltipFormatter` when no
+  value formatter is supplied) for the visible readout too. Each range handle is formatted
+  separately; nullish results fall back to localized numbers. Existing ARIA and tooltip behavior
+  is unchanged. The callback owns its unit labels and locale formatting.
+- `valuePlacement: SliderValuePlacement = 'inline'` (attribute `value-placement`) — `'inline' |
+  'label'`. With `showValue`, `label` places the readout opposite the label in a wrapping row that
+  follows RTL. The readout stays outside the accessible label. These presentation options update
+  on live `lr-input` changes without changing the commit-only `lr-change` contract.
 - `value: number = 0`, `defaultValue: number = 0` (attribute `value`), `valueAsNumber: number`, and
   `valueAsString: string` are synchronized and finite. Values normalize the low/high domain, snap
   to the grid anchored at the low endpoint, then clamp so a non-grid endpoint remains reachable;
@@ -165,7 +174,8 @@ live value bubble per handle, present only with `with-tooltip`), `tooltip-visibl
 `tooltip` element's part list_ while that handle is focused or dragged — visibility is encoded in
 the part name because `::part(tooltip)[data-visible]` is invalid CSS and never matches; write
 `::part(tooltip-visible)`). The tooltip also exposes `tooltip__tooltip`, `tooltip__content`, and
-`tooltip__arrow`. `value` is the opt-in numeric readout.
+`tooltip__arrow`. `value` is the opt-in readout; `label-row` contains the separate label and value
+nodes when `showValue` and `valuePlacement="label"` are enabled.
 
 **CSS custom states:** `disabled`, `dragging`, `focused`, `required`, `optional`, `valid`,
 `invalid`, `user-valid`, and `user-invalid`. A slider always has a finite numeric value, so
@@ -270,8 +280,14 @@ is present for upstream form-surface parity but adds no missing-value constraint
   value); ArrowUp/ArrowDown are never swapped, since direction only affects the horizontal inline axis.
 - Changing `min`/`max`/`step` after mount automatically re-clamps/re-snaps the current `value` in the
   next update — narrowing the domain can silently move the slider's value.
-- `valueFormatter` is presentation-only: `aria-valuenow`, the visible numeric readout, geometry,
-  form value, and emitted values stay numeric. With no formatter, `aria-valuetext` remains the
+- `valueFormatter` is presentation-only: `aria-valuenow`, geometry, form value, and emitted values
+  stay numeric. The visible readout stays numeric unless `valueDisplay="formatted"` is set.
+- Numeric value/domain assignments in the same Lit update batch are normalized against the final
+  `min`, `max`, and `step`, regardless of binding order. Await `updateComplete` to read the settled
+  scalar or range endpoints. Immediate imperative readback remains clamped to the current domain;
+  separate update batches intentionally normalize independently. Programmatic normalization emits
+  no user input/change event.
+  With no formatter, `aria-valuetext` remains the
   numeric string rendered by earlier versions; a nullish formatter result omits it.
 - A pointer drag fires `lr-input` continuously and a single `lr-change` on release; a keyboard step
   fires exactly one of each per press, but OS key-repeat while a key is held re-fires `lr-input` on

package/llms-full.txt

@@ -5373,44 +5373,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
@@ -7682,7 +7668,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
@@ -7981,6 +7969,15 @@ single numeric string entry.
 - `showValue: boolean = false` (attribute `show-value`) — opt-in numeric readout next to the track;
   a range readout joins both values with an en dash. The explicit HTML spelling
   `show-value="false"` stays false.
+- `valueDisplay: SliderValueDisplay = 'numeric'` (attribute `value-display`) — `'numeric' |
+  'formatted'`. Opt into `formatted` to reuse `valueFormatter` (or `tooltipFormatter` when no
+  value formatter is supplied) for the visible readout too. Each range handle is formatted
+  separately; nullish results fall back to localized numbers. Existing ARIA and tooltip behavior
+  is unchanged. The callback owns its unit labels and locale formatting.
+- `valuePlacement: SliderValuePlacement = 'inline'` (attribute `value-placement`) — `'inline' |
+  'label'`. With `showValue`, `label` places the readout opposite the label in a wrapping row that
+  follows RTL. The readout stays outside the accessible label. These presentation options update
+  on live `lr-input` changes without changing the commit-only `lr-change` contract.
 - `value: number = 0`, `defaultValue: number = 0` (attribute `value`), `valueAsNumber: number`, and
   `valueAsString: string` are synchronized and finite. Values normalize the low/high domain, snap
   to the grid anchored at the low endpoint, then clamp so a non-grid endpoint remains reachable;
@@ -8033,7 +8030,8 @@ live value bubble per handle, present only with `with-tooltip`), `tooltip-visibl
 `tooltip` element's part list_ while that handle is focused or dragged — visibility is encoded in
 the part name because `::part(tooltip)[data-visible]` is invalid CSS and never matches; write
 `::part(tooltip-visible)`). The tooltip also exposes `tooltip__tooltip`, `tooltip__content`, and
-`tooltip__arrow`. `value` is the opt-in numeric readout.
+`tooltip__arrow`. `value` is the opt-in readout; `label-row` contains the separate label and value
+nodes when `showValue` and `valuePlacement="label"` are enabled.
 
 **CSS custom states:** `disabled`, `dragging`, `focused`, `required`, `optional`, `valid`,
 `invalid`, `user-valid`, and `user-invalid`. A slider always has a finite numeric value, so
@@ -8138,8 +8136,14 @@ is present for upstream form-surface parity but adds no missing-value constraint
   value); ArrowUp/ArrowDown are never swapped, since direction only affects the horizontal inline axis.
 - Changing `min`/`max`/`step` after mount automatically re-clamps/re-snaps the current `value` in the
   next update — narrowing the domain can silently move the slider's value.
-- `valueFormatter` is presentation-only: `aria-valuenow`, the visible numeric readout, geometry,
-  form value, and emitted values stay numeric. With no formatter, `aria-valuetext` remains the
+- `valueFormatter` is presentation-only: `aria-valuenow`, geometry, form value, and emitted values
+  stay numeric. The visible readout stays numeric unless `valueDisplay="formatted"` is set.
+- Numeric value/domain assignments in the same Lit update batch are normalized against the final
+  `min`, `max`, and `step`, regardless of binding order. Await `updateComplete` to read the settled
+  scalar or range endpoints. Immediate imperative readback remains clamped to the current domain;
+  separate update batches intentionally normalize independently. Programmatic normalization emits
+  no user input/change event.
+  With no formatter, `aria-valuetext` remains the
   numeric string rendered by earlier versions; a nullish formatter result omits it.
 - A pointer drag fires `lr-input` continuously and a single `lr-change` on release; a keyboard step
   fires exactly one of each per press, but OS key-repeat while a key is held re-fires `lr-input` on
@@ -9605,6 +9609,14 @@ readonly LyraLocaleEntry[]`, `LyraLocaleEntry { tag: string; label?: string; cou
 - `showFlags: boolean = true` — each row's leading `<lr-flag language={tag} variant="compact">`
   (or `<lr-flag country={country} variant="compact">` when the entry sets `country`); `false`
   omits the flag element entirely (not just visually).
+- `triggerDisplay: LyraLocaleTriggerDisplay = 'flag-label'` (attribute `trigger-display`) —
+  `'flag' | 'label' | 'flag-label'`. The default keeps the flag, label and chevron. `label`
+  omits only the trigger flag; the menu keeps its flags and endonyms. `flag` centers the flag in
+  a square and hides the visible label and chevron. The `trigger-label` remains available to
+  assistive technology and describes the trigger's current language; its accessible name still
+  follows `label`/the host `aria-label`. The square uses the shared/scoped trigger height with a
+  24px floor. `showFlags=false` retains visible text in every mode. Selection, keyboard navigation,
+  form values and the uncommitted effective-locale preview keep their usual behavior.
 - `value: string = ''` — the **committed** selection (form value, drives `lr-change`). While `''`
   and untouched, the trigger _displays_ `effectiveLocale` as a preview label, but
   `checkValidity()`/`required` are governed by the real `value`, which stays `''` until a real
@@ -9668,7 +9680,8 @@ priority until cleared.
 
 **CSS parts:** `form-control`, `form-control-label`, `trigger`,
 `trigger-flag` (the trigger's leading `<lr-flag>` for the current value, present only while
-`showFlags` is on), `listbox`, `option`, `option-flag` (present only while `showFlags` is on),
+`showFlags` is on and `triggerDisplay` is not `label`), `trigger-label` (the current language,
+visually hidden in flag-only mode), `listbox`, `option`, `option-flag` (present only while `showFlags` is on),
 `option-label`, `option-tag` (the row's secondary line — the raw BCP-47 tag), `expand-icon`,
 `hint`, `error`.
 
@@ -9693,6 +9706,11 @@ quiet-brand, and semibold semantic tokens.
 peer warning duplication; `lr-flag` itself already logs one) when the optional
 `@aceshooting/lyra-flags` package isn't installed and `showFlags` is left on.
 
+A compact header can set `trigger-display="flag"` and
+`--lr-locale-picker-trigger-height: 2.25rem` for a 36px square at the usual 16px root size.
+Import `@aceshooting/lyra-ui/components/media/flag/flag-peer.js` to register the optional flag
+resolver. Menu labels stay visible; a per-entry `country` override also reaches the compact trigger.
+
 ```html
 <lr-locale-picker label="Language"></lr-locale-picker>
 <script type="module">
@@ -11660,6 +11678,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
@@ -11774,6 +11806,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
@@ -11865,16 +11935,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.
 
-**Events:** `lr-cell-click` (fired on click, or Enter/Space on the keyboard-focused cell —
+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-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
@@ -14116,6 +14193,11 @@ These named interfaces and helper signatures are available to typed integrations
     date?: string;
   }`
   Import: `@aceshooting/lyra-ui/components/data/heatmap/heatmap.class.js`.
+  `HeatmapSelectionChangeDetail {
+    readonly selectedCells: readonly Readonly<HeatmapSelectedCell>[];
+    readonly source: HeatmapSelectionSource;
+  }`
+  Import: `@aceshooting/lyra-ui/components/data/heatmap/heatmap.class.js`.
   `hexToRgb(hex: string): [number, number, number, number] | null`
   Import: `@aceshooting/lyra-ui/components/data/heatmap/heatmap.class.js`.
   `MatrixCellPos {
@@ -23677,7 +23759,8 @@ string; geojson: GeoJSON.FeatureCollection; field: string; stops: [number, strin
 - `dataLayers: LyraMapGeoJsonDataLayer[] = []` (attribute: false) —
   `LyraMapGeoJsonDataLayer { sourceId: string; geojson: GeoJSON.Feature |
 GeoJSON.FeatureCollection; tone?: 'accent' | 'success' | 'warning' |
-'danger' | 'neutral'; color?: string; strokeColor?: string; kind?: LyraMapDataLayerKind;
+'danger' | 'neutral'; color?: string; strokeColor?: string; line?: LyraMapLineOptions;
+point?: LyraMapPointOptions; kind?: LyraMapDataLayerKind;
 heatmap?: LyraMapHeatmapOptions; cluster?: LyraMapClusterOptions }`. `sourceId` is trimmed and must be nonempty; the first layer for a
   `sourceId` that is successfully admitted wins; blank, malformed, and later duplicate records are
   ignored without reserving an identity for a valid later sibling. Each retained entry adds one
@@ -23762,6 +23845,81 @@ intensity?: LyraMapHeatmapZoomValue; opacity?: number }`, where `LyraMapHeatmapZ
   peer's default untouched on construction, and dropping a previously-authored value restores 1.
   `cluster` is ignored on a heatmap entry: a heatmap already aggregates density, and clustering its
   input would feed it one point per cluster instead of the real distribution.
+  `line?: LyraMapLineOptions { field?: string; stops?: readonly (readonly [number, string])[];
+  width?: number; opacity?: number }` configures line/outline paint for an ordinary `dataLayers`
+  entry. `field` names a numeric feature property; two usable `[value, color]` stops produce a
+  continuous linear ramp. Missing, null, and non-numeric feature values use `strokeColor`, then
+  `color`, then `tone`. Stops inspect the first 64 entries, discard non-finite values and invalid
+  CSS colors, sort ascending, and retain the first duplicate threshold. Fewer than two stops or
+  an absent field preserves flat color. Values beyond the endpoints clamp to their endpoint color.
+  CSS variables resolve on the host during reconciliation and retheming. `width` defaults to 2 CSS
+  pixels and clamps to `[0, 200]`; `opacity` defaults to 1 and clamps to `[0, 1]`. Non-finite values
+  restore those defaults, as does dropping a previously-authored option. Point colors and polygon
+  fills are unaffected; cluster and heatmap entries ignore `line`.
+
+  `point?: LyraMapPointOptions` styles individual points on ordinary and clustered auto entries.
+  It is ignored for heatmaps. `field` names a **string** feature property; `colors` maps exact
+  `[category, CSS color]` pairs. Missing, unknown and non-string categories use the existing
+  `strokeColor`/`color`/`tone` fallback. The first 32 pairs are inspected and valid duplicates are
+  first-wins. CSS variables resolve on the host and follow ancestor theme changes. `radius`
+  defaults to 5 CSS pixels and `strokeWidth` to 0; both clamp to `[0, 200]`. `strokeColor` overrides
+  the outline only, with the layer's flat color as fallback. Dropping options restores defaults.
+
+  `point.icons` maps exact category values to `LyraMapPointIcon { value: string; path: string;
+  viewBox?: readonly [number, number, number, number] }`. `iconField` defaults to `field`.
+  Each icon is a **filled SVG path string**, not SVG markup or a URL. Copy an icon's path data,
+  combine filled subpaths in that string, and supply its `[minX, minY, width, height]` viewBox
+  (default `[0, 0, 24, 24]`). Stroke-only drawings must first be converted to filled outlines.
+  The first 32 entries are inspected, valid duplicates are first-wins, path data is capped at
+  8192 characters, and viewBox coordinates must be finite within ±10000 with dimensions at least
+  0.001. Invalid paths are ignored; markup, external references and event handlers cannot execute.
+  Rasterization is synchronous and local, with no fetch or HTML/SVG document insertion.
+  `iconColor` accepts CSS variables and defaults to the tone's contrasting foreground; `iconSize`
+  is the displayed bounding square in CSS pixels (default 16, clamped to `[1, 200]`). The fixed
+  64px raster preserves the viewBox aspect ratio. Unknown categories, invalid icons and partial
+  peers lacking image-atlas methods retain their colored circles. No sprite or glyph URL is needed.
+
+  All categories use the **same GeoJSON source** and cluster across categories. Cluster circles
+  keep the existing count-based styling; only unclustered points get category colors/icons.
+  An optional symbol layer and at most 32 images are allocated per configured source, with no
+  per-feature DOM markers. Data changes reuse the source, retheming updates paint/icon pixels,
+  and style reloads restore the owned resources. Removing the entry or icons releases its images.
+  `lr-map-click` on either a point's circle or icon returns `origin: 'data-layer'`, the public
+  `sourceId`, and the rendered feature. For clustered GeoJSON, use numeric feature IDs and keep
+  string business IDs in feature properties, as MapLibre's cluster tiling uses numeric IDs. Canvas export includes both; supply an accessible textual
+  legend/list for category interpretation and individual keyboard actions.
+
+  ```js
+  import '@aceshooting/lyra-ui/components/lr-map.js';
+  map.dataLayers = [{
+    sourceId: 'places', geojson: locations, cluster: {},
+    point: {
+      field: 'category', radius: 12, strokeWidth: 1,
+      colors: [['home', 'var(--lr-color-brand)'], ['work', 'var(--lr-color-success)']],
+      icons: [
+        { value: 'home', path: 'M2 12L12 2L22 12V22H2Z' },
+        { value: 'work', path: 'M8 2H16V6H22V22H2V6H8Z' },
+      ],
+      iconSize: 14,
+    },
+  }];
+  ```
+
+  Share the same stops with `legendGradient` and set its endpoint labels for units. A gradient
+  matching a line ramp remains linear even alongside a logarithmic choropleth. Changing metric,
+  filtered GeoJSON, width or opacity reconciles existing resources; style reloads restore the layer.
+  Lines remain in MapLibre's canvas and can be captured with the map's normal render-event PNG
+  export flow.
+
+  ```js
+  mapElement.dataLayers = [{
+    sourceId: 'routes', geojson: routes,
+    line: { field: 'kmh', stops: speedStops, width: 4, opacity: 0.9 }
+  }];
+  mapElement.legendGradient = speedStops;
+  mapElement.legendGradientLoLabel = '0 km/h';
+  mapElement.legendGradientHiLabel = '100 km/h';
+  ```
 - `maxBounds: LyraMapBounds | null = null` (attribute: false) — box the map may not pan outside,
   `[[west, south], [east, north]]`. Prefer it over calling `map.setMaxBounds()` through the `.map`
   escape hatch: constraining the camera can wedge maplibre-gl at a sub-1 fractional zoom in a wide
@@ -23804,7 +23962,7 @@ payload beside the map.
 
 **Authoring types:** `LyraMapLegendEntry`, `LyraMapLegendPattern`, `LyraMapLegendProjection`, `LyraMapChoroplethLayer`,
 `LyraMapGeoJsonDataLayer`, `LyraMapDataLayerKind`, `LyraMapClusterOptions`, `LyraMapHeatmapOptions`,
-`LyraMapHeatmapZoomValue`, `LyraMapMarker`, `LyraMapMarkerActivationDetail`,
+`LyraMapHeatmapZoomValue`, `LyraMapLineOptions`, `LyraMapPointOptions`, `LyraMapPointIcon`, `LyraMapMarker`, `LyraMapMarkerActivationDetail`,
 `LyraMapMarkerActivationSource`, `LyraMapStyleSpecification`, and `LyraMapInstance`.
 The former `LegendEntry`, `ChoroplethLayer`, `GeoJsonDataLayer`, and `MapMarker` names are removed
 in v9 rather than retained as aliases.
@@ -23847,7 +24005,8 @@ when `legend` and `legendGradient` are both empty.
 
 **CSS parts:** `base`, `container`, `legend`, `legend-swatch`, `legend-gradient`, `legend-lo`,
 `legend-hi`, `legend-limit`, `marker`, `popup`,
-`popup-content`, `popup-close-button`, `attribution`, `attribution-toggle`, `error`.
+`popup-content`, `popup-close-button`, `attribution`, `attribution-toggle`, `navigation`,
+`zoom-in`, `zoom-out`, `compass`, `scale`, `error`.
 `legend` is a localized `role="group"` containing a real list associated to the map canvas with
 `aria-describedby`; each entry is a `listitem`, decorative swatches are inert/accessibility-hidden,
 and the overlay is bounded to the map allocation with scrolling and long-label wrapping.
@@ -23860,6 +24019,18 @@ peer unavailable, owner-realm WebGL2 unavailable, or initialization failed. A po
 appended to the document's pre-mounted `[data-lr-live-region="assertive"]` sink rather than making
 shadow chrome live; raw caught errors are never exposed.
 
+**Standard peer controls:** after `lr-map-load`, narrow `.map` to the installed MapLibre peer
+and use `addControl(new NavigationControl(), 'bottom-right')` and
+`addControl(new ScaleControl({ unit: 'metric' }), 'bottom-left')`. No document-level peer CSS or
+shadow-root modification is needed: navigation buttons, compass glyph, scale bar and control
+corners are styled with Lyra tokens. The corners follow inline start/end under RTL. The legend
+reserves vertical room for these controls and attribution, including after resize or removal.
+Navigation exposes `navigation`, `zoom-in`, `zoom-out`, and `compass` parts; the scale exposes `scale`.
+Button names update through `zoomIn`, `zoomOut`, and `mapResetNorth` locale strings. MapLibre retains
+keyboard activation, compass rotation, zoom limits, scale units and viewport updates. No controls
+are created until the application explicitly adds them. This is a supported imperative peer-control
+integration; there is no declarative controls property.
+
 **Themeable custom properties:**
 
 - `--lr-map-height` (default `var(--lr-size-24rem)`) — host block size, shared with the optional
@@ -26166,6 +26337,10 @@ These named interfaces and helper signatures are available to typed integrations
     addLayer(layer: unknown): this;
     removeLayer(id: string): this;
     setPaintProperty(layerId: string, name: string, value: unknown): this;
+    hasImage?(id: string): boolean;
+    addImage?(id: string, image: ImageData, options: { pixelRatio: number }): unknown;
+    updateImage?(id: string, image: ImageData): unknown;
+    removeImage?(id: string): unknown;
     queryRenderedFeatures(point: unknown, options?: {
       layers?: string[];
     }): unknown[];
@@ -26225,6 +26400,8 @@ These named interfaces and helper signatures are available to typed integrations
     readonly tone?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
     readonly color?: string;
     readonly strokeColor?: string;
+    readonly line?: LyraMapLineOptions;
+    readonly point?: LyraMapPointOptions;
     readonly kind?: LyraMapDataLayerKind;
     readonly heatmap?: LyraMapHeatmapOptions;
     readonly cluster?: LyraMapClusterOptions;
@@ -26239,6 +26416,31 @@ These named interfaces and helper signatures are available to typed integrations
     readonly opacity?: number;
   }`
   Import: `@aceshooting/lyra-ui/components/media/map/map.class.js`.
+  `LyraMapLineOptions {
+    readonly field?: string;
+    readonly stops?: readonly (readonly [number, string])[];
+    readonly width?: number;
+    readonly opacity?: number;
+  }`
+  Import: `@aceshooting/lyra-ui/components/media/map/map.class.js`.
+  `LyraMapPointIcon {
+    readonly value: string;
+    readonly path: string;
+    readonly viewBox?: readonly [number, number, number, number];
+  }`
+  Import: `@aceshooting/lyra-ui/components/media/map/map.class.js`.
+  `LyraMapPointOptions {
+    readonly field?: string;
+    readonly colors?: readonly (readonly [string, string])[];
+    readonly radius?: number;
+    readonly strokeWidth?: number;
+    readonly strokeColor?: string;
+    readonly iconField?: string;
+    readonly icons?: readonly LyraMapPointIcon[];
+    readonly iconColor?: string;
+    readonly iconSize?: number;
+  }`
+  Import: `@aceshooting/lyra-ui/components/media/map/map.class.js`.
   `LyraMapInstance {
     getCanvas(): HTMLCanvasElement;
     getCenter(): {
@@ -26396,6 +26598,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;
@@ -26540,6 +26760,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.
@@ -26809,7 +27037,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
@@ -27129,7 +27357,7 @@ 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`
+**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
 (`legend-position`), `max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
 `stacked`, `withoutAnimation` (`without-animation`),
 `withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
@@ -27214,7 +27442,7 @@ 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`
+- All other `LyraChart` properties are inherited and usable: `description`, `grid`, `axes`, `compact`, `indexAxis`
   (`index-axis`), `hiddenDatasets`, `legendPosition` (`legend-position`), `max`, `min`, `plugins`,
   `withoutAnimation` (`without-animation`), `withoutLegend` (`without-legend`), `withoutTooltip`
   (`without-tooltip`), `valueFormatter`, `formatter`, `area`, `zoom`, `config`, `height`, `xLabel` (`x-label`),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "14.1.0",
+  "version": "14.2.0",
   "description": "Free, independent Lit web components: an open-source alternative to Shoelace and Web Awesome with accessible forms, dashboards, charts, and agent UI.",
   "keywords": [
     "web-components",
@@ -2422,7 +2422,7 @@
     "d3-force": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
-    "dompurify": "^3.4.14",
+    "dompurify": "^3.4.15",
     "emoji-picker-element-data": "^1.8.0",
     "epubjs": "^0.3.93",
     "fast-check": "^4.9.0",
@@ -2431,7 +2431,7 @@
     "istanbul-lib-report": "^3.0.1",
     "istanbul-reports": "^3.2.0",
     "jszip": "^3.10.1",
-    "katex": "^0.18.5",
+    "katex": "^0.18.7",
     "libphonenumber-js": "^1.13.12",
     "mammoth": "^1.12.2",
     "maplibre-gl": "^6.7.0",
@@ -2440,7 +2440,7 @@
     "papaparse": "^5.7.0",
     "pdfjs-dist": "^6.3.289",
     "pixelmatch": "^7.2.0",
-    "playwright": "^1.62.1",
+    "playwright": "^1.63.0",
     "pngjs": "^7.0.0",
     "postal-mime": "^3.0.0",
     "qrcode": "^1.5.4",