@aceshooting/lyra-ui 17.0.0 → 18.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/CHANGELOG.md +254 -0
  2. package/README.md +2 -2
  3. package/custom-elements.json +1 -1
  4. package/dist/cli/migration-contract.json +1 -1
  5. package/dist/components/conversation/streaming-text/streaming-text-core.class.d.ts +22 -0
  6. package/dist/components/conversation/streaming-text/streaming-text-core.class.js +1 -0
  7. package/dist/components/conversation/streaming-text/streaming-text.class.d.ts +22 -0
  8. package/dist/components/conversation/streaming-text/streaming-text.class.js +1 -0
  9. package/dist/components/conversation/thread-list/thread-list.class.js +1 -1
  10. package/dist/components/data/table/table.styles.js +1 -1
  11. package/dist/components/forms/combobox/combobox.class.d.ts +12 -2
  12. package/dist/components/forms/combobox/combobox.class.js +2 -2
  13. package/dist/components/forms/combobox/combobox.styles.js +1 -1
  14. package/dist/components/forms/select/select.class.d.ts +31 -5
  15. package/dist/components/forms/select/select.class.js +2 -2
  16. package/dist/components/layout/filter-bar/filter-bar.class.d.ts +68 -6
  17. package/dist/components/layout/filter-bar/filter-bar.class.js +2 -2
  18. package/dist/components/layout/reorder-list/reorder-list.class.js +1 -1
  19. package/dist/components/layout/virtual-list/virtual-list.class.d.ts +107 -2
  20. package/dist/components/layout/virtual-list/virtual-list.class.js +12 -7
  21. package/dist/components/media/map/map.class.d.ts +138 -12
  22. package/dist/components/media/map/map.class.js +25 -20
  23. package/dist/components/media/map/map.styles.js +1 -1
  24. package/dist/custom-elements-jsx.d.ts +1 -1
  25. package/dist/events.d.ts +7 -1
  26. package/dist/internal/package-metadata.d.ts +1 -1
  27. package/dist/internal/package-metadata.js +1 -1
  28. package/dist/lyra.d.ts +1 -1
  29. package/dist/lyra.js +1 -1
  30. package/dist/svelte.d.ts +1 -1
  31. package/dist/testing/lyra-tag-event-map.js +1 -1
  32. package/dist/translations/ar/retrieval.js +1 -1
  33. package/dist/translations/ar/shared.js +1 -1
  34. package/dist/translations/de/retrieval.js +1 -1
  35. package/dist/translations/de/shared.js +1 -1
  36. package/dist/translations/es/retrieval.js +1 -1
  37. package/dist/translations/es/shared.js +1 -1
  38. package/dist/translations/fa/retrieval.js +1 -1
  39. package/dist/translations/fa/shared.js +1 -1
  40. package/dist/translations/fr/retrieval.js +1 -1
  41. package/dist/translations/fr/shared.js +1 -1
  42. package/dist/translations/he/retrieval.js +1 -1
  43. package/dist/translations/he/shared.js +1 -1
  44. package/dist/translations/it/retrieval.js +1 -1
  45. package/dist/translations/it/shared.js +1 -1
  46. package/dist/translations/ja/retrieval.js +1 -1
  47. package/dist/translations/ja/shared.js +1 -1
  48. package/dist/translations/pt-BR/retrieval.js +1 -1
  49. package/dist/translations/pt-BR/shared.js +1 -1
  50. package/dist/translations/ro/agent-tools.d.ts +1 -0
  51. package/dist/translations/ro/agent-tools.js +1 -0
  52. package/dist/translations/ro/charts.d.ts +1 -0
  53. package/dist/translations/ro/charts.js +1 -0
  54. package/dist/translations/ro/conversation.d.ts +1 -0
  55. package/dist/translations/ro/conversation.js +1 -0
  56. package/dist/translations/ro/data.d.ts +1 -0
  57. package/dist/translations/ro/data.js +1 -0
  58. package/dist/translations/ro/forms.d.ts +1 -0
  59. package/dist/translations/ro/forms.js +1 -0
  60. package/dist/translations/ro/layout.d.ts +1 -0
  61. package/dist/translations/ro/layout.js +1 -0
  62. package/dist/translations/ro/media.d.ts +1 -0
  63. package/dist/translations/ro/media.js +1 -0
  64. package/dist/translations/ro/overlays.d.ts +1 -0
  65. package/dist/translations/ro/overlays.js +1 -0
  66. package/dist/translations/ro/retrieval.d.ts +1 -0
  67. package/dist/translations/ro/retrieval.js +1 -0
  68. package/dist/translations/ro/shared.d.ts +1 -0
  69. package/dist/translations/ro/shared.js +1 -0
  70. package/dist/translations/ro/utility.d.ts +1 -0
  71. package/dist/translations/ro/utility.js +1 -0
  72. package/dist/translations/ro/viewers.d.ts +1 -0
  73. package/dist/translations/ro/viewers.js +5 -0
  74. package/dist/translations/ro.d.ts +1 -0
  75. package/dist/translations/ro.js +1 -0
  76. package/dist/translations/ru/retrieval.js +1 -1
  77. package/dist/translations/ru/shared.js +1 -1
  78. package/dist/translations/zh-CN/retrieval.js +1 -1
  79. package/dist/translations/zh-CN/shared.js +1 -1
  80. package/dist/vue.d.ts +1 -1
  81. package/llms/components/lr-button.md +5 -4
  82. package/llms/components/lr-card.md +2 -1
  83. package/llms/components/lr-combobox.md +7 -0
  84. package/llms/components/lr-filter-bar.md +86 -3
  85. package/llms/components/lr-icon-button.md +2 -1
  86. package/llms/components/lr-map.md +63 -6
  87. package/llms/components/lr-option.md +7 -0
  88. package/llms/components/lr-select.md +19 -2
  89. package/llms/components/lr-streaming-text-core.md +7 -3
  90. package/llms/components/lr-streaming-text.md +7 -2
  91. package/llms/components/lr-virtual-list.md +53 -0
  92. package/llms/shared.md +6 -3
  93. package/llms-full.txt +273 -22
  94. package/package.json +28 -2
  95. package/registrations.json +1 -1
  96. package/vscode-css-data.json +1 -1
  97. package/vscode-html-data.json +1 -1
  98. package/web-types.json +1 -1
