@aceshooting/lyra-ui 12.0.0 → 12.1.1

package/llms-full.txt

@@ -4165,6 +4165,48 @@ Filterable single/multi-select combining a text input with a listbox. Mirrors th
 `<wa-combobox>` API under the `lr-` prefix. **Form-associated** (hand-rolled internals, not the
 shared `FormAssociated` mixin — see gotchas).
 
+**First-interaction registration.** Where initial-route weight is stricter than a static combobox
+registration allows, keep a labelled native `<input list>` as the working pre-JavaScript control
+and import only the granular combobox registration on its first focus. Copy the native value after
+the import resolves so typing that happens while the chunk is in flight is not lost, then transfer
+focus explicitly — the browser does not replay the focus event after custom-element upgrade:
+
+```html
+<div id="country-fallback">
+  <label for="country-native">Country</label>
+  <input id="country-native" name="country" list="country-options">
+  <datalist id="country-options"><option value="France"></option></datalist>
+</div>
+<lr-combobox id="country-enhanced" name="country" label="Country" hidden>
+  <lr-option value="France">France</lr-option>
+</lr-combobox>
+<script type="module">
+  const fallback = document.querySelector("#country-fallback");
+  const input = document.querySelector("#country-native");
+  const combobox = document.querySelector("#country-enhanced");
+  let registration;
+  input.addEventListener("focus", async () => {
+    if (!combobox.hidden) return;
+    registration ??= import(
+      "@aceshooting/lyra-ui/components/forms/combobox/combobox.js"
+    ).catch((error) => {
+      registration = undefined; // let a later interaction retry
+      throw error;
+    });
+    await registration;
+    await customElements.whenDefined("lr-combobox");
+    combobox.value = input.value;
+    fallback.hidden = true;
+    combobox.hidden = false;
+    combobox.focus();
+  });
+</script>
+```
+
+Leave the native control in place if registration fails. This pattern preserves the initial shell;
+the full form-label, option, overlay, and first-open positioning contracts arrive in deferred
+chunks instead of being weakened in a separate partial combobox implementation.
+
 An `lr-option` row remains bounded by its owning listbox: the default label ellipsizes and each
 `start`/`end` (or `prefix`/`suffix`) adornment is capped at 40% of the row. Unbroken metadata
 therefore cannot widen a 320px LTR or RTL picker.
@@ -5072,7 +5114,7 @@ Text field + calendar popover, **form-associated** via the shared `FormAssociate
 **Properties (44):**
 
 - `appearance: 'filled'|'outlined'|'filled-outlined' = 'outlined'` (reflected)
-- `appliedPreset: LyraDateRangePreset | undefined` (read-only, new in 11.3.0) — the `presets` entry
+- `appliedPreset: LyraDateRangePreset | undefined` (read-only, new in 12.1.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
@@ -10309,7 +10351,7 @@ no-rows states return the empty element as the shadow root's own root, with no `
 wrapper around it — `::part(base)` does not apply in those two states, only in the filtered-to-zero
 one — and that `empty` disappears entirely once the `empty` slot is filled.
 
-- `scrollMode: 'self' | 'page' = 'self'` (attribute `scroll-mode`, reflected) — which element
+- `scrollMode: 'self' | 'page' | 'auto' = 'self'` (attribute `scroll-mode`, reflected) — which element
   scrolls when the table overflows. `'self'` makes `[part="base"]` the scroll container, which is
   what pairs with `--lr-table-max-height` and makes the sticky header pin inside the table's own
   viewport. `'page'` hands scrolling back to the document. Needed because a scroll container clips
@@ -10317,8 +10359,12 @@ one — and that `empty` disappears entirely once the `empty` slot is filled.
   still `overflow: auto` becomes a sticky containing block that never scrolls, and its header
   scrolls away with the page. With `'page'` the header's nearest scrollport is the page, so it pins
   there; the cost is that a table wider than its host overflows the page instead of scrolling
-  inside itself. Named `scrollMode` rather than `scroll` because a `scroll` property would shadow
-  `Element.prototype.scroll()`
+  inside itself. The opt-in `'auto'` mode resolves between those two behaviors from the rendered
+  allocation: while content fits it uses page flow, and only while content actually overflows
+  horizontally does `[part="base"]` become the contained scrollport. It re-evaluates when either
+  the allocated width or the rendered table's intrinsic width changes, so the same table can flow
+  with a desktop page and contain itself in a 320px panel. The default remains `'self'`. Named
+  `scrollMode` rather than `scroll` because a `scroll` property would shadow `Element.prototype.scroll()`
 
 **Themeable custom properties:** `--lr-table-cell-color` (default `inherit`),
 `--lr-table-cell-link-color` (default `var(--lr-color-brand)`) and
