@aceshooting/lyra-ui 9.1.1 → 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 +597 -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 +1 -1
- 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 +7 -5
- 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.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.styles.js +3 -5
- 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.styles.js +0 -46
- package/dist/components/agent-tools/eval-dataset/eval-dataset.styles.js +0 -7
- package/dist/components/agent-tools/evaluation-run/evaluation-run.class.js +2 -2
- 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 +0 -3
- 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 +0 -3
- 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.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.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.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.styles.js +7 -31
- package/dist/components/charts/chart/box-plot.styles.js +0 -20
- 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/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/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.styles.js +7 -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/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 +0 -23
- 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.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/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 +84 -1
- 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.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 +0 -105
- 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 +0 -37
- 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 +3 -11
- 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.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.styles.js +0 -63
- 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 +1 -1
- package/dist/components/media/attachment-chip/attachment-chip.styles.js +0 -31
- package/dist/components/media/attachment-trigger/attachment-trigger.class.js +3 -3
- 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.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 +0 -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 +0 -11
- 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.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 +1 -1
- package/dist/components/overlays/popup/popup.class.d.ts +1 -0
- package/dist/components/overlays/popup/popup.class.js +1 -1
- 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 +0 -3
- 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.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/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/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 +0 -16
- 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.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.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.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/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.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.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 +27 -4
- package/dist/internal/dev-mode-attribute-warning.js +1 -1
- package/dist/internal/localization-runtime.js +1 -1
- package/dist/internal/localization-types.d.ts +1 -1
- package/dist/internal/localization.js +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 +7 -4
- 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 +28 -0
- 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/peers.md +12 -2
- package/llms/shared.md +70 -2
- package/llms-full.txt +1143 -285
- package/package.json +17 -5
- package/vscode-css-data.json +37 -2
- package/vscode-html-data.json +401 -44
- package/web-types.json +299 -55
|
@@ -1,20 +1,10 @@
|
|
|
1
1
|
import{css}from"lit";const styles=css`
|
|
2
2
|
:host {
|
|
3
|
-
/* Backdrop scrim color -- component-specific so a host can retheme it
|
|
4
|
-
without a raw literal leaking into the public API (no shared
|
|
5
|
-
--lr-*-overlay token exists in the design system to resolve through,
|
|
6
|
-
same rationale as lr-widget's --lr-widget-overlay-color). */
|
|
7
3
|
--_lr-dialog-overlay-color: var(--lr-color-overlay);
|
|
8
4
|
display: none;
|
|
9
5
|
position: fixed;
|
|
10
6
|
inset: 0;
|
|
11
7
|
z-index: var(--lr-overlay-stack-index, var(--lr-layer-modal));
|
|
12
|
-
/* The host is promoted into the browser top layer through the popover API while it is open,
|
|
13
|
-
so no consumer stacking context can trap it. The z-index above is only the fallback for a
|
|
14
|
-
user agent without popover support. These six declarations neutralize the user-agent
|
|
15
|
-
styles that come with the popover attribute (a fit-content auto-margined box with a solid
|
|
16
|
-
border, its own padding, and an opaque Canvas background), leaving the host exactly the
|
|
17
|
-
full-viewport transparent frame it was before. */
|
|
18
8
|
margin: 0;
|
|
19
9
|
border: none;
|
|
20
10
|
background: transparent;
|
|
@@ -34,10 +24,6 @@ import{css}from"lit";const styles=css`
|
|
|
34
24
|
:host([open]) {
|
|
35
25
|
display: flex;
|
|
36
26
|
}
|
|
37
|
-
/* The exit animation needs the panel to stay rendered after open flips to false. The attribute
|
|
38
|
-
is written by the component for exactly as long as that animation runs, and is removed again
|
|
39
|
-
before lr-after-hide fires. Pointer input is dead for that window so a dismissing dialog
|
|
40
|
-
cannot swallow a click meant for the page underneath. */
|
|
41
27
|
:host([data-closing]) {
|
|
42
28
|
display: flex;
|
|
43
29
|
pointer-events: none;
|
|
@@ -59,16 +45,7 @@ import{css}from"lit";const styles=css`
|
|
|
59
45
|
display: flex;
|
|
60
46
|
flex-direction: column;
|
|
61
47
|
min-inline-size: 0;
|
|
62
|
-
/* --lr-dialog-width is an assertive width (unset/auto by default -- the panel shrink-wraps to
|
|
63
|
-
content, unchanged) capped by the same max-inline-size below and by the viewport. */
|
|
64
48
|
inline-size: var(--width, var(--lr-dialog-width, auto));
|
|
65
|
-
/* --lr-dialog-max-width lets a consumer widen/narrow the panel per
|
|
66
|
-
instance (e.g. inline on the host) without overriding the whole rule --
|
|
67
|
-
same convention as lr-media-card's --lr-media-card-max-height. When
|
|
68
|
-
--lr-dialog-width is set but --lr-dialog-max-width is left at its
|
|
69
|
-
default, the cap falls back to the requested width itself (not the
|
|
70
|
-
32rem default) so an assertive width isn't silently clipped by the
|
|
71
|
-
old shrink-to-fit cap -- the viewport (100%) is still a hard limit. */
|
|
72
49
|
max-inline-size: min(
|
|
73
50
|
var(
|
|
74
51
|
--lr-dialog-max-width,
|
|
@@ -77,16 +54,9 @@ import{css}from"lit";const styles=css`
|
|
|
77
54
|
100%
|
|
78
55
|
);
|
|
79
56
|
max-block-size: 100%;
|
|
80
|
-
/* The modal-panel surface, NOT the page surface. In dark mode --lr-color-surface is the same
|
|
81
|
-
near-black as the page behind the scrim, so a dialog painted with it reads as a scrim with
|
|
82
|
-
text floating on it and no panel at all. In light mode the token still resolves to the page
|
|
83
|
-
surface, so nothing changes there. */
|
|
84
57
|
background: var(--lr-color-surface-overlay);
|
|
85
58
|
border: var(--lr-border-width-thin) solid var(--lr-color-border);
|
|
86
59
|
border-radius: var(--lr-radius);
|
|
87
|
-
/* Modal layer, and the deepest one: a centered dialog floats free on all four edges over a
|
|
88
|
-
scrim, so it takes the top step of the elevation scale. lr-drawer, which extends this rule,
|
|
89
|
-
steps back down to --lr-shadow-l because three of its edges are flush with the viewport. */
|
|
90
60
|
box-shadow: var(--lr-shadow-xl);
|
|
91
61
|
overflow: auto;
|
|
92
62
|
}
|
|
@@ -147,8 +117,6 @@ import{css}from"lit";const styles=css`
|
|
|
147
117
|
border-radius: var(--lr-radius);
|
|
148
118
|
cursor: pointer;
|
|
149
119
|
}
|
|
150
|
-
/* Once a header-actions group has claimed the auto margin, the close button must not claim a
|
|
151
|
-
second one or it would be pushed away from the group it belongs beside. */
|
|
152
120
|
[part="header-actions"] + [part~="close-button"] {
|
|
153
121
|
margin-inline-start: 0;
|
|
154
122
|
}
|
|
@@ -156,11 +124,6 @@ import{css}from"lit";const styles=css`
|
|
|
156
124
|
background: var(--lr-color-brand-quiet);
|
|
157
125
|
color: var(--lr-color-brand);
|
|
158
126
|
}
|
|
159
|
-
/* Pressed drives the hover's quiet brand fill further toward --lr-color-mix-partner (which
|
|
160
|
-
follows the text colour), so it darkens on a light theme and lightens on a dark one without
|
|
161
|
-
this rule knowing which is in force -- the property filter: brightness() never had. The glyph
|
|
162
|
-
colour is restated rather than left to the hover rule because keyboard activation raises
|
|
163
|
-
:active with no :hover. */
|
|
164
127
|
[part~="close-button"]:active {
|
|
165
128
|
background: color-mix(
|
|
166
129
|
in oklab,
|
|
@@ -186,9 +149,6 @@ import{css}from"lit";const styles=css`
|
|
|
186
149
|
overflow: auto;
|
|
187
150
|
overflow-wrap: anywhere;
|
|
188
151
|
}
|
|
189
|
-
/* The body carries tabindex="-1" so an overflowing dialog can be scrolled from the keyboard;
|
|
190
|
-
once it can hold focus it has to say so. Inset offset because the body is flush with the
|
|
191
|
-
panel edges, where an outset ring would be clipped or would overlap the header rule. */
|
|
192
152
|
[part="body"]:focus-visible {
|
|
193
153
|
outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
|
|
194
154
|
outline-offset: calc(-1 * var(--lr-focus-ring-offset));
|
|
@@ -212,9 +172,6 @@ import{css}from"lit";const styles=css`
|
|
|
212
172
|
border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border);
|
|
213
173
|
overflow-wrap: anywhere;
|
|
214
174
|
}
|
|
215
|
-
/* Footer content is consumer-owned light DOM, so the wrapper's responsive rules do not select
|
|
216
|
-
it directly. Keep each assigned action capable of shrinking to the panel and inherit the
|
|
217
|
-
same emergency-wrap policy for a localized or identifier-like label. */
|
|
218
175
|
[part="footer"] ::slotted(*) {
|
|
219
176
|
min-inline-size: 0;
|
|
220
177
|
max-inline-size: 100%;
|
|
@@ -7,7 +7,7 @@ export type LyraDrawerPlacement = 'start' | 'end' | 'top' | 'bottom';
|
|
|
7
7
|
* viewport. It shares Lyra's dialog focus trap, Escape/backdrop dismissal,
|
|
8
8
|
* scroll lock, top-layer promotion, stacking, accessible naming,
|
|
9
9
|
* `show()`/`hide()`/`close()` surface, and the whole
|
|
10
|
-
* `lr-show`/`lr-after-show`/`lr-hide`/`lr-after-hide`/`lr-
|
|
10
|
+
* `lr-show`/`lr-after-show`/`lr-hide`/`lr-after-hide`/`lr-close` lifecycle — see
|
|
11
11
|
* `<lr-dialog>` for all of it. `contained` instead positions within the nearest containing block
|
|
12
12
|
* as a nonmodal panel: no backdrop, inerting, focus trap, scroll lock, top layer, or global Escape.
|
|
13
13
|
* Only that mode, the slide animation, `placement`, and the `--size` alias are drawer-specific.
|
|
@@ -26,7 +26,7 @@ export type LyraDrawerPlacement = 'start' | 'end' | 'top' | 'bottom';
|
|
|
26
26
|
* @event lr-after-hide - The drawer is closed and has finished sliding out.
|
|
27
27
|
* @event lr-initial-focus - Inherited cancelable event before automatic modal focus movement.
|
|
28
28
|
* @event lr-request-close - Inherited cancelable built-in dismissal request with a source detail.
|
|
29
|
-
* @event lr-
|
|
29
|
+
* @event lr-close - Inherited conditionally cancelable close event; detail is the dismissal
|
|
30
30
|
* reason. Ordinary dismissal can be vetoed; an `'unmount'` notification after external removal
|
|
31
31
|
* cannot be.
|
|
32
32
|
* It inherits every `<lr-dialog>` CSS part unchanged.
|
|
@@ -36,9 +36,6 @@ import{css}from"lit";const styles=css`
|
|
|
36
36
|
max-inline-size: min(var(--lr-dialog-max-width, 100%), 100%);
|
|
37
37
|
max-block-size: 100%;
|
|
38
38
|
border-radius: 0;
|
|
39
|
-
/* Modal layer, one step below lr-dialog's --lr-shadow-xl: an edge-anchored sheet is flush with
|
|
40
|
-
three viewport edges, so only the one inward edge can cast anything. The surface itself keeps
|
|
41
|
-
the inherited --lr-color-surface-overlay. */
|
|
42
39
|
box-shadow: var(--lr-shadow-l);
|
|
43
40
|
}
|
|
44
41
|
:host([placement="top"]) [part~="panel"],
|
|
@@ -54,12 +51,6 @@ import{css}from"lit";const styles=css`
|
|
|
54
51
|
:host([placement="end"]) [part~="panel"] {
|
|
55
52
|
--_lr-drawer-enter-x: var(--lr-size-1rem);
|
|
56
53
|
}
|
|
57
|
-
/* translateX is a physical transform -- logical properties don't cover it -- so the
|
|
58
|
-
enter-from offset is flipped explicitly under RTL, the same way app-rail's offscreen
|
|
59
|
-
panel transform is. A 'start' drawer rests at the physical right edge under RTL and
|
|
60
|
-
must enter from further right (positive X); an 'end' drawer rests at the physical left
|
|
61
|
-
edge and must enter from further left (negative X) -- the mirror image of the LTR rules
|
|
62
|
-
above. */
|
|
63
54
|
:host(:dir(rtl)) [part~="panel"] {
|
|
64
55
|
--_lr-drawer-enter-x: var(--lr-size-1rem);
|
|
65
56
|
}
|
|
@@ -16,16 +16,9 @@ import{css}from"lit";const styles=css`
|
|
|
16
16
|
inline-size: 100%;
|
|
17
17
|
}
|
|
18
18
|
:host([compact]) [part='base'] {
|
|
19
|
-
/* One custom property feeds both declarations from different fallback literals (today's exact
|
|
20
|
-
flex-start/start pair). Works because 'center' -- the one realistic override -- is a valid
|
|
21
|
-
value for both align-items and text-align; a consumer sets this once and both pick it up. */
|
|
22
19
|
align-items: var(--lr-empty-compact-align, flex-start);
|
|
23
20
|
text-align: var(--lr-empty-compact-align, start);
|
|
24
21
|
padding: var(--lr-empty-compact-padding, var(--lr-space-xs));
|
|
25
|
-
/* Same density-reduction convention as lr-file-input's :host([compact]) rule (which explicitly
|
|
26
|
-
models itself on this one): compact must shrink every dimension the base rule sets for this
|
|
27
|
-
part, not just padding -- otherwise the icon/heading/description gap stays pinned at the
|
|
28
|
-
spacious default and compact reads as internally inconsistent. */
|
|
29
22
|
gap: var(--lr-empty-compact-gap, var(--lr-space-2xs));
|
|
30
23
|
}
|
|
31
24
|
[part='icon'] {
|
|
@@ -48,11 +41,6 @@ import{css}from"lit";const styles=css`
|
|
|
48
41
|
}
|
|
49
42
|
:host([compact]) [part='heading'] {
|
|
50
43
|
font-weight: var(--lr-font-weight-normal);
|
|
51
|
-
/* Deliberately no fallback: when unset, this declaration is invalid at
|
|
52
|
-
computed-value time and font-size falls back to inherited -- identical
|
|
53
|
-
to today's rendering (there was no font-size override here at all). A
|
|
54
|
-
fallback like var(--lr-font-size-sm) would shrink every existing
|
|
55
|
-
compact heading that hasn't opted in to this token. */
|
|
56
44
|
font-size: var(--lr-empty-compact-font-size);
|
|
57
45
|
}
|
|
58
46
|
[part='description'] {
|
|
@@ -12,11 +12,6 @@ import{css}from"lit";const styles=css`
|
|
|
12
12
|
min-inline-size: 0;
|
|
13
13
|
max-inline-size: 100%;
|
|
14
14
|
overflow-wrap: anywhere;
|
|
15
|
-
/* The body font, not a monospace stack — unlike lr-code-block's own
|
|
16
|
-
local --lr-code-block-font token, a key cap's content is mostly
|
|
17
|
-
single characters and modifier glyphs (⌘⇧⌥), which read more legibly
|
|
18
|
-
— and have more complete glyph coverage — in the UI font than in a
|
|
19
|
-
monospace stack that may not even ship those symbols. */
|
|
20
15
|
font-family: var(--lr-font);
|
|
21
16
|
font-size: var(--lr-font-size-sm);
|
|
22
17
|
line-height: var(--lr-line-height-snug);
|
|
@@ -37,9 +32,6 @@ import{css}from"lit";const styles=css`
|
|
|
37
32
|
background: var(--lr-color-surface);
|
|
38
33
|
color: var(--lr-color-text);
|
|
39
34
|
font-weight: var(--lr-font-weight-medium);
|
|
40
|
-
/* A subtle bottom-weighted inset shadow reads as a slightly-raised
|
|
41
|
-
physical key cap rather than a flat label chip, echoing the
|
|
42
|
-
lr-chip/lr-checkbox box's own bordered-box treatment. */
|
|
43
35
|
box-shadow: inset 0 var(--lr-size-neg-1px) 0 var(--lr-color-border);
|
|
44
36
|
}
|
|
45
37
|
|
|
@@ -4,6 +4,7 @@ import type { PlaceStrategy, PlaceSync } from '../../../internal/positioner.js';
|
|
|
4
4
|
import type { LyraSize } from '../../../internal/variants.js';
|
|
5
5
|
import type { LyraMenu, MenuItemSelectDetail } from '../../layout/menu/menu.class.js';
|
|
6
6
|
import { LyraPopover, type LyraPopoverEventMap, type LyraPopupRole } from './popover.class.js';
|
|
7
|
+
export type { PlaceSync };
|
|
7
8
|
export interface LyraDropdownEventMap extends LyraPopoverEventMap {
|
|
8
9
|
'lr-select': CustomEvent<MenuItemSelectDetail>;
|
|
9
10
|
}
|
|
@@ -59,11 +60,6 @@ export declare class LyraDropdown extends LyraPopover<LyraDropdownEventMap> {
|
|
|
59
60
|
arrow: boolean;
|
|
60
61
|
/** Density propagated to directly owned mapped items. */
|
|
61
62
|
size: LyraSize;
|
|
62
|
-
/** Prevents the dropdown from opening. Becoming disabled also dismisses an open dropdown;
|
|
63
|
-
* initial `disabled` plus `open` markup/property state normalizes closed in either order. */
|
|
64
|
-
private _disabled;
|
|
65
|
-
get disabled(): boolean;
|
|
66
|
-
set disabled(next: boolean);
|
|
67
63
|
/** Keeps the menu open after a selection unless the selected branch closes independently. */
|
|
68
64
|
stayOpenOnSelect: boolean;
|
|
69
65
|
/** Uses viewport-fixed positioning instead of the default containing-block strategy. */
|
|
@@ -88,7 +84,6 @@ export declare class LyraDropdown extends LyraPopover<LyraDropdownEventMap> {
|
|
|
88
84
|
protected get animationNamespace(): string;
|
|
89
85
|
/** The positioned wrapper is presentation-only; the contained menu owns role and name. */
|
|
90
86
|
protected get popupSurfaceRole(): undefined;
|
|
91
|
-
protected get canOpen(): boolean;
|
|
92
87
|
protected animationDurationProperties(showing: boolean): readonly string[];
|
|
93
88
|
protected get popupPartNames(): string;
|
|
94
89
|
protected isInsideLightDismissBoundary(path: EventTarget[]): boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,state}from"lit/decorators.js";import{html as staticHtml,unsafeStatic}from"lit/static-html.js";import{tag}from"../../../internal/prefix.js";import{LyraPopover}from"./popover.class.js";import{styles}from"./dropdown.styles.js";const menuTag=unsafeStatic(tag("menu"));class LyraDropdown extends LyraPopover{static{this.styles=[LyraPopover.styles,styles]}
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,state}from"lit/decorators.js";import{html as staticHtml,unsafeStatic}from"lit/static-html.js";import{tag}from"../../../internal/prefix.js";import{LyraPopover}from"./popover.class.js";import{styles}from"./dropdown.styles.js";const menuTag=unsafeStatic(tag("menu"));class LyraDropdown extends LyraPopover{static{this.styles=[LyraPopover.styles,styles]}constructor(){super(),this.distance=0,this.placement="bottom-start",this.arrow=!1,this.size="m",this.stayOpenOnSelect=!1,this.hoist=!1,this.onContentSlotChange=event=>{const next=event.target.assignedElements({flatten:!0}).find(element=>element.localName===tag("menu"));next!==this.consumerMenu&&(this.releaseConsumerMenu(this.consumerMenu),this.consumerMenu=next),this.configureMenu(next??this.menuEngine)},this.popupRole="menu"}get popupRole(){return"menu"}set popupRole(_next){super.popupRole!=="menu"&&(super.popupRole="menu")}attributeChangedCallback(name,oldValue,newValue){if(name==="popup-role"&&newValue!==null&&newValue!=="menu"){this.setAttribute("popup-role","menu");return}super.attributeChangedCallback(name,oldValue,newValue)}get defaultDistance(){return 0}get positioningStrategy(){return this.hoist?"fixed":"absolute"}get positioningSync(){return this.sync}get animationNamespace(){return"dropdown"}get popupSurfaceRole(){}animationDurationProperties(showing){return[showing?"--show-duration":"--hide-duration","--lr-transition-fast"]}get popupPartNames(){return["popup","dialog","popup__popup","base","base__popup","panel"].join(" ")}isInsideLightDismissBoundary(path){return super.isInsideLightDismissBoundary(path)||!!(this.containingElement&&path.includes(this.containingElement))}onPopupPositioned(){super.onPopupPositioned();const menu=this.menuEngine;if(!menu?.dropdownOpen)return;menu.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({flatten:!0}).find(element=>element.tabIndex===0)?.focus()}get menuEngine(){return this.consumerMenu??this.renderRoot.querySelector('[part~="menu"]')??void 0}configureMenu(menu){menu&&(menu===this.consumerMenu&&!this.consumerMenuSnapshot&&(this.consumerMenuSnapshot={dropdownOwner:menu.dropdownOwner,dropdownContained:menu.dropdownContained,dropdownRendersMenuRole:menu.dropdownRendersMenuRole,dropdownStayOpenOnSelect:menu.dropdownStayOpenOnSelect,dropdownSize:menu.dropdownSize,dropdownLabel:menu.dropdownLabel,dropdownOpen:menu.dropdownOpen}),menu.dropdownOwner=this,menu.dropdownContained=!0,menu.dropdownRendersMenuRole=!0,menu.dropdownStayOpenOnSelect=this.stayOpenOnSelect,menu.dropdownSize=this.size,menu.dropdownLabel=this.effectivePopupLabel,menu.dropdownOpen=this.open)}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.isConnected&&this.configureMenu(this.menuEngine)})}releaseConsumerMenu(menu){if(!menu)return;const snapshot=menu===this.consumerMenu?this.consumerMenuSnapshot:void 0;menu.dropdownOpen=!1,menu.dropdownOwner=snapshot?.dropdownOwner??null,menu.dropdownContained=snapshot?.dropdownContained??!1,menu.dropdownRendersMenuRole=snapshot?.dropdownRendersMenuRole??!1,menu.dropdownStayOpenOnSelect=snapshot?.dropdownStayOpenOnSelect??!1,menu.dropdownSize=snapshot?.dropdownSize,menu.dropdownLabel=snapshot?.dropdownLabel,snapshot&&(menu.dropdownOpen=snapshot.dropdownOpen),menu===this.consumerMenu&&(this.consumerMenuSnapshot=void 0)}onTriggerKeyDown(event){if(this.disabled||this.open)return;let focus;if(event.key==="ArrowDown"?focus="first":event.key==="ArrowUp"&&(focus="last"),!focus)return;event.preventDefault();const menu=this.menuEngine;this.configureMenu(menu),menu?menu.focusContained(focus):this.show()}reposition(){this.positionPopup()}focusOnTrigger(options){this.renderRoot.querySelector('slot[name="trigger"]')?.assignedElements({flatten:!0})[0]?.focus(options)}getMenu(){return this.menuEngine??null}updated(changed){super.updated(changed),this.configureMenu(this.menuEngine),this.open&&(changed.has("hoist")||changed.has("sync"))&&this.reposition()}disconnectedCallback(){this.releaseConsumerMenu(this.consumerMenu),super.disconnectedCallback()}renderPopupContent(){return this.consumerMenu?html`<slot @slotchange=${this.onContentSlotChange}></slot>`:staticHtml`
|
|
2
2
|
<${menuTag}
|
|
3
3
|
part="menu"
|
|
4
4
|
.dropdownOwner=${this}
|
|
@@ -11,4 +11,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
11
11
|
>
|
|
12
12
|
<slot @slotchange=${this.onContentSlotChange}></slot>
|
|
13
13
|
</${menuTag}>
|
|
14
|
-
`}}__decorate([property({reflect:!0})],LyraDropdown.prototype,"size",void 0),__decorate([property({type:Boolean,
|
|
14
|
+
`}}__decorate([property({reflect:!0})],LyraDropdown.prototype,"size",void 0),__decorate([property({type:Boolean,attribute:"stay-open-on-select",reflect:!0})],LyraDropdown.prototype,"stayOpenOnSelect",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraDropdown.prototype,"hoist",void 0),__decorate([property({reflect:!0})],LyraDropdown.prototype,"sync",void 0),__decorate([property({attribute:!1})],LyraDropdown.prototype,"containingElement",void 0),__decorate([state()],LyraDropdown.prototype,"consumerMenu",void 0),__decorate([property({attribute:"popup-role"})],LyraDropdown.prototype,"popupRole",null);export{LyraDropdown};
|
|
@@ -2,24 +2,8 @@ import{css}from"lit";const styles=css`
|
|
|
2
2
|
:host { display: inline-block; }
|
|
3
3
|
[part='trigger'] { display: inline-block; }
|
|
4
4
|
[part~='popup'] {
|
|
5
|
-
/* Fixed from the start (not only once JS positions it on open) so the closed popup --
|
|
6
|
-
sized to its full slotted content -- never occupies a box in the host's normal flow.
|
|
7
|
-
Otherwise a closed dropdown/popover inflates its own inline-block host to the popup's
|
|
8
|
-
content size, and that invisible-but-still-hit-testable box sits on top of unrelated
|
|
9
|
-
page content until the trigger is first clicked and place() takes over positioning.
|
|
10
|
-
Physical top/left, not inset-block-start/inset-inline-start: positioner.ts's place()
|
|
11
|
-
always overwrites this via the physical style.left/style.top, which only cleanly
|
|
12
|
-
overrides a same-property CSS default. Under RTL, inset-inline-start resolves to the
|
|
13
|
-
different physical property "right", so both right:0 (from here) and the JS's left:Npx
|
|
14
|
-
would stay simultaneously active -- and per the CSS2.1 over-constrained resolution rules
|
|
15
|
-
for a direction:rtl containing block, left is the one silently discarded, pinning the
|
|
16
|
-
popup to the viewport's right edge no matter what Floating UI computed. Physical
|
|
17
|
-
properties here sidestep that entirely, matching what JS always sets. */
|
|
18
5
|
position: fixed;
|
|
19
6
|
top: 0;
|
|
20
|
-
/* policy-allow(physical-css): must stay the same physical property positioner.ts's place()
|
|
21
|
-
overwrites via style.left; inset-inline-start would leave right:0 active under RTL and the
|
|
22
|
-
over-constrained resolution would discard the JS-written left (see the comment above). */
|
|
23
7
|
left: 0;
|
|
24
8
|
z-index: var(--lr-overlay-stack-index, var(--lr-layer-popover));
|
|
25
9
|
max-inline-size: min(var(--max-width, var(--lr-overlay-max-inline-size, var(--lr-size-20rem))), var(--lr-positioner-available-inline-size, var(--lr-size-20rem)));
|
|
@@ -28,16 +12,12 @@ import{css}from"lit";const styles=css`
|
|
|
28
12
|
border: var(--lr-border-width-thin) solid var(--lr-color-border);
|
|
29
13
|
border-radius: var(--lr-radius);
|
|
30
14
|
background: var(--lr-color-surface);
|
|
31
|
-
/* Anchored overlay: a positioner-placed popup floating over page content, not a modal layer. */
|
|
32
15
|
box-shadow: var(--lr-shadow-m);
|
|
33
16
|
}
|
|
34
17
|
[part~='popup'][data-hidden] { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(var(--lr-size-neg-0-25rem)); }
|
|
35
18
|
[part~='popup'] { opacity: 1; transform: translateY(0); }
|
|
36
19
|
:host([data-closing]) [part~='popup'][data-hidden] { visibility: visible; }
|
|
37
20
|
[part~='content'] { padding: var(--lr-space-m); }
|
|
38
|
-
/* An arrow protrudes past the popup's edge, so the scroll container has to move inwards for it
|
|
39
|
-
-- an overflow: auto popup would clip the arrow away entirely. Scoped to the arrow case so a
|
|
40
|
-
popover without one keeps its previous box model exactly. */
|
|
41
21
|
[part~='popup']:where([data-has-arrow]) { overflow: visible; }
|
|
42
22
|
[part~='popup']:where([data-has-arrow]) [part~='content'] {
|
|
43
23
|
overflow: auto;
|
|
@@ -50,23 +30,15 @@ import{css}from"lit";const styles=css`
|
|
|
50
30
|
rotate: 45deg;
|
|
51
31
|
background: var(--lr-color-surface);
|
|
52
32
|
border: var(--lr-border-width-thin) solid var(--lr-color-border);
|
|
53
|
-
/* Only the two outward-facing edges of the rotated square should read as the popup's border;
|
|
54
|
-
the other two sit under the panel. */
|
|
55
33
|
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
|
56
34
|
}
|
|
57
35
|
`,tooltipStyles=css`
|
|
58
36
|
:host { display: inline-block; }
|
|
59
37
|
[part='trigger'] { display: inline-block; }
|
|
60
|
-
/* position: absolute from the start, matching the mapped non-hoisted default. Physical top/left
|
|
61
|
-
here too, for the same RTL over-constraint reason as the popover above. */
|
|
62
|
-
/* policy-allow(physical-css): same physical property positioner.ts's place() writes; see above. */
|
|
63
38
|
[part~='popup'] { position: absolute; top: 0; left: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-popover)); min-inline-size: 0; max-inline-size: min(var(--max-width, var(--lr-tooltip-max-inline-size, var(--lr-size-20rem))), var(--lr-positioner-available-inline-size, 100vi)); max-block-size: var(--lr-positioner-available-block-size, 100vb); overflow-x: clip; overflow-y: auto; overflow-wrap: anywhere; padding: var(--lr-space-xs) var(--lr-space-s); border-radius: var(--lr-radius-xs); background: var(--lr-tooltip-background, var(--lr-color-neutral)); color: var(--lr-tooltip-color, var(--lr-color-on-neutral)); font-size: var(--lr-font-size-sm); line-height: var(--lr-line-height-compact); box-shadow: var(--lr-shadow-m); }
|
|
64
39
|
[part~='popup'][data-hidden] { visibility: hidden; opacity: 0; pointer-events: none; }
|
|
65
40
|
[part~='popup'] { opacity: 1; }
|
|
66
41
|
:host([data-closing]) [part~='popup'][data-hidden] { visibility: visible; }
|
|
67
|
-
/* A tooltip popup has no inner scroll wrapper to move the overflow onto, so switching it to
|
|
68
|
-
visible for the arrow trades internal scrolling for a visible arrow. Reach for
|
|
69
|
-
<lr-popover> when a floating surface needs both. */
|
|
70
42
|
[part~='popup']:where([data-has-arrow]) { overflow: visible; }
|
|
71
43
|
[part~='arrow'] {
|
|
72
44
|
position: absolute;
|
|
@@ -118,6 +118,14 @@ export declare class LyraPopover<Events extends LyraPopoverEventMap = LyraPopove
|
|
|
118
118
|
/** Semantic role used by the popup. */
|
|
119
119
|
get popupRole(): LyraPopupRole;
|
|
120
120
|
set popupRole(next: LyraPopupRole);
|
|
121
|
+
private _disabled;
|
|
122
|
+
/** Prevents opening the popover -- pointer, keyboard, and programmatic `show()`/`open = true`
|
|
123
|
+
* are all refused while set. Becoming disabled also closes an already-open popover; initial
|
|
124
|
+
* `disabled` plus `open` markup/property state normalizes closed in either order. Mirrors
|
|
125
|
+
* `<lr-tooltip>`'s and `<lr-dropdown>`'s own `disabled`.
|
|
126
|
+
* @default false */
|
|
127
|
+
get disabled(): boolean;
|
|
128
|
+
set disabled(next: boolean);
|
|
121
129
|
private trigger?;
|
|
122
130
|
private slottedTrigger?;
|
|
123
131
|
private resolvedSide;
|
|
@@ -174,7 +182,7 @@ export declare class LyraPopover<Events extends LyraPopoverEventMap = LyraPopove
|
|
|
174
182
|
/** Subclasses can retain a different arrow default without forking rendering/positioning. */
|
|
175
183
|
protected get rendersArrow(): boolean;
|
|
176
184
|
/** Subclass opening invariant, checked for initial property/attribute replay and every later
|
|
177
|
-
* imperative `show()`.
|
|
185
|
+
* imperative `show()`. A disabled popover is never eligible to open. */
|
|
178
186
|
protected get canOpen(): boolean;
|
|
179
187
|
/** Generic popovers project their default slot directly. A mapped subclass can insert an owned
|
|
180
188
|
* interaction controller without replacing the trigger/popup shell. */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel,nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{tag}from"../../../internal/prefix.js";import{place,virtualAnchorFromRect}from"../../../internal/positioner.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{finiteNumber}from"../../../internal/numbers.js";import{omittedEmptyStringConverter,trueDefaultBooleanConverter}from"../../../internal/converters.js";import{activateOverlay}from"../../../internal/overlay-manager.js";import{setCustomState}from"../../../internal/custom-states.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{applyOverlayArrow}from"./overlay-arrow.js";import{normalizeVirtualRect,observeOverlayAnchorIdentity,OverlayTransitionGate,resolveOverlayAnchor}from"./overlay-shared.js";import{styles}from"./overlay.styles.js";import{LYRA_DEFAULT_menuLabel,LYRA_DEFAULT_popover}from"../../../internal/default-strings.generated.js";const DEFAULT_DISTANCE=8;let popoverConnectionSequence=0;class LyraPopover extends LyraElement{constructor(){super(...arguments),this._open=!1,this.placement="top",this.distance=8,this.skidding=0,this._for="",this.anchor=null,this.arrow=!0,this.withoutArrow=!1,this.arrowPlacement="anchor",this.arrowPadding=0,this.accessibleLabel="",this._popupRole="dialog",this.resolvedSide="bottom",this.anchorPositioned=!1,this.observedDirectAnchorWasConnected=!1,this.generatedHostId=nextId("popover"),this.popupId=nextId("popover-popup"),this.hostIdObserverGeneration=0,this.transitionToken=0,this.transitionGate=new OverlayTransitionGate,this.connectionSequence=0,this.popoverInternals=typeof this.attachInternals=="function"?this.attachInternals():void 0,this.onTriggerSlotChange=event=>{const next=event.target.assignedElements({flatten:!0})[0];next!==this.slottedTrigger&&(this.slottedTrigger=next,this.syncInteractionTrigger())},this.onTriggerClick=()=>{this.virtualAnchor||(this.syncTriggerA11y(),this.open?this.hide():this.show())},this.onPopupClick=event=>{if(event.defaultPrevented)return;const path=event.composedPath(),hostIndex=path.indexOf(this);if(hostIndex<0)return;const closeAction=path.slice(0,hostIndex).find(target=>target.nodeType===1&&target.getAttribute("data-popover")==="close");if(!closeAction)return;event.stopPropagation();const state2=closeAction;state2.effectiveDisabled===!0||state2.disabled===!0||closeAction.hasAttribute("disabled")||closeAction.getAttribute("aria-disabled")?.trim().toLowerCase()==="true"||closeAction.hasAttribute("inert")||closeAction.closest("[inert]")||this.hide()},this.onDocumentPointer=event=>{this.overlayHandle?.isTopmost()&&(this.isInsideLightDismissBoundary(event.composedPath())||this.hide())}}static{this.defaultStrings={...super.defaultStrings,menuLabel:LYRA_DEFAULT_menuLabel,popover:LYRA_DEFAULT_popover}}static{this.styles=[LyraElement.styles,styles]}get open(){return this._open}set open(next){const normalized=!!next&&this.canOpen;if(normalized!==this._open){if(!this.hasUpdated){this.setOpen(normalized),this.isConnected&&this.connectionSequence>0&&this.updateBrowserDerivedState(()=>this.reconcileInitialPopoverPeers());return}normalized?this.show():this.hide()}}get for(){return this._for}set for(next){this._for=next??""}get popupRole(){return this._popupRole}set popupRole(next){if(next===this._popupRole)return;const old=this._popupRole;this._popupRole=next,this.requestUpdate("popupRole",old)}get defaultDistance(){return DEFAULT_DISTANCE}get positioningStrategy(){return"fixed"}get positioningSync(){}get animationNamespace(){return"popover"}animationDurationProperties(showing){return[showing?"--show-duration":"--hide-duration","--lr-duration-fast"]}get popupPartNames(){return["popup","dialog","popup__popup"].join(" ")}get contentPartNames(){return["content","body"].join(" ")}get triggerPopupRole(){return this.popupRole}get popupSurfaceRole(){return this.popupRole}get effectivePopupLabel(){return hostAriaLabel(this)??(this.accessibleLabel||this.localize(this.triggerPopupRole==="menu"?"menuLabel":"popover"))}get rendersArrow(){return this.arrow&&!this.withoutArrow}get canOpen(){return!0}renderPopupContent(){return html`<slot></slot>`}onTriggerKeyDown(_event){}isInsideLightDismissBoundary(path){return path.includes(this)}onPopupPositioned(){this.overlayHandle?.focusAutofocus()}willUpdate(changed){super.willUpdate(changed),changed.has("anchor")&&changed.get("anchor")===this.observedDirectAnchor&&this.observedDirectAnchorWasConnected&&this.anchor?.isConnected!==!0&&this.open&&!this.resolveAnchor()&&this.forceClose({focusTrigger:!1})}updated(changed){super.updated(changed),(changed.has("for")||changed.has("anchor")||changed.has("open"))&&this.syncAnchorIdentityObservation(),changed.has("for")&&this.syncInteractionTrigger(),(changed.has("open")||changed.has("placement")||changed.has("distance")||changed.has("skidding")||changed.has("for")||changed.has("anchor")||changed.has("arrow")||changed.has("withoutArrow")||changed.has("arrowPlacement")||changed.has("arrowPadding")||changed.has("popupRole"))&&(this.cleanup?.(),this.cleanup=void 0,this.open&&this.isConnected&&this.positionPopup(),changed.has("open")&&(this.open?this.isConnected&&(this.startLightDismiss(),this.activatePopoverOverlay()):(this.positionedAnchor=void 0,this.anchorPositioned=!1,this.stopLightDismiss(),this.overlayHandle?.deactivate(),this.overlayHandle=void 0,this.virtualAnchor=void 0,this.returnFocusTo=void 0,this.syncInteractionTrigger())),this.isConnected&&this.syncTriggerA11y())}connectedCallback(){if(super.connectedCallback(),this.connectionSequence=++popoverConnectionSequence,this.updateBrowserDerivedState(()=>this.reconcileInitialPopoverPeers()),this.syncAnchorIdentityObservation(),this.id||(this.id=this.generatedHostId),this.observeHostId(),this.syncInteractionTrigger(),this.hasUpdated&&this.open){const wasPreviouslyActivated=this.overlayHandle?.isActive()===!0;this.startLightDismiss(),wasPreviouslyActivated?this.overlayHandle.resume():this.activatePopoverOverlay(),this.positionPopup()}}disconnectedCallback(){this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,this.cleanup?.(),this.cleanup=void 0,this.stopLightDismiss(),this.resetHostIdObserver(),this.overlayHandle?.suspend(),this.trigger?.removeEventListener("click",this.onTriggerClick),this.releaseTriggerA11y(),this.trigger=void 0,this.transitionToken++,this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,this.resetHostIdObserver(),this.releaseTriggerA11y()}syncAnchorIdentityObservation(){this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0;const directAnchor=this.open?this.anchor??void 0:void 0;if(this.observedDirectAnchor=directAnchor,this.observedDirectAnchorWasConnected=directAnchor?.isConnected===!0,!this.isConnected||!this.for&&!directAnchor)return;const onIdentityChange=()=>{const directAnchorRemoved=this.anchor===this.observedDirectAnchor&&this.observedDirectAnchorWasConnected&&this.observedDirectAnchor?.isConnected===!1;if(this.observedDirectAnchorWasConnected=this.observedDirectAnchor?.isConnected===!0,this.syncInteractionTrigger(),!this.open)return;const nextAnchor=this.resolveAnchor();if(directAnchorRemoved&&!nextAnchor){this.forceClose({focusTrigger:!1});return}nextAnchor!==this.positionedAnchor&&this.positionPopup()},observedRoots=new Set([this]);directAnchor&&directAnchor.getRootNode()!==this.getRootNode()&&observedRoots.add(directAnchor.isConnected?directAnchor:directAnchor.ownerDocument);const cleanups=[...observedRoots].map(root=>observeOverlayAnchorIdentity(root,onIdentityChange));this.stopAnchorIdentityObservation=()=>{for(const cleanup of cleanups)cleanup()}}resolveForTrigger(){if(!this.for)return;const target=this.getRootNode().getElementById?.(this.for)??null,HTMLElementCtor=target?.ownerDocument.defaultView?.HTMLElement;return target&&HTMLElementCtor&&target instanceof HTMLElementCtor?target:void 0}syncInteractionTrigger(){const next=this.virtualAnchor?void 0:this.slottedTrigger??this.resolveForTrigger();if(next===this.trigger){this.syncTriggerA11y();return}if(this.trigger?.removeEventListener("click",this.onTriggerClick),this.trigger=next,this.trigger&&this.trigger!==this.slottedTrigger&&this.trigger.addEventListener("click",this.onTriggerClick),this.syncTriggerA11y(),this.open){if(!this.resolveAnchor()){this.forceClose({focusTrigger:!1});return}this.updatePopoverRestoreFocusTarget(),this.positionPopup()}}activatePopoverOverlay(){!this.isConnected||this.overlayHandle?.isActive()||(this.overlayHandle=activateOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part~="popup"]'),onEscape:()=>{this.hide()},restoreFocusTo:this.virtualAnchor?this.returnFocusTo??null:this.accessibleTrigger,modal:!1,trapFocus:!1}))}updatePopoverRestoreFocusTarget(){const target=this.virtualAnchor?this.returnFocusTo??null:this.accessibleTrigger;if(this.overlayHandle?.isActive()){this.overlayHandle.updateRestoreFocusTo(target);return}this.activatePopoverOverlay()}showAt(rect,options){const normalizedRect=normalizeVirtualRect(rect);if(!normalizedRect)return;const previousAnchor=this.virtualAnchor,previousReturnFocusTo=this.returnFocusTo;if(this.virtualAnchor=virtualAnchorFromRect(normalizedRect),this.returnFocusTo=options?.returnFocusTo,this.syncInteractionTrigger(),this.open){this.updatePopoverRestoreFocusTarget(),this.positionPopup();return}this.show(),!this.open&&(this.virtualAnchor=previousAnchor,this.returnFocusTo=previousReturnFocusTo,this.syncInteractionTrigger())}resolveAnchor(){return resolveOverlayAnchor(this,{virtualAnchor:this.virtualAnchor,anchor:this.anchor,for:this.for,trigger:this.trigger})}positionPopup(){this.cleanup?.(),this.cleanup=void 0;const popup=this.renderRoot.querySelector('[part~="popup"]'),arrowElement=this.renderRoot.querySelector('[part~="arrow"]'),anchor=this.resolveAnchor();if(!this.open||!anchor||!popup){this.positionedAnchor=void 0,this.anchorPositioned=!1;return}anchor!==this.positionedAnchor&&(this.anchorPositioned=!1),this.cleanup=place(anchor,popup,{placement:rtlAwarePlacement(this.placement,this),strategy:this.positioningStrategy,offset:finiteNumber(this.distance,this.defaultDistance),skidding:finiteNumber(this.skidding,0),sync:this.positioningSync,arrow:this.rendersArrow&&arrowElement?arrowElement:void 0,arrowPadding:Math.max(0,finiteNumber(this.arrowPadding,0)),onPlaced:({placement,arrow})=>{const becamePositioned=!this.anchorPositioned||this.positionedAnchor!==anchor;this.positionedAnchor=anchor,this.anchorPositioned=!0,becamePositioned&&this.updateComplete.then(()=>{this.open&&this.resolveAnchor()===anchor&&this.onPopupPositioned()});const side=applyOverlayArrow(arrowElement,{placement,coords:arrow,enabled:this.rendersArrow,arrowPlacement:this.arrowPlacement,arrowPadding:Math.max(0,finiteNumber(this.arrowPadding,0)),rtl:this.effectiveDirection==="rtl",sizeProperty:"--arrow-size",fallbackSizeProperty:"--lr-overlay-arrow-size"});side!==this.resolvedSide&&(this.resolvedSide=side)}})}syncTriggerA11y(){const trigger=this.trigger??null,popup=this.renderRoot?.querySelector('[part~="popup"]')??null,contribution={attributes:{"aria-haspopup":this.triggerPopupRole,"aria-expanded":this.open?"true":"false"},controls:popup?[popup]:[]};this.triggerAria?this.triggerAria.update(trigger,contribution):this.triggerAria=acquireAriaOwnership(trigger,contribution);const accessibleTrigger=this.accessibleTrigger,distinctAccessibleTrigger=accessibleTrigger!==trigger?accessibleTrigger:null;this.accessibleTriggerAria?this.accessibleTriggerAria.update(distinctAccessibleTrigger,contribution):this.accessibleTriggerAria=acquireAriaOwnership(distinctAccessibleTrigger,contribution),this.overlayHandle?.isActive()&&!this.virtualAnchor&&this.overlayHandle.updateRestoreFocusTo(accessibleTrigger)}get accessibleTrigger(){return this.trigger?resolveAccessibleTrigger(this.trigger):null}releaseTriggerA11y(){this.accessibleTriggerAria?.release(),this.accessibleTriggerAria=void 0,this.triggerAria?.release(),this.triggerAria=void 0}startLightDismiss(){const nextDocument=this.ownerDocument;this.lightDismissDocument!==nextDocument&&(this.stopLightDismiss(),nextDocument.addEventListener("pointerdown",this.onDocumentPointer),this.lightDismissDocument=nextDocument)}stopLightDismiss(){this.lightDismissDocument?.removeEventListener("pointerdown",this.onDocumentPointer),this.lightDismissDocument=void 0}observeHostId(){const ownerDocument=this.ownerDocument;if(this.hostIdObserver&&this.hostIdObserverDocument===ownerDocument)return;this.resetHostIdObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor||!this.isConnected)return;const generation=this.hostIdObserverGeneration,observer=new MutationObserverCtor(()=>{this.hostIdObserver!==observer||this.hostIdObserverDocument!==ownerDocument||this.hostIdObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.id||(this.id=this.generatedHostId),this.syncTriggerA11y())});this.hostIdObserver=observer,this.hostIdObserverDocument=ownerDocument,observer.observe(this,{attributes:!0,attributeFilter:["id"]})}resetHostIdObserver(){this.hostIdObserverGeneration+=1,this.hostIdObserver?.disconnect(),this.hostIdObserver=void 0,this.hostIdObserverDocument=void 0}setOpen(next){if(this._open===next)return;const old=this._open;this._open=next,setCustomState(this.popoverInternals,"open",next),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}show(){return this._open||!this.canOpen?Promise.resolve():this.transitionGate.request(!0,()=>{if(this.emitCancelableLifecycle("lr-show").defaultPrevented){this.syncOpenAttribute();return}if(!this.closePopoverPeers()){this.syncOpenAttribute();return}return this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.setOpen(!0),this.settleTransition("lr-after-show")})}hide(options){return this._open?this.transitionGate.request(!1,()=>{if(this.emitCancelableLifecycle("lr-hide").defaultPrevented){this.syncOpenAttribute();return}return this.forceClose(options)}):Promise.resolve()}closePopoverPeers(){if(this.virtualAnchor||this.localName!==tag("popover"))return!0;const root=this.getRootNode();for(const peer of root.querySelectorAll(tag("popover")))if(!(peer===this||!peer.open||peer.virtualAnchor)&&(peer.hide({focusTrigger:!1}),peer.open))return!1;return!0}reconcileInitialPopoverPeers(){if(!this.isConnected||!this._open||this.virtualAnchor||this.localName!==tag("popover"))return;const peers=[...this.getRootNode().querySelectorAll(tag("popover"))].filter(peer=>peer.isConnected&&peer._open&&!peer.virtualAnchor&&peer.connectionSequence>0);if(peers.reduce((latest,peer)=>!latest||peer.connectionSequence>latest.connectionSequence?peer:latest,void 0)!==this){this.closeForInitialPeerReconciliation();return}for(const peer of peers)peer!==this&&peer.closeForInitialPeerReconciliation()}closeForInitialPeerReconciliation(){this._open&&(this.transitionToken++,this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.cleanup?.(),this.cleanup=void 0,this.stopLightDismiss(),this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.positionedAnchor=void 0,this.anchorPositioned=!1,this.returnFocusTo=void 0,this.setOpen(!1),this.syncOpenAttribute())}forceClose(options){return this._open?(options?.focusTrigger===!1&&(this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0),this.cancelTransitionAnimation(),this.isConnected&&this.setAttribute("data-closing",""),this.setOpen(!1),this.settleTransition("lr-after-hide")):Promise.resolve()}cancelTransitionAnimation(){this.transitionAnimation?.cancel(),this.transitionAnimation=void 0}emitCancelableLifecycle(name){return this.emit(name,null,{cancelable:!0})}emitSettledLifecycle(name){return this.emit(name)}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(this.isConnected){const popup=this.renderRoot.querySelector('[part~="popup"]'),showing=event==="lr-after-show",offset="translateY(var(--lr-size-neg-0-25rem))",animation=popup?animateRegistered(this,popup,`${this.animationNamespace}.${showing?"show":"hide"}`,this.effectiveDirection,{keyframes:showing?[{opacity:0,transform:offset},{opacity:1,transform:"translateY(0)"}]:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:offset}],durationProperties:this.animationDurationProperties(showing),easingProperties:["--lr-easing-standard"]}):void 0;if(this.transitionAnimation=animation,await animation?.finished.catch(()=>{}),this.transitionToken!==token)return;this.cancelTransitionAnimation()}event==="lr-after-hide"&&this.removeAttribute("data-closing"),this.emitSettledLifecycle(event)}}render(){const popupRole=this.popupSurfaceRole;return html`
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel,nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{tag}from"../../../internal/prefix.js";import{place,virtualAnchorFromRect}from"../../../internal/positioner.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{finiteNumber}from"../../../internal/numbers.js";import{omittedEmptyStringConverter,trueDefaultBooleanConverter}from"../../../internal/converters.js";import{activateOverlay}from"../../../internal/overlay-manager.js";import{setCustomState}from"../../../internal/custom-states.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{applyOverlayArrow}from"./overlay-arrow.js";import{normalizeVirtualRect,observeOverlayAnchorIdentity,OverlayTransitionGate,resolveOverlayAnchor}from"./overlay-shared.js";import{styles}from"./overlay.styles.js";import{LYRA_DEFAULT_menuLabel,LYRA_DEFAULT_popover}from"../../../internal/default-strings.generated.js";const DEFAULT_DISTANCE=8;let popoverConnectionSequence=0;class LyraPopover extends LyraElement{constructor(){super(...arguments),this._open=!1,this.placement="top",this.distance=8,this.skidding=0,this._for="",this.anchor=null,this.arrow=!0,this.withoutArrow=!1,this.arrowPlacement="anchor",this.arrowPadding=0,this.accessibleLabel="",this._popupRole="dialog",this._disabled=!1,this.resolvedSide="bottom",this.anchorPositioned=!1,this.observedDirectAnchorWasConnected=!1,this.generatedHostId=nextId("popover"),this.popupId=nextId("popover-popup"),this.hostIdObserverGeneration=0,this.transitionToken=0,this.transitionGate=new OverlayTransitionGate,this.connectionSequence=0,this.popoverInternals=typeof this.attachInternals=="function"?this.attachInternals():void 0,this.onTriggerSlotChange=event=>{const next=event.target.assignedElements({flatten:!0})[0];next!==this.slottedTrigger&&(this.slottedTrigger=next,this.syncInteractionTrigger())},this.onTriggerClick=()=>{this.virtualAnchor||(this.syncTriggerA11y(),this.open?this.hide():this.show())},this.onPopupClick=event=>{if(event.defaultPrevented)return;const path=event.composedPath(),hostIndex=path.indexOf(this);if(hostIndex<0)return;const closeAction=path.slice(0,hostIndex).find(target=>target.nodeType===1&&target.getAttribute("data-popover")==="close");if(!closeAction)return;event.stopPropagation();const state2=closeAction;state2.effectiveDisabled===!0||state2.disabled===!0||closeAction.hasAttribute("disabled")||closeAction.getAttribute("aria-disabled")?.trim().toLowerCase()==="true"||closeAction.hasAttribute("inert")||closeAction.closest("[inert]")||this.hide()},this.onDocumentPointer=event=>{this.overlayHandle?.isTopmost()&&(this.isInsideLightDismissBoundary(event.composedPath())||this.hide())}}static{this.defaultStrings={...super.defaultStrings,menuLabel:LYRA_DEFAULT_menuLabel,popover:LYRA_DEFAULT_popover}}static{this.styles=[LyraElement.styles,styles]}get open(){return this._open}set open(next){const normalized=!!next&&this.canOpen;if(normalized!==this._open){if(!this.hasUpdated){this.setOpen(normalized),this.isConnected&&this.connectionSequence>0&&this.updateBrowserDerivedState(()=>this.reconcileInitialPopoverPeers());return}normalized?this.show():this.hide()}}get for(){return this._for}set for(next){this._for=next??""}get popupRole(){return this._popupRole}set popupRole(next){if(next===this._popupRole)return;const old=this._popupRole;this._popupRole=next,this.requestUpdate("popupRole",old)}get disabled(){return this._disabled}set disabled(next){const normalized=!!next;if(normalized===this._disabled)return;const old=this._disabled;this._disabled=normalized,this.requestUpdate("disabled",old),normalized&&this.open&&(this.hasUpdated?this.hide():this.open=!1)}get defaultDistance(){return DEFAULT_DISTANCE}get positioningStrategy(){return"fixed"}get positioningSync(){}get animationNamespace(){return"popover"}animationDurationProperties(showing){return[showing?"--show-duration":"--hide-duration","--lr-duration-fast"]}get popupPartNames(){return["popup","dialog","popup__popup"].join(" ")}get contentPartNames(){return["content","body"].join(" ")}get triggerPopupRole(){return this.popupRole}get popupSurfaceRole(){return this.popupRole}get effectivePopupLabel(){return hostAriaLabel(this)??(this.accessibleLabel||this.localize(this.triggerPopupRole==="menu"?"menuLabel":"popover"))}get rendersArrow(){return this.arrow&&!this.withoutArrow}get canOpen(){return!this.disabled}renderPopupContent(){return html`<slot></slot>`}onTriggerKeyDown(_event){}isInsideLightDismissBoundary(path){return path.includes(this)}onPopupPositioned(){this.overlayHandle?.focusAutofocus()}willUpdate(changed){super.willUpdate(changed),changed.has("anchor")&&changed.get("anchor")===this.observedDirectAnchor&&this.observedDirectAnchorWasConnected&&this.anchor?.isConnected!==!0&&this.open&&!this.resolveAnchor()&&this.forceClose({focusTrigger:!1}),changed.has("open")&&!this.open&&(this.anchorPositioned=!1),(changed.has("anchor")||changed.has("for"))&&(this.anchorPositioned=!1)}updated(changed){super.updated(changed),(changed.has("for")||changed.has("anchor")||changed.has("open"))&&this.syncAnchorIdentityObservation(),changed.has("for")&&this.syncInteractionTrigger(),(changed.has("open")||changed.has("placement")||changed.has("distance")||changed.has("skidding")||changed.has("for")||changed.has("anchor")||changed.has("arrow")||changed.has("withoutArrow")||changed.has("arrowPlacement")||changed.has("arrowPadding")||changed.has("popupRole"))&&(this.cleanup?.(),this.cleanup=void 0,this.open&&this.isConnected&&this.positionPopup(),changed.has("open")&&(this.open?this.isConnected&&(this.startLightDismiss(),this.activatePopoverOverlay()):(this.positionedAnchor=void 0,this.stopLightDismiss(),this.overlayHandle?.deactivate(),this.overlayHandle=void 0,this.virtualAnchor=void 0,this.returnFocusTo=void 0,this.syncInteractionTrigger())),this.isConnected&&this.syncTriggerA11y())}connectedCallback(){if(super.connectedCallback(),this.connectionSequence=++popoverConnectionSequence,this.updateBrowserDerivedState(()=>this.reconcileInitialPopoverPeers()),this.syncAnchorIdentityObservation(),this.id||(this.id=this.generatedHostId),this.observeHostId(),this.syncInteractionTrigger(),this.hasUpdated&&this.open){const wasPreviouslyActivated=this.overlayHandle?.isActive()===!0;this.startLightDismiss(),wasPreviouslyActivated?this.overlayHandle.resume():this.activatePopoverOverlay(),this.positionPopup()}}disconnectedCallback(){this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,this.cleanup?.(),this.cleanup=void 0,this.stopLightDismiss(),this.resetHostIdObserver(),this.overlayHandle?.suspend(),this.trigger?.removeEventListener("click",this.onTriggerClick),this.releaseTriggerA11y(),this.trigger=void 0,this.transitionToken++,this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,this.resetHostIdObserver(),this.releaseTriggerA11y()}syncAnchorIdentityObservation(){this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0;const directAnchor=this.open?this.anchor??void 0:void 0;if(this.observedDirectAnchor=directAnchor,this.observedDirectAnchorWasConnected=directAnchor?.isConnected===!0,!this.isConnected||!this.for&&!directAnchor)return;const onIdentityChange=()=>{const directAnchorRemoved=this.anchor===this.observedDirectAnchor&&this.observedDirectAnchorWasConnected&&this.observedDirectAnchor?.isConnected===!1;if(this.observedDirectAnchorWasConnected=this.observedDirectAnchor?.isConnected===!0,this.syncInteractionTrigger(),!this.open)return;const nextAnchor=this.resolveAnchor();if(directAnchorRemoved&&!nextAnchor){this.forceClose({focusTrigger:!1});return}nextAnchor!==this.positionedAnchor&&this.positionPopup()},observedRoots=new Set([this]);directAnchor&&directAnchor.getRootNode()!==this.getRootNode()&&observedRoots.add(directAnchor.isConnected?directAnchor:directAnchor.ownerDocument);const cleanups=[...observedRoots].map(root=>observeOverlayAnchorIdentity(root,onIdentityChange));this.stopAnchorIdentityObservation=()=>{for(const cleanup of cleanups)cleanup()}}resolveForTrigger(){if(!this.for)return;const target=this.getRootNode().getElementById?.(this.for)??null,HTMLElementCtor=target?.ownerDocument.defaultView?.HTMLElement;return target&&HTMLElementCtor&&target instanceof HTMLElementCtor?target:void 0}syncInteractionTrigger(){const next=this.virtualAnchor?void 0:this.slottedTrigger??this.resolveForTrigger();if(next===this.trigger){this.syncTriggerA11y();return}if(this.trigger?.removeEventListener("click",this.onTriggerClick),this.trigger=next,this.trigger&&this.trigger!==this.slottedTrigger&&this.trigger.addEventListener("click",this.onTriggerClick),this.syncTriggerA11y(),this.open){if(!this.resolveAnchor()){this.forceClose({focusTrigger:!1});return}this.updatePopoverRestoreFocusTarget(),this.positionPopup()}}activatePopoverOverlay(){!this.isConnected||this.overlayHandle?.isActive()||(this.overlayHandle=activateOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part~="popup"]'),onEscape:()=>{this.hide()},restoreFocusTo:this.virtualAnchor?this.returnFocusTo??null:this.accessibleTrigger,modal:!1,trapFocus:!1}))}updatePopoverRestoreFocusTarget(){const target=this.virtualAnchor?this.returnFocusTo??null:this.accessibleTrigger;if(this.overlayHandle?.isActive()){this.overlayHandle.updateRestoreFocusTo(target);return}this.activatePopoverOverlay()}showAt(rect,options){const normalizedRect=normalizeVirtualRect(rect);if(!normalizedRect)return;const previousAnchor=this.virtualAnchor,previousReturnFocusTo=this.returnFocusTo;if(this.virtualAnchor=virtualAnchorFromRect(normalizedRect),this.returnFocusTo=options?.returnFocusTo,this.syncInteractionTrigger(),this.open){this.updatePopoverRestoreFocusTarget(),this.positionPopup();return}this.show(),!this.open&&(this.virtualAnchor=previousAnchor,this.returnFocusTo=previousReturnFocusTo,this.syncInteractionTrigger())}resolveAnchor(){return resolveOverlayAnchor(this,{virtualAnchor:this.virtualAnchor,anchor:this.anchor,for:this.for,trigger:this.trigger})}positionPopup(){this.cleanup?.(),this.cleanup=void 0;const popup=this.renderRoot.querySelector('[part~="popup"]'),arrowElement=this.renderRoot.querySelector('[part~="arrow"]'),anchor=this.resolveAnchor();if(!this.open||!anchor||!popup){this.positionedAnchor=void 0,this.anchorPositioned=!1;return}anchor!==this.positionedAnchor&&(this.anchorPositioned=!1),this.cleanup=place(anchor,popup,{placement:rtlAwarePlacement(this.placement,this),strategy:this.positioningStrategy,offset:finiteNumber(this.distance,this.defaultDistance),skidding:finiteNumber(this.skidding,0),sync:this.positioningSync,arrow:this.rendersArrow&&arrowElement?arrowElement:void 0,arrowPadding:Math.max(0,finiteNumber(this.arrowPadding,0)),onPlaced:({placement,arrow})=>{const becamePositioned=!this.anchorPositioned||this.positionedAnchor!==anchor;this.positionedAnchor=anchor,this.anchorPositioned=!0,becamePositioned&&this.updateComplete.then(()=>{this.open&&this.resolveAnchor()===anchor&&this.onPopupPositioned()});const side=applyOverlayArrow(arrowElement,{placement,coords:arrow,enabled:this.rendersArrow,arrowPlacement:this.arrowPlacement,arrowPadding:Math.max(0,finiteNumber(this.arrowPadding,0)),rtl:this.effectiveDirection==="rtl",sizeProperty:"--arrow-size",fallbackSizeProperty:"--lr-overlay-arrow-size"});side!==this.resolvedSide&&(this.resolvedSide=side)}})}syncTriggerA11y(){const trigger=this.trigger??null,popup=this.renderRoot?.querySelector('[part~="popup"]')??null,contribution={attributes:{"aria-haspopup":this.triggerPopupRole,"aria-expanded":this.open?"true":"false"},controls:popup?[popup]:[]};this.triggerAria?this.triggerAria.update(trigger,contribution):this.triggerAria=acquireAriaOwnership(trigger,contribution);const accessibleTrigger=this.accessibleTrigger,distinctAccessibleTrigger=accessibleTrigger!==trigger?accessibleTrigger:null;this.accessibleTriggerAria?this.accessibleTriggerAria.update(distinctAccessibleTrigger,contribution):this.accessibleTriggerAria=acquireAriaOwnership(distinctAccessibleTrigger,contribution),this.overlayHandle?.isActive()&&!this.virtualAnchor&&this.overlayHandle.updateRestoreFocusTo(accessibleTrigger)}get accessibleTrigger(){return this.trigger?resolveAccessibleTrigger(this.trigger):null}releaseTriggerA11y(){this.accessibleTriggerAria?.release(),this.accessibleTriggerAria=void 0,this.triggerAria?.release(),this.triggerAria=void 0}startLightDismiss(){const nextDocument=this.ownerDocument;this.lightDismissDocument!==nextDocument&&(this.stopLightDismiss(),nextDocument.addEventListener("pointerdown",this.onDocumentPointer),this.lightDismissDocument=nextDocument)}stopLightDismiss(){this.lightDismissDocument?.removeEventListener("pointerdown",this.onDocumentPointer),this.lightDismissDocument=void 0}observeHostId(){const ownerDocument=this.ownerDocument;if(this.hostIdObserver&&this.hostIdObserverDocument===ownerDocument)return;this.resetHostIdObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor||!this.isConnected)return;const generation=this.hostIdObserverGeneration,observer=new MutationObserverCtor(()=>{this.hostIdObserver!==observer||this.hostIdObserverDocument!==ownerDocument||this.hostIdObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.id||(this.id=this.generatedHostId),this.syncTriggerA11y())});this.hostIdObserver=observer,this.hostIdObserverDocument=ownerDocument,observer.observe(this,{attributes:!0,attributeFilter:["id"]})}resetHostIdObserver(){this.hostIdObserverGeneration+=1,this.hostIdObserver?.disconnect(),this.hostIdObserver=void 0,this.hostIdObserverDocument=void 0}setOpen(next){if(this._open===next)return;const old=this._open;this._open=next,setCustomState(this.popoverInternals,"open",next),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}show(){return this._open||!this.canOpen?Promise.resolve():this.transitionGate.request(!0,()=>{if(this.emitCancelableLifecycle("lr-show").defaultPrevented){this.syncOpenAttribute();return}if(!this.closePopoverPeers()){this.syncOpenAttribute();return}return this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.setOpen(!0),this.settleTransition("lr-after-show")})}hide(options){return this._open?this.transitionGate.request(!1,()=>{if(this.emitCancelableLifecycle("lr-hide").defaultPrevented){this.syncOpenAttribute();return}return this.forceClose(options)}):Promise.resolve()}closePopoverPeers(){if(this.virtualAnchor||this.localName!==tag("popover"))return!0;const root=this.getRootNode();for(const peer of root.querySelectorAll(tag("popover")))if(!(peer===this||!peer.open||peer.virtualAnchor)&&(peer.hide({focusTrigger:!1}),peer.open))return!1;return!0}reconcileInitialPopoverPeers(){if(!this.isConnected||!this._open||this.virtualAnchor||this.localName!==tag("popover"))return;const peers=[...this.getRootNode().querySelectorAll(tag("popover"))].filter(peer=>peer.isConnected&&peer._open&&!peer.virtualAnchor&&peer.connectionSequence>0);if(peers.reduce((latest,peer)=>!latest||peer.connectionSequence>latest.connectionSequence?peer:latest,void 0)!==this){this.closeForInitialPeerReconciliation();return}for(const peer of peers)peer!==this&&peer.closeForInitialPeerReconciliation()}closeForInitialPeerReconciliation(){this._open&&(this.transitionToken++,this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.cleanup?.(),this.cleanup=void 0,this.stopLightDismiss(),this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.positionedAnchor=void 0,this.anchorPositioned=!1,this.returnFocusTo=void 0,this.setOpen(!1),this.syncOpenAttribute())}forceClose(options){return this._open?(options?.focusTrigger===!1&&(this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0),this.cancelTransitionAnimation(),this.isConnected&&this.setAttribute("data-closing",""),this.setOpen(!1),this.settleTransition("lr-after-hide")):Promise.resolve()}cancelTransitionAnimation(){this.transitionAnimation?.cancel(),this.transitionAnimation=void 0}emitCancelableLifecycle(name){return this.emit(name,null,{cancelable:!0})}emitSettledLifecycle(name){return this.emit(name)}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(this.isConnected){const popup=this.renderRoot.querySelector('[part~="popup"]'),showing=event==="lr-after-show",offset="translateY(var(--lr-size-neg-0-25rem))",animation=popup?animateRegistered(this,popup,`${this.animationNamespace}.${showing?"show":"hide"}`,this.effectiveDirection,{keyframes:showing?[{opacity:0,transform:offset},{opacity:1,transform:"translateY(0)"}]:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:offset}],durationProperties:this.animationDurationProperties(showing),easingProperties:["--lr-easing-standard"]}):void 0;if(this.transitionAnimation=animation,await animation?.finished.catch(()=>{}),this.transitionToken!==token)return;this.cancelTransitionAnimation()}event==="lr-after-hide"&&this.removeAttribute("data-closing"),this.emitSettledLifecycle(event)}}render(){const popupRole=this.popupSurfaceRole;return html`
|
|
2
2
|
<span part="trigger" @click=${this.onTriggerClick} @keydown=${this.onTriggerKeyDown}>
|
|
3
3
|
<slot name="trigger" @slotchange=${this.onTriggerSlotChange}></slot>
|
|
4
4
|
</span>
|
|
@@ -9,4 +9,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
9
9
|
<div part=${this.contentPartNames}>${this.renderPopupContent()}</div>
|
|
10
10
|
${this.rendersArrow?html`<span part="arrow popup__arrow arrow-${this.resolvedSide}"></span>`:nothing}
|
|
11
11
|
</div>
|
|
12
|
-
`}}__decorate([property({type:Boolean,reflect:!0})],LyraPopover.prototype,"open",null),__decorate([property({reflect:!0})],LyraPopover.prototype,"placement",void 0),__decorate([property({type:Number})],LyraPopover.prototype,"distance",void 0),__decorate([property({type:Number})],LyraPopover.prototype,"skidding",void 0),__decorate([property({reflect:!0,converter:omittedEmptyStringConverter})],LyraPopover.prototype,"for",null),__decorate([property({attribute:!1})],LyraPopover.prototype,"anchor",void 0),__decorate([property({type:Boolean,converter:trueDefaultBooleanConverter,reflect:!0})],LyraPopover.prototype,"arrow",void 0),__decorate([property({type:Boolean,attribute:"without-arrow",reflect:!0})],LyraPopover.prototype,"withoutArrow",void 0),__decorate([property({attribute:"arrow-placement"})],LyraPopover.prototype,"arrowPlacement",void 0),__decorate([property({type:Number,attribute:"arrow-padding"})],LyraPopover.prototype,"arrowPadding",void 0),__decorate([property({attribute:"aria-label"})],LyraPopover.prototype,"accessibleLabel",void 0),__decorate([property({attribute:"popup-role"})],LyraPopover.prototype,"popupRole",null),__decorate([state()],LyraPopover.prototype,"resolvedSide",void 0),__decorate([state()],LyraPopover.prototype,"anchorPositioned",void 0);export{LyraPopover};
|
|
12
|
+
`}}__decorate([property({type:Boolean,reflect:!0})],LyraPopover.prototype,"open",null),__decorate([property({reflect:!0})],LyraPopover.prototype,"placement",void 0),__decorate([property({type:Number})],LyraPopover.prototype,"distance",void 0),__decorate([property({type:Number})],LyraPopover.prototype,"skidding",void 0),__decorate([property({reflect:!0,converter:omittedEmptyStringConverter})],LyraPopover.prototype,"for",null),__decorate([property({attribute:!1})],LyraPopover.prototype,"anchor",void 0),__decorate([property({type:Boolean,converter:trueDefaultBooleanConverter,reflect:!0})],LyraPopover.prototype,"arrow",void 0),__decorate([property({type:Boolean,attribute:"without-arrow",reflect:!0})],LyraPopover.prototype,"withoutArrow",void 0),__decorate([property({attribute:"arrow-placement"})],LyraPopover.prototype,"arrowPlacement",void 0),__decorate([property({type:Number,attribute:"arrow-padding"})],LyraPopover.prototype,"arrowPadding",void 0),__decorate([property({attribute:"aria-label"})],LyraPopover.prototype,"accessibleLabel",void 0),__decorate([property({attribute:"popup-role"})],LyraPopover.prototype,"popupRole",null),__decorate([property({type:Boolean,reflect:!0})],LyraPopover.prototype,"disabled",null),__decorate([state()],LyraPopover.prototype,"resolvedSide",void 0),__decorate([state()],LyraPopover.prototype,"anchorPositioned",void 0);export{LyraPopover};
|
|
@@ -173,6 +173,10 @@ export declare class LyraTooltip extends LyraElement<LyraTooltipEventMap> {
|
|
|
173
173
|
/** Focus restoration after Escape is synchronous. Suppress only that focus event so returning
|
|
174
174
|
* to the trigger does not immediately reopen the tooltip; a later genuine focus still opens. */
|
|
175
175
|
private suppressTriggerFocusOpen;
|
|
176
|
+
/** True while the current open state was driven by the pointer (a `mouseenter` on the trigger)
|
|
177
|
+
* rather than by focus, click, or `manual`. Only a pointer-held tooltip has to be re-derived
|
|
178
|
+
* when the trigger element is swapped out from under it -- see `adoptTrigger`. */
|
|
179
|
+
private openedByPointer;
|
|
176
180
|
/** Registered with the shared overlay manager while a virtual-anchor or actionable tooltip is
|
|
177
181
|
* open, so Escape ownership and focus return remain topmost-stack-aware. */
|
|
178
182
|
private overlayHandle?;
|
|
@@ -277,6 +281,12 @@ export declare class LyraTooltip extends LyraElement<LyraTooltipEventMap> {
|
|
|
277
281
|
private cancelPendingTransition;
|
|
278
282
|
private bindTrigger;
|
|
279
283
|
private unbindTrigger;
|
|
284
|
+
/** Whether `trigger` is currently held open by a real user interaction -- the pointer resting
|
|
285
|
+
* over it, or focus sitting inside it. `:hover` is the browser's own post-layout hover state,
|
|
286
|
+
* which is exactly the question being asked ("is the pointer over THIS node") and needs no
|
|
287
|
+
* pointer-coordinate bookkeeping of our own. Both are wrapped because a detached or
|
|
288
|
+
* not-yet-laid-out node can throw on `matches()` in some engines. */
|
|
289
|
+
private isTriggerHeld;
|
|
280
290
|
private adoptTrigger;
|
|
281
291
|
private onTriggerSlotChange;
|
|
282
292
|
private onEnter;
|