@@ -373,10 +373,11 @@ box no matter what tier or override is in play.
373
373
  For toggle buttons, host `aria-pressed="true|false|mixed"` reaches the focused native button —
374
374
  BUTTONS only. A link button (`href` set) never receives it, because `role="link"` does not support
375
375
  `aria-pressed`; remove `href` and the same host attribute starts reaching the `<button>` that
376
- replaces the anchor. Navigation can use the global
377
- `aria-current="page|step|location|date|time|true|false"`, which does reach the anchor. Both states
378
- update reactively, including native `ariaPressed`/`ariaCurrent` property assignments, attribute
379
- removal and `href` changes. Empty or unsupported tokens are omitted. The native button/link role
376
+ replaces the anchor. That link carve-out arrived in **16.0.0** — before it, `aria-pressed` was
377
+ forwarded onto the anchor as well, asserting a state `role="link"` does not have. Navigation can
378
+ use the global `aria-current="page|step|location|date|time|true|false"`, which does reach the
379
+ anchor. Both states update reactively, including native `ariaPressed`/`ariaCurrent` property
380
+ assignments, attribute removal and `href` changes. Empty or unsupported tokens are omitted. The native button/link role
380
381
  remains unchanged for an enabled control: use pressed state for button toggles and current state
381
382
  for navigation links. A DISABLED link button drops `href` (so it genuinely cannot navigate) and
382
383
  therefore also drops the anchor's implicit role, so it renders an explicit `role="link"` — without
@@ -73,7 +73,8 @@ to `<wa-card>`'s contract, staying slot-compatible with `lr-result-card` where t
73
73
  - `aria-pressed` and `aria-current` (attributes only) — forwarded reactively onto the native
74
74
  control the card actually renders, the same mechanism `<lr-button>` and `<lr-icon-button>` use.
75
75
  `aria-pressed` accepts `'true' | 'false' | 'mixed'` and reaches the `activation-button` only —
76
- `link` has no pressed state, so a linked card never receives it. The global `aria-current`
76
+ `link` has no pressed state, so a linked card never receives it the same **16.0.0** carve-out
77
+ `<lr-button>` and `<lr-icon-button>` took. The global `aria-current`
77
78
  accepts `'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'` and reaches both the
78
79
  activation button and the stretched link. Anything outside those sets is dropped rather than
79
80
  passed through, so a typo never reaches the accessibility tree. This is what lets a single-select
@@ -167,6 +167,13 @@ An async `source` row can carry the same two fields (`start`, `end`) alongside i
167
167
  default; an explicit instance value always wins. There is deliberately no `hoist` alias here:
168
168
  unlike on `lr-select`, where it is Shoelace's established spelling, it would be a boolean
169
169
  defaulting to `true`, so its attribute could only ever express the value the control already has
170
+ - `sync?: PlaceSync` (reflected) — copies the trigger's width, height, or both onto the listbox,
171
+ spelled the same as on `lr-dropdown`/`lr-popup`/`lr-popover`. Unset (the default), the listbox
172
+ sizes to its own content, clamped between `--lr-size-12rem` and `--lr-size-28rem`, exactly as
173
+ before. `sync="width"` drops that content-based clamp (keeping only the outer viewport/
174
+ available-space ceiling) so a full-width trigger with short option labels gets a listbox that
175
+ aligns to its own edges instead of floating narrower in the middle. Like `placement`, a change
176
+ takes effect the next time the listbox opens
170
177
  - `clearable: boolean = false` (reflected) — displays the clear button while there is something to
171
178
  clear on **either** axis this control owns: a committed selection, or _visible_ filter text. See
172
179
  "the clear button covers two axes" below
@@ -21,7 +21,10 @@ Dashboard filter row that composes Lyra inputs and removable chips, with reset a
21
21
  Choice option entries must expose string `value` and `label` data fields; malformed entries are
22
22
  omitted independently, while supplied empty strings remain valid. A custom definition requires its
23
23
  adapter and a callable `render`; a rejected definition does not reserve its filter ID. Valid
24
- siblings remain available. Exceptions thrown by an admitted trusted renderer still propagate.
24
+ siblings remain available. Exceptions thrown by an admitted trusted renderer still propagate. A
25
+ chip-only definition requires neither options nor an adapter — a stable filter ID and a label are
26
+ the whole schema, since a malformed `formatValue`/`isEmpty` still has a correct fallback and so is
27
+ guarded where it is used rather than rejected outright.
25
28
 
26
29
  **Lean registration entry.** `components/layout/filter-bar/filter-bar.js` (the default entry)
27
30
  eagerly imports every composed control this bar could possibly render — `<lr-select>`,
@@ -42,6 +45,7 @@ the filter `type`s actually declared:
42
45
  | `'checkbox-menu'` | `components/overlays/overlay/dropdown.js` **and** `components/layout/menu/dropdown-item.js` |
43
46
  | `'date'` / `'date-range'` | `components/forms/date-picker/date-input.js` |
44
47
  | `'text'` | `components/forms/input/input.js` |
48
+ | `'chip'` | none — renders no control |
45
49
 
46
50
  Two more are unconditional regardless of which filter `type`s are declared: `<lr-button>` renders
47
51
  the reset action on every bar, and `<lr-chip>`/`<lr-chip-group>` render the active-filter row