@@ -11286,7 +11332,10 @@ color?: string; label?: string; partOfRamp?: boolean }`: a discrete legend key r
   are never consulted by the color ramp, the bucket math, the tooltip, or the generated accessible
   name, so adding them changes nothing a cell renders. Labeled `annotations` still render their
   `[part="legend-annotation"]` entries after the stops. Unset (the default) or an empty array
-  reproduces the exact gradient legend, unchanged. A dev-mode-only warning fires when a stop's
+  reproduces the exact gradient legend, unchanged. Reassigning stops whose `value`/`color`/`label`/
+  `partOfRamp` fields are unchanged does not schedule a canvas redraw. The assignment still takes
+  a fresh frozen ownership snapshot, so mutating and reassigning the same caller array is detected
+  while mutation without reassignment remains isolated. A dev-mode-only warning fires when a stop's
   `color` doesn't match the corresponding `colorSteps` entry — set `partOfRamp: false` on a stop
   that is a real, distinctly-colored swatch deliberately outside the sequential ramp (e.g. a fixed
   "no data" color next to an N-step ramp) to exclude just that stop from the comparison; defaults to
@@ -12597,20 +12646,21 @@ renders each event as a `<button part="agenda-event">`.
 
 ## `lr-timeline` and `lr-timeline-item`
 
-Read-only chronological sequence. `lr-timeline` is a `role="list"` flex container; each
+Read-only chronological sequence by default. `lr-timeline` is a `role="list"` flex container; each
 `lr-timeline-item` is a light-DOM child that sets `role="listitem"` on itself and renders its own
 marker plus the trailing rail segment reaching toward the next item's marker. The last item's rail is
 suppressed purely in CSS (`::slotted([role='listitem']:last-child)`) — no JS coordination anywhere.
-Neither element has events, keyboard navigation, or a selection model: a passive record display, by
-design (an item's `title`/`description` routinely hold focusable content, so wrapping the row in
-`role="button"` would trip `nested-interactive`).
+Items have no keyboard navigation or selection model: a passive record display, by design (an
+item's `title`/`description` routinely hold focusable content, so wrapping the row in `role="button"`
+would trip `nested-interactive`). The opt-in clustered time scale adds only native count-marker
+buttons; it does not make the individual rows interactive.
 
 **`lr-timeline` properties:** `orientation: 'vertical' | 'horizontal' = 'vertical'` — note the
 opposite default from `lr-stepper`; `horizontal` makes `[part='base']` a horizontally scrollable row.
 `accessibleLabel: string = ''` (attribute `aria-label`) overrides the localized `"Timeline"` name
 (the `role="list"` element is in the shadow root and never inherits a host attribute). Read-only
-`itemCount: number` is the live count of direct default-slot `<lr-timeline-item>` children;
-unrelated slotted elements and text nodes are ignored.
+`itemCount: number` is the live count of default-slot `<lr-timeline-item>` assignments (including
+flattened forwarding slots); unrelated slotted elements and text nodes are ignored.
 `scale: 'flow' | 'time' = 'flow'` (attribute `scale`, type `LyraTimelineScale`) chooses how items
 are distributed along the main axis. `'flow'` is the default even sequence, where `timestamp` is
 rendered as text but carries no positional meaning. `'time'` positions each item at its true
@@ -12618,23 +12668,34 @@ proportion of the range, so a gap of weeks and a gap of decades stop looking ide
 needs a definite extent to distribute along — `--lr-timeline-time-extent` (default
 `var(--lr-size-20rem)`), applied as `block-size` when vertical and `inline-size` when horizontal —
 because items are absolutely positioned and a percentage against an auto-sized track resolves to
-zero. `collision: 'overlap' | 'stack' = 'overlap'` (attribute `collision`, type `LyraTimelineCollision`)
-chooses what `scale="time"` does with items landing on nearly the same position: `'overlap'` leaves
-them stacked on one another, `'stack'` steps each colliding item one lane along the **cross** axis
-(indent per lane: `--lr-timeline-collision-offset`, default `var(--lr-space-l)`), which is what a
-dense chronology needs — items within 1.5% of the axis of each other count as colliding, and an
-isolated item returns to lane 0 rather than inheriting a preceding run's depth. There is
-deliberately no `'cluster'` mode: collapsing coincident items into one expandable marker needs a
-selection model and click events this passive component does not have.
+zero. `collision: 'overlap' | 'stack' | 'cluster' = 'overlap'` (attribute `collision`, type
+`LyraTimelineCollision`) chooses what `scale="time"` does with items landing on nearly the same
+position: `'overlap'` leaves them stacked on one another, `'stack'` steps each colliding item one
+lane along the **cross** axis (indent per lane: `--lr-timeline-collision-offset`, default
+`var(--lr-space-l)`), and `'cluster'` replaces every group of at least two colliding items with one
+count marker. The group's first member in author order becomes its representative and renders the
+button in that item's existing list/Tab position; the remaining members are hidden, so visual,
+semantic, and keyboard order do not diverge merely because clustering is enabled. Stack mode and
+the cluster floor treat items within 1.5% of the axis as colliding.
+Cluster mode widens that floor to the rendered count action's footprint on the currently allocated
+axis, then reclusters when the allocation or rendered action size changes, so interactive marker
+hit areas do not overlap.
+Cluster windows are bounded from their first sorted position rather than transitively chaining every
+dense neighbour, so a large history becomes a useful sequence of markers rather than one axis-wide
+cluster. An isolated item remains an ordinary timeline item. Activating a count marker is a
+notification only; it never expands or selects items internally.
 `rangeStart` / `rangeEnd` (`Date | string | number`, attribute: false) pin the axis instead of
 deriving it from the earliest/latest item; a reversed or non-finite pair falls back to the derived
 range. An item with no parseable `timestamp` (including one supplied only through the `timestamp`
 slot, which carries no machine-readable instant) keeps document order and is spread evenly, so a
-partially-timestamped list degrades rather than stacking at the origin. Items sharing an instant
-overlap rather than being fanned into lanes: lane assignment, brushing, zooming and per-event
-selection belong to a denser component than this deliberately passive one. Positions are written to
+partially-timestamped list degrades rather than stacking at the origin. Reassigning an item's
+`timestamp` reclusters without requiring a slot mutation. Positions are written to
 each child as a private `--_lr-timeline-item-offset` custom property and removed again on a switch
-back to `'flow'`, so the component still never alters its children's content or structure.
+back to `'flow'`. Cluster mode adds and removes a private visibility marker on non-representative
+members and temporarily changes only the representative item's shadow presentation; switching
+mode, shrinking the data, or disconnecting restores every ordinary row. If regrouping would remove
+the focused row content or count action, focus moves to the replacement cluster action, the first
+surviving item action, or the timeline list as a programmatic fallback.
 
 **`lr-timeline-item` properties:** `timestamp?: Date | string | number` (attribute: false — `Date`
 isn't attribute-serializable; invalid input normalizes to unset and renders no timestamp UI),
@@ -12644,8 +12705,16 @@ isn't attribute-serializable; invalid input normalizes to unset and renders no t
 optional pulse disabled under `prefers-reduced-motion: reduce`, with explicit `aria-current="true"`
 or `"false"` on the host).
 
-**Events:** none on either element. Read the reactive `itemCount` property after changing direct
-children; the internal slot's non-composed `slotchange` event is not a host-level public signal.
+**Events:** `lr-timeline` emits `lr-cluster-activate` when a `collision="cluster"` marker is
+activated by pointer, Enter, or Space. Its non-cancelable, bubbling, composed
+`detail: LyraTimelineClusterActivateDetail` is `{ items: readonly LyraTimelineItem[] }`: a fresh
+frozen snapshot of the cluster members in document order, preserving each element's identity.
+`LyraTimelineClusterActivateDetail {
+  items: unknown;
+}`
+Use it to open a consumer-owned popover, dialog, or detail view. `lr-timeline-item` emits no events.
+Read the reactive `itemCount` property after changing assigned items; the internal slot's
+non-composed `slotchange` event is not a host-level public signal.
 
 **Slots:** `lr-timeline`'s default slot holds the items, in display order. On an item the **default
 slot is the title** (there is no `title` slot), plus `marker-icon` (marker glyph override; an empty
@@ -12654,7 +12723,9 @@ slot falls back to a color-coded dot), `timestamp` (wins outright over the
 entirely when empty).
 
 **CSS parts:** timeline `base` — the `role="list"` flex container (no separate `list` part). Item:
-`base`, `track` (marker + rail spine, always the opposite axis from `base`), `marker`
+`cluster` — the native count button rendered while that item represents a cluster, with a 40px
+minimum action surface; `cluster-count` — its painted count pill; `base`, `track`
+(marker + rail spine, always the opposite axis from `base`), `marker`
 (`aria-hidden="true"`, decorative), `rail` (the connecting segment; `visibility: hidden` rather than
 removed on the last item, so marker alignment stays consistent), `content`, `header` (flex row
 wrapping `title` and `timestamp`; wraps at narrow widths rather than truncating), `title`,
@@ -12662,8 +12733,11 @@ wrapping `title` and `timestamp`; wraps at narrow widths rather than truncating)
 
 **Themeable custom properties:** `--lr-timeline-gap` (default `var(--lr-space-l)`) — declared on
 `lr-timeline` but consumed inside each item via inheritance across the slot boundary; it is both the
-inter-item spacing and the length each rail bridges. `--lr-scroll-fade-size` (default `2rem`) controls each
-horizontal-overflow edge fade; forced-colors mode removes the masks while retaining native
+inter-item spacing and the length each rail bridges. `--lr-timeline-cluster-size` (default
+`var(--lr-size-2rem)`) sizes the painted count pill, `--lr-timeline-cluster-bg` (default
+`var(--lr-color-brand)`) sets its background, and `--lr-timeline-cluster-color` (default
+`var(--lr-color-on-brand)`) sets its foreground. `--lr-scroll-fade-size` (default `2rem`) controls
+each horizontal-overflow edge fade; forced-colors mode removes the masks while retaining native
 scrolling. On the item: `--lr-timeline-marker-size`
 (default `var(--lr-size-1-25rem)`, both dimensions so the dot stays circular),
 `--lr-timeline-rail-width` (default `var(--lr-border-width-medium)`), `--lr-timeline-rail-color`
@@ -16848,7 +16922,7 @@ 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, plus the `filterId` that changed and (new in 11.3.0) `appliedPreset` — see
+complete value object, plus the `filterId` that changed and (new in 12.1.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
@@ -16901,7 +16975,7 @@ 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),
+A `'date-range'` definition also accepts `presets?: readonly LyraDateRangePreset[]` (new in 12.1.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
@@ -18921,6 +18995,45 @@ from the shared positioner and caps its dimensions to the measured available spa
 
 A click-triggered, light-dismiss floating surface positioned with the shared Floating UI positioner.
 
+**First-interaction registration.** A performance-sensitive navigation shell can keep a native
+`<details>` disclosure working before JavaScript, then load only the granular popover registration
+when that fallback first opens. The interaction that starts an async import is not replayed after
+the custom element upgrades, so finish the handoff explicitly with `show()`:
+
+```html
+<details id="account-fallback">
+  <summary>Account</summary>
+  <nav aria-label="Account"><a href="/profile">Profile</a></nav>
+</details>
+<lr-popover id="account-popover" popup-role="none" hidden>
+  <button slot="trigger">Account</button>
+  <nav aria-label="Account"><a href="/profile">Profile</a></nav>
+</lr-popover>
+<script type="module">
+  const fallback = document.querySelector("#account-fallback");
+  const popover = document.querySelector("#account-popover");
+  let registration;
+  fallback.addEventListener("toggle", async () => {
+    if (!fallback.open || !popover.hidden) return;
+    registration ??= import(
+      "@aceshooting/lyra-ui/components/overlays/overlay/popover.js"
+    ).catch((error) => {
+      registration = undefined; // let a later interaction retry
+      throw error;
+    });
+    await registration;
+    await customElements.whenDefined("lr-popover");
+    fallback.hidden = true;
+    popover.hidden = false;
+    await popover.show();
+  });
+</script>
+```
+
+This keeps the fallback's markup and semantics in the initial document. The registration, Lyra
+base, nonmodal stack, and first-open positioning runtime remain outside that initial module graph.
+If the import fails, leave the native disclosure visible and usable.
+
 **Properties:**
 
 - `open: boolean = false` (reflected) — assigning it runs the same `lr-show`/`lr-hide` lifecycle as
@@ -22378,12 +22491,17 @@ dimming at `itemCount <= 1`), `--lr-focus-ring-*`.
 A `maplibre-gl` wrapper with a declarative legend, a single choropleth GeoJSON fill layer, markers,
 and additive `dataLayers` — plain GeoJSON, natively clustered points, or a heatmap density surface —
 plus a peer-neutral `map` getter for common imperative operations. Its runtime value is the
-underlying MapLibre map.
+underlying MapLibre map. The component observes its own map-container allocation and calls the
+peer's `resize()` when that allocation changes.
 
 **Properties:**
 
 - `center: [number, number] = [0, 0]`
 - `zoom: number = 2`
+- `renderWorldCopies?: boolean` (attribute: false) — forwarded to MapLibre when its map is
+  constructed. Leave it unset to preserve MapLibre's own current default; set `false` before
+  construction to stop repeating the world horizontally. This is a construction-time option, so a
+  later change takes effect after the component is disconnected and reconnected.
 - `mapStyle?: LyraMapStyleSpecification | string` (attribute: false) — required before a map is
   constructed. Object assignments are detached and recursively frozen; create and reassign a new
   style to update it. `LyraMapStyleSpecification` is the peer-neutral structural subset accepted from
@@ -22458,6 +22576,10 @@ string; geojson: GeoJSON.FeatureCollection; field: string; stops: [number, strin
   gotchas. Entries with non-finite coordinates or latitude outside `[-90, 90]` are skipped without
   aborting valid siblings. `color` is used only when the browser accepts it as CSS `color`;
   declaration breaks and `url()` paint servers fall back to MapLibre's default marker color.
+  Every retained marker is a named `role="button"` tab stop, including one without a popup. Click,
+  Enter, and Space emit `lr-map-marker-activate`; Space suppresses its page-scroll default while
+  preserving MapLibre's popup toggle. A popup-bearing marker additionally exposes
+  `aria-haspopup="dialog"`, `aria-controls`, and explicit `aria-expanded`.
 - `dataLayers: LyraMapGeoJsonDataLayer[] = []` (attribute: false) —
   `LyraMapGeoJsonDataLayer { sourceId: string; geojson: GeoJSON.Feature |
 GeoJSON.FeatureCollection; tone?: 'accent' | 'success' | 'warning' |
@@ -22482,11 +22604,12 @@ heatmap?: LyraMapHeatmapOptions; cluster?: LyraMapClusterOptions }`. `sourceId`
   from overwriting or removing a same-named source supplied by `mapStyle`. Independent of
   `choropleth` — no `field`/`stops` color-interpolation, just the geometry rendered in a flat tone;
   use `choropleth` instead when you need a data-driven color ramp. An entry whose `sourceId`
-  persists across a `dataLayers` reassignment gets its GeoJSON updated in place (`setData()`), one
-  that's dropped has its private source/layers removed, and a genuinely new `sourceId` gets new
-  resources — nothing leaks on removal, style change, or disconnect.
+  persists across a `dataLayers` reassignment gets its GeoJSON updated in place (`updateData()`
+  when stable feature IDs make a safe diff possible, otherwise `setData()`), one that's dropped has
+  its private source/layers removed, and a genuinely new `sourceId` gets new resources — nothing
+  leaks on removal, style change, or disconnect.
 
-  `cluster` and `kind` (both new in 11.3.0) opt one entry out of that three-layer geometry split.
+  `cluster` and `kind` (both new in 12.1.0) opt one entry out of that three-layer geometry split.
   **Both are strictly additive: an entry that sets neither renders exactly what it rendered before,
   down to the layer ids and the point layer's filter.**
 
@@ -22516,7 +22639,9 @@ number][]; colorSteps?: [number, string][]; countFont?: string[] }` turns the en
   renders the source as MapLibre's own first-class `heatmap` layer instead, which the geometry split
   cannot express at all: thousands of overlapping circles read as one opaque blob rather than as
   where the data is concentrated. `heatmap?: LyraMapHeatmapOptions { weightField?: string;
-weightRange?: [number, number]; stops?: [number, string][]; radius?: number; intensity?: number }`
+weightRange?: [number, number]; stops?: [number, string][]; radius?: LyraMapHeatmapZoomValue;
+intensity?: LyraMapHeatmapZoomValue; opacity?: number }`, where `LyraMapHeatmapZoomValue` is a
+  scalar number or bounded `[zoom, value][]` stops,
   configures it. `weightField` weights each point by a feature property, and `weightRange` maps that
   property's own units onto the 0–1 weight MapLibre expects — without it the raw value is passed
   through, which saturates the surface for any quantity above ~1; with neither, every point weighs 1.
@@ -22530,10 +22655,14 @@ weightRange?: [number, number]; stops?: [number, string][]; radius?: number; int
   describes a flat colour rather than a gradient; that one — like an unset or wholly unusable
   `stops` — falls back to the built-in ramp, which runs transparent → `--lr-color-brand` →
   `--lr-color-success` → `--lr-color-warning` → `--lr-color-danger`, so a retheme moves the density
-  surface with everything else. `radius`
-  (default 30) and `intensity` (default 1) are MapLibre's own. `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.
+  surface with everything else. Scalar `radius` (default 30) and `intensity` (default 1) preserve
+  their established behavior. Two or more usable `[zoom, value]` stops emit linear zoom
+  interpolation; stops are sorted, duplicate zooms removed, zoom clamped into `[0, 24]`, radius
+  into `[1, 200]`, and intensity into `[0, 100]`. One usable stop becomes a scalar and an unusable
+  array falls back to the existing default. `opacity` is clamped into `[0, 1]`; omission leaves the
+  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.
 - `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
@@ -22545,14 +22674,15 @@ weightRange?: [number, number]; stops?: [number, string][]; radius?: number; int
 
 **Choropleth and `dataLayers` updates are diffed before they reach the peer.** `setData()`
 unconditionally re-tiles and repaints an entire source, which is invisible on a static map and
-expensive on an animated one. When an update changes only feature *properties* — the values driving
-the colour ramp — the component emits maplibre-gl's incremental `updateData()` instead. The fast
-path is deliberately strict, and needs all of: the same feature count, a `string`/`number` `id` on
-every feature in the same order, and geometry that is the **same object** as last time (not merely
-deep-equal). Structurally comparing polygon rings would cost about what the re-tile costs, and a
-false positive would paint stale geometry. Reuse your geometry objects across frames — the
-efficient way to build an animation anyway — and the fast path applies; otherwise it falls back to
-`setData()` with no change in behaviour. Peers predating `updateData()` always take the old path.
+expensive on an animated one. When every feature has a unique `string`/`number` `id` and retained
+features keep semantically unchanged geometry/bbox values, the component emits MapLibre's
+incremental `updateData()` for property changes, additions, removals, and order changes. The exact
+next order is preserved: an unchanged prefix stays in place and only the invalidated suffix is
+removed and re-added. Lyra's immutable ownership boundary detaches GeoJSON assignments, so geometry
+reference identity cannot survive between frames; a bounded, accessor-free comparison verifies the
+JSON geometry graph instead. A missing/duplicate ID, changed geometry, exceeded bound, or uncertain
+comparison falls back to `setData()` with no change in rendered behaviour. Peers without
+`updateData()` always take the old path.
 
 **Feature properties are tiled, and therefore bounded in numeric magnitude.** MapLibre GL tiles
 every GeoJSON source through a worker into a protobuf vector tile, so a property carrying a huge
@@ -22572,7 +22702,8 @@ payload beside the map.
 
 **Authoring types:** `LyraMapLegendEntry`, `LyraMapLegendPattern`, `LyraMapLegendProjection`, `LyraMapChoroplethLayer`,
 `LyraMapGeoJsonDataLayer`, `LyraMapDataLayerKind`, `LyraMapClusterOptions`, `LyraMapHeatmapOptions`,
-`LyraMapMarker`, `LyraMapStyleSpecification`, and `LyraMapInstance`.
+`LyraMapHeatmapZoomValue`, `LyraMapMarker`, `LyraMapMarkerActivationDetail`,
+`LyraMapMarkerActivationSource`, `LyraMapStyleSpecification`, and `LyraMapInstance`.
 The former `LegendEntry`, `ChoroplethLayer`, `GeoJsonDataLayer`, and `MapMarker` names are removed
 in v9 rather than retained as aliases.
 
@@ -22587,7 +22718,10 @@ shared `maplibre-gl` import without constructing a map or allocating a WebGL con
 `false` when the peer is unavailable, allowing an application to choose a fallback before connecting
 an element.
 
-**Events:** `lr-map-load` (fired once, after the underlying map's own `'load'`), `lr-map-click`
+**Events:** `lr-map-load` (fired once, after the underlying map's own `'load'`),
+`lr-map-marker-activate` (non-cancelable; frozen `LyraMapMarkerActivationDetail { id, lngLat,
+marker, source }`; `id` is the trimmed explicit identity or `undefined`, `marker` is the accepted
+declarative snapshot, and `source` is `'pointer' | 'keyboard'`), and `lr-map-click`
 (frozen `detail: { readonly lngLat: readonly [lng, lat], readonly feature?, readonly origin?,
 readonly sourceId? }`; the tuple and any hit GeoJSON feature are detached and recursively frozen).
 `feature` resolves against the choropleth fill layer **and** every applied `dataLayers`
@@ -22665,6 +22799,10 @@ Vite with v6:
     { color: "#0969da", label: "High", pattern: "diagonal" },
   ];
   m.markers = [{ lngLat: [2.29, 48.86], label: "Eiffel Tower" }];
+  m.renderWorldCopies = false;
+  m.addEventListener("lr-map-marker-activate", (e) =>
+    console.log(e.detail.id, e.detail.lngLat)
+  );
   m.addEventListener("lr-map-click", (e) =>
     console.log(e.detail.feature?.properties)
   );
@@ -22681,8 +22819,9 @@ https://maplibre.org/maplibre-gl-js/docs/#esm.
   created peer instance, renders only the localized initialization failure, and can retry after a
   new style or reconnect without an unhandled promise rejection. Capability probes and error
   constructors come from the current owner document, including after same-origin adoption.
-- A marker with a popup handles Space at its focus boundary: one activation toggles the peer popup
-  and suppresses the page-scroll default. Markers without a popup do not consume Space.
+- Every marker handles Enter and Space as button activation. Space suppresses the page-scroll
+  default whether or not a popup exists; when one does, MapLibre still receives its own popup
+  toggle and the component emits exactly one `lr-map-marker-activate` notification.
 - clearing or swapping the choropleth no longer leaks the old layer: setting `choropleth =
 undefined`, or changing `choropleth.sourceId` to a different value, now calls `removeLayer`/
   `removeSource` on whatever was previously applied before adding the new one (or nothing, if
@@ -22727,6 +22866,10 @@ undefined`, or changing `choropleth.sourceId` to a different value, now calls `r
   `lr-map-load` never fires until the element is actually scrolled into view. Deliberate: caps
   concurrent WebGL contexts when many `<lr-map>`s sit in one dashboard/grid. Skipped entirely
   (constructs immediately once the peer loads) when `IntersectionObserver` itself is unavailable.
+- Once constructed, the owner realm's `ResizeObserver` watches the rendered map container and calls
+  the current peer's `resize()` on allocation changes. It is replaced on reconnect/adoption and
+  disconnected before peer teardown, so a stale delivery cannot resize a removed map. Browsers
+  without `ResizeObserver` retain MapLibre's own window-resize behavior.
 
 ---
 
@@ -24766,6 +24909,8 @@ These named interfaces and helper signatures are available to typed integrations
 - **`components-media-map-map-loader-contracts`** — Supporting data types and helpers for this component family.
   `loadMaplibre(): unknown`
   `MapLibreGeoJsonDiff {
+  remove: unknown;
+  add: unknown;
   update: unknown;
   id: unknown;
   addOrUpdateProperties: unknown;
@@ -24883,6 +25028,7 @@ These named interfaces and helper signatures are available to typed integrations
   stops: unknown;
   radius: unknown;
   intensity: unknown;
+  opacity: unknown;
 }`
   `LyraMapInstance {
   getCanvas: unknown;
@@ -24916,6 +25062,12 @@ These named interfaces and helper signatures are available to typed integrations
   color: unknown;
   label: unknown;
   unsafeHtml: unknown;
+}`
+  `LyraMapMarkerActivationDetail {
+  id: unknown;
+  lngLat: unknown;
+  marker: unknown;
+  source: unknown;
 }`
   `LyraMapStyleSpecification {
   version: unknown;
@@ -25507,13 +25659,16 @@ passthrough). Not a subclass of `LyraChart`.
 - `barWidth: number = 32` (attribute `bar-width`, px) — each bar's fixed width in `layout="scroll"`
   mode; ignored in the default `'fit'` mode. An excessive value is reduced as needed by the
   1,000,000px scroll-content ceiling.
