@aceshooting/lyra-ui 2.4.0 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -4
- package/custom-elements.json +959 -89
- package/dist/components/app-rail/app-rail-item.class.d.ts.map +1 -1
- package/dist/components/app-rail/app-rail-item.class.js +6 -1
- package/dist/components/app-rail/app-rail-item.class.js.map +1 -1
- package/dist/components/app-rail/app-rail.class.js +1 -1
- package/dist/components/app-rail/app-rail.class.js.map +1 -1
- package/dist/components/attachment-chip/attachment-chip.class.d.ts.map +1 -1
- package/dist/components/attachment-chip/attachment-chip.class.js +13 -5
- package/dist/components/attachment-chip/attachment-chip.class.js.map +1 -1
- package/dist/components/attachment-trigger/attachment-trigger.class.d.ts +4 -4
- package/dist/components/attachment-trigger/attachment-trigger.class.d.ts.map +1 -1
- package/dist/components/attachment-trigger/attachment-trigger.class.js +8 -7
- package/dist/components/attachment-trigger/attachment-trigger.class.js.map +1 -1
- package/dist/components/avatar/avatar.class.d.ts +26 -12
- package/dist/components/avatar/avatar.class.d.ts.map +1 -1
- package/dist/components/avatar/avatar.class.js +60 -13
- package/dist/components/avatar/avatar.class.js.map +1 -1
- package/dist/components/avatar/avatar.styles.d.ts.map +1 -1
- package/dist/components/avatar/avatar.styles.js +16 -1
- package/dist/components/avatar/avatar.styles.js.map +1 -1
- package/dist/components/chart/box-plot.class.d.ts.map +1 -1
- package/dist/components/chart/box-plot.class.js +26 -14
- package/dist/components/chart/box-plot.class.js.map +1 -1
- package/dist/components/chart/chart.class.d.ts.map +1 -1
- package/dist/components/chart/chart.class.js +21 -6
- package/dist/components/chart/chart.class.js.map +1 -1
- package/dist/components/chart/histogram.class.d.ts +1 -0
- package/dist/components/chart/histogram.class.d.ts.map +1 -1
- package/dist/components/chart/histogram.class.js +8 -2
- package/dist/components/chart/histogram.class.js.map +1 -1
- package/dist/components/chart/lite-chart.class.d.ts +5 -3
- package/dist/components/chart/lite-chart.class.d.ts.map +1 -1
- package/dist/components/chart/lite-chart.class.js +27 -18
- package/dist/components/chart/lite-chart.class.js.map +1 -1
- package/dist/components/chart/lite-chart.d.ts +1 -0
- package/dist/components/chart/lite-chart.d.ts.map +1 -1
- package/dist/components/chart/lite-chart.js +1 -0
- package/dist/components/chart/lite-chart.js.map +1 -1
- package/dist/components/chart/lite-chart.styles.js +7 -7
- package/dist/components/chat-composer/chat-composer.class.js +1 -1
- package/dist/components/chat-composer/chat-composer.class.js.map +1 -1
- package/dist/components/chat-message/chat-message.class.d.ts +8 -1
- package/dist/components/chat-message/chat-message.class.d.ts.map +1 -1
- package/dist/components/chat-message/chat-message.class.js +16 -7
- package/dist/components/chat-message/chat-message.class.js.map +1 -1
- package/dist/components/chat-message/chat-message.styles.d.ts.map +1 -1
- package/dist/components/chat-message/chat-message.styles.js +15 -0
- package/dist/components/chat-message/chat-message.styles.js.map +1 -1
- package/dist/components/checkbox/checkbox.class.d.ts.map +1 -1
- package/dist/components/checkbox/checkbox.class.js +1 -1
- package/dist/components/checkbox/checkbox.class.js.map +1 -1
- package/dist/components/chip/chip-group.class.d.ts +4 -1
- package/dist/components/chip/chip-group.class.d.ts.map +1 -1
- package/dist/components/chip/chip-group.class.js.map +1 -1
- package/dist/components/chip/chip.class.d.ts +31 -13
- package/dist/components/chip/chip.class.d.ts.map +1 -1
- package/dist/components/chip/chip.class.js +46 -18
- package/dist/components/chip/chip.class.js.map +1 -1
- package/dist/components/chip/chip.styles.d.ts.map +1 -1
- package/dist/components/chip/chip.styles.js +6 -1
- package/dist/components/chip/chip.styles.js.map +1 -1
- package/dist/components/citation-badge/citation-badge.class.d.ts +5 -1
- package/dist/components/citation-badge/citation-badge.class.d.ts.map +1 -1
- package/dist/components/citation-badge/citation-badge.class.js +15 -12
- package/dist/components/citation-badge/citation-badge.class.js.map +1 -1
- package/dist/components/code-block/code-block-core.class.d.ts +3 -0
- package/dist/components/code-block/code-block-core.class.d.ts.map +1 -1
- package/dist/components/code-block/code-block-core.class.js +4 -3
- package/dist/components/code-block/code-block-core.class.js.map +1 -1
- package/dist/components/code-block/code-block-shared.d.ts +18 -0
- package/dist/components/code-block/code-block-shared.d.ts.map +1 -0
- package/dist/components/code-block/code-block-shared.js +21 -0
- package/dist/components/code-block/code-block-shared.js.map +1 -0
- package/dist/components/code-block/code-block.class.d.ts +3 -0
- package/dist/components/code-block/code-block.class.d.ts.map +1 -1
- package/dist/components/code-block/code-block.class.js +4 -10
- package/dist/components/code-block/code-block.class.js.map +1 -1
- package/dist/components/code-block/code-block.styles.d.ts.map +1 -1
- package/dist/components/code-block/code-block.styles.js +9 -0
- package/dist/components/code-block/code-block.styles.js.map +1 -1
- package/dist/components/combobox/combobox.class.d.ts +3 -2
- package/dist/components/combobox/combobox.class.d.ts.map +1 -1
- package/dist/components/combobox/combobox.class.js +15 -13
- package/dist/components/combobox/combobox.class.js.map +1 -1
- package/dist/components/combobox/combobox.styles.d.ts.map +1 -1
- package/dist/components/combobox/combobox.styles.js +3 -0
- package/dist/components/combobox/combobox.styles.js.map +1 -1
- package/dist/components/context-meter/context-meter.class.d.ts +7 -0
- package/dist/components/context-meter/context-meter.class.d.ts.map +1 -1
- package/dist/components/context-meter/context-meter.class.js +30 -12
- package/dist/components/context-meter/context-meter.class.js.map +1 -1
- package/dist/components/conversation-item/conversation-item.class.js +2 -2
- package/dist/components/conversation-item/conversation-item.class.js.map +1 -1
- package/dist/components/date-picker/date-input.class.d.ts +3 -1
- package/dist/components/date-picker/date-input.class.d.ts.map +1 -1
- package/dist/components/date-picker/date-input.class.js +16 -9
- package/dist/components/date-picker/date-input.class.js.map +1 -1
- package/dist/components/date-picker/date-picker.class.d.ts +6 -2
- package/dist/components/date-picker/date-picker.class.d.ts.map +1 -1
- package/dist/components/date-picker/date-picker.class.js +23 -6
- package/dist/components/date-picker/date-picker.class.js.map +1 -1
- package/dist/components/date-picker/date-picker.styles.d.ts.map +1 -1
- package/dist/components/date-picker/date-picker.styles.js +16 -1
- package/dist/components/date-picker/date-picker.styles.js.map +1 -1
- package/dist/components/dialog/confirm.d.ts +2 -2
- package/dist/components/dialog/confirm.d.ts.map +1 -1
- package/dist/components/dialog/confirm.js +10 -7
- package/dist/components/dialog/confirm.js.map +1 -1
- package/dist/components/diff-view/diff-view.class.d.ts +3 -0
- package/dist/components/diff-view/diff-view.class.d.ts.map +1 -1
- package/dist/components/diff-view/diff-view.class.js +24 -3
- package/dist/components/diff-view/diff-view.class.js.map +1 -1
- package/dist/components/dock-panel/dock-panel.class.js +2 -2
- package/dist/components/dock-panel/dock-panel.class.js.map +1 -1
- package/dist/components/document-preview/document-preview.class.d.ts.map +1 -1
- package/dist/components/document-preview/document-preview.class.js +11 -11
- package/dist/components/document-preview/document-preview.class.js.map +1 -1
- package/dist/components/document-preview/document-preview.styles.d.ts.map +1 -1
- package/dist/components/document-preview/document-preview.styles.js +6 -1
- package/dist/components/document-preview/document-preview.styles.js.map +1 -1
- package/dist/components/empty/empty.styles.js +1 -1
- package/dist/components/export-button/export-button.class.d.ts +17 -1
- package/dist/components/export-button/export-button.class.d.ts.map +1 -1
- package/dist/components/export-button/export-button.class.js +36 -4
- package/dist/components/export-button/export-button.class.js.map +1 -1
- package/dist/components/file-input/file-input.class.d.ts +4 -0
- package/dist/components/file-input/file-input.class.d.ts.map +1 -1
- package/dist/components/file-input/file-input.class.js +16 -6
- package/dist/components/file-input/file-input.class.js.map +1 -1
- package/dist/components/file-input/file-input.styles.d.ts.map +1 -1
- package/dist/components/file-input/file-input.styles.js +0 -7
- package/dist/components/file-input/file-input.styles.js.map +1 -1
- package/dist/components/gauge/gauge.class.d.ts.map +1 -1
- package/dist/components/gauge/gauge.class.js +16 -6
- package/dist/components/gauge/gauge.class.js.map +1 -1
- package/dist/components/generation-status/generation-status.class.d.ts.map +1 -1
- package/dist/components/generation-status/generation-status.class.js +39 -20
- package/dist/components/generation-status/generation-status.class.js.map +1 -1
- package/dist/components/graph/graph.class.d.ts +10 -0
- package/dist/components/graph/graph.class.d.ts.map +1 -1
- package/dist/components/graph/graph.class.js +35 -9
- package/dist/components/graph/graph.class.js.map +1 -1
- package/dist/components/graph/graph.styles.d.ts.map +1 -1
- package/dist/components/graph/graph.styles.js +4 -0
- package/dist/components/graph/graph.styles.js.map +1 -1
- package/dist/components/heatmap/heatmap.class.d.ts +34 -11
- package/dist/components/heatmap/heatmap.class.d.ts.map +1 -1
- package/dist/components/heatmap/heatmap.class.js +80 -27
- package/dist/components/heatmap/heatmap.class.js.map +1 -1
- package/dist/components/heatmap/heatmap.styles.js +1 -1
- package/dist/components/json-viewer/json-viewer.class.d.ts.map +1 -1
- package/dist/components/json-viewer/json-viewer.class.js +20 -5
- package/dist/components/json-viewer/json-viewer.class.js.map +1 -1
- package/dist/components/kbd/kbd.class.d.ts +13 -3
- package/dist/components/kbd/kbd.class.d.ts.map +1 -1
- package/dist/components/kbd/kbd.class.js +57 -33
- package/dist/components/kbd/kbd.class.js.map +1 -1
- package/dist/components/map/map.class.d.ts +4 -0
- package/dist/components/map/map.class.d.ts.map +1 -1
- package/dist/components/map/map.class.js +24 -2
- package/dist/components/map/map.class.js.map +1 -1
- package/dist/components/map/map.styles.d.ts.map +1 -1
- package/dist/components/map/map.styles.js +5 -0
- package/dist/components/map/map.styles.js.map +1 -1
- package/dist/components/markdown/markdown.class.d.ts +3 -0
- package/dist/components/markdown/markdown.class.d.ts.map +1 -1
- package/dist/components/markdown/markdown.class.js +3 -0
- package/dist/components/markdown/markdown.class.js.map +1 -1
- package/dist/components/media-card/media-card.class.d.ts +4 -1
- package/dist/components/media-card/media-card.class.d.ts.map +1 -1
- package/dist/components/media-card/media-card.class.js +6 -4
- package/dist/components/media-card/media-card.class.js.map +1 -1
- package/dist/components/mention-popover/mention-popover.class.d.ts +9 -0
- package/dist/components/mention-popover/mention-popover.class.d.ts.map +1 -1
- package/dist/components/mention-popover/mention-popover.class.js +14 -2
- package/dist/components/mention-popover/mention-popover.class.js.map +1 -1
- package/dist/components/menu/menu.class.d.ts +21 -2
- package/dist/components/menu/menu.class.d.ts.map +1 -1
- package/dist/components/menu/menu.class.js +40 -9
- package/dist/components/menu/menu.class.js.map +1 -1
- package/dist/components/model-select/model-select.class.d.ts +9 -0
- package/dist/components/model-select/model-select.class.d.ts.map +1 -1
- package/dist/components/model-select/model-select.class.js +19 -4
- package/dist/components/model-select/model-select.class.js.map +1 -1
- package/dist/components/model-settings-panel/model-settings-panel.class.d.ts.map +1 -1
- package/dist/components/model-settings-panel/model-settings-panel.class.js +4 -3
- package/dist/components/model-settings-panel/model-settings-panel.class.js.map +1 -1
- package/dist/components/playback/playback.class.d.ts +4 -0
- package/dist/components/playback/playback.class.d.ts.map +1 -1
- package/dist/components/playback/playback.class.js +6 -2
- package/dist/components/playback/playback.class.js.map +1 -1
- package/dist/components/poll-status/poll-status.class.d.ts +3 -2
- package/dist/components/poll-status/poll-status.class.d.ts.map +1 -1
- package/dist/components/poll-status/poll-status.class.js +10 -7
- package/dist/components/poll-status/poll-status.class.js.map +1 -1
- package/dist/components/poll-status/poll-status.styles.d.ts.map +1 -1
- package/dist/components/poll-status/poll-status.styles.js +7 -1
- package/dist/components/poll-status/poll-status.styles.js.map +1 -1
- package/dist/components/segmented/segmented.class.d.ts +9 -0
- package/dist/components/segmented/segmented.class.d.ts.map +1 -1
- package/dist/components/segmented/segmented.class.js +13 -3
- package/dist/components/segmented/segmented.class.js.map +1 -1
- package/dist/components/segmented/segmented.styles.d.ts.map +1 -1
- package/dist/components/segmented/segmented.styles.js +7 -0
- package/dist/components/segmented/segmented.styles.js.map +1 -1
- package/dist/components/select/select.class.d.ts +7 -1
- package/dist/components/select/select.class.d.ts.map +1 -1
- package/dist/components/select/select.class.js +14 -4
- package/dist/components/select/select.class.js.map +1 -1
- package/dist/components/skeleton/skeleton.class.d.ts.map +1 -1
- package/dist/components/skeleton/skeleton.class.js +2 -1
- package/dist/components/skeleton/skeleton.class.js.map +1 -1
- package/dist/components/skeleton/skeleton.styles.d.ts.map +1 -1
- package/dist/components/skeleton/skeleton.styles.js +1 -0
- package/dist/components/skeleton/skeleton.styles.js.map +1 -1
- package/dist/components/source-card/source-card.class.d.ts +5 -1
- package/dist/components/source-card/source-card.class.d.ts.map +1 -1
- package/dist/components/source-card/source-card.class.js.map +1 -1
- package/dist/components/source-list/source-list.class.d.ts +8 -7
- package/dist/components/source-list/source-list.class.d.ts.map +1 -1
- package/dist/components/source-list/source-list.class.js +9 -8
- package/dist/components/source-list/source-list.class.js.map +1 -1
- package/dist/components/source-list/source-list.styles.d.ts.map +1 -1
- package/dist/components/source-list/source-list.styles.js +10 -0
- package/dist/components/source-list/source-list.styles.js.map +1 -1
- package/dist/components/sparkline/sparkline.styles.js +2 -2
- package/dist/components/split/split.class.d.ts +1 -1
- package/dist/components/split/split.class.d.ts.map +1 -1
- package/dist/components/split/split.class.js +6 -1
- package/dist/components/split/split.class.js.map +1 -1
- package/dist/components/stat/stat.class.js +2 -2
- package/dist/components/stat/stat.class.js.map +1 -1
- package/dist/components/stepper/stepper.class.d.ts +6 -1
- package/dist/components/stepper/stepper.class.d.ts.map +1 -1
- package/dist/components/stepper/stepper.class.js +4 -1
- package/dist/components/stepper/stepper.class.js.map +1 -1
- package/dist/components/stream-status/stream-status.class.d.ts.map +1 -1
- package/dist/components/stream-status/stream-status.class.js +5 -11
- package/dist/components/stream-status/stream-status.class.js.map +1 -1
- package/dist/components/stream-status/stream-status.styles.d.ts.map +1 -1
- package/dist/components/stream-status/stream-status.styles.js +4 -5
- package/dist/components/stream-status/stream-status.styles.js.map +1 -1
- package/dist/components/switch/switch.class.d.ts.map +1 -1
- package/dist/components/switch/switch.class.js +1 -1
- package/dist/components/switch/switch.class.js.map +1 -1
- package/dist/components/table/table.class.d.ts +12 -0
- package/dist/components/table/table.class.d.ts.map +1 -1
- package/dist/components/table/table.class.js +13 -2
- package/dist/components/table/table.class.js.map +1 -1
- package/dist/components/table/table.styles.d.ts.map +1 -1
- package/dist/components/table/table.styles.js +3 -0
- package/dist/components/table/table.styles.js.map +1 -1
- package/dist/components/textarea/textarea.class.d.ts +48 -0
- package/dist/components/textarea/textarea.class.d.ts.map +1 -0
- package/dist/components/textarea/textarea.class.js +80 -0
- package/dist/components/textarea/textarea.class.js.map +1 -0
- package/dist/components/textarea/textarea.d.ts +2 -0
- package/dist/components/textarea/textarea.d.ts.map +1 -0
- package/dist/components/textarea/textarea.js +5 -0
- package/dist/components/textarea/textarea.js.map +1 -0
- package/dist/components/textarea/textarea.styles.d.ts +2 -0
- package/dist/components/textarea/textarea.styles.d.ts.map +1 -0
- package/dist/components/textarea/textarea.styles.js +31 -0
- package/dist/components/textarea/textarea.styles.js.map +1 -0
- package/dist/components/thinking-panel/thinking-panel.class.d.ts +2 -1
- package/dist/components/thinking-panel/thinking-panel.class.d.ts.map +1 -1
- package/dist/components/thinking-panel/thinking-panel.class.js +14 -5
- package/dist/components/thinking-panel/thinking-panel.class.js.map +1 -1
- package/dist/components/time-range/time-range.class.d.ts +8 -3
- package/dist/components/time-range/time-range.class.d.ts.map +1 -1
- package/dist/components/time-range/time-range.class.js +10 -5
- package/dist/components/time-range/time-range.class.js.map +1 -1
- package/dist/components/time-range/time-range.styles.d.ts.map +1 -1
- package/dist/components/time-range/time-range.styles.js +16 -0
- package/dist/components/time-range/time-range.styles.js.map +1 -1
- package/dist/components/toast/toast-item.class.js +2 -2
- package/dist/components/toast/toast-item.class.js.map +1 -1
- package/dist/components/tool-approval-dialog/tool-approval-dialog.class.d.ts.map +1 -1
- package/dist/components/tool-approval-dialog/tool-approval-dialog.class.js +11 -6
- package/dist/components/tool-approval-dialog/tool-approval-dialog.class.js.map +1 -1
- package/dist/components/tool-call-chip/tool-call-chip.class.d.ts +8 -4
- package/dist/components/tool-call-chip/tool-call-chip.class.d.ts.map +1 -1
- package/dist/components/tool-call-chip/tool-call-chip.class.js +46 -16
- package/dist/components/tool-call-chip/tool-call-chip.class.js.map +1 -1
- package/dist/components/tool-param-form/tool-param-form.class.d.ts +3 -0
- package/dist/components/tool-param-form/tool-param-form.class.d.ts.map +1 -1
- package/dist/components/tool-param-form/tool-param-form.class.js +21 -16
- package/dist/components/tool-param-form/tool-param-form.class.js.map +1 -1
- package/dist/components/tool-param-form/tool-param-form.styles.d.ts.map +1 -1
- package/dist/components/tool-param-form/tool-param-form.styles.js +5 -0
- package/dist/components/tool-param-form/tool-param-form.styles.js.map +1 -1
- package/dist/components/tool-result-dialog/tool-result-dialog.class.d.ts +5 -5
- package/dist/components/tool-result-dialog/tool-result-dialog.class.d.ts.map +1 -1
- package/dist/components/tool-result-dialog/tool-result-dialog.class.js +18 -10
- package/dist/components/tool-result-dialog/tool-result-dialog.class.js.map +1 -1
- package/dist/components/tool-result-view/registry.d.ts +3 -3
- package/dist/components/tool-result-view/registry.js +3 -3
- package/dist/components/tool-select-dialog/tool-select-dialog.class.d.ts.map +1 -1
- package/dist/components/tool-select-dialog/tool-select-dialog.class.js +27 -9
- package/dist/components/tool-select-dialog/tool-select-dialog.class.js.map +1 -1
- package/dist/components/tree/tree-node.class.d.ts +1 -0
- package/dist/components/tree/tree-node.class.d.ts.map +1 -1
- package/dist/components/tree/tree-node.class.js +3 -66
- package/dist/components/tree/tree-node.class.js.map +1 -1
- package/dist/components/tree/tree-node.styles.d.ts +2 -0
- package/dist/components/tree/tree-node.styles.d.ts.map +1 -0
- package/dist/components/tree/tree-node.styles.js +68 -0
- package/dist/components/tree/tree-node.styles.js.map +1 -0
- package/dist/components/tree/tree.class.d.ts +3 -1
- package/dist/components/tree/tree.class.d.ts.map +1 -1
- package/dist/components/tree/tree.class.js +6 -1
- package/dist/components/tree/tree.class.js.map +1 -1
- package/dist/components/typing-indicator/typing-indicator.class.d.ts +14 -11
- package/dist/components/typing-indicator/typing-indicator.class.d.ts.map +1 -1
- package/dist/components/typing-indicator/typing-indicator.class.js +16 -12
- package/dist/components/typing-indicator/typing-indicator.class.js.map +1 -1
- package/dist/components/typing-indicator/typing-indicator.styles.js +18 -18
- package/dist/components/typing-indicator/typing-indicator.styles.js.map +1 -1
- package/dist/components/widget/widget.class.d.ts +39 -8
- package/dist/components/widget/widget.class.d.ts.map +1 -1
- package/dist/components/widget/widget.class.js +58 -17
- package/dist/components/widget/widget.class.js.map +1 -1
- package/dist/components/widget/widget.styles.d.ts.map +1 -1
- package/dist/components/widget/widget.styles.js +3 -2
- package/dist/components/widget/widget.styles.js.map +1 -1
- package/dist/components/word-cloud/word-cloud.class.d.ts +6 -0
- package/dist/components/word-cloud/word-cloud.class.d.ts.map +1 -1
- package/dist/components/word-cloud/word-cloud.class.js +22 -8
- package/dist/components/word-cloud/word-cloud.class.js.map +1 -1
- package/dist/internal/group-by-recency.d.ts +3 -2
- package/dist/internal/group-by-recency.d.ts.map +1 -1
- package/dist/internal/group-by-recency.js.map +1 -1
- package/dist/internal/localization.d.ts +1 -1
- package/dist/internal/localization.d.ts.map +1 -1
- package/dist/internal/localization.js +205 -0
- package/dist/internal/localization.js.map +1 -1
- package/dist/internal/root-registration-allowlist.d.ts +1 -1
- package/dist/internal/root-registration-allowlist.d.ts.map +1 -1
- package/dist/internal/root-registration-allowlist.js +1 -0
- package/dist/internal/root-registration-allowlist.js.map +1 -1
- package/dist/internal/tokens.styles.d.ts.map +1 -1
- package/dist/internal/tokens.styles.js +6 -2
- package/dist/internal/tokens.styles.js.map +1 -1
- package/dist/lyra.d.ts +17 -0
- package/dist/lyra.d.ts.map +1 -1
- package/dist/lyra.js +2 -0
- package/dist/lyra.js.map +1 -1
- package/llms-full.txt +48 -4
- package/llms.txt +1 -1
- package/package.json +4 -2
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styles = css `
|
|
3
|
+
:host {
|
|
4
|
+
display: block;
|
|
5
|
+
outline: none; /* the host is the focusable treeitem; the visible ring lives on [part=row] */
|
|
6
|
+
}
|
|
7
|
+
:host(:focus-visible) [part='row'] {
|
|
8
|
+
outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
|
|
9
|
+
outline-offset: var(--lyra-focus-ring-offset);
|
|
10
|
+
}
|
|
11
|
+
[part='row'] {
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
gap: var(--lyra-space-xs);
|
|
15
|
+
padding: var(--lyra-space-xs) var(--lyra-space-s);
|
|
16
|
+
/* Depth-based indent is capped at --lyra-size-8rem (8rem) so a deeply-nested
|
|
17
|
+
item can't push its content off-screen with no way back; [part=label]
|
|
18
|
+
below truncates the remaining overflow and tree.styles.ts's [part=base]
|
|
19
|
+
adds an overflow-x:auto fallback for whatever's left. */
|
|
20
|
+
padding-inline-start: calc(
|
|
21
|
+
var(--lyra-space-s) + min(var(--lyra-tree-depth, 0) * var(--lyra-space-l), var(--lyra-size-8rem))
|
|
22
|
+
);
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
border-radius: var(--lyra-radius);
|
|
25
|
+
}
|
|
26
|
+
[part='row']:hover {
|
|
27
|
+
background: var(--lyra-color-brand-quiet);
|
|
28
|
+
}
|
|
29
|
+
[part='toggle'] {
|
|
30
|
+
/* Deliberately smaller than the shared --lyra-icon-button-size (2.5rem,
|
|
31
|
+
for standalone icon-only buttons) — this toggle sits inline in a
|
|
32
|
+
compact row, but still needs a real touch target, not a 1rem hitbox. */
|
|
33
|
+
min-inline-size: var(--lyra-size-1-75rem);
|
|
34
|
+
min-block-size: var(--lyra-size-1-75rem);
|
|
35
|
+
padding: var(--lyra-space-xs);
|
|
36
|
+
display: inline-flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
border: none;
|
|
40
|
+
background: none;
|
|
41
|
+
color: var(--lyra-color-text-quiet);
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
flex: 0 0 auto;
|
|
44
|
+
}
|
|
45
|
+
[part='toggle'][hidden] {
|
|
46
|
+
/* visibility (not display) so the placeholder keeps its layout box --
|
|
47
|
+
a leaf row still lines up with sibling rows that do have a chevron. */
|
|
48
|
+
visibility: hidden;
|
|
49
|
+
}
|
|
50
|
+
:host([expanded]) [part='toggle'] {
|
|
51
|
+
transform: rotate(90deg);
|
|
52
|
+
}
|
|
53
|
+
[part='label'] {
|
|
54
|
+
flex: 1 1 auto;
|
|
55
|
+
min-inline-size: 0;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
text-overflow: ellipsis;
|
|
58
|
+
white-space: nowrap;
|
|
59
|
+
}
|
|
60
|
+
[part='badge'] {
|
|
61
|
+
font-size: var(--lyra-font-size-xs);
|
|
62
|
+
color: var(--lyra-color-text);
|
|
63
|
+
background: var(--lyra-color-border);
|
|
64
|
+
border-radius: var(--lyra-radius);
|
|
65
|
+
padding: 0 var(--lyra-space-xs);
|
|
66
|
+
}
|
|
67
|
+
`;
|
|
68
|
+
//# sourceMappingURL=tree-node.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree-node.styles.js","sourceRoot":"","sources":["../../../src/components/tree/tree-node.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiExB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
2
2
|
import { LyraElement } from '../../internal/lyra-element.js';
|
|
3
|
+
import '../empty/empty.class.js';
|
|
3
4
|
import './tree-node.class.js';
|
|
4
5
|
export interface TreeItem {
|
|
5
6
|
id: string;
|
|
@@ -21,7 +22,8 @@ export interface TreeItem {
|
|
|
21
22
|
* @customElement lyra-tree
|
|
22
23
|
* @event lyra-node-toggle - `detail: { id, expanded }`, dispatched by a descendant `<lyra-tree-node>` and observed here (bubbling, composed) to keep the roving-tabindex `activeId` in sync.
|
|
23
24
|
* @event lyra-node-select - `detail: { id }`, dispatched by a descendant `<lyra-tree-node>` and observed here (bubbling, composed) to keep the roving-tabindex `activeId` in sync.
|
|
24
|
-
* @csspart base
|
|
25
|
+
* @csspart base - The tree's root wrapper (role="tree").
|
|
26
|
+
* @csspart empty - The empty-state message shown when `data` is empty.
|
|
25
27
|
* @slot - `<lyra-tree-node>` elements (top-level tree items).
|
|
26
28
|
*/
|
|
27
29
|
export declare class LyraTree extends LyraElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.class.d.ts","sourceRoot":"","sources":["../../../src/components/tree/tree.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,OAAO,sBAAsB,CAAC;AAG9B,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED
|
|
1
|
+
{"version":3,"file":"tree.class.d.ts","sourceRoot":"","sources":["../../../src/components/tree/tree.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,OAAO,yBAAyB,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAG9B,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,QAAS,SAAQ,WAAW;IACvC,MAAM,CAAC,MAAM,iCAAgC;IAEb,IAAI,EAAE,QAAQ,EAAE,CAAM;IACtD,oLAAoL;IACxK,KAAK,SAAM;IAEd,OAAO,CAAC,QAAQ,CAAuB;IAChD,mNAAmN;IACnN,OAAO,CAAC,cAAc,CAAuB;IAE7C,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,UAAU;IAIlB;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,QAAQ;IAShB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAgBlD;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAS/C;IAED,kJAAkJ;IAClJ,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,SAAS;IAMjB;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,cAAc,CAEpB;IAEF;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,UAAgB,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC,CASpD;IAED,OAAO,CAAC,aAAa,CA2DnB;IAEF;;;;;;;;;;;;OAYG;IACG,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAW/B;IAED;;;;;;;OAOG;IACH,WAAW,IAAI,IAAI,CAQlB;IAED,MAAM,IAAI,cAAc,CAgBvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
|
@@ -11,6 +11,7 @@ import { tag } from '../../internal/prefix.js';
|
|
|
11
11
|
import { isRtl } from '../../internal/rtl.js';
|
|
12
12
|
import { styles } from './tree.styles.js';
|
|
13
13
|
import { cascadeUpdateComplete } from './update-cascade.js';
|
|
14
|
+
import '../empty/empty.class.js';
|
|
14
15
|
import './tree-node.class.js';
|
|
15
16
|
/**
|
|
16
17
|
* `<lyra-tree>` — an expand/collapse hierarchy for graph/document navigation.
|
|
@@ -26,7 +27,8 @@ import './tree-node.class.js';
|
|
|
26
27
|
* @customElement lyra-tree
|
|
27
28
|
* @event lyra-node-toggle - `detail: { id, expanded }`, dispatched by a descendant `<lyra-tree-node>` and observed here (bubbling, composed) to keep the roving-tabindex `activeId` in sync.
|
|
28
29
|
* @event lyra-node-select - `detail: { id }`, dispatched by a descendant `<lyra-tree-node>` and observed here (bubbling, composed) to keep the roving-tabindex `activeId` in sync.
|
|
29
|
-
* @csspart base
|
|
30
|
+
* @csspart base - The tree's root wrapper (role="tree").
|
|
31
|
+
* @csspart empty - The empty-state message shown when `data` is empty.
|
|
30
32
|
* @slot - `<lyra-tree-node>` elements (top-level tree items).
|
|
31
33
|
*/
|
|
32
34
|
export class LyraTree extends LyraElement {
|
|
@@ -309,6 +311,9 @@ export class LyraTree extends LyraElement {
|
|
|
309
311
|
@lyra-node-toggle=${this.onNodeActivate}
|
|
310
312
|
@lyra-node-select=${this.onNodeActivate}
|
|
311
313
|
>
|
|
314
|
+
${this.data.length === 0
|
|
315
|
+
? html `<lyra-empty part="empty" heading=${this.localize('noData')}></lyra-empty>`
|
|
316
|
+
: nothing}
|
|
312
317
|
<slot></slot>
|
|
313
318
|
</div>
|
|
314
319
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.class.js","sourceRoot":"","sources":["../../../src/components/tree/tree.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA4C,MAAM,KAAK,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,sBAAsB,CAAC;AAU9B
|
|
1
|
+
{"version":3,"file":"tree.class.js","sourceRoot":"","sources":["../../../src/components/tree/tree.class.ts"],"names":[],"mappings":"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"}
|
|
@@ -29,9 +29,10 @@ export type TypingIndicatorSize = 'sm' | 'md';
|
|
|
29
29
|
* accessible name derived from `label` is sufficient, set both as an
|
|
30
30
|
* `aria-label` on the host *and* as a visually-hidden text node in the
|
|
31
31
|
* shadow tree, so the name survives even if only one of the two is picked up
|
|
32
|
-
* by a given assistive-tech/browser pairing. An empty or
|
|
33
|
-
* `label` falls back to the
|
|
34
|
-
* than leaving the component with no accessible name at
|
|
32
|
+
* by a given assistive-tech/browser pairing. An untouched-default, empty, or
|
|
33
|
+
* whitespace-only `label` falls back to the localized "Thinking…" copy in
|
|
34
|
+
* both places, rather than leaving the component with no accessible name at
|
|
35
|
+
* all. The animated dots/pulse/cursor
|
|
35
36
|
* shape is `aria-hidden="true"` — it's decorative; `label` is the entire
|
|
36
37
|
* accessible content, so nothing narrates individual animation frames.
|
|
37
38
|
*
|
|
@@ -47,17 +48,19 @@ export declare class LyraTypingIndicator extends LyraElement {
|
|
|
47
48
|
variant: TypingIndicatorVariant;
|
|
48
49
|
/** Accessible name, exposed via `role="status"`. Not re-announced on every
|
|
49
50
|
* animation frame — only mount (and any later change to this property)
|
|
50
|
-
* produces a new announcement. An empty or
|
|
51
|
-
* back to the
|
|
52
|
-
* component never loses its accessible name. */
|
|
51
|
+
* produces a new announcement. An untouched-default, empty, or
|
|
52
|
+
* whitespace-only value falls back to the localized "Thinking…" copy (see
|
|
53
|
+
* `accessibleLabel`) so the component never loses its accessible name. */
|
|
53
54
|
label: string;
|
|
54
55
|
/** Compact sizing for dense layouts (e.g. inline with a message bubble). */
|
|
55
56
|
size: TypingIndicatorSize;
|
|
56
|
-
/** The accessible name actually used, falling back to the
|
|
57
|
-
* "Thinking…"
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
*
|
|
57
|
+
/** The accessible name actually used, falling back to the localized
|
|
58
|
+
* `'thinking'` message (`"Thinking…"` in English) when `label` is left at
|
|
59
|
+
* its untouched default or set to an empty/whitespace-only string --
|
|
60
|
+
* otherwise both the `aria-label` and the sr-only text node would go
|
|
61
|
+
* blank, leaving this purely-decorative component with no accessible name
|
|
62
|
+
* at all. A caller-customized `label` is used verbatim (not a translation
|
|
63
|
+
* concern), same convention as `<lyra-date-picker>`'s `previousLabel`. */
|
|
61
64
|
private get accessibleLabel();
|
|
62
65
|
protected willUpdate(changed: PropertyValues): void;
|
|
63
66
|
render(): TemplateResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typing-indicator.class.d.ts","sourceRoot":"","sources":["../../../src/components/typing-indicator/typing-indicator.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACjE,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C
|
|
1
|
+
{"version":3,"file":"typing-indicator.class.d.ts","sourceRoot":"","sources":["../../../src/components/typing-indicator/typing-indicator.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACjE,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBAAa,mBAAoB,SAAQ,WAAW;IAClD,MAAM,CAAC,MAAM,iCAAwC;IAErD,+CAA+C;IAClB,OAAO,EAAE,sBAAsB,CAAU;IAEtE;;;;+EAI2E;IAC/D,KAAK,SAAe;IAEhC,4EAA4E;IAC/C,IAAI,EAAE,mBAAmB,CAAQ;IAE9D;;;;;;+EAM2E;IAC3E,OAAO,KAAK,eAAe,GAG1B;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAKlD;IAED,MAAM,IAAI,cAAc,CAKvB;IAED,OAAO,CAAC,WAAW;CAWpB;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}
|
|
@@ -36,9 +36,10 @@ import { styles } from './typing-indicator.styles.js';
|
|
|
36
36
|
* accessible name derived from `label` is sufficient, set both as an
|
|
37
37
|
* `aria-label` on the host *and* as a visually-hidden text node in the
|
|
38
38
|
* shadow tree, so the name survives even if only one of the two is picked up
|
|
39
|
-
* by a given assistive-tech/browser pairing. An empty or
|
|
40
|
-
* `label` falls back to the
|
|
41
|
-
* than leaving the component with no accessible name at
|
|
39
|
+
* by a given assistive-tech/browser pairing. An untouched-default, empty, or
|
|
40
|
+
* whitespace-only `label` falls back to the localized "Thinking…" copy in
|
|
41
|
+
* both places, rather than leaving the component with no accessible name at
|
|
42
|
+
* all. The animated dots/pulse/cursor
|
|
42
43
|
* shape is `aria-hidden="true"` — it's decorative; `label` is the entire
|
|
43
44
|
* accessible content, so nothing narrates individual animation frames.
|
|
44
45
|
*
|
|
@@ -55,21 +56,24 @@ export class LyraTypingIndicator extends LyraElement {
|
|
|
55
56
|
this.variant = 'dots';
|
|
56
57
|
/** Accessible name, exposed via `role="status"`. Not re-announced on every
|
|
57
58
|
* animation frame — only mount (and any later change to this property)
|
|
58
|
-
* produces a new announcement. An empty or
|
|
59
|
-
* back to the
|
|
60
|
-
* component never loses its accessible name. */
|
|
59
|
+
* produces a new announcement. An untouched-default, empty, or
|
|
60
|
+
* whitespace-only value falls back to the localized "Thinking…" copy (see
|
|
61
|
+
* `accessibleLabel`) so the component never loses its accessible name. */
|
|
61
62
|
this.label = 'Thinking…';
|
|
62
63
|
/** Compact sizing for dense layouts (e.g. inline with a message bubble). */
|
|
63
64
|
this.size = 'md';
|
|
64
65
|
}
|
|
65
66
|
static { this.styles = [LyraElement.styles, styles, srOnly]; }
|
|
66
|
-
/** The accessible name actually used, falling back to the
|
|
67
|
-
* "Thinking…"
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
67
|
+
/** The accessible name actually used, falling back to the localized
|
|
68
|
+
* `'thinking'` message (`"Thinking…"` in English) when `label` is left at
|
|
69
|
+
* its untouched default or set to an empty/whitespace-only string --
|
|
70
|
+
* otherwise both the `aria-label` and the sr-only text node would go
|
|
71
|
+
* blank, leaving this purely-decorative component with no accessible name
|
|
72
|
+
* at all. A caller-customized `label` is used verbatim (not a translation
|
|
73
|
+
* concern), same convention as `<lyra-date-picker>`'s `previousLabel`. */
|
|
71
74
|
get accessibleLabel() {
|
|
72
|
-
|
|
75
|
+
const trimmed = this.label.trim();
|
|
76
|
+
return this.localize('thinking', trimmed === '' || trimmed === 'Thinking…' ? undefined : trimmed);
|
|
73
77
|
}
|
|
74
78
|
willUpdate(changed) {
|
|
75
79
|
this.setAttribute('role', 'status');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typing-indicator.class.js","sourceRoot":"","sources":["../../../src/components/typing-indicator/typing-indicator.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAKtD
|
|
1
|
+
{"version":3,"file":"typing-indicator.class.js","sourceRoot":"","sources":["../../../src/components/typing-indicator/typing-indicator.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAKtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,OAAO,mBAAoB,SAAQ,WAAW;IAApD;;QAGE,+CAA+C;QAClB,YAAO,GAA2B,MAAM,CAAC;QAEtE;;;;mFAI2E;QAC/D,UAAK,GAAG,WAAW,CAAC;QAEhC,4EAA4E;QAC/C,SAAI,GAAwB,IAAI,CAAC;IAuChE,CAAC;aApDQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,AAAvC,CAAwC;IAerD;;;;;;+EAM2E;IAC3E,IAAY,eAAe;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACpG,CAAC;IAES,UAAU,CAAC,OAAuB;QAC1C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACpC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;6CAC8B,IAAI,CAAC,WAAW,EAAE;8BACjC,IAAI,CAAC,eAAe;KAC7C,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA,4BAA4B,CAAC;YAC1C,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAA,6BAA6B,CAAC;YAC3C,KAAK,MAAM,CAAC;YACZ;gBACE,OAAO,IAAI,CAAA,0EAA0E,CAAC;QAC1F,CAAC;IACH,CAAC;CACF;AAjD8B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAA0C;AAO1D;IAAX,QAAQ,EAAE;kDAAqB;AAGH;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkC"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
// `--lyra-transition-
|
|
3
|
-
// the animation-cycle length for every
|
|
4
|
-
//
|
|
5
|
-
//
|
|
2
|
+
// `--lyra-transition-ambient` is used (rather than `--lyra-transition-fast`
|
|
3
|
+
// or `--lyra-transition-base`) as the animation-cycle length for every
|
|
4
|
+
// variant below: it's the token the library reserves for infinite looping
|
|
5
|
+
// "still alive" motion, whereas `-fast`/`-base` are reserved for snappy
|
|
6
6
|
// discrete state flips (checkbox check, switch thumb). A continuous ambient
|
|
7
|
-
// loop reads calmer at the longer
|
|
8
|
-
// value (`
|
|
9
|
-
// every `transition:` shorthand elsewhere in this library) so it can
|
|
10
|
-
// ever be spliced into the `animation:` *shorthand* below, never
|
|
11
|
-
// `animation-duration` alone -- that longhand requires a bare
|
|
12
|
-
// would silently invalidate (collapsing the duration to 0) if
|
|
13
|
-
// compound value. For the same reason no extra timing-function
|
|
14
|
-
// follow it in the shorthand: the token already supplies one.
|
|
7
|
+
// loop reads calmer at the longer duration. Note this token is a *compound*
|
|
8
|
+
// value (`1.8s ease-in-out`, duration + timing-function together, exactly
|
|
9
|
+
// like every `transition:` shorthand elsewhere in this library) so it can
|
|
10
|
+
// only ever be spliced into the `animation:` *shorthand* below, never
|
|
11
|
+
// assigned to `animation-duration` alone -- that longhand requires a bare
|
|
12
|
+
// `<time>` and would silently invalidate (collapsing the duration to 0) if
|
|
13
|
+
// given the compound value. For the same reason no extra timing-function
|
|
14
|
+
// keyword can follow it in the shorthand: the token already supplies one.
|
|
15
15
|
export const styles = css `
|
|
16
16
|
:host {
|
|
17
17
|
display: inline-flex;
|
|
@@ -42,18 +42,18 @@ export const styles = css `
|
|
|
42
42
|
border-radius: 50%;
|
|
43
43
|
background: currentColor;
|
|
44
44
|
opacity: 0.5;
|
|
45
|
-
animation: lyra-typing-dot-bounce var(--lyra-transition-
|
|
45
|
+
animation: lyra-typing-dot-bounce var(--lyra-transition-ambient) infinite;
|
|
46
46
|
}
|
|
47
|
-
/* Fixed (not token-derived) stagger offsets -- --lyra-transition-
|
|
47
|
+
/* Fixed (not token-derived) stagger offsets -- --lyra-transition-ambient is
|
|
48
48
|
a compound "duration timing-function" value like every other transition
|
|
49
49
|
token in this library, so it can't be decomposed via calc() to derive a
|
|
50
50
|
fraction of just its duration; these two delays approximate a third and
|
|
51
51
|
two-thirds of that token's own fallback duration. */
|
|
52
52
|
[part='dot']:nth-child(2) {
|
|
53
|
-
animation-delay:
|
|
53
|
+
animation-delay: 600ms;
|
|
54
54
|
}
|
|
55
55
|
[part='dot']:nth-child(3) {
|
|
56
|
-
animation-delay:
|
|
56
|
+
animation-delay: 1200ms;
|
|
57
57
|
}
|
|
58
58
|
@keyframes lyra-typing-dot-bounce {
|
|
59
59
|
0%,
|
|
@@ -77,7 +77,7 @@ export const styles = css `
|
|
|
77
77
|
background: currentColor;
|
|
78
78
|
opacity: 1;
|
|
79
79
|
transform: scale(1);
|
|
80
|
-
animation: lyra-typing-pulse var(--lyra-transition-
|
|
80
|
+
animation: lyra-typing-pulse var(--lyra-transition-ambient) infinite;
|
|
81
81
|
}
|
|
82
82
|
@keyframes lyra-typing-pulse {
|
|
83
83
|
0%,
|
|
@@ -103,7 +103,7 @@ export const styles = css `
|
|
|
103
103
|
background: currentColor;
|
|
104
104
|
border-radius: var(--lyra-typing-cursor-width);
|
|
105
105
|
opacity: 1;
|
|
106
|
-
animation: lyra-typing-cursor-blink var(--lyra-transition-
|
|
106
|
+
animation: lyra-typing-cursor-blink var(--lyra-transition-ambient) infinite;
|
|
107
107
|
}
|
|
108
108
|
@keyframes lyra-typing-cursor-blink {
|
|
109
109
|
0%,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typing-indicator.styles.js","sourceRoot":"","sources":["../../../src/components/typing-indicator/typing-indicator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,
|
|
1
|
+
{"version":3,"file":"typing-indicator.styles.js","sourceRoot":"","sources":["../../../src/components/typing-indicator/typing-indicator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,4EAA4E;AAC5E,uEAAuE;AACvE,0EAA0E;AAC1E,wEAAwE;AACxE,4EAA4E;AAC5E,4EAA4E;AAC5E,0EAA0E;AAC1E,0EAA0E;AAC1E,sEAAsE;AACtE,0EAA0E;AAC1E,2EAA2E;AAC3E,yEAAyE;AACzE,0EAA0E;AAC1E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHxB,CAAC"}
|
|
@@ -2,13 +2,27 @@ import { type TemplateResult, type PropertyValues } from 'lit';
|
|
|
2
2
|
import { LyraElement } from '../../internal/lyra-element.js';
|
|
3
3
|
export interface WidgetView {
|
|
4
4
|
id: string;
|
|
5
|
-
label
|
|
5
|
+
/** Visible label text. Optional so a toggle can be icon-only (`icon` set, `label` omitted) --
|
|
6
|
+
* set `ariaLabel` too in that case so the button keeps a real accessible name; see `ariaLabel`'s
|
|
7
|
+
* own doc for what happens if both are left unset. */
|
|
8
|
+
label?: string;
|
|
6
9
|
icon?: TemplateResult;
|
|
10
|
+
/** Accessible name for the toggle button, used only when `label` is omitted -- ignored otherwise,
|
|
11
|
+
* since the visible label text already supplies the accessible name. If both `label` and
|
|
12
|
+
* `ariaLabel` are omitted, the button falls back to its own `id` as a last-resort accessible name:
|
|
13
|
+
* not silently unlabeled, but not a good name either, so set one of the two for any icon-only view. */
|
|
14
|
+
ariaLabel?: string;
|
|
7
15
|
}
|
|
8
16
|
export interface LyraWidgetEventMap {
|
|
9
|
-
'lyra-collapse-change': CustomEvent<
|
|
10
|
-
|
|
11
|
-
|
|
17
|
+
'lyra-collapse-change': CustomEvent<{
|
|
18
|
+
collapsed: boolean;
|
|
19
|
+
}>;
|
|
20
|
+
'lyra-fullscreen-change': CustomEvent<{
|
|
21
|
+
fullscreen: boolean;
|
|
22
|
+
}>;
|
|
23
|
+
'lyra-view-change': CustomEvent<{
|
|
24
|
+
viewId: string;
|
|
25
|
+
}>;
|
|
12
26
|
}
|
|
13
27
|
/**
|
|
14
28
|
* `<lyra-widget>` — a titled panel shell with an optional collapse toggle and
|
|
@@ -22,10 +36,21 @@ export interface LyraWidgetEventMap {
|
|
|
22
36
|
* @slot label - Rich label content (overrides the `label` attribute).
|
|
23
37
|
* @slot sublabel - Rich sublabel content (overrides the `sublabel` attribute).
|
|
24
38
|
* @slot actions - Header action controls, rendered before the collapse/expand buttons.
|
|
25
|
-
* @
|
|
26
|
-
*
|
|
39
|
+
* @slot collapse-icon - Overrides the built-in chevron glyph inside the collapse/expand toggle
|
|
40
|
+
* button entirely, via the platform's own slot-fallback-content mechanism (same convention as
|
|
41
|
+
* `<lyra-tool-call-chip>`'s `icon` slot): whatever is assigned wins, otherwise the default chevron
|
|
42
|
+
* renders. Only meaningful while `collapsible`.
|
|
43
|
+
* @slot fullscreen-icon - Overrides the built-in expand/close glyph inside the fullscreen toggle
|
|
44
|
+
* button entirely, using the same mechanism -- the override replaces *both* the "expand" and
|
|
45
|
+
* "exit fullscreen" default icons, so a consumer supplying one is responsible for its own
|
|
46
|
+
* expand/exit distinction (e.g. by reading the `fullscreen` attribute). Only meaningful while
|
|
47
|
+
* `expandable`.
|
|
48
|
+
* @slot view-{id} - Content for the view whose `WidgetView.id` matches `{id}`, rendered when
|
|
49
|
+
* `views` is non-empty.
|
|
50
|
+
* @event lyra-collapse-change - `detail: { collapsed }` (the new `collapsed` state).
|
|
51
|
+
* @event lyra-fullscreen-change - `detail: { fullscreen }` (the new `fullscreen` state).
|
|
27
52
|
* @event lyra-view-change - Fired when the active view changes via a header toggle click.
|
|
28
|
-
* `detail:
|
|
53
|
+
* `detail: { viewId }` (the new view's `id`).
|
|
29
54
|
* @csspart base - The panel root (dialog role + backdrop when fullscreen).
|
|
30
55
|
* @csspart header - The header row containing the title, actions, and toggle buttons.
|
|
31
56
|
* @csspart title - The wrapper around the label/sublabel.
|
|
@@ -57,11 +82,17 @@ export declare class LyraWidget extends LyraElement<LyraWidgetEventMap> {
|
|
|
57
82
|
* `var(--lyra-space-l)` on every side — e.g. `"0 0 0 240px"` to leave a 240px persistent sidebar
|
|
58
83
|
* visible while fullscreen. */
|
|
59
84
|
fullscreenInset: string;
|
|
85
|
+
/** Overrides the fullscreen *backdrop*'s own inset independent of `fullscreen-inset` -- e.g.
|
|
86
|
+
* `"0"` to dim the full viewport-to-panel-edge region while the panel itself keeps a narrower
|
|
87
|
+
* `fullscreen-inset`. Unset (the default) falls back to `fullscreen-inset`, i.e. today's exact
|
|
88
|
+
* coupled behavior. */
|
|
89
|
+
backdropInset: string;
|
|
60
90
|
/** Tighter header/body padding for constrained spaces. */
|
|
61
91
|
compact: boolean;
|
|
62
92
|
/** Named alternate views for the panel body -- e.g. a chart/table toggle inside the same card
|
|
63
93
|
* chrome. Each entry gets a header toggle button and a `<slot name="view-${id}">`. Empty (the
|
|
64
|
-
* default) renders today's single unnamed default slot as the sole view, unchanged.
|
|
94
|
+
* default) renders today's single unnamed default slot as the sole view, unchanged. An entry's
|
|
95
|
+
* `label` is optional -- see `WidgetView`'s own doc for the icon-only (`ariaLabel`) case. */
|
|
65
96
|
views: WidgetView[];
|
|
66
97
|
/** The currently active view's `id` -- defaults to the first entry of `views` (or `''` when
|
|
67
98
|
* `views` is empty). Settable directly by a consumer wanting to control the active view
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.class.d.ts","sourceRoot":"","sources":["../../../src/components/widget/widget.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAY7D,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"widget.class.d.ts","sourceRoot":"","sources":["../../../src/components/widget/widget.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAY7D,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX;;2DAEuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;4GAGwG;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,sBAAsB,EAAE,WAAW,CAAC;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC5D,wBAAwB,EAAE,WAAW,CAAC;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC/D,kBAAkB,EAAE,WAAW,CAAC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACrD;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBAAa,UAAW,SAAQ,WAAW,CAAC,kBAAkB,CAAC;IAC7D,MAAM,CAAC,MAAM,iCAAgC;IAEjC,KAAK,SAAM;IACX,QAAQ,SAAM;IACkB,WAAW,UAAS;IACpB,SAAS,UAAS;IAClB,UAAU,UAAS;IACnB,UAAU,UAAS;IAC/D;;oCAEgC;IACa,eAAe,SAAM;IAClE;;;4BAGwB;IACmB,aAAa,SAAM;IAC9D,0DAA0D;IACd,OAAO,UAAS;IAC5D;;;kGAG8F;IAC9D,KAAK,EAAE,UAAU,EAAE,CAAM;IAEzD;;6EAEyE;IACzC,UAAU,SAAM;IAEvC,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,eAAe,CAAS;IAEzC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,aAAa,CAAC,CAAgB;IACtC,OAAO,CAAC,eAAe,CAAC,CAAc;IACtC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAyB;IAEhD,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAiBlD;IAeD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAW/C;IAED,iBAAiB,IAAI,IAAI,CAgBxB;IAED,oBAAoB,IAAI,IAAI,CAK3B;IAED,OAAO,CAAC,yBAAyB;IAYjC,OAAO,CAAC,2BAA2B;IAOnC,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,gBAAgB,CAItB;IAEF,OAAO,CAAC,iBAAiB,CAIvB;IAEF,OAAO,CAAC,eAAe,CAErB;IAEF,MAAM,IAAI,cAAc,CAmGvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
|
@@ -24,10 +24,21 @@ import { styles } from './widget.styles.js';
|
|
|
24
24
|
* @slot label - Rich label content (overrides the `label` attribute).
|
|
25
25
|
* @slot sublabel - Rich sublabel content (overrides the `sublabel` attribute).
|
|
26
26
|
* @slot actions - Header action controls, rendered before the collapse/expand buttons.
|
|
27
|
-
* @
|
|
28
|
-
*
|
|
27
|
+
* @slot collapse-icon - Overrides the built-in chevron glyph inside the collapse/expand toggle
|
|
28
|
+
* button entirely, via the platform's own slot-fallback-content mechanism (same convention as
|
|
29
|
+
* `<lyra-tool-call-chip>`'s `icon` slot): whatever is assigned wins, otherwise the default chevron
|
|
30
|
+
* renders. Only meaningful while `collapsible`.
|
|
31
|
+
* @slot fullscreen-icon - Overrides the built-in expand/close glyph inside the fullscreen toggle
|
|
32
|
+
* button entirely, using the same mechanism -- the override replaces *both* the "expand" and
|
|
33
|
+
* "exit fullscreen" default icons, so a consumer supplying one is responsible for its own
|
|
34
|
+
* expand/exit distinction (e.g. by reading the `fullscreen` attribute). Only meaningful while
|
|
35
|
+
* `expandable`.
|
|
36
|
+
* @slot view-{id} - Content for the view whose `WidgetView.id` matches `{id}`, rendered when
|
|
37
|
+
* `views` is non-empty.
|
|
38
|
+
* @event lyra-collapse-change - `detail: { collapsed }` (the new `collapsed` state).
|
|
39
|
+
* @event lyra-fullscreen-change - `detail: { fullscreen }` (the new `fullscreen` state).
|
|
29
40
|
* @event lyra-view-change - Fired when the active view changes via a header toggle click.
|
|
30
|
-
* `detail:
|
|
41
|
+
* `detail: { viewId }` (the new view's `id`).
|
|
31
42
|
* @csspart base - The panel root (dialog role + backdrop when fullscreen).
|
|
32
43
|
* @csspart header - The header row containing the title, actions, and toggle buttons.
|
|
33
44
|
* @csspart title - The wrapper around the label/sublabel.
|
|
@@ -60,11 +71,17 @@ export class LyraWidget extends LyraElement {
|
|
|
60
71
|
* `var(--lyra-space-l)` on every side — e.g. `"0 0 0 240px"` to leave a 240px persistent sidebar
|
|
61
72
|
* visible while fullscreen. */
|
|
62
73
|
this.fullscreenInset = '';
|
|
74
|
+
/** Overrides the fullscreen *backdrop*'s own inset independent of `fullscreen-inset` -- e.g.
|
|
75
|
+
* `"0"` to dim the full viewport-to-panel-edge region while the panel itself keeps a narrower
|
|
76
|
+
* `fullscreen-inset`. Unset (the default) falls back to `fullscreen-inset`, i.e. today's exact
|
|
77
|
+
* coupled behavior. */
|
|
78
|
+
this.backdropInset = '';
|
|
63
79
|
/** Tighter header/body padding for constrained spaces. */
|
|
64
80
|
this.compact = false;
|
|
65
81
|
/** Named alternate views for the panel body -- e.g. a chart/table toggle inside the same card
|
|
66
82
|
* chrome. Each entry gets a header toggle button and a `<slot name="view-${id}">`. Empty (the
|
|
67
|
-
* default) renders today's single unnamed default slot as the sole view, unchanged.
|
|
83
|
+
* default) renders today's single unnamed default slot as the sole view, unchanged. An entry's
|
|
84
|
+
* `label` is optional -- see `WidgetView`'s own doc for the icon-only (`ariaLabel`) case. */
|
|
68
85
|
this.views = [];
|
|
69
86
|
/** The currently active view's `id` -- defaults to the first entry of `views` (or `''` when
|
|
70
87
|
* `views` is empty). Settable directly by a consumer wanting to control the active view
|
|
@@ -91,23 +108,23 @@ export class LyraWidget extends LyraElement {
|
|
|
91
108
|
if (id === this.activeView)
|
|
92
109
|
return;
|
|
93
110
|
this.activeView = id;
|
|
94
|
-
this.emit('lyra-view-change', id);
|
|
111
|
+
this.emit('lyra-view-change', { viewId: id });
|
|
95
112
|
};
|
|
96
113
|
this.toggleCollapsed = () => {
|
|
97
114
|
this.collapsed = !this.collapsed;
|
|
98
|
-
this.emit('lyra-collapse-change', this.collapsed);
|
|
115
|
+
this.emit('lyra-collapse-change', { collapsed: this.collapsed });
|
|
99
116
|
};
|
|
100
117
|
this.toggleFullscreen = (e) => {
|
|
101
118
|
if (!this.fullscreen)
|
|
102
119
|
this.explicitTrigger = e.currentTarget;
|
|
103
120
|
this.fullscreen = !this.fullscreen;
|
|
104
|
-
this.emit('lyra-fullscreen-change', this.fullscreen);
|
|
121
|
+
this.emit('lyra-fullscreen-change', { fullscreen: this.fullscreen });
|
|
105
122
|
};
|
|
106
123
|
this.dismissFullscreen = () => {
|
|
107
124
|
if (!this.fullscreen)
|
|
108
125
|
return;
|
|
109
126
|
this.fullscreen = false;
|
|
110
|
-
this.emit('lyra-fullscreen-change', false);
|
|
127
|
+
this.emit('lyra-fullscreen-change', { fullscreen: false });
|
|
111
128
|
};
|
|
112
129
|
this.onBackdropClick = () => {
|
|
113
130
|
this.overlayHandle?.dismissBackdrop();
|
|
@@ -209,7 +226,20 @@ export class LyraWidget extends LyraElement {
|
|
|
209
226
|
${this.fullscreen
|
|
210
227
|
? html `<div
|
|
211
228
|
part="backdrop"
|
|
212
|
-
style=${
|
|
229
|
+
style=${(() => {
|
|
230
|
+
const decls = [];
|
|
231
|
+
if (this.fullscreenInset)
|
|
232
|
+
decls.push(`--lyra-widget-fullscreen-inset:${this.fullscreenInset}`);
|
|
233
|
+
// A custom property's var() fallback resolves per-element using that element's own
|
|
234
|
+
// cascade, but `:host`'s `--lyra-widget-backdrop-inset: var(--lyra-widget-fullscreen-inset)`
|
|
235
|
+
// is always *set* (never invalid), so its inherited (already-resolved-at-:host) value
|
|
236
|
+
// wins over this div's own local `--lyra-widget-fullscreen-inset` override -- the CSS
|
|
237
|
+
// fallback chain alone can't see it. Resolve the fallback here in JS instead.
|
|
238
|
+
const backdropInset = this.backdropInset || this.fullscreenInset;
|
|
239
|
+
if (backdropInset)
|
|
240
|
+
decls.push(`--lyra-widget-backdrop-inset:${backdropInset}`);
|
|
241
|
+
return decls.length ? decls.join(';') : nothing;
|
|
242
|
+
})()}
|
|
213
243
|
@click=${this.onBackdropClick}
|
|
214
244
|
></div>`
|
|
215
245
|
: nothing}
|
|
@@ -217,7 +247,7 @@ export class LyraWidget extends LyraElement {
|
|
|
217
247
|
part="base"
|
|
218
248
|
role=${this.fullscreen ? 'dialog' : nothing}
|
|
219
249
|
aria-modal=${this.fullscreen ? 'true' : nothing}
|
|
220
|
-
aria-label=${this.fullscreen ? (hasLabel ? this.label : '
|
|
250
|
+
aria-label=${this.fullscreen ? (hasLabel ? this.label : this.localize('widgetFullscreenPanel')) : nothing}
|
|
221
251
|
tabindex=${this.fullscreen ? '-1' : nothing}
|
|
222
252
|
style=${this.fullscreenInset ? `--lyra-widget-fullscreen-inset:${this.fullscreenInset}` : nothing}
|
|
223
253
|
>
|
|
@@ -239,13 +269,21 @@ export class LyraWidget extends LyraElement {
|
|
|
239
269
|
<slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
|
|
240
270
|
</div>
|
|
241
271
|
${this.views.length > 0
|
|
242
|
-
? html `<div part="view-toggles" role="group" aria-label
|
|
243
|
-
${this.views.map((v) =>
|
|
272
|
+
? html `<div part="view-toggles" role="group" aria-label=${this.localize('widgetViewGroup')}>
|
|
273
|
+
${this.views.map((v) => {
|
|
274
|
+
// `label` supplies the accessible name via its own visible text, same as
|
|
275
|
+
// before -- aria-label is only ever added for an icon-only toggle (`label`
|
|
276
|
+
// omitted), where `ariaLabel` is the intended name and `id` is the last-resort
|
|
277
|
+
// fallback if even that's missing (see WidgetView's doc).
|
|
278
|
+
const hasLabel = !!v.label;
|
|
279
|
+
return html `<button
|
|
244
280
|
part="view-toggle"
|
|
245
281
|
type="button"
|
|
246
282
|
aria-pressed=${v.id === this.activeView ? 'true' : 'false'}
|
|
283
|
+
aria-label=${hasLabel ? nothing : v.ariaLabel || v.id}
|
|
247
284
|
@click=${() => this.setActiveView(v.id)}
|
|
248
|
-
>${v.icon ?? nothing}${v.label}</button
|
|
285
|
+
>${v.icon ?? nothing}${v.label ?? nothing}</button>`;
|
|
286
|
+
})}
|
|
249
287
|
</div>`
|
|
250
288
|
: nothing}
|
|
251
289
|
${this.collapsible
|
|
@@ -253,12 +291,12 @@ export class LyraWidget extends LyraElement {
|
|
|
253
291
|
part="collapse-button"
|
|
254
292
|
type="button"
|
|
255
293
|
aria-expanded=${this.collapsed ? 'false' : 'true'}
|
|
256
|
-
aria-label=${this.collapsed ? '
|
|
294
|
+
aria-label=${this.collapsed ? this.localize('dockPanelExpand') : this.localize('dockPanelCollapse')}
|
|
257
295
|
aria-controls=${this.bodyId}
|
|
258
296
|
style="transform:rotate(${this.collapsed ? '0deg' : '90deg'})"
|
|
259
297
|
@click=${this.toggleCollapsed}
|
|
260
298
|
>
|
|
261
|
-
|
|
299
|
+
<slot name="collapse-icon">${chevronIcon()}</slot>
|
|
262
300
|
</button>`
|
|
263
301
|
: nothing}
|
|
264
302
|
${this.expandable
|
|
@@ -266,10 +304,10 @@ export class LyraWidget extends LyraElement {
|
|
|
266
304
|
part="fullscreen-button"
|
|
267
305
|
type="button"
|
|
268
306
|
aria-pressed=${this.fullscreen ? 'true' : 'false'}
|
|
269
|
-
aria-label=${this.fullscreen ? '
|
|
307
|
+
aria-label=${this.fullscreen ? this.localize('widgetExitFullscreen') : this.localize('widgetExpandToFullscreen')}
|
|
270
308
|
@click=${this.toggleFullscreen}
|
|
271
309
|
>
|
|
272
|
-
|
|
310
|
+
<slot name="fullscreen-icon">${this.fullscreen ? closeIcon() : expandIcon()}</slot>
|
|
273
311
|
</button>`
|
|
274
312
|
: nothing}
|
|
275
313
|
</div>
|
|
@@ -303,6 +341,9 @@ __decorate([
|
|
|
303
341
|
__decorate([
|
|
304
342
|
property({ attribute: 'fullscreen-inset' })
|
|
305
343
|
], LyraWidget.prototype, "fullscreenInset", void 0);
|
|
344
|
+
__decorate([
|
|
345
|
+
property({ attribute: 'backdrop-inset' })
|
|
346
|
+
], LyraWidget.prototype, "backdropInset", void 0);
|
|
306
347
|
__decorate([
|
|
307
348
|
property({ type: Boolean, reflect: true })
|
|
308
349
|
], LyraWidget.prototype, "compact", void 0);
|