@@ -222,7 +226,9 @@ same-named counterparts (with `combobox`'s `multiple` opting into a multi-value
222
226
  `'date'`/`'date-range'` both map to `<lr-date-input>` (single vs. `mode="range"`), and `'text'` maps
223
227
  to `<lr-input>` for an open-ended free-text query rather than a closed choice set. A `'text'`
224
228
  filter's value is the raw query string, verbatim, and its chip shows exactly that string — the same
225
- text the user typed, not a truncated or normalized form.
229
+ text the user typed, not a truncated or normalized form. `'chip'` is the one type that renders no
230
+ control at all (see **Chip-only filters** below): its value belongs to a widget elsewhere on the
231
+ page, so the bar renders only its active-filter chip and gives it no toolbar cell.
226
232
 
227
233
  Every built-in (non-`'custom'`) filter definition additionally accepts optional `size: LyraSize`,
228
234
  `icon: unknown` and `labelVisibility: 'visible' | 'hidden'` fields, and every one whose composed
@@ -438,12 +444,89 @@ const filters: LyraFilterBarFilterDefinition[] = [
438
444
  The custom renderer returns a Lit `TemplateResult`; the filter bar places it in its
439
445
  `filter-control` part and re-renders it whenever the controlled value or validation state changes.
440
446
 
447
+ ### Chip-only filters
448
+
449
+ Use `type: 'chip'` when the value is already owned by a widget elsewhere on the page — a calendar
450
+ heatmap cell, a map selection, a chart brush — and the bar's job is only to *show* that the filter
451
+ is applied and to let the user take it off. Unlike `type: 'custom'`, which still renders a control
452
+ inside the toolbar, a chip-only filter renders **no control and no toolbar cell at all**: no `field`
453
+ wrapper is emitted for it, so `lr-filter-bar::part(field)` and `::part(field-<filterId>)` never
454
+ match one and a bar whose filters are *all* chip-only shows no empty column — its `controls` row
455
+ still holds the reset button (the "clear all" action such a bar needs), the `end` slot, and the
456
+ loading spinner, exactly like a bar with no filters at all.
457
+
458
+ Everything else is unchanged from any other filter type. The value lives in `value` under its own
459
+ filter ID, rides every `lr-input`/`lr-reset` detail, counts toward `hasActiveFilters` (so it enables
460
+ the reset button) and toward `invalidFilterIds` when the definition is `required`, renders a
461
+ removable active-filter chip subject to `activeFiltersDisplay`, and is cleared both by removing that
462
+ chip and by `reset()`. A `required` chip-only filter is honoured in **bookkeeping only**: it joins
463
+ `invalidFilterIds`, fails `checkValidity()` and moves `lr-validity-change`, but renders no inline
464
+ error, because the bar renders no element of its own for it — the owning widget is responsible for
465
+ its own error affordance. The inherited `placeholder` is inert here for the same reason it is for
466
+ `type: 'custom'`: there is no field to place it in.
467
+
468
+ A chip-only definition adds three optional fields of its own:
469
+
470
+ ```ts
471
+ type: 'chip';
472
+ formatValue?: (value: LyraFilterBarFieldValue, locale: string) => string;
473
+ clearValue?: LyraFilterBarFieldValue;
474
+ isEmpty?: (value: LyraFilterBarFieldValue) => boolean;
475
+ ```
476
+
477
+ `formatValue` produces the chip's text, and its `locale` argument is the bar's `effectiveLocale` —
478
+ the same locale every built-in type's own chip formatting and a custom adapter's `formatValue`
479
+ already receive, and the reason a chip-only value (normally an already-formatted string such as a
480
+ localized date) can be localized by the caller. That output is caller data, so — like a filter's
481
+ own label — the bar never routes it through its own localization. Omitted, the fallback ladder is
482
+ the one a custom adapter's omitted `formatValue` uses: a string array renders as a localized
483
+ conjunction list, anything else renders verbatim through `String(value)`, and an unset value renders
484
+ as the empty string. Verbatim is exact: a chip-only value is never run through the date branch that
485
+ localizes a `'date'`/`'date-range'` chip, so an ISO day is not silently reformatted and a value
486
+ containing a slash is not mangled.
487
+
488
+ `clearValue` is what a chip removal (and `clearFilter()`) writes, defaulting to the empty string —
489
+ what every non-multi built-in type writes. Declare an empty array for an array-valued chip-only
490
+ filter. `isEmpty` overrides the built-in emptiness rule (absent, `false`, the empty string and the
491
+ empty array are empty; everything else is set). **A domain sentinel must pair the two**: declaring
492
+ a sentinel clear value without a matching `isEmpty` leaves the bar reading the "cleared" value as
493
+ still set, so it keeps rendering a chip for it — the identical pairing a custom adapter's own
494
+ `clearValue`/`isEmpty` documents. With the pair declared, the sentinel is never stored in `value`
495
+ (cleared keys are omitted) and an absent key reads back as the sentinel for the owning widget.
496
+
497
+ ```ts
498
+ const filters: LyraFilterBarFilterDefinition[] = [
499
+ { filterId: "query", label: "Query", type: "text" },
500
+ {
501
+ filterId: "day",
502
+ label: "Day",
503
+ type: "chip",
504
+ formatValue: (value, locale) =>
505
+ new Intl.DateTimeFormat(locale, {
506
+ dateStyle: "medium",
507
+ timeZone: "UTC",
508
+ }).format(new Date(`${String(value)}T00:00:00Z`)),
509
+ },
510
+ ];
511
+
512
+ // The calendar heatmap beside the bar owns the value; the bar only shows and removes it.
513
+ heatmap.addEventListener("app-select-day", (event) => {
514
+ const { isoDate } = (event as CustomEvent<{ isoDate: string }>).detail;
515
+ bar.value = { ...bar.value, day: isoDate };
516
+ });
517
+ bar.addEventListener("lr-input", (event) => {
518
+ const { value } = (event as LyraFilterBarInputEvent).detail;
519
+ heatmap.selectedDay = (value["day"] as string | undefined) ?? "";
520
+ });
521
+ ```
522
+
441
523
  **TypeScript:** `LyraFilterBar<Defs extends readonly LyraFilterBarFilterDefinition[] =
442
524
  readonly LyraFilterBarFilterDefinition[]>` — `value` and the `lr-input`/`lr-reset` detail `value`
443
525
  narrow to a record keyed per `filterId`, whose value type follows that filter's own definition (a
444
526
  `'select'`, a non-`multiple` `'combobox'`, `'text'`, `'date'`, and `'date-range'` narrow to
445
527
  `string`; a `'checkbox-menu'` and a `multiple: true` `'combobox'` narrow to `readonly string[]`; a
446
- `'custom'` filter keeps the full unconstrained field value). Declare the schema with `as const
528
+ `'custom'` filter keeps the full unconstrained field value, and so does a `'chip'` filter, whose
529
+ value is owned by a widget this component never renders). Declare the schema with `as const
447
530
  satisfies readonly LyraFilterBarFilterDefinition[]` and type the element as
448
531
  `LyraFilterBar<typeof FILTERS>` to pick it up. Types only; the runtime is unchanged, and an untyped
449
532
  `<lr-filter-bar>` keeps today's `LyraFilterBarValue` (`Readonly<Record<string, string | readonly
@@ -69,7 +69,8 @@ button whose purpose isn't generic.
69
69
  Host `aria-haspopup` and `aria-expanded` values are forwarded reactively to the shadow-internal
70
70
  native button. `aria-pressed` (`true`, `false`, `mixed`) supports icon-only toggle actions such as
71
71
  mute, favorite, or pin, and reaches the `<button>` rendering only — a link icon-button (`href` set)
72
- never receives it, since `role="link"` has no pressed state; `aria-current` (`page`, `step`,
72
+ never receives it, since `role="link"` has no pressed state (that carve-out arrived in **16.0.0**;
73
+ earlier versions forwarded it onto the anchor too); `aria-current` (`page`, `step`,
73
74
  `location`, `date`, `time`, `true`, `false`) is global and supports current-item icon buttons such
74
75
  as an active nav/pagination target in both renderings. Both follow attribute
75
76
  changes, removal, and button/link replacement without changing the native role of an enabled
@@ -9,7 +9,7 @@
9
9
  - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt)
10
10
  - **Deprecations** none
11
11
  - **Optional peers** `maplibre-gl` — see `llms/peers.md`
12
- - **Themeable via** 20 parts, 6 custom properties — see this component's own `@csspart`/`@cssprop` list below
12
+ - **Themeable via** 22 parts, 8 custom properties — see this component's own `@csspart`/`@cssprop` list below
13
13
  - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
14
14
 
15
15
  ---
@@ -72,10 +72,18 @@ LyraMapLegendPattern }`, where `LyraMapLegendPattern` is `'solid' | 'diagonal' |
72
72
  'crosshatch'`. Pattern is required so color is never the sole category cue. At most 100 valid
73
73
  rows, 256 characters per label, and 8,192 aggregate label characters are retained; colors are
74
74
  bounded before validation. The overlay scrolls within the map allocation.
75
+ A row may also carry its own `value`: the category key that row stands for — the same string a
76
+ `point.colors`/`point.icons` entry matches against `point.field`/`point.iconField`. It is
77
+ trimmed, bounded to 256 characters (sliced, never ellipsized, so a bounded key still matches) and
78
+ **retained** in the canonical readback; a non-string, empty or whitespace-only key leaves no
79
+ `value` property on the frozen row at all. It is what makes a row operable under
80
+ `legendInteractive`, and it does not count toward the label budget.
75
81
  A row may also carry `icon`, deliberately the same record a `point.icons` entry uses — hand the
76
82
  legend the very icon object its point layer renders and the key shows the symbol drawn on the
77
- map instead of describing it in colour alone. The point layer's category key (`value`) is
78
- accepted so a pass-through needs no reshaping, and is left out of the canonical readback;
83
+ map instead of describing it in colour alone. The **icon record's own** `value` is a separate
84
+ field from the row-level one above: it is accepted so a pass-through needs no reshaping, and it
85
+ is still left out of the canonical readback. A row's key is never derived from its glyph's, which
86
+ would silently make a row interactive that the author never marked;
79
87
  `path`, `viewBox`, `mode`, `strokeWidth`, `lineCap` and `lineJoin` keep their point-icon meaning
80
88
  and their point-icon defaults, and the same validation applies (path data only, at most 8,192
81
89
  characters, positive `viewBox` dimensions). An unusable record is dropped and that row keeps
@@ -84,6 +92,22 @@ LyraMapLegendPattern }`, where `LyraMapLegendPattern` is `'solid' | 'diagonal' |
84
92
  omittedCount, truncatedLabelCount, truncated }` result for the latest assignment. A truncated