-- `maxLabels?: number` (attribute `max-labels`, type Number) — decimates which category axis labels
-  actually render *text* when `labels.length > maxLabels`: always shows the first and last label,
-  and roughly evenly distributes
-  the rest between them. Works in either `layout` mode. Unset (the default) renders every label.
-  Each rendered category label is allocation-aware: narrow/long text is ellipsized before paint,
-  with the complete caller label retained as its accessible name. Independently, the global
-  1,000-record safety sampler may bound both marks and labels for very large category×series input.
+- `maxLabels?: number | 'auto'` (attribute `max-labels`) — decimates which category axis labels
+  actually render *text*: always shows the first and last label and roughly evenly distributes the
+  rest between them. A number is authoritative. `'auto'` derives the cap after each resize from the
+  resolved plot width and widest rendered caller label, using the same deterministic 7px-per-
+  character estimate as label ellipsis plus 10px of lane breathing room. It therefore responds to
+  either `layout` mode without DOM text measurement or browser-specific font metrics. Unset (the
+  default) renders every label, unchanged. Each rendered category label is allocation-aware:
+  narrow/long text is ellipsized before paint, with the complete caller label retained as its
+  accessible name. Independently, the global 1,000-record safety sampler may bound both marks and
+  labels for very large category×series input.
 - `barX?: (index: number) => number` (attribute: false, bar type only) — overrides the internal
   per-category x-origin formula (`plotX + i * slot`) used by both bars and their axis labels, so a
   consumer can pixel-align this chart's bars with a sibling `<lr-heatmap>` calendar's week columns
