@aceshooting/lyra-ui 14.2.0 → 14.3.1
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.
- package/CHANGELOG.md +32 -0
- package/custom-elements.json +1 -1
- package/dist/cli/migration-contract.json +1 -1
- package/dist/components/charts/chart/chart-legend-visibility.d.ts +8 -0
- package/dist/components/charts/chart/chart.class.d.ts +48 -12
- package/dist/components/charts/chart/chart.class.js +10 -10
- package/dist/components/data/table/table.class.d.ts +9 -1
- package/dist/components/data/table/table.class.js +4 -3
- package/dist/components/data/table/table.styles.js +1 -1
- package/dist/components/forms/button/button.class.d.ts +8 -2
- package/dist/components/forms/button/button.class.js +6 -2
- package/dist/components/media/map/map.class.d.ts +34 -6
- package/dist/components/media/map/map.class.js +1 -1
- package/dist/components/media/map/map.styles.js +1 -1
- package/dist/components/overlays/overlay/dropdown.class.d.ts +3 -1
- package/dist/components/overlays/overlay/dropdown.styles.js +1 -1
- package/dist/custom-elements-jsx.d.ts +1 -1
- package/dist/events.d.ts +17 -1
- package/dist/internal/icons.d.ts +2 -0
- package/dist/internal/icons.js +2 -2
- package/dist/internal/package-metadata.d.ts +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/lyra.d.ts +1 -1
- package/dist/svelte.d.ts +1 -1
- package/dist/vue.d.ts +1 -1
- package/llms/components/lr-accordion-item.md +36 -0
- package/llms/components/lr-accordion.md +36 -0
- package/llms/components/lr-bar-chart.md +4 -1
- package/llms/components/lr-bubble-chart.md +4 -1
- package/llms/components/lr-button.md +5 -0
- package/llms/components/lr-chart.md +40 -2
- package/llms/components/lr-details.md +36 -0
- package/llms/components/lr-doughnut-chart.md +4 -1
- package/llms/components/lr-dropdown.md +5 -0
- package/llms/components/lr-histogram.md +6 -2
- package/llms/components/lr-line-chart.md +4 -1
- package/llms/components/lr-map.md +45 -7
- package/llms/components/lr-pie-chart.md +4 -1
- package/llms/components/lr-polar-area-chart.md +4 -1
- package/llms/components/lr-radar-chart.md +4 -1
- package/llms/components/lr-scatter-chart.md +4 -1
- package/llms/components/lr-table.md +10 -4
- package/llms-full.txt +176 -16
- package/package.json +8 -8
- package/vscode-html-data.json +1 -1
- package/web-types.json +1 -1
|
@@ -159,6 +159,42 @@ findable `hidden="until-found"` closed-state gate.
|
|
|
159
159
|
The Details icon wrapper also carries Shoelace's `summary-icon` alias, so either part name styles
|
|
160
160
|
the same node. `header-actions` is the wrapper around the `header-actions` slot.
|
|
161
161
|
|
|
162
|
+
For rich independent actions, reserve a useful basis on `header-actions` so the complete action
|
|
163
|
+
group wraps onto another row before its checkbox label becomes too narrow. The header already
|
|
164
|
+
wraps; its summary belongs to a private native-details flex item, so setting `flex` on
|
|
165
|
+
`::part(summary)` does not control that item's allocation. This recipe uses public parts and
|
|
166
|
+
ordinary light-DOM layout:
|
|
167
|
+
|
|
168
|
+
```html
|
|
169
|
+
<style>
|
|
170
|
+
lr-details.responsive-actions::part(header-actions) {
|
|
171
|
+
flex: 1 1 12rem;
|
|
172
|
+
min-inline-size: min(100%, 12rem);
|
|
173
|
+
padding: var(--lr-space-xs);
|
|
174
|
+
box-sizing: border-box;
|
|
175
|
+
}
|
|
176
|
+
.details-action-group {
|
|
177
|
+
display: flex;
|
|
178
|
+
flex-wrap: wrap;
|
|
179
|
+
align-items: center;
|
|
180
|
+
gap: var(--lr-space-s);
|
|
181
|
+
min-inline-size: 0;
|
|
182
|
+
}
|
|
183
|
+
.details-action-group lr-checkbox { flex: 1 1 auto; min-inline-size: 0; }
|
|
184
|
+
</style>
|
|
185
|
+
<lr-details class="responsive-actions" summary="Settings">
|
|
186
|
+
<span slot="header-actions" class="details-action-group">
|
|
187
|
+
<lr-checkbox size="s">Show distribution details</lr-checkbox>
|
|
188
|
+
<lr-badge>Live</lr-badge>
|
|
189
|
+
</span>
|
|
190
|
+
Distribution settings.
|
|
191
|
+
</lr-details>
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
Import the granular details, checkbox and badge registration entries. Adjust the `12rem` basis
|
|
195
|
+
for the actual labels. Logical sizing supports RTL and narrower allocations; the checkbox remains
|
|
196
|
+
independently focusable and operable when the summary is disabled.
|
|
197
|
+
|
|
162
198
|
**Themeable custom properties:** accordion item exposes `--lr-accordion-item-spacing` (default
|
|
163
199
|
`var(--lr-form-control-padding-inline)`), `--lr-accordion-item-show-duration` and
|
|
164
200
|
`--lr-accordion-item-hide-duration` (both default `var(--lr-duration-base)`), and
|
|
@@ -159,6 +159,42 @@ findable `hidden="until-found"` closed-state gate.
|
|
|
159
159
|
The Details icon wrapper also carries Shoelace's `summary-icon` alias, so either part name styles
|
|
160
160
|
the same node. `header-actions` is the wrapper around the `header-actions` slot.
|
|
161
161
|
|
|
162
|
+
For rich independent actions, reserve a useful basis on `header-actions` so the complete action
|
|
163
|
+
group wraps onto another row before its checkbox label becomes too narrow. The header already
|
|
164
|
+
wraps; its summary belongs to a private native-details flex item, so setting `flex` on
|
|
165
|
+
`::part(summary)` does not control that item's allocation. This recipe uses public parts and
|
|
166
|
+
ordinary light-DOM layout:
|
|
167
|
+
|
|
168
|
+
```html
|
|
169
|
+
<style>
|
|
170
|
+
lr-details.responsive-actions::part(header-actions) {
|
|
171
|
+
flex: 1 1 12rem;
|
|
172
|
+
min-inline-size: min(100%, 12rem);
|
|
173
|
+
padding: var(--lr-space-xs);
|
|
174
|
+
box-sizing: border-box;
|
|
175
|
+
}
|
|
176
|
+
.details-action-group {
|
|
177
|
+
display: flex;
|
|
178
|
+
flex-wrap: wrap;
|
|
179
|
+
align-items: center;
|
|
180
|
+
gap: var(--lr-space-s);
|
|
181
|
+
min-inline-size: 0;
|
|
182
|
+
}
|
|
183
|
+
.details-action-group lr-checkbox { flex: 1 1 auto; min-inline-size: 0; }
|
|
184
|
+
</style>
|
|
185
|
+
<lr-details class="responsive-actions" summary="Settings">
|
|
186
|
+
<span slot="header-actions" class="details-action-group">
|
|
187
|
+
<lr-checkbox size="s">Show distribution details</lr-checkbox>
|
|
188
|
+
<lr-badge>Live</lr-badge>
|
|
189
|
+
</span>
|
|
190
|
+
Distribution settings.
|
|
191
|
+
</lr-details>
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
Import the granular details, checkbox and badge registration entries. Adjust the `12rem` basis
|
|
195
|
+
for the actual labels. Logical sizing supports RTL and narrower allocations; the checkbox remains
|
|
196
|
+
independently focusable and operable when the summary is disabled.
|
|
197
|
+
|
|
162
198
|
**Themeable custom properties:** accordion item exposes `--lr-accordion-item-spacing` (default
|
|
163
199
|
`var(--lr-form-control-padding-inline)`), `--lr-accordion-item-show-duration` and
|
|
164
200
|
`--lr-accordion-item-hide-duration` (both default `var(--lr-duration-base)`), and
|
|
@@ -26,7 +26,8 @@ and behavior there. **See `llms/components/lr-chart.md` for the details, code ex
|
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
28
|
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
29
|
+
(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
|
|
30
|
+
`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
|
|
30
31
|
`stacked`, `withoutAnimation` (`without-animation`),
|
|
31
32
|
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
32
33
|
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
|
|
@@ -42,6 +43,8 @@ of every entry in these lists.**
|
|
|
42
43
|
index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
|
|
43
44
|
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
|
|
44
45
|
complete `hiddenDatasets` snapshot).
|
|
46
|
+
Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
|
|
47
|
+
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
|
|
45
48
|
|
|
46
49
|
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
47
50
|
|
|
@@ -26,7 +26,8 @@ and behavior there. **See `llms/components/lr-chart.md` for the details, code ex
|
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
28
|
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
29
|
+
(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
|
|
30
|
+
`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
|
|
30
31
|
`stacked`, `withoutAnimation` (`without-animation`),
|
|
31
32
|
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
32
33
|
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
|
|
@@ -42,6 +43,8 @@ of every entry in these lists.**
|
|
|
42
43
|
index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
|
|
43
44
|
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
|
|
44
45
|
complete `hiddenDatasets` snapshot).
|
|
46
|
+
Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
|
|
47
|
+
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
|
|
45
48
|
|
|
46
49
|
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
47
50
|
|
|
@@ -337,6 +337,11 @@ box no matter what tier or override is in play.
|
|
|
337
337
|
are resolved onto the focused internal control through `ariaDescribedByElements`; external
|
|
338
338
|
`aria-labelledby` is not copied across the shadow boundary.
|
|
339
339
|
- Host `aria-haspopup` and `aria-expanded` values are forwarded to the internal semantic control.
|
|
340
|
+
For toggle buttons, host `aria-pressed="true|false|mixed"` reaches the focused native button.
|
|
341
|
+
Navigation can use `aria-current="page|step|location|date|time|true|false"`. Both states update
|
|
342
|
+
reactively, including native `ariaPressed`/`ariaCurrent` property assignments, attribute removal
|
|
343
|
+
and `href` changes. Empty or unsupported tokens are omitted. The native button/link role remains
|
|
344
|
+
unchanged: use pressed state for button toggles and current state for navigation links.
|
|
340
345
|
For host `aria-controls`, targets in the host's own root are resolved through the reflected
|
|
341
346
|
element-reference API so a popup relationship survives the component's shadow boundary; browsers
|
|
342
347
|
with that API expose the relationship through `ariaControlsElements` and intentionally serialize
|
|
@@ -127,6 +127,28 @@ structured points retain their y-value formatting.
|
|
|
127
127
|
would clip. Its pressed state follows `hiddenDatasets` whenever that controlled snapshot is
|
|
128
128
|
defined, otherwise the effective dataset's declarative `hidden` value before Chart.js is ready
|
|
129
129
|
and across chart type/plugin rebuilds.
|
|
130
|
+
- `legendMode: LyraChartLegendMode = 'dataset'` (attribute `legend-mode`) — `dataset` preserves
|
|
131
|
+
dataset toggles. `datum` shows one category toggle per slice in pie, doughnut and polar-area
|
|
132
|
+
charts; other types retain dataset legends. Category names use source labels with localized
|
|
133
|
+
numbered fallbacks. Colors and values come from the first dataset. With multiple datasets/rings,
|
|
134
|
+
a category toggle hides that source index in every ring, matching Chart.js category visibility.
|
|
135
|
+
- `hiddenDatums: readonly number[] = []` (attribute: false) — clone-owned hidden source category
|
|
136
|
+
indexes for radial charts. `[]` restores all categories. Invalid, duplicate and out-of-range
|
|
137
|
+
indexes are ignored when applied or emitted. Programmatic changes are silent; accepted datum
|
|
138
|
+
legend toggles write the complete next snapshot. Data and type replacements, reconnection and
|
|
139
|
+
sampling retain source-index meaning. This state is independent of `hiddenDatasets`; hiding a
|
|
140
|
+
whole dataset continues to hide its ring. Accessible data and CSV export retain hidden values.
|
|
141
|
+
- `legendDisplay: LyraChartLegendDisplay = 'auto'` (attribute `legend-display`) — `auto` preserves
|
|
142
|
+
the existing label with optional legend formatting. `label` always shows labels alone, even when
|
|
143
|
+
`formatter`/`valueFormatter` supplies values for tooltips or axes. `value` appends the formatted
|
|
144
|
+
numeric value. `percentage` appends a locale-formatted share independently of these callbacks:
|
|
145
|
+
the denominator is the sum of absolute represented legend values, including hidden entries.
|
|
146
|
+
Dataset entries use sampled sums; category entries use the first dataset's represented values.
|
|
147
|
+
Zero totals give 0%. These options affect the DOM legend; tooltip/axis/table formatting is unchanged.
|
|
148
|
+
Simplified pie/doughnut datasets with magnitudes above `Number.MAX_SAFE_INTEGER` are uniformly
|
|
149
|
+
rescaled for finite canvas geometry. Lyra tooltips, data labels, legends, events and CSV retain
|
|
150
|
+
original values; direct Chart.js callbacks see the rescaled peer data. Explicit `config.data`
|
|
151
|
+
remains the unmodified full-fidelity escape hatch.
|
|
130
152
|
- `legendPosition: LyraChartLegendPosition = 'top'` (attribute `legend-position`) — accepts the
|
|
131
153
|
Chart.js `left|top|right|bottom|center|chartArea|{ [scaleId]: number }` positions plus logical
|
|
132
154
|
`start`/`end`; the additive `auto` chooses right above 480px and bottom below that allocation
|
|
@@ -310,6 +332,22 @@ family-wide handling; `lr-point-click` remains as a compatibility event. Also
|
|
|
310
332
|
`{ datasetIndex: number, visible: boolean, hiddenDatasets: readonly number[] }`; the latter is the
|
|
311
333
|
complete, sorted, valid next snapshot. Call `preventDefault()` on the proposal to veto the toggle;
|
|
312
334
|
then no property change or commit event occurs.
|
|
335
|
+
Category toggles use a separate pair, `lr-before-datum-visibility-change` (cancelable proposal) and
|
|
336
|
+
`lr-datum-visibility-change` (accepted commit), carrying
|
|
337
|
+
`{ index: number, visible: boolean, hiddenDatums: readonly number[] }`. Both details and their
|
|
338
|
+
complete, sorted index snapshots are frozen. `index` is the source category index, including when
|
|
339
|
+
the displayed data is sampled; it applies across all rings. Programmatic assignments emit neither
|
|
340
|
+
pair. `preventDefault()` leaves both controlled state and the chart unchanged.
|
|
341
|
+
|
|
342
|
+
```html
|
|
343
|
+
<lr-doughnut-chart
|
|
344
|
+
legend-mode="datum"
|
|
345
|
+
legend-display="label"
|
|
346
|
+
.labels=${['A', 'B', 'C']}
|
|
347
|
+
.datasets=${[{ label: 'Distribution', data: [5, 3, 2] }]}
|
|
348
|
+
.hiddenDatums=${[]}
|
|
349
|
+
></lr-doughnut-chart>
|
|
350
|
+
```
|
|
313
351
|
|
|
314
352
|
**Slots:** default — one optional `<script type="application/json">` Chart.js configuration;
|
|
315
353
|
`data-table` — an optional consumer-provided complete, paginated, or virtualized accessible table
|
|
@@ -327,8 +365,8 @@ another application-owned presentation. Explicit `config.data` is the deliberate
|
|
|
327
365
|
Chart.js escape hatch and is not rewritten by the simplified-surface sampler.
|
|
328
366
|
|
|
329
367
|
**CSS parts:** `base`, `plot` (the fixed-height canvas/overlay region), `canvas`, `legend` (the
|
|
330
|
-
wrapping DOM legend), `legend-item` (a dataset
|
|
331
|
-
|
|
368
|
+
wrapping DOM legend), `legend-item` (a dataset/category visibility button), `legend-item-hidden`
|
|
369
|
+
(added while the dataset/category is hidden), `legend-swatch`,
|
|
332
370
|
`reset-zoom-button`, `description`, `notices` (wrapper for nonfatal feature warnings and
|
|
333
371
|
bounded-alternative truncation notices), `data-table`, `data-table-toggle` (the `dataTableToggle` disclosure button), `data-truncation` (the bounded-alternative
|
|
334
372
|
notice), `feature-warning` (a nonfatal missing optional-feature warning), `center` (the
|
|
@@ -159,6 +159,42 @@ findable `hidden="until-found"` closed-state gate.
|
|
|
159
159
|
The Details icon wrapper also carries Shoelace's `summary-icon` alias, so either part name styles
|
|
160
160
|
the same node. `header-actions` is the wrapper around the `header-actions` slot.
|
|
161
161
|
|
|
162
|
+
For rich independent actions, reserve a useful basis on `header-actions` so the complete action
|
|
163
|
+
group wraps onto another row before its checkbox label becomes too narrow. The header already
|
|
164
|
+
wraps; its summary belongs to a private native-details flex item, so setting `flex` on
|
|
165
|
+
`::part(summary)` does not control that item's allocation. This recipe uses public parts and
|
|
166
|
+
ordinary light-DOM layout:
|
|
167
|
+
|
|
168
|
+
```html
|
|
169
|
+
<style>
|
|
170
|
+
lr-details.responsive-actions::part(header-actions) {
|
|
171
|
+
flex: 1 1 12rem;
|
|
172
|
+
min-inline-size: min(100%, 12rem);
|
|
173
|
+
padding: var(--lr-space-xs);
|
|
174
|
+
box-sizing: border-box;
|
|
175
|
+
}
|
|
176
|
+
.details-action-group {
|
|
177
|
+
display: flex;
|
|
178
|
+
flex-wrap: wrap;
|
|
179
|
+
align-items: center;
|
|
180
|
+
gap: var(--lr-space-s);
|
|
181
|
+
min-inline-size: 0;
|
|
182
|
+
}
|
|
183
|
+
.details-action-group lr-checkbox { flex: 1 1 auto; min-inline-size: 0; }
|
|
184
|
+
</style>
|
|
185
|
+
<lr-details class="responsive-actions" summary="Settings">
|
|
186
|
+
<span slot="header-actions" class="details-action-group">
|
|
187
|
+
<lr-checkbox size="s">Show distribution details</lr-checkbox>
|
|
188
|
+
<lr-badge>Live</lr-badge>
|
|
189
|
+
</span>
|
|
190
|
+
Distribution settings.
|
|
191
|
+
</lr-details>
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
Import the granular details, checkbox and badge registration entries. Adjust the `12rem` basis
|
|
195
|
+
for the actual labels. Logical sizing supports RTL and narrower allocations; the checkbox remains
|
|
196
|
+
independently focusable and operable when the summary is disabled.
|
|
197
|
+
|
|
162
198
|
**Themeable custom properties:** accordion item exposes `--lr-accordion-item-spacing` (default
|
|
163
199
|
`var(--lr-form-control-padding-inline)`), `--lr-accordion-item-show-duration` and
|
|
164
200
|
`--lr-accordion-item-hide-duration` (both default `var(--lr-duration-base)`), and
|
|
@@ -26,7 +26,8 @@ and behavior there. **See `llms/components/lr-chart.md` for the details, code ex
|
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
28
|
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
29
|
+
(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
|
|
30
|
+
`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
|
|
30
31
|
`stacked`, `withoutAnimation` (`without-animation`),
|
|
31
32
|
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
32
33
|
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
|
|
@@ -42,6 +43,8 @@ of every entry in these lists.**
|
|
|
42
43
|
index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
|
|
43
44
|
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
|
|
44
45
|
complete `hiddenDatasets` snapshot).
|
|
46
|
+
Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
|
|
47
|
+
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
|
|
45
48
|
|
|
46
49
|
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
47
50
|
|
|
@@ -25,6 +25,11 @@ consumer-supplied `lr-menu` in the default slot becomes that contained engine in
|
|
|
25
25
|
wrapped in another menu. This supports both Web Awesome's direct-item shape and Shoelace's
|
|
26
26
|
consumer-menu shape.
|
|
27
27
|
|
|
28
|
+
The inner menu list owns scrolling within the popup's height limit, keeping a consumer menu's
|
|
29
|
+
header and footer visible. The outer `popup` and `content` parts allow overflow so nested submenus
|
|
30
|
+
remain clickable outside the parent menu in every supported browser. This works with either
|
|
31
|
+
submenu authoring shape, with or without `hoist` or an arrow; no overflow override is required.
|
|
32
|
+
|
|
28
33
|
An open lr-dropdown repositions when its effective host or inherited text direction changes,
|
|
29
34
|
preserving open state without emitting lifecycle events.
|
|
30
35
|
|
|
@@ -34,7 +34,8 @@ Bins `values` into `bins` equal-width buckets and renders as a bar chart (extend
|
|
|
34
34
|
normalized `bins`), and `type` always reads back `'bar'` regardless of any assignment. This
|
|
35
35
|
specialist owns its controller because a non-bar type would contradict the derived distribution.
|
|
36
36
|
- All other `LyraChart` properties are inherited and usable: `description`, `grid`, `axes`, `compact`, `indexAxis`
|
|
37
|
-
(`index-axis`), `hiddenDatasets`, `legendPosition` (`legend-position`),
|
|
37
|
+
(`index-axis`), `hiddenDatasets`, `hiddenDatums`, `legendPosition` (`legend-position`),
|
|
38
|
+
`legendMode` (`legend-mode`), `legendDisplay` (`legend-display`), `max`, `min`, `plugins`,
|
|
38
39
|
`withoutAnimation` (`without-animation`), `withoutLegend` (`without-legend`), `withoutTooltip`
|
|
39
40
|
(`without-tooltip`), `valueFormatter`, `formatter`, `area`, `zoom`, `config`, `height`, `xLabel` (`x-label`),
|
|
40
41
|
`yLabel` (`y-label`), `y2Label` (`y2-label`), `beginAtZero` (`begin-at-zero`),
|
|
@@ -46,9 +47,12 @@ maxSamples?)` appends finite raw samples and optionally retains only the newest
|
|
|
46
47
|
`appendData()` remains a working compatibility adapter (no longer deprecated); prefer
|
|
47
48
|
`appendSamples()` for new code.
|
|
48
49
|
|
|
49
|
-
**Events:** `lr-zoom`, `lr-datum-activate`, `lr-point-click`, `lr-before-
|
|
50
|
+
**Events:** `lr-zoom`, `lr-datum-activate`, `lr-point-click`, `lr-before-datum-visibility-change`
|
|
51
|
+
(cancelable), `lr-datum-visibility-change`, `lr-before-legend-visibility-change` (cancelable), and
|
|
50
52
|
`lr-legend-visibility-change` — inherited; `lr-point-click`'s `index` is the bucket index and
|
|
51
53
|
`label` the generated bucket range string (`"lo–hi"`, both bounds at one decimal place).
|
|
54
|
+
The inherited datum-visibility events apply only to radial controllers; the histogram keeps its
|
|
55
|
+
bar controller and dataset legend even with `legend-mode="datum"`.
|
|
52
56
|
|
|
53
57
|
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
54
58
|
|
|
@@ -26,7 +26,8 @@ and behavior there. **See `llms/components/lr-chart.md` for the details, code ex
|
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
28
|
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
29
|
+
(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
|
|
30
|
+
`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
|
|
30
31
|
`stacked`, `withoutAnimation` (`without-animation`),
|
|
31
32
|
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
32
33
|
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
|
|
@@ -42,6 +43,8 @@ of every entry in these lists.**
|
|
|
42
43
|
index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
|
|
43
44
|
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
|
|
44
45
|
complete `hiddenDatasets` snapshot).
|
|
46
|
+
Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
|
|
47
|
+
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
|
|
45
48
|
|
|
46
49
|
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
47
50
|
|
|
@@ -233,16 +233,36 @@ intensity?: LyraMapHeatmapZoomValue; opacity?: number }`, where `LyraMapHeatmapZ
|
|
|
233
233
|
defaults to 5 CSS pixels and `strokeWidth` to 0; both clamp to `[0, 200]`. `strokeColor` overrides
|
|
234
234
|
the outline only, with the layer's flat color as fallback. Dropping options restores defaults.
|
|
235
235
|
|
|
236
|
+
`radius` also accepts `LyraMapPointRadiusOptions { field, stops, interpolation?, fallback? }`
|
|
237
|
+
for **numeric** feature-driven sizes. `field` is independent of the category field. The first 32
|
|
238
|
+
pairs are inspected and finite `[value, radius]` pairs are sorted ascending; duplicate thresholds are first-wins and
|
|
239
|
+
radii clamp to `[0, 200]`. `interpolation` defaults to `'step'`: below the first threshold use
|
|
240
|
+
its radius, and each threshold is inclusive. `'linear'` interpolates between adjacent stops and
|
|
241
|
+
clamps outside the domain. One usable stop is a constant for numeric features. Missing, null,
|
|
242
|
+
non-numeric and non-finite feature values use `fallback` (default 5, clamped to `[0, 200]`), as
|
|
243
|
+
do an empty field, unusable stops or a linear domain that cannot retain distinct finite intervals.
|
|
244
|
+
Invalid interpolation values use step. These options style individual/unclustered points;
|
|
245
|
+
cluster-count radii remain independent. Switching back to a number or removing the radius
|
|
246
|
+
scale restores the fixed radius without recreating the source.
|
|
247
|
+
|
|
236
248
|
`point.icons` maps exact category values to `LyraMapPointIcon { value: string; path: string;
|
|
237
|
-
viewBox?: readonly [number, number, number, number]
|
|
238
|
-
|
|
249
|
+
viewBox?: readonly [number, number, number, number]; mode?: LyraMapPointIconMode;
|
|
250
|
+
strokeWidth?: number; lineCap?: LyraMapPointIconLineCap; lineJoin?: LyraMapPointIconLineJoin }`.
|
|
251
|
+
`iconField` defaults to `field`. Each icon is **SVG path data**, not SVG markup or a URL. Copy an icon's path data,
|
|
239
252
|
combine filled subpaths in that string, and supply its `[minX, minY, width, height]` viewBox
|
|
240
|
-
(default `[0, 0, 24, 24]`).
|
|
253
|
+
(default `[0, 0, 24, 24]`). `mode` defaults to `'fill'`; `'stroke'` draws open outline paths,
|
|
254
|
+
and `'fill-stroke'` paints both. `strokeWidth` uses **viewBox units** (default 2, clamped to
|
|
255
|
+
`[0, 200]`; zero omits the stroke), so it scales with the icon. `lineCap` accepts `'butt'`,
|
|
256
|
+
`'round'`, or `'square'`; `lineJoin` accepts `'miter'`, `'round'`, or `'bevel'`. Both default
|
|
257
|
+
to round; miter joins retain a limit of 10. Invalid modes/caps/joins restore their defaults,
|
|
258
|
+
and a non-finite stroke width restores 2. Keep padding inside the viewBox for strokes at its
|
|
259
|
+
edges, which are clipped to the fixed atlas square. These are icon-path options;
|
|
260
|
+
`point.strokeWidth` and `point.strokeColor` continue to style the surrounding circle only.
|
|
241
261
|
The first 32 entries are inspected, valid duplicates are first-wins, path data is capped at
|
|
242
262
|
8192 characters, and viewBox coordinates must be finite within ±10000 with dimensions at least
|
|
243
263
|
0.001. Invalid paths are ignored; markup, external references and event handlers cannot execute.
|
|
244
264
|
Rasterization is synchronous and local, with no fetch or HTML/SVG document insertion.
|
|
245
|
-
`iconColor` accepts CSS variables and defaults to the tone's contrasting foreground; `iconSize`
|
|
265
|
+
`iconColor` supplies both fill and stroke ink, accepts CSS variables and defaults to the tone's contrasting foreground; `iconSize`
|
|
246
266
|
is the displayed bounding square in CSS pixels (default 16, clamped to `[1, 200]`). The fixed
|
|
247
267
|
64px raster preserves the viewBox aspect ratio. Unknown categories, invalid icons and partial
|
|
248
268
|
peers lacking image-atlas methods retain their colored circles. No sprite or glyph URL is needed.
|
|
@@ -262,11 +282,14 @@ intensity?: LyraMapHeatmapZoomValue; opacity?: number }`, where `LyraMapHeatmapZ
|
|
|
262
282
|
map.dataLayers = [{
|
|
263
283
|
sourceId: 'places', geojson: locations, cluster: {},
|
|
264
284
|
point: {
|
|
265
|
-
field: 'category',
|
|
285
|
+
field: 'category',
|
|
286
|
+
radius: { field: 'visits', stops: [[0, 10], [10, 12], [50, 14], [100, 16]], fallback: 10 },
|
|
287
|
+
strokeWidth: 1,
|
|
266
288
|
colors: [['home', 'var(--lr-color-brand)'], ['work', 'var(--lr-color-success)']],
|
|
267
289
|
icons: [
|
|
268
290
|
{ value: 'home', path: 'M2 12L12 2L22 12V22H2Z' },
|
|
269
|
-
{ value: 'work', path: 'M8
|
|
291
|
+
{ value: 'work', path: 'M8 6V3H16V6M3 6H21V21H3ZM3 11H21',
|
|
292
|
+
mode: 'stroke', strokeWidth: 1.75, lineCap: 'round', lineJoin: 'round' },
|
|
270
293
|
],
|
|
271
294
|
iconSize: 14,
|
|
272
295
|
},
|
|
@@ -330,7 +353,9 @@ payload beside the map.
|
|
|
330
353
|
|
|
331
354
|
**Authoring types:** `LyraMapLegendEntry`, `LyraMapLegendPattern`, `LyraMapLegendProjection`, `LyraMapChoroplethLayer`,
|
|
332
355
|
`LyraMapGeoJsonDataLayer`, `LyraMapDataLayerKind`, `LyraMapClusterOptions`, `LyraMapHeatmapOptions`,
|
|
333
|
-
`LyraMapHeatmapZoomValue`, `LyraMapLineOptions`, `LyraMapPointOptions`, `
|
|
356
|
+
`LyraMapHeatmapZoomValue`, `LyraMapLineOptions`, `LyraMapPointOptions`, `LyraMapPointRadiusOptions`,
|
|
357
|
+
`LyraMapPointRadiusInterpolation`, `LyraMapPointIcon`, `LyraMapPointIconMode`,
|
|
358
|
+
`LyraMapPointIconLineCap`, `LyraMapPointIconLineJoin`, `LyraMapMarker`, `LyraMapMarkerActivationDetail`,
|
|
334
359
|
`LyraMapMarkerActivationSource`, `LyraMapStyleSpecification`, and `LyraMapInstance`.
|
|
335
360
|
The former `LegendEntry`, `ChoroplethLayer`, `GeoJsonDataLayer`, and `MapMarker` names are removed
|
|
336
361
|
in v9 rather than retained as aliases.
|
|
@@ -375,6 +400,16 @@ when `legend` and `legendGradient` are both empty.
|
|
|
375
400
|
`legend-hi`, `legend-limit`, `marker`, `popup`,
|
|
376
401
|
`popup-content`, `popup-close-button`, `attribution`, `attribution-toggle`, `navigation`,
|
|
377
402
|
`zoom-in`, `zoom-out`, `compass`, `scale`, `error`.
|
|
403
|
+
The compact attribution summary has a decorative, current-color information glyph and retains
|
|
404
|
+
MapLibre's accessible name, keyboard/touch disclosure behavior and attribution links. To make
|
|
405
|
+
only this control compact, scope the shared target-size token to its public wrapper:
|
|
406
|
+
|
|
407
|
+
```css
|
|
408
|
+
lr-map::part(attribution) { --lr-icon-button-size: var(--lr-size-24px); }
|
|
409
|
+
```
|
|
410
|
+
|
|
411
|
+
Keep that target at least 24px in both axes. This leaves navigation controls at their existing size.
|
|
412
|
+
|
|
378
413
|
`legend` is a localized `role="group"` containing a real list associated to the map canvas with
|
|
379
414
|
`aria-describedby`; each entry is a `listitem`, decorative swatches are inert/accessibility-hidden,
|
|
380
415
|
and the overlay is bounded to the map allocation with scrolling and long-label wrapping.
|
|
@@ -393,6 +428,9 @@ and use `addControl(new NavigationControl(), 'bottom-right')` and
|
|
|
393
428
|
shadow-root modification is needed: navigation buttons, compass glyph, scale bar and control
|
|
394
429
|
corners are styled with Lyra tokens. The corners follow inline start/end under RTL. The legend
|
|
395
430
|
reserves vertical room for these controls and attribution, including after resize or removal.
|
|
431
|
+
Attribution also reserves legend space when it is the only control. Opposing occupied corners
|
|
432
|
+
share the available width, so expanded attribution wraps without covering a scale or navigation
|
|
433
|
+
control on the other side; controls stay aligned to their logical edge in both text directions.
|
|
396
434
|
Navigation exposes `navigation`, `zoom-in`, `zoom-out`, and `compass` parts; the scale exposes `scale`.
|
|
397
435
|
Button names update through `zoomIn`, `zoomOut`, and `mapResetNorth` locale strings. MapLibre retains
|
|
398
436
|
keyboard activation, compass rotation, zoom limits, scale units and viewport updates. No controls
|
|
@@ -26,7 +26,8 @@ and behavior there. **See `llms/components/lr-chart.md` for the details, code ex
|
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
28
|
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
29
|
+
(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
|
|
30
|
+
`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
|
|
30
31
|
`stacked`, `withoutAnimation` (`without-animation`),
|
|
31
32
|
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
32
33
|
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
|
|
@@ -42,6 +43,8 @@ of every entry in these lists.**
|
|
|
42
43
|
index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
|
|
43
44
|
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
|
|
44
45
|
complete `hiddenDatasets` snapshot).
|
|
46
|
+
Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
|
|
47
|
+
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
|
|
45
48
|
|
|
46
49
|
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
47
50
|
|
|
@@ -26,7 +26,8 @@ and behavior there. **See `llms/components/lr-chart.md` for the details, code ex
|
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
28
|
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
29
|
+
(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
|
|
30
|
+
`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
|
|
30
31
|
`stacked`, `withoutAnimation` (`without-animation`),
|
|
31
32
|
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
32
33
|
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
|
|
@@ -42,6 +43,8 @@ of every entry in these lists.**
|
|
|
42
43
|
index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
|
|
43
44
|
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
|
|
44
45
|
complete `hiddenDatasets` snapshot).
|
|
46
|
+
Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
|
|
47
|
+
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
|
|
45
48
|
|
|
46
49
|
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
47
50
|
|
|
@@ -26,7 +26,8 @@ and behavior there. **See `llms/components/lr-chart.md` for the details, code ex
|
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
28
|
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
29
|
+
(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
|
|
30
|
+
`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
|
|
30
31
|
`stacked`, `withoutAnimation` (`without-animation`),
|
|
31
32
|
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
32
33
|
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
|
|
@@ -42,6 +43,8 @@ of every entry in these lists.**
|
|
|
42
43
|
index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
|
|
43
44
|
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
|
|
44
45
|
complete `hiddenDatasets` snapshot).
|
|
46
|
+
Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
|
|
47
|
+
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
|
|
45
48
|
|
|
46
49
|
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
47
50
|
|
|
@@ -26,7 +26,8 @@ and behavior there. **See `llms/components/lr-chart.md` for the details, code ex
|
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
28
|
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
29
|
+
(`legend-position`), `hiddenDatums`, `legendMode` (`legend-mode`), `legendDisplay` (`legend-display`),
|
|
30
|
+
`max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
|
|
30
31
|
`stacked`, `withoutAnimation` (`without-animation`),
|
|
31
32
|
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
32
33
|
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
|
|
@@ -42,6 +43,8 @@ of every entry in these lists.**
|
|
|
42
43
|
index, label, value }`), `lr-before-legend-visibility-change` (cancelable), and
|
|
43
44
|
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
|
|
44
45
|
complete `hiddenDatasets` snapshot).
|
|
46
|
+
Radial category legends additionally emit `lr-before-datum-visibility-change` (cancelable) and
|
|
47
|
+
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
|
|
45
48
|
|
|
46
49
|
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
47
50
|
|
|
@@ -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** none
|
|
12
|
-
- **Themeable via**
|
|
12
|
+
- **Themeable via** 36 parts, 18 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
|
---
|
|
@@ -146,6 +146,10 @@ cell: (row) => unknown }` —
|
|
|
146
146
|
the two consequences of the fixed algorithm worth knowing before opting in
|
|
147
147
|
- `sortKey: string = ''` (attribute `sort-key`)
|
|
148
148
|
- `sortDir: 'asc'|'desc' = 'asc'` (attribute `sort-dir`)
|
|
149
|
+
- `sortIndicators: TableSortIndicators = 'active'` (attribute `sort-indicators`) — `'all'` adds a
|
|
150
|
+
muted bidirectional indicator to each inactive sortable header, reserving the same space as the
|
|
151
|
+
active chevron. The default retains only the active column's indicator. This presentation does
|
|
152
|
+
not change keyboard interaction, client/server sorting, or `aria-sort="none"` on inactive columns.
|
|
149
153
|
- `sortMode: 'client'|'server' = 'client'` (attribute `sort-mode`, reflected) — mirrors
|
|
150
154
|
`paginationMode`'s identical split. `'client'` (the default) orders `rows` in the browser from
|
|
151
155
|
`sortKey`/`sortDir` and the active column's `sortValue`; `'server'` renders `rows` exactly as
|
|
@@ -316,8 +320,9 @@ slot-replaceable: it reports a configuration problem (`noColumnsHeading`), not "
|
|
|
316
320
|
nothing", and one slot covering all three would collapse that distinction. Everything else comes
|
|
317
321
|
from `columns`/`rows`.
|
|
318
322
|
|
|
319
|
-
**CSS parts:** `base`, `table`, `caption`, `head`, `header-cell`, `row`, `cell`, `more-button`, `sort-icon`
|
|
320
|
-
|
|
323
|
+
**CSS parts:** `base`, `table`, `caption`, `head`, `header-cell`, `row`, `cell`, `more-button`, `sort-icon`
|
|
324
|
+
(each sort indicator), `sort-icon-active` (the active chevron, rotated per `sortDir`),
|
|
325
|
+
`sort-icon-inactive` (the muted bidirectional indicator under `sort-indicators="all"`), `reveal-columns-button`
|
|
321
326
|
(shown when priority columns are hidden or when a narrow allocation is currently force-visible),
|
|
322
327
|
`foot` (the `<tfoot>`, only rendered when at least one
|
|
323
328
|
column defines `footer`), `footer-row`, `footer-cell`, `row-total-cell` (each body row's trailing
|
|
@@ -387,7 +392,8 @@ or structural-pseudo-class selector and does not affect group, expanded, hover,
|
|
|
387
392
|
showing through the sticky header while it scrolls.
|
|
388
393
|
Same shape and rationale as `--lr-table-row-selected-bg`: inline `var()` fallbacks, not on `:host`,
|
|
389
394
|
because `::part(header-cell)[aria-sort]` is invalid CSS. The `sort-icon` part styles only the
|
|
390
|
-
|
|
395
|
+
indicator; these tokens style the header cell itself. Use `::part(sort-icon-inactive)` and
|
|
396
|
+
`::part(sort-icon-active)` to style the two indicator states without private selectors.
|
|
391
397
|
`--lr-table-sticky-offset` (default `0`) is measured and written inline per column by the component
|
|
392
398
|
so multiple `sticky` columns stack instead of overlapping; it is a read-out, not a knob you set.
|
|
393
399
|
`--lr-table-heat-t` is likewise component-written (each `[data-heat]` cell's position on the ramp).
|