85
93
  projection renders a localized visible `1–N of M items` summary rather than silently claiming
86
94
  the bounded rows are complete.
95
+ - `legendInteractive: boolean = false` (attribute `legend-interactive`, reflected) — opt-in: turns
96
+ every legend row that carries a `value` into a keyboard-operable visibility toggle, and leaves a
97
+ row without one inert. Unset, the legend renders exactly the read-only key it rendered before —
98
+ no `button`, no extra attribute, and no extra MapLibre paint key. Each toggle is an independently
99
+ tabbable native `button`, so Enter and Space are the platform's own activation and there is no
100
+ roving tabindex: a 100-row interactive legend contributes 100 tab stops, exactly as a 100-series
101
+ `lr-chart` legend does. Each interactive row also grows to the shared `--lr-icon-button-size`
102
+ hit-area floor (WCAG 2.5.8), which the panel's existing `max-block-size` and scrolling contain.
103
+ - `hiddenCategories: readonly string[] = []` (attribute: false) — the complete controlled set of
104
+ muted category keys, mirroring `lr-chart`'s `hiddenDatasets`. Clone-owned and frozen; non-string,
105
+ empty, whitespace-only and duplicate entries are dropped (first occurrence wins, matching
106
+ `point.colors`), and at most 100 keys are retained. Honoured on the **first** render and the
107
+ first MapLibre paint, not only after a user toggle, so a host can restore a saved selection. An
108
+ empty array deliberately means every category is visible. It is controlled public state and
109
+ survives a disconnect/reconnect. A hidden key that matches no category is harmless. Assigning it
110
+ programmatically emits nothing.
87
111
  - `choropleth?: LyraMapChoroplethLayer` (attribute: false) — `LyraMapChoroplethLayer { sourceId:
88
112
  string; geojson: GeoJSON.FeatureCollection; field: string; stops: [number, string][]; interpolation?:
89
113
  'linear' | 'logarithmic' | 'step'; stepBaseColor?: string }` (interpolated
@@ -364,7 +388,8 @@ payload beside the map.
364
388
  `LyraMapHeatmapZoomValue`, `LyraMapLineOptions`, `LyraMapPointOptions`, `LyraMapPointRadiusOptions`,
365
389
  `LyraMapPointRadiusInterpolation`, `LyraMapPointIcon`, `LyraMapPointIconMode`,
366
390
  `LyraMapPointIconLineCap`, `LyraMapPointIconLineJoin`, `LyraMapMarker`, `LyraMapMarkerActivationDetail`,
367
- `LyraMapMarkerActivationSource`, `LyraMapStyleSpecification`, and `LyraMapInstance`.
391
+ `LyraMapMarkerActivationSource`, `LyraMapLegendToggleDetail`, `LyraMapStyleSpecification`, and
392
+ `LyraMapInstance`.
368
393
  The former `LegendEntry`, `ChoroplethLayer`, `GeoJsonDataLayer`, and `MapMarker` names are removed
369
394
  in v9 rather than retained as aliases.
370
395
 
@@ -380,7 +405,17 @@ shared `maplibre-gl` import without constructing a map or allocating a WebGL con
380
405
  an element.
381
406
 
382
407
  **Events:** `lr-map-load` (fired once, after the underlying map's own `'load'`),
383
- `lr-map-marker-activate` (non-cancelable; frozen `LyraMapMarkerActivationDetail { id, lngLat,
408
+ `lr-map-legend-toggle` (**cancelable**; frozen `LyraMapLegendToggleDetail { value, visible,
409
+ hiddenCategories }` — the activated row's category key, its proposed visibility, and the complete
410
+ proposed hidden set in the order it would be committed, with the array detached and frozen so a
411
+ listener cannot mutate the component's state through it). `preventDefault()` is a genuine veto, not
412
+ a notification: `hiddenCategories` is not written, the row's `aria-pressed` does not change, the
413
+ MapLibre paint is untouched, and nothing is announced — which is exactly what a host needs to own
414
+ the set and assign its own value instead. There is deliberately no second, confirmation event: the
415
+ committed state is `hiddenCategories`, which the host already observes, so a paired before/after
416
+ vocabulary would be permanent public surface nobody asked for. The event is a DOM-interaction
417
+ proposal only, so a programmatic `hiddenCategories` assignment reconciles without emitting it.
418
+ Also `lr-map-marker-activate` (non-cancelable; frozen `LyraMapMarkerActivationDetail { id, lngLat,
384
419
  marker, source }`; `id` is the trimmed explicit identity or `undefined`, `marker` is the accepted
385
420
  declarative snapshot, and `source` is `'pointer' | 'keyboard'`), and `lr-map-click`
386
421
  (frozen `detail: { readonly lngLat: readonly [lng, lat], readonly feature?, readonly origin?,
@@ -404,7 +439,8 @@ markup as described above.
404
439
  stays positioned with the map instead of floating beside it. Supplying it opens the panel even
405
440
  when `legend` and `legendGradient` are both empty.
406
441
 
407
- **CSS parts:** `base`, `container`, `legend`, `legend-swatch`, `legend-gradient`, `legend-lo`,
442
+ **CSS parts:** `base`, `container`, `legend`, `legend-swatch`, `legend-toggle`,
443
+ `legend-toggle-hidden`, `legend-gradient`, `legend-lo`,
408
444
  `legend-hi`, `legend-limit`, `marker`, `popup`,
409
445
  `popup-content`, `popup-close-button`, `attribution`, `attribution-toggle`, `navigation`,
410
446
  `zoom-in`, `zoom-out`, `compass`, `scale`, `error`.
@@ -429,6 +465,18 @@ visible label carries its meaning. That association is advertised only while it
429
465
  the optional `maplibre-gl` peer is still loading, and after any failure, there is no map
430
466
  container in the tree, so `legend` withholds `aria-controls` rather than leaving a dangling
431
467
  idref.
468
+ Under `legendInteractive`, a row carrying a `value` wraps its swatch and label in a
469
+ `legend-toggle` `button` with `aria-pressed` rendered as the literal `"true"`/`"false"` — never
470
+ omitted, because a missing attribute reports "not a toggle button" rather than "unpressed". The
471
+ button's accessible name is its own visible label (caller-supplied data, so deliberately not
472
+ localized), scoped by the legend's own localized group name; no `aria-label` restates the state,
473
+ which would make assistive tech announce it twice. A hidden row's button additionally carries the
474
+ `legend-toggle-hidden` token — state lives in the part name, so `::part(legend-toggle-hidden)` is a
475
+ reachable hook — and dims only its `aria-hidden` swatch while re-colouring the label through the
476
+ quiet text token, so the label keeps AA contrast rather than fading with the whole button. In
477
+ forced colors the hidden row falls back to `line-through`, which survives a system-color collapse.
478
+ Each activation is announced through the shared light-DOM polite live region, using the same
479
+ `legendTypeShown`/`legendTypeHidden` strings `lr-graph-legend` announces with.
432
480
  `legend-limit` is the localized bounded-projection summary. The five peer-chrome parts project
433
481
  stable Lyra names onto MapLibre-generated DOM without erasing peer-supplied part tokens;
434
482
  `marker` retains a 24px minimum target in both axes even when a peer/custom marker has no intrinsic
@@ -460,6 +508,15 @@ integration; there is no declarative controls property.
460
508
  - `--lr-map-choropleth-fill-opacity` (default `0.75`) — fill opacity for the declarative
461
509
  `choropleth` layer and polygon fills in every `dataLayers` entry. It intentionally inherits from
462
510
  an ancestor, so one scoped declaration rethemes every nested map without setting each host.
511
+ - `--lr-map-hidden-category-opacity` (default `0.15`) — opacity a category listed in
512
+ `hiddenCategories` is muted to in the rendered MapLibre paint: `circle-opacity` and
513
+ `circle-stroke-opacity` on the points layer and `icon-opacity` on the point-icon symbol layer.
514
+ Like the fill-opacity token it is read from the resolved cascade on every paint, because MapLibre
515
+ draws to a WebGL canvas the CSS cascade never reaches, and it inherits from an ancestor. A
516
+ `kind: 'heatmap'` entry is out of scope: a density surface has no per-category field to mute.
517
+ - `--lr-map-legend-hidden-swatch-opacity` (default `0.5`) — opacity of a hidden interactive legend
518
+ row's decorative swatch. Only the `aria-hidden` swatch dims; the label re-colours through
519
+ `--lr-color-text-quiet` instead, so it never drops below 4.5:1.
463
520
  - `--lr-map-popup-close-button-hover-bg` (default `var(--lr-color-brand-quiet)`) and
464
521
  `--lr-map-popup-close-button-hover-color` (default `var(--lr-color-brand)`) — hover background
465
522
  and foreground of `popup-close-button`.
@@ -167,6 +167,13 @@ An async `source` row can carry the same two fields (`start`, `end`) alongside i
167
167
  default; an explicit instance value always wins. There is deliberately no `hoist` alias here:
168
168
  unlike on `lr-select`, where it is Shoelace's established spelling, it would be a boolean
169
169
  defaulting to `true`, so its attribute could only ever express the value the control already has
170
+ - `sync?: PlaceSync` (reflected) — copies the trigger's width, height, or both onto the listbox,
171
+ spelled the same as on `lr-dropdown`/`lr-popup`/`lr-popover`. Unset (the default), the listbox
172
+ sizes to its own content, clamped between `--lr-size-12rem` and `--lr-size-28rem`, exactly as
173
+ before. `sync="width"` drops that content-based clamp (keeping only the outer viewport/
174
+ available-space ceiling) so a full-width trigger with short option labels gets a listbox that
175
+ aligns to its own edges instead of floating narrower in the middle. Like `placement`, a change
176
+ takes effect the next time the listbox opens
170
177
  - `clearable: boolean = false` (reflected) — displays the clear button while there is something to
171
178
  clear on **either** axis this control owns: a committed selection, or _visible_ filter text. See
172
179
  "the clear button covers two axes" below
@@ -130,7 +130,17 @@ exactly like the multi-option case, until the trigger is actually activated.
130
130
  - `getUnknownLabel?: (value: string) => string` (attribute: false) — renders the label for a
131
131
  committed value that matches no option, everywhere it appears (trigger, `multiple` tag, synthetic
132
132
  row). `getTag` cannot serve this case: it is handed a matched option and there is none. A blank
133
- return falls back to the raw value
133
+ return falls back to the raw value. Not consulted while `loading` suppresses that same value —
134
+ see below
135
+ - `loading: boolean = false` (reflected) — whether a committed value's real label may still be
136
+ pending because its `<lr-option>` catalog hasn't arrived yet (e.g. an async fetch still in
137
+ flight). While `true`, a committed value that currently matches no option renders the localized
138
+ `loading` placeholder in the trigger label or the relevant `multiple` tag instead of the raw
139
+ value, with no `notInCatalog`/`[part='unknown-value']` badge and no synthetic
140
+ `showUnknownOption` listbox row — "not yet resolved" is a different state from "known to be
141
+ missing". A value already matching a live option is unaffected. Never mutates
142
+ `value`/`selectedOptions` itself, and does not itself disable the trigger — pair it with
143
+ `disabled` when the control should also be non-interactive while pending
134
144
  - `filled: boolean = false` (reflected) — Shoelace alias for the filled trigger treatment
135
145
  - `autofocus: boolean = false` / `title: string = ''` — forwarded to the internal trigger
136
146
  - `multiple: boolean = false` (reflected) — several options selectable at once; see "Multi-select"
@@ -182,7 +192,14 @@ from a removed option, or a programmatic assignment with a typo) still commits
182
192
  stays fully reachable through `value`/`selectedOptions` — but renders a dashed/italic
183
193
  `[part='unknown-value']` badge next to the trigger label, or on the relevant `multiple`-mode tag,
184
194
  instead of an unexplained bare label, mirroring `<lr-model-select>`'s synthetic "not in catalog"
185
- stale-value row — see `--lr-select-unknown-value-border-style`/`-color` below.
195
+ stale-value row — see `--lr-select-unknown-value-border-style`/`-color` below. Set `loading` while
196
+ that same value's own `<lr-option>` catalog simply hasn't arrived yet (unlike `<lr-combobox>`,
197
+ `<lr-select>` has no async `source` of its own, so this is consumer-driven rather than automatic):
198
+ a still-unmatched value then renders the localized `loading` placeholder instead of the raw value,
199
+ with no `unknown-value` badge and no synthetic `showUnknownOption` row, since it is not yet known
200
+ to be missing. Once the matching option mounts, the real label renders on the next render with no
201
+ `value`/`selectedOptions` re-assignment needed, whether or not `loading` is also flipped back to
202
+ `false`.
186
203
 
187
204
  **Methods:** `focus(options?)`, `blur()`, and `click()` forward to the internal trigger button.
188
205
  `show()` and `hide()` return `Promise<void>` and resolve after `lr-after-show`/`lr-after-hide` once
@@ -9,7 +9,7 @@
9
9
  - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt)