@@ -25535,7 +25690,16 @@ passthrough). Not a subclass of `LyraChart`.
 - `skipZero: boolean = false` (attribute `skip-zero`, bar type only) — omits a bar entirely (no
   mark/tabindex/tooltip) for a value that is exactly `0`; `null`/non-finite values are always
   skipped regardless.
-- `valueAxisGutter?: number` (attribute `value-axis-gutter`) — value-axis gutter width.
+- `valueAxisGutter?: number | 'auto'` (attribute `value-axis-gutter`) — value-axis gutter width in
+  CSS px. A finite number is authoritative (clamped to 0…1,000,000px as before). `'auto'` sizes the
+  gutter from the exact value-tick strings rendered in that pass — `formatter` output first, then
+  `tickFormat`, then the component's `effectiveLocale` number formatting — using the deterministic
+  7px-per-character estimate plus 14px for the tick offset and font-width variance. Automatic
+  sizing never shrinks below the legacy 36px default. In `layout="fit"` it is bounded to the smaller
+  of 240px or 40% of the measured SVG width, so a pathological formatter result cannot consume the
+  plot. In `layout="scroll"` the cap is 240px: that SVG has an explicit content width, so deriving a
+  percentage cap from its own ResizeObserver result would create a shrinking feedback loop. The
+  gutter remains at logical start under RTL. Unset keeps exactly 36px.
 - `barGapRatio?: number` (attribute `bar-gap-ratio`) — overrides the internal 0.2 `BAR_GROUP_GAP`
   fraction of a category slot left as a gap between categories. Unset keeps the fixed 0.2.
 - `scale: 'linear' | 'sqrt' | 'logarithmic' = 'linear'` — `'sqrt'` (**bar type only**) maps a bar's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "12.0.0",
