@aceshooting/lyra-ui 14.1.1 → 14.3.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.
- package/CHANGELOG.md +42 -0
- package/custom-elements.json +1 -1
- package/design-tokens.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 +64 -15
- package/dist/components/charts/chart/chart.class.js +10 -10
- package/dist/components/data/heatmap/heatmap.class.d.ts +44 -6
- package/dist/components/data/heatmap/heatmap.class.js +8 -2
- package/dist/components/data/heatmap/heatmap.styles.js +1 -1
- 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/forms/checkbox/checkbox.styles.js +1 -1
- package/dist/components/forms/date-picker/date-input.class.d.ts +7 -8
- package/dist/components/forms/date-picker/date-input.styles.js +1 -1
- package/dist/components/forms/locale-picker/locale-picker.class.d.ts +12 -2
- package/dist/components/forms/locale-picker/locale-picker.class.js +7 -6
- package/dist/components/forms/locale-picker/locale-picker.styles.js +1 -1
- package/dist/components/forms/slider/slider.class.d.ts +21 -5
- package/dist/components/forms/slider/slider.class.js +6 -5
- package/dist/components/forms/slider/slider.styles.js +1 -1
- package/dist/components/media/map/map-loader.d.ts +3 -1
- package/dist/components/media/map/map.class.d.ts +86 -6
- package/dist/components/media/map/map.class.js +1 -1
- package/dist/components/media/map/map.styles.js +1 -1
- package/dist/custom-elements-jsx.d.ts +1 -1
- package/dist/events.d.ts +21 -5
- package/dist/internal/default-strings.generated.d.ts +1 -1
- package/dist/internal/default-strings.generated.js +1 -1
- package/dist/internal/icons.d.ts +2 -0
- package/dist/internal/icons.js +2 -2
- package/dist/internal/localization-types.d.ts +1 -1
- package/dist/internal/localization.js +1 -1
- 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/translations/ar.js +1 -1
- package/dist/translations/de.js +1 -1
- package/dist/translations/es.js +1 -1
- package/dist/translations/fa.js +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/translations/he.js +1 -1
- package/dist/translations/ja.js +1 -1
- package/dist/translations/pt-BR.js +1 -1
- package/dist/translations/ru.js +1 -1
- package/dist/translations/zh-CN.js +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 +5 -2
- package/llms/components/lr-bubble-chart.md +5 -2
- package/llms/components/lr-button.md +5 -0
- package/llms/components/lr-chart.md +67 -3
- package/llms/components/lr-checkbox.md +3 -1
- package/llms/components/lr-date-input.md +19 -33
- package/llms/components/lr-date-picker.md +19 -33
- package/llms/components/lr-details.md +36 -0
- package/llms/components/lr-doughnut-chart.md +5 -2
- package/llms/components/lr-heatmap.md +63 -4
- package/llms/components/lr-histogram.md +7 -3
- package/llms/components/lr-line-chart.md +5 -2
- package/llms/components/lr-locale-picker.md +16 -2
- package/llms/components/lr-map.md +131 -4
- package/llms/components/lr-pie-chart.md +5 -2
- package/llms/components/lr-polar-area-chart.md +5 -2
- package/llms/components/lr-radar-chart.md +5 -2
- package/llms/components/lr-scatter-chart.md +5 -2
- package/llms/components/lr-slider.md +20 -4
- package/llms/components/lr-table.md +10 -4
- package/llms-full.txt +439 -56
- package/package.json +3 -3
- package/vscode-css-data.json +1 -1
- package/vscode-html-data.json +1 -1
- package/web-types.json +1 -1
|
@@ -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** 13 parts, 16 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
|
---
|
|
@@ -49,6 +49,14 @@ readonly LyraLocaleEntry[]`, `LyraLocaleEntry { tag: string; label?: string; cou
|
|
|
49
49
|
- `showFlags: boolean = true` — each row's leading `<lr-flag language={tag} variant="compact">`
|
|
50
50
|
(or `<lr-flag country={country} variant="compact">` when the entry sets `country`); `false`
|
|
51
51
|
omits the flag element entirely (not just visually).
|
|
52
|
+
- `triggerDisplay: LyraLocaleTriggerDisplay = 'flag-label'` (attribute `trigger-display`) —
|
|
53
|
+
`'flag' | 'label' | 'flag-label'`. The default keeps the flag, label and chevron. `label`
|
|
54
|
+
omits only the trigger flag; the menu keeps its flags and endonyms. `flag` centers the flag in
|
|
55
|
+
a square and hides the visible label and chevron. The `trigger-label` remains available to
|
|
56
|
+
assistive technology and describes the trigger's current language; its accessible name still
|
|
57
|
+
follows `label`/the host `aria-label`. The square uses the shared/scoped trigger height with a
|
|
58
|
+
24px floor. `showFlags=false` retains visible text in every mode. Selection, keyboard navigation,
|
|
59
|
+
form values and the uncommitted effective-locale preview keep their usual behavior.
|
|
52
60
|
- `value: string = ''` — the **committed** selection (form value, drives `lr-change`). While `''`
|
|
53
61
|
and untouched, the trigger _displays_ `effectiveLocale` as a preview label, but
|
|
54
62
|
`checkValidity()`/`required` are governed by the real `value`, which stays `''` until a real
|
|
@@ -112,7 +120,8 @@ priority until cleared.
|
|
|
112
120
|
|
|
113
121
|
**CSS parts:** `form-control`, `form-control-label`, `trigger`,
|
|
114
122
|
`trigger-flag` (the trigger's leading `<lr-flag>` for the current value, present only while
|
|
115
|
-
`showFlags` is on
|
|
123
|
+
`showFlags` is on and `triggerDisplay` is not `label`), `trigger-label` (the current language,
|
|
124
|
+
visually hidden in flag-only mode), `listbox`, `option`, `option-flag` (present only while `showFlags` is on),
|
|
116
125
|
`option-label`, `option-tag` (the row's secondary line — the raw BCP-47 tag), `expand-icon`,
|
|
117
126
|
`hint`, `error`.
|
|
118
127
|
|
|
@@ -137,6 +146,11 @@ quiet-brand, and semibold semantic tokens.
|
|
|
137
146
|
peer warning duplication; `lr-flag` itself already logs one) when the optional
|
|
138
147
|
`@aceshooting/lyra-flags` package isn't installed and `showFlags` is left on.
|
|
139
148
|
|
|
149
|
+
A compact header can set `trigger-display="flag"` and
|
|
150
|
+
`--lr-locale-picker-trigger-height: 2.25rem` for a 36px square at the usual 16px root size.
|
|
151
|
+
Import `@aceshooting/lyra-ui/components/media/flag/flag-peer.js` to register the optional flag
|
|
152
|
+
resolver. Menu labels stay visible; a per-entry `country` override also reaches the compact trigger.
|
|
153
|
+
|
|
140
154
|
```html
|
|
141
155
|
<lr-locale-picker label="Language"></lr-locale-picker>
|
|
142
156
|
<script type="module">
|
|
@@ -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**
|
|
12
|
+
- **Themeable via** 20 parts, 6 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
|
---
|
|
@@ -127,7 +127,8 @@ string; geojson: GeoJSON.FeatureCollection; field: string; stops: [number, strin
|
|
|
127
127
|
- `dataLayers: LyraMapGeoJsonDataLayer[] = []` (attribute: false) —
|
|
128
128
|
`LyraMapGeoJsonDataLayer { sourceId: string; geojson: GeoJSON.Feature |
|
|
129
129
|
GeoJSON.FeatureCollection; tone?: 'accent' | 'success' | 'warning' |
|
|
130
|
-
'danger' | 'neutral'; color?: string; strokeColor?: string;
|
|
130
|
+
'danger' | 'neutral'; color?: string; strokeColor?: string; line?: LyraMapLineOptions;
|
|
131
|
+
point?: LyraMapPointOptions; kind?: LyraMapDataLayerKind;
|
|
131
132
|
heatmap?: LyraMapHeatmapOptions; cluster?: LyraMapClusterOptions }`. `sourceId` is trimmed and must be nonempty; the first layer for a
|
|
132
133
|
`sourceId` that is successfully admitted wins; blank, malformed, and later duplicate records are
|
|
133
134
|
ignored without reserving an identity for a valid later sibling. Each retained entry adds one
|
|
@@ -212,6 +213,104 @@ intensity?: LyraMapHeatmapZoomValue; opacity?: number }`, where `LyraMapHeatmapZ
|
|
|
212
213
|
peer's default untouched on construction, and dropping a previously-authored value restores 1.
|
|
213
214
|
`cluster` is ignored on a heatmap entry: a heatmap already aggregates density, and clustering its
|
|
214
215
|
input would feed it one point per cluster instead of the real distribution.
|
|
216
|
+
`line?: LyraMapLineOptions { field?: string; stops?: readonly (readonly [number, string])[];
|
|
217
|
+
width?: number; opacity?: number }` configures line/outline paint for an ordinary `dataLayers`
|
|
218
|
+
entry. `field` names a numeric feature property; two usable `[value, color]` stops produce a
|
|
219
|
+
continuous linear ramp. Missing, null, and non-numeric feature values use `strokeColor`, then
|
|
220
|
+
`color`, then `tone`. Stops inspect the first 64 entries, discard non-finite values and invalid
|
|
221
|
+
CSS colors, sort ascending, and retain the first duplicate threshold. Fewer than two stops or
|
|
222
|
+
an absent field preserves flat color. Values beyond the endpoints clamp to their endpoint color.
|
|
223
|
+
CSS variables resolve on the host during reconciliation and retheming. `width` defaults to 2 CSS
|
|
224
|
+
pixels and clamps to `[0, 200]`; `opacity` defaults to 1 and clamps to `[0, 1]`. Non-finite values
|
|
225
|
+
restore those defaults, as does dropping a previously-authored option. Point colors and polygon
|
|
226
|
+
fills are unaffected; cluster and heatmap entries ignore `line`.
|
|
227
|
+
|
|
228
|
+
`point?: LyraMapPointOptions` styles individual points on ordinary and clustered auto entries.
|
|
229
|
+
It is ignored for heatmaps. `field` names a **string** feature property; `colors` maps exact
|
|
230
|
+
`[category, CSS color]` pairs. Missing, unknown and non-string categories use the existing
|
|
231
|
+
`strokeColor`/`color`/`tone` fallback. The first 32 pairs are inspected and valid duplicates are
|
|
232
|
+
first-wins. CSS variables resolve on the host and follow ancestor theme changes. `radius`
|
|
233
|
+
defaults to 5 CSS pixels and `strokeWidth` to 0; both clamp to `[0, 200]`. `strokeColor` overrides
|
|
234
|
+
the outline only, with the layer's flat color as fallback. Dropping options restores defaults.
|
|
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
|
+
|
|
248
|
+
`point.icons` maps exact category values to `LyraMapPointIcon { value: string; path: string;
|
|
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,
|
|
252
|
+
combine filled subpaths in that string, and supply its `[minX, minY, width, height]` viewBox
|
|
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.
|
|
261
|
+
The first 32 entries are inspected, valid duplicates are first-wins, path data is capped at
|
|
262
|
+
8192 characters, and viewBox coordinates must be finite within ±10000 with dimensions at least
|
|
263
|
+
0.001. Invalid paths are ignored; markup, external references and event handlers cannot execute.
|
|
264
|
+
Rasterization is synchronous and local, with no fetch or HTML/SVG document insertion.
|
|
265
|
+
`iconColor` supplies both fill and stroke ink, accepts CSS variables and defaults to the tone's contrasting foreground; `iconSize`
|
|
266
|
+
is the displayed bounding square in CSS pixels (default 16, clamped to `[1, 200]`). The fixed
|
|
267
|
+
64px raster preserves the viewBox aspect ratio. Unknown categories, invalid icons and partial
|
|
268
|
+
peers lacking image-atlas methods retain their colored circles. No sprite or glyph URL is needed.
|
|
269
|
+
|
|
270
|
+
All categories use the **same GeoJSON source** and cluster across categories. Cluster circles
|
|
271
|
+
keep the existing count-based styling; only unclustered points get category colors/icons.
|
|
272
|
+
An optional symbol layer and at most 32 images are allocated per configured source, with no
|
|
273
|
+
per-feature DOM markers. Data changes reuse the source, retheming updates paint/icon pixels,
|
|
274
|
+
and style reloads restore the owned resources. Removing the entry or icons releases its images.
|
|
275
|
+
`lr-map-click` on either a point's circle or icon returns `origin: 'data-layer'`, the public
|
|
276
|
+
`sourceId`, and the rendered feature. For clustered GeoJSON, use numeric feature IDs and keep
|
|
277
|
+
string business IDs in feature properties, as MapLibre's cluster tiling uses numeric IDs. Canvas export includes both; supply an accessible textual
|
|
278
|
+
legend/list for category interpretation and individual keyboard actions.
|
|
279
|
+
|
|
280
|
+
```js
|
|
281
|
+
import '@aceshooting/lyra-ui/components/lr-map.js';
|
|
282
|
+
map.dataLayers = [{
|
|
283
|
+
sourceId: 'places', geojson: locations, cluster: {},
|
|
284
|
+
point: {
|
|
285
|
+
field: 'category',
|
|
286
|
+
radius: { field: 'visits', stops: [[0, 10], [10, 12], [50, 14], [100, 16]], fallback: 10 },
|
|
287
|
+
strokeWidth: 1,
|
|
288
|
+
colors: [['home', 'var(--lr-color-brand)'], ['work', 'var(--lr-color-success)']],
|
|
289
|
+
icons: [
|
|
290
|
+
{ value: 'home', path: 'M2 12L12 2L22 12V22H2Z' },
|
|
291
|
+
{ value: 'work', path: 'M8 6V3H16V6M3 6H21V21H3ZM3 11H21',
|
|
292
|
+
mode: 'stroke', strokeWidth: 1.75, lineCap: 'round', lineJoin: 'round' },
|
|
293
|
+
],
|
|
294
|
+
iconSize: 14,
|
|
295
|
+
},
|
|
296
|
+
}];
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
Share the same stops with `legendGradient` and set its endpoint labels for units. A gradient
|
|
300
|
+
matching a line ramp remains linear even alongside a logarithmic choropleth. Changing metric,
|
|
301
|
+
filtered GeoJSON, width or opacity reconciles existing resources; style reloads restore the layer.
|
|
302
|
+
Lines remain in MapLibre's canvas and can be captured with the map's normal render-event PNG
|
|
303
|
+
export flow.
|
|
304
|
+
|
|
305
|
+
```js
|
|
306
|
+
mapElement.dataLayers = [{
|
|
307
|
+
sourceId: 'routes', geojson: routes,
|
|
308
|
+
line: { field: 'kmh', stops: speedStops, width: 4, opacity: 0.9 }
|
|
309
|
+
}];
|
|
310
|
+
mapElement.legendGradient = speedStops;
|
|
311
|
+
mapElement.legendGradientLoLabel = '0 km/h';
|
|
312
|
+
mapElement.legendGradientHiLabel = '100 km/h';
|
|
313
|
+
```
|
|
215
314
|
- `maxBounds: LyraMapBounds | null = null` (attribute: false) — box the map may not pan outside,
|
|
216
315
|
`[[west, south], [east, north]]`. Prefer it over calling `map.setMaxBounds()` through the `.map`
|
|
217
316
|
escape hatch: constraining the camera can wedge maplibre-gl at a sub-1 fractional zoom in a wide
|
|
@@ -254,7 +353,9 @@ payload beside the map.
|
|
|
254
353
|
|
|
255
354
|
**Authoring types:** `LyraMapLegendEntry`, `LyraMapLegendPattern`, `LyraMapLegendProjection`, `LyraMapChoroplethLayer`,
|
|
256
355
|
`LyraMapGeoJsonDataLayer`, `LyraMapDataLayerKind`, `LyraMapClusterOptions`, `LyraMapHeatmapOptions`,
|
|
257
|
-
`LyraMapHeatmapZoomValue`, `
|
|
356
|
+
`LyraMapHeatmapZoomValue`, `LyraMapLineOptions`, `LyraMapPointOptions`, `LyraMapPointRadiusOptions`,
|
|
357
|
+
`LyraMapPointRadiusInterpolation`, `LyraMapPointIcon`, `LyraMapPointIconMode`,
|
|
358
|
+
`LyraMapPointIconLineCap`, `LyraMapPointIconLineJoin`, `LyraMapMarker`, `LyraMapMarkerActivationDetail`,
|
|
258
359
|
`LyraMapMarkerActivationSource`, `LyraMapStyleSpecification`, and `LyraMapInstance`.
|
|
259
360
|
The former `LegendEntry`, `ChoroplethLayer`, `GeoJsonDataLayer`, and `MapMarker` names are removed
|
|
260
361
|
in v9 rather than retained as aliases.
|
|
@@ -297,7 +398,18 @@ when `legend` and `legendGradient` are both empty.
|
|
|
297
398
|
|
|
298
399
|
**CSS parts:** `base`, `container`, `legend`, `legend-swatch`, `legend-gradient`, `legend-lo`,
|
|
299
400
|
`legend-hi`, `legend-limit`, `marker`, `popup`,
|
|
300
|
-
`popup-content`, `popup-close-button`, `attribution`, `attribution-toggle`, `
|
|
401
|
+
`popup-content`, `popup-close-button`, `attribution`, `attribution-toggle`, `navigation`,
|
|
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
|
+
|
|
301
413
|
`legend` is a localized `role="group"` containing a real list associated to the map canvas with
|
|
302
414
|
`aria-describedby`; each entry is a `listitem`, decorative swatches are inert/accessibility-hidden,
|
|
303
415
|
and the overlay is bounded to the map allocation with scrolling and long-label wrapping.
|
|
@@ -310,6 +422,21 @@ peer unavailable, owner-realm WebGL2 unavailable, or initialization failed. A po
|
|
|
310
422
|
appended to the document's pre-mounted `[data-lr-live-region="assertive"]` sink rather than making
|
|
311
423
|
shadow chrome live; raw caught errors are never exposed.
|
|
312
424
|
|
|
425
|
+
**Standard peer controls:** after `lr-map-load`, narrow `.map` to the installed MapLibre peer
|
|
426
|
+
and use `addControl(new NavigationControl(), 'bottom-right')` and
|
|
427
|
+
`addControl(new ScaleControl({ unit: 'metric' }), 'bottom-left')`. No document-level peer CSS or
|
|
428
|
+
shadow-root modification is needed: navigation buttons, compass glyph, scale bar and control
|
|
429
|
+
corners are styled with Lyra tokens. The corners follow inline start/end under RTL. The legend
|
|
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.
|
|
434
|
+
Navigation exposes `navigation`, `zoom-in`, `zoom-out`, and `compass` parts; the scale exposes `scale`.
|
|
435
|
+
Button names update through `zoomIn`, `zoomOut`, and `mapResetNorth` locale strings. MapLibre retains
|
|
436
|
+
keyboard activation, compass rotation, zoom limits, scale units and viewport updates. No controls
|
|
437
|
+
are created until the application explicitly adds them. This is a supported imperative peer-control
|
|
438
|
+
integration; there is no declarative controls property.
|
|
439
|
+
|
|
313
440
|
**Themeable custom properties:**
|
|
314
441
|
|
|
315
442
|
- `--lr-map-height` (default `var(--lr-size-24rem)`) — host block size, shared with the optional
|
|
@@ -25,8 +25,9 @@ Everything else is inherited verbatim from `lr-chart`; each name below has the s
|
|
|
25
25
|
and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
|
-
**Properties:** `description`, `grid`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
28
|
+
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
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,8 +25,9 @@ Everything else is inherited verbatim from `lr-chart`; each name below has the s
|
|
|
25
25
|
and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
|
-
**Properties:** `description`, `grid`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
28
|
+
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
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,8 +25,9 @@ Everything else is inherited verbatim from `lr-chart`; each name below has the s
|
|
|
25
25
|
and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
|
-
**Properties:** `description`, `grid`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
28
|
+
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
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,8 +25,9 @@ Everything else is inherited verbatim from `lr-chart`; each name below has the s
|
|
|
25
25
|
and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
|
|
26
26
|
of every entry in these lists.**
|
|
27
27
|
|
|
28
|
-
**Properties:** `description`, `grid`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
29
|
-
(`legend-position`), `
|
|
28
|
+
**Properties:** `description`, `grid`, `axes`, `compact`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
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** 26 parts, 24 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
|
---
|
|
@@ -113,6 +113,15 @@ single numeric string entry.
|
|
|
113
113
|
- `showValue: boolean = false` (attribute `show-value`) — opt-in numeric readout next to the track;
|
|
114
114
|
a range readout joins both values with an en dash. The explicit HTML spelling
|
|
115
115
|
`show-value="false"` stays false.
|
|
116
|
+
- `valueDisplay: SliderValueDisplay = 'numeric'` (attribute `value-display`) — `'numeric' |
|
|
117
|
+
'formatted'`. Opt into `formatted` to reuse `valueFormatter` (or `tooltipFormatter` when no
|
|
118
|
+
value formatter is supplied) for the visible readout too. Each range handle is formatted
|
|
119
|
+
separately; nullish results fall back to localized numbers. Existing ARIA and tooltip behavior
|
|
120
|
+
is unchanged. The callback owns its unit labels and locale formatting.
|
|
121
|
+
- `valuePlacement: SliderValuePlacement = 'inline'` (attribute `value-placement`) — `'inline' |
|
|
122
|
+
'label'`. With `showValue`, `label` places the readout opposite the label in a wrapping row that
|
|
123
|
+
follows RTL. The readout stays outside the accessible label. These presentation options update
|
|
124
|
+
on live `lr-input` changes without changing the commit-only `lr-change` contract.
|
|
116
125
|
- `value: number = 0`, `defaultValue: number = 0` (attribute `value`), `valueAsNumber: number`, and
|
|
117
126
|
`valueAsString: string` are synchronized and finite. Values normalize the low/high domain, snap
|
|
118
127
|
to the grid anchored at the low endpoint, then clamp so a non-grid endpoint remains reachable;
|
|
@@ -165,7 +174,8 @@ live value bubble per handle, present only with `with-tooltip`), `tooltip-visibl
|
|
|
165
174
|
`tooltip` element's part list_ while that handle is focused or dragged — visibility is encoded in
|
|
166
175
|
the part name because `::part(tooltip)[data-visible]` is invalid CSS and never matches; write
|
|
167
176
|
`::part(tooltip-visible)`). The tooltip also exposes `tooltip__tooltip`, `tooltip__content`, and
|
|
168
|
-
`tooltip__arrow`. `value` is the opt-in
|
|
177
|
+
`tooltip__arrow`. `value` is the opt-in readout; `label-row` contains the separate label and value
|
|
178
|
+
nodes when `showValue` and `valuePlacement="label"` are enabled.
|
|
169
179
|
|
|
170
180
|
**CSS custom states:** `disabled`, `dragging`, `focused`, `required`, `optional`, `valid`,
|
|
171
181
|
`invalid`, `user-valid`, and `user-invalid`. A slider always has a finite numeric value, so
|
|
@@ -270,8 +280,14 @@ is present for upstream form-surface parity but adds no missing-value constraint
|
|
|
270
280
|
value); ArrowUp/ArrowDown are never swapped, since direction only affects the horizontal inline axis.
|
|
271
281
|
- Changing `min`/`max`/`step` after mount automatically re-clamps/re-snaps the current `value` in the
|
|
272
282
|
next update — narrowing the domain can silently move the slider's value.
|
|
273
|
-
- `valueFormatter` is presentation-only: `aria-valuenow`,
|
|
274
|
-
|
|
283
|
+
- `valueFormatter` is presentation-only: `aria-valuenow`, geometry, form value, and emitted values
|
|
284
|
+
stay numeric. The visible readout stays numeric unless `valueDisplay="formatted"` is set.
|
|
285
|
+
- Numeric value/domain assignments in the same Lit update batch are normalized against the final
|
|
286
|
+
`min`, `max`, and `step`, regardless of binding order. Await `updateComplete` to read the settled
|
|
287
|
+
scalar or range endpoints. Immediate imperative readback remains clamped to the current domain;
|
|
288
|
+
separate update batches intentionally normalize independently. Programmatic normalization emits
|
|
289
|
+
no user input/change event.
|
|
290
|
+
With no formatter, `aria-valuetext` remains the
|
|
275
291
|
numeric string rendered by earlier versions; a nullish formatter result omits it.
|
|
276
292
|
- A pointer drag fires `lr-input` continuously and a single `lr-change` on release; a keyboard step
|
|
277
293
|
fires exactly one of each per press, but OS key-repeat while a key is held re-fires `lr-input` on
|
|
@@ -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).
|