10
10
  - **Deprecations** none
11
11
  - **Optional peers** `dompurify`, `katex`, `marked`, `shiki` — see `llms/peers.md`
12
- - **Themeable via** 2 parts, 2 custom properties — see this component's own `@csspart`/`@cssprop` list below
12
+ - **Themeable via** 13 parts, 2 custom properties — see this component's own `@csspart`/`@cssprop` list below
13
13
  - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
14
14
 
15
15
  ---
@@ -59,8 +59,12 @@ share one implementation.
59
59
 
60
60
  **Slots:** none — content renders from `content`, not a slot.
61
61
 
62
- **CSS parts:** `base`, `cursor` (only rendered while `streaming` is `true`) identical to
63
- `<lr-streaming-text>`'s own.
62
+ **CSS parts:** `base`, `cursor` (only rendered while `streaming` is `true`), plus every part
63
+ `<lr-markdown-core>` documents forwarded verbatim from the composed `<lr-markdown-core>` in
64
+ Markdown mode via `exportparts`: `content`, `heading`, `paragraph`, `list`, `code-block`,
65
+ `inline-code`, `link`, `table`, `blockquote`, `img`, `math` — the identical forwarded list
66
+ `<lr-streaming-text>` documents, since `<lr-markdown>` and `<lr-markdown-core>` share the same
67
+ documented part vocabulary.
64
68
 