+  "version": "12.1.1",
   "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",
@@ -2396,7 +2396,6 @@
     "@lit-labs/ssr": "^4.1.0",
     "@open-wc/testing": "^5.0.0",
     "@sgratzl/chartjs-chart-boxplot": "^4.4.5",
-    "@sinonjs/fake-timers": "^15.4.0",
     "@types/d3-drag": "^3.0.7",
     "@types/d3-force": "^3.0.10",
     "@types/d3-selection": "^3.0.11",
@@ -2405,7 +2404,6 @@
     "@types/papaparse": "^5.5.2",
     "@types/qrcode": "^1.5.6",
     "@types/react": "^19.2.18",
-    "@types/sinonjs__fake-timers": "^15.0.1",
     "@web/dev-server-esbuild": "^2.0.0",
     "@web/test-runner": "^1.0.0",
     "@web/test-runner-commands": "^1.0.1",
@@ -2524,7 +2522,7 @@
     "test:default-string-slices": "node scripts/generate-default-string-slices.test.mjs",
     "check:default-strings": "node scripts/check-default-strings.mjs",
     "test:default-strings": "node scripts/check-default-strings.test.mjs",
-    "test:tooling": "node scripts/build-llms.test.mjs && node --test scripts/create-component.test.mjs && node --test scripts/full-engine-shard.test.mjs && node --test scripts/web-test-runner-config.test.mjs && node scripts/component-families.test.mjs && node scripts/maplibre-peer-range.test.mjs && node scripts/migrate-wa.test.mjs && node scripts/visual-regression-compare.test.mjs && node --test scripts/visual-regression-shard.test.mjs && node scripts/visual-regression-config.test.mjs && node --test scripts/check-source-policy.test.mjs scripts/check-test-assertions.test.mjs && node scripts/bundle-budgets.test.mjs && node scripts/compact-build-js.test.mjs && node --test scripts/normalize-mixin-declarations.test.mjs && node --test scripts/check-palette-freshness.test.mjs && node scripts/manifest-compact.test.mjs && node --test scripts/viewer-fixture-generators.test.mjs && node --test scripts/strip-css-comments.test.mjs && node scripts/editor-web-types.test.mjs",
+    "test:tooling": "node scripts/build-llms.test.mjs && node --test scripts/create-component.test.mjs && node --test scripts/full-engine-shard.test.mjs && node --test scripts/coverage-shard-runner.test.mjs && node --test scripts/lint-ci-shard.test.mjs && node --test scripts/web-test-runner-config.test.mjs && node scripts/component-families.test.mjs && node scripts/maplibre-peer-range.test.mjs && node scripts/migrate-wa.test.mjs && node scripts/visual-regression-compare.test.mjs && node --test scripts/visual-regression-shard.test.mjs && node scripts/visual-regression-config.test.mjs && node --test scripts/check-source-policy.test.mjs scripts/check-test-assertions.test.mjs && node scripts/bundle-budgets.test.mjs && node scripts/compact-build-js.test.mjs && node --test scripts/normalize-mixin-declarations.test.mjs && node --test scripts/check-palette-freshness.test.mjs && node scripts/manifest-compact.test.mjs && node --test scripts/viewer-fixture-generators.test.mjs && node --test scripts/strip-css-comments.test.mjs && node scripts/editor-web-types.test.mjs",
     "framework-types": "node scripts/generate-framework-types.mjs",
     "check:framework-types": "node scripts/check-framework-types.mjs",
     "test:framework-types": "node scripts/generate-framework-types.test.mjs",
