@aceshooting/lyra-ui 9.1.0 → 10.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +843 -0
- package/README.md +7 -0
- package/custom-elements.json +1 -1
- package/dist/cli/migrate-wa.mjs +52 -0
- package/dist/cli/migration-contract.json +1 -1
- package/dist/components/agent-tools/activity-feed/activity-feed.class.js +2 -2
- package/dist/components/agent-tools/activity-feed/activity-feed.styles.js +0 -16
- package/dist/components/agent-tools/agent-eval-dashboard/agent-eval-dashboard.class.js +1 -1
- package/dist/components/agent-tools/agent-eval-dashboard/agent-eval-dashboard.styles.js +9 -7
- package/dist/components/agent-tools/agent-run/agent-run.class.js +2 -2
- package/dist/components/agent-tools/agent-run/agent-run.styles.js +0 -13
- package/dist/components/agent-tools/agent-trace/agent-trace.class.js +1 -1
- package/dist/components/agent-tools/agent-trace/agent-trace.styles.js +7 -4
- package/dist/components/agent-tools/approval-queue/approval-queue.styles.js +7 -5
- package/dist/components/agent-tools/artifact-panel/artifact-panel.styles.js +0 -3
- package/dist/components/agent-tools/browser-frame/browser-frame.class.js +1 -1
- package/dist/components/agent-tools/browser-frame/browser-frame.styles.js +3 -5
- package/dist/components/agent-tools/commit-card/commit-card.class.js +1 -1
- package/dist/components/agent-tools/commit-card/commit-card.styles.js +0 -10
- package/dist/components/agent-tools/compare-panel/compare-panel.styles.js +11 -6
- package/dist/components/agent-tools/confirm-bar/confirm-bar.class.js +2 -2
- package/dist/components/agent-tools/confirm-bar/confirm-bar.styles.js +0 -46
- package/dist/components/agent-tools/context-inspector/context-inspector.class.js +1 -1
- package/dist/components/agent-tools/eval-dataset/eval-dataset.styles.js +0 -7
- package/dist/components/agent-tools/eval-result/eval-result.class.js +1 -1
- package/dist/components/agent-tools/evaluation-run/evaluation-run.class.js +2 -2
- package/dist/components/agent-tools/policy-summary/policy-summary.class.js +1 -1
- package/dist/components/agent-tools/prompt-studio/prompt-studio.styles.js +0 -15
- package/dist/components/agent-tools/result-card/result-card.styles.js +0 -7
- package/dist/components/agent-tools/result-card/result-field.styles.js +0 -5
- package/dist/components/agent-tools/schema-viewer/schema-viewer.styles.js +2 -5
- package/dist/components/agent-tools/span-waterfall/span-waterfall.class.js +1 -1
- package/dist/components/agent-tools/span-waterfall/span-waterfall.styles.js +0 -15
- package/dist/components/agent-tools/stack-trace/stack-trace.styles.js +0 -20
- package/dist/components/agent-tools/subagent-panel/subagent-panel.class.js +2 -2
- package/dist/components/agent-tools/subagent-panel/subagent-panel.styles.js +1 -4
- package/dist/components/agent-tools/task-list/task-list.class.js +2 -2
- package/dist/components/agent-tools/task-list/task-list.styles.js +0 -15
- package/dist/components/agent-tools/terminal/terminal.class.d.ts +11 -6
- package/dist/components/agent-tools/terminal/terminal.class.js +4 -4
- package/dist/components/agent-tools/terminal/terminal.styles.js +0 -46
- package/dist/components/agent-tools/test-results/test-results.class.js +2 -2
- package/dist/components/agent-tools/test-results/test-results.styles.js +0 -5
- package/dist/components/agent-tools/thinking-panel/thinking-panel.class.js +1 -1
- package/dist/components/agent-tools/thinking-panel/thinking-panel.styles.js +0 -41
- package/dist/components/agent-tools/tool-approval-dialog/tool-approval-dialog.styles.js +0 -41
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.js +2 -2
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.styles.js +0 -30
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.js +6 -6
- package/dist/components/agent-tools/tool-param-form/tool-param-form.styles.js +0 -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 +0 -20
- package/dist/components/agent-tools/tool-result-view/tool-result-view.styles.js +0 -4
- package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.styles.js +0 -21
- package/dist/components/agent-tools/trace-tree/trace-tree.class.js +2 -2
- package/dist/components/agent-tools/trace-tree/trace-tree.styles.js +7 -31
- package/dist/components/charts/chart/bar-chart.class.js +1 -1
- package/dist/components/charts/chart/box-plot.styles.js +0 -20
- package/dist/components/charts/chart/bubble-chart.class.js +1 -1
- package/dist/components/charts/chart/chart-colors.d.ts +1 -1
- package/dist/components/charts/chart/chart-colors.js +1 -1
- package/dist/components/charts/chart/chart-core-loader.d.ts +1 -0
- package/dist/components/charts/chart/chart-core-loader.js +1 -1
- package/dist/components/charts/chart/chart-feature-loader.d.ts +35 -0
- package/dist/components/charts/chart/chart-feature-loader.js +1 -1
- package/dist/components/charts/chart/chart.class.d.ts +93 -0
- package/dist/components/charts/chart/chart.class.js +3 -3
- package/dist/components/charts/chart/chart.styles.js +0 -27
- package/dist/components/charts/chart/doughnut-chart.class.js +1 -1
- package/dist/components/charts/chart/histogram.class.js +1 -1
- package/dist/components/charts/chart/line-chart.class.js +1 -1
- package/dist/components/charts/chart/lite-chart.class.d.ts +20 -1
- package/dist/components/charts/chart/lite-chart.class.js +4 -4
- package/dist/components/charts/chart/lite-chart.styles.js +0 -27
- package/dist/components/charts/chart/pie-chart.class.js +1 -1
- package/dist/components/charts/chart/polar-area-chart.class.js +1 -1
- package/dist/components/charts/chart/radar-chart.class.js +1 -1
- package/dist/components/charts/chart/scatter-chart.class.js +1 -1
- package/dist/components/conversation/agent-workspace/agent-workspace.class.d.ts +20 -0
- package/dist/components/conversation/agent-workspace/agent-workspace.class.js +3 -1
- package/dist/components/conversation/agent-workspace/agent-workspace.styles.js +3 -0
- package/dist/components/conversation/audio-visualizer/audio-visualizer.styles.js +0 -7
- package/dist/components/conversation/branch-picker/branch-picker.styles.js +0 -3
- package/dist/components/conversation/chat-composer/chat-composer.styles.js +0 -51
- package/dist/components/conversation/chat-message/chat-message.class.js +2 -2
- package/dist/components/conversation/chat-message/chat-message.styles.js +13 -35
- package/dist/components/conversation/chat-viewport/chat-viewport.class.js +1 -1
- package/dist/components/conversation/chat-viewport/chat-viewport.styles.js +0 -33
- package/dist/components/conversation/checkpoint/checkpoint.class.js +1 -1
- package/dist/components/conversation/checkpoint/checkpoint.styles.js +0 -3
- package/dist/components/conversation/code-block/code-block-shared.d.ts +5 -2
- package/dist/components/conversation/code-block/code-block.class.js +1 -1
- package/dist/components/conversation/code-block/code-block.styles.js +4 -95
- package/dist/components/conversation/code-block/code-loader.d.ts +11 -0
- package/dist/components/conversation/code-block/code-loader.js +1 -1
- package/dist/components/conversation/code-block/shiki-types.d.ts +12 -0
- package/dist/components/conversation/code-block/shiki-types.js +1 -1
- package/dist/components/conversation/conversation-item/conversation-item.styles.js +8 -54
- package/dist/components/conversation/generation-metrics/generation-metrics.class.js +2 -2
- package/dist/components/conversation/generation-metrics/generation-metrics.styles.js +0 -17
- package/dist/components/conversation/markdown/markdown-base.class.js +1 -1
- package/dist/components/conversation/markdown/markdown.styles.js +0 -41
- package/dist/components/conversation/message-actions/message-actions.styles.js +0 -3
- package/dist/components/conversation/message-feedback/message-feedback.styles.js +0 -35
- package/dist/components/conversation/message-parts/message-parts.class.d.ts +1 -1
- package/dist/components/conversation/message-parts/message-parts.styles.js +0 -5
- package/dist/components/conversation/model-select/model-select.class.js +3 -3
- package/dist/components/conversation/model-select/model-select.styles.js +12 -47
- package/dist/components/conversation/model-settings-panel/model-settings-panel.styles.js +0 -6
- package/dist/components/conversation/prompt-input/prompt-input.class.d.ts +3 -0
- package/dist/components/conversation/prompt-input/prompt-input.styles.js +0 -10
- package/dist/components/conversation/push-to-talk/push-to-talk.styles.js +0 -8
- package/dist/components/conversation/realtime-session/realtime-session.styles.js +1 -1
- package/dist/components/conversation/selection-toolbar/selection-toolbar.styles.js +1 -11
- package/dist/components/conversation/stream-status/stream-status.styles.js +0 -16
- package/dist/components/conversation/streaming-text/streaming-text.styles.js +0 -15
- package/dist/components/conversation/suggestion-chips/suggestion-chips.styles.js +0 -5
- package/dist/components/conversation/thread-list/thread-list.styles.js +5 -19
- package/dist/components/conversation/transcript-feed/transcript-feed.class.d.ts +16 -4
- package/dist/components/conversation/transcript-feed/transcript-feed.class.js +1 -1
- package/dist/components/conversation/transcript-feed/transcript-feed.styles.js +0 -1
- package/dist/components/conversation/typing-indicator/typing-indicator.styles.js +0 -23
- package/dist/components/conversation/usage-badge/usage-badge.class.js +1 -1
- package/dist/components/conversation/usage-badge/usage-badge.styles.js +0 -3
- package/dist/components/conversation/voice-picker/voice-picker.class.js +3 -3
- package/dist/components/conversation/voice-picker/voice-picker.styles.js +9 -29
- package/dist/components/conversation/widget-renderer/resolve.d.ts +2 -0
- package/dist/components/conversation/widget-renderer/resolve.js +1 -1
- package/dist/components/data/calendar/calendar.class.d.ts +15 -2
- package/dist/components/data/calendar/calendar.class.js +2 -2
- package/dist/components/data/calendar/calendar.styles.js +2 -28
- package/dist/components/data/condition-builder/condition-builder.class.d.ts +10 -6
- package/dist/components/data/condition-builder/condition-builder.class.js +2 -2
- package/dist/components/data/condition-builder/condition-builder.styles.js +0 -6
- package/dist/components/data/context-meter/context-meter.styles.js +0 -24
- package/dist/components/data/data-grid/data-grid.class.js +3 -3
- package/dist/components/data/data-grid/data-grid.styles.js +0 -22
- package/dist/components/data/document-library/document-library.class.js +2 -2
- package/dist/components/data/document-library/document-library.styles.js +0 -4
- package/dist/components/data/env-list/env-list.class.js +1 -1
- package/dist/components/data/env-list/env-list.styles.js +7 -4
- package/dist/components/data/file-tree/file-tree.class.d.ts +12 -0
- package/dist/components/data/file-tree/file-tree.class.js +1 -1
- package/dist/components/data/flow-canvas/flow-canvas.styles.js +12 -19
- package/dist/components/data/flow-controls/flow-controls.class.js +2 -2
- package/dist/components/data/flow-controls/flow-controls.styles.js +3 -36
- package/dist/components/data/flow-minimap/flow-minimap.class.js +1 -1
- package/dist/components/data/flow-minimap/flow-minimap.styles.js +0 -9
- package/dist/components/data/flow-node/flow-node.styles.js +0 -23
- package/dist/components/data/flow-run-status/flow-run-status.class.js +1 -1
- package/dist/components/data/flow-run-status/flow-run-status.styles.js +0 -7
- package/dist/components/data/graph-query-builder/graph-query-builder.class.d.ts +0 -7
- package/dist/components/data/graph-query-builder/graph-query-builder.class.js +1 -1
- package/dist/components/data/graph-query-builder/graph-query-builder.styles.js +0 -10
- package/dist/components/data/heatmap/heatmap-scale.d.ts +20 -0
- package/dist/components/data/heatmap/heatmap-scale.js +1 -1
- package/dist/components/data/heatmap/heatmap.class.d.ts +85 -2
- package/dist/components/data/heatmap/heatmap.class.js +2 -2
- package/dist/components/data/heatmap/heatmap.styles.js +0 -54
- package/dist/components/data/pagination/pagination.class.js +1 -1
- package/dist/components/data/pagination/pagination.styles.js +23 -46
- package/dist/components/data/sequence-strip/sequence-strip.class.d.ts +34 -1
- package/dist/components/data/sequence-strip/sequence-strip.class.js +5 -2
- package/dist/components/data/sequence-strip/sequence-strip.styles.js +14 -20
- package/dist/components/data/sparkline/sparkline.class.js +1 -1
- package/dist/components/data/stat/stat.styles.js +0 -67
- package/dist/components/data/table/table.class.d.ts +42 -3
- package/dist/components/data/table/table.class.js +4 -4
- package/dist/components/data/table/table.styles.js +20 -91
- package/dist/components/data/timeline/timeline-item.styles.js +0 -30
- package/dist/components/data/timeline/timeline.class.d.ts +89 -1
- package/dist/components/data/timeline/timeline.class.js +2 -2
- package/dist/components/data/timeline/timeline.styles.js +111 -31
- package/dist/components/data/tree/tree-item.styles.js +1 -28
- package/dist/components/data/tree/tree.class.js +2 -2
- package/dist/components/data/tree/tree.styles.js +0 -6
- package/dist/components/data/word-cloud/word-cloud.styles.js +0 -5
- package/dist/components/forms/button/button.class.js +1 -1
- package/dist/components/forms/button/button.styles.js +1 -106
- package/dist/components/forms/checkbox/checkbox.class.d.ts +3 -0
- package/dist/components/forms/checkbox/checkbox.class.js +1 -1
- package/dist/components/forms/checkbox/checkbox.styles.js +0 -39
- package/dist/components/forms/checkbox-group/checkbox-group.class.d.ts +21 -2
- package/dist/components/forms/checkbox-group/checkbox-group.class.js +1 -1
- package/dist/components/forms/checkbox-group/checkbox-group.styles.js +0 -18
- package/dist/components/forms/code-editor/code-editor.styles.js +0 -30
- package/dist/components/forms/color-picker/color-picker.class.js +2 -2
- package/dist/components/forms/color-picker/color-picker.styles.js +0 -69
- package/dist/components/forms/combobox/combobox.class.js +2 -2
- package/dist/components/forms/combobox/combobox.styles.js +22 -111
- package/dist/components/forms/combobox/option.styles.js +7 -1
- package/dist/components/forms/date-picker/date-input.class.js +1 -1
- package/dist/components/forms/date-picker/date-input.styles.js +12 -67
- package/dist/components/forms/date-picker/date-picker.class.d.ts +1 -0
- package/dist/components/forms/date-picker/date-picker.class.js +22 -20
- package/dist/components/forms/date-picker/date-picker.styles.js +36 -29
- package/dist/components/forms/emoji-picker/emoji-data-loader.d.ts +6 -3
- package/dist/components/forms/emoji-picker/emoji-data-loader.js +1 -1
- package/dist/components/forms/emoji-picker/emoji-picker.class.d.ts +8 -1
- package/dist/components/forms/emoji-picker/emoji-picker.class.js +1 -1
- package/dist/components/forms/emoji-picker/emoji-picker.styles.js +3 -41
- package/dist/components/forms/icon-button/icon-button.class.js +1 -1
- package/dist/components/forms/icon-button/icon-button.styles.js +0 -16
- package/dist/components/forms/input/input.styles.js +0 -54
- package/dist/components/forms/input/number-input.styles.d.ts +4 -5
- package/dist/components/forms/input/number-input.styles.js +0 -11
- package/dist/components/forms/input/time-input-shared.d.ts +11 -0
- package/dist/components/forms/input/time-input-shared.js +1 -1
- package/dist/components/forms/input/time-input.class.d.ts +11 -2
- package/dist/components/forms/input/time-input.class.js +1 -1
- package/dist/components/forms/input/time-input.styles.js +0 -6
- package/dist/components/forms/locale-picker/locale-picker.class.js +2 -2
- package/dist/components/forms/locale-picker/locale-picker.styles.js +1 -26
- package/dist/components/forms/otp-input/otp-input.class.js +3 -3
- package/dist/components/forms/otp-input/otp-input.styles.js +0 -16
- package/dist/components/forms/phone-input/phone-input.class.d.ts +9 -1
- package/dist/components/forms/phone-input/phone-input.class.js +2 -2
- package/dist/components/forms/phone-input/phone-input.styles.js +0 -37
- package/dist/components/forms/radio/radio-button.styles.js +1 -30
- package/dist/components/forms/radio/radio-group.styles.js +0 -4
- package/dist/components/forms/radio/radio.styles.js +0 -44
- package/dist/components/forms/rubric-form/rubric-form.styles.js +0 -5
- package/dist/components/forms/select/select.class.js +1 -1
- package/dist/components/forms/select/select.styles.js +14 -114
- package/dist/components/forms/slider/slider.styles.js +0 -55
- package/dist/components/forms/swatch-picker/swatch-picker.class.d.ts +0 -11
- package/dist/components/forms/swatch-picker/swatch-picker.class.js +2 -2
- package/dist/components/forms/swatch-picker/swatch-picker.styles.js +0 -77
- package/dist/components/forms/switch/switch.class.d.ts +3 -0
- package/dist/components/forms/switch/switch.class.js +1 -1
- package/dist/components/forms/switch/switch.styles.js +3 -38
- package/dist/components/forms/textarea/textarea.styles.js +0 -28
- package/dist/components/forms/time-range/time-range.styles.js +12 -84
- package/dist/components/forms/token-input/token-input.class.d.ts +23 -9
- package/dist/components/forms/token-input/token-input.class.js +1 -1
- package/dist/components/forms/token-input/token-input.styles.js +1 -54
- package/dist/components/layout/app-rail/app-rail-item.class.js +2 -2
- package/dist/components/layout/app-rail/app-rail-item.styles.js +0 -13
- package/dist/components/layout/app-rail/app-rail.class.d.ts +5 -0
- package/dist/components/layout/app-rail/app-rail.class.js +1 -1
- package/dist/components/layout/app-rail/app-rail.styles.js +0 -46
- package/dist/components/layout/button-group/button-group.styles.js +0 -6
- package/dist/components/layout/card/card.class.d.ts +12 -0
- package/dist/components/layout/card/card.styles.js +5 -13
- package/dist/components/layout/carousel/carousel.styles.js +0 -1
- package/dist/components/layout/command-palette/command-palette.class.d.ts +8 -0
- package/dist/components/layout/command-palette/command-palette.class.js +3 -1
- package/dist/components/layout/command-palette/command-palette.styles.js +1 -13
- package/dist/components/layout/control-group/control-group.styles.js +0 -7
- package/dist/components/layout/dashboard-grid/dashboard-grid.class.js +1 -1
- package/dist/components/layout/dashboard-grid/dashboard-grid.styles.js +6 -25
- package/dist/components/layout/details/accordion.class.d.ts +13 -0
- package/dist/components/layout/details/accordion.class.js +1 -1
- package/dist/components/layout/details/details.class.js +1 -1
- package/dist/components/layout/details/details.styles.js +0 -12
- package/dist/components/layout/dock-panel/dock-panel.styles.js +0 -45
- package/dist/components/layout/drilldown-panel/drilldown-panel.class.d.ts +2 -0
- package/dist/components/layout/drilldown-panel/drilldown-panel.class.js +2 -2
- package/dist/components/layout/drilldown-panel/drilldown-panel.styles.js +0 -4
- package/dist/components/layout/filter-bar/filter-bar.class.js +1 -1
- package/dist/components/layout/filter-bar/filter-bar.styles.js +0 -9
- package/dist/components/layout/menu/menu-item.class.d.ts +5 -0
- package/dist/components/layout/menu/menu-item.class.js +1 -1
- package/dist/components/layout/menu/menu-item.styles.js +0 -49
- package/dist/components/layout/menu/menu-label.styles.js +0 -2
- package/dist/components/layout/menu/menu.styles.js +0 -18
- package/dist/components/layout/multi-split/multi-split.class.js +1 -1
- package/dist/components/layout/multi-split/multi-split.styles.js +8 -51
- package/dist/components/layout/page/page.class.d.ts +4 -0
- package/dist/components/layout/page/page.class.js +1 -1
- package/dist/components/layout/reorder-list/reorder-item.styles.js +0 -4
- package/dist/components/layout/responsive-panel/responsive-panel.styles.js +0 -27
- package/dist/components/layout/scroller/scroller.styles.js +0 -20
- package/dist/components/layout/segmented/segmented.class.d.ts +7 -1
- package/dist/components/layout/segmented/segmented.class.js +1 -1
- package/dist/components/layout/segmented/segmented.styles.js +69 -37
- package/dist/components/layout/split-panel/split-panel.styles.js +1 -7
- package/dist/components/layout/stepper/stepper.class.d.ts +8 -1
- package/dist/components/layout/stepper/stepper.class.js +1 -1
- package/dist/components/layout/stepper/stepper.styles.js +140 -41
- package/dist/components/layout/tab-group/tab-group.class.d.ts +4 -1
- package/dist/components/layout/tab-group/tab-group.styles.js +9 -75
- package/dist/components/layout/tab-group/tab.styles.js +0 -2
- package/dist/components/layout/virtual-list/virtual-list.class.d.ts +4 -4
- package/dist/components/layout/virtual-list/virtual-list.class.js +1 -1
- package/dist/components/layout/virtual-list/virtual-list.styles.js +0 -68
- package/dist/components/layout/widget/widget.class.d.ts +5 -1
- package/dist/components/layout/widget/widget.class.js +1 -1
- package/dist/components/layout/widget/widget.styles.js +97 -40
- package/dist/components/media/animated-image/animated-image.class.d.ts +3 -0
- package/dist/components/media/animated-image/animated-image.class.js +1 -1
- package/dist/components/media/animated-image/animated-image.styles.js +0 -28
- package/dist/components/media/attachment-chip/attachment-chip.class.d.ts +1 -1
- package/dist/components/media/attachment-chip/attachment-chip.class.js +2 -2
- package/dist/components/media/attachment-chip/attachment-chip.styles.js +0 -31
- package/dist/components/media/attachment-trigger/attachment-trigger.class.d.ts +1 -1
- package/dist/components/media/attachment-trigger/attachment-trigger.class.js +4 -4
- package/dist/components/media/attachment-trigger/attachment-trigger.styles.js +0 -40
- package/dist/components/media/av-player/av-player.class.d.ts +5 -6
- package/dist/components/media/av-player/av-player.class.js +1 -1
- package/dist/components/media/av-player/av-player.styles.js +0 -45
- package/dist/components/media/avatar/avatar.styles.js +3 -16
- package/dist/components/media/file-icon/file-icon.class.d.ts +1 -2
- package/dist/components/media/file-icon/file-icon.class.js +1 -1
- package/dist/components/media/file-input/file-input.class.d.ts +12 -0
- package/dist/components/media/file-input/file-input.class.js +1 -1
- package/dist/components/media/file-input/file-input.styles.js +3 -24
- package/dist/components/media/flag/flag.class.d.ts +20 -0
- package/dist/components/media/flag/flag.class.js +4 -2
- package/dist/components/media/flag/flag.styles.js +7 -1
- package/dist/components/media/flag/language-map.d.ts +10 -0
- package/dist/components/media/flag/language-map.js +1 -1
- package/dist/components/media/image-comparer/image-comparer.styles.js +4 -33
- package/dist/components/media/image-viewer/image-viewer.class.js +0 -2
- package/dist/components/media/image-viewer/image-viewer.styles.js +7 -27
- package/dist/components/media/lightbox/lightbox.class.js +0 -2
- package/dist/components/media/lightbox/lightbox.styles.js +2 -21
- package/dist/components/media/map/map-loader.d.ts +19 -1
- package/dist/components/media/map/map-loader.js +1 -1
- package/dist/components/media/map/map.class.d.ts +141 -1
- package/dist/components/media/map/map.class.js +15 -3
- package/dist/components/media/map/map.styles.js +20 -17
- package/dist/components/media/media-card/media-card.class.d.ts +14 -3
- package/dist/components/media/media-card/media-card.class.js +1 -1
- package/dist/components/media/media-card/media-card.styles.js +2 -28
- package/dist/components/media/pan-zoom/pan-zoom.styles.js +0 -3
- package/dist/components/media/qr-code/qr-code.class.d.ts +3 -2
- package/dist/components/media/qr-code/qr-code.class.js +2 -2
- package/dist/components/media/qr-code/qr-code.styles.js +0 -3
- package/dist/components/media/sequence-playback/sequence-playback.class.d.ts +2 -0
- package/dist/components/media/sequence-playback/sequence-playback.class.js +2 -1
- package/dist/components/media/sequence-playback/sequence-playback.styles.js +0 -19
- package/dist/components/media/video/video.class.d.ts +23 -2
- package/dist/components/media/video/video.class.js +3 -3
- package/dist/components/media/video/video.styles.js +4 -2
- package/dist/components/media/zoomable-frame/zoomable-frame.class.d.ts +3 -2
- package/dist/components/media/zoomable-frame/zoomable-frame.class.js +2 -2
- package/dist/components/media/zoomable-frame/zoomable-frame.styles.js +0 -5
- package/dist/components/overlays/alert/alert.styles.js +4 -2
- package/dist/components/overlays/badge/badge.styles.js +4 -48
- package/dist/components/overlays/badge/tag.styles.js +0 -14
- package/dist/components/overlays/callout/callout.styles.js +2 -13
- package/dist/components/overlays/chip/chip-group.styles.js +0 -18
- package/dist/components/overlays/chip/chip.styles.js +6 -69
- package/dist/components/overlays/dialog/confirm.d.ts +1 -4
- package/dist/components/overlays/dialog/confirm.js +1 -1
- package/dist/components/overlays/dialog/dialog.class.d.ts +12 -9
- package/dist/components/overlays/dialog/dialog.class.js +1 -1
- package/dist/components/overlays/dialog/dialog.styles.js +0 -43
- package/dist/components/overlays/drawer/drawer.class.d.ts +2 -2
- package/dist/components/overlays/drawer/drawer.styles.js +0 -9
- package/dist/components/overlays/empty/empty.styles.js +0 -12
- package/dist/components/overlays/kbd/kbd.class.js +1 -1
- package/dist/components/overlays/kbd/kbd.styles.js +0 -8
- package/dist/components/overlays/overlay/dropdown.class.d.ts +1 -6
- package/dist/components/overlays/overlay/dropdown.class.js +2 -2
- package/dist/components/overlays/overlay/overlay.styles.js +0 -28
- package/dist/components/overlays/overlay/popover.class.d.ts +9 -1
- package/dist/components/overlays/overlay/popover.class.js +2 -2
- package/dist/components/overlays/overlay/tooltip.class.d.ts +10 -0
- package/dist/components/overlays/overlay/tooltip.class.js +2 -2
- package/dist/components/overlays/popup/popup.class.d.ts +1 -0
- package/dist/components/overlays/popup/popup.class.js +2 -2
- package/dist/components/overlays/popup/popup.styles.js +0 -15
- package/dist/components/overlays/progress/progress-ring.class.d.ts +9 -1
- package/dist/components/overlays/progress/progress-ring.class.js +3 -3
- package/dist/components/overlays/progress/progress.styles.js +0 -21
- package/dist/components/overlays/rating/rating.styles.js +0 -25
- package/dist/components/overlays/skeleton/skeleton.styles.js +0 -4
- package/dist/components/overlays/spinner/spinner.styles.js +2 -5
- package/dist/components/overlays/toast/toast-item.styles.js +3 -45
- package/dist/components/retrieval/chunk-inspector/chunk-inspector.styles.js +0 -35
- package/dist/components/retrieval/citation-badge/citation-badge.class.d.ts +2 -2
- package/dist/components/retrieval/citation-badge/citation-badge.class.js +3 -3
- package/dist/components/retrieval/citation-badge/citation-badge.styles.js +0 -20
- package/dist/components/retrieval/claim-evidence/claim-evidence.class.js +1 -1
- package/dist/components/retrieval/claim-evidence/claim-evidence.styles.js +0 -8
- package/dist/components/retrieval/community-card/community-card.class.d.ts +1 -0
- package/dist/components/retrieval/community-card/community-card.styles.js +0 -6
- package/dist/components/retrieval/embedding-explorer/embedding-explorer.styles.js +8 -12
- package/dist/components/retrieval/entity-card/entity-card.class.d.ts +4 -3
- package/dist/components/retrieval/entity-card/entity-card.class.js +1 -1
- package/dist/components/retrieval/entity-card/entity-card.styles.js +0 -12
- package/dist/components/retrieval/entity-chip/entity-chip.class.d.ts +10 -4
- package/dist/components/retrieval/entity-chip/entity-chip.class.js +3 -3
- package/dist/components/retrieval/entity-chip/entity-chip.styles.js +6 -9
- package/dist/components/retrieval/entity-dossier/entity-dossier.class.d.ts +19 -5
- package/dist/components/retrieval/entity-dossier/entity-dossier.class.js +1 -1
- package/dist/components/retrieval/graph/graph.class.d.ts +5 -0
- package/dist/components/retrieval/graph/graph.class.js +1 -1
- package/dist/components/retrieval/graph/graph.styles.js +0 -30
- package/dist/components/retrieval/graph-legend/graph-legend.styles.js +0 -3
- package/dist/components/retrieval/grounding-summary/grounding-summary.class.js +2 -2
- package/dist/components/retrieval/ingestion-queue/ingestion-queue.styles.js +0 -25
- package/dist/components/retrieval/knowledge-base-admin/knowledge-base-admin.class.d.ts +2 -0
- package/dist/components/retrieval/knowledge-base-admin/knowledge-base-admin.styles.js +0 -7
- package/dist/components/retrieval/knowledge-graph-explorer/knowledge-graph-explorer.class.d.ts +20 -6
- package/dist/components/retrieval/knowledge-graph-explorer/knowledge-graph-explorer.class.js +2 -2
- package/dist/components/retrieval/knowledge-graph-explorer/knowledge-graph-explorer.styles.js +6 -11
- package/dist/components/retrieval/memory-panel/memory-panel.class.js +1 -1
- package/dist/components/retrieval/mind-map/mind-map.class.d.ts +5 -3
- package/dist/components/retrieval/mind-map/mind-map.class.js +1 -1
- package/dist/components/retrieval/mind-map/mind-map.styles.js +0 -2
- package/dist/components/retrieval/neighbor-list/neighbor-list.class.d.ts +3 -2
- package/dist/components/retrieval/neighbor-list/neighbor-list.class.js +1 -1
- package/dist/components/retrieval/neighbor-list/neighbor-list.styles.js +0 -30
- package/dist/components/retrieval/node-palette/node-palette.styles.js +0 -11
- package/dist/components/retrieval/path-strip/path-strip.styles.js +0 -10
- package/dist/components/retrieval/provenance-panel/provenance-panel.class.d.ts +12 -3
- package/dist/components/retrieval/provenance-panel/provenance-panel.class.js +1 -1
- package/dist/components/retrieval/provenance-panel/provenance-panel.styles.js +0 -2
- package/dist/components/retrieval/rag-eval-dashboard/rag-eval-dashboard.class.d.ts +3 -2
- package/dist/components/retrieval/rag-eval-dashboard/rag-eval-dashboard.class.js +2 -2
- package/dist/components/retrieval/retrieval-results/retrieval-results.styles.js +0 -28
- package/dist/components/retrieval/retrieval-search/retrieval-search.styles.js +0 -4
- package/dist/components/retrieval/retrieval-trace/retrieval-trace.class.js +1 -1
- package/dist/components/retrieval/retrieval-trace/retrieval-trace.styles.js +0 -2
- package/dist/components/retrieval/source-card/source-card.styles.js +0 -13
- package/dist/components/retrieval/source-list/source-list.styles.js +0 -7
- package/dist/components/retrieval/source-picker/source-picker.class.js +1 -1
- package/dist/components/retrieval/source-picker/source-picker.styles.js +0 -7
- package/dist/components/utility/copy-button/copy-button.styles.js +0 -10
- package/dist/components/utility/diff-view/diff-view.styles.js +0 -14
- package/dist/components/utility/export-button/export-button.styles.js +0 -22
- package/dist/components/utility/icon/icon.styles.js +0 -6
- package/dist/components/utility/json-viewer/json-viewer.styles.js +2 -48
- package/dist/components/utility/known-date/known-date.class.d.ts +7 -3
- package/dist/components/utility/known-date/known-date.styles.js +10 -51
- package/dist/components/utility/live-region/live-region.styles.js +0 -4
- package/dist/components/utility/mention-popover/mention-popover.styles.js +0 -25
- package/dist/components/utility/poll-status/poll-status.styles.js +0 -4
- package/dist/components/utility/random-content/random-content.class.d.ts +22 -0
- package/dist/components/utility/random-content/random-content.class.js +3 -2
- package/dist/components/utility/random-content/random-content.styles.js +6 -13
- package/dist/components/utility/tour/tour.class.d.ts +4 -2
- package/dist/components/utility/tour/tour.class.js +3 -3
- package/dist/components/utility/tour/tour.styles.js +0 -13
- package/dist/components/utility/visually-hidden/visually-hidden.styles.js +0 -5
- package/dist/components/viewers/archive-viewer/archive-viewer.class.js +1 -1
- package/dist/components/viewers/archive-viewer/archive-viewer.styles.d.ts +2 -2
- package/dist/components/viewers/archive-viewer/archive-viewer.styles.js +0 -10
- package/dist/components/viewers/contact-viewer/contact-viewer.class.js +1 -1
- package/dist/components/viewers/csv-viewer/csv-viewer.class.js +1 -1
- package/dist/components/viewers/csv-viewer/csv-viewer.styles.js +0 -19
- package/dist/components/viewers/dataset-viewer/dataset-viewer.class.js +1 -1
- package/dist/components/viewers/dataset-viewer/dataset-viewer.styles.js +0 -15
- package/dist/components/viewers/document-compare/document-compare.class.js +1 -1
- package/dist/components/viewers/document-compare/document-compare.styles.js +0 -3
- package/dist/components/viewers/document-preview/document-preview.styles.js +0 -25
- package/dist/components/viewers/document-viewer/document-viewer.class.d.ts +2 -1
- package/dist/components/viewers/document-viewer/document-viewer.class.js +1 -1
- package/dist/components/viewers/document-viewer/document-viewer.styles.js +0 -5
- package/dist/components/viewers/docx-viewer/docx-viewer.styles.js +0 -17
- package/dist/components/viewers/ebook-viewer/ebook-viewer.class.js +1 -1
- package/dist/components/viewers/ebook-viewer/ebook-viewer.styles.js +0 -4
- package/dist/components/viewers/email-viewer/email-viewer.styles.js +0 -7
- package/dist/components/viewers/geojson-view/geojson-view.styles.js +0 -5
- package/dist/components/viewers/highlight-layer/highlight-layer.styles.js +0 -3
- package/dist/components/viewers/notebook-viewer/notebook-viewer.class.js +1 -1
- package/dist/components/viewers/notebook-viewer/notebook-viewer.styles.js +0 -38
- package/dist/components/viewers/page-rail/page-rail.class.js +1 -1
- package/dist/components/viewers/page-rail/page-rail.styles.js +0 -13
- package/dist/components/viewers/pdf-viewer/pdf-loader.d.ts +13 -2
- package/dist/components/viewers/pdf-viewer/pdf-loader.js +1 -1
- package/dist/components/viewers/pdf-viewer/pdf-viewer.class.d.ts +32 -2
- package/dist/components/viewers/pdf-viewer/pdf-viewer.class.js +4 -4
- package/dist/components/viewers/pdf-viewer/pdf-viewer.styles.js +1 -27
- package/dist/components/viewers/pptx-viewer/pptx-viewer.styles.js +0 -3
- package/dist/components/viewers/spreadsheet-viewer/spreadsheet-viewer.class.js +1 -1
- package/dist/components/viewers/spreadsheet-viewer/spreadsheet-viewer.styles.js +0 -14
- package/dist/components/viewers/svg-viewer/svg-viewer.styles.js +0 -7
- package/dist/components/viewers/xml-viewer/xml-viewer.styles.js +2 -24
- package/dist/custom-elements-jsx.d.ts +56 -37
- package/dist/events.d.ts +43 -33
- package/dist/internal/agent-status-variants.d.ts +18 -0
- package/dist/internal/agent-status-variants.js +1 -0
- package/dist/internal/announcer.d.ts +8 -3
- package/dist/internal/announcer.js +1 -1
- package/dist/internal/autoloader-manifest.js +1 -1
- package/dist/internal/canvas-color.d.ts +16 -0
- package/dist/internal/canvas-color.js +1 -1
- package/dist/internal/catalog-picker.d.ts +0 -1
- package/dist/internal/catalog-picker.js +1 -1
- package/dist/internal/default-strings.generated.d.ts +1 -0
- package/dist/internal/default-strings.generated.js +1 -1
- package/dist/internal/dev-mode-attribute-warning.d.ts +30 -0
- package/dist/internal/dev-mode-attribute-warning.js +1 -0
- package/dist/internal/localization-runtime.js +1 -1
- package/dist/internal/localization-types.d.ts +1 -1
- package/dist/internal/localization.js +1 -1
- package/dist/internal/lyra-element.d.ts +13 -0
- package/dist/internal/lyra-element.js +1 -1
- package/dist/internal/media-controller.js +1 -1
- package/dist/internal/package-metadata.d.ts +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/internal/scroll-overflow.d.ts +35 -13
- package/dist/internal/scroll-overflow.js +1 -1
- package/dist/internal/sizes.styles.js +0 -2
- package/dist/internal/specialist-tokens.styles.js +6 -11
- package/dist/internal/text-highlights.d.ts +4 -1
- package/dist/internal/text-highlights.js +1 -1
- package/dist/internal/tokens/palette.styles.js +0 -15
- package/dist/internal/tokens.styles.js +19 -113
- package/dist/lyra.d.ts +8 -5
- package/dist/styles/reservations.css +82 -0
- package/dist/svelte.d.ts +56 -37
- 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 +56 -37
- package/llms/components/lr-accordion-item.md +12 -3
- package/llms/components/lr-accordion.md +11 -2
- package/llms/components/lr-agent-eval-dashboard.md +1 -1
- package/llms/components/lr-agent-trace.md +3 -1
- package/llms/components/lr-agent-workspace.md +20 -0
- package/llms/components/lr-artifact-panel.md +10 -4
- package/llms/components/lr-attachment-chip.md +7 -4
- package/llms/components/lr-attachment-trigger.md +9 -6
- package/llms/components/lr-av-player.md +3 -1
- package/llms/components/lr-avatar.md +6 -6
- package/llms/components/lr-bar-chart.md +4 -3
- package/llms/components/lr-box-plot.md +1 -1
- package/llms/components/lr-browser-frame.md +7 -3
- package/llms/components/lr-bubble-chart.md +4 -3
- package/llms/components/lr-calendar.md +9 -2
- package/llms/components/lr-card.md +24 -0
- package/llms/components/lr-chart.md +32 -8
- package/llms/components/lr-chat-viewport.md +7 -2
- package/llms/components/lr-checkbox-group.md +13 -5
- package/llms/components/lr-checkbox.md +5 -2
- package/llms/components/lr-checkpoint.md +6 -2
- package/llms/components/lr-combobox.md +5 -2
- package/llms/components/lr-command-palette.md +4 -1
- package/llms/components/lr-confirm-bar.md +7 -3
- package/llms/components/lr-context-meter.md +12 -11
- package/llms/components/lr-conversation-item.md +7 -4
- package/llms/components/lr-details.md +11 -2
- package/llms/components/lr-dialog.md +15 -10
- package/llms/components/lr-dock-panel.md +7 -10
- package/llms/components/lr-document-preview.md +6 -1
- package/llms/components/lr-document-viewer.md +3 -2
- package/llms/components/lr-doughnut-chart.md +4 -3
- package/llms/components/lr-drawer.md +3 -3
- package/llms/components/lr-entity-card.md +3 -3
- package/llms/components/lr-entity-chip.md +1 -1
- package/llms/components/lr-entity-dossier.md +4 -1
- package/llms/components/lr-file-input.md +2 -2
- package/llms/components/lr-flag.md +20 -5
- package/llms/components/lr-heatmap.md +29 -1
- package/llms/components/lr-histogram.md +3 -1
- package/llms/components/lr-icon.md +1 -1
- package/llms/components/lr-json-schema-viewer.md +2 -1
- package/llms/components/lr-knowledge-graph-explorer.md +8 -3
- package/llms/components/lr-known-date.md +4 -2
- package/llms/components/lr-line-chart.md +4 -3
- package/llms/components/lr-lite-chart.md +16 -6
- package/llms/components/lr-map.md +72 -8
- package/llms/components/lr-markdown-core.md +3 -2
- package/llms/components/lr-media-card.md +28 -12
- package/llms/components/lr-message-parts.md +2 -1
- package/llms/components/lr-model-select.md +9 -10
- package/llms/components/lr-model-settings-panel.md +9 -9
- package/llms/components/lr-neighbor-list.md +1 -1
- package/llms/components/lr-notebook-viewer.md +6 -3
- package/llms/components/lr-option.md +5 -2
- package/llms/components/lr-pdf-viewer.md +62 -2
- package/llms/components/lr-pie-chart.md +4 -3
- package/llms/components/lr-polar-area-chart.md +4 -3
- package/llms/components/lr-popover.md +5 -0
- package/llms/components/lr-progress-ring.md +8 -1
- package/llms/components/lr-prompt-studio.md +1 -1
- package/llms/components/lr-provenance-panel.md +4 -2
- package/llms/components/lr-qr-code.md +1 -1
- package/llms/components/lr-radar-chart.md +4 -3
- package/llms/components/lr-rag-eval-dashboard.md +2 -2
- package/llms/components/lr-random-content.md +13 -0
- package/llms/components/lr-reorder-item.md +6 -1
- package/llms/components/lr-reorder-list.md +6 -1
- package/llms/components/lr-responsive-panel.md +11 -7
- package/llms/components/lr-scatter-chart.md +4 -3
- package/llms/components/lr-sequence-strip.md +16 -2
- package/llms/components/lr-slider.md +12 -5
- package/llms/components/lr-sparkline.md +1 -1
- package/llms/components/lr-suggestion-chips.md +7 -2
- package/llms/components/lr-swatch-picker.md +5 -5
- package/llms/components/lr-switch.md +5 -2
- package/llms/components/lr-table.md +30 -4
- package/llms/components/lr-terminal.md +3 -1
- package/llms/components/lr-thread-list.md +8 -8
- package/llms/components/lr-time-input.md +6 -1
- package/llms/components/lr-timeline-item.md +24 -0
- package/llms/components/lr-timeline.md +25 -1
- package/llms/components/lr-token-input.md +7 -2
- package/llms/components/lr-tool-approval-dialog.md +7 -8
- package/llms/components/lr-tool-call-chip.md +5 -1
- package/llms/components/lr-tool-param-form.md +14 -12
- package/llms/components/lr-tool-result-dialog.md +11 -9
- package/llms/components/lr-tool-result-view.md +7 -6
- package/llms/components/lr-tool-select-dialog.md +18 -16
- package/llms/components/lr-trace-tree.md +3 -1
- package/llms/components/lr-usage-badge.md +4 -1
- package/llms/components/lr-video-playlist.md +1 -1
- package/llms/components/lr-virtual-list.md +22 -14
- package/llms/components/lr-voice-picker.md +8 -5
- package/llms/components/lr-widget-renderer.md +3 -3
- package/llms/components/lr-widget.md +1 -1
- package/llms/components/lr-word-cloud.md +6 -2
- package/llms/index.md +1 -1
- package/llms/peers.md +13 -3
- package/llms/shared.md +83 -2
- package/llms-full.txt +1159 -288
- package/package.json +19 -7
- package/vscode-css-data.json +37 -2
- package/vscode-html-data.json +402 -45
- package/web-types.json +300 -56
package/llms-full.txt
CHANGED
|
@@ -1145,6 +1145,70 @@ canvas consumer's redraw to its normal microtask/render schedule. The optional r
|
|
|
1145
1145
|
browser realm; it does not limit invalidation to a subtree. The function is a no-op during server
|
|
1146
1146
|
rendering and retains no document or stylesheet after the last canvas consumer disconnects.
|
|
1147
1147
|
|
|
1148
|
+
## Preventing layout shift from lazy-upgrading elements (CLS)
|
|
1149
|
+
|
|
1150
|
+
An undefined custom element is an inline box with no intrinsic size, so every `lr-*` in the initial
|
|
1151
|
+
viewport contributes a reflow as its definition loads. Components that additionally defer on an
|
|
1152
|
+
optional peer (`lr-chart`, `lr-map`, `lr-flag`, `lr-flow-canvas`, `lr-knowledge-graph-explorer`)
|
|
1153
|
+
render a skeleton while that peer resolves, which can cost a second shift when the real content
|
|
1154
|
+
replaces it. Each component is individually well-behaved; the aggregate on a first paint is what
|
|
1155
|
+
costs a Lighthouse Cumulative Layout Shift score.
|
|
1156
|
+
|
|
1157
|
+
Lyra ships an optional, opt-in stylesheet that reserves each component's intrinsic footprint before
|
|
1158
|
+
upgrade:
|
|
1159
|
+
|
|
1160
|
+
```css
|
|
1161
|
+
@import "@aceshooting/lyra-ui/reservations.css";
|
|
1162
|
+
```
|
|
1163
|
+
|
|
1164
|
+
It styles **only** `:not(:defined)` elements, inside an `@layer lr-reservations`, so it becomes inert
|
|
1165
|
+
the moment a definition upgrades and can never fight a component's own layout. It sets no colors and
|
|
1166
|
+
no `:root` rules.
|
|
1167
|
+
|
|
1168
|
+
**Every reservation is expressed with the same custom property and fallback token the component's
|
|
1169
|
+
own stylesheet uses** — `--lr-chart-height` / `--lr-size-280px` for the chart family,
|
|
1170
|
+
`--lr-flag-aspect-ratio` for `lr-flag`, `--lr-form-control-height` for the field controls, and so
|
|
1171
|
+
on. That is the point of shipping it rather than documenting measured pixel values: a hand-written
|
|
1172
|
+
reservation rots silently the moment a component's default changes, whereas these track it, and
|
|
1173
|
+
theming a component through its documented custom property re-themes its reservation with it.
|
|
1174
|
+
|
|
1175
|
+
Hand-rolling equivalent rules is still fine — the pattern is just:
|
|
1176
|
+
|
|
1177
|
+
```css
|
|
1178
|
+
lr-chart:not(:defined) {
|
|
1179
|
+
display: block;
|
|
1180
|
+
min-block-size: var(--lr-chart-height, var(--lr-size-280px));
|
|
1181
|
+
}
|
|
1182
|
+
```
|
|
1183
|
+
|
|
1184
|
+
Two things worth knowing:
|
|
1185
|
+
|
|
1186
|
+
- A per-instance override needs the matching custom property to be set as well, not only the
|
|
1187
|
+
attribute, or the pre-upgrade frame and the upgraded frame will disagree. `<lr-chart height="500px">`
|
|
1188
|
+
should carry `style="--lr-chart-height: 500px"` too if it sits above the fold.
|
|
1189
|
+
- The reservation covers the definition-upgrade shift. A component that then swaps a skeleton for
|
|
1190
|
+
peer-resolved content stays stable as long as the reserved box matches the final footprint, which
|
|
1191
|
+
is why the reservations target each component's *final* default size rather than its skeleton's.
|
|
1192
|
+
|
|
1193
|
+
## Scope: what this library does not provide
|
|
1194
|
+
|
|
1195
|
+
Lyra is a component library, not an application framework. The following are deliberately out of
|
|
1196
|
+
scope, so they are worth not searching the catalog for:
|
|
1197
|
+
|
|
1198
|
+
- **Client-side routing.** There is no router and no route-outlet component. URL ownership belongs to
|
|
1199
|
+
the application (or its router of choice), because a component library that took it over would
|
|
1200
|
+
conflict with every framework router a consumer might already run. The navigation components are
|
|
1201
|
+
designed to be *driven* by whatever router you use rather than to own the URL themselves:
|
|
1202
|
+
`lr-app-rail-item`, `lr-breadcrumb-item` and `lr-tab-group` all expose their active/selected state
|
|
1203
|
+
as ordinary reflected properties, so binding is a one-way write from your route state plus a click
|
|
1204
|
+
handler that calls your router. Wire it once in your shell component; there is no Lyra-specific
|
|
1205
|
+
pattern to learn.
|
|
1206
|
+
- **Data fetching, caching, and state management.** Components take data as properties and emit
|
|
1207
|
+
events; they never fetch on your behalf, except the documented viewers/`src`-taking components,
|
|
1208
|
+
which are explicit about it.
|
|
1209
|
+
- **Form submission and validation orchestration.** Form-associated controls integrate with the
|
|
1210
|
+
native `<form>`/`ElementInternals` contract; the submission lifecycle stays the application's.
|
|
1211
|
+
|
|
1148
1212
|
## Optional native styles and CSS utilities
|
|
1149
1213
|
|
|
1150
1214
|
Lyra ships two independent light-DOM stylesheets. Neither is imported by the root barrel, a family
|
|
@@ -1259,7 +1323,10 @@ setLyraLocale("fr"); // page-level selection; see the precedence order below
|
|
|
1259
1323
|
```
|
|
1260
1324
|
|
|
1261
1325
|
```html
|
|
1262
|
-
<lr-toast
|
|
1326
|
+
<lr-toast></lr-toast>
|
|
1327
|
+
<script type="module">
|
|
1328
|
+
document.querySelector("lr-toast").strings = { close: "Fermer" };
|
|
1329
|
+
</script>
|
|
1263
1330
|
```
|
|
1264
1331
|
|
|
1265
1332
|
**Which locale a component ends up using.** Four sources, first answer wins:
|
|
@@ -1651,7 +1718,7 @@ control) is a single tab stop using a roving `tabindex`; arrow keys move within
|
|
|
1651
1718
|
`Escape` dismisses the topmost dismissible overlay and returns focus to whatever opened it.
|
|
1652
1719
|
`ArrowLeft`/`ArrowRight` mean previous/next and swap under `dir="rtl"`.
|
|
1653
1720
|
|
|
1654
|
-
**What that contract is verified by, precisely.** Every one of the
|
|
1721
|
+
**What that contract is verified by, precisely.** Every one of the 284 public tags carries at least
|
|
1655
1722
|
one axe-core assertion in its own directory's tests, in a test that mounts its own tag; contrast
|
|
1656
1723
|
(4.5:1 text, 3:1 control borders, in both the light and dark palettes), a 40px minimum target size,
|
|
1657
1724
|
pressed-state coverage for every hoverable part, and `::part()` reachability are separate blocking
|
|
@@ -1672,6 +1739,19 @@ files matter when scaffolding a project's editor configuration. Build tools can
|
|
|
1672
1739
|
through the explicit `@aceshooting/lyra-ui/custom-elements.json` package export; native Node ESM
|
|
1673
1740
|
uses `with { type: 'json' }` on that import.
|
|
1674
1741
|
|
|
1742
|
+
**Inherited members in `custom-elements.json`.** A subclass declaration's `cssParts` array is
|
|
1743
|
+
always the complete flattened set, including everything inherited from a superclass — `::part()`
|
|
1744
|
+
has no type-level inheritance chain a consumer could otherwise walk. `attributes`, `members`,
|
|
1745
|
+
`events`, `slots`, and `cssProperties` are the opposite: a subclass declaration lists only its own
|
|
1746
|
+
entries plus any inherited entry it explicitly overrides, pruning an inherited-and-unmodified entry
|
|
1747
|
+
of those four kinds. This is intentional, not a gap — a TypeScript/JS consumer already gets the
|
|
1748
|
+
full set for free from the generated `.d.ts` `extends` chain, the same resolution `web-types.json`
|
|
1749
|
+
and `vscode-html-data.json` perform ahead of time. A consumer reading `custom-elements.json`
|
|
1750
|
+
directly and needing the complete `attributes`/`members`/`events`/`slots`/`cssProperties` set for
|
|
1751
|
+
those four kinds must walk the declaration's own `superclass.name`/`superclass.module` across
|
|
1752
|
+
`modules[].declarations[]` itself, or read `web-types.json`/`vscode-html-data.json` instead, which
|
|
1753
|
+
are already fully resolved.
|
|
1754
|
+
|
|
1675
1755
|
## Independence and migration
|
|
1676
1756
|
|
|
1677
1757
|
Lyra has no runtime, theme, or design-token dependency on Shoelace or Web Awesome. Documented `wa-*`
|
|
@@ -2844,6 +2924,7 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
2844
2924
|
|
|
2845
2925
|
- **`internal-canvas-color-contracts`** — Shared utility contracts.
|
|
2846
2926
|
`resolveCanvasColor(/* public names: scope, color, fallback */): unknown`
|
|
2927
|
+
`resolveCanvasColors(/* public names: scope, colors, fallback */): unknown`
|
|
2847
2928
|
|
|
2848
2929
|
- **`internal-localization-runtime-contracts`** — Shared utility contracts.
|
|
2849
2930
|
`getLyraLocaleDirection(/* public names: locale */): unknown`
|
|
@@ -3829,6 +3910,32 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
3829
3910
|
|
|
3830
3911
|
# Form controls & inputs (`components/forms/`)
|
|
3831
3912
|
|
|
3913
|
+
## Breaking changes in 10.0.0
|
|
3914
|
+
|
|
3915
|
+
`<lr-swatch-picker>` drops the three members it carried through 9.x as documented one-major
|
|
3916
|
+
back-compat aliases, each with a like-for-like replacement that has shipped since. The `options`
|
|
3917
|
+
property is now `items` — same frozen owned-snapshot contract, still `attribute: false`, so no
|
|
3918
|
+
markup changes. The `label` property/attribute is now `accessibleLabel` (attribute `aria-label`), or
|
|
3919
|
+
the host `aria-label` directly; this is the one worth grepping for, because an un-updated
|
|
3920
|
+
`<lr-swatch-picker label="Brand colours">` leaves the internal `role="radiogroup"` with no accessible
|
|
3921
|
+
name at all rather than failing loudly. And the exported `SwatchOption` type is now
|
|
3922
|
+
`SwatchPickerItem`. The item shape itself is unchanged, including its own per-item `label` field,
|
|
3923
|
+
which is a different member and stays.
|
|
3924
|
+
|
|
3925
|
+
Also corrected in 10.0.0 — not breaking, but visible. A specificity sweep found rules that were
|
|
3926
|
+
meant to win yet were losing to another rule in the same shadow stylesheet, so their declarations
|
|
3927
|
+
never applied at all. In this family: arrow-keying onto the already-selected option in
|
|
3928
|
+
`<lr-select>` or `<lr-combobox>` produces a visible keyboard highlight again — `[aria-selected="true"]`
|
|
3929
|
+
was written after the active-descendant rule at equal specificity and swallowed it, so the highlight
|
|
3930
|
+
was absent exactly on the row a user is most likely to arrow onto first. `appearance="filled"` has a
|
|
3931
|
+
focus indicator again on `<lr-combobox>` and `<lr-date-input>`, both of which previously had none:
|
|
3932
|
+
the appearance rule out-ranked `:focus-within`, and the only `outline` in the focus rule was
|
|
3933
|
+
`solid transparent`. Both now express appearance as private custom properties, so no `[part]` rule
|
|
3934
|
+
can out-rank another. `<lr-option>` and `<lr-time-range>`'s active preset regain their pointer
|
|
3935
|
+
feedback, and `<lr-token-input>` can now veto all three of its mutations (`lr-add` and
|
|
3936
|
+
`lr-token-edit` became cancelable alongside `lr-remove`, which already was — additive; see that
|
|
3937
|
+
section).
|
|
3938
|
+
|
|
3832
3939
|
## Setter-only `null` clearing in 8.0.0
|
|
3833
3940
|
|
|
3834
3941
|
Several mapped string IDLs accept `null` on assignment without widening their read type. This is a
|
|
@@ -4247,7 +4354,10 @@ box visibly (nothing is clipped or made unreachable), so leave it unset there.
|
|
|
4247
4354
|
plain-text contract even when a separate WA `label` override is present.
|
|
4248
4355
|
|
|
4249
4356
|
**Events:** `lr-option-change` — bubbles when the option's label or selectable data changes so
|
|
4250
|
-
its parent `lr-combobox` or `lr-select` can refresh its normalized option rows.
|
|
4357
|
+
its parent `lr-combobox` or `lr-select` can refresh its normalized option rows. It is a private
|
|
4358
|
+
child-to-parent refresh signal, not a picker event: the owning `lr-combobox`/`lr-select` consumes
|
|
4359
|
+
it and stops it, so it never reaches a listener on the picker host (whose own contract is
|
|
4360
|
+
`lr-change`/`lr-input`/`change`/`input`). Listen on the `<lr-option>` itself to observe it.
|
|
4251
4361
|
|
|
4252
4362
|
**Slots:** default (visible label), `start`/`end` (WA adornments), and `prefix`/`suffix` (Shoelace
|
|
4253
4363
|
aliases). `start` and `prefix` project into one leading wrapper; `end` and `suffix` project into one
|
|
@@ -4343,7 +4453,7 @@ synchronous and fires no `input`/`change`/`lr-change` event.
|
|
|
4343
4453
|
|
|
4344
4454
|
**Additional API surface:**
|
|
4345
4455
|
|
|
4346
|
-
- `part="tag-label"` — The
|
|
4456
|
+
- `part="tag-label"` — The selected-tag label. Kept on one line and truncated with an ellipsis at `--tag-max-size` (default `var(--lr-size-5rem)`), rather than wrapped. Note that `lr-select`'s tag of the same name defaults to `var(--lr-size-12rem)`, so the same `--tag-max-size` value yields a wider tag there.
|
|
4347
4457
|
|
|
4348
4458
|
---
|
|
4349
4459
|
|
|
@@ -6184,7 +6294,12 @@ than adding outer padding around the buttons.
|
|
|
6184
6294
|
- `value: string` (also accepts a `Date` or `null` when assigned) — strict `HH:mm`, optional
|
|
6185
6295
|
`:ss`/`.sss`; `Date` reads local clock fields without timezone conversion. Invalid strings and
|
|
6186
6296
|
`null` normalize to `''`. `valueAsNumber` is milliseconds since midnight (`NaN` while blank),
|
|
6187
|
-
and `valueAsDate` applies the clock fields to today's local date (`null` while blank).
|
|
6297
|
+
and `valueAsDate` applies the clock fields to today's local date (`null` while blank). Both are
|
|
6298
|
+
settable, like the native `<input type="time">` properties they mirror: assigning `valueAsNumber`
|
|
6299
|
+
sets `value` from the same scale, and out-of-range or non-finite figures clear the field rather
|
|
6300
|
+
than wrapping into a different time; assigning `valueAsDate` reads the same local clock fields
|
|
6301
|
+
back off the Date, so it round-trips with the getter, and `null`/an invalid Date clears. Both
|
|
6302
|
+
assignments are silent, again like the native properties.
|
|
6188
6303
|
- `defaultValue`, `name`, `form`, `disabled`, `required`, `customError`, `getForm()`,
|
|
6189
6304
|
`checkValidity()`, `reportValidity()`, `setCustomValidity()`, and `resetValidity()` use the shared form-control
|
|
6190
6305
|
contract. Reset restores the current declarative `value` default; `readonly` remains focusable
|
|
@@ -6848,9 +6963,10 @@ gemstone?: GemstoneKey }`; a valid CSS `color` is used as the
|
|
|
6848
6963
|
the selected glow/shine defaults.
|
|
6849
6964
|
- `accessibleLabel: string = ''` (attribute `aria-label`) — accessible name copied to the internal
|
|
6850
6965
|
`role="radiogroup"`; attribute presence wins, including an explicitly empty name.
|
|
6851
|
-
-
|
|
6852
|
-
|
|
6853
|
-
|
|
6966
|
+
- The 9.x compatibility aliases were removed in 10.0.0: `options` is `items`, the exported
|
|
6967
|
+
`SwatchOption` type is `SwatchPickerItem`, and the former invisible `label` IDL is
|
|
6968
|
+
`accessibleLabel`/`aria-label`. The canonical sibling radiogroup vocabulary is now the only
|
|
6969
|
+
spelling.
|
|
6854
6970
|
- `disabled: boolean = false` (reflected) — locks the whole picker. Every swatch renders as a real
|
|
6855
6971
|
`disabled` `<button>`, so it leaves the tab sequence and cannot be activated; arrow/Home/End
|
|
6856
6972
|
navigation and host `click()` become no-ops; and the swatches dim to `--lr-opacity-disabled` with
|
|
@@ -7034,7 +7150,10 @@ leaves the internal role's serialized attribute empty; browsers without the refl
|
|
|
7034
7150
|
API keep the string fallback. The relationship tracks host attribute changes and clears when
|
|
7035
7151
|
unset.
|
|
7036
7152
|
|
|
7037
|
-
**CSS parts:** `form-control` (outer checkbox/error/hint frame), `
|
|
7153
|
+
**CSS parts:** `form-control` (outer checkbox/error/hint frame), `row` (the row wrapping the
|
|
7154
|
+
checkbox owner and the label as siblings — the node to size or align when laying out a column of
|
|
7155
|
+
checkboxes, since `base`/`checkbox` below is only the control box and its inline size tracks the box
|
|
7156
|
+
rather than the row), `base` (compatibility name for the
|
|
7038
7157
|
semantic owner; use `checkbox`), `checkbox` (the interactive `role="checkbox"` owner; it is the
|
|
7039
7158
|
same node as `base`, while the rich default label is its sibling),
|
|
7040
7159
|
`box` / `control` (the small square showing the checkmark/indeterminate dash; while active it also
|
|
@@ -7199,7 +7318,10 @@ restores the current default before making the control pristine again.
|
|
|
7199
7318
|
- `help-text` — Shoelace alias for the same hint surface.
|
|
7200
7319
|
- `error` — custom error content.
|
|
7201
7320
|
|
|
7202
|
-
**CSS parts:** `form-control` (the outer wrapper around the switch, error and hint), `
|
|
7321
|
+
**CSS parts:** `form-control` (the outer wrapper around the switch, error and hint), `row` (the row
|
|
7322
|
+
wrapping the switch owner and the label as siblings — the node to size or align when laying out a
|
|
7323
|
+
column of switches, since `base`/`switch` below is only the track box and its inline size tracks the
|
|
7324
|
+
track rather than the row), `base` /
|
|
7203
7325
|
`switch` / `wrapper` (the semantic interactive `role="switch"` owner; the rich label is its
|
|
7204
7326
|
sibling), `track` / `control` (the
|
|
7205
7327
|
pill-shaped background), `thumb` (the circular knob), `label` (wrapper around the default slot),
|
|
@@ -7445,6 +7567,7 @@ Mapped aliases are also live: `--thumb-size`, `--thumb-width`, `--thumb-height`,
|
|
|
7445
7567
|
|
|
7446
7568
|
```html
|
|
7447
7569
|
<lr-slider
|
|
7570
|
+
id="temperature-slider"
|
|
7448
7571
|
name="temperature"
|
|
7449
7572
|
min="0"
|
|
7450
7573
|
max="2"
|
|
@@ -7453,14 +7576,11 @@ Mapped aliases are also live: `--thumb-size`, `--thumb-width`, `--thumb-height`,
|
|
|
7453
7576
|
hint="Higher values make replies more varied."
|
|
7454
7577
|
with-markers
|
|
7455
7578
|
with-tooltip
|
|
7456
|
-
.valueAsNumber=${0.7}
|
|
7457
|
-
.valueFormatter=${(value, handle) => `${value * 100}%`}
|
|
7458
|
-
@lr-input=${(e) => setDraftTemperature(e.detail.value)}
|
|
7459
|
-
@lr-change=${(e) => commitTemperature(e.detail.value)}
|
|
7460
7579
|
></lr-slider>
|
|
7461
7580
|
|
|
7462
7581
|
<!-- Two handles, vertical. A name submits two `price` entries. -->
|
|
7463
7582
|
<lr-slider
|
|
7583
|
+
id="price-slider"
|
|
7464
7584
|
range
|
|
7465
7585
|
name="price"
|
|
7466
7586
|
orientation="vertical"
|
|
@@ -7470,8 +7590,17 @@ Mapped aliases are also live: `--thumb-size`, `--thumb-width`, `--thumb-height`,
|
|
|
7470
7590
|
min-value="200"
|
|
7471
7591
|
max-value="800"
|
|
7472
7592
|
label="Price"
|
|
7473
|
-
@lr-change=${(e) => applyPriceFilter(e.detail.minValue, e.detail.maxValue)}
|
|
7474
7593
|
></lr-slider>
|
|
7594
|
+
<script type="module">
|
|
7595
|
+
const temperature = document.getElementById("temperature-slider");
|
|
7596
|
+
temperature.valueAsNumber = 0.7;
|
|
7597
|
+
temperature.valueFormatter = (value, handle) => `${value * 100}%`;
|
|
7598
|
+
temperature.addEventListener("lr-input", (e) => setDraftTemperature(e.detail.value));
|
|
7599
|
+
temperature.addEventListener("lr-change", (e) => commitTemperature(e.detail.value));
|
|
7600
|
+
|
|
7601
|
+
const price = document.getElementById("price-slider");
|
|
7602
|
+
price.addEventListener("lr-change", (e) => applyPriceFilter(e.detail.minValue, e.detail.maxValue));
|
|
7603
|
+
</script>
|
|
7475
7604
|
```
|
|
7476
7605
|
|
|
7477
7606
|
An unset `value` starts at numeric `0`, clamped into the configured domain and step grid. A reset
|
|
@@ -8028,15 +8157,23 @@ option layout and defaults to `--lr-checkbox-group-option-gap`.
|
|
|
8028
8157
|
`--lr-checkbox-group-invalid-border` (default `var(--lr-color-danger)`) independently retints the
|
|
8029
8158
|
invalid option-collection border without changing other danger-colored surfaces.
|
|
8030
8159
|
|
|
8031
|
-
**`value`
|
|
8032
|
-
single source of truth. An internal sync recomputes `value`
|
|
8033
|
-
child `checked`/`value`/`disabled` update, `slotchange`,
|
|
8034
|
-
`form.reset()`. Mutating an obtained array cannot mutate the
|
|
8160
|
+
**`value` reads as a frozen defensive snapshot of child state, and assigning it mirrors back onto
|
|
8161
|
+
the children.** The children remain the single source of truth. An internal sync recomputes `value`
|
|
8162
|
+
on every child toggle, programmatic child `checked`/`value`/`disabled` update, `slotchange`,
|
|
8163
|
+
`name`/`required` change, blur, and `form.reset()`. Mutating an obtained array cannot mutate the
|
|
8164
|
+
group — assign a new array instead.
|
|
8035
8165
|
Only a checkbox whose nearest `lr-checkbox-group` ancestor is this group contributes; a nested
|
|
8036
8166
|
group owns its own descendants and form entries. `connectedCallback()` runs that sync before the
|
|
8037
8167
|
first render.
|
|
8038
8168
|
|
|
8039
|
-
|
|
8169
|
+
Assigning checks every child whose `value` (defaulting to `'on'`) appears in the array and unchecks
|
|
8170
|
+
every other one; duplicate entries check that many same-valued children, and values naming no child
|
|
8171
|
+
are ignored. `null`/`undefined` clear the selection. It is controlled input, so it emits no
|
|
8172
|
+
`lr-change` — only user interaction does. An assignment made before the children exist (the shape of
|
|
8173
|
+
a `.value=${...}` binding on first render) is applied once they arrive.
|
|
8174
|
+
|
|
8175
|
+
- **To preselect**, either set `checked` on the children (`<lr-checkbox value="a" checked>`) or
|
|
8176
|
+
assign the group's `value`.
|
|
8040
8177
|
- **To read the selection**, use this property or the `lr-change` event detail.
|
|
8041
8178
|
- **Give every child a distinct `value`.** `<lr-checkbox>`'s `value` defaults to `'on'`, so a group
|
|
8042
8179
|
of undifferentiated children submits several identical `FormData` entries and the submitted data
|
|
@@ -8077,11 +8214,16 @@ each list mutation; native events have no detail and both aliases carry a frozen
|
|
|
8077
8214
|
Native `FocusEvent` `focus`/`blur` are relayed once from the draft and inline editor, preserving
|
|
8078
8215
|
`relatedTarget`. `lr-add`
|
|
8079
8216
|
(`detail: { value, values }`, where `value` is the final added token and `values` is the frozen,
|
|
8080
|
-
readonly, complete ordered and deduplicated set of tokens added by that commit
|
|
8217
|
+
readonly, complete ordered and deduplicated set of tokens added by that commit — cancelable as of
|
|
8218
|
+
10.0.0; `preventDefault()` keeps the tokens out of `value` and leaves the typed draft text in the
|
|
8219
|
+
input unchanged so the user can correct it, rather than clearing it),
|
|
8081
8220
|
`lr-remove`
|
|
8082
8221
|
(`detail: { value, index }` — cancelable; `preventDefault()` keeps the token in `value`
|
|
8083
8222
|
unchanged), and `lr-token-edit`
|
|
8084
|
-
(`detail: { value, previousValue, index }` — an existing token
|
|
8223
|
+
(`detail: { value, previousValue, index }` — an existing token is about to be edited in place —
|
|
8224
|
+
cancelable as of 10.0.0; `preventDefault()` keeps the token in `value` unchanged and leaves the
|
|
8225
|
+
inline editor open with the user's edited text intact, rather than closing and discarding it).
|
|
8226
|
+
All three mutators now share one veto contract; previously only `lr-remove` could be vetoed.
|
|
8085
8227
|
`lr-invalid` (no detail) is emitted once as a bubbling/composed alias when native validity fails.
|
|
8086
8228
|
**CSS parts:** `form-control`, `form-control-label`, `input-wrapper`, `token`, `token-label` (the
|
|
8087
8229
|
token's text, doubling as the roving-focus edit trigger — rendered only while `editable`),
|
|
@@ -9139,6 +9281,30 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
9139
9281
|
|
|
9140
9282
|
# Data display, dashboards & flow canvas (`components/data/`)
|
|
9141
9283
|
|
|
9284
|
+
## Breaking changes in 10.0.0
|
|
9285
|
+
|
|
9286
|
+
`<lr-calendar>`'s `firstDayOfWeek`/`first-day-of-week` drops the bare `0`–`6` integer form and stops
|
|
9287
|
+
defaulting to a hardcoded Monday. The type is now exactly `LyraCalendarFirstDayOfWeek`
|
|
9288
|
+
(`'auto'|'sun'|'mon'|'tue'|'wed'|'thu'|'fri'|'sat'`, default `'auto'`), so there is one way to
|
|
9289
|
+
express a week start instead of two that had to be sanitized and wrapped against each other, and
|
|
9290
|
+
`'auto'` resolves through the same `resolveFirstDayOfWeek()` contract `<lr-date-picker>`/
|
|
9291
|
+
`<lr-date-input>` already use. An unset `<lr-calendar>` and an unset `<lr-date-picker>` on the same
|
|
9292
|
+
page therefore agree at last — Sunday-first under `en-US`, Monday-first under `fr-FR` — where the
|
|
9293
|
+
calendar previously rendered Monday-first everywhere while already formatting its weekday *labels*
|
|
9294
|
+
from the locale. Replace `first-day-of-week="1"` with `first-day-of-week="mon"`: a leftover numeric
|
|
9295
|
+
value is not mapped or clamped, it is simply an unrecognized token and falls through to Sunday. If
|
|
9296
|
+
the locale-independent Monday start was deliberate, keep it by writing `"mon"` explicitly instead of
|
|
9297
|
+
relying on the default. There is no `wa-calendar`, so no upstream mirror is affected.
|
|
9298
|
+
|
|
9299
|
+
Also corrected in 10.0.0 — not breaking, but visible. A specificity sweep found rules that were
|
|
9300
|
+
meant to win yet were losing to another rule in the same shadow stylesheet, so their declarations
|
|
9301
|
+
never applied at all. In this family: `<lr-calendar>`'s today cell has a focus ring again (its
|
|
9302
|
+
`[data-today]` outline was swallowing it, leaving today's cell pixel-identical focused and at rest)
|
|
9303
|
+
and its adjacent-month cells take selection and pointer feedback again; `<lr-table>`'s header cell
|
|
9304
|
+
that is both sticky and sortable, `<lr-pagination>`'s page input, `<lr-sequence-strip>`'s selected
|
|
9305
|
+
cell and `<lr-flow-canvas>`'s selected edge regain hover/press/focus feedback; and
|
|
9306
|
+
`<lr-flow-controls>` honors a `hidden` slotted action button instead of painting it.
|
|
9307
|
+
|
|
9142
9308
|
## `lr-sparkline`
|
|
9143
9309
|
|
|
9144
9310
|
Zero-dependency inline SVG trend chart (mirrors `<wa-sparkline>`). Its default allocation is one
|
|
@@ -9807,7 +9973,13 @@ cell: (row) => unknown }` —
|
|
|
9807
9973
|
- `groupLabel?: (key: string | number, rows: readonly T[]) => unknown` (attribute: false) — custom group
|
|
9808
9974
|
header content; without it, the group key is rendered as text
|
|
9809
9975
|
- `expandedContent?: (row: T) => unknown` (attribute: false) — enables a leading expand toggle and
|
|
9810
|
-
renders a full-width detail row beneath expanded records
|
|
9976
|
+
renders a full-width detail row beneath expanded records. The returned content renders inside
|
|
9977
|
+
the component's shadow root, behind the `expanded-cell` part — page CSS cannot reach it, and
|
|
9978
|
+
`::part(expanded-cell)` only reaches the wrapping `<td>` itself, not the descendants this
|
|
9979
|
+
callback returns (the same `::part()` limitation a column's `cell(row)` anchors run into, see
|
|
9980
|
+
`--lr-table-cell-link-color` below). Style such content by returning already-styled elements —
|
|
9981
|
+
inline `style`, or elements that reference this table's own `--lr-*` design tokens, which
|
|
9982
|
+
inherit across the shadow boundary like any custom property
|
|
9811
9983
|
- `canExpand?: (row: T) => boolean` (attribute: false) — optional per-row gate for expansion
|
|
9812
9984
|
- `expandedRowKeys: ReadonlySet<string | number> = new Set()` (attribute: false) — consumer-controlled
|
|
9813
9985
|
expanded state bounded to 10,000 keys; malformed and whitespace-only string keys are omitted while valid
|
|
@@ -9859,7 +10031,11 @@ sort properties; server mode leaves them controlled. Other events are `lr-row-cl
|
|
|
9859
10031
|
(`detail: { row }`), `lr-load-more` (fired on the "load more" button),
|
|
9860
10032
|
`lr-priority-columns-visibility-change` (frozen readonly `detail: { visible }`), and `lr-row-expand-toggle`
|
|
9861
10033
|
(`detail: { row, rowKey }`; the table does not mutate `expandedRowKeys`), and
|
|
9862
|
-
`lr-selection-change` (frozen readonly `detail: { rowKeys }
|
|
10034
|
+
`lr-selection-change` (frozen readonly `detail: { rowKeys }`, not cancelable) when selection is
|
|
10035
|
+
enabled — fired both from a row activation and from a `selectionMode` flip to `'single'` that coerces
|
|
10036
|
+
an existing multi-row selection down to one key (skipped on the very first render, since an
|
|
10037
|
+
already-inconsistent initial `selectionMode`/`selectedRowKeys` pairing is a starting state, not a
|
|
10038
|
+
live transition), `lr-filter-change`
|
|
9863
10039
|
(frozen readonly `detail: { text }`), and `lr-page-change` (frozen readonly `detail: { page }`) from the
|
|
9864
10040
|
filter/pagination surfaces, and `lr-cell-edit` (`detail: { row, columnKey, value }`) for editable
|
|
9865
10041
|
columns, and `lr-column-resize` (`detail: { columnKey, width }`, `width` in CSS pixels) on every pointer or
|
|
@@ -9908,7 +10084,23 @@ no-rows states return the empty element as the shadow root's own root, with no `
|
|
|
9908
10084
|
wrapper around it — `::part(base)` does not apply in those two states, only in the filtered-to-zero
|
|
9909
10085
|
one — and that `empty` disappears entirely once the `empty` slot is filled.
|
|
9910
10086
|
|
|
9911
|
-
|
|
10087
|
+
- `scrollMode: 'self' | 'page' = 'self'` (attribute `scroll-mode`, reflected) — which element
|
|
10088
|
+
scrolls when the table overflows. `'self'` makes `[part="base"]` the scroll container, which is
|
|
10089
|
+
what pairs with `--lr-table-max-height` and makes the sticky header pin inside the table's own
|
|
10090
|
+
viewport. `'page'` hands scrolling back to the document. Needed because a scroll container clips
|
|
10091
|
+
**both** axes — CSS offers no way to scroll one and not the other — so an *uncapped* table that is
|
|
10092
|
+
still `overflow: auto` becomes a sticky containing block that never scrolls, and its header
|
|
10093
|
+
scrolls away with the page. With `'page'` the header's nearest scrollport is the page, so it pins
|
|
10094
|
+
there; the cost is that a table wider than its host overflows the page instead of scrolling
|
|
10095
|
+
inside itself. Named `scrollMode` rather than `scroll` because a `scroll` property would shadow
|
|
10096
|
+
`Element.prototype.scroll()`
|
|
10097
|
+
|
|
10098
|
+
**Themeable custom properties:** `--lr-table-cell-color` (default `inherit`),
|
|
10099
|
+
`--lr-table-cell-link-color` (default `var(--lr-color-brand)`) and
|
|
10100
|
+
`--lr-table-cell-link-hover-color` — an anchor returned from a column's `cell(row)` renders inside
|
|
10101
|
+
the component's shadow root, where page CSS cannot reach it and `::part()` cannot select past the
|
|
10102
|
+
first compound selector to reach it either, so without these it computes to the UA default link
|
|
10103
|
+
blue; set `revert` for the UA default. `--lr-table-max-height` (default `none`; controls the scrollable
|
|
9912
10104
|
body's `max-block-size`). `--lr-table-heat-tint-lo` (default `var(--lr-color-brand-quiet)`) and
|
|
9913
10105
|
`--lr-table-heat-tint-hi` (default `var(--lr-color-brand)`) — the `color-mix()` ramp endpoints
|
|
9914
10106
|
for heat-tint mode's per-cell background, consulted only on columns/rows that define `heatValue`;
|
|
@@ -10418,9 +10610,13 @@ number, color?: string, group?: string }` snapshots; malformed/hostile records a
|
|
|
10418
10610
|
marking shortened strings with an ellipsis and disclosing omitted input through `[part="limit"]`.
|
|
10419
10611
|
The returned sequence and records are frozen; reassign `words` after changes.
|
|
10420
10612
|
- `minFontSize: number = 12` (attribute `min-font-size`) — px, applied to the lowest-weight word;
|
|
10421
|
-
|
|
10613
|
+
a finite value is clamped to `[1, 512]` (so `0`/a negative value floors at `1px`, and an oversized
|
|
10614
|
+
value caps at `512px`); a non-finite value (`NaN`/`Infinity`) falls back to the default `12px`
|
|
10615
|
+
rather than to the `1px` floor
|
|
10422
10616
|
- `maxFontSize: number = 48` (attribute `max-font-size`) — px, applied to the highest-weight word;
|
|
10423
|
-
|
|
10617
|
+
clamped/defaulted the same way (a non-finite value falls back to `48px`, not to `1px`); a
|
|
10618
|
+
resulting reversed pair (`minFontSize` greater than `maxFontSize`) is swapped rather than
|
|
10619
|
+
inverting the weight-to-size mapping
|
|
10424
10620
|
- `scale: 'linear'|'sqrt' = 'linear'` — `sqrt` compresses the weight→font-size mapping so one heavy
|
|
10425
10621
|
word doesn't dwarf the rest, matching `lr-heatmap`'s `scale` property
|
|
10426
10622
|
- `wordRotation: 'none'|'mixed' = 'none'` (attribute `word-rotation`, reflected) — `mixed` lets
|
|
@@ -10567,6 +10763,17 @@ weekdayLabelText?: (jsWeekday:number)=>string|undefined; monthLabelText?:
|
|
|
10567
10763
|
measured `clientWidth` on every draw/resize instead of the fixed `cell-size`, so the grid actually
|
|
10568
10764
|
fills the available width; now applies to calendar mode as well as matrix mode — see gotchas for
|
|
10569
10765
|
the default, non-`fit-to-width` behavior)
|
|
10766
|
+
- `rowLabelWidth?: number | 'auto'` (attribute `row-label-width`, reflected) — width, in CSS px, of
|
|
10767
|
+
the **matrix** row-label gutter, or `'auto'` to measure the widest label and size the gutter to
|
|
10768
|
+
fit (never below the built-in `60`, never above 40% of the host width, so one long label cannot
|
|
10769
|
+
squeeze out the cells it describes). Unset keeps the built-in `60`, so no existing chart reflows.
|
|
10770
|
+
Independently of this, a label too wide for the resolved gutter is truncated with an ellipsis
|
|
10771
|
+
rather than clipped mid-glyph — clipping read as a rendering fault, truncation reads as "there is
|
|
10772
|
+
more here". `cellText` still carries the full label to the tooltip and the keyboard announcement.
|
|
10773
|
+
A malformed value is ignored rather than collapsing the gutter. Calendar mode is unaffected; it
|
|
10774
|
+
has its own fixed weekday gutter
|
|
10775
|
+
- `colLabelHeight?: number` (attribute `col-label-height`) — height, in CSS px, of the matrix
|
|
10776
|
+
column-label band. Unset keeps the built-in `20`
|
|
10570
10777
|
- `maxCellSize?: number` (attribute `max-cell-size`) — ceiling, in CSS px, on the cell size
|
|
10571
10778
|
`fitToWidth` derives from the host width, in **both** modes. Exists because `fitToWidth` divides
|
|
10572
10779
|
the _whole_ host width across the grid, so a 5-week calendar or a 3-column matrix in a wide pane
|
|
@@ -10584,6 +10791,23 @@ weekdayLabelText?: (jsWeekday:number)=>string|undefined; monthLabelText?:
|
|
|
10584
10791
|
color ramp via `sqrtStep()` instead of mapping linearly; in calendar mode, the default `'linear'`
|
|
10585
10792
|
still buckets by quartile (`quartileBucket()`, unchanged), while `'sqrt'` instead compresses via the
|
|
10586
10793
|
same `sqrtStep()` magnitude compression as matrix mode, so one heavy day doesn't wash out the rest
|
|
10794
|
+
- `domain?: [number, number]` (attribute: false) — pins the color ramp's input domain instead of
|
|
10795
|
+
deriving it from the data's own extremes, so two heatmaps of comparable data can share a scale
|
|
10796
|
+
rather than each normalizing to its own min/max. A reversed pair is normalized; a degenerate or
|
|
10797
|
+
non-finite one falls back to the derived range
|
|
10798
|
+
- `midpoint?: number` — anchors a diverging ramp's neutral color on this value rather than at the
|
|
10799
|
+
middle of the domain, scaling the two halves independently (`lo`→0, `midpoint`→0.5, `hi`→1). A
|
|
10800
|
+
midpoint outside the resolved domain degrades to plain normalization rather than distorting the
|
|
10801
|
+
ramp
|
|
10802
|
+
- **Signed data.** Setting either `domain` or `midpoint` opts the component into signed data, where
|
|
10803
|
+
only a **non-finite** value is no-data. With neither set (the default), a negative value is
|
|
10804
|
+
no-data — matching the long-documented `-1` sentinel, since a matrix of counts has no meaningful
|
|
10805
|
+
negative. Declaring a domain or midpoint is what disambiguates "a real negative" from "the
|
|
10806
|
+
sentinel", so signed datasets render their negative half instead of dropping it. In signed mode a
|
|
10807
|
+
structurally absent matrix cell reads as `NaN` so it stays no-data while a real `-1` beside it
|
|
10808
|
+
renders on the ramp; in default mode an absent cell still resolves to `-1`, keeping `valueAt()`
|
|
10809
|
+
and the `lr-cell-click` payload unchanged. `scale="sqrt"` rejects negatives in both modes — a
|
|
10810
|
+
square root of a negative has no meaning
|
|
10587
10811
|
- `bucketCount: number = 5` (attribute `bucket-count` — calendar mode only; non-finite values fall
|
|
10588
10812
|
back to 5, while finite values are floored and clamped to 2–256 before the color-ramp allocation)
|
|
10589
10813
|
- `annotations: readonly HeatmapAnnotation[] = []` (attribute: false) — `HeatmapAnnotation { row?: number;
|
|
@@ -10597,7 +10821,7 @@ row?: number; col?: number; date?: string }`, matched the same way as `annotatio
|
|
|
10597
10821
|
persistent ring (independent of keyboard focus) over the matching cell, appends a "Selected: ..."
|
|
10598
10822
|
description to the host's own `aria-label`, and adds localized selected wording to the keyboard
|
|
10599
10823
|
announcement when the focused cell is the selection. Purely a controlled property — mirrors
|
|
10600
|
-
`<lr-lite-chart>`'s `
|
|
10824
|
+
`<lr-lite-chart>`'s `selectedIndices`, this component never mutates it itself. Unset (the default,
|
|
10601
10825
|
`null`) reproduces today's exact output.
|
|
10602
10826
|
- `accessibleCells: boolean = false` (attribute `accessible-cells`) — renders `[part="cells"]` with
|
|
10603
10827
|
at most 400 `[part="cell"]` native buttons around the active cell. The semantic grid exposes the
|
|
@@ -10894,16 +11118,30 @@ readonly color, readonly label? }`; `color`
|
|
|
10894
11118
|
per-category only. The marker count is reported as its own clause rather than folded into any
|
|
10895
11119
|
category's count. Unset (the default) changes nothing: no extra legend row, no extra summary clause
|
|
10896
11120
|
|
|
11121
|
+
- `selectedIndex: number = -1` (attribute `selected-index`) — the currently selected item, or `-1`
|
|
11122
|
+
for none. **Controlled:** activating a cell emits `lr-item-activate` and does *not* move the
|
|
11123
|
+
selection itself, so the consumer stays the single source of truth and the strip cannot drift from
|
|
11124
|
+
a playback index it does not own (its natural companion is `lr-sequence-playback`). Mirrors the
|
|
11125
|
+
shape `lr-lite-chart`'s `selectedIndices` and `lr-heatmap`'s `selectedCell` already establish. An
|
|
11126
|
+
out-of-range or non-integer value selects nothing. The selected cell carries `aria-current="true"`
|
|
11127
|
+
and `data-selected`; the selection is drawn as a ring rather than a background change, because a
|
|
11128
|
+
cell's background is data (its category colour) and tinting it would misreport the category
|
|
11129
|
+
|
|
10897
11130
|
The single-member `orientation: 'horizontal'` property was **removed in 9.0.0**: nothing read it and
|
|
10898
11131
|
the stylesheet never mentioned it, so the reflected attribute styled nothing. Delete the attribute;
|
|
10899
11132
|
the strip has always laid out horizontally.
|
|
10900
11133
|
|
|
10901
|
-
**Events:**
|
|
11134
|
+
**Events:** `lr-item-activate` — `detail: { index: number; id: string; item: SequenceStripItem }`,
|
|
11135
|
+
fired when a cell is clicked or activated with Enter/Space on the roving-tabindex focus. Not
|
|
11136
|
+
cancelable: nothing in the component branches on `defaultPrevented`. Bubbles and composed, like every
|
|
11137
|
+
library event.
|
|
10902
11138
|
|
|
10903
11139
|
**Slots:** none.
|
|
10904
11140
|
|
|
10905
11141
|
**CSS parts:** `base` (the root strip, `role="list"`), `cell` (each item's `role="listitem"` cell,
|
|
10906
|
-
background-colored by its category
|
|
11142
|
+
background-colored by its category, carrying the roving `tabindex`, and activatable by click or
|
|
11143
|
+
Enter/Space — it has a pointer cursor plus paired hover/press treatments, and `[data-selected]` when
|
|
11144
|
+
it is `selectedIndex`), `marker` (the small bottom
|
|
10907
11145
|
marker on a cell whose item sets `marker: true`), `tooltip` (the detail tooltip showing the active
|
|
10908
11146
|
item's label, hidden until a cell is hovered or focused),
|
|
10909
11147
|
`legend` (the static category key rendered below the strip when `showLegend` is set — `aria-hidden`,
|
|
@@ -11838,17 +12076,18 @@ sizes a legend chip on both axes. Otherwise the component consumes shared tokens
|
|
|
11838
12076
|
**Optional peer deps:** none.
|
|
11839
12077
|
|
|
11840
12078
|
```html
|
|
11841
|
-
<lr-context-meter
|
|
11842
|
-
label="128K context window"
|
|
11843
|
-
total="128000"
|
|
11844
|
-
.segments=${[
|
|
11845
|
-
{ label: 'System prompt', value: 2200, tone: 'neutral' },
|
|
11846
|
-
{ label: 'Conversation history', value: 61000, tone: 'brand' },
|
|
11847
|
-
{ label: 'Retrieved context', value: 30800, tone: 'warning' },
|
|
11848
|
-
]}
|
|
11849
|
-
></lr-context-meter>
|
|
12079
|
+
<lr-context-meter label="128K context window" total="128000"></lr-context-meter>
|
|
11850
12080
|
|
|
11851
|
-
<lr-context-meter shape="ring" total="128000"
|
|
12081
|
+
<lr-context-meter shape="ring" total="128000"></lr-context-meter>
|
|
12082
|
+
<script type="module">
|
|
12083
|
+
const [meter, ringMeter] = document.querySelectorAll("lr-context-meter");
|
|
12084
|
+
meter.segments = [
|
|
12085
|
+
{ label: "System prompt", value: 2200, tone: "neutral" },
|
|
12086
|
+
{ label: "Conversation history", value: 61000, tone: "brand" },
|
|
12087
|
+
{ label: "Retrieved context", value: 30800, tone: "warning" },
|
|
12088
|
+
];
|
|
12089
|
+
ringMeter.segments = segments;
|
|
12090
|
+
</script>
|
|
11852
12091
|
```
|
|
11853
12092
|
|
|
11854
12093
|
An internal visually-hidden semantic node carries `role="meter"` plus `aria-valuenow`,
|
|
@@ -11905,8 +12144,15 @@ title, readonly color?, readonly data? }`; `date` is an ISO `YYYY-MM-DD` string
|
|
|
11905
12144
|
- `view: CalendarView = 'month'`, where `CalendarView = 'month' | 'agenda'` (reflected) — agenda
|
|
11906
12145
|
lists the effective visible month's events, date-sorted. Foreign tokens normalize and reflect to
|
|
11907
12146
|
`month`
|
|
11908
|
-
- `firstDayOfWeek:
|
|
11909
|
-
|
|
12147
|
+
- `firstDayOfWeek: LyraCalendarFirstDayOfWeek = 'auto'` (attribute `first-day-of-week`) — which
|
|
12148
|
+
weekday the grid starts on. **Breaking in 10.0.0:** the default was a hardcoded `1` (Monday)
|
|
12149
|
+
regardless of locale; it now derives from the effective locale through the same
|
|
12150
|
+
`resolveFirstDayOfWeek()` contract `<lr-date-picker>`/`<lr-date-input>` already use, so an unset
|
|
12151
|
+
`<lr-calendar>` renders Sunday-first under `en-US` and Monday-first under `fr-FR` instead of
|
|
12152
|
+
disagreeing with a date picker on the same page. **Also breaking in 10.0.0:** the bare `0`–`6`
|
|
12153
|
+
integer form is gone; the value is now one of the shared weekday-name tokens (`'auto'`, then
|
|
12154
|
+
`'sun'` through `'sat'`), which pins the week start independent of locale. Pass `'mon'` to keep
|
|
12155
|
+
the pre-10.0.0 rendering.
|
|
11910
12156
|
- `accessibleLabel: string = ''` (attribute `aria-label`) — names the host. The nested calendar
|
|
11911
12157
|
section retains the localized purpose name rather than duplicating an authored host name; when
|
|
11912
12158
|
set programmatically without a host attribute, this value names the section
|
|
@@ -11958,6 +12204,30 @@ opposite default from `lr-stepper`; `horizontal` makes `[part='base']` a horizon
|
|
|
11958
12204
|
(the `role="list"` element is in the shadow root and never inherits a host attribute). Read-only
|
|
11959
12205
|
`itemCount: number` is the live count of direct default-slot `<lr-timeline-item>` children;
|
|
11960
12206
|
unrelated slotted elements and text nodes are ignored.
|
|
12207
|
+
`scale: 'flow' | 'time' = 'flow'` (attribute `scale`, type `LyraTimelineScale`) chooses how items
|
|
12208
|
+
are distributed along the main axis. `'flow'` is the default even sequence, where `timestamp` is
|
|
12209
|
+
rendered as text but carries no positional meaning. `'time'` positions each item at its true
|
|
12210
|
+
proportion of the range, so a gap of weeks and a gap of decades stop looking identical. `'time'`
|
|
12211
|
+
needs a definite extent to distribute along — `--lr-timeline-time-extent` (default
|
|
12212
|
+
`var(--lr-size-20rem)`), applied as `block-size` when vertical and `inline-size` when horizontal —
|
|
12213
|
+
because items are absolutely positioned and a percentage against an auto-sized track resolves to
|
|
12214
|
+
zero. `collision: 'overlap' | 'stack' = 'overlap'` (attribute `collision`, type `LyraTimelineCollision`)
|
|
12215
|
+
chooses what `scale="time"` does with items landing on nearly the same position: `'overlap'` leaves
|
|
12216
|
+
them stacked on one another, `'stack'` steps each colliding item one lane along the **cross** axis
|
|
12217
|
+
(indent per lane: `--lr-timeline-collision-offset`, default `var(--lr-space-l)`), which is what a
|
|
12218
|
+
dense chronology needs — items within 1.5% of the axis of each other count as colliding, and an
|
|
12219
|
+
isolated item returns to lane 0 rather than inheriting a preceding run's depth. There is
|
|
12220
|
+
deliberately no `'cluster'` mode: collapsing coincident items into one expandable marker needs a
|
|
12221
|
+
selection model and click events this passive component does not have.
|
|
12222
|
+
`rangeStart` / `rangeEnd` (`Date | string | number`, attribute: false) pin the axis instead of
|
|
12223
|
+
deriving it from the earliest/latest item; a reversed or non-finite pair falls back to the derived
|
|
12224
|
+
range. An item with no parseable `timestamp` (including one supplied only through the `timestamp`
|
|
12225
|
+
slot, which carries no machine-readable instant) keeps document order and is spread evenly, so a
|
|
12226
|
+
partially-timestamped list degrades rather than stacking at the origin. Items sharing an instant
|
|
12227
|
+
overlap rather than being fanned into lanes: lane assignment, brushing, zooming and per-event
|
|
12228
|
+
selection belong to a denser component than this deliberately passive one. Positions are written to
|
|
12229
|
+
each child as a private `--_lr-timeline-item-offset` custom property and removed again on a switch
|
|
12230
|
+
back to `'flow'`, so the component still never alters its children's content or structure.
|
|
11961
12231
|
|
|
11962
12232
|
**`lr-timeline-item` properties:** `timestamp?: Date | string | number` (attribute: false — `Date`
|
|
11963
12233
|
isn't attribute-serializable; invalid input normalizes to unset and renders no timestamp UI),
|
|
@@ -12678,6 +12948,11 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
12678
12948
|
}`
|
|
12679
12949
|
|
|
12680
12950
|
- **`components-data-sequence-strip-sequence-strip-contracts`** — Supporting data types and helpers for this component family.
|
|
12951
|
+
`LyraSequenceStripActivateDetail {
|
|
12952
|
+
index: unknown;
|
|
12953
|
+
id: unknown;
|
|
12954
|
+
item: unknown;
|
|
12955
|
+
}`
|
|
12681
12956
|
`SequenceStripCategory {
|
|
12682
12957
|
id: unknown;
|
|
12683
12958
|
color: unknown;
|
|
@@ -12769,6 +13044,23 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
12769
13044
|
|
|
12770
13045
|
# Layout, navigation & structure (`components/layout/`)
|
|
12771
13046
|
|
|
13047
|
+
## Breaking changes in 10.0.0
|
|
13048
|
+
|
|
13049
|
+
**`lr-virtual-list`:** the `lr-visible-range-changed` event is removed — listen for
|
|
13050
|
+
`lr-visible-range-change` instead. The detail (`LyraVirtualListRange`), the firing conditions and the
|
|
13051
|
+
gesture are all unchanged; only the name moved. The old spelling was the library's only past-tense
|
|
13052
|
+
`-changed` event among 58 members of the `-change` family, so a convention-driven `lr-${x}-change`
|
|
13053
|
+
listener silently missed it on a component embedded in ten viewers. It is removed outright rather
|
|
13054
|
+
than kept as a dual-emitting alias, because the library has no released consumers and an alias is a
|
|
13055
|
+
permanent tax paid to protect users who do not exist. Rename the listener; nothing else changes.
|
|
13056
|
+
|
|
13057
|
+
Also corrected in 10.0.0 — not breaking, but visible. `<lr-dashboard-grid>`'s cell keeps a focus
|
|
13058
|
+
indicator while it is in a collision or drop state: the collision rule owns the outline channel by
|
|
13059
|
+
design, but the side effect was that the focus ring vanished entirely during exactly the drag or
|
|
13060
|
+
resize a keyboard user most needs it, so the ring is now re-expressed on a second channel. And
|
|
13061
|
+
`<lr-card>` honors a `hidden` slotted media child instead of painting it — the component's own
|
|
13062
|
+
`display` declaration is author-origin and was beating the UA stylesheet's `[hidden] { display: none }`.
|
|
13063
|
+
|
|
12772
13064
|
## Breaking changes in 9.0.0
|
|
12773
13065
|
|
|
12774
13066
|
**`lr-app-rail`:** `mode`'s write side is removed: the accessor is now strictly read-only (always resolves to
|
|
@@ -14168,11 +14460,16 @@ is pending.
|
|
|
14168
14460
|
between rows.
|
|
14169
14461
|
|
|
14170
14462
|
```html
|
|
14171
|
-
<lr-reorder-list label="Form fields"
|
|
14463
|
+
<lr-reorder-list label="Form fields">
|
|
14172
14464
|
<lr-reorder-item value="name">Name</lr-reorder-item>
|
|
14173
14465
|
<lr-reorder-item value="email">Email</lr-reorder-item>
|
|
14174
14466
|
<lr-reorder-item value="phone">Phone</lr-reorder-item>
|
|
14175
14467
|
</lr-reorder-list>
|
|
14468
|
+
<script type="module">
|
|
14469
|
+
document
|
|
14470
|
+
.querySelector("lr-reorder-list")
|
|
14471
|
+
.addEventListener("lr-reorder", (e) => console.log(e.detail.order));
|
|
14472
|
+
</script>
|
|
14176
14473
|
```
|
|
14177
14474
|
|
|
14178
14475
|
**Known gotchas:**
|
|
@@ -14463,7 +14760,7 @@ progress` style, and gates `lr-load-more` while a consumer's fetch is in flight.
|
|
|
14463
14760
|
**Exported types:** `VirtualListRowHeight = number | 'auto'`;
|
|
14464
14761
|
`VirtualListSource<T> = readonly T[] | VirtualListIndexedSource<T>` and
|
|
14465
14762
|
`VirtualListIndexedSource<T> { readonly count: number; itemAt(index): T; keyAt?(index): string |
|
|
14466
|
-
number; indexOfKey?(key: string | number): number }`; `VirtualListRange { start: number; end: number }` (the `lr-visible-range-
|
|
14763
|
+
number; indexOfKey?(key: string | number): number }`; `VirtualListRange { start: number; end: number }` (the `lr-visible-range-change`
|
|
14467
14764
|
detail shape); `VirtualListGroup { key: string | number; label?: string; startIndex: number }` — the
|
|
14468
14765
|
shape consumed by `groups` above; `VirtualListScroll { scrollTop: number; viewportHeight: number }` —
|
|
14469
14766
|
the `lr-virtual-scroll` detail shape.
|
|
@@ -14508,12 +14805,14 @@ math, and any row element can be recycled or removed on the next update.
|
|
|
14508
14805
|
**Events:** `lr-load-more` (no detail — fired once per approach to the bottom of the list while
|
|
14509
14806
|
`has-more` is true and `loading` is false; does not refire on every scroll tick while still near the
|
|
14510
14807
|
bottom — scrolling back away from the bottom and returning, or `items` growing enough to move the
|
|
14511
|
-
window away from the end, re-arms it), `lr-visible-range-
|
|
14512
|
-
current visible, non-overscanned item index range — fired only when it actually changes
|
|
14808
|
+
window away from the end, re-arms it), `lr-visible-range-change` (`detail: VirtualListRange`, the
|
|
14809
|
+
current visible, non-overscanned item index range — fired only when it actually changes; it was
|
|
14810
|
+
spelled `lr-visible-range-changed` before 10.0.0, the only past-tense `-changed` spelling among 58
|
|
14811
|
+
`-change`-family events, so a convention-driven `lr-${x}-change` listener silently missed it),
|
|
14513
14812
|
`lr-virtual-scroll`
|
|
14514
14813
|
(`detail: VirtualListScroll` — the scroll container moved; emitted from the same animation frame that
|
|
14515
14814
|
already coalesces native `scroll` events, so a fling produces at most one per frame and none at all
|
|
14516
|
-
when the position did not change. Unlike `lr-visible-range-
|
|
14815
|
+
when the position did not change. Unlike `lr-visible-range-change`, which only fires on index-range
|
|
14517
14816
|
changes, this reports _sub-row_ movement, which is what scroll-linked layout needs)
|
|
14518
14817
|
|
|
14519
14818
|
**Slots:** none — all content comes from `renderItem`.
|
|
@@ -14544,8 +14843,10 @@ activation target.
|
|
|
14544
14843
|
|
|
14545
14844
|
**Optional peer deps:** none.
|
|
14546
14845
|
|
|
14547
|
-
```
|
|
14548
|
-
|
|
14846
|
+
```ts
|
|
14847
|
+
import { html } from "lit";
|
|
14848
|
+
|
|
14849
|
+
const view = html`<lr-virtual-list
|
|
14549
14850
|
.items=${sessions}
|
|
14550
14851
|
.renderItem=${(item, index) => html`
|
|
14551
14852
|
<lr-conversation-item
|
|
@@ -14560,12 +14861,14 @@ activation target.
|
|
|
14560
14861
|
?has-more=${hasMorePages}
|
|
14561
14862
|
?loading=${isLoadingMore}
|
|
14562
14863
|
@lr-load-more=${() => loadNextPage()}
|
|
14563
|
-
@lr-visible-range-
|
|
14564
|
-
@lr-virtual-scroll=${(e) => console.log(
|
|
14565
|
-
></lr-virtual-list
|
|
14864
|
+
@lr-visible-range-change=${(e) => console.log("visible", e.detail.start, e.detail.end)}
|
|
14865
|
+
@lr-virtual-scroll=${(e) => console.log("scroll top", e.detail.scrollTop)}
|
|
14866
|
+
></lr-virtual-list>`;
|
|
14566
14867
|
```
|
|
14567
14868
|
|
|
14568
14869
|
```ts
|
|
14870
|
+
import { html } from "lit";
|
|
14871
|
+
|
|
14569
14872
|
// No count-sized array: only the current window is read.
|
|
14570
14873
|
const syntheticRows = {
|
|
14571
14874
|
count: 100_000,
|
|
@@ -14582,15 +14885,17 @@ html`<lr-virtual-list
|
|
|
14582
14885
|
></lr-virtual-list>`;
|
|
14583
14886
|
```
|
|
14584
14887
|
|
|
14585
|
-
```
|
|
14586
|
-
|
|
14587
|
-
|
|
14588
|
-
|
|
14888
|
+
```ts
|
|
14889
|
+
import { html } from "lit";
|
|
14890
|
+
|
|
14891
|
+
// Sticky group headers: the header is a real row, so the `groups` entries are position anchors
|
|
14892
|
+
// only (`label: ''`); the pinned copy remains strictly presentational.
|
|
14893
|
+
const view = html`<lr-virtual-list
|
|
14589
14894
|
.items=${rows}
|
|
14590
14895
|
.groups=${groupStarts /* [{ key: 'Today', label: '', startIndex: 0 }, …] */}
|
|
14591
14896
|
.renderItem=${(item, index) => (item.isHeader ? headerTemplate(item) : rowTemplate(item))}
|
|
14592
14897
|
.renderStickyGroup=${(group) => headerTemplate(group)}
|
|
14593
|
-
></lr-virtual-list
|
|
14898
|
+
></lr-virtual-list>`;
|
|
14594
14899
|
```
|
|
14595
14900
|
|
|
14596
14901
|
Every row is positioned by a `transform: translateY(offset)`, rather than page flow, so only a small
|
|
@@ -14946,13 +15251,17 @@ invention (no `wa-*`/`sl-*` counterpart).
|
|
|
14946
15251
|
anchors to its block-end edge and does not cover the full height. Has no visual effect while the effective
|
|
14947
15252
|
presentation resolves to `'inline'`.
|
|
14948
15253
|
- `label: string = ''` — accessible name for the overlay presentation's `role="dialog"`, used
|
|
14949
|
-
verbatim when set
|
|
14950
|
-
|
|
14951
|
-
|
|
14952
|
-
|
|
14953
|
-
`[
|
|
14954
|
-
the
|
|
14955
|
-
|
|
15254
|
+
verbatim when set — but a plain `aria-label` attribute on the host wins outright over `label`
|
|
15255
|
+
when both are present, the standard ARIA convention for a consumer that wants full control over
|
|
15256
|
+
the announced name (matching `lr-dialog`'s `accessibleLabel` pattern). When both the host
|
|
15257
|
+
`aria-label` and `label` are empty, this falls back to the `header` slot's content: a heading
|
|
15258
|
+
element (`h1`–`h6` or `[role="heading"]`) among the slotted header content wins if present,
|
|
15259
|
+
otherwise the header slot's combined text content is used (mirrors `lr-dialog`'s
|
|
15260
|
+
`detectHeading()` fallback, via `aria-label` rather than `aria-labelledby` since the header
|
|
15261
|
+
content is light DOM while `[part="panel"]` is in shadow DOM). A panel opened with none of a host
|
|
15262
|
+
`aria-label`, `label`, or header content uses the localized `responsivePanel` fallback (`"Panel"`
|
|
15263
|
+
in the default locale), so its dialog is never unnamed. Unused in the inline presentation, which
|
|
15264
|
+
has no dialog semantics to name.
|
|
14956
15265
|
- `overlayBreakpoint: string = '768px'` (attribute `overlay-breakpoint`) — CSS length compared with
|
|
14957
15266
|
the component's allocated inline size in `mode="auto"`; at or below it, the effective presentation
|
|
14958
15267
|
is `'overlay'`.
|
|
@@ -15370,19 +15679,16 @@ being dragged. Plus shared tokens `--lr-color-surface`, `--lr-color-border`, `--
|
|
|
15370
15679
|
|
|
15371
15680
|
```html
|
|
15372
15681
|
<div style="position: relative; block-size: 100vh;">
|
|
15373
|
-
<lr-dock-panel
|
|
15374
|
-
edge="end"
|
|
15375
|
-
extent="320px"
|
|
15376
|
-
min-extent="200px"
|
|
15377
|
-
max-extent="480px"
|
|
15378
|
-
collapsible
|
|
15379
|
-
@lr-resize-input=${(e) => updateLayoutPreview(e.detail.extent)}
|
|
15380
|
-
@lr-resize-change=${(e) => persistExtent(e.detail.extent)}
|
|
15381
|
-
@lr-collapse-change=${(e) => console.log(e.detail.collapsed)}
|
|
15382
|
-
>
|
|
15682
|
+
<lr-dock-panel edge="end" extent="320px" min-extent="200px" max-extent="480px" collapsible>
|
|
15383
15683
|
<div>Sidebar content — a chat thread list, an inspector, anything.</div>
|
|
15384
15684
|
</lr-dock-panel>
|
|
15385
15685
|
</div>
|
|
15686
|
+
<script type="module">
|
|
15687
|
+
const panel = document.querySelector("lr-dock-panel");
|
|
15688
|
+
panel.addEventListener("lr-resize-input", (e) => updateLayoutPreview(e.detail.extent));
|
|
15689
|
+
panel.addEventListener("lr-resize-change", (e) => persistExtent(e.detail.extent));
|
|
15690
|
+
panel.addEventListener("lr-collapse-change", (e) => console.log(e.detail.collapsed));
|
|
15691
|
+
</script>
|
|
15386
15692
|
```
|
|
15387
15693
|
|
|
15388
15694
|
Pointer-drag-resize admits only a primary pointer using its primary button, then mirrors
|
|
@@ -15517,6 +15823,30 @@ former brand and active-mix values when unset.
|
|
|
15517
15823
|
|
|
15518
15824
|
- every `appearance` renders on the _same_ `[part="base"]` element — there's no separate element per
|
|
15519
15825
|
variant, so a `::part(base)` override applies uniformly regardless of `appearance`.
|
|
15826
|
+
- **a card clips, it does not scroll — and it never picks a scroll owner for you.** `[part='base']`
|
|
15827
|
+
stretches to the host's allocated block-size and clips its overflow, which is what keeps a
|
|
15828
|
+
full-bleed `media`/`image` child inside the rounded border. In an auto-sized row the card simply
|
|
15829
|
+
grows and nothing is clipped; give it a _definite_ allocation (a fixed grid row, an explicit
|
|
15830
|
+
`block-size`) and body content taller than that allocation is clipped silently, with no
|
|
15831
|
+
scrollbar. Neither upstream card exposes an overflow, block-size, or scroll hook and neither does
|
|
15832
|
+
this one: the public `body` part already carries the whole decision, and a `::part()` rule from
|
|
15833
|
+
your tree wins over the shadow stylesheet regardless of specificity. A fixed-height tile that
|
|
15834
|
+
must hold more content says so itself:
|
|
15835
|
+
|
|
15836
|
+
```css
|
|
15837
|
+
.tile-grid {
|
|
15838
|
+
display: grid;
|
|
15839
|
+
grid-template-rows: 12rem;
|
|
15840
|
+
}
|
|
15841
|
+
.tile-grid lr-card::part(body) {
|
|
15842
|
+
overflow: auto;
|
|
15843
|
+
overscroll-behavior: contain;
|
|
15844
|
+
}
|
|
15845
|
+
```
|
|
15846
|
+
|
|
15847
|
+
`overflow` other than `visible` also zeroes the body's automatic minimum size, so that one
|
|
15848
|
+
declaration is enough — the body shrinks into the tile and scrolls, and `max-block-size` /
|
|
15849
|
+
`scrollbar-gutter` stay available on the same rule. The linked (`href`) card behaves identically.
|
|
15520
15850
|
- slot-presence (`header`/`media`/`image`/`footer`/`actions`/`header-actions`/`footer-actions`) is
|
|
15521
15851
|
tracked in JS, not via CSS `:empty` (a
|
|
15522
15852
|
`[part]` wrapper always contains a literal `<slot>` child, so `:empty` never matches) — the same
|
|
@@ -15596,7 +15926,10 @@ row also makes it active.
|
|
|
15596
15926
|
**Events:** `lr-open`, `lr-close` (both `detail: undefined`, cancelable — fired before the
|
|
15597
15927
|
mutation, `preventDefault()` keeps the palette in its current open state), `lr-select`
|
|
15598
15928
|
(`detail: { command }`, fired before the command's own `onSelect` runs and before the palette
|
|
15599
|
-
closes)
|
|
15929
|
+
closes), and no-detail `focus`/`blur` events re-dispatched from the host whenever the search input
|
|
15930
|
+
gains or loses focus. The `focus`/`blur` bridge is new in 10.0.0: native `focus`/`blur` neither
|
|
15931
|
+
bubble nor cross the shadow boundary, so a host-level `el.addEventListener('focus', …)` previously
|
|
15932
|
+
never fired at all.
|
|
15600
15933
|
|
|
15601
15934
|
**Slots:** none.
|
|
15602
15935
|
|
|
@@ -15707,11 +16040,20 @@ the ladder doesn't cover is a two-line override rather than a fork.
|
|
|
15707
16040
|
|
|
15708
16041
|
**Events:**
|
|
15709
16042
|
|
|
15710
|
-
- `lr-expand`, `lr-collapse`, `lr-after-expand`, `lr-after-collapse` —
|
|
16043
|
+
- `lr-expand`, `lr-collapse`, `lr-toggle-request`, `lr-after-expand`, `lr-after-collapse` —
|
|
16044
|
+
accordion group lifecycle.
|
|
15711
16045
|
- `lr-show`, `lr-hide`, `lr-toggle`, `lr-after-show`, `lr-after-hide` — Details lifecycle only.
|
|
15712
16046
|
|
|
15713
16047
|
On the accordion, `lr-expand` and `lr-collapse` fire before a direct item changes, are cancelable,
|
|
15714
|
-
and carry `detail: { item }`. **
|
|
16048
|
+
and carry `detail: { item }`. **New in 10.0.0:** a cancelable `lr-toggle-request`
|
|
16049
|
+
(`detail: { collapsed, item }`) fires alongside the matching directional event for every transition,
|
|
16050
|
+
including sibling auto-collapses in `single`/`single-collapsible` mode and `collapseAll()`. It carries
|
|
16051
|
+
the direction in the detail rather than the event name, matching `<lr-code-block>`/`<lr-chat-message>`'s
|
|
16052
|
+
`lr-toggle-request` convention, plus an `item` reference the single-panel siblings do not need (an
|
|
16053
|
+
accordion's toggling entity is one of several children, so the event target alone cannot identify it).
|
|
16054
|
+
`preventDefault()` on **either** event vetoes the transition — the two are a symmetric veto pair, not
|
|
16055
|
+
a primary and a notification. Note `<lr-thinking-panel>`'s own `lr-toggle-request` spells its detail
|
|
16056
|
+
`{ expanded }` rather than `{ collapsed }`; the two conventions are not fully unified. **Changed in 9.0.0:** `item` is now always a `LyraAccordionItem` —
|
|
15715
16057
|
it could previously also be a `LyraDetails`. The exported `LyraAccordionPanel` union that spelled
|
|
15716
16058
|
that has been removed; use `LyraAccordionItem`. An accepted transition finishes with the
|
|
15717
16059
|
non-cancelable
|
|
@@ -16732,6 +17074,35 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
16732
17074
|
|
|
16733
17075
|
# Overlays, status & feedback (`components/overlays/`)
|
|
16734
17076
|
|
|
17077
|
+
## Breaking changes in 10.0.0
|
|
17078
|
+
|
|
17079
|
+
**Breaking (event rename, v10):** `lr-dialog`'s close event is now spelled `lr-close`, and
|
|
17080
|
+
`lr-dialog-close` is removed; `lr-drawer`, which inherits the whole dialog lifecycle, loses it too.
|
|
17081
|
+
The detail (`DialogCloseReason`), the cancelability, and the position in the `lr-hide` → close →
|
|
17082
|
+
`lr-after-hide` sequence are all unchanged — only the name moved, onto the plain spelling
|
|
17083
|
+
`lr-tool-select-dialog` and the rest of the library already use. The old name is removed outright
|
|
17084
|
+
rather than dual-emitted, because the library has no released consumers and an alias is a permanent
|
|
17085
|
+
tax paid to protect users who do not exist. Rename the listener. **Breaking (default change, v10):**
|
|
17086
|
+
`lr-progress-ring` gains `showValue`/`show-value`, defaulting to `false`, so a determinate ring no
|
|
17087
|
+
longer renders its percentage unless asked. It used to render it unconditionally with no way to
|
|
17088
|
+
suppress it short of slotting replacement content, while sibling `lr-progress-bar` has had an opt-in
|
|
17089
|
+
`show-value` all along and this reference has always claimed the two share the same value contract;
|
|
17090
|
+
they now actually do. Add `show-value` to keep the percentage. The accessible value is unchanged
|
|
17091
|
+
either way — `aria-valuetext` still carries the locale-formatted percentage — and slotted replacement
|
|
17092
|
+
content still projects with or without the attribute. **Breaking (removal, v10):** `confirm()`'s
|
|
17093
|
+
deprecated `tone` option is removed from `ConfirmOptions`; use `variant` (same `'neutral' | 'danger'`
|
|
17094
|
+
values, same `'neutral'` default). It was documented as a one-major back-compat alias and `variant`
|
|
17095
|
+
already won whenever both were set, so only a caller passing `tone` alone is affected. **New,
|
|
17096
|
+
additive, non-breaking:** `lr-popover` gains `disabled` — both `lr-tooltip` and `lr-popover`'s own
|
|
17097
|
+
subclass `lr-dropdown` had it and the base did not; `lr-dropdown` now inherits it with byte-identical
|
|
17098
|
+
behavior.
|
|
17099
|
+
|
|
17100
|
+
Also corrected in 10.0.0 — not breaking, but visible. `lr-alert` really hides a base that is queued
|
|
17101
|
+
behind the visible toast window (it renders that base `hidden` and `inert`; `inert` is
|
|
17102
|
+
platform-enforced, but `hidden` was doing nothing), and `lr-badge` and `lr-chip` honor a consumer's
|
|
17103
|
+
`hidden` slotted adornment. In each case the component's own author-origin `display` declaration was
|
|
17104
|
+
beating the UA stylesheet's `[hidden] { display: none }` regardless of specificity.
|
|
17105
|
+
|
|
16735
17106
|
## Breaking changes in 9.0.0
|
|
16736
17107
|
|
|
16737
17108
|
**Breaking (type-only, v9):** `lr-toast`'s exported `ToastPlacement`, `ToastCreateOptions`, and
|
|
@@ -16762,7 +17133,7 @@ boolean, and all three drive the same code path: `el.show()` is indistinguishabl
|
|
|
16762
17133
|
`el.open = true`, and `el.hide()` from `el.open = false`. The property, the reflected attribute and
|
|
16763
17134
|
the two methods can therefore never disagree, and each method is a no-op when the overlay is already
|
|
16764
17135
|
in the requested state. `lr-dialog` and `lr-drawer` keep `close(reason)` alongside — `hide()` plus
|
|
16765
|
-
the reason string that `lr-
|
|
17136
|
+
the reason string that `lr-close` carries.
|
|
16766
17137
|
|
|
16767
17138
|
**Four events, and where the veto sits.**
|
|
16768
17139
|
|
|
@@ -16786,9 +17157,12 @@ with matching timing _and_ matching cancelability — which also means Lyra 7.x
|
|
|
16786
17157
|
relying on the opposite polarity and has to be re-read.
|
|
16787
17158
|
|
|
16788
17159
|
`lr-dialog` and `lr-drawer` also expose cancelable `lr-initial-focus` and `lr-request-close` veto
|
|
16789
|
-
points, documented in their sections. Their cancelable `lr-
|
|
16790
|
-
|
|
16791
|
-
all
|
|
17160
|
+
points, documented in their sections. Their cancelable `lr-close` fires **after** `lr-hide` and
|
|
17161
|
+
before `lr-after-hide`; it carries the close reason as `detail: DialogCloseReason`. Vetoing
|
|
17162
|
+
`lr-hide` stops it from firing at all, and `preventDefault()` on `lr-close` itself also vetoes the
|
|
17163
|
+
close. The same name is already used by the `lr-tool-select-dialog`/`lr-tool-result-dialog`/
|
|
17164
|
+
`lr-tool-approval-dialog` trio, which mirrors this identical detail shape, so one listener covers
|
|
17165
|
+
all of them. `lr-drawer` inherits `lr-close` unchanged.
|
|
16792
17166
|
|
|
16793
17167
|
**The top layer.** An open `lr-dialog` or modal `lr-drawer` is promoted into the browser **top layer**
|
|
16794
17168
|
(through `popover="manual"`) rather than stacked with `z-index`. It therefore escapes every ancestor
|
|
@@ -17204,7 +17578,7 @@ A modal panel anchored to one logical edge of the viewport. `LyraDrawer` extends
|
|
|
17204
17578
|
inherits the entire dialog contract unchanged: focus trapping, Escape and opt-in backdrop dismissal,
|
|
17205
17579
|
document scroll locking, browser **top-layer** promotion, overlay stacking, accessible naming, the
|
|
17206
17580
|
`show()`/`hide()`/`close()` methods and the whole
|
|
17207
|
-
`lr-show`/`lr-after-show`/`lr-hide`/`lr-after-hide`/`lr-
|
|
17581
|
+
`lr-show`/`lr-after-show`/`lr-hide`/`lr-after-hide`/`lr-close` lifecycle. `contained` switches
|
|
17208
17582
|
to an absolute, nonmodal panel inside the nearest containing block; only that mode, `placement`, and
|
|
17209
17583
|
the slide animation are its own.
|
|
17210
17584
|
|
|
@@ -17235,8 +17609,8 @@ the slide animation are its own.
|
|
|
17235
17609
|
promise settles after the matching `lr-after-*` event.
|
|
17236
17610
|
|
|
17237
17611
|
**Events:** `lr-show` (cancelable), `lr-after-show`, `lr-hide` (cancelable), `lr-after-hide`, and
|
|
17238
|
-
`lr-initial-focus` (cancelable), `lr-request-close` (cancelable, detail source), and
|
|
17239
|
-
|
|
17612
|
+
`lr-initial-focus` (cancelable), `lr-request-close` (cancelable, detail source), and `lr-close`
|
|
17613
|
+
(`detail: DialogCloseReason`, cancelable) — all inherited unchanged from
|
|
17240
17614
|
`lr-dialog`; see that section for details and veto rules. `lr-after-show` /
|
|
17241
17615
|
`lr-after-hide` fire once the slide animation has finished, so they are deferred by roughly one
|
|
17242
17616
|
animation compared with the state flip.
|
|
@@ -17363,13 +17737,18 @@ chrome remains visible. The fallback order appears below.
|
|
|
17363
17737
|
- `lr-request-close` — cancelable request from a built-in affordance; detail source is
|
|
17364
17738
|
`'close-button' | 'keyboard' | 'overlay'`. Veto stops the close lifecycle. Direct `close()` and
|
|
17365
17739
|
`hide()` calls do not emit this request event.
|
|
17366
|
-
- `lr-
|
|
17740
|
+
- `lr-close` — cancelable, with `detail: DialogCloseReason`; emitted after `lr-hide`. The same name
|
|
17741
|
+
is already used by `<lr-tool-select-dialog>`, `<lr-tool-result-dialog>`, and
|
|
17742
|
+
`<lr-tool-approval-dialog>`, whose own docs describe an identical detail shape, so one listener
|
|
17743
|
+
covers all of them. A listener calling `preventDefault()` vetoes the close. Also fired (with
|
|
17744
|
+
reason `'unmount'`, non-cancelable there) when the dialog is removed from the DOM while still
|
|
17745
|
+
open.
|
|
17367
17746
|
|
|
17368
17747
|
The two `lr-after-*` events are never cancelable.
|
|
17369
17748
|
|
|
17370
17749
|
The open sequence is `lr-show` → `lr-initial-focus` (when focus would move) → `lr-after-show`; the
|
|
17371
|
-
direct close sequence is `lr-hide` → `lr-
|
|
17372
|
-
prepends `lr-request-close`. **Both state pre-events fire _before_ the state changes**, so reading
|
|
17750
|
+
direct close sequence is `lr-hide` → `lr-close` → `lr-after-hide`.
|
|
17751
|
+
A built-in dismissal prepends `lr-request-close`. **Both state pre-events fire _before_ the state changes**, so reading
|
|
17373
17752
|
`el.open` inside an `lr-show`/`lr-hide` handler returns the _old_ value — this is the polarity
|
|
17374
17753
|
`wa-show`/`wa-hide` already had, and the opposite of what Lyra 7.x's own `lr-show`/`lr-hide` did on
|
|
17375
17754
|
`lr-popover`/`lr-dropdown`. The `wa-*` → `lr-*` migration table treats the rename as mechanical, and
|
|
@@ -17385,8 +17764,8 @@ and easing. Under `prefers-reduced-motion: reduce`, registry timing flattens to
|
|
|
17385
17764
|
frame and lifecycle remain intact. Passing `null` skips native interpolation but still emits the
|
|
17386
17765
|
matching after-event before the method promise resolves. Because dialogs now animate on close too,
|
|
17387
17766
|
`lr-after-hide` is normally deferred by roughly one animation. A removal while open emits
|
|
17388
|
-
`lr-hide`, `lr-
|
|
17389
|
-
cancelable, since the element is already gone.
|
|
17767
|
+
`lr-hide`, `lr-close` (reason `'unmount'`) and `lr-after-hide` in that
|
|
17768
|
+
order, none of them cancelable, since the element is already gone.
|
|
17390
17769
|
|
|
17391
17770
|
**Stacking and the top layer:** an open dialog is promoted into the browser **top layer** (via
|
|
17392
17771
|
`popover="manual"`), new in 8.0.0. That means it escapes every ancestor stacking context and every
|
|
@@ -17475,7 +17854,7 @@ Otherwise shared tokens include `--lr-space-l/-m/-s`, `--lr-color-surface/-borde
|
|
|
17475
17854
|
dlg.addEventListener("lr-after-show", () =>
|
|
17476
17855
|
console.log("enter animation done")
|
|
17477
17856
|
);
|
|
17478
|
-
dlg.addEventListener("lr-
|
|
17857
|
+
dlg.addEventListener("lr-close", (e) =>
|
|
17479
17858
|
console.log("closed:", e.detail)
|
|
17480
17859
|
);
|
|
17481
17860
|
dlg.addEventListener("lr-after-hide", () =>
|
|
@@ -17558,7 +17937,7 @@ if (ok) deleteConversation();
|
|
|
17558
17937
|
```
|
|
17559
17938
|
|
|
17560
17939
|
`confirm(options: ConfirmOptions): Promise<boolean>` where
|
|
17561
|
-
`ConfirmOptions = { title: string; description?: string; confirmLabel?: string /* = 'Confirm' */; cancelLabel?: string /* = 'Cancel' */; variant?: 'neutral' | 'danger' /* = 'neutral'
|
|
17940
|
+
`ConfirmOptions = { title: string; description?: string; confirmLabel?: string /* = 'Confirm' */; cancelLabel?: string /* = 'Cancel' */; variant?: 'neutral' | 'danger' /* = 'neutral' */ }`.
|
|
17562
17941
|
|
|
17563
17942
|
Resolves `true` only when the confirm button is pressed — Escape, a backdrop click, and the cancel
|
|
17564
17943
|
button all resolve `false`. It sets `lightDismiss = true` on its transient dialog explicitly, so the
|
|
@@ -17569,8 +17948,8 @@ of the call and removes it once settled, rather than reusing a persistent page-l
|
|
|
17569
17948
|
stack, each tied to its own returned promise. `title` becomes a direct light-DOM `<h2>`, which per `<lr-dialog>`'s
|
|
17570
17949
|
own heading-detection also drives the dialog's accessible name; `description`, if provided, becomes
|
|
17571
17950
|
a direct light-DOM `<p>`. `variant: 'danger'` fills the confirm button with `--lr-color-danger`
|
|
17572
|
-
instead of `--lr-color-brand`, for destructive actions. The deprecated `tone` option
|
|
17573
|
-
|
|
17951
|
+
instead of `--lr-color-brand`, for destructive actions. The deprecated `tone` option that preceded
|
|
17952
|
+
`variant` was removed in 10.0.0. Confirm/cancel actions deliberately use native
|
|
17574
17953
|
inline-styled `<button>` elements so this helper does not register or import the broader button
|
|
17575
17954
|
component; every color value is still a `--lr-*` token reference, never a raw literal. They carry the same interaction
|
|
17576
17955
|
states as every other control in the library: a hover/pressed fill mixed toward
|
|
@@ -17583,7 +17962,7 @@ their `data-lr-confirm-action` attribute.
|
|
|
17583
17962
|
**Known gotchas:**
|
|
17584
17963
|
|
|
17585
17964
|
- Every dismissal path (confirm button, cancel button, Escape, backdrop click) funnels through
|
|
17586
|
-
`<lr-dialog>`'s own `close()`/`lr-
|
|
17965
|
+
`<lr-dialog>`'s own `close()`/`lr-close` event, so there is exactly one place that
|
|
17587
17966
|
resolves the promise and tears the dialog down — a consumer never needs to (and shouldn't) call
|
|
17588
17967
|
`.remove()` itself. Because the close event is cancelable, `confirm()` waits through the full
|
|
17589
17968
|
dispatch and remains pending/mounted when a listener calls `preventDefault()`.
|
|
@@ -18071,6 +18450,11 @@ A click-triggered, light-dismiss floating surface positioned with the shared Flo
|
|
|
18071
18450
|
attribute wins by presence, including `aria-label=""`; only when it is absent does the property
|
|
18072
18451
|
or localized "Popover" ("Menu" when `popupRole` is `menu`) fallback apply
|
|
18073
18452
|
- `popupRole: 'dialog'|'menu' = 'dialog'` (attribute `popup-role`)
|
|
18453
|
+
- `disabled: boolean = false` (reflected, new in 10.0.0) — prevents opening the popover; pointer,
|
|
18454
|
+
keyboard, and programmatic `show()`/`open = true` are all refused while set. Becoming disabled also
|
|
18455
|
+
closes an already-open popover, and initial `disabled` plus `open` normalizes closed in either
|
|
18456
|
+
attribute order. `lr-dropdown` now inherits this from `lr-popover` rather than declaring its own;
|
|
18457
|
+
its consumer-facing behavior is unchanged
|
|
18074
18458
|
|
|
18075
18459
|
To preserve the previous Lyra-shaped defaults explicitly, use
|
|
18076
18460
|
`placement="bottom-start" distance="4" without-arrow`; origin-aware migration emits those tokens.
|
|
@@ -18541,6 +18925,7 @@ A circular progress indicator with the same value contract as `lr-progress-bar`.
|
|
|
18541
18925
|
**Properties:** `value: number = 0` (reflected), `max: number = 100`, `indeterminate: boolean = false`
|
|
18542
18926
|
(reflected), `variant: LyraProgressVariant = 'brand'` (reflected, added in 9.0.0 — matches sibling
|
|
18543
18927
|
`lr-progress-bar`'s semantic-palette vocabulary: `neutral`/`brand`/`success`/`warning`/`danger`),
|
|
18928
|
+
`showValue: boolean = false` (attribute `show-value`),
|
|
18544
18929
|
`label: string = ''` (the mapped accessible-name property), and
|
|
18545
18930
|
`accessibleLabel: string = ''` (attribute `accessible-label`; a Lyra compatibility
|
|
18546
18931
|
accessible-name spelling retained by this progress component, while several sibling components use
|
|
@@ -18550,7 +18935,13 @@ visible default-slot text when supplied, then the localized "Progress". Non-fini
|
|
|
18550
18935
|
`value`/`max` are normalized (`max <= 0` falls
|
|
18551
18936
|
back to `100`, `value` clamps to `[0, max]`) rather than producing NaN geometry.
|
|
18552
18937
|
**Slots:** default — replaces the built-in center label, which otherwise renders the rounded
|
|
18553
|
-
percentage (and nothing at all while `indeterminate`).
|
|
18938
|
+
percentage **only when `show-value` is set** (and nothing at all while `indeterminate`).
|
|
18939
|
+
**Breaking in 10.0.0:** a determinate ring used to render its percentage unconditionally, with no way
|
|
18940
|
+
to suppress it short of slotting replacement content. It now gains `showValue`/`show-value` defaulting
|
|
18941
|
+
to `false`, exactly matching `lr-progress-bar` — which is what "the same value contract as
|
|
18942
|
+
`lr-progress-bar`" above has always claimed but did not deliver. Add `show-value` to keep the
|
|
18943
|
+
percentage. `aria-valuetext` still carries it regardless, mirroring `lr-progress-bar`'s own
|
|
18944
|
+
independence there, so the accessible value is unaffected.
|
|
18554
18945
|
Its accessible text uses the same visibility filtering, forwarding-slot mutation/reassignment
|
|
18555
18946
|
tracking, and explicit-empty host-label precedence as `lr-progress-bar`.
|
|
18556
18947
|
**Live members:** `indicator: SVGCircleElement | null` returns the rendered indicator circle (or
|
|
@@ -19134,7 +19525,6 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
19134
19525
|
confirmLabel: unknown;
|
|
19135
19526
|
cancelLabel: unknown;
|
|
19136
19527
|
variant: unknown;
|
|
19137
|
-
tone: unknown;
|
|
19138
19528
|
}`
|
|
19139
19529
|
|
|
19140
19530
|
- **`components-overlays-dialog-dialog-contracts`** — Supporting data types and helpers for this component family.
|
|
@@ -20694,7 +21084,9 @@ assigned nodes update the announcement without requiring the wrapper component t
|
|
|
20694
21084
|
|
|
20695
21085
|
The `label` part alias was deprecated in 8.0.0 in favor of the shared form vocabulary
|
|
20696
21086
|
`form-control-label`. Both names remain on the same node during the compatibility window; use
|
|
20697
|
-
`::part(form-control-label)` in new CSS.
|
|
21087
|
+
`::part(form-control-label)` in new CSS. Removal is not scheduled: Web Awesome still publishes its
|
|
21088
|
+
own deprecated `label` part on `<wa-known-date>`, and a mirrored tag owes its whole upstream
|
|
21089
|
+
surface, so the alias goes only when upstream's does.
|
|
20698
21090
|
|
|
20699
21091
|
**The required marker.** The `*` the legend grows while `required` is the library's shared
|
|
20700
21092
|
required-field marker, and it takes the same three consumer-settable properties every other
|
|
@@ -20860,6 +21252,19 @@ behavior warning; direct SVG candidates and the documented animation vocabulary
|
|
|
20860
21252
|
used (a11y-tree inconsistencies across engines).
|
|
20861
21253
|
- Slot/focus microtasks and autoplay never queue new selection work while detached; reconnecting
|
|
20862
21254
|
starts again from current state rather than replaying stale work.
|
|
21255
|
+
- Non-selected candidates are hidden by the component's own `::slotted([hidden])` rule, not by the
|
|
21256
|
+
UA's. `::slotted(*)` sets `display: inline-block` on every candidate, and an author-origin
|
|
21257
|
+
declaration always beats the user-agent `[hidden] { display: none }` — so the rule that restores
|
|
21258
|
+
the native meaning of `hidden` is load-bearing, and an author overriding `display` on
|
|
21259
|
+
`::slotted` content from outside must keep the hidden case at `display: none`.
|
|
21260
|
+
`hidden="until-found"` is exempted, exactly as the UA rule exempts it.
|
|
21261
|
+
- **Before script runs, the first candidate is the one that shows.** Selection happens after the
|
|
21262
|
+
first client render and works by setting `hidden`/`aria-hidden` on light-DOM siblings, which Lit
|
|
21263
|
+
hydration never compares, so a server renderer can never produce it. Every candidate after the
|
|
21264
|
+
first is therefore hidden by CSS until a selection has been applied: a server-rendered page — or
|
|
21265
|
+
one whose script never runs — paints one candidate rather than the whole pool. Randomness itself
|
|
21266
|
+
cannot survive SSR (there is no shared seed), so order the pool if a specific candidate should be
|
|
21267
|
+
the pre-hydration one. With `items > 1` the pre-hydration paint is still a single candidate.
|
|
20863
21268
|
|
|
20864
21269
|
## `lr-tour`
|
|
20865
21270
|
|
|
@@ -21076,6 +21481,37 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
21076
21481
|
|
|
21077
21482
|
# Media, files & maps (`components/media/`)
|
|
21078
21483
|
|
|
21484
|
+
## Breaking changes in 10.0.0
|
|
21485
|
+
|
|
21486
|
+
`<lr-media-card>`'s `alt` becomes optional (`alt?: string`, was `alt: string = ''`), so a decorative
|
|
21487
|
+
image is expressible at last. The image render used to fall through `alt`, then `filename`, then a
|
|
21488
|
+
localized generic description with `||`, which made an explicit `alt=""` indistinguishable from an
|
|
21489
|
+
absent one and published it as `alt="Image attachment"` — there was no way to mark the image
|
|
21490
|
+
decorative, which is the one thing
|
|
21491
|
+
`alt=""` means in HTML. It now reads `??`, matching `<lr-image-viewer>` and `<lr-document-preview>`,
|
|
21492
|
+
which already documented that contract. Omitting `alt` is unchanged; only the value read back from
|
|
21493
|
+
an unset property differs (`''` becomes `undefined`), so a consumer comparing `el.alt === ''` should
|
|
21494
|
+
read `el.alt ?? ''`. The nested `<video controls>` label deliberately does **not** follow: an empty
|
|
21495
|
+
`alt` there would leave an interactive player with no accessible name, and "decorative" is not a
|
|
21496
|
+
state a media control can be in, so the video path still falls through to `filename` and the generic
|
|
21497
|
+
description.
|
|
21498
|
+
|
|
21499
|
+
`<lr-attachment-chip>`'s `lr-preview-request` is no longer cancelable. It was advertised as a veto
|
|
21500
|
+
point, but the chip never read `defaultPrevented` and owns no preview default action to cancel — it
|
|
21501
|
+
never registers or owns a viewer or overlay, by its own documented contract — so `preventDefault()`
|
|
21502
|
+
was a no-op. The flag is removed rather than left as a promise the component cannot keep: a host that
|
|
21503
|
+
was calling `preventDefault()` can drop the call, and one that believed the call was suppressing
|
|
21504
|
+
something was never being served. `<lr-voice-picker>`'s same-named event belongs to a different
|
|
21505
|
+
component, owns a real internal default action, and stays cancelable.
|
|
21506
|
+
|
|
21507
|
+
Also corrected in 10.0.0 — not breaking, but visible. `<lr-flag>` no longer paints a full-size
|
|
21508
|
+
undecoded image beside its own skeleton while loading; `<lr-video>` no longer keeps a second,
|
|
21509
|
+
duplicate controls play button both painted and focusable behind a poster, and it now keeps captions
|
|
21510
|
+
for a `<track>` with no `kind` attribute, whose HTML missing-value default is `subtitles`; and
|
|
21511
|
+
`<lr-avatar>` and `<lr-image-comparer>` honor a consumer's `hidden` slotted child. In each case the
|
|
21512
|
+
component's own author-origin declaration was beating the UA stylesheet's `[hidden] { display: none }`
|
|
21513
|
+
regardless of specificity.
|
|
21514
|
+
|
|
21079
21515
|
## Breaking changes in 9.0.0
|
|
21080
21516
|
|
|
21081
21517
|
`<lr-media-card>`'s `accessibleLabel` property now defaults to `null` instead of `''`
|
|
@@ -21091,7 +21527,16 @@ Country/language flag image. Flag artwork ships in a **separate, optional peer p
|
|
|
21091
21527
|
|
|
21092
21528
|
**Properties:**
|
|
21093
21529
|
|
|
21094
|
-
- `country?: string` (ISO 3166-1 alpha-2
|
|
21530
|
+
- `country?: string` (ISO 3166-1 **alpha-2 or alpha-3**, e.g. `"fr"` or `"FRA"` — takes
|
|
21531
|
+
precedence over `language`). Length alone disambiguates the two code spaces, so no format hint
|
|
21532
|
+
is needed: a 2-letter value is alpha-2, a 3-letter value is alpha-3. Alpha-3 support exists
|
|
21533
|
+
because public statistical sources (World Bank, UN, IMF, most open-data portals) key country
|
|
21534
|
+
records on alpha-3; the 249 officially-assigned mappings are packed as a ~1.2 KB fixed-width
|
|
21535
|
+
string and expanded lazily on the first alpha-3 lookup, so an alpha-2-only app never pays for
|
|
21536
|
+
them. Withdrawn and user-assigned codes deliberately do not map to a successor state — they
|
|
21537
|
+
take the unresolved path below
|
|
21538
|
+
- `fallback?: string` — placeholder image URL rendered when the code cannot resolve to a current
|
|
21539
|
+
flag. The `fallback` slot wins over it
|
|
21095
21540
|
- `language?: string` (BCP-47-ish tag, e.g. `"en"`/`"en-US"`, resolved to a representative country
|
|
21096
21541
|
via `languageToCountry()`)
|
|
21097
21542
|
- `src?: string` (a pre-resolved flag image URL — takes precedence over `country`/`language` and
|
|
@@ -21116,11 +21561,17 @@ authoring types are `LyraFlagShape`, `LyraFlagFidelity`, and `LyraFlagUrlResolve
|
|
|
21116
21561
|
|
|
21117
21562
|
**Events:** none.
|
|
21118
21563
|
|
|
21119
|
-
**Slots:**
|
|
21564
|
+
**Slots:** `fallback` — rendered in place of the flag when `country`/`language` cannot resolve to a
|
|
21565
|
+
current flag (an unassigned, historical, or malformed code). Wins over the `fallback` property.
|
|
21120
21566
|
|
|
21121
|
-
**CSS parts:** `image` (the underlying `<img>`, exposed once native loading succeeds),
|
|
21567
|
+
**CSS parts:** `image` (the underlying `<img>`, exposed once native loading succeeds),
|
|
21568
|
+
`fallback-image` (the `fallback` property's placeholder, when no slot content is supplied), `error`
|
|
21122
21569
|
(contained localized visible text rendered when URL validation, peer resolution, or native image
|
|
21123
|
-
loading fails). The host reflects the terminal error state with `data-error
|
|
21570
|
+
loading fails). The host reflects the terminal error state with `data-error`, and an unresolvable
|
|
21571
|
+
code with `data-unresolved`. **The two are deliberately distinct:** a dissolved federation or
|
|
21572
|
+
unrecognized territory in a longitudinal dataset is *data*, not a defect, so it renders the neutral
|
|
21573
|
+
fallback (occupying its normal footprint in a table or card grid) rather than localized error
|
|
21574
|
+
wording that reads to a user as a bug. Style the two states apart with those attributes.
|
|
21124
21575
|
|
|
21125
21576
|
**Themeable custom properties:** `--lr-flag-radius` (default `calc(var(--lr-radius) * 0.33)` —
|
|
21126
21577
|
rectangular corner radius), `--lr-flag-aspect-ratio` (default `4 / 3`), and
|
|
@@ -21371,6 +21822,22 @@ operations. Its runtime value is the underlying MapLibre map.
|
|
|
21371
21822
|
style-required failure and makes no tile/style request. Assign a hosted vector/raster style from
|
|
21372
21823
|
a provider whose terms fit your application, or an explicitly network-silent style for local
|
|
21373
21824
|
geometry.
|
|
21825
|
+
- `legendGradient: readonly (readonly [number, string])[] = []` (attribute: false, type
|
|
21826
|
+
`LyraMapLegendGradientStop[]`) — renders the legend as a **continuous** gradient bar with endpoint
|
|
21827
|
+
captions instead of (or alongside) the discrete `legend` swatches, which is the standard key for a
|
|
21828
|
+
choropleth whose `interpolate` fill is itself a continuous ramp. Takes the same `[value, color]`
|
|
21829
|
+
stop shape as `choropleth.stops`, so the usual assignment is `map.legendGradient =
|
|
21830
|
+
myChoropleth.stops` and the key cannot drift from the layer it describes. Stops are sorted
|
|
21831
|
+
ascending, bounded to 64, and filtered to finite values carrying a CSS-parsable color; fewer than
|
|
21832
|
+
two usable stops render no bar at all, since a one-stop "gradient" is a flat block that describes
|
|
21833
|
+
nothing. Each stop sits at its true proportion of the value range, so the bar shows the ramp the
|
|
21834
|
+
expression actually produces rather than evenly spacing unevenly-spaced values. Part names
|
|
21835
|
+
(`legend-gradient`, `legend-lo`, `legend-hi`) mirror `lr-heatmap`'s gradient legend, and the bar
|
|
21836
|
+
is `aria-hidden`/`inert` with the captions carrying the meaning. Mirrors under RTL
|
|
21837
|
+
- `legendGradientLoLabel: string | null = null` (attribute `legend-gradient-lo-label`),
|
|
21838
|
+
`legendGradientHiLabel: string | null = null` (attribute `legend-gradient-hi-label`) — override
|
|
21839
|
+
the endpoint captions, which otherwise default to the lowest/highest stop value in the component's
|
|
21840
|
+
own locale-aware numeric formatting
|
|
21374
21841
|
- `legend: readonly LyraMapLegendEntry[] = []` (attribute: false) — immutable defensive snapshots
|
|
21375
21842
|
of `LyraMapLegendEntry { readonly color: string; readonly label: string; readonly pattern:
|
|
21376
21843
|
LyraMapLegendPattern }`, where `LyraMapLegendPattern` is `'solid' | 'diagonal' | 'dots' |
|
|
@@ -21382,10 +21849,20 @@ omittedCount, truncatedLabelCount, truncated }` result for the latest assignment
|
|
|
21382
21849
|
projection renders a localized visible `1–N of M items` summary rather than silently claiming
|
|
21383
21850
|
the bounded rows are complete.
|
|
21384
21851
|
- `choropleth?: LyraMapChoroplethLayer` (attribute: false) — `LyraMapChoroplethLayer { sourceId:
|
|
21385
|
-
string; geojson: GeoJSON.FeatureCollection; field: string; stops: [number, string][]
|
|
21852
|
+
string; geojson: GeoJSON.FeatureCollection; field: string; stops: [number, string][]; interpolation?:
|
|
21853
|
+
'linear' | 'logarithmic' }` (interpolated
|
|
21386
21854
|
fill-color expression from `field`'s value against `stops`; `stops` must contain at least one
|
|
21387
21855
|
`[value, color]` pair — an empty array is ignored, leaving whatever fill layer already exists, if
|
|
21388
|
-
any, untouched, rather than being applied)
|
|
21856
|
+
any, untouched, rather than being applied).
|
|
21857
|
+
`interpolation` (type `LyraMapChoroplethInterpolation`, default `'linear'`) chooses how the colour
|
|
21858
|
+
is interpolated between stops. `'logarithmic'` compresses the ramp, which is what a heavy-tailed
|
|
21859
|
+
quantity — price, population, income — needs: on a linear ramp every value below the maximum falls
|
|
21860
|
+
into the first colour band, so the map reads as one flat colour plus a couple of outliers. It
|
|
21861
|
+
emits maplibre's own `['interpolate', ['exponential', 0.25], …]`, exposing an existing capability
|
|
21862
|
+
rather than adding one (maplibre has no `['log']` interpolation type; a sub-1 exponential base is
|
|
21863
|
+
the documented way to weight a ramp toward the low end). **`stops` stay in the data's own units
|
|
21864
|
+
under either mode**, so the legend keeps reading in real values instead of log units — no
|
|
21865
|
+
pre-transforming to log10 and hand-relabelling the legend back
|
|
21389
21866
|
- `markers: LyraMapMarker[] = []` (attribute: false) — `LyraMapMarker { id?: string; lngLat:
|
|
21390
21867
|
[number, number]; color?: string; label?: string; unsafeHtml?: string }`; an explicit `id` is
|
|
21391
21868
|
trimmed and must be nonempty, and the first marker for an explicit ID wins. Markers are reconciled
|
|
@@ -21420,6 +21897,37 @@ GeoJSON.FeatureCollection; tone?: 'accent' | 'success' | 'warning' |
|
|
|
21420
21897
|
persists across a `dataLayers` reassignment gets its GeoJSON updated in place (`setData()`), one
|
|
21421
21898
|
that's dropped has its private source/layers removed, and a genuinely new `sourceId` gets new
|
|
21422
21899
|
resources — nothing leaks on removal, style change, or disconnect.
|
|
21900
|
+
- `maxBounds: LyraMapBounds | null = null` (attribute: false) — box the map may not pan outside,
|
|
21901
|
+
`[[west, south], [east, north]]`. Prefer it over calling `map.setMaxBounds()` through the `.map`
|
|
21902
|
+
escape hatch: constraining the camera can wedge maplibre-gl at a sub-1 fractional zoom in a wide
|
|
21903
|
+
container, leaving `getZoom()` returning `null` permanently, every frame throwing from inside the
|
|
21904
|
+
peer's own matrix math, and the canvas never painting again — a blank map, with nothing thrown at
|
|
21905
|
+
the call site to attribute it to. This property applies the same call, then reads the camera back
|
|
21906
|
+
and reverts (restoring zoom and centre) if it did not survive, so the worst case is an
|
|
21907
|
+
unconstrained map plus a dev-mode warning. A malformed box is rejected rather than clamped
|
|
21908
|
+
|
|
21909
|
+
**Choropleth and `dataLayers` updates are diffed before they reach the peer.** `setData()`
|
|
21910
|
+
unconditionally re-tiles and repaints an entire source, which is invisible on a static map and
|
|
21911
|
+
expensive on an animated one. When an update changes only feature *properties* — the values driving
|
|
21912
|
+
the colour ramp — the component emits maplibre-gl's incremental `updateData()` instead. The fast
|
|
21913
|
+
path is deliberately strict, and needs all of: the same feature count, a `string`/`number` `id` on
|
|
21914
|
+
every feature in the same order, and geometry that is the **same object** as last time (not merely
|
|
21915
|
+
deep-equal). Structurally comparing polygon rings would cost about what the re-tile costs, and a
|
|
21916
|
+
false positive would paint stale geometry. Reuse your geometry objects across frames — the
|
|
21917
|
+
efficient way to build an animation anyway — and the fast path applies; otherwise it falls back to
|
|
21918
|
+
`setData()` with no change in behaviour. Peers predating `updateData()` always take the old path.
|
|
21919
|
+
|
|
21920
|
+
**Feature properties are tiled, and therefore bounded in numeric magnitude.** MapLibre GL tiles
|
|
21921
|
+
every GeoJSON source through a worker into a protobuf vector tile, so a property carrying a huge
|
|
21922
|
+
integer throws *inside that worker* — "Given varint doesn't fit into 10 bytes". That throw is not
|
|
21923
|
+
catchable by your app and not a rejected promise; it reaches you only as an opaque message on
|
|
21924
|
+
`lr-map`'s own error handler, while the rest of the layer still paints, so one bad feature in a
|
|
21925
|
+
large collection is invisible until someone walks the data by hand. Both `choropleth.geojson` and
|
|
21926
|
+
`dataLayers[].geojson` are now pre-scanned (first 10,000 features) and any numeric property beyond
|
|
21927
|
+
`Number.MAX_SAFE_INTEGER` draws a dev-mode warning naming the feature and the property. Carry a
|
|
21928
|
+
reduced figure in the feature — a log, a bucket, an index — and keep the exact value in your own
|
|
21929
|
+
payload beside the map.
|
|
21930
|
+
|
|
21423
21931
|
- `label: string = ''` — purpose-specific accessible name for MapLibre's actual focusable canvas.
|
|
21424
21932
|
A nonempty host `aria-label` remains on the host and is not duplicated onto the canvas; the canvas
|
|
21425
21933
|
uses `label` or the localized map name. An explicitly empty host `aria-label` is preserved as an
|
|
@@ -21442,13 +21950,20 @@ shared `maplibre-gl` import without constructing a map or allocating a WebGL con
|
|
|
21442
21950
|
an element.
|
|
21443
21951
|
|
|
21444
21952
|
**Events:** `lr-map-load` (fired once, after the underlying map's own `'load'`), `lr-map-click`
|
|
21445
|
-
(frozen `detail: { readonly lngLat: readonly [lng, lat], readonly feature
|
|
21446
|
-
|
|
21447
|
-
choropleth fill layer
|
|
21448
|
-
|
|
21449
|
-
|
|
21450
|
-
|
|
21451
|
-
|
|
21953
|
+
(frozen `detail: { readonly lngLat: readonly [lng, lat], readonly feature?, readonly origin?,
|
|
21954
|
+
readonly sourceId? }`; the tuple and any hit GeoJSON feature are detached and recursively frozen).
|
|
21955
|
+
`feature` resolves against the choropleth fill layer **and** every applied `dataLayers`
|
|
21956
|
+
fill/line/circle layer, topmost first — so a shape painted through `dataLayers` is identifiable
|
|
21957
|
+
instead of being indistinguishable from empty space. `origin` is `'choropleth'` or `'data-layer'`,
|
|
21958
|
+
and `sourceId` carries the authored `dataLayers[].sourceId` for a data-layer hit; both are
|
|
21959
|
+
`undefined` whenever `feature` is
|
|
21960
|
+
|
|
21961
|
+
**Slots:** `legend` — custom legend content, rendered inside the legend panel's own layout so it
|
|
21962
|
+
stays positioned with the map instead of floating beside it. Supplying it opens the panel even
|
|
21963
|
+
when `legend` and `legendGradient` are both empty.
|
|
21964
|
+
|
|
21965
|
+
**CSS parts:** `base`, `container`, `legend`, `legend-swatch`, `legend-gradient`, `legend-lo`,
|
|
21966
|
+
`legend-hi`, `legend-limit`, `marker`, `popup`,
|
|
21452
21967
|
`popup-content`, `popup-close-button`, `attribution`, `attribution-toggle`, `error`.
|
|
21453
21968
|
`legend` is a localized `role="group"` containing a real list associated to the map canvas with
|
|
21454
21969
|
`aria-describedby`; each entry is a `listitem`, decorative swatches are inert/accessibility-hidden,
|
|
@@ -22050,7 +22565,7 @@ to populate it: set `file` to a real `File` (fresh from a picker/drop), from whi
|
|
|
22050
22565
|
`mime-type`/`thumbnail-src` props instead, for reconstructing a chip from server-persisted
|
|
22051
22566
|
attachment metadata after a page reload, when no real `File` object exists any more. `file` always
|
|
22052
22567
|
wins when both are present. When a real `File` or `preview-src` is available, the chip offers a
|
|
22053
|
-
localized action that emits a cancelable `lr-preview-request`; it never registers or owns a viewer
|
|
22568
|
+
localized action that emits a plain, non-cancelable `lr-preview-request`; it never registers or owns a viewer
|
|
22054
22569
|
or overlay, so the host composes the desired preview surface.
|
|
22055
22570
|
|
|
22056
22571
|
**Properties:**
|
|
@@ -22109,9 +22624,12 @@ derived from `` `${file.name}:${file.size}:${file.lastModified}` ``; when neithe
|
|
|
22109
22624
|
generated internal id is used as a last resort.
|
|
22110
22625
|
|
|
22111
22626
|
**Events:** `lr-remove` (`detail: { attachmentId }`, only rendered while `removable`), `lr-retry`
|
|
22112
|
-
(`detail: { attachmentId }`, only rendered while `status="error"`), and
|
|
22113
|
-
`lr-preview-request` (`detail: { attachmentId, name, mimeType, src }`)
|
|
22114
|
-
|
|
22627
|
+
(`detail: { attachmentId }`, only rendered while `status="error"`), and
|
|
22628
|
+
`lr-preview-request` (`detail: { attachmentId, name, mimeType, src }`) — a plain, non-cancelable
|
|
22629
|
+
notification that the preview action was activated. **Breaking in 10.0.0:** this event was
|
|
22630
|
+
advertised as cancelable, but the chip never read `defaultPrevented` and owns no preview default
|
|
22631
|
+
action to veto (it never registers or owns a viewer/overlay), so `preventDefault()` was a no-op.
|
|
22632
|
+
The flag is gone rather than left as a promise the component cannot keep.
|
|
22115
22633
|
|
|
22116
22634
|
**Slots:** none.
|
|
22117
22635
|
|
|
@@ -22276,13 +22794,18 @@ final.
|
|
|
22276
22794
|
- `mimeType: string = ''` (attribute `mime-type`) — drives auto-detection when `kind` is unset.
|
|
22277
22795
|
- `filename: string = ''` — shown in the file-chip fallback, used as the download link's suggested
|
|
22278
22796
|
filename, and folded into the accessible name.
|
|
22279
|
-
- `alt
|
|
22280
|
-
back to `filename`, then a generic per-kind description.
|
|
22281
|
-
|
|
22282
|
-
|
|
22283
|
-
|
|
22284
|
-
|
|
22285
|
-
|
|
22797
|
+
- `alt?: string` — alt text for the image case (and reused as a video label fallback). Unset falls
|
|
22798
|
+
back to `filename`, then a generic per-kind description. An explicit `alt=""` survives to the
|
|
22799
|
+
rendered `<img alt="">`, which is the HTML idiom for a decorative image — same contract as
|
|
22800
|
+
`<lr-image-viewer>` and `<lr-document-preview>`. The `<video>` case is deliberately outside that
|
|
22801
|
+
carve-out: an empty `alt` there still falls through to `filename`/the generic description, because
|
|
22802
|
+
an empty accessible name would leave an interactive player unnamed rather than mark it decorative.
|
|
22803
|
+
- `accessibleLabel: string | null = null` (attribute `aria-label`) — a declarative attribute names
|
|
22804
|
+
the host as a whole while its nested button/link keeps a purpose-specific localized action name. A
|
|
22805
|
+
property-only assignment can override the nested action when no host label is present. An explicit
|
|
22806
|
+
empty string behaves like the unset `null` default — both fall through to the generated
|
|
22807
|
+
purpose-specific name. Image alt text and the native video's own purpose label remain independent;
|
|
22808
|
+
an explicitly empty host still leaves every interactive descendant named.
|
|
22286
22809
|
- `maxHeight: string = ''` (attribute `max-height`) — a CSS length (e.g. `"16rem"`); once set,
|
|
22287
22810
|
overrides the `--lr-media-card-max-height` custom property for this instance only (applied
|
|
22288
22811
|
inline on `[part="base"]`, so it reliably wins over a `:host{}`-declared default from outside the
|
|
@@ -22348,12 +22871,23 @@ sizing), `--lr-focus-ring-*`, `--lr-transition-fast`.
|
|
|
22348
22871
|
**Optional peer deps:** none.
|
|
22349
22872
|
|
|
22350
22873
|
```html
|
|
22351
|
-
<lr-media-card
|
|
22352
|
-
|
|
22353
|
-
|
|
22354
|
-
|
|
22355
|
-
|
|
22874
|
+
<lr-media-card
|
|
22875
|
+
id="image-card"
|
|
22876
|
+
kind="image"
|
|
22877
|
+
src="https://example.com/photo.jpg"
|
|
22878
|
+
alt="Screenshot"
|
|
22879
|
+
filename="photo.jpg"
|
|
22356
22880
|
></lr-media-card>
|
|
22881
|
+
<lr-media-card id="file-card" kind="file" src="https://example.com/report.pdf" filename="report.pdf">
|
|
22882
|
+
</lr-media-card>
|
|
22883
|
+
<script type="module">
|
|
22884
|
+
document
|
|
22885
|
+
.getElementById("image-card")
|
|
22886
|
+
.addEventListener("lr-media-open", (e) => openLightbox(e.detail.src));
|
|
22887
|
+
document
|
|
22888
|
+
.getElementById("file-card")
|
|
22889
|
+
.addEventListener("lr-before-media-download", (e) => shouldUseNativeDownload || e.preventDefault());
|
|
22890
|
+
</script>
|
|
22357
22891
|
```
|
|
22358
22892
|
|
|
22359
22893
|
**Safe-URL checking.** `src` is validated by internal sink-specific helpers before it's
|
|
@@ -22394,8 +22928,8 @@ true}))` still invokes the anchor's native activation behavior if nothing calls
|
|
|
22394
22928
|
|
|
22395
22929
|
## `lr-attachment-trigger`
|
|
22396
22930
|
|
|
22397
|
-
A compact attach affordance designed for a chat composer's
|
|
22398
|
-
own `
|
|
22931
|
+
A compact attach affordance designed for a chat composer's start slot (see `lr-chat-composer`'s
|
|
22932
|
+
own `start` slot, which this drops straight into, though it has no code dependency on it). First-
|
|
22399
22933
|
party invention (no Web Awesome equivalent). Its shape adapts to how many attachment `capabilities`
|
|
22400
22934
|
are configured: exactly one renders a single plain icon button; more than one renders a small
|
|
22401
22935
|
anchored menu (composed from `lr-dropdown`/`lr-menu`/`lr-menu-item`) listing each
|
|
@@ -22453,10 +22987,13 @@ hidden via CSS by default, exposed as a part only so a consumer can override tha
|
|
|
22453
22987
|
**Optional peer deps:** none.
|
|
22454
22988
|
|
|
22455
22989
|
```html
|
|
22456
|
-
<lr-attachment-trigger
|
|
22457
|
-
|
|
22458
|
-
|
|
22459
|
-
|
|
22990
|
+
<lr-attachment-trigger accept=".pdf,.docx"></lr-attachment-trigger>
|
|
22991
|
+
<script type="module">
|
|
22992
|
+
const trigger = document.querySelector("lr-attachment-trigger");
|
|
22993
|
+
trigger.capabilities = ["files", "image", "camera"];
|
|
22994
|
+
trigger.addEventListener("lr-files", (e) => queueFiles(e.detail.capability, e.detail.files));
|
|
22995
|
+
trigger.addEventListener("lr-camera-request", openCameraFlow);
|
|
22996
|
+
</script>
|
|
22460
22997
|
```
|
|
22461
22998
|
|
|
22462
22999
|
**Known gotchas:**
|
|
@@ -22561,14 +23098,14 @@ variant's quiet tint.
|
|
|
22561
23098
|
<lr-avatar label="Assistant"><svg slot="icon" viewBox="0 0 24 24"><!-- role glyph --></svg></lr-avatar>
|
|
22562
23099
|
|
|
22563
23100
|
<!-- Far down a long list: defer the request, fall back to a glyph, and report a broken URL. -->
|
|
22564
|
-
<lr-avatar
|
|
22565
|
-
image="/users/7/photo.jpg"
|
|
22566
|
-
label="Ada Lovelace"
|
|
22567
|
-
loading="lazy"
|
|
22568
|
-
@lr-error=${(e) => reportBrokenAvatar(e.detail.image)}
|
|
22569
|
-
>
|
|
23101
|
+
<lr-avatar id="lazy-avatar" image="/users/7/photo.jpg" label="Ada Lovelace" loading="lazy">
|
|
22570
23102
|
<svg slot="icon" viewBox="0 0 24 24"><!-- fallback glyph --></svg>
|
|
22571
23103
|
</lr-avatar>
|
|
23104
|
+
<script type="module">
|
|
23105
|
+
document
|
|
23106
|
+
.getElementById("lazy-avatar")
|
|
23107
|
+
.addEventListener("lr-error", (e) => reportBrokenAvatar(e.detail.image));
|
|
23108
|
+
</script>
|
|
22572
23109
|
```
|
|
22573
23110
|
|
|
22574
23111
|
**Known gotchas:**
|
|
@@ -23147,7 +23684,9 @@ unsupported or unresolved targets report `false` through the return value and `l
|
|
|
23147
23684
|
`lr-rate-change` (`detail: { rate }`), `lr-cue-change`
|
|
23148
23685
|
(`detail: { readonly cueId, readonly index }`; `cueId` is `null` and `index` is `-1` when no cue is active),
|
|
23149
23686
|
`lr-highlight-activate` (`detail: { highlightId }`), `lr-anchor-result` (`detail: {
|
|
23150
|
-
found }`), `lr-search-change` (`detail: { query, matchCount, activeIndex }
|
|
23687
|
+
found }`), `lr-search-change` (`detail: { query, matchCount, matchCountExact, activeIndex }`;
|
|
23688
|
+
`matchCountExact` is always `true` — `search()` matches over the already-loaded `cues` array with no
|
|
23689
|
+
additional ceiling), and
|
|
23151
23690
|
`lr-render-error` (`detail: { error }`). The native `ended`, `error`, `loadedmetadata`, `pause`,
|
|
23152
23691
|
`play`, `timeupdate`, and `volumechange`
|
|
23153
23692
|
events are also relayed exactly once from the host as native `Event` instances. Like the original
|
|
@@ -23552,6 +24091,7 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
23552
24091
|
`setFlagUrlResolver(/* public names: value */): unknown`
|
|
23553
24092
|
|
|
23554
24093
|
- **`components-media-flag-language-map-contracts`** — Supporting data types and helpers for this component family.
|
|
24094
|
+
`alpha3ToAlpha2(/* public names: code */): unknown`
|
|
23555
24095
|
`languageToCountry(/* public names: language */): unknown`
|
|
23556
24096
|
`localeNativeName(/* public names: tag */): unknown`
|
|
23557
24097
|
|
|
@@ -23575,9 +24115,19 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
23575
24115
|
|
|
23576
24116
|
- **`components-media-map-map-loader-contracts`** — Supporting data types and helpers for this component family.
|
|
23577
24117
|
`loadMaplibre(): unknown`
|
|
24118
|
+
`MapLibreGeoJsonDiff {
|
|
24119
|
+
update: unknown;
|
|
24120
|
+
id: unknown;
|
|
24121
|
+
addOrUpdateProperties: unknown;
|
|
24122
|
+
key: unknown;
|
|
24123
|
+
value: unknown;
|
|
24124
|
+
removeProperties: unknown;
|
|
24125
|
+
}`
|
|
23578
24126
|
`MapLibreGeoJsonSource {
|
|
23579
24127
|
setData: unknown;
|
|
23580
24128
|
data: unknown;
|
|
24129
|
+
updateData: unknown;
|
|
24130
|
+
diff: unknown;
|
|
23581
24131
|
}`
|
|
23582
24132
|
`MapLibreMapCapability {
|
|
23583
24133
|
getCanvas: unknown;
|
|
@@ -23590,6 +24140,8 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
23590
24140
|
setZoom: unknown;
|
|
23591
24141
|
zoom: unknown;
|
|
23592
24142
|
resize: unknown;
|
|
24143
|
+
setMaxBounds: unknown;
|
|
24144
|
+
bounds: unknown;
|
|
23593
24145
|
remove: unknown;
|
|
23594
24146
|
on: unknown;
|
|
23595
24147
|
type: unknown;
|
|
@@ -23649,11 +24201,13 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
23649
24201
|
}`
|
|
23650
24202
|
|
|
23651
24203
|
- **`components-media-map-map-contracts`** — Supporting data types and helpers for this component family.
|
|
24204
|
+
`buildGeoJsonPropertyDiff(/* public names: previous, next */): unknown`
|
|
23652
24205
|
`LyraMapChoroplethLayer {
|
|
23653
24206
|
sourceId: unknown;
|
|
23654
24207
|
geojson: unknown;
|
|
23655
24208
|
field: unknown;
|
|
23656
24209
|
stops: unknown;
|
|
24210
|
+
interpolation: unknown;
|
|
23657
24211
|
}`
|
|
23658
24212
|
`LyraMapGeoJsonDataLayer {
|
|
23659
24213
|
sourceId: unknown;
|
|
@@ -23671,6 +24225,8 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
23671
24225
|
setZoom: unknown;
|
|
23672
24226
|
zoom: unknown;
|
|
23673
24227
|
resize: unknown;
|
|
24228
|
+
setMaxBounds: unknown;
|
|
24229
|
+
bounds: unknown;
|
|
23674
24230
|
}`
|
|
23675
24231
|
`LyraMapLegendEntry {
|
|
23676
24232
|
color: unknown;
|
|
@@ -23808,6 +24364,32 @@ property).
|
|
|
23808
24364
|
- `max: number | null = null`, `min: number | null = null` — finite value-axis bounds. They apply to
|
|
23809
24365
|
the cartesian value axis selected by `indexAxis`, or the radial `r` scale; non-finite writes are
|
|
23810
24366
|
omitted before Chart.js sees them
|
|
24367
|
+
- `annotations: readonly LyraChartAnnotation[] = []` (attribute: false) — declarative reference
|
|
24368
|
+
lines and shaded bands: a threshold, an event year, a regime change, a highlighted period.
|
|
24369
|
+
`LyraChartAnnotation { axis?: 'x' | 'y'; value?: number; from?: number; to?: number; label?:
|
|
24370
|
+
string; tone?: LyraVariant }` — `tone` is the shared `LyraVariant` vocabulary
|
|
24371
|
+
(`'neutral' | 'brand' | 'success' | 'warning' | 'danger'`), not a chart-local copy. A finite `value` renders
|
|
24372
|
+
a reference line on that axis; a finite `from`/`to` pair renders a band bounded on that axis and
|
|
24373
|
+
spanning the other. `axis` defaults to `'y'`. An entry with neither (or non-finite numbers) is
|
|
24374
|
+
dropped rather than handed to Chart.js; a reversed range is normalized. Labelled entries are
|
|
24375
|
+
included in the generated accessible description, mirroring `lr-heatmap` — the label is
|
|
24376
|
+
consumer-supplied text and so is not localized, and an unlabelled line has no nameable meaning to
|
|
24377
|
+
announce. Needs the optional `chartjs-plugin-annotation` peer, loaded on first actual demand, so a
|
|
24378
|
+
page with no annotated charts never downloads it; without it the chart still renders and a single
|
|
24379
|
+
console warning explains the no-op. The plugin is registered globally, like `chartjs-plugin-zoom`
|
|
24380
|
+
and unlike `chartjs-plugin-datalabels`: it draws nothing unless a chart supplies annotation
|
|
24381
|
+
options, so the registration is unobservable to charts that set none, and registration is also
|
|
24382
|
+
what installs the plugin's own element defaults
|
|
24383
|
+
- `scaleType: 'linear' | 'logarithmic' = 'linear'` (attribute `scale-type`, type
|
|
24384
|
+
`LyraChartScaleType`) — scale type for the **value** axis; the categorical axis is never
|
|
24385
|
+
affected. `'logarithmic'` plots data spanning several orders of magnitude (prices, latency
|
|
24386
|
+
percentiles, file sizes) honestly, where a linear axis collapses everything below the maximum
|
|
24387
|
+
into the baseline. Inherited by `lr-line-chart`, `lr-scatter-chart` and `lr-bar-chart`, and
|
|
24388
|
+
applied to the secondary `y2` axis too when one is present. A logarithmic axis cannot represent
|
|
24389
|
+
zero (`log(0)` is `-Infinity`), so `beginAtZero` is not forwarded in that mode and non-positive
|
|
24390
|
+
points are dropped by Chart.js's own log scale. Chart.js rejects an unregistered scale type at
|
|
24391
|
+
construction, so `LogarithmicScale` is registered with the core — it ships inside the `chart.js`
|
|
24392
|
+
module already loaded, adding no download weight
|
|
23811
24393
|
- `plugins: LyraChartPlugin[] = []` — peer-neutral per-instance Chart.js plugin structures,
|
|
23812
24394
|
combined without duplicates with Lyra's
|
|
23813
24395
|
on-demand data-label plugin and any `config.plugins` entries
|
|
@@ -23839,9 +24421,9 @@ property).
|
|
|
23839
24421
|
non-integer, negative, and out-of-range indexes are discarded. The component writes the accepted
|
|
23840
24422
|
legend-toggle snapshot back to this property so a host can persist it, and a programmatic write
|
|
23841
24423
|
reconciles Chart.js and the DOM legend silently without emitting either legend-visibility event.
|
|
23842
|
-
- `withoutLegend: boolean = false` (attribute `without-legend
|
|
23843
|
-
set this to hide it. Renders a wrapping DOM legend (when shown) whose keyboard-operable
|
|
23844
|
-
toggle dataset visibility. The DOM surface preserves long public labels that a canvas legend
|
|
24424
|
+
- `withoutLegend: boolean = false` (attribute `without-legend`, reflected) — the legend shows by
|
|
24425
|
+
default; set this to hide it. Renders a wrapping DOM legend (when shown) whose keyboard-operable
|
|
24426
|
+
buttons toggle dataset visibility. The DOM surface preserves long public labels that a canvas legend
|
|
23845
24427
|
would clip. Its pressed state follows `hiddenDatasets` whenever that controlled snapshot is
|
|
23846
24428
|
defined, otherwise the effective dataset's declarative `hidden` value before Chart.js is ready
|
|
23847
24429
|
and across chart type/plugin rebuilds.
|
|
@@ -23876,8 +24458,6 @@ property).
|
|
|
23876
24458
|
by radar/polar-area are out of scope)
|
|
23877
24459
|
- `withoutAnimation: boolean = false` (attribute `without-animation`, reflected) — disables Chart.js
|
|
23878
24460
|
construction animation; reduced-motion preference also disables it regardless of this value
|
|
23879
|
-
- `withoutLegend: boolean = false` (attribute `without-legend`, reflected) — hides the legend;
|
|
23880
|
-
it wins over the positive `legend` alias
|
|
23881
24461
|
- `withoutTooltip: boolean = false` (attribute `without-tooltip`, reflected) — disables the
|
|
23882
24462
|
Chart.js tooltip plugin for this instance
|
|
23883
24463
|
- `dataLabels: boolean = false` (attribute `data-labels`) — draws each point's value on the chart via
|
|
@@ -24111,7 +24691,7 @@ requested enhancement is disabled and a localized static `feature-warning` is vi
|
|
|
24111
24691
|
announced. In particular, unavailable data labels do not remove generated table totals.
|
|
24112
24692
|
|
|
24113
24693
|
```html
|
|
24114
|
-
<lr-chart type="line" x-label="Day" y-label="kWh"
|
|
24694
|
+
<lr-chart type="line" x-label="Day" y-label="kWh"></lr-chart>
|
|
24115
24695
|
<script>
|
|
24116
24696
|
const c = document.querySelector('lr-chart');
|
|
24117
24697
|
c.labels = ['Mon', 'Tue', 'Wed'];
|
|
@@ -24156,7 +24736,7 @@ announced. In particular, unavailable data labels do not remove generated table
|
|
|
24156
24736
|
off-screen, property changes that would otherwise trigger a Chart.js redraw are skipped (and a
|
|
24157
24737
|
single redraw fires once it re-enters the viewport). Independently, `updated()` only reaches
|
|
24158
24738
|
Chart.js when at least one of `type`, `labels`, `datasets`, `description`, `grid`, `indexAxis`,
|
|
24159
|
-
`label`, `hiddenDatasets`, `
|
|
24739
|
+
`label`, `hiddenDatasets`, `legendPosition`, `min`, `max`, `plugins`, the internal resolved auto legend
|
|
24160
24740
|
position, `valueFormatter`, `formatter`, `area`, `height`, `xLabel`, `yLabel`, `y2Label`, `beginAtZero`,
|
|
24161
24741
|
`stacked`, any `without*` control, `dataLabels`, `stackTotals`, `config`, the parsed
|
|
24162
24742
|
slotted config, `zoom`, `locale`, `strings`, or the internal loading state actually changed in
|
|
@@ -24263,11 +24843,21 @@ passthrough). Not a subclass of `LyraChart`.
|
|
|
24263
24843
|
- `valueAxisGutter?: number` (attribute `value-axis-gutter`) — value-axis gutter width.
|
|
24264
24844
|
- `barGapRatio?: number` (attribute `bar-gap-ratio`) — overrides the internal 0.2 `BAR_GROUP_GAP`
|
|
24265
24845
|
fraction of a category slot left as a gap between categories. Unset keeps the fixed 0.2.
|
|
24266
|
-
- `scale: 'linear' | 'sqrt' = 'linear'` (bar type only)
|
|
24267
|
-
`Math.sqrt(value / domainMax)` instead of the standard linear `niceDomain`
|
|
24268
|
-
`lr-heatmap`'s matrix-mode `sqrt` scale), so a skewed dataset's smaller bars
|
|
24269
|
-
by one dominant value; gridlines/tick labels stay on the linear
|
|
24270
|
-
ignores it entirely.
|
|
24846
|
+
- `scale: 'linear' | 'sqrt' | 'logarithmic' = 'linear'` — `'sqrt'` (**bar type only**) maps a bar's
|
|
24847
|
+
value to height via `Math.sqrt(value / domainMax)` instead of the standard linear `niceDomain`
|
|
24848
|
+
fraction (mirroring `lr-heatmap`'s matrix-mode `sqrt` scale), so a skewed dataset's smaller bars
|
|
24849
|
+
aren't washed out by one dominant value; under `'sqrt'` gridlines/tick labels stay on the linear
|
|
24850
|
+
domain and `type="line"` ignores it entirely.
|
|
24851
|
+
`'logarithmic'` is the base-10 value axis for data spanning several orders of magnitude, where a
|
|
24852
|
+
linear axis collapses everything below the maximum into the baseline. Unlike `'sqrt'` it applies
|
|
24853
|
+
to **bars, line points and gridlines alike**, since a log axis whose gridlines stayed linear
|
|
24854
|
+
would misrepresent the plot. Its lower bound is the smallest *positive* datum rather than the
|
|
24855
|
+
linear `lo`: `beginAtZero` defaults to true, so `lo` is normally `0`, which has no logarithm —
|
|
24856
|
+
deriving the floor from the data is what makes a 1…1000 series span three even decades instead of
|
|
24857
|
+
collapsing onto one. Values at or below that floor (including zero and negatives, which have no
|
|
24858
|
+
real logarithm) pin to the axis floor rather than producing `-Infinity` geometry, and a degenerate
|
|
24859
|
+
domain falls back to the linear fraction. `lr-chart`'s own `scaleType` is the Chart.js-backed
|
|
24860
|
+
equivalent for the full charts.
|
|
24271
24861
|
- `withoutValueAxis: boolean = false` (attribute `without-value-axis`) — suppresses gridlines and
|
|
24272
24862
|
value-axis tick labels; x-axis category labels remain.
|
|
24273
24863
|
- `selectedIndices: readonly number[] = []` (attribute: false) — applies to every interactive data mark for
|
|
@@ -24414,7 +25004,8 @@ and behavior there. **See `llms/components/lr-chart.md` for the details, code ex
|
|
|
24414
25004
|
of every entry in these lists.**
|
|
24415
25005
|
|
|
24416
25006
|
**Properties:** `description`, `grid`, `indexAxis` (`index-axis`), `label`, `hiddenDatasets`, `legendPosition`
|
|
24417
|
-
(`legend-position`), `max`, `min`, `plugins`, `
|
|
25007
|
+
(`legend-position`), `max`, `min`, `plugins`, `scaleType` (`scale-type`), `annotations`,
|
|
25008
|
+
`stacked`, `withoutAnimation` (`without-animation`),
|
|
24418
25009
|
`withoutLegend` (`without-legend`), `withoutTooltip` (`without-tooltip`), `xLabel` (`x-label`),
|
|
24419
25010
|
`yLabel` (`y-label`), plus additive `labels`, `datasets`, `valueFormatter`, `formatter`, `area`, `zoom`,
|
|
24420
25011
|
`height`, `y2Label` (`y2-label`), `beginAtZero` (`begin-at-zero`), `dataLabels`
|
|
@@ -24455,7 +25046,7 @@ together. The mirrored hooks are `--border-color-1`,
|
|
|
24455
25046
|
`zoom` is set, and `chartjs-plugin-datalabels` only once `data-labels`/`stack-totals` is set.
|
|
24456
25047
|
|
|
24457
25048
|
```html
|
|
24458
|
-
<lr-bar-chart
|
|
25049
|
+
<lr-bar-chart></lr-bar-chart>
|
|
24459
25050
|
<lr-pie-chart></lr-pie-chart>
|
|
24460
25051
|
<script>
|
|
24461
25052
|
document.querySelector('lr-bar-chart').labels = ['A', 'B'];
|
|
@@ -24487,6 +25078,8 @@ Bins `values` into `bins` equal-width buckets and renders as a bar chart (extend
|
|
|
24487
25078
|
- `seriesLabel: string = ''` (attribute `series-label`) — dataset label used for the
|
|
24488
25079
|
legend/tooltip/table; empty falls back to localized "Frequency". Inherited `label` keeps its
|
|
24489
25080
|
chart-wide accessible-name meaning.
|
|
25081
|
+
- inherits `lr-chart`'s full surface, including `scaleType` (`scale-type`) and `annotations` —
|
|
25082
|
+
a logarithmic frequency axis and threshold/band markers both apply to a histogram
|
|
24490
25083
|
- `labels`/`datasets`/`type` are **derived, read-only** (installed as getter/setter pairs on the
|
|
24491
25084
|
prototype; direct writes are silently ignored) — `labels`/`datasets` are computed from
|
|
24492
25085
|
`values`/`bins` (memoized per instance, keyed by reference equality on `values` plus the
|
|
@@ -24733,6 +25326,7 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
24733
25326
|
|
|
24734
25327
|
- **`components-charts-chart-chart-core-loader-contracts`** — Supporting data types and helpers for this component family.
|
|
24735
25328
|
`ChartJsModule {
|
|
25329
|
+
LogarithmicScale: unknown;
|
|
24736
25330
|
Chart: unknown;
|
|
24737
25331
|
defaults: unknown;
|
|
24738
25332
|
plugins: unknown;
|
|
@@ -24767,6 +25361,9 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
24767
25361
|
`ChartPluginCapability {
|
|
24768
25362
|
id: unknown;
|
|
24769
25363
|
}`
|
|
25364
|
+
`loadAnnotationPlugin(/* public names: importAnnotation */): unknown`
|
|
25365
|
+
`loadChartAndAnnotation(/* public names: loadChart, importAnnotation */): unknown`
|
|
25366
|
+
`loadChartJsWithAnnotationResult(/* public names: importAnnotation */): unknown`
|
|
24770
25367
|
|
|
24771
25368
|
- **`components-charts-chart-chart-legend-visibility-contracts`** — Supporting data types and helpers for this component family.
|
|
24772
25369
|
`LyraChartLegendVisibilityChangeDetail {
|
|
@@ -24801,6 +25398,14 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
24801
25398
|
|
|
24802
25399
|
- **`components-charts-chart-chart-contracts`** — Supporting data types and helpers for this component family.
|
|
24803
25400
|
`lockChartType(/* public names: ctor, value */): unknown`
|
|
25401
|
+
`LyraChartAnnotation {
|
|
25402
|
+
axis: unknown;
|
|
25403
|
+
value: unknown;
|
|
25404
|
+
from: unknown;
|
|
25405
|
+
to: unknown;
|
|
25406
|
+
label: unknown;
|
|
25407
|
+
tone: unknown;
|
|
25408
|
+
}`
|
|
24804
25409
|
`LyraChartArea {
|
|
24805
25410
|
top: unknown;
|
|
24806
25411
|
left: unknown;
|
|
@@ -25070,11 +25675,11 @@ entry) or a third-party PDF/office-doc viewer, but neither is a dependency of th
|
|
|
25070
25675
|
|
|
25071
25676
|
```html
|
|
25072
25677
|
<lr-document-preview
|
|
25678
|
+
id="text-preview"
|
|
25073
25679
|
filename="board-notes.txt"
|
|
25074
25680
|
mime-type="text/plain"
|
|
25075
25681
|
src="/files/board-notes.txt"
|
|
25076
25682
|
max-height="24rem"
|
|
25077
|
-
@lr-render-error=${(e) => console.error(e.detail.error)}
|
|
25078
25683
|
></lr-document-preview>
|
|
25079
25684
|
|
|
25080
25685
|
<!-- A host driving its own server-side conversion -->
|
|
@@ -25084,6 +25689,11 @@ entry) or a third-party PDF/office-doc viewer, but neither is a dependency of th
|
|
|
25084
25689
|
<lr-document-preview filename="deck.pptx" mime-type="application/vnd.ms-powerpoint" src="/files/deck.pptx">
|
|
25085
25690
|
<lr-code-block slot="unsupported" language="text">Open in PowerPoint to preview.</lr-code-block>
|
|
25086
25691
|
</lr-document-preview>
|
|
25692
|
+
<script type="module">
|
|
25693
|
+
document
|
|
25694
|
+
.getElementById("text-preview")
|
|
25695
|
+
.addEventListener("lr-render-error", (e) => console.error(e.detail.error));
|
|
25696
|
+
</script>
|
|
25087
25697
|
```
|
|
25088
25698
|
|
|
25089
25699
|
Accessibility: after the initial silent baseline, entering `"converting"` without numeric
|
|
@@ -25168,8 +25778,9 @@ value, without suppressing the visible `name` heading.
|
|
|
25168
25778
|
|
|
25169
25779
|
- `lr-close` — `detail: DocumentViewerCloseReason`, the viewer shell dialog's dismissal reason.
|
|
25170
25780
|
The event is emitted after the viewer sets `open` to `false`. A registered renderer may compose
|
|
25171
|
-
its own descendant dialog; closing that inner dialog keeps its
|
|
25172
|
-
does not close the document viewer.
|
|
25781
|
+
its own descendant dialog; closing that inner dialog keeps its own `lr-close` path — the shell
|
|
25782
|
+
guards on `event.target !== event.currentTarget` — and does not close the document viewer.
|
|
25783
|
+
(`<lr-dialog>`'s close event was spelled `lr-dialog-close` before 10.0.0.)
|
|
25173
25784
|
- `lr-download` — `detail: { src, filename }`, emitted when the native safe download action is
|
|
25174
25785
|
activated. The browser download itself is handled by the link.
|
|
25175
25786
|
- `lr-anchor-result` — `detail: { found }`. Emitted by this shell as `{ found: false }` once per
|
|
@@ -26002,7 +26613,9 @@ current page and
|
|
|
26002
26613
|
`zoom: number = 1` is clamped to `0.25`–`4`. `maxHeight: string = ''` (attribute `max-height`) is a
|
|
26003
26614
|
CSS length that, once set, overrides `--lr-pdf-viewer-height` — the block size of the virtualized
|
|
26004
26615
|
page list — declaratively, writing it inline on `[part="base"]`; invalid CSS `max-height` values,
|
|
26005
|
-
declaration breaks, and `url()` are ignored. `
|
|
26616
|
+
declaration breaks, and `url()` are ignored. `workerSrc: string = ''` (attribute `worker-src`) is the
|
|
26617
|
+
URL of the PDF.js web worker chunk — see **Configuring the PDF.js worker** below.
|
|
26618
|
+
`anchorKinds: readonly LyraAnchorKind[] = ['page',
|
|
26006
26619
|
'text-quote', 'region']` (this viewer's supported `LyraAnchor.kind` values for the shared
|
|
26007
26620
|
anchor-target contract). The other inherited anchor-target properties are `highlights:
|
|
26008
26621
|
LyraHighlight[] = []` (property only; reassign after mutation), `activeHighlightId: string | null =
|
|
@@ -26019,7 +26632,8 @@ nonnegative dimensions.
|
|
|
26019
26632
|
- `lr-load` — `detail: { pageCount }` — the document reached `ready`. `page` is reset to `1` first.
|
|
26020
26633
|
- `lr-page-change` — `detail: { page, pageCount }` — fired for scroll-driven page crossings as well
|
|
26021
26634
|
as `page` assignments and `nextPage()`/`previousPage()`/`goToPage()`.
|
|
26022
|
-
- `lr-zoom-change` — `detail: { zoom }
|
|
26635
|
+
- `lr-zoom-change` — `detail: { zoom }` — fired for `zoom` assignments as well as
|
|
26636
|
+
`zoomIn()`/`zoomOut()`. Never fired for the initial `1`, only for a transition away from it.
|
|
26023
26637
|
- `lr-search-change` — `detail: { query, matchCount, matchCountExact, activeIndex }` — from `search()`/`searchNext()`/
|
|
26024
26638
|
`searchPrevious()`/`clearSearch()` and effective-locale re-evaluation. A `src` change invalidates document-relative matches and emits
|
|
26025
26639
|
the canonical reset `{ query: '', matchCount: 0, matchCountExact: true, activeIndex: -1 }`.
|
|
@@ -26034,6 +26648,30 @@ nonnegative dimensions.
|
|
|
26034
26648
|
`pageViewerSnapshot` (`identity`, `status`, `page`, `pageCount`). `identity` changes for every load,
|
|
26035
26649
|
including same-count replacements.
|
|
26036
26650
|
|
|
26651
|
+
**`lr-page-change`/`lr-zoom-change` are state broadcasts, not user-intent signals.** This differs
|
|
26652
|
+
deliberately from the same-named `<lr-pagination>` event and from `<lr-pan-zoom>`'s `lr-zoom-change`,
|
|
26653
|
+
and the distinction is worth internalizing before wiring a handler. Pagination and pan-zoom are
|
|
26654
|
+
*controlled*: pagination never mutates its own `page`, so its event is a request the host applies,
|
|
26655
|
+
and pan-zoom's `zoom` is bound by a parent, so echoing a programmatic write back would feed a loop.
|
|
26656
|
+
This viewer instead *owns* `page` and `zoom` — scrolling the page list changes `page` with no
|
|
26657
|
+
consumer action at all — so there is no useful "the user did this" subset to isolate, and every
|
|
26658
|
+
accepted transition is announced identically: scrolling, `nextPage()`/`previousPage()`/`goToPage()`,
|
|
26659
|
+
`zoomIn()`/`zoomOut()`, anchor resolution, the reset to page 1 when a new `src` finishes loading,
|
|
26660
|
+
and a plain `viewer.page = 3` / `viewer.zoom = 2` assignment. A handler that mirrors the event back
|
|
26661
|
+
into the property it came from is therefore idempotent rather than looping, but it is also
|
|
26662
|
+
redundant — read the property, or `pageViewerSnapshot`, instead.
|
|
26663
|
+
|
|
26664
|
+
A write that clamps or rounds back onto the value already in effect is not a transition and stays
|
|
26665
|
+
silent: on a 3-page document already showing page 1, `viewer.page = -7` and `viewer.page = 1.4` both
|
|
26666
|
+
settle on page 1 and emit nothing, and `viewer.zoom = 999` at 4× emits nothing.
|
|
26667
|
+
|
|
26668
|
+
For page-addressed integrations prefer the atomic `pageViewerSnapshot` /
|
|
26669
|
+
`lr-page-viewer-state-change` channel over this pair: it carries page, count, load status and
|
|
26670
|
+
document `identity` together, and a late subscriber can read the current value synchronously instead
|
|
26671
|
+
of having missed the announcement. `<lr-page-rail>` binds that channel for any viewer exposing
|
|
26672
|
+
`pageViewerSnapshot` — including this one — and falls back to `lr-load`/`lr-page-change` only for
|
|
26673
|
+
older structural sources that do not.
|
|
26674
|
+
|
|
26037
26675
|
**Methods:** `nextPage()`, `previousPage()`, `zoomIn()`, and `zoomOut()` update the corresponding
|
|
26038
26676
|
controlled state within its supported range. `getPageText(page)` resolves the raw reading-order text
|
|
26039
26677
|
of one page (per-page LRU-cached, 64 pages), rejecting on no loaded document or an out-of-range page.
|
|
@@ -26091,6 +26729,39 @@ a PDF is opened. An absent `pdfjs-dist` fails closed and renders
|
|
|
26091
26729
|
`[part="error"]` with the localized `pdfViewerMissingLibrary` message — there is no partial PDF
|
|
26092
26730
|
rendering without it.
|
|
26093
26731
|
|
|
26732
|
+
**Configuring the PDF.js worker.** PDF.js renders in a web worker and rejects every document with
|
|
26733
|
+
`No "GlobalWorkerOptions.workerSrc" specified.` until it has been told where that worker lives. The
|
|
26734
|
+
worker is a separate file inside the peer (`pdfjs-dist/build/pdf.worker.min.mjs`) that only the
|
|
26735
|
+
application's own bundler can turn into a real URL — a bare package specifier does not resolve in a
|
|
26736
|
+
browser without an import map, and resolving it against this library's own module URL would point
|
|
26737
|
+
into `@aceshooting/lyra-ui`'s files, where no worker exists. So a bundled application supplies it,
|
|
26738
|
+
either way round:
|
|
26739
|
+
|
|
26740
|
+
```ts
|
|
26741
|
+
// 1. Per element, through the public property/attribute.
|
|
26742
|
+
import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?worker&url'; // Vite; see your bundler
|
|
26743
|
+
const viewer = document.querySelector('lr-pdf-viewer');
|
|
26744
|
+
viewer.workerSrc = workerUrl;
|
|
26745
|
+
// or, declaratively: <lr-pdf-viewer worker-src="/assets/pdf.worker.min.mjs"></lr-pdf-viewer>
|
|
26746
|
+
|
|
26747
|
+
// 2. Once for the whole application, on PDF.js's own singleton, before any viewer loads a document.
|
|
26748
|
+
import { GlobalWorkerOptions } from 'pdfjs-dist';
|
|
26749
|
+
GlobalWorkerOptions.workerSrc = workerUrl;
|
|
26750
|
+
```
|
|
26751
|
+
|
|
26752
|
+
`workerSrc` accepts a document-relative URL (resolved against the document base) as well as an
|
|
26753
|
+
absolute one; only `http:`, `https:`, `blob:` and `file:` URLs are accepted, and anything else — a
|
|
26754
|
+
`javascript:` or `data:` URL in particular — is ignored rather than handed to `new Worker()`.
|
|
26755
|
+
|
|
26756
|
+
`GlobalWorkerOptions` is PDF.js's process-wide singleton and the PDF.js module itself is loaded once
|
|
26757
|
+
per page, so `workerSrc` is applied only while that singleton is still unset. Two consequences worth
|
|
26758
|
+
knowing before reaching for the per-element form: a worker the application configured itself is never
|
|
26759
|
+
overwritten, and when several viewers carry different `workerSrc` values only the first one to load
|
|
26760
|
+
PDF.js takes effect for the whole page. Assigning `workerSrc` after PDF.js has already loaded is not
|
|
26761
|
+
silently dropped — it is re-applied on the next load — but it still cannot displace an
|
|
26762
|
+
already-configured worker. Option 2 above is the right choice for an application that wants one
|
|
26763
|
+
explicit worker everywhere.
|
|
26764
|
+
|
|
26094
26765
|
Remote resources are capped at 25 MB; exceeding it surfaces the localized
|
|
26095
26766
|
`documentPreviewResourceTooLarge` message instead of the PDF.
|
|
26096
26767
|
|
|
@@ -26530,9 +27201,12 @@ each tone's highlighted-cell background. `--lr-notebook-viewer-highlight-active-
|
|
|
26530
27201
|
`text/plain`).
|
|
26531
27202
|
|
|
26532
27203
|
```html
|
|
26533
|
-
<lr-notebook-viewer
|
|
26534
|
-
|
|
26535
|
-
|
|
27204
|
+
<lr-notebook-viewer max-height="30rem"></lr-notebook-viewer>
|
|
27205
|
+
<script type="module">
|
|
27206
|
+
const viewer = document.querySelector("lr-notebook-viewer");
|
|
27207
|
+
viewer.notebook = result;
|
|
27208
|
+
viewer.addEventListener("lr-load", (e) => console.log(e.detail.cellCount, "cells"));
|
|
27209
|
+
</script>
|
|
26536
27210
|
```
|
|
26537
27211
|
|
|
26538
27212
|
A notebook major version outside 4.0–4.5, an invalid shape, or more than 2,000 cells renders a
|
|
@@ -27152,6 +27826,79 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
27152
27826
|
children: unknown;
|
|
27153
27827
|
}`
|
|
27154
27828
|
|
|
27829
|
+
- **`components-viewers-pptx-viewer-pptx-loader-contracts`** — Supporting data types and helpers for this component family.
|
|
27830
|
+
`adaptPptxViewer(/* public names: value */): unknown`
|
|
27831
|
+
`getPptxRenderer(): unknown`
|
|
27832
|
+
`loadPptxRenderer(/* public names: importer */): unknown`
|
|
27833
|
+
`PptxRendererModule {
|
|
27834
|
+
PptxViewer: unknown;
|
|
27835
|
+
open: unknown;
|
|
27836
|
+
input: unknown;
|
|
27837
|
+
container: unknown;
|
|
27838
|
+
options: unknown;
|
|
27839
|
+
RECOMMENDED_ZIP_LIMITS: unknown;
|
|
27840
|
+
}`
|
|
27841
|
+
`PptxSearchHighlightHandle {
|
|
27842
|
+
dispose: unknown;
|
|
27843
|
+
}`
|
|
27844
|
+
`PptxTextSearchResult {
|
|
27845
|
+
slideIndex: unknown;
|
|
27846
|
+
nodeId: unknown;
|
|
27847
|
+
matchStart: unknown;
|
|
27848
|
+
matchEnd: unknown;
|
|
27849
|
+
text: unknown;
|
|
27850
|
+
}`
|
|
27851
|
+
`PptxThumbnailHandle {
|
|
27852
|
+
ready: unknown;
|
|
27853
|
+
dispose: unknown;
|
|
27854
|
+
}`
|
|
27855
|
+
`PptxViewerAdapter {
|
|
27856
|
+
slideCount: unknown;
|
|
27857
|
+
currentSlideIndex: unknown;
|
|
27858
|
+
goToSlide: unknown;
|
|
27859
|
+
index: unknown;
|
|
27860
|
+
searchText: unknown;
|
|
27861
|
+
query: unknown;
|
|
27862
|
+
options: unknown;
|
|
27863
|
+
matchCase: unknown;
|
|
27864
|
+
highlightSearchResult: unknown;
|
|
27865
|
+
result: unknown;
|
|
27866
|
+
scrollIntoView: unknown;
|
|
27867
|
+
renderThumbnailToContainer: unknown;
|
|
27868
|
+
container: unknown;
|
|
27869
|
+
width: unknown;
|
|
27870
|
+
clearSearchHighlights: unknown;
|
|
27871
|
+
subscribe: unknown;
|
|
27872
|
+
listener: unknown;
|
|
27873
|
+
event: unknown;
|
|
27874
|
+
destroy: unknown;
|
|
27875
|
+
}`
|
|
27876
|
+
`PptxViewerApi {
|
|
27877
|
+
slideCount: unknown;
|
|
27878
|
+
currentSlideIndex: unknown;
|
|
27879
|
+
goToSlide: unknown;
|
|
27880
|
+
index: unknown;
|
|
27881
|
+
searchText: unknown;
|
|
27882
|
+
query: unknown;
|
|
27883
|
+
options: unknown;
|
|
27884
|
+
matchCase: unknown;
|
|
27885
|
+
highlightSearchResult: unknown;
|
|
27886
|
+
result: unknown;
|
|
27887
|
+
scrollIntoView: unknown;
|
|
27888
|
+
renderThumbnailToContainer: unknown;
|
|
27889
|
+
container: unknown;
|
|
27890
|
+
width: unknown;
|
|
27891
|
+
clearSearchHighlights: unknown;
|
|
27892
|
+
destroy: unknown;
|
|
27893
|
+
}`
|
|
27894
|
+
`PptxZipLimits {
|
|
27895
|
+
maxEntries: unknown;
|
|
27896
|
+
maxEntryUncompressedBytes: unknown;
|
|
27897
|
+
maxTotalUncompressedBytes: unknown;
|
|
27898
|
+
maxMediaBytes: unknown;
|
|
27899
|
+
maxConcurrency: unknown;
|
|
27900
|
+
}`
|
|
27901
|
+
|
|
27155
27902
|
- **`components-viewers-spreadsheet-viewer-spreadsheet-loader-contracts`** — Supporting data types and helpers for this component family.
|
|
27156
27903
|
`clearSheetJsCache(): unknown`
|
|
27157
27904
|
`loadSheetJsCached(): unknown`
|
|
@@ -27464,8 +28211,9 @@ support (`highlights`, `activeHighlightId`, `scrollToAnchor()`, the `lr-highligh
|
|
|
27464
28211
|
section above for the full write-up of shared behavior.
|
|
27465
28212
|
|
|
27466
28213
|
**Properties:** `content: string = ''`, `tabSize: number = 4` (attribute `tab-size`) — the same
|
|
27467
|
-
finite-integer-guarded leading-indentation expansion used by `<lr-markdown>`; values
|
|
27468
|
-
|
|
28214
|
+
finite-integer-guarded leading-indentation expansion used by `<lr-markdown>`; finite values are
|
|
28215
|
+
clamped to `[1, 32]` (`0` becomes `1`, `33` becomes `32`), and only non-finite values (`NaN`,
|
|
28216
|
+
`Infinity`) fall back to `4`, independently of rendered code's
|
|
27469
28217
|
`--lr-code-block-tab-size`; `marked: LyraMarkedParser | undefined` (readonly, no attribute) — this
|
|
27470
28218
|
instance's isolated peer-neutral configurable parser; `htmlMode: 'sanitize' | 'escape' | 'trusted' =
|
|
27471
28219
|
'sanitize'` (attribute `html-mode`), `gfm: boolean = true`, `linkTarget: string | null = '_blank'` (attribute
|
|
@@ -28204,13 +28952,16 @@ Plus shared tokens — `--lr-space-xs/-s/-m`, `--lr-radius`,
|
|
|
28204
28952
|
conversation-id="sess_123"
|
|
28205
28953
|
label="Q3 roadmap planning"
|
|
28206
28954
|
excerpt="Let's revisit the timeline for the launch…"
|
|
28207
|
-
.timestamp=${session.updatedAt}
|
|
28208
|
-
?active=${session.id === currentSessionId}
|
|
28209
|
-
@lr-select=${(e) => openSession(e.detail.conversationId)}
|
|
28210
|
-
@lr-rename=${(e) => renameSession(e.detail.conversationId, e.detail.label)}
|
|
28211
28955
|
>
|
|
28212
28956
|
<button slot="actions" aria-label="Delete conversation">✕</button>
|
|
28213
28957
|
</lr-conversation-item>
|
|
28958
|
+
<script type="module">
|
|
28959
|
+
const item = document.querySelector("lr-conversation-item");
|
|
28960
|
+
item.timestamp = session.updatedAt;
|
|
28961
|
+
item.active = session.id === currentSessionId;
|
|
28962
|
+
item.addEventListener("lr-select", (e) => openSession(e.detail.conversationId));
|
|
28963
|
+
item.addEventListener("lr-rename", (e) => renameSession(e.detail.conversationId, e.detail.label));
|
|
28964
|
+
</script>
|
|
28214
28965
|
```
|
|
28215
28966
|
|
|
28216
28967
|
`role="button"` lives on `[part="select-button"]`, so the row has
|
|
@@ -28459,19 +29210,18 @@ shared tokens — `--lr-space-xs/-s`, `--lr-color-border/-surface/-brand/-brand-
|
|
|
28459
29210
|
**Optional peer deps:** none.
|
|
28460
29211
|
|
|
28461
29212
|
```html
|
|
28462
|
-
<lr-model-select
|
|
28463
|
-
provider="openai"
|
|
28464
|
-
.catalog=${[
|
|
28465
|
-
{ id: 'gpt-4o', label: 'GPT-4o', icon: '✦' },
|
|
28466
|
-
{ id: 'gpt-4o-mini', label: 'GPT-4o mini' },
|
|
28467
|
-
]}
|
|
28468
|
-
value="gpt-4o"
|
|
28469
|
-
placeholder="Choose a model…"
|
|
28470
|
-
@lr-change=${(e) => setModel(e.detail.value, e.detail.inCatalog)}
|
|
28471
|
-
></lr-model-select>
|
|
29213
|
+
<lr-model-select provider="openai" value="gpt-4o" placeholder="Choose a model…"></lr-model-select>
|
|
28472
29214
|
|
|
28473
29215
|
<!-- No fixed catalog yet: falls back to free-text entry -->
|
|
28474
29216
|
<lr-model-select provider="ollama" placeholder="Type a model id…" allow-custom></lr-model-select>
|
|
29217
|
+
<script type="module">
|
|
29218
|
+
const select = document.querySelector("lr-model-select");
|
|
29219
|
+
select.catalog = [
|
|
29220
|
+
{ id: "gpt-4o", label: "GPT-4o", icon: "✦" },
|
|
29221
|
+
{ id: "gpt-4o-mini", label: "GPT-4o mini" },
|
|
29222
|
+
];
|
|
29223
|
+
select.addEventListener("lr-change", (e) => setModel(e.detail.value, e.detail.inCatalog));
|
|
29224
|
+
</script>
|
|
28475
29225
|
```
|
|
28476
29226
|
|
|
28477
29227
|
**Known gotchas:**
|
|
@@ -29049,15 +29799,15 @@ selector label), `temperature-row`, `temperature-label`, `temperature-value`
|
|
|
29049
29799
|
internally (both imported unconditionally as side effects, not optional).
|
|
29050
29800
|
|
|
29051
29801
|
```html
|
|
29052
|
-
<lr-model-settings-panel
|
|
29053
|
-
provider="OpenAI"
|
|
29054
|
-
.catalog=${['gpt-4o', 'gpt-4o-mini', 'gpt-4.1']}
|
|
29055
|
-
model="gpt-4o"
|
|
29056
|
-
temperature="0.7"
|
|
29057
|
-
@lr-change=${(e) => console.log(e.detail)}
|
|
29058
|
-
></lr-model-settings-panel>
|
|
29802
|
+
<lr-model-settings-panel provider="OpenAI" model="gpt-4o" temperature="0.7"></lr-model-settings-panel>
|
|
29059
29803
|
|
|
29060
|
-
<lr-model-settings-panel layout="compact"
|
|
29804
|
+
<lr-model-settings-panel layout="compact"></lr-model-settings-panel>
|
|
29805
|
+
<script type="module">
|
|
29806
|
+
const [panel, compactPanel] = document.querySelectorAll("lr-model-settings-panel");
|
|
29807
|
+
panel.catalog = ["gpt-4o", "gpt-4o-mini", "gpt-4.1"];
|
|
29808
|
+
panel.addEventListener("lr-change", (e) => console.log(e.detail));
|
|
29809
|
+
compactPanel.catalog = catalog;
|
|
29810
|
+
</script>
|
|
29061
29811
|
```
|
|
29062
29812
|
|
|
29063
29813
|
The internal `lr-slider` renders with its own value readout suppressed (`.showValue=${false}`);
|
|
@@ -29483,13 +30233,18 @@ component's existing requirement of a height-bounded parent, exactly as slotted
|
|
|
29483
30233
|
inline style) still wins over the built-in one.
|
|
29484
30234
|
|
|
29485
30235
|
```html
|
|
29486
|
-
<lr-chat-viewport unread-start-index="12"
|
|
30236
|
+
<lr-chat-viewport unread-start-index="12">
|
|
29487
30237
|
<lr-chat-message message-role="user">…</lr-chat-message>
|
|
29488
30238
|
<lr-chat-message message-role="assistant" status="streaming">
|
|
29489
|
-
<lr-streaming-text streaming
|
|
30239
|
+
<lr-streaming-text streaming></lr-streaming-text>
|
|
29490
30240
|
</lr-chat-message>
|
|
29491
30241
|
</lr-chat-viewport>
|
|
29492
30242
|
<lr-chat-composer status="streaming"></lr-chat-composer>
|
|
30243
|
+
<script type="module">
|
|
30244
|
+
const viewport = document.querySelector("lr-chat-viewport");
|
|
30245
|
+
viewport.querySelector("lr-streaming-text").content = partial;
|
|
30246
|
+
viewport.addEventListener("lr-follow-change", (e) => console.log(e.detail.following));
|
|
30247
|
+
</script>
|
|
29493
30248
|
```
|
|
29494
30249
|
|
|
29495
30250
|
## `lr-suggestion-chips`
|
|
@@ -29537,9 +30292,14 @@ Enter/Space activate. Renders inside an internal `lr-scroller` (`orientation="ho
|
|
|
29537
30292
|
`hide-scrollbar`) unless `wrap` is set.
|
|
29538
30293
|
|
|
29539
30294
|
```html
|
|
29540
|
-
<lr-suggestion-chips
|
|
29541
|
-
@lr-suggestion-select=${(e) => (composer.value = e.detail.label)}></lr-suggestion-chips>
|
|
30295
|
+
<lr-suggestion-chips></lr-suggestion-chips>
|
|
29542
30296
|
<lr-chat-composer></lr-chat-composer>
|
|
30297
|
+
<script type="module">
|
|
30298
|
+
const chips = document.querySelector("lr-suggestion-chips");
|
|
30299
|
+
const composer = document.querySelector("lr-chat-composer");
|
|
30300
|
+
chips.suggestions = followUps;
|
|
30301
|
+
chips.addEventListener("lr-suggestion-select", (e) => (composer.value = e.detail.label));
|
|
30302
|
+
</script>
|
|
29543
30303
|
```
|
|
29544
30304
|
|
|
29545
30305
|
## `lr-thread-list`
|
|
@@ -29722,14 +30482,14 @@ short one, and falls back to exactly `24rem` in an auto-height container.
|
|
|
29722
30482
|
style the pinned band with `lr-thread-list::part(group-sticky)`.
|
|
29723
30483
|
|
|
29724
30484
|
```html
|
|
29725
|
-
<lr-thread-list
|
|
29726
|
-
|
|
29727
|
-
|
|
29728
|
-
.threads
|
|
29729
|
-
|
|
29730
|
-
.rowActions
|
|
29731
|
-
|
|
29732
|
-
|
|
30485
|
+
<lr-thread-list searchable sticky-groups></lr-thread-list>
|
|
30486
|
+
<script type="module">
|
|
30487
|
+
const list = document.querySelector("lr-thread-list");
|
|
30488
|
+
list.threads = threads;
|
|
30489
|
+
list.activeConversationId = activeThreadId;
|
|
30490
|
+
list.rowActions = ["pin", "archive", "delete"];
|
|
30491
|
+
list.addEventListener("lr-select", (e) => openThread(e.detail.conversationId));
|
|
30492
|
+
</script>
|
|
29733
30493
|
```
|
|
29734
30494
|
|
|
29735
30495
|
Composed with `lr-multi-split` (or `lr-app-rail` + `lr-responsive-panel`): thread-list in the start
|
|
@@ -29778,8 +30538,12 @@ assigned to `animation-duration` alone. The spinner stops outright under
|
|
|
29778
30538
|
`prefers-reduced-motion: reduce`.
|
|
29779
30539
|
|
|
29780
30540
|
```html
|
|
29781
|
-
<lr-checkpoint checkpoint-id="ck_18" label="Before refactor"
|
|
29782
|
-
|
|
30541
|
+
<lr-checkpoint checkpoint-id="ck_18" label="Before refactor"></lr-checkpoint>
|
|
30542
|
+
<script type="module">
|
|
30543
|
+
const checkpoint = document.querySelector("lr-checkpoint");
|
|
30544
|
+
checkpoint.timestamp = t;
|
|
30545
|
+
checkpoint.addEventListener("lr-restore", (e) => restoreTo(e.detail.checkpointId));
|
|
30546
|
+
</script>
|
|
29783
30547
|
```
|
|
29784
30548
|
|
|
29785
30549
|
## `lr-usage-badge`
|
|
@@ -29822,8 +30586,11 @@ describable), `summary`, `tokens-in`, `tokens-out`, `cost`, `latency`, `tooltip`
|
|
|
29822
30586
|
cost-text="$0.012"
|
|
29823
30587
|
latency-ms="2350"
|
|
29824
30588
|
></lr-usage-badge>
|
|
29825
|
-
<lr-markdown
|
|
30589
|
+
<lr-markdown></lr-markdown>
|
|
29826
30590
|
</lr-chat-message>
|
|
30591
|
+
<script type="module">
|
|
30592
|
+
document.querySelector("lr-chat-message lr-markdown").content = answer;
|
|
30593
|
+
</script>
|
|
29827
30594
|
```
|
|
29828
30595
|
|
|
29829
30596
|
## `lr-widget-renderer`
|
|
@@ -29857,9 +30624,9 @@ readonly slot?: string; readonly actionId?: string; readonly payload?: unknown }
|
|
|
29857
30624
|
- `LyraWidgetDocument { readonly version: '2'; readonly root: LyraWidgetNode }` — the sole versioned tree source.
|
|
29858
30625
|
- `createWidgetDocument(root: LyraWidgetNode): LyraWidgetDocument` — creates an immediate frozen
|
|
29859
30626
|
version-two snapshot for former unversioned tree assignments. Traversal uses the renderer's depth,
|
|
29860
|
-
node,
|
|
29861
|
-
`TypeError`. Node records, child arrays, and prop records are copied and frozen,
|
|
29862
|
-
values and action payloads intentionally retain caller identity.
|
|
30627
|
+
node, per-node prop, and per-string length ceilings; malformed, cyclic, duplicate-id, or hostile
|
|
30628
|
+
structure throws `TypeError`. Node records, child arrays, and prop records are copied and frozen,
|
|
30629
|
+
while opaque prop values and action payloads intentionally retain caller identity.
|
|
29863
30630
|
|
|
29864
30631
|
The package root and the normal `widget-renderer.js` registration entry expose the renderer
|
|
29865
30632
|
`LyraWidgetRenderer`/`LyraWidgetRendererEventMap` together with the complete stable authoring
|
|
@@ -30126,15 +30893,18 @@ stale-value row), `option-preview` (a pointer-only per-row preview icon, `tabind
|
|
|
30126
30893
|
trigger), `expand-icon`, `empty`, `hint`, `error`.
|
|
30127
30894
|
|
|
30128
30895
|
```html
|
|
30129
|
-
<lr-voice-picker provider="elevenlabs"
|
|
30130
|
-
|
|
30131
|
-
|
|
30896
|
+
<lr-voice-picker provider="elevenlabs" allow-custom></lr-voice-picker>
|
|
30897
|
+
<script type="module">
|
|
30898
|
+
const picker = document.querySelector("lr-voice-picker");
|
|
30899
|
+
picker.catalog = voices;
|
|
30900
|
+
picker.addEventListener("lr-change", (e) => setVoice(e.detail.value));
|
|
30901
|
+
picker.addEventListener("lr-preview-request", (e) => {
|
|
30132
30902
|
if (!e.detail.previewUrl) {
|
|
30133
30903
|
e.preventDefault();
|
|
30134
30904
|
playSample(e.detail.voiceId);
|
|
30135
30905
|
}
|
|
30136
|
-
}
|
|
30137
|
-
|
|
30906
|
+
});
|
|
30907
|
+
</script>
|
|
30138
30908
|
```
|
|
30139
30909
|
|
|
30140
30910
|
**Known gotchas:**
|
|
@@ -30280,6 +31050,26 @@ optional-peer fallback.
|
|
|
30280
31050
|
Every public data/value property is controlled: forwarded child intents bubble without mutating
|
|
30281
31051
|
`messages`, `composerValue`, selections, run state, or persistence-owned data inside the shell.
|
|
30282
31052
|
|
|
31053
|
+
**Only the transcript scrolls.** `[part='base']` is a three-row grid — header, conversation,
|
|
31054
|
+
composer — and only the middle row can shrink, so the composed `lr-chat-viewport` owns the
|
|
31055
|
+
scrolling and the chrome rows stay put at their content size. The trade: give the workspace less
|
|
31056
|
+
block-size than the chrome needs and the conversation row collapses to zero first, after which the
|
|
31057
|
+
header or composer is clipped with no scrollbar. That takes unusually large slotted chrome — a very
|
|
31058
|
+
tall `header-actions` toolbar, or a `composer` replacement much taller than the built-in one — and
|
|
31059
|
+
the region that supplied it caps and scrolls itself through the public parts:
|
|
31060
|
+
|
|
31061
|
+
```css
|
|
31062
|
+
lr-agent-workspace::part(header) {
|
|
31063
|
+
max-block-size: 4rem;
|
|
31064
|
+
overflow: auto;
|
|
31065
|
+
}
|
|
31066
|
+
```
|
|
31067
|
+
|
|
31068
|
+
The same applies to `::part(composer)`. Both declarations are needed: the cap keeps the grid track
|
|
31069
|
+
inside the workspace, and `overflow` makes the capped region scrollable instead of spilling. No
|
|
31070
|
+
component-owned custom property duplicates this, because a `::part()` rule from your tree already
|
|
31071
|
+
wins over the shadow stylesheet regardless of specificity.
|
|
31072
|
+
|
|
30283
31073
|
## `lr-message-parts`
|
|
30284
31074
|
|
|
30285
31075
|
Ordered renderer for provider-neutral `MessagePart[]`: text, reasoning, tool call/result, citation,
|
|
@@ -30341,7 +31131,8 @@ import "@aceshooting/lyra-ui/components/conversation/message-parts/message-parts
|
|
|
30341
31131
|
- `lr-copy` event — Passthrough from rendered JSON content.
|
|
30342
31132
|
- `lr-highlight-activate` event — Passthrough from rendered Markdown.
|
|
30343
31133
|
- `lr-link-click` event — Passthrough from rendered Markdown.
|
|
30344
|
-
- `lr-preview-request` event —
|
|
31134
|
+
- `lr-preview-request` event — Passthrough from a rendered attachment. Not cancelable as of 10.0.0:
|
|
31135
|
+
`<lr-attachment-chip>` dropped the flag, since it owns no preview default action to veto.
|
|
30345
31136
|
- `lr-remove` event — Passthrough from a rendered attachment.
|
|
30346
31137
|
- `lr-render-error` event — Passthrough from rendered Markdown, tool-result, or widget content.
|
|
30347
31138
|
- `lr-retry` event — Passthrough from a rendered attachment.
|
|
@@ -30590,6 +31381,7 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
30590
31381
|
- **`components-conversation-code-block-code-loader-contracts`** — Supporting data types and helpers for this component family.
|
|
30591
31382
|
`loadShikiHighlighter(): unknown`
|
|
30592
31383
|
`loadShikiLanguage(/* public names: hl, lang */): unknown`
|
|
31384
|
+
`shikiHasLoadedLanguage(/* public names: hl, lang */): unknown`
|
|
30593
31385
|
|
|
30594
31386
|
- **`components-conversation-code-block-shiki-types-contracts`** — Supporting data types and helpers for this component family.
|
|
30595
31387
|
`loadShikiHighlighterCore(/* public names: languages */): unknown`
|
|
@@ -30940,11 +31732,15 @@ referenced: `--lr-color-text-quiet`, `--lr-color-surface`, `--lr-color-border`,
|
|
|
30940
31732
|
summary="Searching web…"
|
|
30941
31733
|
duration-ms="820"
|
|
30942
31734
|
call-id="call_123"
|
|
30943
|
-
@lr-tool-call-chip-select=${(e) => openDetail(e.detail.callId)}
|
|
30944
31735
|
>
|
|
30945
31736
|
<pre slot="icon" style="display:none"></pre>
|
|
30946
31737
|
<code>{"query": "lyra ui components"}</code>
|
|
30947
31738
|
</lr-tool-call-chip>
|
|
31739
|
+
<script type="module">
|
|
31740
|
+
document
|
|
31741
|
+
.querySelector("lr-tool-call-chip")
|
|
31742
|
+
.addEventListener("lr-tool-call-chip-select", (e) => openDetail(e.detail.callId));
|
|
31743
|
+
</script>
|
|
30948
31744
|
```
|
|
30949
31745
|
|
|
30950
31746
|
The default slot's tooltip is positioned with the same `internal/positioner.js` `place()` helper
|
|
@@ -31036,12 +31832,13 @@ of course pull in whatever they need (a charting library, a markdown renderer),
|
|
|
31036
31832
|
the lazy `load()` path in the registry exists for.
|
|
31037
31833
|
|
|
31038
31834
|
```html
|
|
31039
|
-
<lr-tool-result-view
|
|
31040
|
-
|
|
31041
|
-
|
|
31042
|
-
.
|
|
31043
|
-
|
|
31044
|
-
|
|
31835
|
+
<lr-tool-result-view tool-name="get_weather"></lr-tool-result-view>
|
|
31836
|
+
<script type="module">
|
|
31837
|
+
const view = document.querySelector("lr-tool-result-view");
|
|
31838
|
+
view.result = { tempC: 21, condition: "cloudy" };
|
|
31839
|
+
view.args = { city: "Brussels" };
|
|
31840
|
+
view.addEventListener("lr-render-error", (e) => console.warn("renderer failed", e.detail));
|
|
31841
|
+
</script>
|
|
31045
31842
|
```
|
|
31046
31843
|
|
|
31047
31844
|
### `registerToolRenderer()` and the tool-renderer registry (`registry.ts`)
|
|
@@ -31255,20 +32052,22 @@ tokens `--lr-color-surface/-border/-text-quiet/-brand/-brand-quiet/-success/-suc
|
|
|
31255
32052
|
**Optional peer deps:** none.
|
|
31256
32053
|
|
|
31257
32054
|
```html
|
|
31258
|
-
<lr-tool-result-dialog
|
|
31259
|
-
tool-name="run_query"
|
|
31260
|
-
status="success"
|
|
31261
|
-
duration-ms="1240"
|
|
31262
|
-
?open=${dialogOpen}
|
|
31263
|
-
@lr-close=${(e) => (dialogOpen = false)}
|
|
31264
|
-
@lr-maximize-change=${(e) => console.log('maximized:', e.detail.maximized)}
|
|
31265
|
-
>
|
|
32055
|
+
<lr-tool-result-dialog tool-name="run_query" status="success" duration-ms="1240">
|
|
31266
32056
|
<lr-tab-group slot="body">
|
|
31267
32057
|
<div slot="preview" label="Preview">…</div>
|
|
31268
|
-
<div slot="json" label="JSON"><lr-json-viewer
|
|
32058
|
+
<div slot="json" label="JSON"><lr-json-viewer></lr-json-viewer></div>
|
|
31269
32059
|
</lr-tab-group>
|
|
31270
32060
|
<button slot="footer">Rerun</button>
|
|
31271
32061
|
</lr-tool-result-dialog>
|
|
32062
|
+
<script type="module">
|
|
32063
|
+
const dialog = document.querySelector("lr-tool-result-dialog");
|
|
32064
|
+
dialog.querySelector("lr-json-viewer").data = result;
|
|
32065
|
+
dialog.open = true;
|
|
32066
|
+
dialog.addEventListener("lr-close", () => (dialog.open = false));
|
|
32067
|
+
dialog.addEventListener("lr-maximize-change", (e) =>
|
|
32068
|
+
console.log("maximized:", e.detail.maximized)
|
|
32069
|
+
);
|
|
32070
|
+
</script>
|
|
31272
32071
|
```
|
|
31273
32072
|
|
|
31274
32073
|
While open, `[part="panel"]` takes `role="dialog"` + `aria-modal="true"` with `aria-labelledby`
|
|
@@ -31400,23 +32199,25 @@ assigned elements.
|
|
|
31400
32199
|
dependencies of this package imported directly, not optional peers.
|
|
31401
32200
|
|
|
31402
32201
|
```html
|
|
31403
|
-
<lr-tool-select-dialog
|
|
31404
|
-
|
|
31405
|
-
.tools=${[
|
|
31406
|
-
{ id: 'search', name: 'Web search', category: 'Research' },
|
|
31407
|
-
{ id: 'python', name: 'Python', category: 'Code', description: 'Run sandboxed Python' },
|
|
31408
|
-
{ id: 'admin', name: 'Admin console', disabled: true, disabledReason: 'Requires admin approval' },
|
|
31409
|
-
]}
|
|
31410
|
-
.selectedToolIds=${enabledToolIds}
|
|
31411
|
-
?use-defaults=${usingDefaults}
|
|
31412
|
-
?open=${dialogOpen}
|
|
31413
|
-
@lr-change=${(e) => updateTools(e.detail.selectedToolIds, e.detail.useDefaults)}
|
|
31414
|
-
@lr-close=${() => (dialogOpen = false)}
|
|
31415
|
-
>
|
|
31416
|
-
<button slot="footer" @click=${(e) => e.target.closest('lr-tool-select-dialog').close('done')}>
|
|
31417
|
-
Done
|
|
31418
|
-
</button>
|
|
32202
|
+
<lr-tool-select-dialog label="Select tools">
|
|
32203
|
+
<button slot="footer" id="done-btn">Done</button>
|
|
31419
32204
|
</lr-tool-select-dialog>
|
|
32205
|
+
<script type="module">
|
|
32206
|
+
const dialog = document.querySelector("lr-tool-select-dialog");
|
|
32207
|
+
dialog.tools = [
|
|
32208
|
+
{ id: "search", name: "Web search", category: "Research" },
|
|
32209
|
+
{ id: "python", name: "Python", category: "Code", description: "Run sandboxed Python" },
|
|
32210
|
+
{ id: "admin", name: "Admin console", disabled: true, disabledReason: "Requires admin approval" },
|
|
32211
|
+
];
|
|
32212
|
+
dialog.selectedToolIds = enabledToolIds;
|
|
32213
|
+
dialog.useDefaults = usingDefaults;
|
|
32214
|
+
dialog.open = true;
|
|
32215
|
+
dialog.addEventListener("lr-change", (e) =>
|
|
32216
|
+
updateTools(e.detail.selectedToolIds, e.detail.useDefaults)
|
|
32217
|
+
);
|
|
32218
|
+
dialog.addEventListener("lr-close", () => (dialog.open = false));
|
|
32219
|
+
dialog.querySelector("#done-btn").addEventListener("click", () => dialog.close("done"));
|
|
32220
|
+
</script>
|
|
31420
32221
|
```
|
|
31421
32222
|
|
|
31422
32223
|
`useDefaults` is a single top-level switch: while `true`, every per-tool checkbox renders disabled
|
|
@@ -31775,15 +32576,14 @@ other text-entry surface in the library provides), plus shared tokens
|
|
|
31775
32576
|
package, not an optional peer.
|
|
31776
32577
|
|
|
31777
32578
|
```html
|
|
31778
|
-
<lr-tool-approval-dialog
|
|
31779
|
-
tool-name="send_email"
|
|
31780
|
-
.args=${{ to: 'ops@example.com', subject: 'Deploy finished' }}
|
|
31781
|
-
@lr-approve=${(e) => runTool(e.detail.args)}
|
|
31782
|
-
@lr-deny=${() => console.log('denied')}
|
|
31783
|
-
@lr-close=${(e) => console.log('closed:', e.detail)}
|
|
31784
|
-
></lr-tool-approval-dialog>
|
|
32579
|
+
<lr-tool-approval-dialog tool-name="send_email"></lr-tool-approval-dialog>
|
|
31785
32580
|
<script type="module">
|
|
31786
|
-
document.querySelector(
|
|
32581
|
+
const dialog = document.querySelector("lr-tool-approval-dialog");
|
|
32582
|
+
dialog.args = { to: "ops@example.com", subject: "Deploy finished" };
|
|
32583
|
+
dialog.addEventListener("lr-approve", (e) => runTool(e.detail.args));
|
|
32584
|
+
dialog.addEventListener("lr-deny", () => console.log("denied"));
|
|
32585
|
+
dialog.addEventListener("lr-close", (e) => console.log("closed:", e.detail));
|
|
32586
|
+
dialog.open = true;
|
|
31787
32587
|
</script>
|
|
31788
32588
|
```
|
|
31789
32589
|
|
|
@@ -32001,20 +32801,22 @@ form: `--lr-space-l/-xs/-s`, `--lr-color-border`, `--lr-radius`, `--lr-color-sur
|
|
|
32001
32801
|
dependencies of this package imported directly, not optional peers.
|
|
32002
32802
|
|
|
32003
32803
|
```html
|
|
32004
|
-
<lr-tool-param-form
|
|
32005
|
-
|
|
32006
|
-
|
|
32804
|
+
<lr-tool-param-form></lr-tool-param-form>
|
|
32805
|
+
<script type="module">
|
|
32806
|
+
const form = document.querySelector("lr-tool-param-form");
|
|
32807
|
+
form.schema = {
|
|
32808
|
+
type: "object",
|
|
32007
32809
|
properties: {
|
|
32008
|
-
title: { type:
|
|
32009
|
-
attendees: { type:
|
|
32010
|
-
allDay: { type:
|
|
32810
|
+
title: { type: "string", title: "Title" },
|
|
32811
|
+
attendees: { type: "string", enum: ["team", "everyone"], default: "team" },
|
|
32812
|
+
allDay: { type: "boolean", title: "All day" },
|
|
32011
32813
|
},
|
|
32012
|
-
required: [
|
|
32013
|
-
}
|
|
32014
|
-
.value
|
|
32015
|
-
|
|
32016
|
-
|
|
32017
|
-
|
|
32814
|
+
required: ["title"],
|
|
32815
|
+
};
|
|
32816
|
+
form.value = draftArgs;
|
|
32817
|
+
form.addEventListener("lr-input", (e) => (draftArgs = e.detail.value));
|
|
32818
|
+
form.addEventListener("lr-validity-change", (e) => (formIsValid = e.detail.valid));
|
|
32819
|
+
</script>
|
|
32018
32820
|
```
|
|
32019
32821
|
|
|
32020
32822
|
This component owns no Submit/Cancel/Approve chrome — a consumer composes it inside their own dialog
|
|
@@ -32406,7 +33208,9 @@ default the component creates a plain-text `Blob`/object URL and activates a syn
|
|
|
32406
33208
|
`<a download>`; `preventDefault()` suppresses that built-in download so the host can substitute
|
|
32407
33209
|
server-side or other handling),
|
|
32408
33210
|
`lr-follow-change` (`detail: { following }`), `lr-search-change` (`detail: { query, matchCount,
|
|
32409
|
-
activeIndex }
|
|
33211
|
+
matchCountExact, activeIndex }`; `matchCountExact` is `false` once a search hits the 10,000-match
|
|
33212
|
+
ceiling, marking `matchCount` as a lower bound rather than an exact total),
|
|
33213
|
+
`lr-highlight-activate` (`detail: { highlightId }`), and `lr-text-select` (`detail: {
|
|
32410
33214
|
text, anchor, rects }`).
|
|
32411
33215
|
|
|
32412
33216
|
**CSS parts:** `base`, `toolbar` (only rendered when copy/download are enabled), `copy-button`,
|
|
@@ -32504,9 +33308,11 @@ columns. Consumes the same `LyraSpan[]` as `<lr-span-waterfall>`.
|
|
|
32504
33308
|
under `lr-span-waterfall` above (exported from `trace-tree/span.ts`); hierarchy comes from
|
|
32505
33309
|
`parentId`, and a span whose `parentId` is missing or doesn't resolve within the same array renders
|
|
32506
33310
|
as a root rather than being dropped. `activeSpanId: string | null = null`
|
|
32507
|
-
(attribute `active-span-id`), `label
|
|
33311
|
+
(attribute `active-span-id`), `label?: string`, `showTokens: boolean = false` (attribute
|
|
32508
33312
|
`show-tokens`) — surfaces `tokensIn`/`tokensOut`, `showCost: boolean = false` (attribute
|
|
32509
33313
|
`show-cost`) — surfaces `costText`, and `hideBars: boolean = false` (attribute `hide-bars`).
|
|
33314
|
+
`label` is an optional accessible-name override for the `role="tree"` element: omission localizes
|
|
33315
|
+
the default, and any supplied string — including `''` — is rendered verbatim.
|
|
32510
33316
|
Token counts render only when finite and non-negative; invalid metrics are omitted rather than
|
|
32511
33317
|
reaching `Intl.NumberFormat`. A row's accessible name includes its optional `detail` text as well
|
|
32512
33318
|
as its name/status/metrics, and updates when the supplied span data changes. Every trace view uses
|
|
@@ -32828,9 +33634,13 @@ repainting everything else that reads them.
|
|
|
32828
33634
|
|
|
32829
33635
|
```html
|
|
32830
33636
|
<lr-tool-call-chip status="pending"></lr-tool-call-chip>
|
|
32831
|
-
<lr-confirm-bar tool-name="run_shell"
|
|
32832
|
-
|
|
32833
|
-
|
|
33637
|
+
<lr-confirm-bar tool-name="run_shell"></lr-confirm-bar>
|
|
33638
|
+
<script type="module">
|
|
33639
|
+
const bar = document.querySelector("lr-confirm-bar");
|
|
33640
|
+
bar.args = args;
|
|
33641
|
+
bar.addEventListener("lr-approve", (e) => run(e.detail.args));
|
|
33642
|
+
bar.addEventListener("lr-deny", () => cancel());
|
|
33643
|
+
</script>
|
|
32834
33644
|
```
|
|
32835
33645
|
|
|
32836
33646
|
An `lr-approve`/`lr-deny` listener that needs to await its own async work before finalizing calls
|
|
@@ -32892,9 +33702,13 @@ phase write queued while detached.
|
|
|
32892
33702
|
viewport's aspect ratio.
|
|
32893
33703
|
|
|
32894
33704
|
```html
|
|
32895
|
-
<lr-browser-frame phase="streaming" url="https://example.com"
|
|
32896
|
-
|
|
32897
|
-
|
|
33705
|
+
<lr-browser-frame phase="streaming" url="https://example.com"></lr-browser-frame>
|
|
33706
|
+
<script type="module">
|
|
33707
|
+
const frame = document.querySelector("lr-browser-frame");
|
|
33708
|
+
frame.pings = pings;
|
|
33709
|
+
frame.addEventListener("lr-take-over", (e) => setController(e.detail.controller));
|
|
33710
|
+
frame.addEventListener("lr-stop", () => stopSession());
|
|
33711
|
+
</script>
|
|
32898
33712
|
```
|
|
32899
33713
|
|
|
32900
33714
|
**Additional API surface:**
|
|
@@ -32968,11 +33782,17 @@ ancestor. They exist because `::part(view-button)[aria-pressed='true']` is inval
|
|
|
32968
33782
|
library-wide brand tokens as the only prior lever.
|
|
32969
33783
|
|
|
32970
33784
|
```html
|
|
32971
|
-
<lr-artifact-panel label="report.md" kind="document"
|
|
32972
|
-
|
|
32973
|
-
<lr-
|
|
32974
|
-
<lr-code-block slot="code" language="markdown" .code=${markdown}></lr-code-block>
|
|
33785
|
+
<lr-artifact-panel label="report.md" kind="document">
|
|
33786
|
+
<lr-markdown id="preview"></lr-markdown>
|
|
33787
|
+
<lr-code-block slot="code" id="code" language="markdown"></lr-code-block>
|
|
32975
33788
|
</lr-artifact-panel>
|
|
33789
|
+
<script type="module">
|
|
33790
|
+
const panel = document.querySelector("lr-artifact-panel");
|
|
33791
|
+
panel.versions = versions;
|
|
33792
|
+
panel.querySelector("#preview").content = markdown;
|
|
33793
|
+
panel.querySelector("#code").code = markdown;
|
|
33794
|
+
panel.addEventListener("lr-restore", (e) => restoreVersion(e.detail.versionId));
|
|
33795
|
+
</script>
|
|
32976
33796
|
```
|
|
32977
33797
|
|
|
32978
33798
|
## `lr-agent-run`
|
|
@@ -33081,7 +33901,9 @@ hierarchical trace tree from one shared `spans` array.
|
|
|
33081
33901
|
(`'agent' | 'llm' | 'tool' | 'retriever' | 'embedding' | 'other'`). Empty shows every kind;
|
|
33082
33902
|
pre-settable (e.g. to hide `retriever`/`embedding` by default) and readable back after
|
|
33083
33903
|
`lr-span-visibility-change`
|
|
33084
|
-
- `label
|
|
33904
|
+
- `label?: string` — forwarded to the composed `lr-trace-tree`. Omission leaves that tree's own
|
|
33905
|
+
`label` unset so it localizes its own default; any supplied string (including `''`) is
|
|
33906
|
+
forwarded verbatim
|
|
33085
33907
|
- `showTokens: boolean = false` (attribute `show-tokens`), `showCost: boolean = false` (attribute
|
|
33086
33908
|
`show-cost`), `showBars: boolean = true` (attribute `show-bars`, renamed from `hideBars` in
|
|
33087
33909
|
9.0.0 to match the positive polarity of its two siblings above — default inverted so the
|
|
@@ -33610,7 +34432,7 @@ persistence.
|
|
|
33610
34432
|
`versions: readonly PromptStudioVersion[] = []` is a property-only host-controlled input;
|
|
33611
34433
|
empty/blank message and version ids are omitted and later duplicates use deterministic first-wins
|
|
33612
34434
|
identity before rendering, editing, focus, selection, and events;
|
|
33613
|
-
`selectedVersionId: string =
|
|
34435
|
+
`selectedVersionId: string | null = null` (attribute `selected-version-id`); `label: string = ''`;
|
|
33614
34436
|
`heading: string = ''` — visible toolbar heading, falling back to the localized Prompt Studio
|
|
33615
34437
|
label when unset;
|
|
33616
34438
|
`running: boolean = false`, `disabled: boolean = false`, and `reorderable: boolean = false`
|
|
@@ -33677,7 +34499,8 @@ It intentionally does not fetch remote references or validate values.
|
|
|
33677
34499
|
|
|
33678
34500
|
**Properties:** clone-owned, bounded, frozen `schema: JsonSchemaNode | null = null` and
|
|
33679
34501
|
`issues: readonly SchemaValidationIssue[] = []` (attribute: false); reassign a new schema record or
|
|
33680
|
-
issue array after changes. `selectedPath: string =
|
|
34502
|
+
issue array after changes. `selectedPath: string | null = null` (attribute `selected-path`) —
|
|
34503
|
+
`null` means no selection, while the empty string is the valid JSON Pointer for the schema root;
|
|
33681
34504
|
`maxDepth: number = 20` (attribute `max-depth`, clamped to 100); `label: string = ''`.
|
|
33682
34505
|
|
|
33683
34506
|
**Exported types:** `JsonSchemaNode` covers `$ref`, type/title/description, properties/items,
|
|
@@ -34208,6 +35031,44 @@ These named interfaces and helper signatures are available to typed integrations
|
|
|
34208
35031
|
|
|
34209
35032
|
# Retrieval, knowledge graph & grounding (`components/retrieval/`)
|
|
34210
35033
|
|
|
35034
|
+
## Breaking changes in 10.0.0
|
|
35035
|
+
|
|
35036
|
+
`lr-entity-card`, `lr-entity-chip` and `lr-neighbor-list` no longer emit `lr-entity-activate`. The
|
|
35037
|
+
canonical name for that gesture is `lr-entity-select` (`detail: { entityId }`), fired from the same
|
|
35038
|
+
gesture with the same detail — only the second spelling is gone. It is removed outright rather than
|
|
35039
|
+
kept as a dual-emitting alias, because the library has no released consumers and an alias is a
|
|
35040
|
+
permanent tax paid to protect users who do not exist. Rename the listener; nothing else changes.
|
|
35041
|
+
|
|
35042
|
+
Two composites narrow with them. `lr-entity-dossier` surfaces its embedded entity card's and
|
|
35043
|
+
neighbor list's gesture as `lr-entity-select` only, and `lr-provenance-panel` does the same for its
|
|
35044
|
+
embedded entity chip. On both, `lr-entity-activate` now reaches a host only from the embedded
|
|
35045
|
+
community card or relationship path strip, which is also the only source of the richer
|
|
35046
|
+
`{ entityId, occurrenceIndex? }` detail — so on these two elements the names now carry different
|
|
35047
|
+
shapes rather than being two spellings of one event.
|
|
35048
|
+
|
|
35049
|
+
`lr-community-card` and `lr-path-strip` keep `lr-entity-activate` unchanged. It is their only name
|
|
35050
|
+
and never was an alias, so do **not** rename those listeners.
|
|
35051
|
+
|
|
35052
|
+
`lr-rag-eval-dashboard` no longer emits `lr-run-select`; listen for `lr-run-change`
|
|
35053
|
+
(`detail: { run }`, unchanged). Same removal, same reason.
|
|
35054
|
+
|
|
35055
|
+
`lr-knowledge-graph-explorer`'s `lr-search-change` detail is now exactly
|
|
35056
|
+
`{ query, matchCount, matchCountExact }`. The old `searchQuery` member is replaced by the canonical
|
|
35057
|
+
`query` rather than carried beside it, so the event finally has the `LyraSearchChangeDetail` shape
|
|
35058
|
+
the rest of the library's search emitters use — read `e.detail.query`. The detail deliberately has no
|
|
35059
|
+
`activeIndex` (this is a live node filter, not a cursor-based search) and `matchCountExact` is always
|
|
35060
|
+
`true`, since that filter has no truncating ceiling. The `searchQuery` **property** is a different
|
|
35061
|
+
member and is unaffected: the component still applies the query to it before emitting, so reassigning
|
|
35062
|
+
it from the handler stays a no-op.
|
|
35063
|
+
|
|
35064
|
+
Also corrected in 10.0.0 — not breaking, but visible. A chip with no `entity-id` renders its button
|
|
35065
|
+
disabled, and now looks it: `lr-entity-chip` used to paint that state pixel-identical to a working
|
|
35066
|
+
chip — full opacity, a hand cursor, complete hover and press feedback for a control that cannot emit
|
|
35067
|
+
anything — and now dims to `--lr-opacity-disabled` with a `not-allowed` cursor and no pointer
|
|
35068
|
+
response. `lr-embedding-explorer`'s selected point has a focus ring again. And
|
|
35069
|
+
`lr-knowledge-graph-explorer` no longer announces on mount: a preset `search-query` used to fire its
|
|
35070
|
+
live region before any user action.
|
|
35071
|
+
|
|
34211
35072
|
## Breaking changes in 9.0.0
|
|
34212
35073
|
|
|
34213
35074
|
`lr-graph`'s exported types `GraphLayout`, `GraphRenderer`, `GraphSelectionMode`, `GraphPickKind`, and
|
|
@@ -34659,7 +35520,7 @@ only that row's decorative swatch opacity. Also reads `--lr-graph-cat-1` through
|
|
|
34659
35520
|
|
|
34660
35521
|
A dossier card for one knowledge-graph entity: type badge, description, key/value property rows,
|
|
34661
35522
|
degree, community chip, plus a built-in "focus in graph" action. Never fetches or focuses a graph
|
|
34662
|
-
itself — `lr-entity-
|
|
35523
|
+
itself — `lr-entity-select` is a request a host routes into `lr-graph`'s own
|
|
34663
35524
|
`focusNode(id, options?)`.
|
|
34664
35525
|
|
|
34665
35526
|
**Properties:**
|
|
@@ -34684,7 +35545,7 @@ number; communityId?: string }`; field names deliberately mirror `lr-graph`'s `L
|
|
|
34684
35545
|
set — there is nothing left to tighten. The exported alias `EntityCardAppearance` is retained as a
|
|
34685
35546
|
name for the same union.
|
|
34686
35547
|
|
|
34687
|
-
**Events:** `lr-entity-
|
|
35548
|
+
**Events:** `lr-entity-select` (`detail: { entityId }`, the built-in focus button was activated).
|
|
34688
35549
|
|
|
34689
35550
|
**Slots:** default (extra body content below the property rows, e.g. a `lr-neighbor-list`),
|
|
34690
35551
|
`actions` (extra header actions alongside the built-in focus button).
|
|
@@ -34717,7 +35578,7 @@ from tokens.
|
|
|
34717
35578
|
};
|
|
34718
35579
|
document
|
|
34719
35580
|
.getElementById("card")
|
|
34720
|
-
.addEventListener("lr-entity-
|
|
35581
|
+
.addEventListener("lr-entity-select", (e) =>
|
|
34721
35582
|
graph.focusNode(e.detail.entityId)
|
|
34722
35583
|
);
|
|
34723
35584
|
</script>
|
|
@@ -34754,7 +35615,7 @@ before the type template is composed, so it never produces a leading punctuation
|
|
|
34754
35615
|
`, person`. An authored host `aria-label` intentionally names only the custom-element boundary;
|
|
34755
35616
|
it is not copied onto the shadow button because host naming does not cross that boundary.
|
|
34756
35617
|
|
|
34757
|
-
**Events:** `lr-entity-
|
|
35618
|
+
**Events:** `lr-entity-select` (`detail: { entityId }`, click, or Enter while focused),
|
|
34758
35619
|
`lr-entity-open` (`detail: { entityId }`, dblclick, or Space while focused).
|
|
34759
35620
|
|
|
34760
35621
|
**Slots:** default — rich preview content (typically a compact `lr-entity-card`), shown in a
|
|
@@ -34802,7 +35663,7 @@ graph data) and never mutates a graph.
|
|
|
34802
35663
|
- `label: string = ''` — fallback name for the stable group. A non-empty host `aria-label` makes
|
|
34803
35664
|
the host the sole overall owner; an explicitly empty host label stays empty on the group
|
|
34804
35665
|
|
|
34805
|
-
**Events:** `lr-entity-
|
|
35666
|
+
**Events:** `lr-entity-select` (`detail: { entityId }`, a row's node button was activated),
|
|
34806
35667
|
`lr-node-expand` (`detail: { nodeId }`, a row's expand button was activated — deliberately the same
|
|
34807
35668
|
name and detail shape as `lr-graph`'s own event, so one host handler serves both).
|
|
34808
35669
|
|
|
@@ -35173,8 +36034,10 @@ chip` row, one `lr-path-strip` per relationship, `lr-community-card`, `lr-chunk-
|
|
|
35173
36034
|
**Events:** `lr-toggle` (`detail: { section, expanded }`, a section header was toggled —
|
|
35174
36035
|
`section` is `'entities' | 'relationships' | 'communities' | 'chunks'`). Because the panel is a
|
|
35175
36036
|
conduit, every affordance it renders also reaches a listener on the panel itself, and all are
|
|
35176
|
-
part of its typed event map: `lr-entity-
|
|
35177
|
-
|
|
36037
|
+
part of its typed event map: `lr-entity-select` (`detail: { entityId }`, from an entity chip),
|
|
36038
|
+
`lr-entity-activate` (`detail: { entityId, occurrenceIndex? }`, from a community card member or
|
|
36039
|
+
path-strip node — the only name either one emits, and the only one carrying `occurrenceIndex`),
|
|
36040
|
+
`lr-entity-open` (`detail: { entityId }`, an entity chip double-click or
|
|
35178
36041
|
Space), `lr-drill` (`detail: { communityId }`, a community card's title, drill button, or overflow chip), and
|
|
35179
36042
|
`lr-relation-activate` (`detail: { relation, sourceNodeId?, targetNodeId?, occurrenceIndex }`, a relationship path-strip
|
|
35180
36043
|
edge), plus `lr-chunk-open` (`detail: { chunkId, sourceId, anchor? }`) and `lr-expand`
|
|
@@ -35569,7 +36432,10 @@ shape?: 'circle' | 'square' | 'diamond' }`, the `lr-graph.nodeTypes` entry shape
|
|
|
35569
36432
|
`aria-label` names the dossier as a whole and is not cloned onto the strip
|
|
35570
36433
|
|
|
35571
36434
|
**Events:** declares none of its own. Every composed child's event bubbles through unmodified
|
|
35572
|
-
(`composed: true`): `lr-entity-
|
|
36435
|
+
(`composed: true`): `lr-entity-select` (`detail: { entityId }`, surfaced from the embedded entity
|
|
36436
|
+
card or neighbor list), `lr-entity-activate` (`detail: { entityId, occurrenceIndex? }` — surfaced
|
|
36437
|
+
from the embedded provenance panel's own community card or relationship path strip, the only
|
|
36438
|
+
source carrying `occurrenceIndex`), `lr-node-expand` (`detail: { nodeId }`),
|
|
35573
36439
|
`lr-chunk-open` (`detail: { chunkId, sourceId, anchor? }`), `lr-expand` (`detail: { chunkId, expanded }`),
|
|
35574
36440
|
`lr-toggle` (`detail: { section, expanded }`), and `lr-tab-show`
|
|
35575
36441
|
(`detail: { tabId: LyraEntityDossierTab }`, where `LyraEntityDossierTab = 'relationships' | 'chunks'
|
|
@@ -35864,9 +36730,14 @@ same self-toggle-then-emit contract `lr-graph-legend` uses, so every feature wor
|
|
|
35864
36730
|
- `lr-hidden-types-change` (`detail: { hiddenTypes: string[] }`) — a node type's visibility changed
|
|
35865
36731
|
via the composed legend. Follows the same self-toggle-then-emit contract as `lr-pin-change`/
|
|
35866
36732
|
`lr-search-change`, so reassigning back is optional.
|
|
35867
|
-
- `lr-search-change` (`detail: {
|
|
35868
|
-
|
|
35869
|
-
|
|
36733
|
+
- `lr-search-change` (`detail: { query: string; matchCount: number; matchCountExact: boolean }`) —
|
|
36734
|
+
the user typed in the toolbar's search box. `query` is the canonical `LyraSearchChangeDetail`
|
|
36735
|
+
field name. `matchCount` is the same live node-filter total the result list and its live-region
|
|
36736
|
+
announcement already compute (`0` while the query is empty). `matchCountExact` is always `true` —
|
|
36737
|
+
this component's node filter has no truncating ceiling, unlike a paginated text-search viewer.
|
|
36738
|
+
There is no `activeIndex`: this is a live node filter, not a cursor-based search. The component
|
|
36739
|
+
has already applied the query to its own `searchQuery` property before emitting, so reassigning
|
|
36740
|
+
it back is optional and a direct host assignment stays silent.
|
|
35870
36741
|
- Bubbling straight through from composed children, unmodified: `lr-node-click`
|
|
35871
36742
|
(`detail: { nodeId, x, y }`), `lr-link-click` (`detail: { sourceNodeId, targetNodeId, linkId? }`), `lr-community-click`
|
|
35872
36743
|
(`detail: { communityId }`), `lr-node-expand` (`detail: { nodeId }`, from `lr-graph` and/or `lr-neighbor-list`),
|
|
@@ -36470,7 +37341,7 @@ duplicates are omitted first-wins before metric fallback, slice derivation/filte
|
|
|
36470
37341
|
history, counts, rendering, or actions.
|
|
36471
37342
|
|
|
36472
37343
|
**Events:** `lr-metric-change` (`{ metricId }`), `lr-slice-change` (`{ slice }`), and
|
|
36473
|
-
`lr-run-
|
|
37344
|
+
`lr-run-change` (`{ run }`). All are controlled intents; the component does not mutate the
|
|
36474
37345
|
corresponding selection properties.
|
|
36475
37346
|
|
|
36476
37347
|
**CSS parts:** `base`, `heading`, `slices`, `slice`, `slice-selected`, `metrics`, `metric`,
|