65
69
  **Themeable custom properties:** `--lr-inline-cursor-width` (default `var(--lr-size-0-125rem)`) and
66
70
  `--lr-inline-cursor-height` (default `var(--lr-size-1em)`) — the same shared inline-cursor tokens
@@ -9,7 +9,7 @@
9
9
  - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt)
10
10
  - **Deprecations** none
11
11
  - **Optional peers** `dompurify`, `katex`, `marked`, `shiki` — see `llms/peers.md`
12
- - **Themeable via** 2 parts, 2 custom properties — see this component's own `@csspart`/`@cssprop` list below
12
+ - **Themeable via** 13 parts, 2 custom properties — see this component's own `@csspart`/`@cssprop` list below
13
13
  - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
14
14
 
15
15
  ---
@@ -83,7 +83,12 @@ never see that update happen. See `<lr-thinking-panel>`'s own reference at `llms
83
83
 
84
84
  **Slots:** none — content renders from `content`, not a slot.
85
85
 
86
- **CSS parts:** `base`, `cursor` (only rendered while `streaming` is `true`)
86
+ **CSS parts:** `base`, `cursor` (only rendered while `streaming` is `true`), plus every part
87
+ `<lr-markdown>` documents forwarded verbatim (no aliasing — none collides with `base`/`cursor`)
88
+ from the composed `<lr-markdown>` in Markdown mode via `exportparts`: `content`, `heading`,
89
+ `paragraph`, `list`, `code-block`, `inline-code`, `link`, `table`, `blockquote`, `img`, `math`. A
90
+ host-level `lr-streaming-text::part(link)`/`::part(img)` rule reaches the rendered `<a>`/`<img>`
91
+ exactly as the same rule does applied directly to `<lr-markdown>`.
87
92
 