@@ -2559,6 +2557,7 @@
     "migrate-wa": "node scripts/migrate-wa.mjs",
     "test:migrate-wa": "node scripts/migrate-wa.test.mjs",
     "contract-policy": "pnpm run check:script-paths && pnpm run test:script-paths && pnpm run check:package-exports && pnpm run test:package-exports && pnpm run check:doc-specifiers && pnpm run test:doc-specifiers && pnpm run check:package-metadata && pnpm run test:package-metadata && pnpm run test:public-api && pnpm run style-policy && pnpm run check:source-policy && pnpm run check:lifecycle-super && pnpm run test:lifecycle-super && pnpm run check:test-assertions && pnpm run check:part-reachability && pnpm run test:part-reachability && pnpm run provenance-policy && pnpm run contract-checklist && node scripts/check-component-coverage.mjs && node scripts/check-migration-coverage.mjs && node scripts/check-token-references.mjs && node scripts/check-contrast.mjs && pnpm run manifest:check && pnpm run manifest:coverage && pnpm run check:framework-types && pnpm run test:framework-types && pnpm run llms-freshness && pnpm run llms:check && pnpm run check:component-inventory && pnpm run test:component-inventory && pnpm run test:pinned-upstream-manifests && pnpm run check:component-metadata && pnpm run test:component-metadata && pnpm run check:autoloader-manifest && pnpm run test:autoloader-manifest && pnpm run check:tag-aliases && pnpm run test:tag-aliases && pnpm run test:architecture && pnpm run check-side-effects && pnpm run test:side-effects && pnpm run check:form-associated && pnpm run check:component-dependencies && pnpm run test:component-dependencies && pnpm run check:composed-child-contracts && pnpm run test:composed-child-contracts && pnpm run check:component-quality && pnpm run test:package-size && pnpm run check:qualification && pnpm run test:qualification && pnpm run check:event-barrel && pnpm run check:event-contracts && pnpm run test:event-contracts && pnpm run check:event-types && pnpm run check:collection-event-ownership && pnpm run check:cycles && pnpm run check:interaction-states && pnpm run test:interaction-states && pnpm run check:value-named-tokens && pnpm run check:design-tokens && pnpm run test:design-tokens && pnpm run check:hit-area && pnpm run test:hit-area && pnpm run check:numeric-guards && pnpm run check:palette-freshness && pnpm run check:default-string-slices && pnpm run test:default-string-slices && pnpm run check:default-strings && pnpm run check:translations && pnpm run test:translation-reviews && pnpm run check:style-vocabulary && pnpm run test:style-vocabulary && pnpm run test:default-strings && pnpm run test:tooling && pnpm run check:llms-root-barrel && pnpm run test:llms-root-barrel && pnpm run test:llms-gaps",
