@aceshooting/lyra-ui 21.0.0 → 21.1.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 +56 -0
- package/README.md +6 -3
- package/custom-elements.json +1 -1
- package/dist/ai/runtime.js +1 -1
- package/dist/ai/types.d.ts +13 -5
- package/dist/cli/lyra-rename-ledger.mjs +1 -0
- package/dist/cli/migrate-wa.mjs +33 -13
- package/dist/cli/migration-contract.json +1 -1
- package/dist/components/agent-tools/agent-trace/agent-trace.class.d.ts +5 -3
- package/dist/components/agent-tools/agent-trace/agent-trace.class.js +3 -2
- package/dist/components/agent-tools/tool-call-block/tool-call-block.class.d.ts +15 -3
- package/dist/components/agent-tools/tool-call-block/tool-call-block.class.js +3 -3
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.d.ts +24 -8
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.js +3 -3
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.js +4 -0
- package/dist/components/agent-tools/tool-result-dialog/tool-result-dialog.class.d.ts +9 -5
- package/dist/components/agent-tools/tool-result-dialog/tool-result-dialog.class.js +2 -2
- package/dist/components/agent-tools/tool-result-dialog/tool-result-dialog.styles.js +1 -1
- package/dist/components/agent-tools/tool-status.js +2 -2
- package/dist/components/agent-tools/tool-timeline/tool-timeline.class.d.ts +8 -0
- package/dist/components/agent-tools/tool-timeline/tool-timeline.class.js +3 -2
- package/dist/components/agent-tools/tool-timeline/tool-timeline.styles.js +1 -1
- package/dist/components/agent-tools/trace-tree/span.d.ts +2 -2
- package/dist/components/charts/chart/box-plot.class.d.ts +3 -1
- package/dist/components/charts/chart/box-plot.class.js +9 -9
- package/dist/components/charts/chart/chart-bidi.d.ts +109 -0
- package/dist/components/charts/chart/chart-bidi.js +1 -0
- package/dist/components/charts/chart/chart.class.d.ts +17 -2
- package/dist/components/charts/chart/chart.class.js +10 -8
- package/dist/components/charts/chart/histogram.class.js +1 -1
- package/dist/components/charts/chart/lite-chart.class.d.ts +24 -5
- package/dist/components/charts/chart/lite-chart.class.js +9 -9
- package/dist/components/charts/chart/lite-chart.styles.js +1 -1
- package/dist/components/conversation/code-block/shiki-dark-theme.d.ts +2 -2
- package/dist/components/conversation/code-block/shiki-dark-theme.js +1 -1
- package/dist/components/conversation/conversation-item/conversation-item.class.d.ts +18 -2
- package/dist/components/conversation/conversation-item/conversation-item.class.js +3 -3
- package/dist/components/conversation/conversation-item/conversation-item.styles.js +1 -1
- package/dist/components/conversation/markdown/markdown-base.class.js +1 -1
- package/dist/components/conversation/markdown/markdown-core.class.d.ts +3 -1
- package/dist/components/conversation/markdown/markdown.class.d.ts +3 -1
- package/dist/components/conversation/message-actions/message-actions.class.d.ts +7 -2
- package/dist/components/conversation/message-actions/message-actions.class.js +2 -2
- package/dist/components/conversation/message-parts/message-parts.class.d.ts +6 -2
- package/dist/components/conversation/message-parts/message-parts.class.js +5 -3
- package/dist/components/conversation/selection-toolbar/selection-toolbar.class.d.ts +3 -2
- package/dist/components/conversation/selection-toolbar/selection-toolbar.class.js +1 -1
- package/dist/components/conversation/streaming-text/streaming-text-base.class.d.ts +1 -5
- package/dist/components/conversation/streaming-text/streaming-text-base.class.js +2 -2
- package/dist/components/conversation/streaming-text/streaming-text-core.class.d.ts +7 -1
- package/dist/components/conversation/streaming-text/streaming-text-core.class.js +3 -4
- package/dist/components/conversation/streaming-text/streaming-text.class.d.ts +7 -1
- package/dist/components/conversation/streaming-text/streaming-text.class.js +3 -4
- package/dist/components/conversation/thread-list/thread-list.class.d.ts +13 -2
- package/dist/components/conversation/thread-list/thread-list.class.js +3 -3
- package/dist/components/data/data-grid/data-grid.class.js +1 -1
- package/dist/components/data/document-library/document-library.class.js +2 -0
- package/dist/components/data/flow-canvas/flow-canvas.class.js +1 -1
- package/dist/components/data/flow-minimap/flow-minimap.class.js +1 -1
- package/dist/components/data/flow-node/flow-node.class.d.ts +6 -2
- package/dist/components/data/flow-node/flow-node.class.js +6 -2
- package/dist/components/data/flow-node/flow-node.styles.js +1 -1
- package/dist/components/data/gauge/gauge.styles.js +1 -1
- package/dist/components/data/heatmap/heatmap.class.d.ts +3 -0
- package/dist/components/data/heatmap/heatmap.class.js +2 -2
- package/dist/components/data/heatmap/heatmap.styles.js +1 -1
- package/dist/components/data/sparkline/sparkline.class.d.ts +5 -3
- package/dist/components/data/stat/stat.class.d.ts +4 -3
- package/dist/components/data/table/table.class.d.ts +32 -5
- package/dist/components/data/table/table.class.js +3 -2
- package/dist/components/forms/button/button.class.d.ts +7 -1
- package/dist/components/forms/button/button.styles.js +1 -1
- package/dist/components/forms/date-picker/date-input.styles.js +1 -1
- package/dist/components/forms/input/input.styles.js +1 -1
- package/dist/components/forms/rubric-form/rubric-form.class.js +1 -0
- package/dist/components/layout/app-rail/app-rail.class.d.ts +50 -11
- package/dist/components/layout/app-rail/app-rail.class.js +2 -2
- package/dist/components/layout/command-palette/command-palette.class.js +1 -1
- package/dist/components/layout/menu/menu.class.d.ts +6 -5
- package/dist/components/layout/split-panel/split-panel.class.d.ts +2 -1
- package/dist/components/media/flag/language-map.d.ts +8 -0
- package/dist/components/media/flag/language-map.js +1 -1
- package/dist/components/media/map/map-loader.d.ts +7 -1
- package/dist/components/media/map/map.class.d.ts +111 -5
- package/dist/components/media/map/map.class.js +3 -3
- package/dist/components/media/media-card/media-card.class.d.ts +18 -5
- package/dist/components/media/media-card/media-card.class.js +1 -1
- package/dist/components/overlays/overlay/popover.class.d.ts +20 -0
- package/dist/components/overlays/overlay/popover.class.js +2 -2
- package/dist/components/retrieval/graph/graph.class.d.ts +3 -3
- package/dist/components/retrieval/graph/graph.class.js +1 -1
- package/dist/components/retrieval/knowledge-graph-explorer/knowledge-graph-explorer.class.d.ts +5 -3
- package/dist/components/retrieval/knowledge-graph-explorer/knowledge-graph-explorer.class.js +3 -2
- package/dist/components/retrieval/mind-map/mind-map.class.d.ts +3 -3
- package/dist/components/retrieval/mind-map/mind-map.class.js +1 -1
- package/dist/components/retrieval/retrieval-results/retrieval-results.class.d.ts +4 -1
- package/dist/components/retrieval/retrieval-results/retrieval-results.class.js +5 -1
- package/dist/components/retrieval/source-picker/source-picker.class.d.ts +4 -1
- package/dist/components/retrieval/source-picker/source-picker.class.js +5 -1
- package/dist/components/utility/icon/icon.class.d.ts +9 -3
- package/dist/components/utility/icon/icon.class.js +1 -1
- package/dist/components/utility/mutation-observer/mutation-observer.class.d.ts +14 -8
- package/dist/components/utility/mutation-observer/mutation-observer.class.js +1 -1
- package/dist/components/viewers/document-viewer/document-viewer.class.d.ts +6 -1
- package/dist/components/viewers/document-viewer/document-viewer.class.js +7 -1
- package/dist/components/viewers/document-viewer/registry.d.ts +12 -3
- package/dist/components/viewers/geojson-view/geojson-view.class.d.ts +13 -5
- package/dist/components/viewers/geojson-view/geojson-view.class.js +1 -1
- package/dist/components/viewers/geojson-view/geojson-viewer.class.d.ts +3 -2
- package/dist/custom-elements-jsx.d.ts +1 -1
- package/dist/events.d.ts +644 -1242
- package/dist/internal/anchored-overlay-runtime.d.ts +2 -2
- package/dist/internal/cell-range.d.ts +0 -6
- package/dist/internal/cell-range.js +1 -1
- package/dist/internal/css-token-length.d.ts +7 -0
- package/dist/internal/css-token-length.js +1 -0
- package/dist/internal/default-strings.generated.d.ts +1 -1
- package/dist/internal/default-strings.generated.js +1 -1
- package/dist/internal/deferred-focus-return.d.ts +7 -4
- package/dist/internal/deferred-focus-return.js +1 -1
- package/dist/internal/dev-mode-attribute-warning.d.ts +35 -0
- package/dist/internal/dev-mode-attribute-warning.js +1 -1
- package/dist/internal/localization-runtime.js +1 -1
- package/dist/internal/localization-types.d.ts +1 -1
- package/dist/internal/localization.js +2 -2
- package/dist/internal/package-metadata.d.ts +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/internal/papaparse-loader.d.ts +1 -1
- package/dist/internal/papaparse-loader.js +1 -1
- package/dist/internal/positioner.d.ts +10 -0
- package/dist/internal/positioner.js +1 -1
- package/dist/internal/shared-unions.d.ts +2 -1
- package/dist/internal/slotted-overlay-controller.d.ts +20 -0
- package/dist/internal/slotted-overlay-controller.js +1 -0
- package/dist/internal/text-quote.d.ts +1 -1
- package/dist/internal/text-quote.js +1 -1
- package/dist/internal/theme-observation.d.ts +4 -0
- package/dist/internal/theme-observation.js +1 -0
- package/dist/internal/theme-watcher.js +1 -1
- package/dist/localization.d.ts +6 -1
- package/dist/localization.js +1 -1
- package/dist/lyra.d.ts +1 -1
- package/dist/lyra.js +1 -1
- package/dist/svelte.d.ts +1 -1
- package/dist/testing/lyra-tag-event-map.js +1 -1
- package/dist/translations/ar/agent-tools.js +1 -1
- package/dist/translations/cs/agent-tools.js +1 -1
- package/dist/translations/da/agent-tools.js +1 -1
- package/dist/translations/de/agent-tools.js +1 -1
- package/dist/translations/de-CH/agent-tools.js +1 -1
- package/dist/translations/es/agent-tools.js +1 -1
- package/dist/translations/fa/agent-tools.js +1 -1
- package/dist/translations/fi/agent-tools.js +1 -1
- package/dist/translations/fr/agent-tools.js +1 -1
- package/dist/translations/he/agent-tools.js +1 -1
- package/dist/translations/hi/agent-tools.js +1 -1
- package/dist/translations/hr/agent-tools.js +1 -1
- package/dist/translations/hu/agent-tools.js +1 -1
- package/dist/translations/id/agent-tools.js +1 -1
- package/dist/translations/it/agent-tools.js +1 -1
- package/dist/translations/ja/agent-tools.js +1 -1
- package/dist/translations/kk/agent-tools.js +1 -1
- package/dist/translations/ko/agent-tools.js +1 -1
- package/dist/translations/nb/agent-tools.js +1 -1
- package/dist/translations/nl/agent-tools.js +1 -1
- package/dist/translations/nn/agent-tools.js +1 -1
- package/dist/translations/pl/agent-tools.js +1 -1
- package/dist/translations/pt-BR/agent-tools.js +1 -1
- package/dist/translations/pt-PT/agent-tools.js +1 -1
- package/dist/translations/pt-PT/charts.js +1 -1
- package/dist/translations/pt-PT/conversation.js +1 -1
- package/dist/translations/pt-PT/data.js +1 -1
- package/dist/translations/pt-PT/forms.js +1 -1
- package/dist/translations/pt-PT/layout.js +1 -1
- package/dist/translations/pt-PT/media.js +1 -1
- package/dist/translations/pt-PT/retrieval.js +1 -1
- package/dist/translations/pt-PT/shared.js +1 -1
- package/dist/translations/pt-PT/utility.js +1 -1
- package/dist/translations/pt-PT/viewers.js +2 -2
- package/dist/translations/ro/agent-tools.js +1 -1
- package/dist/translations/ru/agent-tools.js +1 -1
- package/dist/translations/sl/agent-tools.js +1 -1
- package/dist/translations/sv/agent-tools.js +1 -1
- package/dist/translations/tr/agent-tools.js +1 -1
- package/dist/translations/uk/agent-tools.js +1 -1
- package/dist/translations/zh-CN/agent-tools.js +1 -1
- package/dist/translations/zh-TW/agent-tools.js +1 -1
- package/dist/utilities/index.d.ts +1 -1
- package/dist/utilities/index.js +1 -1
- package/dist/utilities/localization.d.ts +28 -10
- package/dist/vue.d.ts +1 -1
- package/llms/components/lr-accordion-item.md +2 -344
- package/llms/components/lr-accordion.md +2 -344
- package/llms/components/lr-app-rail-group.md +2 -721
- package/llms/components/lr-app-rail-item.md +2 -721
- package/llms/components/lr-app-rail.md +29 -4
- package/llms/components/lr-bar-chart.md +2 -87
- package/llms/components/lr-box-plot.md +1 -1
- package/llms/components/lr-breadcrumb-item.md +2 -67
- package/llms/components/lr-bubble-chart.md +2 -87
- package/llms/components/lr-button.md +7 -0
- package/llms/components/lr-chart.md +4 -5
- package/llms/components/lr-chip-group.md +2 -272
- package/llms/components/lr-conversation-item.md +20 -2
- package/llms/components/lr-date-input.md +2 -457
- package/llms/components/lr-date-picker.md +6 -2
- package/llms/components/lr-document-library.md +3 -3
- package/llms/components/lr-document-viewer.md +14 -5
- package/llms/components/lr-doughnut-chart.md +2 -87
- package/llms/components/lr-dropdown-item.md +2 -306
- package/llms/components/lr-dropdown.md +6 -0
- package/llms/components/lr-flag.md +9 -1
- package/llms/components/lr-flow-node.md +4 -1
- package/llms/components/lr-geojson-view.md +3 -90
- package/llms/components/lr-geojson-viewer.md +13 -5
- package/llms/components/lr-icon-button.md +4 -1
- package/llms/components/lr-icon.md +14 -6
- package/llms/components/lr-input.md +9 -2
- package/llms/components/lr-lite-chart.md +17 -9
- package/llms/components/lr-map.md +87 -2
- package/llms/components/lr-markdown-core.md +5 -4
- package/llms/components/lr-markdown.md +4 -2
- package/llms/components/lr-media-card.md +10 -5
- package/llms/components/lr-menu-item.md +2 -306
- package/llms/components/lr-menu.md +9 -6
- package/llms/components/lr-menubar-item.md +2 -125
- package/llms/components/lr-message-actions.md +4 -1
- package/llms/components/lr-message-parts.md +14 -5
- package/llms/components/lr-mutation-observer.md +12 -6
- package/llms/components/lr-navigation-menu-item.md +2 -237
- package/llms/components/lr-number-input.md +4 -0
- package/llms/components/lr-option.md +2 -712
- package/llms/components/lr-pie-chart.md +2 -87
- package/llms/components/lr-polar-area-chart.md +2 -87
- package/llms/components/lr-popover.md +10 -0
- package/llms/components/lr-prompt-input.md +5 -1
- package/llms/components/lr-radar-chart.md +2 -87
- package/llms/components/lr-reorder-item.md +2 -157
- package/llms/components/lr-result-field.md +2 -117
- package/llms/components/lr-retrieval-results.md +3 -1
- package/llms/components/lr-rubric-form.md +3 -2
- package/llms/components/lr-scatter-chart.md +2 -87
- package/llms/components/lr-selection-toolbar.md +4 -2
- package/llms/components/lr-source-card.md +2 -186
- package/llms/components/lr-source-picker.md +3 -1
- package/llms/components/lr-sparkline.md +9 -4
- package/llms/components/lr-split-panel.md +5 -3
- package/llms/components/lr-stat.md +4 -3
- package/llms/components/lr-streaming-text-core.md +7 -5
- package/llms/components/lr-streaming-text.md +9 -6
- package/llms/components/lr-swatch-picker.md +130 -0
- package/llms/components/lr-tag.md +2 -177
- package/llms/components/lr-thread-list.md +27 -4
- package/llms/components/lr-timeline-item.md +2 -120
- package/llms/components/lr-toast-item.md +2 -223
- package/llms/components/lr-tool-call-block.md +12 -3
- package/llms/components/lr-tool-call-chip.md +12 -6
- package/llms/components/lr-tool-param-form.md +3 -2
- package/llms/components/lr-tool-result-dialog.md +7 -3
- package/llms/components/lr-tool-result-view.md +4 -3
- package/llms/components/lr-tool-timeline.md +12 -5
- package/llms/components/lr-tree-item.md +2 -354
- package/llms/index.md +22 -4
- package/llms/migration.md +75 -1
- package/llms/peers.md +1 -1
- package/llms/shared.md +86 -39
- package/llms-full.txt +739 -163
- package/package.json +6 -6
- package/registrations.json +1 -1
- package/vscode-css-data.json +1 -1
- package/vscode-html-data.json +1 -1
- package/web-types.json +1 -1
|
@@ -9,91 +9,6 @@
|
|
|
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** `chart.js`, `chartjs-plugin-annotation`, `chartjs-plugin-datalabels`, `chartjs-plugin-zoom` — see `llms/peers.md`
|
|
12
|
-
- **Themeable via** 16 parts, 37 custom properties — see
|
|
13
|
-
- **Documented with** `lr-line-chart
|
|
12
|
+
- **Themeable via** 16 parts, 37 custom properties — see `lr-line-chart.md`
|
|
13
|
+
- **Documented with** `lr-line-chart`: see [lr-line-chart.md](./lr-line-chart.md).
|
|
14
14
|
- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
|
|
15
|
-
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
## Typed subclasses: `lr-line-chart`, `lr-bar-chart`, `lr-pie-chart`, `lr-doughnut-chart`, `lr-radar-chart`, `lr-polar-area-chart`, `lr-bubble-chart`, `lr-scatter-chart`
|
|
19
|
-
|
|
20
|
-
Each is `LyraChart` with a named default `type` — respectively `line`, `bar`, `pie`, `doughnut`,
|
|
21
|
-
`radar`, `polarArea`, `bubble`, `scatter`. In parity with the mirrored tags, `type` remains writable
|
|
22
|
-
and accepts the full `LyraChartType` vocabulary; the tag name is a convenient default, not a lock.
|
|
23
|
-
|
|
24
|
-
Everything else is inherited verbatim from `lr-chart`; each name below has the same type, default,
|
|
25
|
-
and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
|
|
26
|
-
of every entry in these lists.**
|
|
27
|
-
|
|
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`,
|
|
31
|
-
`stacked`, `stackedAxes`, `withoutAnimation` (`without-animation`),
|
|
32
|
-
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
33
|
-
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`,
|
|
34
|
-
`tooltipTitleFormatter`, `tooltipFooterFormatter`, `area`, `zoom`,
|
|
35
|
-
`height`, `y2Label` (`y2-label`), `beginAtZero` (`begin-at-zero`), `dataLabels`
|
|
36
|
-
(`data-labels`), `stackTotals` (`stack-totals`), `config`, `showDataTable`
|
|
37
|
-
(`show-data-table`), `dataTableToggle` (`data-table-toggle`), `chartArea` (readonly), and `chart`.
|
|
38
|
-
`type` differs only in its initial value.
|
|
39
|
-
|
|
40
|
-
**Methods:** `appendData(label, values, maxPoints?)`, `exportData('csv' | 'png')`, `renderChart()`, `resetZoom()`,
|
|
41
|
-
`refreshTheme()`.
|
|
42
|
-
|
|
43
|
-
**Events:** `lr-zoom` (`detail: { zoomed: boolean }`), `lr-datum-activate`, `lr-point-click` (`detail: { datasetIndex,
|
|
44
|
-
index, label, value }`), `lr-legend-visibility-change-request` (cancelable), and
|
|
45
|
-
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
|
|
46
|
-
complete `hiddenDatasets` snapshot). `lr-before-legend-visibility-change` is a **deprecated** alias
|
|
47
|
-
of `lr-legend-visibility-change-request` (removal not before 21.0.0).
|
|
48
|
-
Radial category legends additionally emit `lr-datum-visibility-change-request` (cancelable) and
|
|
49
|
-
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
|
|
50
|
-
`lr-before-datum-visibility-change` is a **deprecated** alias of `lr-datum-visibility-change-request`
|
|
51
|
-
(removal not before 21.0.0).
|
|
52
|
-
|
|
53
|
-
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
54
|
-
|
|
55
|
-
**CSS parts:** `base`, `plot`, `canvas`, `legend`, `legend-item`, `legend-item-hidden`, `legend-swatch`,
|
|
56
|
-
`reset-zoom-button`, `description`, `notices`, `data-table`, `data-table-toggle`, `data-truncation`, `feature-warning`, `center`, `error` (neutral visible message
|
|
57
|
-
rendered in place of `canvas` when the optional `chart.js` peer dependency fails to load; the
|
|
58
|
-
failure transition is announced through the shared document-level light-DOM assertive sink — see
|
|
59
|
-
`llms/components/lr-chart.md`).
|
|
60
|
-
|
|
61
|
-
**Themeable custom properties:** `--lr-chart-height`, `--lr-chart-grid-color`,
|
|
62
|
-
`--lr-chart-tick-color`, `--lr-chart-tick-font-size`, `--lr-chart-legend-color`, `--lr-chart-tooltip-bg`,
|
|
63
|
-
`--lr-chart-tooltip-text`, `--lr-chart-legend-item-hover-bg`,
|
|
64
|
-
`--lr-chart-legend-item-active-bg`, `--lr-chart-data-table-button-hover-bg`,
|
|
65
|
-
`--lr-chart-data-table-button-active-bg`, `--lr-chart-data-table-toggle-hover-bg`,
|
|
66
|
-
`--lr-chart-data-table-toggle-active-bg`, `--lr-chart-reset-zoom-button-hover-bg`,
|
|
67
|
-
`--lr-chart-reset-zoom-button-active-bg`, `--lr-chart-canvas-hover-outline-width`, and
|
|
68
|
-
`--lr-chart-canvas-hover-outline-color`, `--lr-chart-pattern-step`, plus `--lr-chart-legend-side-max` — all inherited from `LyraChart`, identical in meaning and default (see
|
|
69
|
-
`lr-chart` above); each of the eight variants below reads the same set, so one rule retunes them
|
|
70
|
-
together. The mirrored hooks are `--border-color-1`,
|
|
71
|
-
`--border-color-2`, `--border-color-3`, `--border-color-4`, `--border-color-5`,
|
|
72
|
-
`--border-color-6`, `--fill-color-1`, `--fill-color-2`, `--fill-color-3`, `--fill-color-4`,
|
|
73
|
-
`--fill-color-5`, `--fill-color-6`, `--border-radius`, `--border-width`, `--grid-border-width`,
|
|
74
|
-
`--grid-color`, `--line-border-width`, and `--point-radius`, also identical to the core chart.
|
|
75
|
-
|
|
76
|
-
**Optional peer deps:** same as `lr-chart` — `chart.js`, plus `chartjs-plugin-zoom` only once
|
|
77
|
-
`zoom` is set, `chartjs-plugin-datalabels` only once `data-labels`/`stack-totals` is set, and
|
|
78
|
-
`chartjs-plugin-annotation` only once `annotations` contains a usable entry.
|
|
79
|
-
|
|
80
|
-
```html
|
|
81
|
-
<lr-bar-chart></lr-bar-chart>
|
|
82
|
-
<lr-pie-chart></lr-pie-chart>
|
|
83
|
-
<script>
|
|
84
|
-
document.querySelector('lr-bar-chart').labels = ['A', 'B'];
|
|
85
|
-
document.querySelector('lr-bar-chart').datasets = [{ label: 'Count', data: [4, 9] }];
|
|
86
|
-
|
|
87
|
-
document.querySelector('lr-pie-chart').labels = ['A', 'B', 'C'];
|
|
88
|
-
document.querySelector('lr-pie-chart').datasets = [{ label: 'Share', data: [30, 45, 25], color: ['#2563eb', '#16a34a', '#dc2626'] }];
|
|
89
|
-
</script>
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
**Known gotchas (in addition to the core `lr-chart` list in `llms/components/lr-chart.md`):**
|
|
93
|
-
- Changing `type` after construction may rebuild the underlying Chart.js instance; any active zoom
|
|
94
|
-
state is reset and announced before the new type renders.
|
|
95
|
-
- `lr-bubble-chart` consumes the exported `LyraChartPoint` shape directly. Set `x`/`y`, optional `r`
|
|
96
|
-
for bubble radius, and optional `label` for the point-level accessible/event/export label; no
|
|
97
|
-
runtime cast is needed.
|
|
98
|
-
|
|
99
|
-
---
|
|
@@ -9,91 +9,6 @@
|
|
|
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** `chart.js`, `chartjs-plugin-annotation`, `chartjs-plugin-datalabels`, `chartjs-plugin-zoom` — see `llms/peers.md`
|
|
12
|
-
- **Themeable via** 16 parts, 37 custom properties — see
|
|
13
|
-
- **Documented with** `lr-line-chart
|
|
12
|
+
- **Themeable via** 16 parts, 37 custom properties — see `lr-line-chart.md`
|
|
13
|
+
- **Documented with** `lr-line-chart`: see [lr-line-chart.md](./lr-line-chart.md).
|
|
14
14
|
- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
|
|
15
|
-
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
## Typed subclasses: `lr-line-chart`, `lr-bar-chart`, `lr-pie-chart`, `lr-doughnut-chart`, `lr-radar-chart`, `lr-polar-area-chart`, `lr-bubble-chart`, `lr-scatter-chart`
|
|
19
|
-
|
|
20
|
-
Each is `LyraChart` with a named default `type` — respectively `line`, `bar`, `pie`, `doughnut`,
|
|
21
|
-
`radar`, `polarArea`, `bubble`, `scatter`. In parity with the mirrored tags, `type` remains writable
|
|
22
|
-
and accepts the full `LyraChartType` vocabulary; the tag name is a convenient default, not a lock.
|
|
23
|
-
|
|
24
|
-
Everything else is inherited verbatim from `lr-chart`; each name below has the same type, default,
|
|
25
|
-
and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
|
|
26
|
-
of every entry in these lists.**
|
|
27
|
-
|
|
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`,
|
|
31
|
-
`stacked`, `stackedAxes`, `withoutAnimation` (`without-animation`),
|
|
32
|
-
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
33
|
-
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`,
|
|
34
|
-
`tooltipTitleFormatter`, `tooltipFooterFormatter`, `area`, `zoom`,
|
|
35
|
-
`height`, `y2Label` (`y2-label`), `beginAtZero` (`begin-at-zero`), `dataLabels`
|
|
36
|
-
(`data-labels`), `stackTotals` (`stack-totals`), `config`, `showDataTable`
|
|
37
|
-
(`show-data-table`), `dataTableToggle` (`data-table-toggle`), `chartArea` (readonly), and `chart`.
|
|
38
|
-
`type` differs only in its initial value.
|
|
39
|
-
|
|
40
|
-
**Methods:** `appendData(label, values, maxPoints?)`, `exportData('csv' | 'png')`, `renderChart()`, `resetZoom()`,
|
|
41
|
-
`refreshTheme()`.
|
|
42
|
-
|
|
43
|
-
**Events:** `lr-zoom` (`detail: { zoomed: boolean }`), `lr-datum-activate`, `lr-point-click` (`detail: { datasetIndex,
|
|
44
|
-
index, label, value }`), `lr-legend-visibility-change-request` (cancelable), and
|
|
45
|
-
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
|
|
46
|
-
complete `hiddenDatasets` snapshot). `lr-before-legend-visibility-change` is a **deprecated** alias
|
|
47
|
-
of `lr-legend-visibility-change-request` (removal not before 21.0.0).
|
|
48
|
-
Radial category legends additionally emit `lr-datum-visibility-change-request` (cancelable) and
|
|
49
|
-
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
|
|
50
|
-
`lr-before-datum-visibility-change` is a **deprecated** alias of `lr-datum-visibility-change-request`
|
|
51
|
-
(removal not before 21.0.0).
|
|
52
|
-
|
|
53
|
-
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
54
|
-
|
|
55
|
-
**CSS parts:** `base`, `plot`, `canvas`, `legend`, `legend-item`, `legend-item-hidden`, `legend-swatch`,
|
|
56
|
-
`reset-zoom-button`, `description`, `notices`, `data-table`, `data-table-toggle`, `data-truncation`, `feature-warning`, `center`, `error` (neutral visible message
|
|
57
|
-
rendered in place of `canvas` when the optional `chart.js` peer dependency fails to load; the
|
|
58
|
-
failure transition is announced through the shared document-level light-DOM assertive sink — see
|
|
59
|
-
`llms/components/lr-chart.md`).
|
|
60
|
-
|
|
61
|
-
**Themeable custom properties:** `--lr-chart-height`, `--lr-chart-grid-color`,
|
|
62
|
-
`--lr-chart-tick-color`, `--lr-chart-tick-font-size`, `--lr-chart-legend-color`, `--lr-chart-tooltip-bg`,
|
|
63
|
-
`--lr-chart-tooltip-text`, `--lr-chart-legend-item-hover-bg`,
|
|
64
|
-
`--lr-chart-legend-item-active-bg`, `--lr-chart-data-table-button-hover-bg`,
|
|
65
|
-
`--lr-chart-data-table-button-active-bg`, `--lr-chart-data-table-toggle-hover-bg`,
|
|
66
|
-
`--lr-chart-data-table-toggle-active-bg`, `--lr-chart-reset-zoom-button-hover-bg`,
|
|
67
|
-
`--lr-chart-reset-zoom-button-active-bg`, `--lr-chart-canvas-hover-outline-width`, and
|
|
68
|
-
`--lr-chart-canvas-hover-outline-color`, `--lr-chart-pattern-step`, plus `--lr-chart-legend-side-max` — all inherited from `LyraChart`, identical in meaning and default (see
|
|
69
|
-
`lr-chart` above); each of the eight variants below reads the same set, so one rule retunes them
|
|
70
|
-
together. The mirrored hooks are `--border-color-1`,
|
|
71
|
-
`--border-color-2`, `--border-color-3`, `--border-color-4`, `--border-color-5`,
|
|
72
|
-
`--border-color-6`, `--fill-color-1`, `--fill-color-2`, `--fill-color-3`, `--fill-color-4`,
|
|
73
|
-
`--fill-color-5`, `--fill-color-6`, `--border-radius`, `--border-width`, `--grid-border-width`,
|
|
74
|
-
`--grid-color`, `--line-border-width`, and `--point-radius`, also identical to the core chart.
|
|
75
|
-
|
|
76
|
-
**Optional peer deps:** same as `lr-chart` — `chart.js`, plus `chartjs-plugin-zoom` only once
|
|
77
|
-
`zoom` is set, `chartjs-plugin-datalabels` only once `data-labels`/`stack-totals` is set, and
|
|
78
|
-
`chartjs-plugin-annotation` only once `annotations` contains a usable entry.
|
|
79
|
-
|
|
80
|
-
```html
|
|
81
|
-
<lr-bar-chart></lr-bar-chart>
|
|
82
|
-
<lr-pie-chart></lr-pie-chart>
|
|
83
|
-
<script>
|
|
84
|
-
document.querySelector('lr-bar-chart').labels = ['A', 'B'];
|
|
85
|
-
document.querySelector('lr-bar-chart').datasets = [{ label: 'Count', data: [4, 9] }];
|
|
86
|
-
|
|
87
|
-
document.querySelector('lr-pie-chart').labels = ['A', 'B', 'C'];
|
|
88
|
-
document.querySelector('lr-pie-chart').datasets = [{ label: 'Share', data: [30, 45, 25], color: ['#2563eb', '#16a34a', '#dc2626'] }];
|
|
89
|
-
</script>
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
**Known gotchas (in addition to the core `lr-chart` list in `llms/components/lr-chart.md`):**
|
|
93
|
-
- Changing `type` after construction may rebuild the underlying Chart.js instance; any active zoom
|
|
94
|
-
state is reset and announced before the new type renders.
|
|
95
|
-
- `lr-bubble-chart` consumes the exported `LyraChartPoint` shape directly. Set `x`/`y`, optional `r`
|
|
96
|
-
for bubble radius, and optional `label` for the point-level accessible/event/export label; no
|
|
97
|
-
runtime cast is needed.
|
|
98
|
-
|
|
99
|
-
---
|
|
@@ -76,6 +76,16 @@ If the import fails, leave the native disclosure visible and usable.
|
|
|
76
76
|
escapes transformed, filtered or contained ancestors by promoting the popup into the browser top
|
|
77
77
|
layer where the native Popover API exists; otherwise, as before, such an ancestor contains and
|
|
78
78
|
clips it (see **Anchored overlays and the top layer**).
|
|
79
|
+
- `topLayer: boolean = false` (attribute `top-layer`, reflected) — always shows the open popup in
|
|
80
|
+
the browser top layer where the native Popover API exists, so it paints above every page layer
|
|
81
|
+
whatever the stacking contexts around it: the fix for a popover in a `z-index`ed fixed or sticky
|
|
82
|
+
header, toolbar or rail that a sibling surface stacked higher would otherwise cover. While set the
|
|
83
|
+
popup is placed with the `fixed` strategy whatever `positioning-strategy` resolves to (the
|
|
84
|
+
property still reads back its own value). Anchoring, the arrow, RTL placement, focus, Escape,
|
|
85
|
+
light dismiss, the hover bridge and the show/hide transition are unchanged, because no DOM node
|
|
86
|
+
moves; the popup stays promoted through its hide transition and leaves the top layer once it
|
|
87
|
+
settles closed. Changes apply live while open. Without native Popover API support the popup keeps
|
|
88
|
+
its ordinary `z-index` stacking. Unset, nothing changes: only a trapping ancestor promotes it.
|
|
79
89
|
- `trigger: string = 'click'` — a _space-separated_ list of `click` (the shipped behaviour),
|
|
80
90
|
`hover`, `focus` and `manual`, spelled exactly the way `<lr-tooltip>`'s `trigger` is, so
|
|
81
91
|
`trigger="hover focus"` means the same thing on both. `LyraPopoverTrigger` is the type of one
|
|
@@ -81,7 +81,11 @@ textarea, paired with `lr-input` and `lr-change`; `lr-submit` (`{ value }`),
|
|
|
81
81
|
`lr-audio-request`, `lr-attachment-retry` (`{ attachmentId }`), and cancelable
|
|
82
82
|
`lr-attachment-preview-request` (`{ attachmentId, name, mimeType, src }`). Child events are stopped
|
|
83
83
|
and re-emitted from `lr-prompt-input`; all composed interactions are suppressed while `disabled`,
|
|
84
|
-
including a child event dispatched in the same turn that disables the host.
|
|
84
|
+
including a child event dispatched in the same turn that disables the host. The one deliberate
|
|
85
|
+
exception is the built-in voice picker's preview pair: its cancelable `lr-preview-request`
|
|
86
|
+
(`{ voiceId, previewUrl? }`) and `lr-preview-change` (`{ voiceId }`) reach the host unchanged, so a
|
|
87
|
+
host can play its own TTS preview (call `preventDefault()`) for catalog entries without a
|
|
88
|
+
`previewUrl`, including plain-string catalogs.
|
|
85
89
|
|
|
86
90
|
**Slots:** `controls`; `start` (attachment-control content before the textarea); `chips`; `end`
|
|
87
91
|
(custom send/stop action); and `footer`. `start` replaces the default attachment trigger and `end`
|
|
@@ -9,91 +9,6 @@
|
|
|
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** `chart.js`, `chartjs-plugin-annotation`, `chartjs-plugin-datalabels`, `chartjs-plugin-zoom` — see `llms/peers.md`
|
|
12
|
-
- **Themeable via** 16 parts, 37 custom properties — see
|
|
13
|
-
- **Documented with** `lr-line-chart
|
|
12
|
+
- **Themeable via** 16 parts, 37 custom properties — see `lr-line-chart.md`
|
|
13
|
+
- **Documented with** `lr-line-chart`: see [lr-line-chart.md](./lr-line-chart.md).
|
|
14
14
|
- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
|
|
15
|
-
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
## Typed subclasses: `lr-line-chart`, `lr-bar-chart`, `lr-pie-chart`, `lr-doughnut-chart`, `lr-radar-chart`, `lr-polar-area-chart`, `lr-bubble-chart`, `lr-scatter-chart`
|
|
19
|
-
|
|
20
|
-
Each is `LyraChart` with a named default `type` — respectively `line`, `bar`, `pie`, `doughnut`,
|
|
21
|
-
`radar`, `polarArea`, `bubble`, `scatter`. In parity with the mirrored tags, `type` remains writable
|
|
22
|
-
and accepts the full `LyraChartType` vocabulary; the tag name is a convenient default, not a lock.
|
|
23
|
-
|
|
24
|
-
Everything else is inherited verbatim from `lr-chart`; each name below has the same type, default,
|
|
25
|
-
and behavior there. **See `llms/components/lr-chart.md` for the details, code example, and gotchas
|
|
26
|
-
of every entry in these lists.**
|
|
27
|
-
|
|
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`,
|
|
31
|
-
`stacked`, `stackedAxes`, `withoutAnimation` (`without-animation`),
|
|
32
|
-
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
33
|
-
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`,
|
|
34
|
-
`tooltipTitleFormatter`, `tooltipFooterFormatter`, `area`, `zoom`,
|
|
35
|
-
`height`, `y2Label` (`y2-label`), `beginAtZero` (`begin-at-zero`), `dataLabels`
|
|
36
|
-
(`data-labels`), `stackTotals` (`stack-totals`), `config`, `showDataTable`
|
|
37
|
-
(`show-data-table`), `dataTableToggle` (`data-table-toggle`), `chartArea` (readonly), and `chart`.
|
|
38
|
-
`type` differs only in its initial value.
|
|
39
|
-
|
|
40
|
-
**Methods:** `appendData(label, values, maxPoints?)`, `exportData('csv' | 'png')`, `renderChart()`, `resetZoom()`,
|
|
41
|
-
`refreshTheme()`.
|
|
42
|
-
|
|
43
|
-
**Events:** `lr-zoom` (`detail: { zoomed: boolean }`), `lr-datum-activate`, `lr-point-click` (`detail: { datasetIndex,
|
|
44
|
-
index, label, value }`), `lr-legend-visibility-change-request` (cancelable), and
|
|
45
|
-
`lr-legend-visibility-change` (commit; both legend events carry `datasetIndex`, `visible`, and the
|
|
46
|
-
complete `hiddenDatasets` snapshot). `lr-before-legend-visibility-change` is a **deprecated** alias
|
|
47
|
-
of `lr-legend-visibility-change-request` (removal not before 21.0.0).
|
|
48
|
-
Radial category legends additionally emit `lr-datum-visibility-change-request` (cancelable) and
|
|
49
|
-
`lr-datum-visibility-change`, carrying `index`, `visible` and the frozen `hiddenDatums` snapshot.
|
|
50
|
-
`lr-before-datum-visibility-change` is a **deprecated** alias of `lr-datum-visibility-change-request`
|
|
51
|
-
(removal not before 21.0.0).
|
|
52
|
-
|
|
53
|
-
**Slots:** default JSON configuration script, `data-table`, `center`.
|
|
54
|
-
|
|
55
|
-
**CSS parts:** `base`, `plot`, `canvas`, `legend`, `legend-item`, `legend-item-hidden`, `legend-swatch`,
|
|
56
|
-
`reset-zoom-button`, `description`, `notices`, `data-table`, `data-table-toggle`, `data-truncation`, `feature-warning`, `center`, `error` (neutral visible message
|
|
57
|
-
rendered in place of `canvas` when the optional `chart.js` peer dependency fails to load; the
|
|
58
|
-
failure transition is announced through the shared document-level light-DOM assertive sink — see
|
|
59
|
-
`llms/components/lr-chart.md`).
|
|
60
|
-
|
|
61
|
-
**Themeable custom properties:** `--lr-chart-height`, `--lr-chart-grid-color`,
|
|
62
|
-
`--lr-chart-tick-color`, `--lr-chart-tick-font-size`, `--lr-chart-legend-color`, `--lr-chart-tooltip-bg`,
|
|
63
|
-
`--lr-chart-tooltip-text`, `--lr-chart-legend-item-hover-bg`,
|
|
64
|
-
`--lr-chart-legend-item-active-bg`, `--lr-chart-data-table-button-hover-bg`,
|
|
65
|
-
`--lr-chart-data-table-button-active-bg`, `--lr-chart-data-table-toggle-hover-bg`,
|
|
66
|
-
`--lr-chart-data-table-toggle-active-bg`, `--lr-chart-reset-zoom-button-hover-bg`,
|
|
67
|
-
`--lr-chart-reset-zoom-button-active-bg`, `--lr-chart-canvas-hover-outline-width`, and
|
|
68
|
-
`--lr-chart-canvas-hover-outline-color`, `--lr-chart-pattern-step`, plus `--lr-chart-legend-side-max` — all inherited from `LyraChart`, identical in meaning and default (see
|
|
69
|
-
`lr-chart` above); each of the eight variants below reads the same set, so one rule retunes them
|
|
70
|
-
together. The mirrored hooks are `--border-color-1`,
|
|
71
|
-
`--border-color-2`, `--border-color-3`, `--border-color-4`, `--border-color-5`,
|
|
72
|
-
`--border-color-6`, `--fill-color-1`, `--fill-color-2`, `--fill-color-3`, `--fill-color-4`,
|
|
73
|
-
`--fill-color-5`, `--fill-color-6`, `--border-radius`, `--border-width`, `--grid-border-width`,
|
|
74
|
-
`--grid-color`, `--line-border-width`, and `--point-radius`, also identical to the core chart.
|
|
75
|
-
|
|
76
|
-
**Optional peer deps:** same as `lr-chart` — `chart.js`, plus `chartjs-plugin-zoom` only once
|
|
77
|
-
`zoom` is set, `chartjs-plugin-datalabels` only once `data-labels`/`stack-totals` is set, and
|
|
78
|
-
`chartjs-plugin-annotation` only once `annotations` contains a usable entry.
|
|
79
|
-
|
|
80
|
-
```html
|
|
81
|
-
<lr-bar-chart></lr-bar-chart>
|
|
82
|
-
<lr-pie-chart></lr-pie-chart>
|
|
83
|
-
<script>
|
|
84
|
-
document.querySelector('lr-bar-chart').labels = ['A', 'B'];
|
|
85
|
-
document.querySelector('lr-bar-chart').datasets = [{ label: 'Count', data: [4, 9] }];
|
|
86
|
-
|
|
87
|
-
document.querySelector('lr-pie-chart').labels = ['A', 'B', 'C'];
|
|
88
|
-
document.querySelector('lr-pie-chart').datasets = [{ label: 'Share', data: [30, 45, 25], color: ['#2563eb', '#16a34a', '#dc2626'] }];
|
|
89
|
-
</script>
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
**Known gotchas (in addition to the core `lr-chart` list in `llms/components/lr-chart.md`):**
|
|
93
|
-
- Changing `type` after construction may rebuild the underlying Chart.js instance; any active zoom
|
|
94
|
-
state is reset and announced before the new type renders.
|
|
95
|
-
- `lr-bubble-chart` consumes the exported `LyraChartPoint` shape directly. Set `x`/`y`, optional `r`
|
|
96
|
-
for bubble radius, and optional `label` for the point-level accessible/event/export label; no
|
|
97
|
-
runtime cast is needed.
|
|
98
|
-
|
|
99
|
-
---
|
|
@@ -9,161 +9,6 @@
|
|
|
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** 6 parts, 5 custom properties — see
|
|
13
|
-
- **Documented with** `lr-reorder-list
|
|
12
|
+
- **Themeable via** 6 parts, 5 custom properties — see `lr-reorder-list.md`
|
|
13
|
+
- **Documented with** `lr-reorder-list`: see [lr-reorder-list.md](./lr-reorder-list.md).
|
|
14
14
|
- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
|
|
15
|
-
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
## `lr-reorder-list` / `lr-reorder-item`
|
|
19
|
-
|
|
20
|
-
A generic flat-list reorder primitive: per-row move-up/move-down buttons (always available), plus
|
|
21
|
-
Ctrl/Cmd+ArrowUp/ArrowDown from focus anywhere inside a row — the same modifier convention
|
|
22
|
-
`<lr-tree>`'s `reorderable` and `<lr-dashboard-grid>`'s `cells-draggable` already establish. By
|
|
23
|
-
default this list physically moves its own slotted `<lr-reorder-item>` light-DOM nodes itself
|
|
24
|
-
(there is no `data` array prop to reconcile against), and emits `lr-reorder` with the full new
|
|
25
|
-
order so the host can persist it without hand-rolling its own splice/resort logic. Setting
|
|
26
|
-
`controlled` opts into `<lr-tree>`'s controlled `reorderable` contract instead: the list stops
|
|
27
|
-
moving anything itself, and waits for the host to reorder its own backing data and re-render the
|
|
28
|
-
slotted items to match — reconciled by each item's `value` rather than by element reference, so a
|
|
29
|
-
non-keyed host re-render that recreates the moved row (or merely rewrites `value` on the elements
|
|
30
|
-
already at each position) still completes the move once the resulting order matches. `lr-reorder`
|
|
31
|
-
is cancelable — a listener calling `preventDefault()` holds the move open (mirroring
|
|
32
|
-
`lr-confirm-bar`'s cancelable approve/deny pattern) until the host calls
|
|
33
|
-
`finalizePendingMove()`/`revertPendingMove()`; `controlled` changes what "applying" the move
|
|
34
|
-
means (host re-render instead of a physical DOM move) but not this cancelable contract.
|
|
35
|
-
|
|
36
|
-
Direct item `value` property or attribute edits refresh the owning list's valid identities and
|
|
37
|
-
movement boundaries. Correcting a missing or duplicate identity re-enables the corresponding
|
|
38
|
-
controls; making it invalid disables them. Identity edits do not emit a reorder event. Removing the
|
|
39
|
-
value attribute from a standalone item renders it as absent while preserving `null` readback; an
|
|
40
|
-
explicit empty string remains supplied and later valid values recover.
|
|
41
|
-
|
|
42
|
-
### `lr-reorder-list`
|
|
43
|
-
|
|
44
|
-
**Properties:**
|
|
45
|
-
|
|
46
|
-
- `label: string = ''` — accessible-name fallback for the internal `role="list"`. A present host
|
|
47
|
-
`aria-label` always wins over `label`, including when the host value is explicitly empty.
|
|
48
|
-
- `disabled: boolean = false` (reflected) — disables every item's move buttons and the Ctrl/Cmd+
|
|
49
|
-
Arrow shortcut, without mutating any item's own `disabled` attribute.
|
|
50
|
-
- `controlled: boolean = false` (reflected) — opts into the controlled mode described above:
|
|
51
|
-
an accepted move waits for a matching host re-render (reconciled by `value`) instead of moving
|
|
52
|
-
the DOM itself. Every move action stays disabled and `aria-busy="true"`/`:state(busy)` apply
|
|
53
|
-
list-wide for the whole wait, the same as a `preventDefault()`-held move. A host re-render that
|
|
54
|
-
never reaches the exact emitted `order` leaves the move pending indefinitely; one that drops the
|
|
55
|
-
moved `value` entirely (removes or renames that row) cancels it silently, with no announcement.
|
|
56
|
-
Toggling this off while a reconciliation is pending drops it rather than leaving the list stuck
|
|
57
|
-
busy.
|
|
58
|
-
|
|
59
|
-
**Events:** `lr-reorder`
|
|
60
|
-
(`detail: LyraReorderDetail { readonly order: readonly string[], readonly fromIndex: number,
|
|
61
|
-
readonly toIndex: number }`, cancelable) — fired before a move is applied; `order` is an immutable
|
|
62
|
-
snapshot of every valid item's stable `value` in the order the move WOULD produce. Uncanceled, the
|
|
63
|
-
move applies synchronously only if the exact mover, target, membership, order, identities, and
|
|
64
|
-
availability remain valid after dispatch — or, while `controlled`, starts waiting for the host's
|
|
65
|
-
own re-render to reach that `order` instead. `preventDefault()` holds the move instead: the
|
|
66
|
-
internal list exposes `aria-busy="true"`, every move action is disabled, the affected item exposes
|
|
67
|
-
`:state(pending)`, and no other move can start until the host resolves it — see **Methods** below.
|
|
68
|
-
Synchronous finalize/revert calls from the canceling listener are supported.
|
|
69
|
-
|
|
70
|
-
**Methods:** `finalizePendingMove()` — applies a move held via `preventDefault()` (or, while
|
|
71
|
-
`controlled`, starts waiting for the host's own re-render instead of moving the DOM itself).
|
|
72
|
-
`revertPendingMove(options?: { silent?: boolean })` — discards a held move, restoring the prior
|
|
73
|
-
order; pass `{ silent: true }` to suppress the built-in `reorderMoveCancelled` announcement, e.g.
|
|
74
|
-
when a host is deferring the decision to a flow of its own (a confirmation dialog, say) that will
|
|
75
|
-
communicate the outcome itself. Both methods no-op when nothing is pending.
|
|
76
|
-
|
|
77
|
-
**Slots:** default — `<lr-reorder-item>` elements.
|
|
78
|
-
|
|
79
|
-
**CSS parts:** `base` — the internal `role="list"` wrapper.
|
|
80
|
-
|
|
81
|
-
**Themeable custom properties:** `--lr-reorder-list-gap` (default `var(--lr-space-2xs)`) — gap
|
|
82
|
-
between rows.
|
|
83
|
-
|
|
84
|
-
```html
|
|
85
|
-
<lr-reorder-list label="Form fields">
|
|
86
|
-
<lr-reorder-item value="name">Name</lr-reorder-item>
|
|
87
|
-
<lr-reorder-item value="email">Email</lr-reorder-item>
|
|
88
|
-
<lr-reorder-item value="phone">Phone</lr-reorder-item>
|
|
89
|
-
</lr-reorder-list>
|
|
90
|
-
<script type="module">
|
|
91
|
-
document
|
|
92
|
-
.querySelector("lr-reorder-list")
|
|
93
|
-
.addEventListener("lr-reorder", (e) => console.log(e.detail.order));
|
|
94
|
-
</script>
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
**Known gotchas:**
|
|
98
|
-
|
|
99
|
-
- Boundary-disabled state (`atStart`/`atEnd`), `listDisabled`, and `pending` are readonly effective
|
|
100
|
-
state computed by the owning list and exposed through item custom states.
|
|
101
|
-
- Every item requires a unique, nonempty stable `value`. Missing, whitespace-only, and later
|
|
102
|
-
duplicate identities remain visible but their move actions are unavailable until corrected.
|
|
103
|
-
- Ctrl/Cmd+Arrow is consumed only for a valid owned move. A boundary/no-op gesture or one from a
|
|
104
|
-
nested input, select, link, button, editable region, or custom control retains its native action.
|
|
105
|
-
- No pointer drag-and-drop; move-up/move-down buttons and the keyboard shortcut only.
|
|
106
|
-
- `controlled` reconciliation is keyed by `value`, never by element reference: a host re-render
|
|
107
|
-
that recreates the moved row as a brand-new element, or one that leaves every node in place and
|
|
108
|
-
just rewrites `value` at each position (the common outcome of a non-keyed `Array.map()` into the
|
|
109
|
-
default slot), both complete the move once the resulting order matches.
|
|
110
|
-
|
|
111
|
-
---
|
|
112
|
-
|
|
113
|
-
### `lr-reorder-item`
|
|
114
|
-
|
|
115
|
-
**Properties:**
|
|
116
|
-
|
|
117
|
-
- `value: string = ''` — required unique, nonempty stable identifier included in the parent's
|
|
118
|
-
`lr-reorder` order array.
|
|
119
|
-
- `accessibleLabel?: string` (attribute `accessible-label`) — explicit row identity appended to
|
|
120
|
-
each repeated move action's accessible name; otherwise the item derives a bounded accessible
|
|
121
|
-
text projection from its row content.
|
|
122
|
-
- `disabled: boolean = false` (reflected) — disables this row's own move buttons only; does not
|
|
123
|
-
hide its slotted content.
|
|
124
|
-
- `atStart: boolean`, `atEnd: boolean`, `listDisabled: boolean`, `pending: boolean` (readonly) —
|
|
125
|
-
effective owner state. Corresponding custom states include `:state(at-start)`, `:state(at-end)`,
|
|
126
|
-
`:state(list-disabled)`, `:state(pending)`, and `:state(busy)`.
|
|
127
|
-
|
|
128
|
-
**Events:** `lr-move-request` (`detail: { direction: 'up' | 'down' }` — a move button was activated
|
|
129
|
-
while not disabled; handled by the parent `<lr-reorder-list>`, which performs the actual move)
|
|
130
|
-
|
|
131
|
-
**Methods:** `focusMoveButton(direction: 'up' | 'down'): boolean` — moves focus to the requested
|
|
132
|
-
move control and returns whether it did; a no-op returning `false` when that control is disabled
|
|
133
|
-
for any reason (this item's own `disabled`, the owning list's `listDisabled`, a move held or a
|
|
134
|
-
controlled reconciliation pending anywhere in the list, an invalid identity, or that direction
|
|
135
|
-
already being this item's boundary). The owning `<lr-reorder-list>` uses it for its own post-move
|
|
136
|
-
focus restore, including onto a freshly recreated element instance while `controlled`; a host can
|
|
137
|
-
call it the same way.
|
|
138
|
-
|
|
139
|
-
**Slots:** default — arbitrary row content.
|
|
140
|
-
|
|
141
|
-
**CSS parts:** `base` (row wrapper), `move-up-button`, `move-down-button`,
|
|
142
|
-
`move-up-button__control` / `move-down-button__control` (each move control's own native `<button>` —
|
|
143
|
-
as of 16.0.0 the move controls are composed `<lr-icon-button>`s: the old part names keep placement,
|
|
144
|
-
rotation and activation, while background, radius, hover/press mixes, focus ring and hit-area floor
|
|
145
|
-
come from `--lr-icon-button-*`, and the component's own `--lr-reorder-item-move-button-*` hooks still
|
|
146
|
-
win over those defaults), `content` (default-slot wrapper).
|
|
147
|
-
|
|
148
|
-
**Border reaches the composed move controls the same way background/color/radius do.** This
|
|
149
|
-
component paints no resting border on either move control, so it relays no
|
|
150
|
-
`--_lr-icon-button-border-default` into their private fallback tier — but that absence is not a
|
|
151
|
-
gap. The public `--lr-icon-button-border` (and its `-hover`/`-active` variants) is the FIRST arm
|
|
152
|
-
of the token chain, resolved by ordinary custom-property inheritance regardless of whether this
|
|
153
|
-
component relays a default for that same property, so setting it on either move control or an
|
|
154
|
-
ancestor reaches it exactly as the background/color/radius tokens do. A component with no resting
|
|
155
|
-
border simply has no default to relay, which is different from border theming being broken. Size
|
|
156
|
-
remains the one exception that does not cross this way: use `--lr-theme-icon-button-size`, never
|
|
157
|
-
`--lr-icon-button-size` — every `LyraElement` re-declares the latter on its own `:host`, so it
|
|
158
|
-
never reaches a composed child (see `llms/tokens.md`).
|
|
159
|
-
|
|
160
|
-
**Themeable custom properties:** `--lr-reorder-item-gap` (default `var(--lr-space-xs)`) — gap
|
|
161
|
-
between the move buttons and the row content. The move-button interaction paints are independent,
|
|
162
|
-
inherited inline fallbacks: `--lr-reorder-item-move-button-hover-bg` (default
|
|
163
|
-
`var(--lr-color-brand-quiet)`), `--lr-reorder-item-move-button-hover-color` (default
|
|
164
|
-
`var(--lr-color-brand)`), `--lr-reorder-item-move-button-active-bg` (default `color-mix(in oklab,
|
|
165
|
-
var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))`), and
|
|
166
|
-
`--lr-reorder-item-move-button-active-color` (default `var(--lr-color-brand)`). Set them on an item
|
|
167
|
-
or any ancestor to retheme only the hover or pressed move affordance.
|
|
168
|
-
|
|
169
|
-
---
|
|
@@ -9,121 +9,6 @@
|
|
|
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** 3 parts, 0 custom properties — see
|
|
13
|
-
- **Documented with** `lr-result-card
|
|
12
|
+
- **Themeable via** 3 parts, 0 custom properties — see `lr-result-card.md`
|
|
13
|
+
- **Documented with** `lr-result-card`: see [lr-result-card.md](./lr-result-card.md).
|
|
14
14
|
- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`
|
|
15
|
-
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
## `lr-result-card` / `lr-result-field`
|
|
19
|
-
|
|
20
|
-
A small, tightly-coupled pair giving any custom `lr-tool-result-view` renderer (registered via
|
|
21
|
-
`registerToolRenderer()` in `../tool-result-view/registry.js`) a consistent "small bordered card +
|
|
22
|
-
label/value row" visual language, without each one hand-rolling its own box. Neither component has
|
|
23
|
-
any code dependency on the tool-result-view registry itself — they're generically usable anywhere a
|
|
24
|
-
small card/field shell is useful.
|
|
25
|
-
|
|
26
|
-
Removing `heading` or a result field `label` hides that text while preserving the card actions and
|
|
27
|
-
field value.
|
|
28
|
-
|
|
29
|
-
### `lr-result-card`
|
|
30
|
-
|
|
31
|
-
A small bordered card shell. Purely visual, with no state of its own beyond slot-presence tracking.
|
|
32
|
-
|
|
33
|
-
**Properties:**
|
|
34
|
-
|
|
35
|
-
- `heading: string = ''` — small heading for the card. Leave unset for an untitled card (e.g. a bare
|
|
36
|
-
block of `lr-result-field` rows with no natural heading).
|
|
37
|
-
- `compact: boolean = false` (reflected) — tighter header/body padding for dense contexts (a card
|
|
38
|
-
rendered as a row in a transcript or result list), same convention as `<lr-agent-run>`'s own
|
|
39
|
-
`compact`. Purely a density knob: the border and background stay, so use `frame="plain"`
|
|
40
|
-
instead to drop the chrome entirely. When both are set, plain leaves compact padding and gaps
|
|
41
|
-
intact.
|
|
42
|
-
- `frame: LyraFrame = 'card'` (reflected) — container treatment, in the library-wide `frame`
|
|
43
|
-
vocabulary (`'card' | 'plain'`), the same property `<lr-agent-run>`/`<lr-card>` carry. `'card'`
|
|
44
|
-
(the default) keeps the bordered, filled box. `'plain'` removes the border, background, and corner
|
|
45
|
-
radius, so a card nested inside a host frame that already draws a border (e.g.
|
|
46
|
-
`<lr-tool-result-view>`'s own chrome) doesn't double it. Plain controls only the chrome; compact
|
|
47
|
-
padding and gaps still apply when both are set. The exported alias `ResultCardAppearance` is
|
|
48
|
-
retained as a name for the same union.
|
|
49
|
-
- `withActions: boolean = false` (attribute `with-actions`, reflected) — explicit first-render
|
|
50
|
-
presence hint for the `actions` slot. Client-only markup normally does not need it because the
|
|
51
|
-
component detects assigned actions during upgrade; set it before both server and browser first
|
|
52
|
-
render when an actions-only header must be present in the no-JavaScript response and reused by
|
|
53
|
-
hydration.
|
|
54
|
-
|
|
55
|
-
**Events:** none.
|
|
56
|
-
|
|
57
|
-
**Slots:** default (the card body — typically one or more `lr-result-field` rows, though any
|
|
58
|
-
content is accepted), `actions` (small header controls, e.g. a copy button, rendered alongside the
|
|
59
|
-
heading).
|
|
60
|
-
|
|
61
|
-
**CSS parts:** `base` (outer bordered container), `header` (present in the DOM at all times so a
|
|
62
|
-
later `slotchange` on `actions` is still observed, but `hidden` whenever there's no `heading` and no
|
|
63
|
-
`actions` content), `heading` (truncates with an ellipsis when it overflows; carries its own native
|
|
64
|
-
`title` attribute — the full string — so hovering the truncated text reveals it via the browser's
|
|
65
|
-
default tooltip, scoped to just this element rather than the whole card), `actions` (`hidden`
|
|
66
|
-
whenever the slot has no assigned content), `body`.
|
|
67
|
-
|
|
68
|
-
**Themeable custom properties:** `--lr-result-card-compact-header-padding` (default
|
|
69
|
-
`var(--lr-space-xs)`) — `[part="header"]` block/inline padding while `compact`;
|
|
70
|
-
`--lr-result-card-compact-header-gap` (default `var(--lr-space-xs)`) — gap between
|
|
71
|
-
`[part="header"]`'s heading and actions while `compact`, one step tighter than the uncompacted
|
|
72
|
-
`--lr-space-s`; `--lr-result-card-compact-body-padding` (default `var(--lr-space-xs)`) —
|
|
73
|
-
`[part="body"]` padding while `compact`; `--lr-result-card-compact-body-gap` (default
|
|
74
|
-
`var(--lr-space-2xs)`) — gap between `[part="body"]`'s children while `compact`, one step tighter
|
|
75
|
-
than the uncompacted `--lr-space-xs`. The two gap knobs mean `compact` now tightens interior spacing,
|
|
76
|
-
not only the padding box — a compact card no longer keeps full-size gaps inside a shrunken frame.
|
|
77
|
-
`--lr-result-card-background` (default `var(--lr-color-surface)`), `--lr-result-card-border-color`
|
|
78
|
-
(default `var(--lr-color-border-subtle)`) and `--lr-result-card-radius` (default `var(--lr-radius)`) retune
|
|
79
|
-
the card chrome without a `::part(base)` override. The border-color hook also colors
|
|
80
|
-
`[part="header"]`'s divider, so a retuned card doesn't strand a mismatched interior rule;
|
|
81
|
-
`frame="plain"` still drops the outer chrome and that divider.
|
|
82
|
-
Plus shared tokens — `--lr-space-2xs`/`-xs`/`-s`, `--lr-color-border-subtle`,
|
|
83
|
-
`--lr-color-surface`/`-text`, `--lr-radius`.
|
|
84
|
-
|
|
85
|
-
### `lr-result-field`
|
|
86
|
-
|
|
87
|
-
A single label/value row — e.g. "Status: 200 OK" or "Duration: 340ms" — rendered as a dense
|
|
88
|
-
"label: value" line by default, matching the compact, small-card presentation this pair exists for.
|
|
89
|
-
|
|
90
|
-
**Properties:**
|
|
91
|
-
|
|
92
|
-
- `label: string = ''` — the field name, e.g. "Status". Leave unset to render a value with no label.
|
|
93
|
-
- `value: string = ''` — plain-text value, e.g. "200 OK". Ignored once the default slot carries real
|
|
94
|
-
content.
|
|
95
|
-
|
|
96
|
-
**Events:** none.
|
|
97
|
-
|
|
98
|
-
**Slots:** default — rich value content (e.g. a `lr-chip` status badge, or a plain text override),
|
|
99
|
-
taking precedence over `value` whenever it has any assigned content. "Real content" means any
|
|
100
|
-
assigned _element_ (even one with no text of its own, like an attribute-driven status badge) or any
|
|
101
|
-
non-whitespace text node — both a rich slotted badge and a plain-text override are caught.
|
|
102
|
-
|
|
103
|
-
**CSS parts:** `base` (row container), `label` (including its trailing colon), `value` (wrapper
|
|
104
|
-
around either the slotted content or the plain `value` text).
|
|
105
|
-
|
|
106
|
-
**Themeable custom properties:** shared tokens only — `--lr-space-xs`, `--lr-color-text`/
|
|
107
|
-
`-text-quiet`, `--lr-font`.
|
|
108
|
-
|
|
109
|
-
**Optional peer deps:** none (either component).
|
|
110
|
-
|
|
111
|
-
```html
|
|
112
|
-
<lr-result-card heading="Weather">
|
|
113
|
-
<lr-result-field label="Status" value="200 OK"></lr-result-field>
|
|
114
|
-
<lr-result-field label="Duration" value="340ms"></lr-result-field>
|
|
115
|
-
<lr-result-field label="Provider">
|
|
116
|
-
<lr-chip variant="success">OpenWeather</lr-chip>
|
|
117
|
-
</lr-result-field>
|
|
118
|
-
</lr-result-card>
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
**Known gotchas:**
|
|
122
|
-
|
|
123
|
-
- `HTMLElement.textContent` read on a shadow-DOM wrapper containing a `<slot>` does NOT include the
|
|
124
|
-
slot's assigned/projected light-DOM content — only literal fallback children of the `<slot>` tag
|
|
125
|
-
itself (there are none here). Reading `[part="value"]`'s own `.textContent` yields an empty value
|
|
126
|
-
even when slotted content is rendering correctly; use the slot's
|
|
127
|
-
`assignedNodes()`/`assignedElements()` instead.
|
|
128
|
-
|
|
129
|
-
---
|
|
@@ -103,7 +103,9 @@ region. Initial empty content, loading intermediates, and reconnects are not rep
|
|
|
103
103
|
- `lr-select` (`detail: RetrievalResultsSelectDetail` = `{ chunkIds: string[]; chunks: RetrievalChunk[] }`)
|
|
104
104
|
— the _complete_ updated selection, both as ids and as exactly one canonical record per id, so a
|
|
105
105
|
host needn't re-look-up ids against its own copy on every toggle. This derived detail is always
|
|
106
|
-
canonicalized nonblank/first-wins regardless of the legacy `dedupe` switch.
|
|
106
|
+
canonicalized nonblank/first-wins regardless of the legacy `dedupe` switch. It is the only
|
|
107
|
+
host-level report of a row toggle: the row checkbox's `lr-checkbox-toggle-request`, native
|
|
108
|
+
`input`/`change`, and `lr-input`/`lr-change` stay inside the component.
|
|
107
109
|
- `lr-load-more` (`detail: null`) — from the virtual list's scroll-near-bottom detection while
|
|
108
110
|
virtualized, or the `[part="load-more"]` button otherwise. Only fires while `hasMore` is true and
|
|
109
111
|
`loading` is false.
|
|
@@ -79,8 +79,9 @@ errors and own/fieldset validation barring), `lr-submit` (`detail: { value, item
|
|
|
79
79
|
(`detail: { itemId }`, `skippable` only). `lr-invalid` (no detail) is the one bubbling/composed,
|
|
80
80
|
cancelable alias emitted when the complete rubric fails a native validity check; preventing it also
|
|
81
81
|
suppresses the native event's default validation UI.
|
|
82
|
-
Native and prefixed input/change events from the composed child controls are contained
|
|
83
|
-
|
|
82
|
+
Native and prefixed input/change events from the composed child controls are contained, as is a
|
|
83
|
+
multiple-category checkbox group's `lr-checkbox-group-toggle-request` proposal; consumers above the
|
|
84
|
+
rubric receive only the rubric-owned aggregate event shape.
|
|
84
85
|
|
|
85
86
|
**Methods:** `getForm()` returns the owning form. `setCustomValidity(message)` sets or clears a
|
|
86
87
|
form-level error no per-key rule can
|