88
93
  **Themeable custom properties:** `--lr-inline-cursor-width` (default
89
94
  `var(--lr-size-0-125rem)`, the shared inline cursor width), `--lr-inline-cursor-height` (default
@@ -101,6 +101,17 @@ list's `base` scroll container exposes horizontal scrolling for that explicit op
101
101
  number `56` and fixes every row to that many pixels. Property callers assign a number, not a
102
102
  numeric string. Anything else (non-numeric, zero, negative, non-finite) safely canonicalizes to
103
103
  `'auto'` rather than throwing.
104
+ - `rowProjection: 'shadow' | 'light' = 'shadow'` (attribute `row-projection`) — where
105
+ `renderItem`'s output is instantiated. `'shadow'` (default) stamps it inside this component's own
106
+ shadow root, so only inherited custom properties and the public row parts reach it. `'light'`
107
+ renders the windowed rows into the host's own light DOM instead, assigned into the shadow viewport
108
+ through internal named slots, so ordinary document CSS styles a virtualized row exactly as it
109
+ styles the same row unvirtualized. The component keeps owning windowing, measurement, spacer
110
+ sizing, `scrollToIndex()`, the external-scroller mode and the ARIA contract either way, and
111
+ positioning stays on the shadow-side `[part="row"]` wrapper that document CSS cannot select — so
112
+ consumer styles can never break windowing. Any other value canonicalizes to `'shadow'`. Left
113
+ unset, the rendered output is byte-identical to before and the host's light DOM stays empty.
114
+ See **Light-DOM row projection** below for the trade-offs it carries.
104
115
  - `itemRole: 'listitem' | 'row' = 'listitem'` (attribute `item-role`) — `'listitem'` (default)
105
116
  preserves the plain `role="list"`/`role="listitem"` mapping with `aria-setsize`/`aria-posinset`.
106
117
  `'row'` additionally maps `[part="base"]` to `role="rowgroup"`, `[part="spacer"]` to
@@ -355,4 +366,46 @@ default estimate with sparse `ResizeObserver` measurements for rows that have ac
355
366
  decides: groups render before the rows, so an active row wins while (and only while) it needs to,
356
367
  which is right — a group header is a non-interactive `pointer-events: none` label.
357
368
 
369
+ ### Light-DOM row projection
370
+
371
+ `rowProjection="light"` exists for one shape: an application whose list rows are already styled by
372
+ its own global stylesheet, and which therefore could not adopt virtualization without rehoming a
373
+ dozen descendant rules per row into a new custom element or a growing set of custom properties. In
374
+ projection mode the windowed rows render into the host's own light DOM, so ordinary document CSS
375
+ reaches row content directly.
376
+
377
+ Positioning, measurement and semantics stay where they were. The `[part="row"]` wrapper remains in
378
+ the shadow root and keeps `position: absolute`, the per-frame `transform`, `role`, `aria-setsize`/
379
+ `aria-posinset` (or `aria-rowindex`) and the `ResizeObserver` box — document CSS cannot select it,
380
+ so consumer styles can never break windowing. The whole part vocabulary (`base`, `spacer`, `row`,
381
+ `group`, `sticky-group`) keeps matching in both modes, and `row-height="auto"` still measures
382
+ projected content because the light row is an ordinary in-flow child of that wrapper.
383
+
384
+ `projectedRows: HTMLElement[]` returns the projected light-DOM row wrappers in item order, and is
385
+ empty outside projection mode. The exported type is `LyraVirtualListRowProjection`; the reserved
386
+ attributes marking library-owned light-DOM nodes are exported as `VIRTUAL_LIST_ROW_ATTRIBUTE`
387
+ (`data-lr-virtual-list-row`) and `VIRTUAL_LIST_STICKY_ATTRIBUTE` (`data-lr-virtual-list-sticky`).
388
+
389
+ **Known gotchas, all inherent to handing the cascade back to the consumer:**
390
+
391
+ - **One component-owned wrapper sits between the host and your markup.** A slot cannot assign a text
392
+ node or a multi-root fragment by attribute, so each row's content lives inside a wrapper carrying
393
+ `data-lr-virtual-list-row`. Descendant selectors (`lr-virtual-list .row-title`) port unchanged;
394
+ child combinators (`lr-virtual-list > .row`), `:nth-child`, `:first-child` and sibling combinators
395
+ written against the unvirtualized markup do not. `:nth-child` on the wrappers reflects the current
396
+ *window*, not the item index.
397
+ - **`closest('[part="row"]')` stops resolving.** A delegated listener on the host now sees an
398
+ un-retargeted `event.target` inside the light DOM. Use `closest('[data-lr-virtual-list-row]')`.
399
+ - **The document cascade now reaches row content**, including resets and element-level rules that
400
+ previously could not, so a projected row can look different from the same row in shadow mode.
401
+ - **Per-row light-DOM state does not survive a disconnect/reconnect.** Disconnect removes the
402
+ projected rows completely (no rows, no markers, no anchor left behind), so a reparenting move
403
+ rebuilds them. Scroll position, measurements and the window are unaffected — they live in
404
+ component state, not in the rows.
405
+ - **Projection activates one task after hydration.** A server render has no DOM to project into, so
406
+ the first window is shadow-rendered, hydration matches the server markup, and the rows then swap
407
+ into the light DOM on the next task.
408
+ - **A row taken out of flow collapses its wrapper.** `position: fixed`/`absolute` or
409
+ `display: none` on your own row leaves nothing for the wrapper to measure.
410
+
358
411
  ---
package/llms/shared.md CHANGED
@@ -1769,8 +1769,8 @@ silently defeats a registered catalog — omit it, or pass `undefined`.
1769
1769
 
1770
1770
  ### Ready-made catalogs: `@aceshooting/lyra-ui/translations/<locale>.js`
1771
1771
 
1772
- Eleven full catalogs ship with the package — **`ar`, `de`, `es`, `fa`, `fr`, `he`, `it`, `ja`,
1773
- `pt-BR`, `ru`, `zh-CN`** — each covering every key in `LYRA_DEFAULT_STRINGS`. They are
1772
+ Twelve full catalogs ship with the package — **`ar`, `de`, `es`, `fa`, `fr`, `he`, `it`, `ja`,
1773
+ `pt-BR`, `ro`, `ru`, `zh-CN`** — each covering every key in `LYRA_DEFAULT_STRINGS`. They are
1774
1774
  **side-effect-only modules**: import one bare, read nothing from it, and it calls
1775
1775
  `registerLyraLocale()` for you.
1776
1776
 
@@ -1781,11 +1781,14 @@ import "@aceshooting/lyra-ui/translations/fa.js"; // fa-IR falls back to this ba
1781
1781
  import "@aceshooting/lyra-ui/translations/he.js"; // he-IL falls back to this base catalog
1782
1782
  import "@aceshooting/lyra-ui/translations/it.js"; // Italian
1783
1783
  import "@aceshooting/lyra-ui/translations/pt-BR.js"; // also serves pt and pt-PT
1784
+ import "@aceshooting/lyra-ui/translations/ro.js"; // Romanian
1784
1785
  import "@aceshooting/lyra-ui/translations/zh-CN.js"; // also serves zh, zh-Hans and zh-Hans-CN
1785
1786
  ```
1786
1787
 
1787
1788
  Persian and Hebrew use CLDR plural categories (`fa`: `one`/`other`; `he`:
1788
- `one`/`two`/`other`); Italian uses a non-default set too (`it`: `one`/`many`/`other`). `ar`, `fa`
1789
+ `one`/`two`/`other`); Italian uses a non-default set too (`it`: `one`/`many`/`other`), and so does
1790
+ Romanian (`ro`: `one`/`few`/`other`, where `few` covers `0` and `2`-`19` and `other` is the
1791
+ `de`-requiring form from `20` upward). `ar`, `fa`
1789
1792
  and `he` declare `dir: 'rtl'`, so `getLyraLocaleDirection()`
1790
1793
  answers for them (and for `ar-EG`, `fa-IR`, `he-IL`) — but locale selection still does not _force_
1791
1794
  writing direction: set `dir="rtl"` on the page or an ancestor yourself.