+    "lint:ci-shard": "node scripts/lint-ci-shard.mjs",
     "lint": "pnpm run contract-policy && tsc --noEmit -p tsconfig.json && pnpm run test:types",
     "check:translations": "node scripts/check-translations.mjs",
     "test:translation-reviews": "node scripts/translation-review.test.mjs",

package/vscode-css-data.json

@@ -13329,6 +13329,27 @@
         "value": "**`<lr-timeline-item>`** (default: `var(--lr-timeline-marker-color)`) — Static outline color for the current/in-progress marker. The outline remains visible when reduced motion disables the optional pulse animation."
       }
     },
+    {
+      "name": "--lr-timeline-cluster-bg",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-timeline>`, `<lr-timeline-item>`** (default: `var(--lr-color-brand)`) — Cluster count pill background."
+      }
+    },
+    {
+      "name": "--lr-timeline-cluster-color",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-timeline>`, `<lr-timeline-item>`** (default: `var(--lr-color-on-brand)`) — Cluster count pill foreground."
+      }
+    },
+    {
+      "name": "--lr-timeline-cluster-size",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-timeline>`** (default: `var(--lr-size-2rem)`) — Minimum inline and block size of the painted count pill. Its containing button retains the shared 40px minimum action surface.\n\n**`<lr-timeline-item>`** (default: `var(--lr-size-2rem)`) — Minimum inline and block size of the painted cluster count pill. Its containing button retains the shared 40px minimum action surface."
+      }
+    },
     {
       "name": "--lr-timeline-collision-offset",
       "description": {