@aceshooting/lyra-ui 27.0.0 → 28.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +55 -63
- package/README.md +7 -3
- package/dist/cli/css-declarations.mjs +1 -0
- package/dist/cli/lyra-rename-ledger.mjs +1 -1
- package/dist/cli/migrate-wa.mjs +9 -4
- package/dist/cli/migration-contract.json +1 -1
- package/dist/cli/migration-renames.mjs +2 -2
- package/dist/cli/migration-theme-scopes.mjs +3 -0
- package/dist/cli/theme-scope-vocabulary.generated.mjs +1 -0
- package/dist/components/agent-tools/activity-feed/activity-feed.class.js +1 -1
- package/dist/components/agent-tools/agent-eval-dashboard/agent-eval-dashboard.class.js +1 -1
- package/dist/components/agent-tools/agent-question/agent-question.class.js +1 -1
- package/dist/components/agent-tools/agent-run/agent-run.class.js +1 -1
- package/dist/components/agent-tools/agent-trace/agent-trace.class.js +1 -1
- package/dist/components/agent-tools/approval-queue/approval-queue.class.js +1 -1
- package/dist/components/agent-tools/artifact-panel/artifact-panel.class.js +1 -1
- package/dist/components/agent-tools/background-runs/background-runs.class.js +1 -1
- package/dist/components/agent-tools/browser-frame/browser-frame.class.js +1 -1
- package/dist/components/agent-tools/budget-meter/budget-meter.class.js +1 -1
- package/dist/components/agent-tools/change-review/change-review.class.js +1 -1
- package/dist/components/agent-tools/commit-card/commit-card.class.js +1 -1
- package/dist/components/agent-tools/compare-panel/compare-panel.class.js +1 -1
- package/dist/components/agent-tools/confirm-bar/confirm-bar.class.js +1 -1
- package/dist/components/agent-tools/connector-manager/connector-manager.class.js +1 -1
- package/dist/components/agent-tools/context-inspector/context-inspector.class.js +1 -1
- package/dist/components/agent-tools/eval-dataset/eval-dataset.class.js +1 -1
- package/dist/components/agent-tools/eval-result/eval-result.class.js +1 -1
- package/dist/components/agent-tools/evaluation-run/evaluation-run.class.js +1 -1
- package/dist/components/agent-tools/mcp-app/mcp-app.class.js +1 -1
- package/dist/components/agent-tools/permission-grant/permission-grant.class.js +1 -1
- package/dist/components/agent-tools/permission-rules/permission-rules.class.js +1 -1
- package/dist/components/agent-tools/policy-summary/policy-summary.class.js +1 -1
- package/dist/components/agent-tools/prompt-studio/prompt-studio.class.js +1 -1
- package/dist/components/agent-tools/result-card/result-field.class.js +1 -1
- package/dist/components/agent-tools/schema-viewer/schema-viewer.class.js +1 -1
- package/dist/components/agent-tools/span-waterfall/span-waterfall.class.js +1 -1
- package/dist/components/agent-tools/stack-trace/stack-trace.class.js +1 -1
- package/dist/components/agent-tools/subagent-panel/subagent-panel.class.js +2 -2
- package/dist/components/agent-tools/task-list/task-list.class.js +2 -2
- package/dist/components/agent-tools/terminal/terminal.class.js +1 -1
- package/dist/components/agent-tools/test-results/test-results.class.js +1 -1
- package/dist/components/agent-tools/thinking-panel/thinking-panel.class.js +1 -1
- package/dist/components/agent-tools/tool-approval-dialog/tool-approval-dialog.class.js +1 -1
- package/dist/components/agent-tools/tool-call-block/tool-call-block.class.js +1 -1
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.js +1 -1
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.js +1 -1
- package/dist/components/agent-tools/tool-result-dialog/tool-result-dialog.class.js +1 -1
- package/dist/components/agent-tools/tool-result-view/tool-result-view.class.js +1 -1
- package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.class.js +1 -1
- package/dist/components/agent-tools/tool-timeline/tool-timeline.class.js +1 -1
- package/dist/components/agent-tools/trace-tree/trace-tree.class.js +2 -2
- package/dist/components/charts/chart/box-plot.class.js +1 -1
- package/dist/components/charts/chart/chart-token-cache.js +2 -2
- package/dist/components/charts/chart/chart.class.d.ts +1 -1
- package/dist/components/charts/chart/chart.class.js +3 -3
- package/dist/components/charts/chart/histogram.class.js +1 -1
- package/dist/components/charts/chart/lite-chart.class.js +1 -1
- package/dist/components/conversation/agent-workspace/agent-workspace.class.js +1 -1
- package/dist/components/conversation/audio-visualizer/audio-visualizer.class.js +1 -1
- package/dist/components/conversation/branch-picker/branch-picker.class.js +1 -1
- package/dist/components/conversation/chat-composer/chat-composer.class.js +1 -1
- package/dist/components/conversation/chat-message/chat-message.class.js +1 -1
- package/dist/components/conversation/chat-viewport/chat-viewport.class.js +1 -1
- package/dist/components/conversation/checkpoint/checkpoint.class.js +1 -1
- package/dist/components/conversation/code-block/code-block-base.class.js +1 -1
- package/dist/components/conversation/code-block/code-block-core.class.js +1 -1
- package/dist/components/conversation/code-block/code-block.class.js +1 -1
- package/dist/components/conversation/conversation-item/conversation-item.class.js +1 -1
- package/dist/components/conversation/generation-metrics/generation-metrics.class.js +1 -1
- package/dist/components/conversation/handoff-divider/handoff-divider.class.js +1 -1
- package/dist/components/conversation/markdown/markdown-base.class.js +1 -1
- package/dist/components/conversation/markdown/markdown-core.class.js +1 -1
- package/dist/components/conversation/markdown/markdown.class.js +1 -1
- package/dist/components/conversation/message-actions/message-actions.class.js +1 -1
- package/dist/components/conversation/message-feedback/message-feedback.class.js +1 -1
- package/dist/components/conversation/message-parts/message-parts.class.js +1 -1
- package/dist/components/conversation/model-select/model-select.class.js +1 -1
- package/dist/components/conversation/model-settings-panel/model-settings-panel.class.js +1 -1
- package/dist/components/conversation/prompt-input/prompt-input.class.js +1 -1
- package/dist/components/conversation/prompt-queue/prompt-queue.class.js +1 -1
- package/dist/components/conversation/push-to-talk/push-to-talk.class.js +1 -1
- package/dist/components/conversation/realtime-session/realtime-session.class.js +1 -1
- package/dist/components/conversation/selection-toolbar/selection-toolbar.class.js +1 -1
- package/dist/components/conversation/stream-status/stream-status.class.js +1 -1
- package/dist/components/conversation/suggestion-chips/suggestion-chips.class.js +1 -1
- package/dist/components/conversation/thread-list/thread-list.class.js +1 -1
- package/dist/components/conversation/transcript-feed/transcript-feed.class.js +1 -1
- package/dist/components/conversation/typing-indicator/typing-indicator.class.js +1 -1
- package/dist/components/conversation/usage-badge/usage-badge.class.js +1 -1
- package/dist/components/conversation/voice-picker/voice-picker.class.js +1 -1
- package/dist/components/data/calendar/calendar.class.js +1 -1
- package/dist/components/data/condition-builder/condition-builder.class.js +1 -1
- package/dist/components/data/context-meter/context-meter.class.js +1 -1
- package/dist/components/data/data-grid/data-grid.class.d.ts +2 -2
- package/dist/components/data/data-grid/data-grid.class.js +3 -3
- package/dist/components/data/document-library/document-library.class.js +1 -1
- package/dist/components/data/env-list/env-list.class.js +1 -1
- package/dist/components/data/file-tree/file-tree.class.d.ts +2 -2
- package/dist/components/data/file-tree/file-tree.class.js +1 -1
- package/dist/components/data/flow-canvas/flow-canvas.class.js +1 -1
- package/dist/components/data/flow-controls/flow-controls.class.js +1 -1
- package/dist/components/data/flow-minimap/flow-minimap.class.js +1 -1
- package/dist/components/data/flow-node/flow-node.class.js +1 -1
- package/dist/components/data/flow-run-status/flow-run-status.class.js +1 -1
- package/dist/components/data/funnel/funnel.class.js +1 -1
- package/dist/components/data/gauge/gauge.class.js +1 -1
- package/dist/components/data/graph-query-builder/graph-query-builder.class.js +1 -1
- package/dist/components/data/heatmap/heatmap.class.js +1 -1
- package/dist/components/data/pagination/pagination.class.d.ts +2 -0
- package/dist/components/data/pagination/pagination.class.js +1 -1
- package/dist/components/data/pagination/pagination.styles.js +1 -1
- package/dist/components/data/sequence-strip/sequence-strip.class.js +1 -1
- package/dist/components/data/sparkline/sparkline.class.js +1 -1
- package/dist/components/data/stat/stat.class.js +1 -1
- package/dist/components/data/table/table.class.d.ts +23 -2
- package/dist/components/data/table/table.class.js +5 -3
- package/dist/components/data/table/table.styles.js +1 -1
- package/dist/components/data/timeline/timeline.class.js +1 -1
- package/dist/components/data/tree/tree.class.js +1 -1
- package/dist/components/data/word-cloud/word-cloud.class.js +1 -1
- package/dist/components/forms/button/button.class.js +1 -1
- package/dist/components/forms/checkbox/checkbox.class.js +1 -1
- package/dist/components/forms/checkbox-group/checkbox-group.class.js +1 -1
- package/dist/components/forms/code-editor/code-editor.class.js +1 -1
- package/dist/components/forms/color-picker/color-picker.class.d.ts +8 -4
- package/dist/components/forms/color-picker/color-picker.class.js +2 -2
- package/dist/components/forms/combobox/combobox.class.js +1 -1
- package/dist/components/forms/country-picker/country-picker.class.js +1 -1
- package/dist/components/forms/currency-picker/currency-picker.class.js +1 -1
- package/dist/components/forms/date-picker/date-input.class.js +1 -1
- package/dist/components/forms/date-picker/date-picker.class.js +1 -1
- package/dist/components/forms/emoji-picker/emoji-data-loader.js +1 -1
- package/dist/components/forms/emoji-picker/emoji-picker.class.d.ts +7 -4
- package/dist/components/forms/emoji-picker/emoji-picker.class.js +5 -5
- package/dist/components/forms/icon-button/icon-button.class.d.ts +4 -0
- package/dist/components/forms/icon-button/icon-button.class.js +1 -1
- package/dist/components/forms/icon-button/icon-button.styles.js +1 -1
- package/dist/components/forms/input/input-shared.js +1 -1
- package/dist/components/forms/input/input.class.js +1 -1
- package/dist/components/forms/input/native-time-input.class.js +1 -1
- package/dist/components/forms/input/number-input.class.js +1 -1
- package/dist/components/forms/input/time-input.class.js +1 -1
- package/dist/components/forms/locale-picker/locale-picker.class.js +1 -1
- package/dist/components/forms/otp-input/otp-input.class.js +1 -1
- package/dist/components/forms/phone-input/phone-input.class.js +1 -1
- package/dist/components/forms/radio/radio-group.class.js +1 -1
- package/dist/components/forms/radio/radio.class.js +1 -1
- package/dist/components/forms/rubric-form/rubric-form.class.js +4 -4
- package/dist/components/forms/select/select.class.js +1 -1
- package/dist/components/forms/signature-pad/signature-pad.class.js +1 -1
- package/dist/components/forms/slider/slider.class.js +1 -1
- package/dist/components/forms/switch/switch.class.js +1 -1
- package/dist/components/forms/textarea/textarea.class.js +1 -1
- package/dist/components/forms/time-range/time-range.class.js +1 -1
- package/dist/components/forms/time-zone-picker/time-zone-picker.class.js +1 -1
- package/dist/components/forms/token-input/token-input.class.js +1 -1
- package/dist/components/forms/unit-picker/unit-picker.class.js +1 -1
- package/dist/components/layout/app-rail/app-rail-item.class.js +1 -1
- package/dist/components/layout/app-rail/app-rail.class.d.ts +70 -7
- package/dist/components/layout/app-rail/app-rail.class.js +16 -4
- package/dist/components/layout/app-rail/app-rail.styles.js +1 -1
- package/dist/components/layout/app-rail-group/app-rail-group.class.js +1 -1
- package/dist/components/layout/breadcrumb/breadcrumb.class.js +1 -1
- package/dist/components/layout/card/card.class.js +1 -1
- package/dist/components/layout/carousel/carousel.class.js +1 -1
- package/dist/components/layout/command-palette/command-palette.class.js +1 -1
- package/dist/components/layout/dashboard-grid/dashboard-grid.class.js +1 -1
- package/dist/components/layout/details/accordion-item.class.js +1 -1
- package/dist/components/layout/details/details.class.js +1 -1
- package/dist/components/layout/dock-panel/dock-panel.class.js +1 -1
- package/dist/components/layout/drilldown-panel/drilldown-panel.class.js +1 -1
- package/dist/components/layout/filter-bar/filter-bar.class.js +1 -1
- package/dist/components/layout/menu/menu.class.js +1 -1
- package/dist/components/layout/menubar/menubar.class.js +1 -1
- package/dist/components/layout/multi-split/multi-split.class.js +1 -1
- package/dist/components/layout/navigation-menu/navigation-menu.class.js +1 -1
- package/dist/components/layout/page/page.class.js +1 -1
- package/dist/components/layout/reorder-list/reorder-item.class.js +1 -1
- package/dist/components/layout/reorder-list/reorder-list.class.js +1 -1
- package/dist/components/layout/responsive-panel/responsive-panel.class.js +1 -1
- package/dist/components/layout/scroller/scroller.class.js +1 -1
- package/dist/components/layout/segmented/segmented.class.d.ts +7 -4
- package/dist/components/layout/segmented/segmented.styles.js +1 -1
- package/dist/components/layout/split-panel/split-panel.class.js +1 -1
- package/dist/components/layout/tab-group/tab-group.class.js +1 -1
- package/dist/components/layout/tab-group/tab.class.js +1 -1
- package/dist/components/layout/virtual-list/virtual-list.styles.js +1 -1
- package/dist/components/layout/widget/widget.class.js +1 -1
- package/dist/components/media/animated-image/animated-image.class.js +1 -1
- package/dist/components/media/attachment-chip/attachment-chip.class.js +1 -1
- package/dist/components/media/attachment-trigger/attachment-trigger.class.js +2 -2
- package/dist/components/media/av-player/av-player.class.js +1 -1
- package/dist/components/media/avatar-group/avatar-group.class.js +1 -1
- package/dist/components/media/drop-zone/drop-zone.class.js +1 -1
- package/dist/components/media/file-icon/file-icon.class.js +1 -1
- package/dist/components/media/file-input/file-input.class.js +1 -1
- package/dist/components/media/flag/flag.class.js +1 -1
- package/dist/components/media/image-comparer/image-comparer.class.js +1 -1
- package/dist/components/media/image-viewer/image-viewer.class.d.ts +2 -1
- package/dist/components/media/image-viewer/image-viewer.class.js +4 -2
- package/dist/components/media/image-viewer/image-viewer.styles.js +1 -1
- package/dist/components/media/lightbox/lightbox.class.js +1 -1
- package/dist/components/media/map/map.class.js +1 -1
- package/dist/components/media/media-card/media-card.class.js +1 -1
- package/dist/components/media/pan-zoom/pan-zoom.class.js +1 -1
- package/dist/components/media/qr-code/qr-code.class.d.ts +2 -2
- package/dist/components/media/qr-code/qr-code.class.js +1 -1
- package/dist/components/media/sequence-playback/sequence-playback.class.js +1 -1
- package/dist/components/media/video/video.class.js +1 -1
- package/dist/components/media/video-playlist/video-playlist.class.js +1 -1
- package/dist/components/media/zoomable-frame/zoomable-frame.class.js +1 -1
- package/dist/components/overlays/alert/alert.class.js +1 -1
- package/dist/components/overlays/badge/tag.class.js +1 -1
- package/dist/components/overlays/callout/callout.class.js +1 -1
- package/dist/components/overlays/chip/chip-group.class.js +1 -1
- package/dist/components/overlays/chip/chip.class.js +1 -1
- package/dist/components/overlays/context-menu/context-menu.class.js +1 -1
- package/dist/components/overlays/dialog/confirm.js +1 -1
- package/dist/components/overlays/dialog/dialog.class.js +1 -1
- package/dist/components/overlays/kbd/kbd.class.js +1 -1
- package/dist/components/overlays/overlay/popover.class.js +1 -1
- package/dist/components/overlays/overlay/tooltip.class.js +1 -1
- package/dist/components/overlays/progress/progress-bar.class.js +1 -1
- package/dist/components/overlays/progress/progress-ring.class.js +1 -1
- package/dist/components/overlays/rating/rating.class.js +1 -1
- package/dist/components/overlays/skeleton/skeleton.class.js +1 -1
- package/dist/components/overlays/spinner/spinner.class.js +1 -1
- package/dist/components/overlays/toast/toast-item.class.js +1 -1
- package/dist/components/overlays/toast/toast.class.js +1 -1
- package/dist/components/retrieval/chunk-inspector/chunk-inspector.class.js +1 -1
- package/dist/components/retrieval/citation-badge/citation-badge.class.js +1 -1
- package/dist/components/retrieval/claim-evidence/claim-evidence.class.js +1 -1
- package/dist/components/retrieval/community-card/community-card.class.js +1 -1
- package/dist/components/retrieval/embedding-explorer/embedding-explorer.class.js +1 -1
- package/dist/components/retrieval/entity-card/entity-card.class.js +1 -1
- package/dist/components/retrieval/entity-chip/entity-chip.class.js +1 -1
- package/dist/components/retrieval/entity-dossier/entity-dossier.class.js +1 -1
- package/dist/components/retrieval/graph/graph.class.js +1 -1
- package/dist/components/retrieval/graph-legend/graph-legend.class.js +1 -1
- package/dist/components/retrieval/grounding-summary/grounding-summary.class.js +2 -2
- package/dist/components/retrieval/ingestion-queue/ingestion-queue.class.js +1 -1
- package/dist/components/retrieval/knowledge-base/knowledge-base.class.js +1 -1
- package/dist/components/retrieval/knowledge-base-admin/knowledge-base-admin.class.js +1 -1
- package/dist/components/retrieval/knowledge-graph-explorer/knowledge-graph-explorer.class.js +1 -1
- package/dist/components/retrieval/memory-panel/memory-panel.class.js +1 -1
- package/dist/components/retrieval/mind-map/mind-map.class.js +1 -1
- package/dist/components/retrieval/neighbor-list/neighbor-list.class.js +1 -1
- package/dist/components/retrieval/node-palette/node-palette.class.js +1 -1
- package/dist/components/retrieval/path-strip/path-strip.class.js +1 -1
- package/dist/components/retrieval/provenance-panel/provenance-panel.class.js +1 -1
- package/dist/components/retrieval/rag-answer/rag-answer.class.js +1 -1
- package/dist/components/retrieval/rag-eval-dashboard/rag-eval-dashboard.class.js +1 -1
- package/dist/components/retrieval/research-progress/research-progress.class.js +1 -1
- package/dist/components/retrieval/retrieval-compare/retrieval-compare.class.js +1 -1
- package/dist/components/retrieval/retrieval-results/retrieval-results.class.js +1 -1
- package/dist/components/retrieval/retrieval-search/retrieval-search.class.js +1 -1
- package/dist/components/retrieval/retrieval-trace/retrieval-trace.class.js +1 -1
- package/dist/components/retrieval/source-card/source-card.class.js +1 -1
- package/dist/components/retrieval/source-list/source-list.class.js +1 -1
- package/dist/components/retrieval/source-picker/source-picker.class.js +1 -1
- package/dist/components/utility/copy-button/copy-button.class.js +1 -1
- package/dist/components/utility/diff-view/diff-view.class.js +1 -1
- package/dist/components/utility/export-button/export-button.class.js +1 -1
- package/dist/components/utility/icon/icon.class.js +1 -1
- package/dist/components/utility/json-viewer/json-viewer.class.js +1 -1
- package/dist/components/utility/known-date/known-date.class.js +1 -1
- package/dist/components/utility/mention-popover/mention-popover.class.js +1 -1
- package/dist/components/utility/poll-status/poll-status.class.js +1 -1
- package/dist/components/utility/random-content/random-content.class.js +1 -1
- package/dist/components/utility/tour/tour.class.js +1 -1
- package/dist/components/viewers/archive-viewer/archive-viewer.class.js +1 -1
- package/dist/components/viewers/calendar-viewer/calendar-viewer.class.js +1 -1
- package/dist/components/viewers/contact-viewer/contact-viewer.class.js +1 -1
- package/dist/components/viewers/csv-viewer/csv-viewer.class.js +1 -1
- package/dist/components/viewers/dataset-viewer/dataset-viewer.class.js +2 -2
- package/dist/components/viewers/document-compare/document-compare.class.js +1 -1
- package/dist/components/viewers/document-preview/document-preview.class.js +1 -1
- package/dist/components/viewers/document-viewer/document-viewer.class.js +1 -1
- package/dist/components/viewers/docx-viewer/docx-viewer.class.js +1 -1
- package/dist/components/viewers/ebook-viewer/ebook-viewer.class.js +1 -1
- package/dist/components/viewers/email-viewer/email-viewer.class.js +1 -1
- package/dist/components/viewers/geojson-view/geojson-view.class.js +1 -1
- package/dist/components/viewers/geojson-view/geojson-viewer.class.js +1 -1
- package/dist/components/viewers/highlight-layer/highlight-layer.class.js +1 -1
- package/dist/components/viewers/html-viewer/html-viewer.class.js +1 -1
- package/dist/components/viewers/include/include.class.js +1 -1
- package/dist/components/viewers/notebook-viewer/notebook-viewer.class.js +1 -1
- package/dist/components/viewers/page-rail/page-rail.class.d.ts +1 -1
- package/dist/components/viewers/page-rail/page-rail.class.js +3 -3
- package/dist/components/viewers/pdf-viewer/pdf-viewer.class.d.ts +2 -2
- package/dist/components/viewers/pdf-viewer/pdf-viewer.class.js +2 -2
- package/dist/components/viewers/pptx-viewer/pptx-viewer.class.js +1 -1
- package/dist/components/viewers/spreadsheet-viewer/spreadsheet-viewer.class.js +1 -1
- package/dist/components/viewers/svg-viewer/svg-viewer.class.js +1 -1
- package/dist/components/viewers/xml-viewer/xml-viewer.class.js +1 -1
- package/dist/events.d.ts +6 -1
- package/dist/framework-types.d.ts +1 -1
- package/dist/internal/accessibility-visibility.js +1 -1
- package/dist/internal/collection-snapshot.js +1 -1
- package/dist/internal/default-strings/agent-tools.generated.js +1 -0
- package/dist/internal/default-strings/charts.generated.js +1 -0
- package/dist/internal/default-strings/conversation.generated.js +1 -0
- package/dist/internal/default-strings/data.generated.js +1 -0
- package/dist/internal/default-strings/forms.generated.js +1 -0
- package/dist/internal/default-strings/layout.generated.js +1 -0
- package/dist/internal/default-strings/media.generated.js +1 -0
- package/dist/internal/default-strings/overlays.generated.js +1 -0
- package/dist/internal/default-strings/retrieval.generated.js +1 -0
- package/dist/internal/default-strings/shared.generated.js +1 -0
- package/dist/internal/default-strings/utility.generated.js +1 -0
- package/dist/internal/default-strings/viewers.generated.js +5 -0
- package/dist/internal/dev-mode-attribute-warning.development.js +1 -1
- package/dist/internal/dev-mode-attribute-warning.production.js +1 -1
- package/dist/internal/document-tokens.d.ts +11 -0
- package/dist/internal/document-tokens.generated.js +15 -0
- package/dist/internal/document-tokens.js +3 -0
- package/dist/internal/form-associated.d.ts +1 -1
- package/dist/internal/form-associated.js +1 -1
- package/dist/internal/glass-surface.styles.js +1 -1
- package/dist/internal/host-tokens.styles.js +1 -0
- package/dist/internal/image-zoom.js +1 -0
- package/dist/internal/intl-cache.js +1 -1
- package/dist/internal/localization-types.d.ts +1 -1
- package/dist/internal/localization.js +2 -2
- package/dist/internal/lyra-element.d.ts +4 -2
- package/dist/internal/lyra-element.js +2 -2
- package/dist/internal/opaque-content-border.styles.js +1 -1
- package/dist/internal/open-overlay-raise.styles.js +1 -0
- package/dist/internal/optional-peer-failure.js +1 -0
- package/dist/internal/package-metadata.js +1 -1
- package/dist/internal/prefix.js +1 -1
- package/dist/internal/specialist-host-tokens.styles.js +1 -0
- package/dist/internal/specialist-tokens.generated.js +2 -0
- package/dist/internal/step-value.js +1 -1
- package/dist/internal/theme-observation.js +1 -1
- package/dist/internal/theme-scopes.d.ts +11 -0
- package/dist/internal/theme-scopes.js +1 -0
- package/dist/looks/shadcn.css +1 -1
- package/dist/lyra.d.ts +1 -1
- package/dist/lyra.js +1 -1
- package/dist/styles/design-tokens.css +1 -1
- package/dist/styles/tokens-root.css +1 -1
- package/dist/surfaces/glass.css +1 -1
- package/dist/testing/happy-dom-shims.d.ts +21 -2
- package/dist/testing/happy-dom-shims.js +1 -1
- package/dist/testing/index.d.ts +1 -1
- package/dist/testing/index.js +1 -1
- package/dist/testing/interaction-drivers.d.ts +66 -7
- package/dist/testing/interaction-drivers.js +1 -1
- package/dist/testing/jsdom-shims.d.ts +70 -0
- package/dist/testing/jsdom-shims.js +1 -0
- package/dist/theme/look-inputs.d.ts +1 -1
- package/dist/theme/look-inputs.js +37 -41
- package/dist/theme/theme.d.ts +13 -0
- package/dist/theme/theme.js +1 -1
- package/dist/theme.css +1 -1
- package/dist/utilities/index.d.ts +1 -1
- package/dist/utilities/index.js +1 -1
- package/dist/utilities/scoped-registry.d.ts +3 -0
- package/dist/utilities/scoped-registry.js +1 -1
- package/dist/utilities/theme-scopes.d.ts +1 -0
- package/dist/utilities/theme-scopes.js +1 -0
- package/dist/utilities/tokens.d.ts +1 -0
- package/dist/utilities/tokens.js +1 -0
- package/llms/components/lr-app-rail.md +51 -4
- package/llms/components/lr-emoji-picker.md +13 -8
- package/llms/components/lr-icon-button.md +13 -1
- package/llms/components/lr-image-viewer.md +8 -0
- package/llms/components/lr-pagination.md +4 -2
- package/llms/components/lr-segmented.md +7 -3
- package/llms/components/lr-table.md +14 -12
- package/llms/components/lr-thread-list.md +4 -3
- package/llms/migration.md +9 -0
- package/llms/peers.md +1 -1
- package/llms/shared/events-and-types.md +41 -0
- package/llms/shared/frameworks-and-ssr.md +16 -0
- package/llms/shared/imports-and-registration.md +4 -3
- package/llms/shared/native-styles-and-utilities.md +38 -3
- package/llms/shared/styles-and-tokens.md +242 -102
- package/llms/shared/testing-and-utilities.md +90 -6
- package/llms/shared.md +431 -114
- package/llms/tokens.md +31 -49
- package/locales.json +138 -138
- package/package.json +14 -7
- package/registrations.json +1 -1
- package/dist/internal/default-strings.generated.js +0 -5
- package/dist/internal/specialist-tokens.styles.js +0 -1
- package/dist/internal/tokens/palette.styles.js +0 -1
- package/dist/internal/tokens.styles.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{composedAccessibilityText,isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{applyComposedFocusRepair,captureComposedFocusRepair,nearestExternalFocusTarget}from"../../../internal/focus-navigation.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{closeIcon}from"../../../internal/icons.js";import{literalSetConverter}from"../../../internal/converters.js";import{semanticVariantConverter}from"../../../internal/semantic-variant.js";import{variants}from"../../../internal/variants.styles.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./chip.styles.js";import{LYRA_DEFAULT_remove,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";const CHIP_SIZE=literalSetConverter(["3xs","2xs","xs","s","m","l","xl","small","medium","large"],"m"),CHIP_VARIANT=semanticVariantConverter("neutral");function sourceParent(node){if(node.parentElement)return node.parentElement;const root=node.getRootNode();return"host"in root?root.host:null}function isClosedSourceDetailsBranch(details,branch){return details.localName!=="details"||details.hasAttribute("open")||branch===null?!1:Array.from(details.children).find(child=>child.localName==="summary")!==branch}function isSourceLabelAvailable(node){const target=node.nodeType===1?node:sourceParent(node);if(!target?.isConnected)return!1;let branch=target,current=sourceParent(target);if(isAccessibilitySubtreeExcluded(target))return!1;for(;current;){if(isAccessibilitySubtreeExcluded(current)||isClosedSourceDetailsBranch(current,branch))return!1;branch=current,current=sourceParent(current)}return!0}class LyraChip extends LyraElement{constructor(){super(...arguments),this._size="m",this._variant="neutral",this.removable=!1,this.disabled=!1,this.pill=!1,this.selected=!1,this.toggleable=!1,this.wrap=!1,this.slotPresence=new SlotPresenceController(this),this.cachedLabelText="",this.labelTextObserver=new AccessibleTextController(this,[""],()=>{this.syncHostActionRole(),this.updateBrowserDerivedState(()=>this.recomputeLabelText())},["slot","role"],!1),this.managedActionGroupRole=!1,this.onLabelSlotChange=event=>{const target=event.target;target?.nodeType!==1||target.localName!=="slot"||this.tracksActionLabel&&(this.labelTextObserver.bind(),this.updateBrowserDerivedState(()=>this.recomputeLabelText()))},this.onRemoveClick=()=>{if(this.disabled)return;const repair=captureComposedFocusRepair(this,()=>nearestExternalFocusTarget(this));this.emit("lr-remove",{value:this.value}),repair&&(!this.isConnected||!this.removable)&&applyComposedFocusRepair(repair)},this.onToggleClick=()=>{if(this.disabled)return;const selected=!this.selected;this.emit("lr-chip-toggle-request",{value:this.value,selected},{cancelable:!0}).defaultPrevented||(this.selected=selected,this.emit("lr-chip-change",{value:this.value,selected}))}}static{this.defaultStrings={...super.defaultStrings,remove:LYRA_DEFAULT_remove,removeWithContext:LYRA_DEFAULT_removeWithContext,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,variants,styles]}get size(){return this._size}set size(next){const normalized=CHIP_SIZE.normalizeReflected(this,"size",next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}get variant(){return this._variant}set variant(next){const normalized=CHIP_VARIANT.normalizeReflected(this,"variant",next),old=this._variant;old!==normalized&&(this._variant=normalized,this.requestUpdate("variant",old))}get withRemove(){return this.removable}set withRemove(next){this.removable=!!next}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onLabelSlotChange),this.syncLabelObservation();const sampleBrowserState=()=>{this.tracksActionLabel&&this.recomputeLabelText(!0,!0)};this.hasUpdated?(sampleBrowserState(),this.ownerDocument.defaultView?.queueMicrotask(()=>{this.isConnected&&this.tracksActionLabel&&this.recomputeLabelText()})):this.seedFirstRenderState(sampleBrowserState)}get tracksActionLabel(){return this.toggleable||this.removable}syncLabelObservation(){this.labelTextObserver.setEnabled(this.tracksActionLabel)}disconnectedCallback(){this.removeEventListener("slotchange",this.onLabelSlotChange),this.releaseHostActionRole(),this.pendingControlFocusRepair=void 0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.labelTextObserver.adopted()}computeLabelText(preferLightDom=!1){const slot=this.renderRoot?.querySelector("slot:not([name])"),lightDomNodes=this.childNodes,assigned=slot?.assignedNodes({flatten:!0})??[],direct=Array.from(lightDomNodes??[]).filter(node=>node.nodeType!==1||(node.getAttribute("slot")??"")==="");return(!preferLightDom&&assigned.length>0?assigned:direct).map(node=>composedAccessibilityText(node,{ancestorBoundary:this,isSubtreeExcluded:element=>element.getRootNode()===this.renderRoot&&element.getAttribute("part")?.split(/\s+/).includes("label")?!1:isAccessibilitySubtreeExcluded(element),requireRendered:preferLightDom?!1:node.nodeType!==1||node.localName!=="slot",shouldPruneNode:candidate=>!this.contains(candidate)&&!isSourceLabelAvailable(candidate),ignoreInheritedVisibility:!0})).join(" ").replace(/\s+/g," ").trim()}recomputeLabelText(request=!0,preferLightDom=!1){const next=this.computeLabelText(preferLightDom);next!==this.cachedLabelText&&(this.cachedLabelText=next,request&&this.requestUpdate())}get accessibleToggleLabel(){return this.cachedLabelText||this.localize("select")}get accessibleRemoveLabel(){const text=this.cachedLabelText;return text?this.localize("removeWithContext",void 0,{label:text}):this.localize("remove")}get primaryControl(){return this.renderRoot.querySelector(this.removable?'[part="remove-button"]':'[part="toggle-button"]')}focus(options){this.primaryControl?.focus(options)}blur(){this.primaryControl?.blur()}click(){const control=this.primaryControl;control?control.click():super.click()}willUpdate(changed){if(super.willUpdate(changed),changed.has("removable")&&!this.removable&&this.removeAttribute("with-remove"),(changed.has("removable")||changed.has("toggleable"))&&(this.syncLabelObservation(),this.hasUpdated&&(this.tracksActionLabel?this.recomputeLabelText(!1):this.cachedLabelText="")),this.pendingControlFocusRepair)return;const oldRemovable=changed.get("removable")??this.removable,oldToggleable=changed.get("toggleable")??this.toggleable,oldDisabled=changed.get("disabled")??this.disabled,oldMode=oldRemovable?"remove":oldToggleable?"toggle":"passive",newMode=this.removable?"remove":this.toggleable?"toggle":"passive";oldMode===newMode&&!(oldDisabled===!1&&this.disabled)||(this.pendingControlFocusRepair=captureComposedFocusRepair(this,()=>nearestExternalFocusTarget(this)??this.renderRoot.querySelector('[part="remove-button"], [part="toggle-button"]'))??void 0)}updated(changed){super.updated(changed),this.syncHostActionRole();const repair=this.pendingControlFocusRepair;if(this.pendingControlFocusRepair=void 0,!repair)return;const replacement=this.disabled?null:this.primaryControl;applyComposedFocusRepair(repair,replacement??repair.candidate)}syncHostActionRole(){const needsGroup=this.tracksActionLabel&&this.hasAttribute("aria-label");needsGroup&&!this.hasAttribute("role")?(this.setAttribute("role","group"),this.managedActionGroupRole=!0):needsGroup||this.releaseHostActionRole()}releaseHostActionRole(){this.managedActionGroupRole&&this.getAttribute("role")==="group"&&this.removeAttribute("role"),this.managedActionGroupRole=!1}render(){const toggleMode=this.toggleable&&!this.removable,pressed=this.selected&&!this.removable;return html`
|
|
1
|
+
import{__decorate}from"tslib";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{composedAccessibilityText,isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{applyComposedFocusRepair,captureComposedFocusRepair,nearestExternalFocusTarget}from"../../../internal/focus-navigation.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{closeIcon}from"../../../internal/icons.js";import{literalSetConverter}from"../../../internal/converters.js";import{semanticVariantConverter}from"../../../internal/semantic-variant.js";import{variants}from"../../../internal/variants.styles.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./chip.styles.js";import{LYRA_DEFAULT_remove,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_select}from"../../../internal/default-strings/shared.generated.js";const CHIP_SIZE=literalSetConverter(["3xs","2xs","xs","s","m","l","xl","small","medium","large"],"m"),CHIP_VARIANT=semanticVariantConverter("neutral");function sourceParent(node){if(node.parentElement)return node.parentElement;const root=node.getRootNode();return"host"in root?root.host:null}function isClosedSourceDetailsBranch(details,branch){return details.localName!=="details"||details.hasAttribute("open")||branch===null?!1:Array.from(details.children).find(child=>child.localName==="summary")!==branch}function isSourceLabelAvailable(node){const target=node.nodeType===1?node:sourceParent(node);if(!target?.isConnected)return!1;let branch=target,current=sourceParent(target);if(isAccessibilitySubtreeExcluded(target))return!1;for(;current;){if(isAccessibilitySubtreeExcluded(current)||isClosedSourceDetailsBranch(current,branch))return!1;branch=current,current=sourceParent(current)}return!0}class LyraChip extends LyraElement{constructor(){super(...arguments),this._size="m",this._variant="neutral",this.removable=!1,this.disabled=!1,this.pill=!1,this.selected=!1,this.toggleable=!1,this.wrap=!1,this.slotPresence=new SlotPresenceController(this),this.cachedLabelText="",this.labelTextObserver=new AccessibleTextController(this,[""],()=>{this.syncHostActionRole(),this.updateBrowserDerivedState(()=>this.recomputeLabelText())},["slot","role"],!1),this.managedActionGroupRole=!1,this.onLabelSlotChange=event=>{const target=event.target;target?.nodeType!==1||target.localName!=="slot"||this.tracksActionLabel&&(this.labelTextObserver.bind(),this.updateBrowserDerivedState(()=>this.recomputeLabelText()))},this.onRemoveClick=()=>{if(this.disabled)return;const repair=captureComposedFocusRepair(this,()=>nearestExternalFocusTarget(this));this.emit("lr-remove",{value:this.value}),repair&&(!this.isConnected||!this.removable)&&applyComposedFocusRepair(repair)},this.onToggleClick=()=>{if(this.disabled)return;const selected=!this.selected;this.emit("lr-chip-toggle-request",{value:this.value,selected},{cancelable:!0}).defaultPrevented||(this.selected=selected,this.emit("lr-chip-change",{value:this.value,selected}))}}static{this.defaultStrings={...super.defaultStrings,remove:LYRA_DEFAULT_remove,removeWithContext:LYRA_DEFAULT_removeWithContext,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,variants,styles]}get size(){return this._size}set size(next){const normalized=CHIP_SIZE.normalizeReflected(this,"size",next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}get variant(){return this._variant}set variant(next){const normalized=CHIP_VARIANT.normalizeReflected(this,"variant",next),old=this._variant;old!==normalized&&(this._variant=normalized,this.requestUpdate("variant",old))}get withRemove(){return this.removable}set withRemove(next){this.removable=!!next}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onLabelSlotChange),this.syncLabelObservation();const sampleBrowserState=()=>{this.tracksActionLabel&&this.recomputeLabelText(!0,!0)};this.hasUpdated?(sampleBrowserState(),this.ownerDocument.defaultView?.queueMicrotask(()=>{this.isConnected&&this.tracksActionLabel&&this.recomputeLabelText()})):this.seedFirstRenderState(sampleBrowserState)}get tracksActionLabel(){return this.toggleable||this.removable}syncLabelObservation(){this.labelTextObserver.setEnabled(this.tracksActionLabel)}disconnectedCallback(){this.removeEventListener("slotchange",this.onLabelSlotChange),this.releaseHostActionRole(),this.pendingControlFocusRepair=void 0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.labelTextObserver.adopted()}computeLabelText(preferLightDom=!1){const slot=this.renderRoot?.querySelector("slot:not([name])"),lightDomNodes=this.childNodes,assigned=slot?.assignedNodes({flatten:!0})??[],direct=Array.from(lightDomNodes??[]).filter(node=>node.nodeType!==1||(node.getAttribute("slot")??"")==="");return(!preferLightDom&&assigned.length>0?assigned:direct).map(node=>composedAccessibilityText(node,{ancestorBoundary:this,isSubtreeExcluded:element=>element.getRootNode()===this.renderRoot&&element.getAttribute("part")?.split(/\s+/).includes("label")?!1:isAccessibilitySubtreeExcluded(element),requireRendered:preferLightDom?!1:node.nodeType!==1||node.localName!=="slot",shouldPruneNode:candidate=>!this.contains(candidate)&&!isSourceLabelAvailable(candidate),ignoreInheritedVisibility:!0})).join(" ").replace(/\s+/g," ").trim()}recomputeLabelText(request=!0,preferLightDom=!1){const next=this.computeLabelText(preferLightDom);next!==this.cachedLabelText&&(this.cachedLabelText=next,request&&this.requestUpdate())}get accessibleToggleLabel(){return this.cachedLabelText||this.localize("select")}get accessibleRemoveLabel(){const text=this.cachedLabelText;return text?this.localize("removeWithContext",void 0,{label:text}):this.localize("remove")}get primaryControl(){return this.renderRoot.querySelector(this.removable?'[part="remove-button"]':'[part="toggle-button"]')}focus(options){this.primaryControl?.focus(options)}blur(){this.primaryControl?.blur()}click(){const control=this.primaryControl;control?control.click():super.click()}willUpdate(changed){if(super.willUpdate(changed),changed.has("removable")&&!this.removable&&this.removeAttribute("with-remove"),(changed.has("removable")||changed.has("toggleable"))&&(this.syncLabelObservation(),this.hasUpdated&&(this.tracksActionLabel?this.recomputeLabelText(!1):this.cachedLabelText="")),this.pendingControlFocusRepair)return;const oldRemovable=changed.get("removable")??this.removable,oldToggleable=changed.get("toggleable")??this.toggleable,oldDisabled=changed.get("disabled")??this.disabled,oldMode=oldRemovable?"remove":oldToggleable?"toggle":"passive",newMode=this.removable?"remove":this.toggleable?"toggle":"passive";oldMode===newMode&&!(oldDisabled===!1&&this.disabled)||(this.pendingControlFocusRepair=captureComposedFocusRepair(this,()=>nearestExternalFocusTarget(this)??this.renderRoot.querySelector('[part="remove-button"], [part="toggle-button"]'))??void 0)}updated(changed){super.updated(changed),this.syncHostActionRole();const repair=this.pendingControlFocusRepair;if(this.pendingControlFocusRepair=void 0,!repair)return;const replacement=this.disabled?null:this.primaryControl;applyComposedFocusRepair(repair,replacement??repair.candidate)}syncHostActionRole(){const needsGroup=this.tracksActionLabel&&this.hasAttribute("aria-label");needsGroup&&!this.hasAttribute("role")?(this.setAttribute("role","group"),this.managedActionGroupRole=!0):needsGroup||this.releaseHostActionRole()}releaseHostActionRole(){this.managedActionGroupRole&&this.getAttribute("role")==="group"&&this.removeAttribute("role"),this.managedActionGroupRole=!1}render(){const toggleMode=this.toggleable&&!this.removable,pressed=this.selected&&!this.removable;return html`
|
|
2
2
|
<span part="base">
|
|
3
3
|
${renderInertPresentation(html`<slot name="start"></slot>`,{part:"start",hidden:!this.slotPresence.has("start")})}
|
|
4
4
|
${renderInertPresentation(html`<slot @slotchange=${this.onLabelSlotChange}></slot>`,{part:"label",presentation:toggleMode})}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{eventCollectionSupport}from"../../../internal/collection-snapshot.js";import{html}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{composedParentElement}from"../../../internal/active-element.js";import{setCustomState}from"../../../internal/custom-states.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{composedContains,deepActiveElement}from"../../../internal/nonmodal-overlay-manager.js";import{tag}from"../../../internal/prefix.js";import{styles}from"./context-menu.styles.js";import{LYRA_DEFAULT_menuLabel}from"../../../internal/default-strings.generated.js";const LONG_PRESS_TOLERANCE_PX=10,GESTURE_WINDOW_MS=1e3,POINTER_GAP_PX=2,ANCHOR_MOVE_TOLERANCE_PX=2,claimed=new WeakSet,now=()=>Date.now();function isElementNode(value){return typeof value=="object"&&value!==null&&value.nodeType===1}function firstElement(path){for(const entry of path)if(isElementNode(entry))return entry;return null}function isEditableTarget(element){return element?element.localName==="input"||element.localName==="textarea"?!0:isHtmlElement(element)&&element.isContentEditable:!1}function isContextMenuKey(event){return event.ctrlKey||event.altKey||event.metaKey?!1:event.key==="F10"&&event.shiftKey||event.key==="ContextMenu"}class LyraContextMenu extends LyraElement{constructor(){super(...arguments),this.disabled=!1,this.size="m",this.contextMenuInternals=attachInternalsSafely(this),this.swallowClickUntil=0,this.expectingInnerShow=!1,this.silentClose=!1,this.closingForMove=!1,this.onRegionContextMenu=event=>{if(claimed.has(event)||event.defaultPrevented||this.disabled||this.inForeignOpenSurface(event))return;if(claimed.add(event),this.open){event.preventDefault();return}const gesture=this.gesture;if(gesture&&now()<gesture.until&&gesture.vetoed){this.gesture=void 0;return}if(this.press?.decided==="vetoed")return;this.press&&!this.press.decided&&(this.press.decided="open",this.cancelPress());const path=event.composedPath(),target=firstElement(path);if(!target)return;const rect=target.getBoundingClientRect(),pointInside=event.clientX>=rect.left-1&&event.clientX<=rect.right+1&&event.clientY>=rect.top-1&&event.clientY<=rect.bottom+1;let source,x=event.clientX,y=event.clientY;pointInside?source=event.pointerType==="touch"?"long-press":"pointer":(source="keyboard",[x,y]=this.elementPoint(target)),this.requestOpen({source,target,path:this.regionPath(path),x,y,anchor:target,originalEvent:event})&&event.preventDefault()},this.onRegionKeyDown=event=>{if(this.gesture=void 0,claimed.has(event)||event.defaultPrevented||event.isComposing||this.inForeignOpenSurface(event)||!isContextMenuKey(event)||this.disabled)return;claimed.add(event);const path=event.composedPath(),anchor=firstElement(path);if(!anchor)return;const[x,y]=this.elementPoint(anchor);if(this.open){event.preventDefault(),this.shell?.showAt({x,y,contextElement:anchor},{returnFocusTo:this.returnFocusTo}),this.startWatching(anchor),this.gesture={kind:"keyboard",vetoed:!1,until:now()+GESTURE_WINDOW_MS};return}const opened=this.requestOpen({source:"keyboard",target:anchor,path:this.regionPath(path),x,y,anchor,originalEvent:event});opened&&event.preventDefault(),this.gesture={kind:"keyboard",vetoed:!opened,until:now()+GESTURE_WINDOW_MS}},this.onRegionPointerDown=event=>{if(this.gesture=void 0,this.swallowClickUntil=0,this.press&&this.cancelPress(),claimed.has(event)||this.disabled||this.inForeignOpenSurface(event)||event.pointerType!=="touch"&&event.pointerType!=="pen"||!event.isPrimary||event.button!==0)return;claimed.add(event);const path=event.composedPath(),target=firstElement(path),ownerDocument=this.ownerDocument,view=ownerDocument.defaultView;if(!target||!view)return;const selection=ownerDocument.getSelection(),press={pointerId:event.pointerId,startX:event.clientX,startY:event.clientY,target,path:this.regionPath(path),down:event,selectionWasCollapsed:!selection||selection.rangeCount===0||selection.isCollapsed,editableTarget:isEditableTarget(target),view},onMove=move=>{if(move.pointerId!==press.pointerId)return;Math.hypot(move.clientX-press.startX,move.clientY-press.startY)>LONG_PRESS_TOLERANCE_PX&&this.endPress(press)},onEnd=end=>{end.pointerId===press.pointerId&&this.endPress(press)},onScroll=()=>this.endPress(press),listen={capture:!0,passive:!0};ownerDocument.addEventListener("pointermove",onMove,listen),ownerDocument.addEventListener("pointerup",onEnd,listen),ownerDocument.addEventListener("pointercancel",onEnd,listen),ownerDocument.addEventListener("scroll",onScroll,listen),press.release=()=>{ownerDocument.removeEventListener("pointermove",onMove,listen),ownerDocument.removeEventListener("pointerup",onEnd,listen),ownerDocument.removeEventListener("pointercancel",onEnd,listen),ownerDocument.removeEventListener("scroll",onScroll,listen)},press.timer=view.setTimeout(()=>this.onPressTimer(press),LyraContextMenu.longPressDelayMs),this.press=press},this.onRegionClick=event=>{now()>=this.swallowClickUntil||(this.swallowClickUntil=0,event.preventDefault(),event.stopPropagation())},this.onSurfacePointerDown=event=>{claimed.add(event)},this.onSurfaceKeyDown=event=>{claimed.add(event),isContextMenuKey(event)&&event.preventDefault()},this.onSurfaceContextMenu=event=>{claimed.add(event),isEditableTarget(firstElement(event.composedPath()))||event.preventDefault()},this.onSurfaceFocusOut=event=>{const shell=this.shell,next=event.relatedTarget;!shell||!this.open||!isElementNode(next)||composedContains(shell,next)||this.hide({focusTrigger:!1})},this.onInnerShow=event=>{event.target===this.shell&&(event.stopPropagation(),this.expectingInnerShow||event.preventDefault())},this.onInnerAfterShow=event=>{event.target===this.shell&&(event.stopPropagation(),this.silentClose||this.emit("lr-after-show"))},this.onInnerHide=event=>{if(event.target!==this.shell||(event.stopPropagation(),this.silentClose))return;if(this.emit("lr-hide",null,{cancelable:!0}).defaultPrevented){event.preventDefault(),this.closingForMove&&this.stopWatching();return}setCustomState(this.contextMenuInternals,"open",!1),this.stopWatching()},this.onInnerAfterHide=event=>{event.target===this.shell&&(event.stopPropagation(),this.silentClose?this.silentClose=!1:this.emit("lr-after-hide"),this.returnFocusTo=void 0,this.anchorElement=void 0,this.anchorRect=void 0)}}static{this.defaultStrings={...super.defaultStrings,menuLabel:LYRA_DEFAULT_menuLabel}}static{this.longPressDelayMs=500}static{this.styles=[LyraElement.styles,styles]}static{this.collectionSupport=eventCollectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-show"])}static{this.identityEventDetailProperties=Object.freeze({"lr-show":Object.freeze(["target","originalEvent"])})}static{this.identityEventDetailCollectionItems=Object.freeze({"lr-show":Object.freeze(["path"])})}get open(){return this.shell?.open??!1}showAt(point,options){if(!Number.isFinite(point.x)||!Number.isFinite(point.y)||this.disabled||!this.isConnected)return;const contextElement=point.contextElement;if(this.open){options?.returnFocusTo&&(this.returnFocusTo=options.returnFocusTo),this.shell?.showAt({x:point.x,y:point.y,contextElement},{returnFocusTo:this.returnFocusTo}),contextElement?this.startWatching(contextElement):this.stopWatching();return}this.requestOpen({source:"programmatic",target:contextElement??null,path:contextElement?this.contextElementPath(contextElement):[],x:point.x,y:point.y,anchor:contextElement,originalEvent:null,returnFocusTo:options?.returnFocusTo})}hide(options){return this.shell?.hide(options)??Promise.resolve()}get resolvedLabel(){return hostAriaLabel(this)||this.label||this.localize("menuLabel")}disconnectedCallback(){this.cancelPress(),this.gesture=void 0,this.swallowClickUntil=0,this.stopWatching();const shell=this.shell;shell?.open&&(this.silentClose=!0,shell.hide({focusTrigger:!1})),setCustomState(this.contextMenuInternals,"open",!1),this.returnFocusTo=void 0,this.anchorElement=void 0,this.anchorRect=void 0,this.expectingInnerShow=!1,this.closingForMove=!1,super.disconnectedCallback()}updated(changed){super.updated(changed),changed.has("disabled")&&this.disabled&&this.cancelPress()}inForeignOpenSurface(event){const path=event.composedPath(),surfaceTags=new Set([tag("popover"),tag("dropdown")]);for(let index=0;index<path.length;index+=1){const entry=path[index];if(entry===this)break;if(!isElementNode(entry)||!surfaceTags.has(entry.localName)||entry.open!==!0)continue;const child=path.slice(0,index).find(node=>isElementNode(node)&&node.parentElement===entry);if(!child||child.getAttribute("slot")!=="trigger")return!0}return!1}regionPath(path){const elements=[];for(const entry of path)if(isElementNode(entry)&&(elements.push(entry),entry.parentElement===this))break;return elements}contextElementPath(contextElement){const elements=[];let current=contextElement;for(;current;){if(elements.push(current),current.parentElement===this&¤t.getAttribute("slot")==="trigger")return elements;if(current===this)break;current=composedParentElement(current)}return[contextElement]}onPressTimer(press){if(this.press!==press)return;if(press.timer=void 0,this.open){press.decided="open",this.endPress(press);return}const opened=this.requestOpen({source:"long-press",target:press.target,path:press.path,x:press.startX,y:press.startY,anchor:press.target,originalEvent:press.down});press.decided=opened?"open":"vetoed",opened?(this.clearPressSelection(press),this.swallowClickUntil=now()+GESTURE_WINDOW_MS):this.gesture={kind:"long-press",vetoed:!0,until:now()+GESTURE_WINDOW_MS}}clearPressSelection(press){if(!press.selectionWasCollapsed||press.editableTarget)return;const selection=this.ownerDocument.getSelection();if(!selection||selection.rangeCount===0||selection.isCollapsed)return;const anchorNode=selection.anchorNode,anchorElement=isElementNode(anchorNode)?anchorNode:anchorNode?.parentElement??null;anchorElement&&composedContains(this,anchorElement)&&selection.removeAllRanges()}endPress(press){press.timer!==void 0&&press.view?.clearTimeout(press.timer),press.timer=void 0,press.release?.(),press.release=void 0,this.press===press&&!press.decided&&(this.press=void 0)}cancelPress(){const press=this.press;press&&(this.endPress(press),this.press=void 0)}requestOpen(request){const shell=this.shell;if(this.disabled||!this.isConnected||this.open||!shell)return!1;this.silentClose=!1;const returnFocusTo=request.returnFocusTo??this.relatedFocusTarget(request);if(this.emit("lr-show",{source:request.source,target:request.target,path:Object.freeze([...request.path]),clientX:request.x,clientY:request.y,originalEvent:request.originalEvent},{cancelable:!0}).defaultPrevented||this.disabled||!this.isConnected)return!1;this.expectingInnerShow=!0;try{shell.showAt({x:request.x,y:request.y,contextElement:request.anchor},{returnFocusTo})}finally{this.expectingInnerShow=!1}return shell.open?(this.returnFocusTo=returnFocusTo,setCustomState(this.contextMenuInternals,"open",!0),request.anchor?this.startWatching(request.anchor):this.stopWatching(),!0):!1}relatedFocusTarget(request){const ownerDocument=this.ownerDocument,active=deepActiveElement(ownerDocument);if(!(!isHtmlElement(active)||active===ownerDocument.body)&&active.ownerDocument===ownerDocument&&(composedContains(this,active)||request.source==="programmatic"&&request.anchor&&composedContains(request.anchor,active)))return active}elementPoint(anchor){const rect=anchor.getBoundingClientRect(),root=this.ownerDocument.documentElement,width=root.clientWidth,height=root.clientHeight;let left=Math.max(rect.left,0),right=Math.min(rect.right,width),top=Math.max(rect.top,0),bottom=Math.min(rect.bottom,height);return(left>right||top>bottom)&&(left=Math.min(Math.max(rect.left,0),width),right=Math.min(Math.max(rect.right,0),width),top=Math.min(Math.max(rect.top,0),height),bottom=Math.min(Math.max(rect.bottom,0),height)),[this.effectiveDirection==="rtl"?right:left,bottom]}startWatching(anchor){this.stopWatching();const ownerDocument=anchor.ownerDocument,view=ownerDocument.defaultView;this.anchorElement=anchor,this.anchorRect=anchor.getBoundingClientRect();const roots=new Set([ownerDocument]);for(let current=anchor;current;current=composedParentElement(current)){const root=current.getRootNode();root!==ownerDocument&&root.host&&roots.add(root)}const onScroll=event=>{const target=event.target;(target?.nodeType===9||isElementNode(target)&&composedContains(target,anchor))&&this.checkAnchor(anchor)},onResize=()=>this.checkAnchor(anchor),listen={capture:!0,passive:!0};for(const root of roots)root.addEventListener("scroll",onScroll,listen);view?.addEventListener("resize",onResize,{passive:!0});const visualViewport=view?.visualViewport;visualViewport?.addEventListener("resize",onResize,{passive:!0});const ResizeObserverCtor=view?.ResizeObserver,observer=ResizeObserverCtor?new ResizeObserverCtor(()=>{anchor.isConnected||this.checkAnchor(anchor)}):void 0;observer?.observe(anchor),this.watchCleanup=()=>{for(const root of roots)root.removeEventListener("scroll",onScroll,listen);view?.removeEventListener("resize",onResize),visualViewport?.removeEventListener("resize",onResize),observer?.disconnect()}}stopWatching(){const cleanup=this.watchCleanup;this.watchCleanup=void 0,cleanup?.()}checkAnchor(anchor){if(!(!this.open||this.anchorElement!==anchor)){if(anchor.isConnected){const baseline=this.anchorRect,current=anchor.getBoundingClientRect();if(baseline&&Math.abs(current.left-baseline.left)<=ANCHOR_MOVE_TOLERANCE_PX&&Math.abs(current.top-baseline.top)<=ANCHOR_MOVE_TOLERANCE_PX)return}this.closeForMove()}}closeForMove(){const shell=this.shell;if(!shell)return;const focusWasInMenu=composedContains(shell,deepActiveElement(this.ownerDocument)),returnFocusTo=this.returnFocusTo;this.closingForMove=!0;try{shell.hide({focusTrigger:!1})}finally{this.closingForMove=!1}!shell.open&&focusWasInMenu&&returnFocusTo?.isConnected&&returnFocusTo.focus({preventScroll:!0})}render(){return html`
|
|
1
|
+
import{__decorate}from"tslib";import{eventCollectionSupport}from"../../../internal/collection-snapshot.js";import{html}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{composedParentElement}from"../../../internal/active-element.js";import{setCustomState}from"../../../internal/custom-states.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{composedContains,deepActiveElement}from"../../../internal/nonmodal-overlay-manager.js";import{tag}from"../../../internal/prefix.js";import{styles}from"./context-menu.styles.js";import{LYRA_DEFAULT_menuLabel}from"../../../internal/default-strings/shared.generated.js";const LONG_PRESS_TOLERANCE_PX=10,GESTURE_WINDOW_MS=1e3,POINTER_GAP_PX=2,ANCHOR_MOVE_TOLERANCE_PX=2,claimed=new WeakSet,now=()=>Date.now();function isElementNode(value){return typeof value=="object"&&value!==null&&value.nodeType===1}function firstElement(path){for(const entry of path)if(isElementNode(entry))return entry;return null}function isEditableTarget(element){return element?element.localName==="input"||element.localName==="textarea"?!0:isHtmlElement(element)&&element.isContentEditable:!1}function isContextMenuKey(event){return event.ctrlKey||event.altKey||event.metaKey?!1:event.key==="F10"&&event.shiftKey||event.key==="ContextMenu"}class LyraContextMenu extends LyraElement{constructor(){super(...arguments),this.disabled=!1,this.size="m",this.contextMenuInternals=attachInternalsSafely(this),this.swallowClickUntil=0,this.expectingInnerShow=!1,this.silentClose=!1,this.closingForMove=!1,this.onRegionContextMenu=event=>{if(claimed.has(event)||event.defaultPrevented||this.disabled||this.inForeignOpenSurface(event))return;if(claimed.add(event),this.open){event.preventDefault();return}const gesture=this.gesture;if(gesture&&now()<gesture.until&&gesture.vetoed){this.gesture=void 0;return}if(this.press?.decided==="vetoed")return;this.press&&!this.press.decided&&(this.press.decided="open",this.cancelPress());const path=event.composedPath(),target=firstElement(path);if(!target)return;const rect=target.getBoundingClientRect(),pointInside=event.clientX>=rect.left-1&&event.clientX<=rect.right+1&&event.clientY>=rect.top-1&&event.clientY<=rect.bottom+1;let source,x=event.clientX,y=event.clientY;pointInside?source=event.pointerType==="touch"?"long-press":"pointer":(source="keyboard",[x,y]=this.elementPoint(target)),this.requestOpen({source,target,path:this.regionPath(path),x,y,anchor:target,originalEvent:event})&&event.preventDefault()},this.onRegionKeyDown=event=>{if(this.gesture=void 0,claimed.has(event)||event.defaultPrevented||event.isComposing||this.inForeignOpenSurface(event)||!isContextMenuKey(event)||this.disabled)return;claimed.add(event);const path=event.composedPath(),anchor=firstElement(path);if(!anchor)return;const[x,y]=this.elementPoint(anchor);if(this.open){event.preventDefault(),this.shell?.showAt({x,y,contextElement:anchor},{returnFocusTo:this.returnFocusTo}),this.startWatching(anchor),this.gesture={kind:"keyboard",vetoed:!1,until:now()+GESTURE_WINDOW_MS};return}const opened=this.requestOpen({source:"keyboard",target:anchor,path:this.regionPath(path),x,y,anchor,originalEvent:event});opened&&event.preventDefault(),this.gesture={kind:"keyboard",vetoed:!opened,until:now()+GESTURE_WINDOW_MS}},this.onRegionPointerDown=event=>{if(this.gesture=void 0,this.swallowClickUntil=0,this.press&&this.cancelPress(),claimed.has(event)||this.disabled||this.inForeignOpenSurface(event)||event.pointerType!=="touch"&&event.pointerType!=="pen"||!event.isPrimary||event.button!==0)return;claimed.add(event);const path=event.composedPath(),target=firstElement(path),ownerDocument=this.ownerDocument,view=ownerDocument.defaultView;if(!target||!view)return;const selection=ownerDocument.getSelection(),press={pointerId:event.pointerId,startX:event.clientX,startY:event.clientY,target,path:this.regionPath(path),down:event,selectionWasCollapsed:!selection||selection.rangeCount===0||selection.isCollapsed,editableTarget:isEditableTarget(target),view},onMove=move=>{if(move.pointerId!==press.pointerId)return;Math.hypot(move.clientX-press.startX,move.clientY-press.startY)>LONG_PRESS_TOLERANCE_PX&&this.endPress(press)},onEnd=end=>{end.pointerId===press.pointerId&&this.endPress(press)},onScroll=()=>this.endPress(press),listen={capture:!0,passive:!0};ownerDocument.addEventListener("pointermove",onMove,listen),ownerDocument.addEventListener("pointerup",onEnd,listen),ownerDocument.addEventListener("pointercancel",onEnd,listen),ownerDocument.addEventListener("scroll",onScroll,listen),press.release=()=>{ownerDocument.removeEventListener("pointermove",onMove,listen),ownerDocument.removeEventListener("pointerup",onEnd,listen),ownerDocument.removeEventListener("pointercancel",onEnd,listen),ownerDocument.removeEventListener("scroll",onScroll,listen)},press.timer=view.setTimeout(()=>this.onPressTimer(press),LyraContextMenu.longPressDelayMs),this.press=press},this.onRegionClick=event=>{now()>=this.swallowClickUntil||(this.swallowClickUntil=0,event.preventDefault(),event.stopPropagation())},this.onSurfacePointerDown=event=>{claimed.add(event)},this.onSurfaceKeyDown=event=>{claimed.add(event),isContextMenuKey(event)&&event.preventDefault()},this.onSurfaceContextMenu=event=>{claimed.add(event),isEditableTarget(firstElement(event.composedPath()))||event.preventDefault()},this.onSurfaceFocusOut=event=>{const shell=this.shell,next=event.relatedTarget;!shell||!this.open||!isElementNode(next)||composedContains(shell,next)||this.hide({focusTrigger:!1})},this.onInnerShow=event=>{event.target===this.shell&&(event.stopPropagation(),this.expectingInnerShow||event.preventDefault())},this.onInnerAfterShow=event=>{event.target===this.shell&&(event.stopPropagation(),this.silentClose||this.emit("lr-after-show"))},this.onInnerHide=event=>{if(event.target!==this.shell||(event.stopPropagation(),this.silentClose))return;if(this.emit("lr-hide",null,{cancelable:!0}).defaultPrevented){event.preventDefault(),this.closingForMove&&this.stopWatching();return}setCustomState(this.contextMenuInternals,"open",!1),this.stopWatching()},this.onInnerAfterHide=event=>{event.target===this.shell&&(event.stopPropagation(),this.silentClose?this.silentClose=!1:this.emit("lr-after-hide"),this.returnFocusTo=void 0,this.anchorElement=void 0,this.anchorRect=void 0)}}static{this.defaultStrings={...super.defaultStrings,menuLabel:LYRA_DEFAULT_menuLabel}}static{this.longPressDelayMs=500}static{this.styles=[LyraElement.styles,styles]}static{this.collectionSupport=eventCollectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-show"])}static{this.identityEventDetailProperties=Object.freeze({"lr-show":Object.freeze(["target","originalEvent"])})}static{this.identityEventDetailCollectionItems=Object.freeze({"lr-show":Object.freeze(["path"])})}get open(){return this.shell?.open??!1}showAt(point,options){if(!Number.isFinite(point.x)||!Number.isFinite(point.y)||this.disabled||!this.isConnected)return;const contextElement=point.contextElement;if(this.open){options?.returnFocusTo&&(this.returnFocusTo=options.returnFocusTo),this.shell?.showAt({x:point.x,y:point.y,contextElement},{returnFocusTo:this.returnFocusTo}),contextElement?this.startWatching(contextElement):this.stopWatching();return}this.requestOpen({source:"programmatic",target:contextElement??null,path:contextElement?this.contextElementPath(contextElement):[],x:point.x,y:point.y,anchor:contextElement,originalEvent:null,returnFocusTo:options?.returnFocusTo})}hide(options){return this.shell?.hide(options)??Promise.resolve()}get resolvedLabel(){return hostAriaLabel(this)||this.label||this.localize("menuLabel")}disconnectedCallback(){this.cancelPress(),this.gesture=void 0,this.swallowClickUntil=0,this.stopWatching();const shell=this.shell;shell?.open&&(this.silentClose=!0,shell.hide({focusTrigger:!1})),setCustomState(this.contextMenuInternals,"open",!1),this.returnFocusTo=void 0,this.anchorElement=void 0,this.anchorRect=void 0,this.expectingInnerShow=!1,this.closingForMove=!1,super.disconnectedCallback()}updated(changed){super.updated(changed),changed.has("disabled")&&this.disabled&&this.cancelPress()}inForeignOpenSurface(event){const path=event.composedPath(),surfaceTags=new Set([tag("popover"),tag("dropdown")]);for(let index=0;index<path.length;index+=1){const entry=path[index];if(entry===this)break;if(!isElementNode(entry)||!surfaceTags.has(entry.localName)||entry.open!==!0)continue;const child=path.slice(0,index).find(node=>isElementNode(node)&&node.parentElement===entry);if(!child||child.getAttribute("slot")!=="trigger")return!0}return!1}regionPath(path){const elements=[];for(const entry of path)if(isElementNode(entry)&&(elements.push(entry),entry.parentElement===this))break;return elements}contextElementPath(contextElement){const elements=[];let current=contextElement;for(;current;){if(elements.push(current),current.parentElement===this&¤t.getAttribute("slot")==="trigger")return elements;if(current===this)break;current=composedParentElement(current)}return[contextElement]}onPressTimer(press){if(this.press!==press)return;if(press.timer=void 0,this.open){press.decided="open",this.endPress(press);return}const opened=this.requestOpen({source:"long-press",target:press.target,path:press.path,x:press.startX,y:press.startY,anchor:press.target,originalEvent:press.down});press.decided=opened?"open":"vetoed",opened?(this.clearPressSelection(press),this.swallowClickUntil=now()+GESTURE_WINDOW_MS):this.gesture={kind:"long-press",vetoed:!0,until:now()+GESTURE_WINDOW_MS}}clearPressSelection(press){if(!press.selectionWasCollapsed||press.editableTarget)return;const selection=this.ownerDocument.getSelection();if(!selection||selection.rangeCount===0||selection.isCollapsed)return;const anchorNode=selection.anchorNode,anchorElement=isElementNode(anchorNode)?anchorNode:anchorNode?.parentElement??null;anchorElement&&composedContains(this,anchorElement)&&selection.removeAllRanges()}endPress(press){press.timer!==void 0&&press.view?.clearTimeout(press.timer),press.timer=void 0,press.release?.(),press.release=void 0,this.press===press&&!press.decided&&(this.press=void 0)}cancelPress(){const press=this.press;press&&(this.endPress(press),this.press=void 0)}requestOpen(request){const shell=this.shell;if(this.disabled||!this.isConnected||this.open||!shell)return!1;this.silentClose=!1;const returnFocusTo=request.returnFocusTo??this.relatedFocusTarget(request);if(this.emit("lr-show",{source:request.source,target:request.target,path:Object.freeze([...request.path]),clientX:request.x,clientY:request.y,originalEvent:request.originalEvent},{cancelable:!0}).defaultPrevented||this.disabled||!this.isConnected)return!1;this.expectingInnerShow=!0;try{shell.showAt({x:request.x,y:request.y,contextElement:request.anchor},{returnFocusTo})}finally{this.expectingInnerShow=!1}return shell.open?(this.returnFocusTo=returnFocusTo,setCustomState(this.contextMenuInternals,"open",!0),request.anchor?this.startWatching(request.anchor):this.stopWatching(),!0):!1}relatedFocusTarget(request){const ownerDocument=this.ownerDocument,active=deepActiveElement(ownerDocument);if(!(!isHtmlElement(active)||active===ownerDocument.body)&&active.ownerDocument===ownerDocument&&(composedContains(this,active)||request.source==="programmatic"&&request.anchor&&composedContains(request.anchor,active)))return active}elementPoint(anchor){const rect=anchor.getBoundingClientRect(),root=this.ownerDocument.documentElement,width=root.clientWidth,height=root.clientHeight;let left=Math.max(rect.left,0),right=Math.min(rect.right,width),top=Math.max(rect.top,0),bottom=Math.min(rect.bottom,height);return(left>right||top>bottom)&&(left=Math.min(Math.max(rect.left,0),width),right=Math.min(Math.max(rect.right,0),width),top=Math.min(Math.max(rect.top,0),height),bottom=Math.min(Math.max(rect.bottom,0),height)),[this.effectiveDirection==="rtl"?right:left,bottom]}startWatching(anchor){this.stopWatching();const ownerDocument=anchor.ownerDocument,view=ownerDocument.defaultView;this.anchorElement=anchor,this.anchorRect=anchor.getBoundingClientRect();const roots=new Set([ownerDocument]);for(let current=anchor;current;current=composedParentElement(current)){const root=current.getRootNode();root!==ownerDocument&&root.host&&roots.add(root)}const onScroll=event=>{const target=event.target;(target?.nodeType===9||isElementNode(target)&&composedContains(target,anchor))&&this.checkAnchor(anchor)},onResize=()=>this.checkAnchor(anchor),listen={capture:!0,passive:!0};for(const root of roots)root.addEventListener("scroll",onScroll,listen);view?.addEventListener("resize",onResize,{passive:!0});const visualViewport=view?.visualViewport;visualViewport?.addEventListener("resize",onResize,{passive:!0});const ResizeObserverCtor=view?.ResizeObserver,observer=ResizeObserverCtor?new ResizeObserverCtor(()=>{anchor.isConnected||this.checkAnchor(anchor)}):void 0;observer?.observe(anchor),this.watchCleanup=()=>{for(const root of roots)root.removeEventListener("scroll",onScroll,listen);view?.removeEventListener("resize",onResize),visualViewport?.removeEventListener("resize",onResize),observer?.disconnect()}}stopWatching(){const cleanup=this.watchCleanup;this.watchCleanup=void 0,cleanup?.()}checkAnchor(anchor){if(!(!this.open||this.anchorElement!==anchor)){if(anchor.isConnected){const baseline=this.anchorRect,current=anchor.getBoundingClientRect();if(baseline&&Math.abs(current.left-baseline.left)<=ANCHOR_MOVE_TOLERANCE_PX&&Math.abs(current.top-baseline.top)<=ANCHOR_MOVE_TOLERANCE_PX)return}this.closeForMove()}}closeForMove(){const shell=this.shell;if(!shell)return;const focusWasInMenu=composedContains(shell,deepActiveElement(this.ownerDocument)),returnFocusTo=this.returnFocusTo;this.closingForMove=!0;try{shell.hide({focusTrigger:!1})}finally{this.closingForMove=!1}!shell.open&&focusWasInMenu&&returnFocusTo?.isConnected&&returnFocusTo.focus({preventScroll:!0})}render(){return html`
|
|
2
2
|
<span
|
|
3
3
|
class="trigger"
|
|
4
4
|
@contextmenu=${this.onRegionContextMenu}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{LyraDialog}from"./dialog.class.js";import{defineElement,tag}from"../../../internal/prefix.js";import{LYRA_DEFAULT_cancel,LYRA_DEFAULT_confirm}from"../../../internal/default-strings.generated.js";import{resolveLyraString}from"../../../internal/localization-runtime.js";const CONFIRM_DEFAULT_STRINGS=Object.freeze({cancel:LYRA_DEFAULT_cancel,confirm:LYRA_DEFAULT_confirm}),BUTTON_BASE_STYLE="font: inherit; font-size: var(--lr-font-size-md-sm); padding: var(--lr-space-xs) var(--lr-space-m); border-radius: var(--lr-theme-border-radius-button, var(--lr-radius)); min-block-size: max(var(--lr-size-1-5rem), var(--_lr-density-target-min, 0px)); cursor: pointer; border: var(--lr-border-width-thin) solid var(--lr-color-border);",CANCEL_STYLE="--lr-confirm-button-fill: var(--lr-color-surface); background: var(--lr-confirm-button-state, var(--lr-color-surface)); color: var(--lr-color-text);",CONFIRM_VARIANT_STYLE={neutral:"--lr-confirm-button-fill: var(--lr-color-brand); background: var(--lr-confirm-button-state, var(--lr-color-brand)); color: var(--lr-color-on-brand); border-color: var(--lr-color-brand);",danger:"--lr-confirm-button-fill: var(--lr-color-danger); background: var(--lr-confirm-button-state, var(--lr-color-danger)); color: var(--lr-color-on-danger); border-color: var(--lr-color-danger);"},CONFIRM_BUTTON_ATTRIBUTE=`data-${tag("confirm-action")}`,BUTTON_STATE_STYLE=`
|
|
1
|
+
import{LyraDialog}from"./dialog.class.js";import{defineElement,tag}from"../../../internal/prefix.js";import{LYRA_DEFAULT_cancel,LYRA_DEFAULT_confirm}from"../../../internal/default-strings/shared.generated.js";import{resolveLyraString}from"../../../internal/localization-runtime.js";const CONFIRM_DEFAULT_STRINGS=Object.freeze({cancel:LYRA_DEFAULT_cancel,confirm:LYRA_DEFAULT_confirm}),BUTTON_BASE_STYLE="font: inherit; font-size: var(--lr-font-size-md-sm); padding: var(--lr-space-xs) var(--lr-space-m); border-radius: var(--lr-theme-border-radius-button, var(--lr-radius)); min-block-size: max(var(--lr-size-1-5rem), var(--_lr-density-target-min, 0px)); cursor: pointer; border: var(--lr-border-width-thin) solid var(--lr-color-border);",CANCEL_STYLE="--lr-confirm-button-fill: var(--lr-color-surface); background: var(--lr-confirm-button-state, var(--lr-color-surface)); color: var(--lr-color-text);",CONFIRM_VARIANT_STYLE={neutral:"--lr-confirm-button-fill: var(--lr-color-brand); background: var(--lr-confirm-button-state, var(--lr-color-brand)); color: var(--lr-color-on-brand); border-color: var(--lr-color-brand);",danger:"--lr-confirm-button-fill: var(--lr-color-danger); background: var(--lr-confirm-button-state, var(--lr-color-danger)); color: var(--lr-color-on-danger); border-color: var(--lr-color-danger);"},CONFIRM_BUTTON_ATTRIBUTE=`data-${tag("confirm-action")}`,BUTTON_STATE_STYLE=`
|
|
2
2
|
[${CONFIRM_BUTTON_ATTRIBUTE}]:hover {
|
|
3
3
|
--lr-confirm-button-state: color-mix(in oklab, var(--lr-confirm-button-fill), var(--lr-color-mix-partner) var(--lr-color-mix-hover));
|
|
4
4
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{activateOverlay,collectFocusableElements,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{cancelDeferredFocusReturn,captureFocusReturnOpener,scheduleDeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityText,isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{closeIcon}from"../../../internal/icons.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{styles}from"./dialog.styles.js";import{LYRA_DEFAULT_close}from"../../../internal/default-strings.generated.js";const HEADING_SELECTOR='h1, h2, h3, h4, h5, h6, [role="heading"]';class LyraDialog extends LyraElement{static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close}}constructor(){super(),this._open=!1,this.label="",this.headingLevel="3",this.withoutCloseButton=!1,this.withoutHeader=!1,this.noHeader=!1,this.withFooter=!1,this.size="m",this.hostAriaLabel=null,this.lightDismiss=!1,this.hasFooterSlot=!1,this.hasLabelSlot=!1,this.hasHeaderActionsSlot=!1,this.focusReturnOpener=null,this.nativeModal=new NativeModalCarrier(this,{onCancel:event=>this.onNativeCancel(event),onUnexpectedClose:carrier=>{!this.open||!this.modalSurface||(this.closeFrom("api",carrier),this.open&&this.enterTopLayer())}}),this.headingObserverGeneration=0,this.transitionToken=0,this.transitionAnimations=[],this.headingId=nextId("dialog-heading"),this.externalModalDepth=0,this.modal={activateExternal:()=>{this.externalModalDepth++,this.externalModalDepth===1&&this.overlay?.suspend()},deactivateExternal:()=>{this.externalModalDepth!==0&&(this.externalModalDepth--,this.externalModalDepth===0&&this.open&&this.modalSurface&&(this.overlay?.resume(),queueMicrotask(()=>this.focusInitial())))}},this.onDefaultSlotChange=()=>{this.detectLightDomChrome(),this.syncBodyTabIndex(),this.resetBodyOverflowObserver(),this.armBodyOverflowObserver()},this.onFooterSlotChange=()=>{this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer")},this.onNativeCancel=event=>{if(event.preventDefault(),!this.open||!this.overlay?.isTopmost())return;const panel=this.renderRoot.querySelector('[part~="panel"]')??this;this.requestClose("keyboard","escape",panel)},this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onCloseButtonClick=()=>{const button=this.renderRoot.querySelector('[part~="close-button"]')??this;this.requestClose("close-button","close-button",button)},new GlassScrollLayer(this,'[part~="panel"]',()=>this.open)}static{this.styles=[LyraElement.styles,styles,nativeModalCarrierStyles]}get open(){return this._open}set open(next){const normalized=!!next;if(!this.coalesceOpenRequest(normalized)&&normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.close("api")}}get modalSurface(){return!0}willUpdate(changed){if(super.willUpdate(changed),(!this.hasUpdated||changed.has("open")&&this.open)&&(this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer"),this.detectLightDomChrome()),this.open&&(changed.has("open")||changed.has("contained"))&&this.nativeModal.prepare(this.modalSurface),changed.has("open")){if(this.flushPendingScrollLockRelease(),this.open)cancelDeferredFocusReturn(this),this.focusReturnOpener=captureFocusReturnOpener(this),this.isConnected&&this.modalSurface&&this.activateOverlay();else{const returnsFocus=this.overlay!==void 0||composedContains(this,deepActiveElement(this.ownerDocument));this.pendingScrollLockRelease=this.deactivateOverlay({deferScrollLockRelease:!0});const opener=this.focusReturnOpener;this.focusReturnOpener=null,returnsFocus&&opener&&this.isConnected&&scheduleDeferredFocusReturn({host:this,candidates:()=>[opener],settled:this.hideSettled,isCurrent:()=>!this.open})}this.hideSettled=void 0}}flushPendingScrollLockRelease(){const release=this.pendingScrollLockRelease;this.pendingScrollLockRelease=void 0,release?.()}updated(changed){super.updated(changed),changed.has("open")&&this.armHeadingObserver(),this.syncBodyTabIndex(),this.armBodyOverflowObserver(),changed.has("open")&&this.open&&this.isConnected&&this.modalSurface&&(this.enterTopLayer(),this.focusInitial())}connectedCallback(){super.connectedCallback(),this.armHeadingObserver(),this.syncBodyTabIndex(),this.armBodyOverflowObserver(),this.hasUpdated&&this.open&&this.modalSurface&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlay(),this.enterTopLayer(),queueMicrotask(()=>this.focusInitial()))}disconnectedCallback(){this.resetHeadingObserver(),this.resetBodyOverflowObserver(),super.disconnectedCallback(),this.overlay?.suspend(),this.nativeModal.hide(),cancelDeferredFocusReturn(this),this.transitionToken++,this.flushPendingScrollLockRelease(),this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.open&&queueMicrotask(()=>{if(!this.isConnected&&this.open){if(this.emit("lr-hide",{source:this},{cancelable:this.disconnectHideCancelable}).defaultPrevented){this.syncOpenAttribute();return}this.applyOpenState(!1),this.emit("lr-close",{reason:"unmount"}),this.emit("lr-after-hide")}})}adoptedCallback(){super.adoptedCallback(),this.resetHeadingObserver(),this.resetBodyOverflowObserver(),this.isConnected&&(this.armHeadingObserver(),this.armBodyOverflowObserver(),this.syncBodyTabIndex())}armHeadingObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.headingObserver&&this.headingObserverDocument===ownerDocument&&this.headingObserverOpen===this.open)return;this.resetHeadingObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.headingObserverGeneration,observer=new MutationObserverCtor(()=>{this.headingObserver!==observer||this.headingObserverDocument!==ownerDocument||this.headingObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.detectLightDomChrome(),this.syncBodyTabIndex(),this.resetHeadingObserver(),this.armHeadingObserver())});if(this.headingObserver=observer,this.headingObserverDocument=ownerDocument,this.headingObserverOpen=this.open,observer.observe(this,{childList:!0}),this.open){for(const child of this.children)observer.observe(child,{attributes:!0,attributeFilter:["slot"]});const heading=Array.from(this.children).find(child=>child.getAttribute("slot")===null&&child.matches(HEADING_SELECTOR));heading&&observer.observe(heading,{attributes:!0,attributeFilter:["aria-label","aria-labelledby","aria-hidden","hidden","inert","class","style","slot"],characterData:!0,childList:!0,subtree:!0})}}resetHeadingObserver(){this.headingObserverGeneration+=1,this.headingObserver?.disconnect(),this.headingObserver=void 0,this.headingObserverDocument=void 0,this.headingObserverOpen=void 0}syncBodyTabIndex(){const body=this.renderRoot?.querySelector('[part="body"]');if(!body)return;const next=this.open&&(body.scrollHeight>body.clientHeight&&body.scrollHeight>0||body.scrollWidth>body.clientWidth&&body.scrollWidth>0)?0:-1;body.tabIndex!==next&&(body.tabIndex=next)}armBodyOverflowObserver(){const body=this.renderRoot?.querySelector('[part="body"]');if(!body||!this.isConnected||this.bodyOverflowObservedBody===body)return;this.resetBodyOverflowObserver();const ResizeObserverCtor=this.ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverCtor)return;const observer=new ResizeObserverCtor(()=>{this.bodyOverflowObserver!==observer||this.bodyOverflowObservedBody!==body||!this.isConnected||this.syncBodyTabIndex()});this.bodyOverflowObserver=observer,this.bodyOverflowObservedBody=body,observer.observe(body);for(const element of this.defaultSlotElements())observer.observe(element)}resetBodyOverflowObserver(){this.bodyOverflowObserver?.disconnect(),this.bodyOverflowObserver=void 0,this.bodyOverflowObservedBody=void 0}defaultSlotElements(){return this.renderRoot?.querySelector('[part="body"] slot:not([name])')?.assignedElements({flatten:!0})??[]}get disconnectHideCancelable(){return!1}detectLightDomChrome(){const children=Array.from(this.children),heading=children.find(el=>el.getAttribute("slot")===null&&el.matches(HEADING_SELECTOR));!heading||isAccessibilitySubtreeExcluded(heading)?this.headingText=void 0:heading.hasAttribute("aria-label")?this.headingText=heading.getAttribute("aria-label")??"":heading.hasAttribute("aria-labelledby")?this.headingText=composedAccessibilityText(heading,{ancestorBoundary:this}).trim()||void 0:this.headingText=composedAccessibilityText(Array.from(heading.childNodes),{ancestorBoundary:heading}).trim()||void 0,this.hasLabelSlot=children.some(el=>el.getAttribute("slot")==="label"),this.hasHeaderActionsSlot=children.some(el=>el.getAttribute("slot")==="header-actions")}show(){if(this.coalesceOpenRequest(!0)||this._open)return Promise.resolve();this.beginOpenRequest(!0);const prevented=this.emit("lr-show",null,{cancelable:!0}).defaultPrevented,superseded=this.openRequestWasSuperseded(!0);return this.finishOpenRequest(),prevented||superseded?(this.syncOpenAttribute(),Promise.resolve()):(this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.applyOpenState(!0),this.settleTransition("lr-after-show"))}hide(){return this.close("api")}close(reason="api"){return this.closeFrom(reason,this)}closeFrom(reason,source){if(this.coalesceOpenRequest(!1)||!this._open)return Promise.resolve();if(this.beginOpenRequest(!1),this.emit("lr-hide",{source},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1))return this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve();if(this.emit("lr-close-request",{reason},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1))return this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve();this.finishOpenRequest(),this.cancelTransitionAnimations(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1);const settled=this.settleTransition("lr-after-hide");return this.hideSettled=settled,this.emit("lr-close",{reason}),settled}coalesceOpenRequest(next){return this.openRequestTarget===void 0?!1:(this.openRequestDuringPreflight=next,!0)}beginOpenRequest(next){this.openRequestTarget=next,this.openRequestDuringPreflight=void 0}openRequestWasSuperseded(next){return this.openRequestDuringPreflight!==void 0&&this.openRequestDuringPreflight!==next}finishOpenRequest(){this.openRequestTarget=void 0,this.openRequestDuringPreflight=void 0}applyOpenState(next){const old=this._open;this._open=next,next&&(this.initialFocusDecision=void 0),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}panelAnimationName(showing){return showing?"dialog.show":"dialog.hide"}overlayAnimationName(showing){return showing?"dialog.overlay.show":"dialog.overlay.hide"}panelAnimationSpec(showing){const offset="translateY(calc(-1 * var(--lr-size-0-5rem)))";return{keyframes:showing?[{opacity:0,transform:offset},{opacity:1,transform:"translateY(0)"}]:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:offset}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-panel-duration","--lr-duration-base"],easingProperties:["--lr-easing-standard"]}}overlayAnimationSpec(showing){return{keyframes:showing?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-backdrop-duration","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}}cancelTransitionAnimations(){for(const animation of this.transitionAnimations)animation.cancel();this.transitionAnimations=[]}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(this.isConnected){const root=this.renderRoot,panel=root.querySelector('[part~="panel"]'),backdrop=root.querySelector('[part~="backdrop"]'),showing=event==="lr-after-show",animations=[panel?animateRegistered(this,panel,this.panelAnimationName(showing),this.effectiveDirection,this.panelAnimationSpec(showing)):void 0,this.modalSurface&&backdrop?animateRegistered(this,backdrop,this.overlayAnimationName(showing),this.effectiveDirection,this.overlayAnimationSpec(showing)):void 0].filter(animation=>animation!==void 0);if(this.transitionAnimations=animations,await Promise.all(animations.map(animation=>animation.finished.catch(()=>{}))),this.transitionToken!==token)return;this.cancelTransitionAnimations()}event==="lr-after-hide"&&(this.removeAttribute("data-closing"),this.leaveTopLayer(),this.flushPendingScrollLockRelease()),this.emit(event)}}enterTopLayer(){if(this.isConnected&&!this.nativeModal.show()&&typeof this.showPopover=="function"){this.getAttribute("popover")!=="manual"&&this.setAttribute("popover","manual");try{this.isTopLayer()||this.showPopover()}catch{}}}leaveTopLayer(){if(this.nativeModal.hide(),typeof this.hidePopover=="function")try{this.isTopLayer()&&this.hidePopover()}catch{}}isTopLayer(){try{return this.matches(":popover-open")}catch{return!1}}requestClose(source,reason,sourceElement){this.emit("lr-request-close",{source},{cancelable:!0}).defaultPrevented||this.closeFrom(reason,sourceElement)}focusInitial(){this.overlay?.focusInitial()}activateOverlay(){!this.isConnected||this.overlay?.isActive()||(this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part~="panel"]')??null,onEscape:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]')??this;this.requestClose("keyboard","escape",panel)},onBackdrop:()=>{const backdrop=this.renderRoot.querySelector('[part~="backdrop"]')??this;this.requestClose("overlay","backdrop",backdrop)},preferredInitialFocus:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]'),body=this.renderRoot.querySelector('[part="body"]'),stops=body?collectFocusableElements(body):[];return stops.find(stop=>stop!==body)??stops[0]??panel},beforeInitialFocus:()=>(this.initialFocusDecision===void 0&&(this.initialFocusDecision=!this.emit("lr-initial-focus",null,{cancelable:!0}).defaultPrevented),this.initialFocusDecision),lockScroll:!0,suspendWhenUnrendered:!0}),this.externalModalDepth>0&&this.overlay.suspend())}deactivateOverlay(options){const overlay=this.overlay;return this.overlay=void 0,overlay?.deactivate(options)}render(){const suppressHeader=this.withoutHeader||this.noHeader,renderHeading=!suppressHeader&&!this.headingText&&(this.hasLabelSlot||(this.label??"").length>0||!!this.heading),hasHostName=this.hostAriaLabel!==null,explicitName=hasHostName?this.hostAriaLabel:this.headingText,hasExplicitName=hasHostName||!!explicitName,useHeadingForName=!hasExplicitName&&renderHeading,showHeader=!suppressHeader&&(renderHeading||this.hasHeaderActionsSlot||!this.withoutCloseButton),headingLevel=resolveHeadingLevel(this.headingLevel);return this.nativeModal.render(html`
|
|
1
|
+
import{__decorate}from"tslib";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{activateOverlay,collectFocusableElements,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{cancelDeferredFocusReturn,captureFocusReturnOpener,scheduleDeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityText,isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{closeIcon}from"../../../internal/icons.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{styles}from"./dialog.styles.js";import{LYRA_DEFAULT_close}from"../../../internal/default-strings/shared.generated.js";const HEADING_SELECTOR='h1, h2, h3, h4, h5, h6, [role="heading"]';class LyraDialog extends LyraElement{static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close}}constructor(){super(),this._open=!1,this.label="",this.headingLevel="3",this.withoutCloseButton=!1,this.withoutHeader=!1,this.noHeader=!1,this.withFooter=!1,this.size="m",this.hostAriaLabel=null,this.lightDismiss=!1,this.hasFooterSlot=!1,this.hasLabelSlot=!1,this.hasHeaderActionsSlot=!1,this.focusReturnOpener=null,this.nativeModal=new NativeModalCarrier(this,{onCancel:event=>this.onNativeCancel(event),onUnexpectedClose:carrier=>{!this.open||!this.modalSurface||(this.closeFrom("api",carrier),this.open&&this.enterTopLayer())}}),this.headingObserverGeneration=0,this.transitionToken=0,this.transitionAnimations=[],this.headingId=nextId("dialog-heading"),this.externalModalDepth=0,this.modal={activateExternal:()=>{this.externalModalDepth++,this.externalModalDepth===1&&this.overlay?.suspend()},deactivateExternal:()=>{this.externalModalDepth!==0&&(this.externalModalDepth--,this.externalModalDepth===0&&this.open&&this.modalSurface&&(this.overlay?.resume(),queueMicrotask(()=>this.focusInitial())))}},this.onDefaultSlotChange=()=>{this.detectLightDomChrome(),this.syncBodyTabIndex(),this.resetBodyOverflowObserver(),this.armBodyOverflowObserver()},this.onFooterSlotChange=()=>{this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer")},this.onNativeCancel=event=>{if(event.preventDefault(),!this.open||!this.overlay?.isTopmost())return;const panel=this.renderRoot.querySelector('[part~="panel"]')??this;this.requestClose("keyboard","escape",panel)},this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onCloseButtonClick=()=>{const button=this.renderRoot.querySelector('[part~="close-button"]')??this;this.requestClose("close-button","close-button",button)},new GlassScrollLayer(this,'[part~="panel"]',()=>this.open)}static{this.styles=[LyraElement.styles,styles,nativeModalCarrierStyles]}get open(){return this._open}set open(next){const normalized=!!next;if(!this.coalesceOpenRequest(normalized)&&normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.close("api")}}get modalSurface(){return!0}willUpdate(changed){if(super.willUpdate(changed),(!this.hasUpdated||changed.has("open")&&this.open)&&(this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer"),this.detectLightDomChrome()),this.open&&(changed.has("open")||changed.has("contained"))&&this.nativeModal.prepare(this.modalSurface),changed.has("open")){if(this.flushPendingScrollLockRelease(),this.open)cancelDeferredFocusReturn(this),this.focusReturnOpener=captureFocusReturnOpener(this),this.isConnected&&this.modalSurface&&this.activateOverlay();else{const returnsFocus=this.overlay!==void 0||composedContains(this,deepActiveElement(this.ownerDocument));this.pendingScrollLockRelease=this.deactivateOverlay({deferScrollLockRelease:!0});const opener=this.focusReturnOpener;this.focusReturnOpener=null,returnsFocus&&opener&&this.isConnected&&scheduleDeferredFocusReturn({host:this,candidates:()=>[opener],settled:this.hideSettled,isCurrent:()=>!this.open})}this.hideSettled=void 0}}flushPendingScrollLockRelease(){const release=this.pendingScrollLockRelease;this.pendingScrollLockRelease=void 0,release?.()}updated(changed){super.updated(changed),changed.has("open")&&this.armHeadingObserver(),this.syncBodyTabIndex(),this.armBodyOverflowObserver(),changed.has("open")&&this.open&&this.isConnected&&this.modalSurface&&(this.enterTopLayer(),this.focusInitial())}connectedCallback(){super.connectedCallback(),this.armHeadingObserver(),this.syncBodyTabIndex(),this.armBodyOverflowObserver(),this.hasUpdated&&this.open&&this.modalSurface&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlay(),this.enterTopLayer(),queueMicrotask(()=>this.focusInitial()))}disconnectedCallback(){this.resetHeadingObserver(),this.resetBodyOverflowObserver(),super.disconnectedCallback(),this.overlay?.suspend(),this.nativeModal.hide(),cancelDeferredFocusReturn(this),this.transitionToken++,this.flushPendingScrollLockRelease(),this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.open&&queueMicrotask(()=>{if(!this.isConnected&&this.open){if(this.emit("lr-hide",{source:this},{cancelable:this.disconnectHideCancelable}).defaultPrevented){this.syncOpenAttribute();return}this.applyOpenState(!1),this.emit("lr-close",{reason:"unmount"}),this.emit("lr-after-hide")}})}adoptedCallback(){super.adoptedCallback(),this.resetHeadingObserver(),this.resetBodyOverflowObserver(),this.isConnected&&(this.armHeadingObserver(),this.armBodyOverflowObserver(),this.syncBodyTabIndex())}armHeadingObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.headingObserver&&this.headingObserverDocument===ownerDocument&&this.headingObserverOpen===this.open)return;this.resetHeadingObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.headingObserverGeneration,observer=new MutationObserverCtor(()=>{this.headingObserver!==observer||this.headingObserverDocument!==ownerDocument||this.headingObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.detectLightDomChrome(),this.syncBodyTabIndex(),this.resetHeadingObserver(),this.armHeadingObserver())});if(this.headingObserver=observer,this.headingObserverDocument=ownerDocument,this.headingObserverOpen=this.open,observer.observe(this,{childList:!0}),this.open){for(const child of this.children)observer.observe(child,{attributes:!0,attributeFilter:["slot"]});const heading=Array.from(this.children).find(child=>child.getAttribute("slot")===null&&child.matches(HEADING_SELECTOR));heading&&observer.observe(heading,{attributes:!0,attributeFilter:["aria-label","aria-labelledby","aria-hidden","hidden","inert","class","style","slot"],characterData:!0,childList:!0,subtree:!0})}}resetHeadingObserver(){this.headingObserverGeneration+=1,this.headingObserver?.disconnect(),this.headingObserver=void 0,this.headingObserverDocument=void 0,this.headingObserverOpen=void 0}syncBodyTabIndex(){const body=this.renderRoot?.querySelector('[part="body"]');if(!body)return;const next=this.open&&(body.scrollHeight>body.clientHeight&&body.scrollHeight>0||body.scrollWidth>body.clientWidth&&body.scrollWidth>0)?0:-1;body.tabIndex!==next&&(body.tabIndex=next)}armBodyOverflowObserver(){const body=this.renderRoot?.querySelector('[part="body"]');if(!body||!this.isConnected||this.bodyOverflowObservedBody===body)return;this.resetBodyOverflowObserver();const ResizeObserverCtor=this.ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverCtor)return;const observer=new ResizeObserverCtor(()=>{this.bodyOverflowObserver!==observer||this.bodyOverflowObservedBody!==body||!this.isConnected||this.syncBodyTabIndex()});this.bodyOverflowObserver=observer,this.bodyOverflowObservedBody=body,observer.observe(body);for(const element of this.defaultSlotElements())observer.observe(element)}resetBodyOverflowObserver(){this.bodyOverflowObserver?.disconnect(),this.bodyOverflowObserver=void 0,this.bodyOverflowObservedBody=void 0}defaultSlotElements(){return this.renderRoot?.querySelector('[part="body"] slot:not([name])')?.assignedElements({flatten:!0})??[]}get disconnectHideCancelable(){return!1}detectLightDomChrome(){const children=Array.from(this.children),heading=children.find(el=>el.getAttribute("slot")===null&&el.matches(HEADING_SELECTOR));!heading||isAccessibilitySubtreeExcluded(heading)?this.headingText=void 0:heading.hasAttribute("aria-label")?this.headingText=heading.getAttribute("aria-label")??"":heading.hasAttribute("aria-labelledby")?this.headingText=composedAccessibilityText(heading,{ancestorBoundary:this}).trim()||void 0:this.headingText=composedAccessibilityText(Array.from(heading.childNodes),{ancestorBoundary:heading}).trim()||void 0,this.hasLabelSlot=children.some(el=>el.getAttribute("slot")==="label"),this.hasHeaderActionsSlot=children.some(el=>el.getAttribute("slot")==="header-actions")}show(){if(this.coalesceOpenRequest(!0)||this._open)return Promise.resolve();this.beginOpenRequest(!0);const prevented=this.emit("lr-show",null,{cancelable:!0}).defaultPrevented,superseded=this.openRequestWasSuperseded(!0);return this.finishOpenRequest(),prevented||superseded?(this.syncOpenAttribute(),Promise.resolve()):(this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.applyOpenState(!0),this.settleTransition("lr-after-show"))}hide(){return this.close("api")}close(reason="api"){return this.closeFrom(reason,this)}closeFrom(reason,source){if(this.coalesceOpenRequest(!1)||!this._open)return Promise.resolve();if(this.beginOpenRequest(!1),this.emit("lr-hide",{source},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1))return this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve();if(this.emit("lr-close-request",{reason},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1))return this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve();this.finishOpenRequest(),this.cancelTransitionAnimations(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1);const settled=this.settleTransition("lr-after-hide");return this.hideSettled=settled,this.emit("lr-close",{reason}),settled}coalesceOpenRequest(next){return this.openRequestTarget===void 0?!1:(this.openRequestDuringPreflight=next,!0)}beginOpenRequest(next){this.openRequestTarget=next,this.openRequestDuringPreflight=void 0}openRequestWasSuperseded(next){return this.openRequestDuringPreflight!==void 0&&this.openRequestDuringPreflight!==next}finishOpenRequest(){this.openRequestTarget=void 0,this.openRequestDuringPreflight=void 0}applyOpenState(next){const old=this._open;this._open=next,next&&(this.initialFocusDecision=void 0),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}panelAnimationName(showing){return showing?"dialog.show":"dialog.hide"}overlayAnimationName(showing){return showing?"dialog.overlay.show":"dialog.overlay.hide"}panelAnimationSpec(showing){const offset="translateY(calc(-1 * var(--lr-size-0-5rem)))";return{keyframes:showing?[{opacity:0,transform:offset},{opacity:1,transform:"translateY(0)"}]:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:offset}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-panel-duration","--lr-duration-base"],easingProperties:["--lr-easing-standard"]}}overlayAnimationSpec(showing){return{keyframes:showing?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-backdrop-duration","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}}cancelTransitionAnimations(){for(const animation of this.transitionAnimations)animation.cancel();this.transitionAnimations=[]}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(this.isConnected){const root=this.renderRoot,panel=root.querySelector('[part~="panel"]'),backdrop=root.querySelector('[part~="backdrop"]'),showing=event==="lr-after-show",animations=[panel?animateRegistered(this,panel,this.panelAnimationName(showing),this.effectiveDirection,this.panelAnimationSpec(showing)):void 0,this.modalSurface&&backdrop?animateRegistered(this,backdrop,this.overlayAnimationName(showing),this.effectiveDirection,this.overlayAnimationSpec(showing)):void 0].filter(animation=>animation!==void 0);if(this.transitionAnimations=animations,await Promise.all(animations.map(animation=>animation.finished.catch(()=>{}))),this.transitionToken!==token)return;this.cancelTransitionAnimations()}event==="lr-after-hide"&&(this.removeAttribute("data-closing"),this.leaveTopLayer(),this.flushPendingScrollLockRelease()),this.emit(event)}}enterTopLayer(){if(this.isConnected&&!this.nativeModal.show()&&typeof this.showPopover=="function"){this.getAttribute("popover")!=="manual"&&this.setAttribute("popover","manual");try{this.isTopLayer()||this.showPopover()}catch{}}}leaveTopLayer(){if(this.nativeModal.hide(),typeof this.hidePopover=="function")try{this.isTopLayer()&&this.hidePopover()}catch{}}isTopLayer(){try{return this.matches(":popover-open")}catch{return!1}}requestClose(source,reason,sourceElement){this.emit("lr-request-close",{source},{cancelable:!0}).defaultPrevented||this.closeFrom(reason,sourceElement)}focusInitial(){this.overlay?.focusInitial()}activateOverlay(){!this.isConnected||this.overlay?.isActive()||(this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part~="panel"]')??null,onEscape:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]')??this;this.requestClose("keyboard","escape",panel)},onBackdrop:()=>{const backdrop=this.renderRoot.querySelector('[part~="backdrop"]')??this;this.requestClose("overlay","backdrop",backdrop)},preferredInitialFocus:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]'),body=this.renderRoot.querySelector('[part="body"]'),stops=body?collectFocusableElements(body):[];return stops.find(stop=>stop!==body)??stops[0]??panel},beforeInitialFocus:()=>(this.initialFocusDecision===void 0&&(this.initialFocusDecision=!this.emit("lr-initial-focus",null,{cancelable:!0}).defaultPrevented),this.initialFocusDecision),lockScroll:!0,suspendWhenUnrendered:!0}),this.externalModalDepth>0&&this.overlay.suspend())}deactivateOverlay(options){const overlay=this.overlay;return this.overlay=void 0,overlay?.deactivate(options)}render(){const suppressHeader=this.withoutHeader||this.noHeader,renderHeading=!suppressHeader&&!this.headingText&&(this.hasLabelSlot||(this.label??"").length>0||!!this.heading),hasHostName=this.hostAriaLabel!==null,explicitName=hasHostName?this.hostAriaLabel:this.headingText,hasExplicitName=hasHostName||!!explicitName,useHeadingForName=!hasExplicitName&&renderHeading,showHeader=!suppressHeader&&(renderHeading||this.hasHeaderActionsSlot||!this.withoutCloseButton),headingLevel=resolveHeadingLevel(this.headingLevel);return this.nativeModal.render(html`
|
|
2
2
|
<div part="backdrop overlay" @click=${this.onBackdropClick}></div>
|
|
3
3
|
<div
|
|
4
4
|
part="panel dialog"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{detectPlatform}from"../../../internal/platform.js";import{hasRealContent,hostAriaLabel}from"../../../internal/a11y.js";import{styles}from"./kbd.styles.js";import{parseShortcut}from"./kbd-shortcut.js";import{LYRA_DEFAULT_kbdAltWord,LYRA_DEFAULT_kbdArrowDownWord,LYRA_DEFAULT_kbdArrowLeftWord,LYRA_DEFAULT_kbdArrowRightWord,LYRA_DEFAULT_kbdArrowUpWord,LYRA_DEFAULT_kbdBackspaceWord,LYRA_DEFAULT_kbdCommandWord,LYRA_DEFAULT_kbdControlVisual,LYRA_DEFAULT_kbdControlWord,LYRA_DEFAULT_kbdDeleteVisual,LYRA_DEFAULT_kbdDeleteWord,LYRA_DEFAULT_kbdEndWord,LYRA_DEFAULT_kbdEnterWord,LYRA_DEFAULT_kbdEscapeVisual,LYRA_DEFAULT_kbdEscapeWord,LYRA_DEFAULT_kbdHomeWord,LYRA_DEFAULT_kbdMinusWord,LYRA_DEFAULT_kbdOptionWord,LYRA_DEFAULT_kbdPageDownVisual,LYRA_DEFAULT_kbdPageDownWord,LYRA_DEFAULT_kbdPageUpVisual,LYRA_DEFAULT_kbdPageUpWord,LYRA_DEFAULT_kbdPlusWord,LYRA_DEFAULT_kbdShiftWord,LYRA_DEFAULT_kbdSpaceWord,LYRA_DEFAULT_kbdTabWord}from"../../../internal/default-strings.generated.js";import{shortcutTokenLabel,parseShortcut as parseShortcut2}from"./kbd-shortcut.js";const AUTO_PLATFORM=detectPlatform();function isEffectivePlatform(value){return value==="mac"||value==="windows"||value==="linux"}class LyraKbd extends LyraElement{constructor(){super(...arguments),this.keys="",this.platform="auto",this.autoPlatform=AUTO_PLATFORM,this.hasCustomContent=!1,this.onSlotChange=e=>{this.hasCustomContent=hasRealContent(e.target.assignedNodes({flatten:!0}))}}static{this.defaultStrings={...super.defaultStrings,kbdAltWord:LYRA_DEFAULT_kbdAltWord,kbdArrowDownWord:LYRA_DEFAULT_kbdArrowDownWord,kbdArrowLeftWord:LYRA_DEFAULT_kbdArrowLeftWord,kbdArrowRightWord:LYRA_DEFAULT_kbdArrowRightWord,kbdArrowUpWord:LYRA_DEFAULT_kbdArrowUpWord,kbdBackspaceWord:LYRA_DEFAULT_kbdBackspaceWord,kbdCommandWord:LYRA_DEFAULT_kbdCommandWord,kbdControlVisual:LYRA_DEFAULT_kbdControlVisual,kbdControlWord:LYRA_DEFAULT_kbdControlWord,kbdDeleteVisual:LYRA_DEFAULT_kbdDeleteVisual,kbdDeleteWord:LYRA_DEFAULT_kbdDeleteWord,kbdEndWord:LYRA_DEFAULT_kbdEndWord,kbdEnterWord:LYRA_DEFAULT_kbdEnterWord,kbdEscapeVisual:LYRA_DEFAULT_kbdEscapeVisual,kbdEscapeWord:LYRA_DEFAULT_kbdEscapeWord,kbdHomeWord:LYRA_DEFAULT_kbdHomeWord,kbdMinusWord:LYRA_DEFAULT_kbdMinusWord,kbdOptionWord:LYRA_DEFAULT_kbdOptionWord,kbdPageDownVisual:LYRA_DEFAULT_kbdPageDownVisual,kbdPageDownWord:LYRA_DEFAULT_kbdPageDownWord,kbdPageUpVisual:LYRA_DEFAULT_kbdPageUpVisual,kbdPageUpWord:LYRA_DEFAULT_kbdPageUpWord,kbdPlusWord:LYRA_DEFAULT_kbdPlusWord,kbdShiftWord:LYRA_DEFAULT_kbdShiftWord,kbdSpaceWord:LYRA_DEFAULT_kbdSpaceWord,kbdTabWord:LYRA_DEFAULT_kbdTabWord}}static{this.styles=[LyraElement.styles,styles]}get effectivePlatform(){return this.platform==="auto"?this.autoPlatform:this.platform}willUpdate(changed){if(super.willUpdate(changed),!this.hasUpdated&&this.platform==="auto"){const serialized=this.renderRoot?.querySelector("[data-effective-platform]")?.getAttribute("data-effective-platform")??null;isEffectivePlatform(serialized)&&(this.autoPlatform=serialized)}this.seedFirstRenderState(()=>{this.hasCustomContent=hasRealContent(this.childNodes)})}render(){const explicitLabel=hostAriaLabel(this),tokens=this.hasCustomContent?[]:parseShortcut(this.keys??"",this.effectivePlatform==="mac",key=>this.localize(key)),ariaLabel=explicitLabel??tokens.map(t=>t.word).join("+"),hasAriaLabel=explicitLabel!==null||tokens.length>0;return html`
|
|
1
|
+
import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{detectPlatform}from"../../../internal/platform.js";import{hasRealContent,hostAriaLabel}from"../../../internal/a11y.js";import{styles}from"./kbd.styles.js";import{parseShortcut}from"./kbd-shortcut.js";import{LYRA_DEFAULT_kbdAltWord,LYRA_DEFAULT_kbdArrowDownWord,LYRA_DEFAULT_kbdArrowLeftWord,LYRA_DEFAULT_kbdArrowRightWord,LYRA_DEFAULT_kbdArrowUpWord,LYRA_DEFAULT_kbdBackspaceWord,LYRA_DEFAULT_kbdCommandWord,LYRA_DEFAULT_kbdControlVisual,LYRA_DEFAULT_kbdControlWord,LYRA_DEFAULT_kbdDeleteVisual,LYRA_DEFAULT_kbdDeleteWord,LYRA_DEFAULT_kbdEndWord,LYRA_DEFAULT_kbdEnterWord,LYRA_DEFAULT_kbdEscapeVisual,LYRA_DEFAULT_kbdEscapeWord,LYRA_DEFAULT_kbdHomeWord,LYRA_DEFAULT_kbdMinusWord,LYRA_DEFAULT_kbdOptionWord,LYRA_DEFAULT_kbdPageDownVisual,LYRA_DEFAULT_kbdPageDownWord,LYRA_DEFAULT_kbdPageUpVisual,LYRA_DEFAULT_kbdPageUpWord,LYRA_DEFAULT_kbdPlusWord,LYRA_DEFAULT_kbdShiftWord,LYRA_DEFAULT_kbdSpaceWord,LYRA_DEFAULT_kbdTabWord}from"../../../internal/default-strings/overlays.generated.js";import{shortcutTokenLabel,parseShortcut as parseShortcut2}from"./kbd-shortcut.js";const AUTO_PLATFORM=detectPlatform();function isEffectivePlatform(value){return value==="mac"||value==="windows"||value==="linux"}class LyraKbd extends LyraElement{constructor(){super(...arguments),this.keys="",this.platform="auto",this.autoPlatform=AUTO_PLATFORM,this.hasCustomContent=!1,this.onSlotChange=e=>{this.hasCustomContent=hasRealContent(e.target.assignedNodes({flatten:!0}))}}static{this.defaultStrings={...super.defaultStrings,kbdAltWord:LYRA_DEFAULT_kbdAltWord,kbdArrowDownWord:LYRA_DEFAULT_kbdArrowDownWord,kbdArrowLeftWord:LYRA_DEFAULT_kbdArrowLeftWord,kbdArrowRightWord:LYRA_DEFAULT_kbdArrowRightWord,kbdArrowUpWord:LYRA_DEFAULT_kbdArrowUpWord,kbdBackspaceWord:LYRA_DEFAULT_kbdBackspaceWord,kbdCommandWord:LYRA_DEFAULT_kbdCommandWord,kbdControlVisual:LYRA_DEFAULT_kbdControlVisual,kbdControlWord:LYRA_DEFAULT_kbdControlWord,kbdDeleteVisual:LYRA_DEFAULT_kbdDeleteVisual,kbdDeleteWord:LYRA_DEFAULT_kbdDeleteWord,kbdEndWord:LYRA_DEFAULT_kbdEndWord,kbdEnterWord:LYRA_DEFAULT_kbdEnterWord,kbdEscapeVisual:LYRA_DEFAULT_kbdEscapeVisual,kbdEscapeWord:LYRA_DEFAULT_kbdEscapeWord,kbdHomeWord:LYRA_DEFAULT_kbdHomeWord,kbdMinusWord:LYRA_DEFAULT_kbdMinusWord,kbdOptionWord:LYRA_DEFAULT_kbdOptionWord,kbdPageDownVisual:LYRA_DEFAULT_kbdPageDownVisual,kbdPageDownWord:LYRA_DEFAULT_kbdPageDownWord,kbdPageUpVisual:LYRA_DEFAULT_kbdPageUpVisual,kbdPageUpWord:LYRA_DEFAULT_kbdPageUpWord,kbdPlusWord:LYRA_DEFAULT_kbdPlusWord,kbdShiftWord:LYRA_DEFAULT_kbdShiftWord,kbdSpaceWord:LYRA_DEFAULT_kbdSpaceWord,kbdTabWord:LYRA_DEFAULT_kbdTabWord}}static{this.styles=[LyraElement.styles,styles]}get effectivePlatform(){return this.platform==="auto"?this.autoPlatform:this.platform}willUpdate(changed){if(super.willUpdate(changed),!this.hasUpdated&&this.platform==="auto"){const serialized=this.renderRoot?.querySelector("[data-effective-platform]")?.getAttribute("data-effective-platform")??null;isEffectivePlatform(serialized)&&(this.autoPlatform=serialized)}this.seedFirstRenderState(()=>{this.hasCustomContent=hasRealContent(this.childNodes)})}render(){const explicitLabel=hostAriaLabel(this),tokens=this.hasCustomContent?[]:parseShortcut(this.keys??"",this.effectivePlatform==="mac",key=>this.localize(key)),ariaLabel=explicitLabel??tokens.map(t=>t.word).join("+"),hasAriaLabel=explicitLabel!==null||tokens.length>0;return html`
|
|
2
2
|
<span
|
|
3
3
|
part="base"
|
|
4
4
|
data-effective-platform=${this.effectivePlatform}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel,nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{CustomElementUpgradeObserver}from"../../../internal/custom-element-upgrade-observer.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{tag}from"../../../internal/prefix.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{deferredPlaceReady,syncTopLayerRelease,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{finiteDuration,finiteNumber}from"../../../internal/numbers.js";import{deepActiveElementIn}from"../../../internal/active-element.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{literalSetConverter,omittedEmptyStringConverter,optionalLiteralSetConverter}from"../../../internal/converters.js";import{activateNonmodalOverlay,composedContains}from"../../../internal/nonmodal-overlay-manager.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{applyOverlayArrow}from"./overlay-arrow.js";import{normalizeVirtualRect,OverlayAnchorIdentity,OverlayDelayTimer,OverlayTransitionGate,resolveOverlayAnchor,resolveOverlayInteractionTrigger,settleOverlayTransition}from"./overlay-shared.js";import{styles}from"./overlay.styles.js";import{glassPopoverStyles}from"./popover-glass.styles.js";import{LYRA_DEFAULT_menuLabel,LYRA_DEFAULT_popover}from"../../../internal/default-strings.generated.js";const DEFAULT_DISTANCE=8,EXPANDABLE_TRIGGER_ROLES=new Set(["application","button","checkbox","combobox","gridcell","link","listbox","menuitem","row","rowheader","tab","treeitem","columnheader","menuitemcheckbox","menuitemradio","switch"]);function supportsTriggerExpansion(element){const role=element.getAttribute("role")?.trim().split(/\s+/)[0];return role?EXPANDABLE_TRIGGER_ROLES.has(role):element.matches("button, a[href], select, summary")?!0:element.localName==="input"&&["button","submit","reset","image","checkbox"].includes(element.type)}let popoverConnectionSequence=0;const POPUP_ROLE=literalSetConverter(["dialog","menu","none"],"dialog"),POPOVER_TRIGGER_KEYWORDS=["click","hover","focus","manual"];function normalizeTriggerList(next){const keywords=[];for(const token of String(next??"").trim().toLowerCase().split(/\s+/)){const keyword=POPOVER_TRIGGER_KEYWORDS.find(candidate=>candidate===token);keyword&&!keywords.includes(keyword)&&keywords.push(keyword)}return keywords.length>0?keywords.join(" "):"click"}const DEFAULT_TRIGGER_DELAY=0,POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]);class LyraPopover extends LyraElement{static{this.defaultStrings={...super.defaultStrings,menuLabel:LYRA_DEFAULT_menuLabel,popover:LYRA_DEFAULT_popover}}constructor(){super(),this._open=!1,this.placement="top",this.topLayer=!1,this.distance=8,this.skidding=0,this._for="",this.anchor=null,this.interactionBoundary=null,this.withoutArrow=!1,this.arrowPlacement="anchor",this.arrowPadding=0,this._trigger="click",this.showDelay=0,this.hideDelay=0,this.hoverBridge=!1,this.accessibleLabel="",this._popupRole="dialog",this._disabled=!1,this.openedByInteraction=!1,this.pinned=!1,this.suppressTriggerFocusOpen=!1,this.delayTimer=new OverlayDelayTimer,this.resolvedSide="bottom",this.anchorPositioned=!1,this.popupHidden=!0,this.disconnecting=!1,this.reconnectedWhileDisconnecting=!1,this.directionChanged=!1,this.anchorIdentity=new OverlayAnchorIdentity,this.triggerUpgrades=new CustomElementUpgradeObserver(()=>{this.isConnected&&this.syncTriggerA11y()}),this.positioningGeneration=0,this.generatedHostId=nextId("popover"),this.popupId=nextId("popover-popup"),this.hostIdObserverGeneration=0,this.transitionToken=0,this.transitionGate=new OverlayTransitionGate,this.connectionSequence=0,this.popoverInternals=attachInternalsSafely(this),this.onExternalTriggerKeyDown=event=>{this.onTriggerKeyDown(event)},this.onTriggerSlotChange=event=>{this.collectTriggerFromSlot(event.target)},this.onTriggerClick=()=>{if(!this.virtualAnchor&&(this.syncTriggerA11y(),!this.isManualTrigger)){if(this.cancelPendingTransition(),this.opensOn("click")&&!this.opensOn("hover")&&!this.opensOn("focus")){this.open?this.hide():this.show();return}if(this.open&&this.pinned){this.hide();return}this.open||(this.openedByInteraction=!1,this.show()),this.pinned=this.open}},this.onTriggerPointerEnter=()=>{this.opensOn("hover")&&this.requestDelayedTransition(!0)},this.onTriggerPointerLeave=event=>{this.opensOn("hover")&&this.requestInteractionClose(event.relatedTarget)},this.onPopupPointerEnter=()=>{!this.opensOn("hover")||!this.open||this.cancelPendingTransition()},this.onPopupPointerLeave=event=>{this.opensOn("hover")&&this.requestInteractionClose(event.relatedTarget)},this.onSurfaceFocusIn=event=>{!this.opensOn("focus")||this.suppressTriggerFocusOpen||(!this.open||this.triggerElement!=null&&event.composedPath().includes(this.triggerElement))&&!isKeyboardFocusEvent(event)||this.requestDelayedTransition(!0)},this.onSurfaceFocusOut=event=>{this.opensOn("focus")&&this.requestInteractionClose(event.relatedTarget)},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())},new GlassScrollLayer(this,'[part~="popup"]')}static{this.styles=[LyraElement.styles,styles,glassPopoverStyles]}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 positioningStrategy(){return this._positioningStrategy??this.defaultPositioningStrategy}set positioningStrategy(next){const normalized=POSITIONING_STRATEGY.normalize(next)??this.defaultPositioningStrategy,old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),this.onPositioningStrategyChanged(old,normalized))}onPositioningStrategyChanged(_previous,_next){}get for(){return this._for}set for(next){this._for=next??""}get trigger(){return this._trigger}set trigger(next){const normalized=normalizeTriggerList(next);if(normalized===this._trigger)return;const old=this._trigger;this._trigger=normalized,this.requestUpdate("trigger",old)}get triggerKeywords(){return new Set(this._trigger.split(" "))}get isManualTrigger(){return this.triggerKeywords.has("manual")}opensOn(keyword){return!this.isManualTrigger&&this.triggerKeywords.has(keyword)}get popupRole(){return this._popupRole}set popupRole(next){const normalized=POPUP_ROLE.normalize(next);if(normalized===this._popupRole)return;const old=this._popupRole;this._popupRole=normalized,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 defaultPositioningStrategy(){return"fixed"}get resolvedPositioningStrategy(){return resolveEffectivePositioningStrategy(this,this._positioningStrategy,this.defaultPositioningStrategy)}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==="none"?void 0:this.popupRole}get effectivePopupLabel(){return hostAriaLabel(this)??(this.accessibleLabel||this.localize(this.triggerPopupRole==="menu"?"menuLabel":"popover"))}get rendersArrow(){return!this.withoutArrow}get arrowPartNames(){return"arrow popup__arrow"}get rendersHoverBridge(){return this.hoverBridge&&this.opensOn("hover")&&this.open}get canOpen(){return!this.disabled}renderPopupContent(){return html`<slot></slot>`}onTriggerKeyDown(_event){}isInsideLightDismissBoundary(path){const boundary=this.virtualAnchor?this.virtualInteractionBoundary:this.interactionBoundary;return path.includes(this)||this.triggerElement!=null&&path.includes(this.triggerElement)||boundary!=null&&boundary.isConnected&&boundary.ownerDocument===this.ownerDocument&&path.includes(boundary)}onPopupPositioned(){this.openedByInteraction||this.overlayHandle?.focusAutofocus()}willUpdate(changed){super.willUpdate(changed);const direction=this.effectiveDirection;this.directionChanged=direction!==this.positioningDirection,this.positioningDirection=direction,this.anchorIdentity.lostAnchorProperty(changed,this.anchor)&&this.open&&!this.resolveAnchor()&&this.forceClose({focusTrigger:!1}),changed.has("open")&&!this.open&&(this.anchorPositioned=!1),changed.has("open")&&this.open&&(this.popupHidden=!1),(changed.has("anchor")||changed.has("for"))&&(this.anchorPositioned=!1)}updated(changed){if(super.updated(changed),changed.has("trigger")&&(this.cancelPendingTransition(),!this.opensOn("hover")&&!this.opensOn("focus")&&(this.pinned=!1)),changed.has("showDelay")&&this.delayTimer.pendingDirection==="show"&&this.requestDelayedTransition(!0,!0),changed.has("hideDelay")&&this.delayTimer.pendingDirection==="hide"&&this.requestDelayedTransition(!1,!0),(changed.has("for")||changed.has("anchor")||changed.has("open"))&&this.syncAnchorIdentityObservation(),changed.has("for")&&this.syncInteractionTrigger(),this.directionChanged||changed.has("open")||changed.has("placement")||changed.has("positioningStrategy")||changed.has("topLayer")||changed.has("hoverBridge")||changed.has("trigger")||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")){if(this.open&&this.isConnected?this.positionPopup():changed.has("open")&&this.invalidatePositioning(),changed.has("open"))if(this.open)this.isConnected&&(this.startLightDismiss(),this.activatePopoverOverlay());else{this.pinned=!1,this.openedByInteraction=!1,this.cancelPendingTransition(),this.positionedAnchor=void 0,this.stopLightDismiss(),this.suppressTriggerFocusOpen=!0;try{this.overlayHandle?.deactivate()}finally{this.suppressTriggerFocusOpen=!1}this.overlayHandle=void 0,this.virtualAnchor=void 0,this.returnFocusTo=void 0,this.virtualInteractionBoundary=void 0,this.syncInteractionTrigger()}this.isConnected&&this.syncTriggerA11y()}}firstUpdated(changed){super.firstUpdated(changed);const slot=this.triggerSlotElement;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>this.collectTriggerFromSlot(s))})}connectedCallback(){if(this.disconnecting){this.reconnectedWhileDisconnecting=!0;return}if(super.connectedCallback(),this.connectionSequence=++popoverConnectionSequence,this.addEventListener("focusin",this.onSurfaceFocusIn),this.addEventListener("focusout",this.onSurfaceFocusOut),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.popupHidden=!1,this.positionPopup()}}disconnectedCallback(){this.disconnecting=!0;try{this.teardownOnDisconnect(),super.disconnectedCallback()}finally{this.disconnecting=!1}this.reconnectedWhileDisconnecting&&(this.reconnectedWhileDisconnecting=!1,this.isConnected&&this.connectedCallback())}teardownOnDisconnect(){this.anchorIdentity.stop(),this.invalidatePositioning(),this.stopLightDismiss(),this.resetHostIdObserver(),this.overlayHandle?.suspend(),this.triggerElement?.removeEventListener("click",this.onTriggerClick),this.triggerElement?.removeEventListener("keydown",this.onExternalTriggerKeyDown),this.triggerElement&&this.unbindTriggerInteractions(this.triggerElement),this.releaseTriggerA11y(),this.triggerElement=void 0,this.removeEventListener("focusin",this.onSurfaceFocusIn),this.removeEventListener("focusout",this.onSurfaceFocusOut),this.cancelPendingTransition(),this.virtualInteractionBoundary=void 0,this.pinned=!1,this.openedByInteraction=!1,this.transitionToken++,this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.popupHidden=!0}adoptedCallback(){super.adoptedCallback(),this.anchorIdentity.stop(),this.resetHostIdObserver(),this.releaseTriggerA11y()}syncAnchorIdentityObservation(){this.anchorIdentity.stop();const directAnchor=this.open?this.anchor??void 0:void 0;this.anchorIdentity.observe(this,directAnchor,this.for,()=>this.anchor,directAnchorRemoved=>{if(this.resolveInteractionTrigger()!==this.triggerElement&&this.syncInteractionTrigger(),!this.open)return;const nextAnchor=this.resolveAnchor();if(directAnchorRemoved&&!nextAnchor){this.forceClose({focusTrigger:!1});return}nextAnchor!==this.positionedAnchor&&this.positionPopup()})}resolveInteractionTrigger(){return resolveOverlayInteractionTrigger(this,this.virtualAnchor,this.slottedTrigger,this.for)}syncInteractionTrigger(){const next=this.resolveInteractionTrigger();if(next===this.triggerElement){this.syncTriggerA11y();return}const previous=this.triggerElement;if(previous?.removeEventListener("click",this.onTriggerClick),previous?.removeEventListener("keydown",this.onExternalTriggerKeyDown),previous&&this.unbindTriggerInteractions(previous),this.triggerElement=next,this.triggerUpgrades.disconnect(),this.triggerElement&&this.triggerElement!==this.slottedTrigger&&(this.triggerElement.addEventListener("click",this.onTriggerClick),this.triggerElement.addEventListener("keydown",this.onExternalTriggerKeyDown)),this.triggerElement&&this.bindTriggerInteractions(this.triggerElement),this.syncTriggerA11y(),this.open){if(previous&&next&&this.openedByInteraction&&!this.pinned&&![next,this].some(element=>element.matches(":hover"))&&!this.isWithinPopoverSurface(deepActiveElementIn(this.ownerDocument))||!this.resolveAnchor()){this.forceClose({focusTrigger:!1});return}this.updatePopoverRestoreFocusTarget(),this.positionPopup()}}activatePopoverOverlay(){!this.isConnected||this.overlayHandle?.isActive()||(this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part~="popup"]'),onEscape:()=>{this.hide()},restoreFocusTo:this.virtualAnchor?this.returnFocusTo??null:this.accessibleTrigger}))}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,previousInteractionBoundary=this.virtualInteractionBoundary,bounds=new DOMRect(normalizedRect.x,normalizedRect.y,normalizedRect.width,normalizedRect.height);if(this.virtualAnchor={getBoundingClientRect:()=>bounds,contextElement:normalizedRect.contextElement},this.returnFocusTo=options?.returnFocusTo,this.virtualInteractionBoundary=options?.interactionBoundary,this.syncInteractionTrigger(),this.open){this.updatePopoverRestoreFocusTarget(),this.positionPopup();return}this.show(),!this.open&&(this.virtualAnchor=previousAnchor,this.returnFocusTo=previousReturnFocusTo,this.virtualInteractionBoundary=previousInteractionBoundary,this.syncInteractionTrigger())}resolveAnchor(){return resolveOverlayAnchor(this,{virtualAnchor:this.virtualAnchor,anchor:this.anchor,for:this.for,trigger:this.triggerElement})}positionPopup(){this.invalidatePositioning();const popup=this.renderRoot.querySelector('[part~="popup"]'),arrowElement=this.renderRoot.querySelector('[part~="arrow"]'),bridgeElement=this.renderRoot.querySelector('[part~="hover-bridge"]'),anchor=this.resolveAnchor();if(!this.open||!anchor||!popup){this.positionedAnchor=void 0,this.anchorPositioned=!1;return}anchor!==this.positionedAnchor&&(this.anchorPositioned=!1),this.startPositioning(this.positioningGeneration,anchor,popup,arrowElement,bridgeElement)}invalidatePositioning(){this.positioningGeneration++,this.cleanup?.(),this.cleanup=void 0}startPositioning(generation,anchor,popup,arrowElement,bridgeElement){this.placedTopLayer=syncTopLayerRelease(popup,this.placedTopLayer,this.topLayer);const operation=deferredPlaceReady(anchor,popup,{placement:rtlAwarePlacement(this.placement,this),strategy:this.topLayer?"fixed":this.resolvedPositioningStrategy,topLayer:this.topLayer,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)),hoverBridge:this.rendersHoverBridge&&bridgeElement?bridgeElement:void 0,onPlaced:({placement,arrow})=>{if(generation!==this.positioningGeneration)return;const becamePositioned=!this.anchorPositioned||this.positionedAnchor!==anchor;this.positionedAnchor=anchor,this.anchorPositioned=!0;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),this.updateComplete.then(()=>{generation!==this.positioningGeneration||!this.open||this.resolveAnchor()!==anchor||becamePositioned&&this.onPopupPositioned()})}});this.cleanup=operation,operation.ready.then(positioned=>{!positioned&&generation===this.positioningGeneration&&this.open&&this.forceClose({focusTrigger:!1})})}syncTriggerA11y(){const popup=this.renderRoot?.querySelector('[part~="popup"]')??null,contribution={attributes:{"aria-haspopup":this.triggerPopupRole==="none"?null:this.triggerPopupRole,"aria-expanded":this.open?"true":"false"},controls:popup?[popup]:[]},accessibleTrigger=this.accessibleTrigger;this.observeAccessibleTrigger(accessibleTrigger);const semanticTrigger=accessibleTrigger&&supportsTriggerExpansion(accessibleTrigger)?accessibleTrigger:null;this.accessibleTriggerAria?this.accessibleTriggerAria.update(semanticTrigger,contribution):this.accessibleTriggerAria=acquireAriaOwnership(semanticTrigger,contribution),this.overlayHandle?.isActive()&&!this.virtualAnchor&&this.overlayHandle.updateRestoreFocusTo(accessibleTrigger)}get accessibleTrigger(){const trigger=this.triggerElement;if(!trigger)return null;const resolved=resolveAccessibleTrigger(trigger);return resolved===trigger&&!trigger.hasAttribute("role")&&!trigger.matches("button, a[href], input, select, textarea, summary")?collectComposedFocusTargets(trigger,{includeRoot:!1,mode:"programmatic"}).elements[0]??trigger:resolved}observeAccessibleTrigger(target){this.accessibleTriggerObserver?.disconnect();const trigger=this.triggerElement;if(!trigger||!this.isConnected)return;const view=this.ownerDocument.defaultView;if(view?.MutationObserver){this.accessibleTriggerObserver??=new view.MutationObserver(()=>{this.isConnected&&this.syncTriggerA11y()});const roots=new Set([trigger]);trigger.shadowRoot&&roots.add(trigger.shadowRoot);let current=target;for(;current&¤t!==trigger;){const root=current.getRootNode();if(root.nodeType!==11||!("host"in root))break;roots.add(root),current=root.host}for(const root of roots)this.accessibleTriggerObserver.observe(root,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["role","tabindex","disabled","href","type"]})}this.triggerUpgrades.observeElement(trigger)}releaseTriggerA11y(){this.accessibleTriggerObserver?.disconnect(),this.accessibleTriggerObserver=void 0,this.triggerUpgrades.disconnect(),this.accessibleTriggerAria?.release(),this.accessibleTriggerAria=void 0}collectTriggerFromSlot(slot){const next=slot.assignedElements({flatten:!0})[0];next!==this.slottedTrigger&&(this.slottedTrigger=next,this.syncInteractionTrigger())}requestInteractionClose(next){this.pinned||this.isWithinPopoverSurface(next)||this.hasFocusWithinSurface()||this.requestDelayedTransition(!1)}isWithinPopoverSurface(target){if(target===null||target.nodeType!==1)return!1;const element=target;if(composedContains(this,element))return!0;const popup=this.renderRoot?.querySelector('[part~="popup"]')??null;return popup&&composedContains(popup,element)?!0:this.triggerElement!=null&&composedContains(this.triggerElement,element)}hasFocusWithinSurface(){const active=deepActiveElementIn(this.ownerDocument);return active===null||this.triggerElement&&composedContains(this.triggerElement,active)?!1:this.isWithinPopoverSurface(active)}requestDelayedTransition(next,deferImmediate=!1){if(this.cancelPendingTransition(),next&&!this.canOpen)return;const commit=()=>{next?(this.openedByInteraction=!0,this.show()):this.hide()},delay=Math.max(0,finiteDuration(next?this.showDelay:this.hideDelay,DEFAULT_TRIGGER_DELAY)),view=this.ownerDocument.defaultView;if(!view||delay<=0&&!deferImmediate){commit();return}this.delayTimer.schedule(view,delay,next?"show":"hide",commit)}cancelPendingTransition(){this.delayTimer.cancel()}triggerNeedsOwnFocusListeners(trigger){return!composedContains(this,trigger)}bindTriggerInteractions(trigger){trigger.addEventListener("mouseenter",this.onTriggerPointerEnter),trigger.addEventListener("mouseleave",this.onTriggerPointerLeave),this.triggerNeedsOwnFocusListeners(trigger)&&(trigger.addEventListener("focusin",this.onSurfaceFocusIn),trigger.addEventListener("focusout",this.onSurfaceFocusOut))}unbindTriggerInteractions(trigger){trigger.removeEventListener("mouseenter",this.onTriggerPointerEnter),trigger.removeEventListener("mouseleave",this.onTriggerPointerLeave),trigger.removeEventListener("focusin",this.onSurfaceFocusIn),trigger.removeEventListener("focusout",this.onSurfaceFocusOut)}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)&&!(composedContains(peer,this)||this.triggerElement&&composedContains(peer,this.triggerElement))&&(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.invalidatePositioning(),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,showing=event==="lr-after-show";return settleOverlayTransition({showing,updateComplete:()=>this.updateComplete,isCurrent:()=>this.transitionToken===token,readyToShow:async()=>{const positioned=await waitForDeferredPlacement(()=>this.cleanup);return this.transitionToken===token&&this.open&&positioned&&this.anchorPositioned},animate:async()=>{if(!this.isConnected)return;const popup=this.renderRoot.querySelector('[part~="popup"]'),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;this.transitionAnimation=animation,await animation?.finished.catch(()=>{}),this.transitionToken===token&&this.cancelTransitionAnimation()},afterHide:()=>{this.removeAttribute("data-closing"),this.popupHidden=!0},settled:()=>{this.emitSettledLifecycle(event)}})}render(){const popupRole=this.popupSurfaceRole;return html`
|
|
1
|
+
import{__decorate}from"tslib";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel,nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{CustomElementUpgradeObserver}from"../../../internal/custom-element-upgrade-observer.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{tag}from"../../../internal/prefix.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{deferredPlaceReady,syncTopLayerRelease,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{finiteDuration,finiteNumber}from"../../../internal/numbers.js";import{deepActiveElementIn}from"../../../internal/active-element.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{literalSetConverter,omittedEmptyStringConverter,optionalLiteralSetConverter}from"../../../internal/converters.js";import{activateNonmodalOverlay,composedContains}from"../../../internal/nonmodal-overlay-manager.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{applyOverlayArrow}from"./overlay-arrow.js";import{normalizeVirtualRect,OverlayAnchorIdentity,OverlayDelayTimer,OverlayTransitionGate,resolveOverlayAnchor,resolveOverlayInteractionTrigger,settleOverlayTransition}from"./overlay-shared.js";import{styles}from"./overlay.styles.js";import{glassPopoverStyles}from"./popover-glass.styles.js";import{LYRA_DEFAULT_menuLabel,LYRA_DEFAULT_popover}from"../../../internal/default-strings/shared.generated.js";const DEFAULT_DISTANCE=8,EXPANDABLE_TRIGGER_ROLES=new Set(["application","button","checkbox","combobox","gridcell","link","listbox","menuitem","row","rowheader","tab","treeitem","columnheader","menuitemcheckbox","menuitemradio","switch"]);function supportsTriggerExpansion(element){const role=element.getAttribute("role")?.trim().split(/\s+/)[0];return role?EXPANDABLE_TRIGGER_ROLES.has(role):element.matches("button, a[href], select, summary")?!0:element.localName==="input"&&["button","submit","reset","image","checkbox"].includes(element.type)}let popoverConnectionSequence=0;const POPUP_ROLE=literalSetConverter(["dialog","menu","none"],"dialog"),POPOVER_TRIGGER_KEYWORDS=["click","hover","focus","manual"];function normalizeTriggerList(next){const keywords=[];for(const token of String(next??"").trim().toLowerCase().split(/\s+/)){const keyword=POPOVER_TRIGGER_KEYWORDS.find(candidate=>candidate===token);keyword&&!keywords.includes(keyword)&&keywords.push(keyword)}return keywords.length>0?keywords.join(" "):"click"}const DEFAULT_TRIGGER_DELAY=0,POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]);class LyraPopover extends LyraElement{static{this.defaultStrings={...super.defaultStrings,menuLabel:LYRA_DEFAULT_menuLabel,popover:LYRA_DEFAULT_popover}}constructor(){super(),this._open=!1,this.placement="top",this.topLayer=!1,this.distance=8,this.skidding=0,this._for="",this.anchor=null,this.interactionBoundary=null,this.withoutArrow=!1,this.arrowPlacement="anchor",this.arrowPadding=0,this._trigger="click",this.showDelay=0,this.hideDelay=0,this.hoverBridge=!1,this.accessibleLabel="",this._popupRole="dialog",this._disabled=!1,this.openedByInteraction=!1,this.pinned=!1,this.suppressTriggerFocusOpen=!1,this.delayTimer=new OverlayDelayTimer,this.resolvedSide="bottom",this.anchorPositioned=!1,this.popupHidden=!0,this.disconnecting=!1,this.reconnectedWhileDisconnecting=!1,this.directionChanged=!1,this.anchorIdentity=new OverlayAnchorIdentity,this.triggerUpgrades=new CustomElementUpgradeObserver(()=>{this.isConnected&&this.syncTriggerA11y()}),this.positioningGeneration=0,this.generatedHostId=nextId("popover"),this.popupId=nextId("popover-popup"),this.hostIdObserverGeneration=0,this.transitionToken=0,this.transitionGate=new OverlayTransitionGate,this.connectionSequence=0,this.popoverInternals=attachInternalsSafely(this),this.onExternalTriggerKeyDown=event=>{this.onTriggerKeyDown(event)},this.onTriggerSlotChange=event=>{this.collectTriggerFromSlot(event.target)},this.onTriggerClick=()=>{if(!this.virtualAnchor&&(this.syncTriggerA11y(),!this.isManualTrigger)){if(this.cancelPendingTransition(),this.opensOn("click")&&!this.opensOn("hover")&&!this.opensOn("focus")){this.open?this.hide():this.show();return}if(this.open&&this.pinned){this.hide();return}this.open||(this.openedByInteraction=!1,this.show()),this.pinned=this.open}},this.onTriggerPointerEnter=()=>{this.opensOn("hover")&&this.requestDelayedTransition(!0)},this.onTriggerPointerLeave=event=>{this.opensOn("hover")&&this.requestInteractionClose(event.relatedTarget)},this.onPopupPointerEnter=()=>{!this.opensOn("hover")||!this.open||this.cancelPendingTransition()},this.onPopupPointerLeave=event=>{this.opensOn("hover")&&this.requestInteractionClose(event.relatedTarget)},this.onSurfaceFocusIn=event=>{!this.opensOn("focus")||this.suppressTriggerFocusOpen||(!this.open||this.triggerElement!=null&&event.composedPath().includes(this.triggerElement))&&!isKeyboardFocusEvent(event)||this.requestDelayedTransition(!0)},this.onSurfaceFocusOut=event=>{this.opensOn("focus")&&this.requestInteractionClose(event.relatedTarget)},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())},new GlassScrollLayer(this,'[part~="popup"]')}static{this.styles=[LyraElement.styles,styles,glassPopoverStyles]}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 positioningStrategy(){return this._positioningStrategy??this.defaultPositioningStrategy}set positioningStrategy(next){const normalized=POSITIONING_STRATEGY.normalize(next)??this.defaultPositioningStrategy,old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),this.onPositioningStrategyChanged(old,normalized))}onPositioningStrategyChanged(_previous,_next){}get for(){return this._for}set for(next){this._for=next??""}get trigger(){return this._trigger}set trigger(next){const normalized=normalizeTriggerList(next);if(normalized===this._trigger)return;const old=this._trigger;this._trigger=normalized,this.requestUpdate("trigger",old)}get triggerKeywords(){return new Set(this._trigger.split(" "))}get isManualTrigger(){return this.triggerKeywords.has("manual")}opensOn(keyword){return!this.isManualTrigger&&this.triggerKeywords.has(keyword)}get popupRole(){return this._popupRole}set popupRole(next){const normalized=POPUP_ROLE.normalize(next);if(normalized===this._popupRole)return;const old=this._popupRole;this._popupRole=normalized,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 defaultPositioningStrategy(){return"fixed"}get resolvedPositioningStrategy(){return resolveEffectivePositioningStrategy(this,this._positioningStrategy,this.defaultPositioningStrategy)}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==="none"?void 0:this.popupRole}get effectivePopupLabel(){return hostAriaLabel(this)??(this.accessibleLabel||this.localize(this.triggerPopupRole==="menu"?"menuLabel":"popover"))}get rendersArrow(){return!this.withoutArrow}get arrowPartNames(){return"arrow popup__arrow"}get rendersHoverBridge(){return this.hoverBridge&&this.opensOn("hover")&&this.open}get canOpen(){return!this.disabled}renderPopupContent(){return html`<slot></slot>`}onTriggerKeyDown(_event){}isInsideLightDismissBoundary(path){const boundary=this.virtualAnchor?this.virtualInteractionBoundary:this.interactionBoundary;return path.includes(this)||this.triggerElement!=null&&path.includes(this.triggerElement)||boundary!=null&&boundary.isConnected&&boundary.ownerDocument===this.ownerDocument&&path.includes(boundary)}onPopupPositioned(){this.openedByInteraction||this.overlayHandle?.focusAutofocus()}willUpdate(changed){super.willUpdate(changed);const direction=this.effectiveDirection;this.directionChanged=direction!==this.positioningDirection,this.positioningDirection=direction,this.anchorIdentity.lostAnchorProperty(changed,this.anchor)&&this.open&&!this.resolveAnchor()&&this.forceClose({focusTrigger:!1}),changed.has("open")&&!this.open&&(this.anchorPositioned=!1),changed.has("open")&&this.open&&(this.popupHidden=!1),(changed.has("anchor")||changed.has("for"))&&(this.anchorPositioned=!1)}updated(changed){if(super.updated(changed),changed.has("trigger")&&(this.cancelPendingTransition(),!this.opensOn("hover")&&!this.opensOn("focus")&&(this.pinned=!1)),changed.has("showDelay")&&this.delayTimer.pendingDirection==="show"&&this.requestDelayedTransition(!0,!0),changed.has("hideDelay")&&this.delayTimer.pendingDirection==="hide"&&this.requestDelayedTransition(!1,!0),(changed.has("for")||changed.has("anchor")||changed.has("open"))&&this.syncAnchorIdentityObservation(),changed.has("for")&&this.syncInteractionTrigger(),this.directionChanged||changed.has("open")||changed.has("placement")||changed.has("positioningStrategy")||changed.has("topLayer")||changed.has("hoverBridge")||changed.has("trigger")||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")){if(this.open&&this.isConnected?this.positionPopup():changed.has("open")&&this.invalidatePositioning(),changed.has("open"))if(this.open)this.isConnected&&(this.startLightDismiss(),this.activatePopoverOverlay());else{this.pinned=!1,this.openedByInteraction=!1,this.cancelPendingTransition(),this.positionedAnchor=void 0,this.stopLightDismiss(),this.suppressTriggerFocusOpen=!0;try{this.overlayHandle?.deactivate()}finally{this.suppressTriggerFocusOpen=!1}this.overlayHandle=void 0,this.virtualAnchor=void 0,this.returnFocusTo=void 0,this.virtualInteractionBoundary=void 0,this.syncInteractionTrigger()}this.isConnected&&this.syncTriggerA11y()}}firstUpdated(changed){super.firstUpdated(changed);const slot=this.triggerSlotElement;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>this.collectTriggerFromSlot(s))})}connectedCallback(){if(this.disconnecting){this.reconnectedWhileDisconnecting=!0;return}if(super.connectedCallback(),this.connectionSequence=++popoverConnectionSequence,this.addEventListener("focusin",this.onSurfaceFocusIn),this.addEventListener("focusout",this.onSurfaceFocusOut),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.popupHidden=!1,this.positionPopup()}}disconnectedCallback(){this.disconnecting=!0;try{this.teardownOnDisconnect(),super.disconnectedCallback()}finally{this.disconnecting=!1}this.reconnectedWhileDisconnecting&&(this.reconnectedWhileDisconnecting=!1,this.isConnected&&this.connectedCallback())}teardownOnDisconnect(){this.anchorIdentity.stop(),this.invalidatePositioning(),this.stopLightDismiss(),this.resetHostIdObserver(),this.overlayHandle?.suspend(),this.triggerElement?.removeEventListener("click",this.onTriggerClick),this.triggerElement?.removeEventListener("keydown",this.onExternalTriggerKeyDown),this.triggerElement&&this.unbindTriggerInteractions(this.triggerElement),this.releaseTriggerA11y(),this.triggerElement=void 0,this.removeEventListener("focusin",this.onSurfaceFocusIn),this.removeEventListener("focusout",this.onSurfaceFocusOut),this.cancelPendingTransition(),this.virtualInteractionBoundary=void 0,this.pinned=!1,this.openedByInteraction=!1,this.transitionToken++,this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.popupHidden=!0}adoptedCallback(){super.adoptedCallback(),this.anchorIdentity.stop(),this.resetHostIdObserver(),this.releaseTriggerA11y()}syncAnchorIdentityObservation(){this.anchorIdentity.stop();const directAnchor=this.open?this.anchor??void 0:void 0;this.anchorIdentity.observe(this,directAnchor,this.for,()=>this.anchor,directAnchorRemoved=>{if(this.resolveInteractionTrigger()!==this.triggerElement&&this.syncInteractionTrigger(),!this.open)return;const nextAnchor=this.resolveAnchor();if(directAnchorRemoved&&!nextAnchor){this.forceClose({focusTrigger:!1});return}nextAnchor!==this.positionedAnchor&&this.positionPopup()})}resolveInteractionTrigger(){return resolveOverlayInteractionTrigger(this,this.virtualAnchor,this.slottedTrigger,this.for)}syncInteractionTrigger(){const next=this.resolveInteractionTrigger();if(next===this.triggerElement){this.syncTriggerA11y();return}const previous=this.triggerElement;if(previous?.removeEventListener("click",this.onTriggerClick),previous?.removeEventListener("keydown",this.onExternalTriggerKeyDown),previous&&this.unbindTriggerInteractions(previous),this.triggerElement=next,this.triggerUpgrades.disconnect(),this.triggerElement&&this.triggerElement!==this.slottedTrigger&&(this.triggerElement.addEventListener("click",this.onTriggerClick),this.triggerElement.addEventListener("keydown",this.onExternalTriggerKeyDown)),this.triggerElement&&this.bindTriggerInteractions(this.triggerElement),this.syncTriggerA11y(),this.open){if(previous&&next&&this.openedByInteraction&&!this.pinned&&![next,this].some(element=>element.matches(":hover"))&&!this.isWithinPopoverSurface(deepActiveElementIn(this.ownerDocument))||!this.resolveAnchor()){this.forceClose({focusTrigger:!1});return}this.updatePopoverRestoreFocusTarget(),this.positionPopup()}}activatePopoverOverlay(){!this.isConnected||this.overlayHandle?.isActive()||(this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part~="popup"]'),onEscape:()=>{this.hide()},restoreFocusTo:this.virtualAnchor?this.returnFocusTo??null:this.accessibleTrigger}))}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,previousInteractionBoundary=this.virtualInteractionBoundary,bounds=new DOMRect(normalizedRect.x,normalizedRect.y,normalizedRect.width,normalizedRect.height);if(this.virtualAnchor={getBoundingClientRect:()=>bounds,contextElement:normalizedRect.contextElement},this.returnFocusTo=options?.returnFocusTo,this.virtualInteractionBoundary=options?.interactionBoundary,this.syncInteractionTrigger(),this.open){this.updatePopoverRestoreFocusTarget(),this.positionPopup();return}this.show(),!this.open&&(this.virtualAnchor=previousAnchor,this.returnFocusTo=previousReturnFocusTo,this.virtualInteractionBoundary=previousInteractionBoundary,this.syncInteractionTrigger())}resolveAnchor(){return resolveOverlayAnchor(this,{virtualAnchor:this.virtualAnchor,anchor:this.anchor,for:this.for,trigger:this.triggerElement})}positionPopup(){this.invalidatePositioning();const popup=this.renderRoot.querySelector('[part~="popup"]'),arrowElement=this.renderRoot.querySelector('[part~="arrow"]'),bridgeElement=this.renderRoot.querySelector('[part~="hover-bridge"]'),anchor=this.resolveAnchor();if(!this.open||!anchor||!popup){this.positionedAnchor=void 0,this.anchorPositioned=!1;return}anchor!==this.positionedAnchor&&(this.anchorPositioned=!1),this.startPositioning(this.positioningGeneration,anchor,popup,arrowElement,bridgeElement)}invalidatePositioning(){this.positioningGeneration++,this.cleanup?.(),this.cleanup=void 0}startPositioning(generation,anchor,popup,arrowElement,bridgeElement){this.placedTopLayer=syncTopLayerRelease(popup,this.placedTopLayer,this.topLayer);const operation=deferredPlaceReady(anchor,popup,{placement:rtlAwarePlacement(this.placement,this),strategy:this.topLayer?"fixed":this.resolvedPositioningStrategy,topLayer:this.topLayer,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)),hoverBridge:this.rendersHoverBridge&&bridgeElement?bridgeElement:void 0,onPlaced:({placement,arrow})=>{if(generation!==this.positioningGeneration)return;const becamePositioned=!this.anchorPositioned||this.positionedAnchor!==anchor;this.positionedAnchor=anchor,this.anchorPositioned=!0;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),this.updateComplete.then(()=>{generation!==this.positioningGeneration||!this.open||this.resolveAnchor()!==anchor||becamePositioned&&this.onPopupPositioned()})}});this.cleanup=operation,operation.ready.then(positioned=>{!positioned&&generation===this.positioningGeneration&&this.open&&this.forceClose({focusTrigger:!1})})}syncTriggerA11y(){const popup=this.renderRoot?.querySelector('[part~="popup"]')??null,contribution={attributes:{"aria-haspopup":this.triggerPopupRole==="none"?null:this.triggerPopupRole,"aria-expanded":this.open?"true":"false"},controls:popup?[popup]:[]},accessibleTrigger=this.accessibleTrigger;this.observeAccessibleTrigger(accessibleTrigger);const semanticTrigger=accessibleTrigger&&supportsTriggerExpansion(accessibleTrigger)?accessibleTrigger:null;this.accessibleTriggerAria?this.accessibleTriggerAria.update(semanticTrigger,contribution):this.accessibleTriggerAria=acquireAriaOwnership(semanticTrigger,contribution),this.overlayHandle?.isActive()&&!this.virtualAnchor&&this.overlayHandle.updateRestoreFocusTo(accessibleTrigger)}get accessibleTrigger(){const trigger=this.triggerElement;if(!trigger)return null;const resolved=resolveAccessibleTrigger(trigger);return resolved===trigger&&!trigger.hasAttribute("role")&&!trigger.matches("button, a[href], input, select, textarea, summary")?collectComposedFocusTargets(trigger,{includeRoot:!1,mode:"programmatic"}).elements[0]??trigger:resolved}observeAccessibleTrigger(target){this.accessibleTriggerObserver?.disconnect();const trigger=this.triggerElement;if(!trigger||!this.isConnected)return;const view=this.ownerDocument.defaultView;if(view?.MutationObserver){this.accessibleTriggerObserver??=new view.MutationObserver(()=>{this.isConnected&&this.syncTriggerA11y()});const roots=new Set([trigger]);trigger.shadowRoot&&roots.add(trigger.shadowRoot);let current=target;for(;current&¤t!==trigger;){const root=current.getRootNode();if(root.nodeType!==11||!("host"in root))break;roots.add(root),current=root.host}for(const root of roots)this.accessibleTriggerObserver.observe(root,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["role","tabindex","disabled","href","type"]})}this.triggerUpgrades.observeElement(trigger)}releaseTriggerA11y(){this.accessibleTriggerObserver?.disconnect(),this.accessibleTriggerObserver=void 0,this.triggerUpgrades.disconnect(),this.accessibleTriggerAria?.release(),this.accessibleTriggerAria=void 0}collectTriggerFromSlot(slot){const next=slot.assignedElements({flatten:!0})[0];next!==this.slottedTrigger&&(this.slottedTrigger=next,this.syncInteractionTrigger())}requestInteractionClose(next){this.pinned||this.isWithinPopoverSurface(next)||this.hasFocusWithinSurface()||this.requestDelayedTransition(!1)}isWithinPopoverSurface(target){if(target===null||target.nodeType!==1)return!1;const element=target;if(composedContains(this,element))return!0;const popup=this.renderRoot?.querySelector('[part~="popup"]')??null;return popup&&composedContains(popup,element)?!0:this.triggerElement!=null&&composedContains(this.triggerElement,element)}hasFocusWithinSurface(){const active=deepActiveElementIn(this.ownerDocument);return active===null||this.triggerElement&&composedContains(this.triggerElement,active)?!1:this.isWithinPopoverSurface(active)}requestDelayedTransition(next,deferImmediate=!1){if(this.cancelPendingTransition(),next&&!this.canOpen)return;const commit=()=>{next?(this.openedByInteraction=!0,this.show()):this.hide()},delay=Math.max(0,finiteDuration(next?this.showDelay:this.hideDelay,DEFAULT_TRIGGER_DELAY)),view=this.ownerDocument.defaultView;if(!view||delay<=0&&!deferImmediate){commit();return}this.delayTimer.schedule(view,delay,next?"show":"hide",commit)}cancelPendingTransition(){this.delayTimer.cancel()}triggerNeedsOwnFocusListeners(trigger){return!composedContains(this,trigger)}bindTriggerInteractions(trigger){trigger.addEventListener("mouseenter",this.onTriggerPointerEnter),trigger.addEventListener("mouseleave",this.onTriggerPointerLeave),this.triggerNeedsOwnFocusListeners(trigger)&&(trigger.addEventListener("focusin",this.onSurfaceFocusIn),trigger.addEventListener("focusout",this.onSurfaceFocusOut))}unbindTriggerInteractions(trigger){trigger.removeEventListener("mouseenter",this.onTriggerPointerEnter),trigger.removeEventListener("mouseleave",this.onTriggerPointerLeave),trigger.removeEventListener("focusin",this.onSurfaceFocusIn),trigger.removeEventListener("focusout",this.onSurfaceFocusOut)}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)&&!(composedContains(peer,this)||this.triggerElement&&composedContains(peer,this.triggerElement))&&(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.invalidatePositioning(),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,showing=event==="lr-after-show";return settleOverlayTransition({showing,updateComplete:()=>this.updateComplete,isCurrent:()=>this.transitionToken===token,readyToShow:async()=>{const positioned=await waitForDeferredPlacement(()=>this.cleanup);return this.transitionToken===token&&this.open&&positioned&&this.anchorPositioned},animate:async()=>{if(!this.isConnected)return;const popup=this.renderRoot.querySelector('[part~="popup"]'),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;this.transitionAnimation=animation,await animation?.finished.catch(()=>{}),this.transitionToken===token&&this.cancelTransitionAnimation()},afterHide:()=>{this.removeAttribute("data-closing"),this.popupHidden=!0},settled:()=>{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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{isAccessibilitySubtreeExcluded,isAccessibilityVisibilityHidden,nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{imageMapImageFor}from"../../../internal/dom-guards.js";import{deferredPlaceReady as place,syncTopLayerRelease,topLayerPlacement,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{virtualAnchorFromRect}from"../../../internal/positioner-geometry.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{deepActiveElementIn}from"../../../internal/active-element.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{parseCssTimeToken}from"../../../internal/css-motion-time.js";import{finiteDuration,finiteNumber}from"../../../internal/numbers.js";import{omittedEmptyStringConverter,optionalLiteralSetConverter}from"../../../internal/converters.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{activateNonmodalOverlay,composedContains}from"../../../internal/nonmodal-overlay-manager.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{subscribeInheritedAttributes}from"../../../internal/inherited-attribute-hub.js";import{accessibleTextRecordsMatter,bindAccessibleTextObserver,labelReferenceRecordsMatter,composedAccessibilityTextResult}from"../../../internal/accessibility-visibility.js";import{applyOverlayArrow}from"./overlay-arrow.js";import{normalizeVirtualRect,OverlayAnchorIdentity,OverlayDelayTimer,OverlayTransitionGate,resolveOverlayAnchor,resolveOverlayInteractionTrigger,settleOverlayTransition}from"./overlay-shared.js";import{tooltipStyles}from"./overlay.styles.js";import{LYRA_DEFAULT_popover}from"../../../internal/default-strings.generated.js";const DEFAULT_SHOW_DELAY=150,DEFAULT_HIDE_DELAY=0,DEFAULT_DISTANCE=8,MAX_SHADOW_CONTENT_SCAN_FRAMES=4;function safelyComposedContains(container,candidate){try{return candidate?.nodeType===1&&composedContains(container,candidate)}catch{return!1}}const TOOLTIP_POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]);class LyraTooltip extends LyraElement{constructor(){super(...arguments),this._open=!1,this.trigger="hover focus",this.manual=!1,this.showDelay=150,this.hideDelay=0,this.placement="top",this.distance=8,this.skidding=0,this._for="",this.anchor=null,this.disabled=!1,this.topLayer=!1,this.withoutArrow=!1,this.arrowPlacement="anchor",this.arrowPadding=0,this.content="",this.accessibleLabel="",this.namedTriggerMode=!0,this.interactiveContent=!1,this.resolvedSide="top",this.anchorPositioned=!1,this.popupHidden=!0,this.directionChanged=!1,this.anchorIdentity=new OverlayAnchorIdentity,this.placementPending=!1,this.delayTimer=new OverlayDelayTimer,this.restoreFocusOnClose=!1,this.suppressTriggerFocusOpen=!1,this.openedByPointer=!1,this.tooltipId=nextId("tooltip"),this.descriptionId=nextId("tooltip-description"),this.focusDescribesTrigger=!1,this.triggerSyncGeneration=0,this.contentSlotListeners=new Set,this.shadowContentScanAttempts=0,this.transitionToken=0,this.transitionGate=new OverlayTransitionGate,this.onTriggerSlotChange=event=>{this.syncNamedTriggerMode();const slot=event.target;this.slottedTriggerElement=slot.assignedElements({flatten:!0})[0],this.syncInteractionTrigger()},this.onEnter=event=>{if(!this.disabled){if(event.type==="focusin"){if(this.updateInteractiveContent(),this.opensOn("focus")&&(this.focusDescribesTrigger=!0),this.contentSnapshot&&this.bindContentObservation(this.contentSnapshot),this.syncTriggerA11y(),this.suppressTriggerFocusOpen||!this.opensOn("focus")||!isKeyboardFocusEvent(event))return}else{if(this.syncTriggerA11y(),!this.opensOn("hover"))return;this.openedByPointer=!0}this.requestTransition(!0)}},this.onLeave=event=>{if(event.type==="focusout"?!this.opensOn("focus"):!this.opensOn("hover"))return;const next=event.relatedTarget;next!==null&&next.nodeType===1&&this.triggerElement&&composedContains(this.triggerElement,next)||(event.type==="focusout"&&(this.focusDescribesTrigger=!1,this.contentSnapshot&&this.bindContentObservation(this.contentSnapshot),this.syncTriggerA11y()),!(this.interactiveContent&&this.isPopupTarget(next))&&this.requestTransition(!1))},this.onTriggerClick=()=>{this.disabled||this.opensOn("click")&&(this.syncTriggerA11y(),this._open?this.hide():this.show())},this.onPopupEnter=()=>{!this.interactiveContent||this.isManual||(this.cancelPendingTransition(),this.show())},this.onPopupLeave=event=>{if(!this.interactiveContent||this.isManual)return;const next=event.relatedTarget;next!==null&&next.nodeType===1&&(this.triggerElement&&composedContains(this.triggerElement,next)||this.isPopupTarget(next))||this.requestTransition(!1)},this.onContentSlotChange=event=>{event.target?.localName==="slot"&&this.updateInteractiveContent()}}static{this.defaultStrings={...super.defaultStrings,popover:LYRA_DEFAULT_popover}}static{this.styles=[LyraElement.styles,tooltipStyles]}get open(){return this._open}set open(next){const normalized=!!next;if(normalized||this.cancelPendingTransition(),normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.hide()}}get for(){return this._for}set for(next){this._for=next??""}get positioningStrategy(){return this._positioningStrategy??"absolute"}set positioningStrategy(next){const normalized=TOOLTIP_POSITIONING_STRATEGY.normalize(next)??"absolute",old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),old==="fixed"!=(normalized==="fixed")&&this.requestUpdate("hoist",old==="fixed"))}get hoist(){return this.positioningStrategy==="fixed"}set hoist(next){this.positioningStrategy=next?"fixed":"absolute"}get rendersArrow(){return!this.withoutArrow}get activeContentSlot(){const selector=this.namedTriggerMode?'[part~="body"] slot:not([name])':'[part~="body"] slot[name="content"]';return(this.renderRoot??this.shadowRoot)?.querySelector(selector)??null}syncNamedTriggerMode(schedule=!0){const children=Array.from(this.children),hasNamedTrigger=children.some(child=>child.getAttribute("slot")==="trigger"),hasShoelaceContent=(this.content??"").length>0||children.some(child=>child.getAttribute("slot")==="content"),next=hasNamedTrigger||!hasShoelaceContent;if(next===this.namedTriggerMode)return;const old=this.namedTriggerMode;this.namedTriggerMode=next,schedule&&this.hasUpdated&&this.requestUpdate("namedTriggerMode",old)}get triggerKeywords(){return new Set(String(this.trigger??"").trim().split(/\s+/).filter(Boolean))}get isManual(){const keywords=this.triggerKeywords;return this.manual||keywords.size===0||keywords.has("manual")}opensOn(keyword){return!this.isManual&&this.triggerKeywords.has(keyword)}willUpdate(changed){super.willUpdate(changed);const direction=this.effectiveDirection;this.directionChanged=direction!==this.positioningDirection,this.positioningDirection=direction,this.syncNamedTriggerMode(!1),(changed.has("manual")||changed.has("trigger"))&&this.isManual&&this.cancelPendingTransition(),(changed.has("manual")||changed.has("trigger"))&&this.focusDescribesTrigger&&!this.opensOn("focus")&&(this.focusDescribesTrigger=!1,this.syncTriggerA11y()),changed.has("disabled")&&this.disabled&&(this.cancelPendingTransition(),this.focusDescribesTrigger&&(this.focusDescribesTrigger=!1,this.syncTriggerA11y()),this._open&&(this.hasUpdated?this.hide():this.applyOpenState(!1))),this.anchorIdentity.lostAnchorProperty(changed,this.anchor)&&this.open&&!this.resolveAnchor()&&this.forceClose(),changed.has("showDelay")&&this.delayTimer.pendingDirection==="show"&&this.requestTransition(!0),changed.has("hideDelay")&&this.delayTimer.pendingDirection==="hide"&&this.requestTransition(!1),changed.has("for")&&this.syncInteractionTrigger(),changed.has("open")&&!this.open&&(this.anchorPositioned=!1),changed.has("open")&&this.open&&(this.popupHidden=!1),(changed.has("anchor")||changed.has("for"))&&(this.anchorPositioned=!1)}updated(changed){if(super.updated(changed),(changed.has("for")||changed.has("anchor")||changed.has("open"))&&this.syncAnchorIdentityObservation(),this.directionChanged||changed.has("open")||changed.has("placement")||changed.has("distance")||changed.has("skidding")||changed.has("for")||changed.has("anchor")||changed.has("positioningStrategy")||changed.has("topLayer")||changed.has("arrow")||changed.has("withoutArrow")||changed.has("arrowPlacement")||changed.has("arrowPadding")||changed.has("interactiveContent")){if(this.cleanup?.(),this.cleanup=void 0,this.open&&this.isConnected&&this.position(),changed.has("open"))if(this.open)this.updateInteractiveContent(),this.isConnected&&this.requiresOverlayManager&&this.activateTooltipOverlay();else{this.positionedAnchor=void 0;const restoreFocus=this.restoreFocusOnClose;this.suppressTriggerFocusOpen=restoreFocus;try{this.overlayHandle?.deactivate({restoreFocus})}finally{this.suppressTriggerFocusOpen=!1}this.overlayHandle=void 0,this.restoreFocusOnClose=!1,this.virtualAnchor=void 0,this.returnFocusTo=void 0,this.syncInteractionTrigger(),this.contentSnapshot&&this.bindContentObservation(this.contentSnapshot)}else changed.has("interactiveContent")&&this.open&&this.isConnected&&(this.requiresOverlayManager?this.activateTooltipOverlay():(this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0));this.syncTriggerA11y()}(changed.has("content")||changed.has("accessibleLabel"))&&this.updateDescriptionProxy()}connectedCallback(){super.connectedCallback();const triggerSyncGeneration=++this.triggerSyncGeneration,triggerSyncDocument=this.ownerDocument;this.syncAnchorIdentityObservation(),this.ensureDescriptionProxy(),this.contentObserver?.disconnect();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;this.contentObserver=MutationObserverCtor?new MutationObserverCtor((records,observer)=>{accessibleTextRecordsMatter(observer,records)&&(this.syncNamedTriggerMode(),this.updateInteractiveContent())}):void 0,this.updateInteractiveContent(),this.syncInteractionTrigger(),this.updateComplete.then(()=>{if(triggerSyncGeneration!==this.triggerSyncGeneration||!this.isConnected||this.ownerDocument!==triggerSyncDocument)return;const slot=this.renderRoot.querySelector('[part="trigger"] > slot');this.slottedTriggerElement=slot?.assignedElements({flatten:!0})[0],this.syncInteractionTrigger()}),this.hasUpdated&&this.open&&(this.popupHidden=!1,this.position(),this.requiresOverlayManager&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateTooltipOverlay()))}disconnectedCallback(){this.triggerSyncGeneration++,this.anchorIdentity.stop(),this.cancelPendingTransition(),this.cleanup?.(),this.cleanup=void 0,this.overlayHandle?.suspend(),this.triggerElement&&this.unbindTrigger(this.triggerElement),this.releaseTriggerA11y(),this.focusDescribesTrigger=!1,this.triggerElement=void 0,this.contentObserver?.disconnect(),this.contentObserver=void 0,this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.clearContentSlotListeners(),this.cancelShadowContentScan(),this.transitionToken++,this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.popupHidden=!0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.triggerSyncGeneration++,this.anchorIdentity.stop(),this.cancelPendingTransition(),this.cancelShadowContentScan(),this.contentObserver?.disconnect(),this.contentObserver=void 0,this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.clearContentSlotListeners(),this.releaseTriggerA11y()}syncAnchorIdentityObservation(){this.anchorIdentity.stop();const directAnchor=this.open?this.anchor??void 0:void 0;this.anchorIdentity.observe(this,directAnchor,this.for,()=>this.anchor,directAnchorRemoved=>{if((this.resolveInteractionTrigger()!==this.triggerElement||this.open||this.focusDescribesTrigger)&&this.syncInteractionTrigger(),!this.open)return;const nextAnchor=this.resolveAnchor();if(directAnchorRemoved&&!nextAnchor){this.forceClose();return}nextAnchor!==this.positionedAnchor&&this.position()})}resolveInteractionTrigger(){return resolveOverlayInteractionTrigger(this,this.virtualAnchor,this.slottedTriggerElement,this.for)}syncInteractionTrigger(){const next=this.resolveInteractionTrigger();this.adoptTrigger(next)}activateTooltipOverlay(){if(!this.isConnected)return;const restoreFocusTarget=this.virtualAnchor?this.returnFocusTo??null:this.accessibleTrigger;if(this.overlayHandle?.isActive()){this.overlayHandle.updateRestoreFocusTo(restoreFocusTarget);return}this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part~="popup"]'),onEscape:()=>this.hide({restoreFocus:this.shouldRestoreFocusAfterEscape()}),restoreFocusTo:restoreFocusTarget}),this.overlayHandle.focusAutofocus()}shouldRestoreFocusAfterEscape(){if(this.virtualAnchor)return this.returnFocusTo!==void 0;const active=deepActiveElementIn(this.ownerDocument);return safelyComposedContains(this,active)}get requiresOverlayManager(){return this.open}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.activateTooltipOverlay(),this.position();return}this.show(),!this.open&&(this.virtualAnchor=previousAnchor,this.returnFocusTo=previousReturnFocusTo,this.syncInteractionTrigger())}show(){return this.cancelPendingTransition(),this.disabled||this._open?Promise.resolve():this.transitionGate.request(!0,()=>{if(this.emit("lr-show",null,{cancelable:!0}).defaultPrevented){this.syncOpenAttribute();return}return this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.applyOpenState(!0),this.settleTransition("lr-after-show")})}hide(options){return this.cancelPendingTransition(),this._open?this.transitionGate.request(!1,()=>{if(this.emit("lr-hide",null,{cancelable:!0}).defaultPrevented){this.syncOpenAttribute();return}return options?.restoreFocus&&(this.restoreFocusOnClose=!0),this.cancelTransitionAnimation(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")}):Promise.resolve()}forceClose(){return this.cancelPendingTransition(),this._open?(this.cancelTransitionAnimation(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")):Promise.resolve()}applyOpenState(next){const old=this._open;this._open=next,next||(this.cancelShadowContentScan(),this.placementPending=!1),next||(this.openedByPointer=!1),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}cancelTransitionAnimation(){this.transitionAnimation?.cancel(),this.transitionAnimation=void 0}async settleTransition(event){const token=++this.transitionToken,showing=event==="lr-after-show";return settleOverlayTransition({showing,updateComplete:()=>this.updateComplete,isCurrent:()=>this.transitionToken===token,readyToShow:async()=>{const positioned=await waitForDeferredPlacement(()=>this.cleanup);return this.transitionToken!==token||!this.open?!1:positioned?this.anchorPositioned&&!this.placementPending:(await this.forceClose(),!1)},animate:async()=>{if(!this.isConnected)return;const popup=this.renderRoot.querySelector('[part~="popup"]'),animation=popup?animateRegistered(this,popup,`tooltip.${showing?"show":"hide"}`,this.effectiveDirection,{keyframes:showing?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}],durationProperties:["--lr-transition-fast","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}):void 0;this.transitionAnimation=animation,await animation?.finished.catch(()=>{}),this.transitionToken===token&&this.cancelTransitionAnimation()},afterHide:()=>{this.removeAttribute("data-closing"),this.popupHidden=!0},settled:()=>{this.emit(event)}})}resolveAnchor(){return resolveOverlayAnchor(this,{virtualAnchor:this.virtualAnchor,anchor:this.anchor,for:this.for,trigger:this.triggerElement})}position(){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,this.placementPending=!1;return}if(anchor!==this.positionedAnchor&&(this.anchorPositioned=!1),this.open&&anchor&&popup){const arrowPadding=Math.max(0,finiteNumber(this.arrowPadding,0));this.placementPending=!0,this.placedTopLayer=syncTopLayerRelease(popup,this.placedTopLayer,this.topLayer),this.cleanup=place(anchor,popup,{placement:rtlAwarePlacement(this.placement,this),...topLayerPlacement(this.topLayer,resolveEffectivePositioningStrategy(this,this._positioningStrategy,"absolute")),offset:finiteNumber(this.distance,DEFAULT_DISTANCE),skidding:finiteNumber(this.skidding,0),arrow:this.rendersArrow&&arrowElement?arrowElement:void 0,arrowPadding,onPlaced:({placement,arrow})=>{this.placementPending=!1,this.positionedAnchor=anchor,this.anchorPositioned=!0;const side=applyOverlayArrow(arrowElement,{placement,coords:arrow,enabled:this.rendersArrow,arrowPlacement:this.arrowPlacement,arrowPadding,rtl:this.effectiveDirection==="rtl",sizeProperty:"--arrow-size",fallbackSizeProperty:"--lr-tooltip-arrow-size"});side!==this.resolvedSide&&(this.resolvedSide=side)}})}}syncTriggerA11y(){const trigger=this.triggerElement??null,proxy=this.open||this.focusDescribesTrigger?this.descriptionProxy:void 0,contribution={descriptions:proxy?[proxy]:[]};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.triggerElement?resolveAccessibleTrigger(this.triggerElement):null}releaseTriggerA11y(){this.accessibleTriggerAria?.release(),this.accessibleTriggerAria=void 0,this.triggerAria?.release(),this.triggerAria=void 0}requestTransition(next){if(this.cancelPendingTransition(),this.disabled)return;const delay=this.interactionDelay(next);if(delay<=0){next?this.show():this.hide();return}const view=this.ownerDocument.defaultView;view&&this.delayTimer.schedule(view,delay,next?"show":"hide",()=>{next?this.show():this.hide()})}interactionDelay(showing){const value=showing?this.showDelay:this.hideDelay,fallback=showing?DEFAULT_SHOW_DELAY:DEFAULT_HIDE_DELAY,attribute=showing?"show-delay":"hide-delay";if(this.hasAttribute(attribute)||value!==fallback)return finiteDuration(value,fallback);const property2=showing?"--show-delay":"--hide-delay",raw=this.ownerDocument.defaultView?.getComputedStyle(this).getPropertyValue(property2).trim()??"",token=parseCssTimeToken(raw);return token&&!token.rest?finiteDuration(token.ms,fallback):fallback}cancelPendingTransition(){this.delayTimer.cancel()}bindTrigger(trigger){trigger.addEventListener("mouseenter",this.onEnter),trigger.addEventListener("mouseleave",this.onLeave),trigger.addEventListener("focusin",this.onEnter),trigger.addEventListener("focusout",this.onLeave),trigger.addEventListener("click",this.onTriggerClick)}unbindTrigger(trigger){trigger.removeEventListener("mouseenter",this.onEnter),trigger.removeEventListener("mouseleave",this.onLeave),trigger.removeEventListener("focusin",this.onEnter),trigger.removeEventListener("focusout",this.onLeave),trigger.removeEventListener("click",this.onTriggerClick),this.focusDescribesTrigger=!1}isTriggerHeld(trigger){try{if(trigger.matches(":hover"))return!0}catch{}const active=deepActiveElementIn(trigger.ownerDocument);return safelyComposedContains(trigger,active)}adoptTrigger(next){if(next===this.triggerElement){this.syncTriggerA11y();return}const hadTrigger=this.triggerElement!==void 0;if(this.cancelPendingTransition(),this.triggerElement&&this.unbindTrigger(this.triggerElement),this.triggerElement=next,!this.triggerElement){this.syncTriggerA11y(),hadTrigger&&this.open&&!this.resolveAnchor()&&this.forceClose();return}this.bindTrigger(this.triggerElement),this.syncTriggerA11y(),hadTrigger&&this._open&&this.openedByPointer&&!this.isTriggerHeld(this.triggerElement)&&this.forceClose(),this.open&&this.position(),this.open&&this.interactiveContent&&this.activateTooltipOverlay()}isPopupTarget(target){if(target===null||target.nodeType!==1)return!1;const element=target,slot=this.activeContentSlot;return this.renderRoot.querySelector('[part~="popup"]')?.contains(element)===!0||slot?.assignedElements({flatten:!0}).some(root=>composedContains(root,element))===!0}clearContentSlotListeners(){for(const slot of this.contentSlotListeners)slot.removeEventListener("slotchange",this.onContentSlotChange);this.contentSlotListeners.clear()}syncContentSlotListeners(slots){const activeSlot=this.activeContentSlot;for(const slot of this.contentSlotListeners)slots.has(slot)&&slot!==activeSlot||(slot.removeEventListener("slotchange",this.onContentSlotChange),this.contentSlotListeners.delete(slot));for(const slot of slots)slot===activeSlot||this.contentSlotListeners.has(slot)||(slot.addEventListener("slotchange",this.onContentSlotChange),this.contentSlotListeners.add(slot))}inspectContent(){const snapshot={actionable:!1,assigned:!1,awaitingShadowRoot:!1,labelReferenceRoots:new Set,labelReferenceIds:new Set,referencedElements:new Set,text:"",externalRoots:new Set,shadowRoots:new Set,forwardingSlots:new Set,composedAncestors:new Set},activeSlot=this.activeContentSlot;if(!activeSlot)return snapshot;const renderRoot=this.renderRoot??this.shadowRoot;snapshot.assigned=activeSlot.assignedNodes().length>0;const popup=renderRoot?.querySelector('[part~="popup"]'),bypassClosedVisibility=popup?.hasAttribute("data-hidden")===!0||this.placementPending,previousVisibility=popup?.style.getPropertyValue("visibility")??"",previousVisibilityPriority=popup?.style.getPropertyPriority("visibility")??"",previousHidden=popup?.hidden??!1;if(popup&&bypassClosedVisibility){const hostVisibility=this.ownerDocument.defaultView?.getComputedStyle(this).visibility??"visible";popup.style.setProperty("visibility",hostVisibility),popup.hidden=!1}try{const visitedContentElements=new Set,elementStates=new Map,accessibilityText=composedAccessibilityTextResult(activeSlot,{shouldPruneNode:node=>{if(node.getRootNode()!==renderRoot&&!this.contains(node)&&snapshot.externalRoots.add(node),node.nodeType!==1)return!1;const element=node;return visitedContentElements.add(element),element.localName==="slot"&&snapshot.forwardingSlots.add(element),element.shadowRoot?snapshot.shadowRoots.add(element.shadowRoot):element.localName.includes("-")&&(snapshot.awaitingShadowRoot=!0),!1},onElementState:(element,state2)=>elementStates.set(element,state2)});for(const element of elementStates.keys())!visitedContentElements.has(element)&&element!==this&&snapshot.composedAncestors.add(element);for(const element of visitedContentElements){const imageMapElement=element.localName==="map"||element.localName==="area";if(imageMapElement){const image=imageMapImageFor(element);image&&snapshot.externalRoots.add(image)}if(!isActionableElement(element))continue;const state2=imageMapElement?void 0:elementStates.get(element);if(state2?.subtreeExcluded??isAccessibilitySubtreeExcluded(element))continue;(state2?.visibilityHidden??isAccessibilityVisibilityHidden(element))||(snapshot.actionable=!0)}snapshot.text=accessibilityText.text.replace(/\s+/g," ").trim();for(const root of accessibilityText.labelReferenceRoots)snapshot.labelReferenceRoots.add(root);for(const id of accessibilityText.labelReferenceIds)snapshot.labelReferenceIds.add(id);for(const reference of accessibilityText.referencedElements)snapshot.referencedElements.add(reference),snapshot.externalRoots.add(reference)}finally{popup&&bypassClosedVisibility&&(previousVisibility?popup.style.setProperty("visibility",previousVisibility,previousVisibilityPriority):popup.style.removeProperty("visibility"),popup.hidden=previousHidden)}return snapshot}observeContentNode(node){if(this.contentObserver){if(node.nodeType===3){this.contentObserver.observe(node,{characterData:!0});return}node.nodeType!==1&&node.nodeType!==11||this.contentObserver.observe(node,{attributes:!0,attributeFilter:["aria-hidden","aria-label","aria-labelledby","alt","class","contenteditable","hidden","href","inert","name","open","role","slot","style","tabindex","usemap"],childList:!0,characterData:!0,subtree:!0})}}bindContentObservation(snapshot){if(this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.isConnected&&snapshot.labelReferenceRoots.size>0){const Observer=this.ownerDocument.defaultView?.MutationObserver,cleanups=[...snapshot.labelReferenceRoots].map(root=>subscribeInheritedAttributes(root,Observer,{attributes:["id"],childList:!0,changed:records=>{labelReferenceRecordsMatter(records,snapshot.labelReferenceIds,snapshot.referencedElements)&&this.updateInteractiveContent()}}));this.stopLabelReferenceIdentityObservation=()=>{for(const cleanup of cleanups)cleanup?.()}}if(!this.contentObserver)return;const pendingRecords=this.contentObserver.takeRecords(),pendingMatter=pendingRecords.length>0&&accessibleTextRecordsMatter(this.contentObserver,pendingRecords),observer=this.contentObserver;bindAccessibleTextObserver(observer,this),pendingMatter&&queueMicrotask(()=>{this.isConnected&&this.contentObserver===observer&&this.updateInteractiveContent()}),this.observeContentNode(this);for(const root of snapshot.externalRoots)this.observeContentNode(root);for(const root of snapshot.shadowRoots)this.observeContentNode(root)}updateInteractiveContent(fromShadowContentScan=!1){fromShadowContentScan||(this.shadowContentScanAttempts=0);const snapshot=this.inspectContent();this.contentSnapshot=snapshot,this.interactiveContent=snapshot.actionable,this.syncContentSlotListeners(snapshot.forwardingSlots),this.bindContentObservation(snapshot),this.scheduleShadowContentScan(snapshot.awaitingShadowRoot),this.updateDescriptionProxy(snapshot.text,snapshot.assigned)}scheduleShadowContentScan(awaitingShadowRoot){if(this.cancelShadowContentScan(!1),!awaitingShadowRoot||!this.open||!this.isConnected||this.shadowContentScanAttempts>=MAX_SHADOW_CONTENT_SCAN_FRAMES)return;const view=this.ownerDocument.defaultView;view&&(this.shadowContentScanView=view,this.shadowContentScanFrame=view.requestAnimationFrame(()=>{this.shadowContentScanFrame=void 0,this.shadowContentScanView=void 0,this.shadowContentScanAttempts++,this.updateInteractiveContent(!0)}))}cancelShadowContentScan(resetAttempts=!0){this.shadowContentScanFrame!==void 0&&this.shadowContentScanView?.cancelAnimationFrame(this.shadowContentScanFrame),this.shadowContentScanFrame=void 0,this.shadowContentScanView=void 0,resetAttempts&&(this.shadowContentScanAttempts=0)}ensureDescriptionProxy(){this.descriptionProxy||(this.descriptionProxy=this.ownerDocument.createElement("span"),this.descriptionProxy.id=this.descriptionId,this.descriptionProxy.slot="__lr-tooltip-description",this.descriptionProxy.hidden=!0,this.descriptionProxy.dataset.lyraTooltipDescription=""),this.updateDescriptionProxy()}updateDescriptionProxy(contentText,assigned){if(!this.descriptionProxy)return;this.descriptionProxy.parentNode!==this&&this.append(this.descriptionProxy);const hostLabel=this.getAttribute("aria-label"),snapshot=contentText===void 0||assigned===void 0?this.inspectContent():void 0,visibleContent=contentText??snapshot?.text??"",hasAssignment=assigned??snapshot?.assigned??!1,description=hostLabel!==null?hostLabel.trim():(this.accessibleLabel||visibleContent||(hasAssignment?"":this.content)).trim();this.descriptionProxy.textContent!==description&&(this.descriptionProxy.textContent=description)}render(){const hostLabel=this.getAttribute("aria-label"),propertyLabel=this.accessibleLabel??"",hasExplicitLabel=hostLabel!==null||propertyLabel.length>0,label=hostLabel!==null?hostLabel:propertyLabel,popupLabel=this.interactiveContent?hasExplicitLabel?label:this.localize("popover"):hasExplicitLabel?label:nothing;return html`
|
|
1
|
+
import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{isAccessibilitySubtreeExcluded,isAccessibilityVisibilityHidden,nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{imageMapImageFor}from"../../../internal/dom-guards.js";import{deferredPlaceReady as place,syncTopLayerRelease,topLayerPlacement,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{virtualAnchorFromRect}from"../../../internal/positioner-geometry.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{deepActiveElementIn}from"../../../internal/active-element.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{parseCssTimeToken}from"../../../internal/css-motion-time.js";import{finiteDuration,finiteNumber}from"../../../internal/numbers.js";import{omittedEmptyStringConverter,optionalLiteralSetConverter}from"../../../internal/converters.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{activateNonmodalOverlay,composedContains}from"../../../internal/nonmodal-overlay-manager.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{subscribeInheritedAttributes}from"../../../internal/inherited-attribute-hub.js";import{accessibleTextRecordsMatter,bindAccessibleTextObserver,labelReferenceRecordsMatter,composedAccessibilityTextResult}from"../../../internal/accessibility-visibility.js";import{applyOverlayArrow}from"./overlay-arrow.js";import{normalizeVirtualRect,OverlayAnchorIdentity,OverlayDelayTimer,OverlayTransitionGate,resolveOverlayAnchor,resolveOverlayInteractionTrigger,settleOverlayTransition}from"./overlay-shared.js";import{tooltipStyles}from"./overlay.styles.js";import{LYRA_DEFAULT_popover}from"../../../internal/default-strings/shared.generated.js";const DEFAULT_SHOW_DELAY=150,DEFAULT_HIDE_DELAY=0,DEFAULT_DISTANCE=8,MAX_SHADOW_CONTENT_SCAN_FRAMES=4;function safelyComposedContains(container,candidate){try{return candidate?.nodeType===1&&composedContains(container,candidate)}catch{return!1}}const TOOLTIP_POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]);class LyraTooltip extends LyraElement{constructor(){super(...arguments),this._open=!1,this.trigger="hover focus",this.manual=!1,this.showDelay=150,this.hideDelay=0,this.placement="top",this.distance=8,this.skidding=0,this._for="",this.anchor=null,this.disabled=!1,this.topLayer=!1,this.withoutArrow=!1,this.arrowPlacement="anchor",this.arrowPadding=0,this.content="",this.accessibleLabel="",this.namedTriggerMode=!0,this.interactiveContent=!1,this.resolvedSide="top",this.anchorPositioned=!1,this.popupHidden=!0,this.directionChanged=!1,this.anchorIdentity=new OverlayAnchorIdentity,this.placementPending=!1,this.delayTimer=new OverlayDelayTimer,this.restoreFocusOnClose=!1,this.suppressTriggerFocusOpen=!1,this.openedByPointer=!1,this.tooltipId=nextId("tooltip"),this.descriptionId=nextId("tooltip-description"),this.focusDescribesTrigger=!1,this.triggerSyncGeneration=0,this.contentSlotListeners=new Set,this.shadowContentScanAttempts=0,this.transitionToken=0,this.transitionGate=new OverlayTransitionGate,this.onTriggerSlotChange=event=>{this.syncNamedTriggerMode();const slot=event.target;this.slottedTriggerElement=slot.assignedElements({flatten:!0})[0],this.syncInteractionTrigger()},this.onEnter=event=>{if(!this.disabled){if(event.type==="focusin"){if(this.updateInteractiveContent(),this.opensOn("focus")&&(this.focusDescribesTrigger=!0),this.contentSnapshot&&this.bindContentObservation(this.contentSnapshot),this.syncTriggerA11y(),this.suppressTriggerFocusOpen||!this.opensOn("focus")||!isKeyboardFocusEvent(event))return}else{if(this.syncTriggerA11y(),!this.opensOn("hover"))return;this.openedByPointer=!0}this.requestTransition(!0)}},this.onLeave=event=>{if(event.type==="focusout"?!this.opensOn("focus"):!this.opensOn("hover"))return;const next=event.relatedTarget;next!==null&&next.nodeType===1&&this.triggerElement&&composedContains(this.triggerElement,next)||(event.type==="focusout"&&(this.focusDescribesTrigger=!1,this.contentSnapshot&&this.bindContentObservation(this.contentSnapshot),this.syncTriggerA11y()),!(this.interactiveContent&&this.isPopupTarget(next))&&this.requestTransition(!1))},this.onTriggerClick=()=>{this.disabled||this.opensOn("click")&&(this.syncTriggerA11y(),this._open?this.hide():this.show())},this.onPopupEnter=()=>{!this.interactiveContent||this.isManual||(this.cancelPendingTransition(),this.show())},this.onPopupLeave=event=>{if(!this.interactiveContent||this.isManual)return;const next=event.relatedTarget;next!==null&&next.nodeType===1&&(this.triggerElement&&composedContains(this.triggerElement,next)||this.isPopupTarget(next))||this.requestTransition(!1)},this.onContentSlotChange=event=>{event.target?.localName==="slot"&&this.updateInteractiveContent()}}static{this.defaultStrings={...super.defaultStrings,popover:LYRA_DEFAULT_popover}}static{this.styles=[LyraElement.styles,tooltipStyles]}get open(){return this._open}set open(next){const normalized=!!next;if(normalized||this.cancelPendingTransition(),normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.hide()}}get for(){return this._for}set for(next){this._for=next??""}get positioningStrategy(){return this._positioningStrategy??"absolute"}set positioningStrategy(next){const normalized=TOOLTIP_POSITIONING_STRATEGY.normalize(next)??"absolute",old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),old==="fixed"!=(normalized==="fixed")&&this.requestUpdate("hoist",old==="fixed"))}get hoist(){return this.positioningStrategy==="fixed"}set hoist(next){this.positioningStrategy=next?"fixed":"absolute"}get rendersArrow(){return!this.withoutArrow}get activeContentSlot(){const selector=this.namedTriggerMode?'[part~="body"] slot:not([name])':'[part~="body"] slot[name="content"]';return(this.renderRoot??this.shadowRoot)?.querySelector(selector)??null}syncNamedTriggerMode(schedule=!0){const children=Array.from(this.children),hasNamedTrigger=children.some(child=>child.getAttribute("slot")==="trigger"),hasShoelaceContent=(this.content??"").length>0||children.some(child=>child.getAttribute("slot")==="content"),next=hasNamedTrigger||!hasShoelaceContent;if(next===this.namedTriggerMode)return;const old=this.namedTriggerMode;this.namedTriggerMode=next,schedule&&this.hasUpdated&&this.requestUpdate("namedTriggerMode",old)}get triggerKeywords(){return new Set(String(this.trigger??"").trim().split(/\s+/).filter(Boolean))}get isManual(){const keywords=this.triggerKeywords;return this.manual||keywords.size===0||keywords.has("manual")}opensOn(keyword){return!this.isManual&&this.triggerKeywords.has(keyword)}willUpdate(changed){super.willUpdate(changed);const direction=this.effectiveDirection;this.directionChanged=direction!==this.positioningDirection,this.positioningDirection=direction,this.syncNamedTriggerMode(!1),(changed.has("manual")||changed.has("trigger"))&&this.isManual&&this.cancelPendingTransition(),(changed.has("manual")||changed.has("trigger"))&&this.focusDescribesTrigger&&!this.opensOn("focus")&&(this.focusDescribesTrigger=!1,this.syncTriggerA11y()),changed.has("disabled")&&this.disabled&&(this.cancelPendingTransition(),this.focusDescribesTrigger&&(this.focusDescribesTrigger=!1,this.syncTriggerA11y()),this._open&&(this.hasUpdated?this.hide():this.applyOpenState(!1))),this.anchorIdentity.lostAnchorProperty(changed,this.anchor)&&this.open&&!this.resolveAnchor()&&this.forceClose(),changed.has("showDelay")&&this.delayTimer.pendingDirection==="show"&&this.requestTransition(!0),changed.has("hideDelay")&&this.delayTimer.pendingDirection==="hide"&&this.requestTransition(!1),changed.has("for")&&this.syncInteractionTrigger(),changed.has("open")&&!this.open&&(this.anchorPositioned=!1),changed.has("open")&&this.open&&(this.popupHidden=!1),(changed.has("anchor")||changed.has("for"))&&(this.anchorPositioned=!1)}updated(changed){if(super.updated(changed),(changed.has("for")||changed.has("anchor")||changed.has("open"))&&this.syncAnchorIdentityObservation(),this.directionChanged||changed.has("open")||changed.has("placement")||changed.has("distance")||changed.has("skidding")||changed.has("for")||changed.has("anchor")||changed.has("positioningStrategy")||changed.has("topLayer")||changed.has("arrow")||changed.has("withoutArrow")||changed.has("arrowPlacement")||changed.has("arrowPadding")||changed.has("interactiveContent")){if(this.cleanup?.(),this.cleanup=void 0,this.open&&this.isConnected&&this.position(),changed.has("open"))if(this.open)this.updateInteractiveContent(),this.isConnected&&this.requiresOverlayManager&&this.activateTooltipOverlay();else{this.positionedAnchor=void 0;const restoreFocus=this.restoreFocusOnClose;this.suppressTriggerFocusOpen=restoreFocus;try{this.overlayHandle?.deactivate({restoreFocus})}finally{this.suppressTriggerFocusOpen=!1}this.overlayHandle=void 0,this.restoreFocusOnClose=!1,this.virtualAnchor=void 0,this.returnFocusTo=void 0,this.syncInteractionTrigger(),this.contentSnapshot&&this.bindContentObservation(this.contentSnapshot)}else changed.has("interactiveContent")&&this.open&&this.isConnected&&(this.requiresOverlayManager?this.activateTooltipOverlay():(this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0));this.syncTriggerA11y()}(changed.has("content")||changed.has("accessibleLabel"))&&this.updateDescriptionProxy()}connectedCallback(){super.connectedCallback();const triggerSyncGeneration=++this.triggerSyncGeneration,triggerSyncDocument=this.ownerDocument;this.syncAnchorIdentityObservation(),this.ensureDescriptionProxy(),this.contentObserver?.disconnect();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;this.contentObserver=MutationObserverCtor?new MutationObserverCtor((records,observer)=>{accessibleTextRecordsMatter(observer,records)&&(this.syncNamedTriggerMode(),this.updateInteractiveContent())}):void 0,this.updateInteractiveContent(),this.syncInteractionTrigger(),this.updateComplete.then(()=>{if(triggerSyncGeneration!==this.triggerSyncGeneration||!this.isConnected||this.ownerDocument!==triggerSyncDocument)return;const slot=this.renderRoot.querySelector('[part="trigger"] > slot');this.slottedTriggerElement=slot?.assignedElements({flatten:!0})[0],this.syncInteractionTrigger()}),this.hasUpdated&&this.open&&(this.popupHidden=!1,this.position(),this.requiresOverlayManager&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateTooltipOverlay()))}disconnectedCallback(){this.triggerSyncGeneration++,this.anchorIdentity.stop(),this.cancelPendingTransition(),this.cleanup?.(),this.cleanup=void 0,this.overlayHandle?.suspend(),this.triggerElement&&this.unbindTrigger(this.triggerElement),this.releaseTriggerA11y(),this.focusDescribesTrigger=!1,this.triggerElement=void 0,this.contentObserver?.disconnect(),this.contentObserver=void 0,this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.clearContentSlotListeners(),this.cancelShadowContentScan(),this.transitionToken++,this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.popupHidden=!0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.triggerSyncGeneration++,this.anchorIdentity.stop(),this.cancelPendingTransition(),this.cancelShadowContentScan(),this.contentObserver?.disconnect(),this.contentObserver=void 0,this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.clearContentSlotListeners(),this.releaseTriggerA11y()}syncAnchorIdentityObservation(){this.anchorIdentity.stop();const directAnchor=this.open?this.anchor??void 0:void 0;this.anchorIdentity.observe(this,directAnchor,this.for,()=>this.anchor,directAnchorRemoved=>{if((this.resolveInteractionTrigger()!==this.triggerElement||this.open||this.focusDescribesTrigger)&&this.syncInteractionTrigger(),!this.open)return;const nextAnchor=this.resolveAnchor();if(directAnchorRemoved&&!nextAnchor){this.forceClose();return}nextAnchor!==this.positionedAnchor&&this.position()})}resolveInteractionTrigger(){return resolveOverlayInteractionTrigger(this,this.virtualAnchor,this.slottedTriggerElement,this.for)}syncInteractionTrigger(){const next=this.resolveInteractionTrigger();this.adoptTrigger(next)}activateTooltipOverlay(){if(!this.isConnected)return;const restoreFocusTarget=this.virtualAnchor?this.returnFocusTo??null:this.accessibleTrigger;if(this.overlayHandle?.isActive()){this.overlayHandle.updateRestoreFocusTo(restoreFocusTarget);return}this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part~="popup"]'),onEscape:()=>this.hide({restoreFocus:this.shouldRestoreFocusAfterEscape()}),restoreFocusTo:restoreFocusTarget}),this.overlayHandle.focusAutofocus()}shouldRestoreFocusAfterEscape(){if(this.virtualAnchor)return this.returnFocusTo!==void 0;const active=deepActiveElementIn(this.ownerDocument);return safelyComposedContains(this,active)}get requiresOverlayManager(){return this.open}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.activateTooltipOverlay(),this.position();return}this.show(),!this.open&&(this.virtualAnchor=previousAnchor,this.returnFocusTo=previousReturnFocusTo,this.syncInteractionTrigger())}show(){return this.cancelPendingTransition(),this.disabled||this._open?Promise.resolve():this.transitionGate.request(!0,()=>{if(this.emit("lr-show",null,{cancelable:!0}).defaultPrevented){this.syncOpenAttribute();return}return this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.applyOpenState(!0),this.settleTransition("lr-after-show")})}hide(options){return this.cancelPendingTransition(),this._open?this.transitionGate.request(!1,()=>{if(this.emit("lr-hide",null,{cancelable:!0}).defaultPrevented){this.syncOpenAttribute();return}return options?.restoreFocus&&(this.restoreFocusOnClose=!0),this.cancelTransitionAnimation(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")}):Promise.resolve()}forceClose(){return this.cancelPendingTransition(),this._open?(this.cancelTransitionAnimation(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")):Promise.resolve()}applyOpenState(next){const old=this._open;this._open=next,next||(this.cancelShadowContentScan(),this.placementPending=!1),next||(this.openedByPointer=!1),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}cancelTransitionAnimation(){this.transitionAnimation?.cancel(),this.transitionAnimation=void 0}async settleTransition(event){const token=++this.transitionToken,showing=event==="lr-after-show";return settleOverlayTransition({showing,updateComplete:()=>this.updateComplete,isCurrent:()=>this.transitionToken===token,readyToShow:async()=>{const positioned=await waitForDeferredPlacement(()=>this.cleanup);return this.transitionToken!==token||!this.open?!1:positioned?this.anchorPositioned&&!this.placementPending:(await this.forceClose(),!1)},animate:async()=>{if(!this.isConnected)return;const popup=this.renderRoot.querySelector('[part~="popup"]'),animation=popup?animateRegistered(this,popup,`tooltip.${showing?"show":"hide"}`,this.effectiveDirection,{keyframes:showing?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}],durationProperties:["--lr-transition-fast","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}):void 0;this.transitionAnimation=animation,await animation?.finished.catch(()=>{}),this.transitionToken===token&&this.cancelTransitionAnimation()},afterHide:()=>{this.removeAttribute("data-closing"),this.popupHidden=!0},settled:()=>{this.emit(event)}})}resolveAnchor(){return resolveOverlayAnchor(this,{virtualAnchor:this.virtualAnchor,anchor:this.anchor,for:this.for,trigger:this.triggerElement})}position(){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,this.placementPending=!1;return}if(anchor!==this.positionedAnchor&&(this.anchorPositioned=!1),this.open&&anchor&&popup){const arrowPadding=Math.max(0,finiteNumber(this.arrowPadding,0));this.placementPending=!0,this.placedTopLayer=syncTopLayerRelease(popup,this.placedTopLayer,this.topLayer),this.cleanup=place(anchor,popup,{placement:rtlAwarePlacement(this.placement,this),...topLayerPlacement(this.topLayer,resolveEffectivePositioningStrategy(this,this._positioningStrategy,"absolute")),offset:finiteNumber(this.distance,DEFAULT_DISTANCE),skidding:finiteNumber(this.skidding,0),arrow:this.rendersArrow&&arrowElement?arrowElement:void 0,arrowPadding,onPlaced:({placement,arrow})=>{this.placementPending=!1,this.positionedAnchor=anchor,this.anchorPositioned=!0;const side=applyOverlayArrow(arrowElement,{placement,coords:arrow,enabled:this.rendersArrow,arrowPlacement:this.arrowPlacement,arrowPadding,rtl:this.effectiveDirection==="rtl",sizeProperty:"--arrow-size",fallbackSizeProperty:"--lr-tooltip-arrow-size"});side!==this.resolvedSide&&(this.resolvedSide=side)}})}}syncTriggerA11y(){const trigger=this.triggerElement??null,proxy=this.open||this.focusDescribesTrigger?this.descriptionProxy:void 0,contribution={descriptions:proxy?[proxy]:[]};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.triggerElement?resolveAccessibleTrigger(this.triggerElement):null}releaseTriggerA11y(){this.accessibleTriggerAria?.release(),this.accessibleTriggerAria=void 0,this.triggerAria?.release(),this.triggerAria=void 0}requestTransition(next){if(this.cancelPendingTransition(),this.disabled)return;const delay=this.interactionDelay(next);if(delay<=0){next?this.show():this.hide();return}const view=this.ownerDocument.defaultView;view&&this.delayTimer.schedule(view,delay,next?"show":"hide",()=>{next?this.show():this.hide()})}interactionDelay(showing){const value=showing?this.showDelay:this.hideDelay,fallback=showing?DEFAULT_SHOW_DELAY:DEFAULT_HIDE_DELAY,attribute=showing?"show-delay":"hide-delay";if(this.hasAttribute(attribute)||value!==fallback)return finiteDuration(value,fallback);const property2=showing?"--show-delay":"--hide-delay",raw=this.ownerDocument.defaultView?.getComputedStyle(this).getPropertyValue(property2).trim()??"",token=parseCssTimeToken(raw);return token&&!token.rest?finiteDuration(token.ms,fallback):fallback}cancelPendingTransition(){this.delayTimer.cancel()}bindTrigger(trigger){trigger.addEventListener("mouseenter",this.onEnter),trigger.addEventListener("mouseleave",this.onLeave),trigger.addEventListener("focusin",this.onEnter),trigger.addEventListener("focusout",this.onLeave),trigger.addEventListener("click",this.onTriggerClick)}unbindTrigger(trigger){trigger.removeEventListener("mouseenter",this.onEnter),trigger.removeEventListener("mouseleave",this.onLeave),trigger.removeEventListener("focusin",this.onEnter),trigger.removeEventListener("focusout",this.onLeave),trigger.removeEventListener("click",this.onTriggerClick),this.focusDescribesTrigger=!1}isTriggerHeld(trigger){try{if(trigger.matches(":hover"))return!0}catch{}const active=deepActiveElementIn(trigger.ownerDocument);return safelyComposedContains(trigger,active)}adoptTrigger(next){if(next===this.triggerElement){this.syncTriggerA11y();return}const hadTrigger=this.triggerElement!==void 0;if(this.cancelPendingTransition(),this.triggerElement&&this.unbindTrigger(this.triggerElement),this.triggerElement=next,!this.triggerElement){this.syncTriggerA11y(),hadTrigger&&this.open&&!this.resolveAnchor()&&this.forceClose();return}this.bindTrigger(this.triggerElement),this.syncTriggerA11y(),hadTrigger&&this._open&&this.openedByPointer&&!this.isTriggerHeld(this.triggerElement)&&this.forceClose(),this.open&&this.position(),this.open&&this.interactiveContent&&this.activateTooltipOverlay()}isPopupTarget(target){if(target===null||target.nodeType!==1)return!1;const element=target,slot=this.activeContentSlot;return this.renderRoot.querySelector('[part~="popup"]')?.contains(element)===!0||slot?.assignedElements({flatten:!0}).some(root=>composedContains(root,element))===!0}clearContentSlotListeners(){for(const slot of this.contentSlotListeners)slot.removeEventListener("slotchange",this.onContentSlotChange);this.contentSlotListeners.clear()}syncContentSlotListeners(slots){const activeSlot=this.activeContentSlot;for(const slot of this.contentSlotListeners)slots.has(slot)&&slot!==activeSlot||(slot.removeEventListener("slotchange",this.onContentSlotChange),this.contentSlotListeners.delete(slot));for(const slot of slots)slot===activeSlot||this.contentSlotListeners.has(slot)||(slot.addEventListener("slotchange",this.onContentSlotChange),this.contentSlotListeners.add(slot))}inspectContent(){const snapshot={actionable:!1,assigned:!1,awaitingShadowRoot:!1,labelReferenceRoots:new Set,labelReferenceIds:new Set,referencedElements:new Set,text:"",externalRoots:new Set,shadowRoots:new Set,forwardingSlots:new Set,composedAncestors:new Set},activeSlot=this.activeContentSlot;if(!activeSlot)return snapshot;const renderRoot=this.renderRoot??this.shadowRoot;snapshot.assigned=activeSlot.assignedNodes().length>0;const popup=renderRoot?.querySelector('[part~="popup"]'),bypassClosedVisibility=popup?.hasAttribute("data-hidden")===!0||this.placementPending,previousVisibility=popup?.style.getPropertyValue("visibility")??"",previousVisibilityPriority=popup?.style.getPropertyPriority("visibility")??"",previousHidden=popup?.hidden??!1;if(popup&&bypassClosedVisibility){const hostVisibility=this.ownerDocument.defaultView?.getComputedStyle(this).visibility??"visible";popup.style.setProperty("visibility",hostVisibility),popup.hidden=!1}try{const visitedContentElements=new Set,elementStates=new Map,accessibilityText=composedAccessibilityTextResult(activeSlot,{shouldPruneNode:node=>{if(node.getRootNode()!==renderRoot&&!this.contains(node)&&snapshot.externalRoots.add(node),node.nodeType!==1)return!1;const element=node;return visitedContentElements.add(element),element.localName==="slot"&&snapshot.forwardingSlots.add(element),element.shadowRoot?snapshot.shadowRoots.add(element.shadowRoot):element.localName.includes("-")&&(snapshot.awaitingShadowRoot=!0),!1},onElementState:(element,state2)=>elementStates.set(element,state2)});for(const element of elementStates.keys())!visitedContentElements.has(element)&&element!==this&&snapshot.composedAncestors.add(element);for(const element of visitedContentElements){const imageMapElement=element.localName==="map"||element.localName==="area";if(imageMapElement){const image=imageMapImageFor(element);image&&snapshot.externalRoots.add(image)}if(!isActionableElement(element))continue;const state2=imageMapElement?void 0:elementStates.get(element);if(state2?.subtreeExcluded??isAccessibilitySubtreeExcluded(element))continue;(state2?.visibilityHidden??isAccessibilityVisibilityHidden(element))||(snapshot.actionable=!0)}snapshot.text=accessibilityText.text.replace(/\s+/g," ").trim();for(const root of accessibilityText.labelReferenceRoots)snapshot.labelReferenceRoots.add(root);for(const id of accessibilityText.labelReferenceIds)snapshot.labelReferenceIds.add(id);for(const reference of accessibilityText.referencedElements)snapshot.referencedElements.add(reference),snapshot.externalRoots.add(reference)}finally{popup&&bypassClosedVisibility&&(previousVisibility?popup.style.setProperty("visibility",previousVisibility,previousVisibilityPriority):popup.style.removeProperty("visibility"),popup.hidden=previousHidden)}return snapshot}observeContentNode(node){if(this.contentObserver){if(node.nodeType===3){this.contentObserver.observe(node,{characterData:!0});return}node.nodeType!==1&&node.nodeType!==11||this.contentObserver.observe(node,{attributes:!0,attributeFilter:["aria-hidden","aria-label","aria-labelledby","alt","class","contenteditable","hidden","href","inert","name","open","role","slot","style","tabindex","usemap"],childList:!0,characterData:!0,subtree:!0})}}bindContentObservation(snapshot){if(this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.isConnected&&snapshot.labelReferenceRoots.size>0){const Observer=this.ownerDocument.defaultView?.MutationObserver,cleanups=[...snapshot.labelReferenceRoots].map(root=>subscribeInheritedAttributes(root,Observer,{attributes:["id"],childList:!0,changed:records=>{labelReferenceRecordsMatter(records,snapshot.labelReferenceIds,snapshot.referencedElements)&&this.updateInteractiveContent()}}));this.stopLabelReferenceIdentityObservation=()=>{for(const cleanup of cleanups)cleanup?.()}}if(!this.contentObserver)return;const pendingRecords=this.contentObserver.takeRecords(),pendingMatter=pendingRecords.length>0&&accessibleTextRecordsMatter(this.contentObserver,pendingRecords),observer=this.contentObserver;bindAccessibleTextObserver(observer,this),pendingMatter&&queueMicrotask(()=>{this.isConnected&&this.contentObserver===observer&&this.updateInteractiveContent()}),this.observeContentNode(this);for(const root of snapshot.externalRoots)this.observeContentNode(root);for(const root of snapshot.shadowRoots)this.observeContentNode(root)}updateInteractiveContent(fromShadowContentScan=!1){fromShadowContentScan||(this.shadowContentScanAttempts=0);const snapshot=this.inspectContent();this.contentSnapshot=snapshot,this.interactiveContent=snapshot.actionable,this.syncContentSlotListeners(snapshot.forwardingSlots),this.bindContentObservation(snapshot),this.scheduleShadowContentScan(snapshot.awaitingShadowRoot),this.updateDescriptionProxy(snapshot.text,snapshot.assigned)}scheduleShadowContentScan(awaitingShadowRoot){if(this.cancelShadowContentScan(!1),!awaitingShadowRoot||!this.open||!this.isConnected||this.shadowContentScanAttempts>=MAX_SHADOW_CONTENT_SCAN_FRAMES)return;const view=this.ownerDocument.defaultView;view&&(this.shadowContentScanView=view,this.shadowContentScanFrame=view.requestAnimationFrame(()=>{this.shadowContentScanFrame=void 0,this.shadowContentScanView=void 0,this.shadowContentScanAttempts++,this.updateInteractiveContent(!0)}))}cancelShadowContentScan(resetAttempts=!0){this.shadowContentScanFrame!==void 0&&this.shadowContentScanView?.cancelAnimationFrame(this.shadowContentScanFrame),this.shadowContentScanFrame=void 0,this.shadowContentScanView=void 0,resetAttempts&&(this.shadowContentScanAttempts=0)}ensureDescriptionProxy(){this.descriptionProxy||(this.descriptionProxy=this.ownerDocument.createElement("span"),this.descriptionProxy.id=this.descriptionId,this.descriptionProxy.slot="__lr-tooltip-description",this.descriptionProxy.hidden=!0,this.descriptionProxy.dataset.lyraTooltipDescription=""),this.updateDescriptionProxy()}updateDescriptionProxy(contentText,assigned){if(!this.descriptionProxy)return;this.descriptionProxy.parentNode!==this&&this.append(this.descriptionProxy);const hostLabel=this.getAttribute("aria-label"),snapshot=contentText===void 0||assigned===void 0?this.inspectContent():void 0,visibleContent=contentText??snapshot?.text??"",hasAssignment=assigned??snapshot?.assigned??!1,description=hostLabel!==null?hostLabel.trim():(this.accessibleLabel||visibleContent||(hasAssignment?"":this.content)).trim();this.descriptionProxy.textContent!==description&&(this.descriptionProxy.textContent=description)}render(){const hostLabel=this.getAttribute("aria-label"),propertyLabel=this.accessibleLabel??"",hasExplicitLabel=hostLabel!==null||propertyLabel.length>0,label=hostLabel!==null?hostLabel:propertyLabel,popupLabel=this.interactiveContent?hasExplicitLabel?label:this.localize("popover"):hasExplicitLabel?label:nothing;return html`
|
|
2
2
|
<span part="trigger">
|
|
3
3
|
${this.namedTriggerMode?html`<slot name="trigger" @slotchange=${this.onTriggerSlotChange}></slot>`:html`<slot @slotchange=${this.onTriggerSlotChange}></slot>`}
|
|
4
4
|
</span>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{variants}from"../../../internal/variants.styles.js";import{LyraProgressBase}from"./progress-base.js";import{joinAccessibleVisibleText}from"./progress-shared.js";import{styles}from"./progress.styles.js";import{LYRA_DEFAULT_progress}from"../../../internal/default-strings.generated.js";class LyraProgressBar extends LyraProgressBase{constructor(){super(...arguments),this.size="m"}static{this.defaultStrings={...super.defaultStrings,progress:LYRA_DEFAULT_progress}}static{this.styles=[LyraElement.styles,variants,styles]}computeVisibleLabelText(){const renderRoot=this.renderRoot,renderedSlots=renderRoot?.querySelectorAll("slot"),lightDomNodes=this.childNodes,nodes=renderedSlots&&renderedSlots.length>0?[...renderedSlots].flatMap(slot=>slot.assignedNodes({flatten:!0})):Array.from(lightDomNodes??[]).filter(node=>{if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot")??"";return slotName===""||slotName==="label"}),label=renderRoot?.querySelector('[part="label"]'),hidden=label?.hidden??!1;label&&hidden&&(label.hidden=!1);try{return joinAccessibleVisibleText(nodes,{requireRendered:!1,skipRootAncestorValidation:!0})}finally{label&&hidden&&(label.hidden=!0)}}get indicatorOffset(){return this.indeterminate?65:100-this.percent}render(){const label=this.resolvedLabel,hasVisibleLabel=!!this.cachedVisibleLabelText||this.withValue;return html`<div part="base progress-bar" role="progressbar" aria-label=${label}
|
|
1
|
+
import{__decorate}from"tslib";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{variants}from"../../../internal/variants.styles.js";import{LyraProgressBase}from"./progress-base.js";import{joinAccessibleVisibleText}from"./progress-shared.js";import{styles}from"./progress.styles.js";import{LYRA_DEFAULT_progress}from"../../../internal/default-strings/shared.generated.js";class LyraProgressBar extends LyraProgressBase{constructor(){super(...arguments),this.size="m"}static{this.defaultStrings={...super.defaultStrings,progress:LYRA_DEFAULT_progress}}static{this.styles=[LyraElement.styles,variants,styles]}computeVisibleLabelText(){const renderRoot=this.renderRoot,renderedSlots=renderRoot?.querySelectorAll("slot"),lightDomNodes=this.childNodes,nodes=renderedSlots&&renderedSlots.length>0?[...renderedSlots].flatMap(slot=>slot.assignedNodes({flatten:!0})):Array.from(lightDomNodes??[]).filter(node=>{if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot")??"";return slotName===""||slotName==="label"}),label=renderRoot?.querySelector('[part="label"]'),hidden=label?.hidden??!1;label&&hidden&&(label.hidden=!1);try{return joinAccessibleVisibleText(nodes,{requireRendered:!1,skipRootAncestorValidation:!0})}finally{label&&hidden&&(label.hidden=!0)}}get indicatorOffset(){return this.indeterminate?65:100-this.percent}render(){const label=this.resolvedLabel,hasVisibleLabel=!!this.cachedVisibleLabelText||this.withValue;return html`<div part="base progress-bar" role="progressbar" aria-label=${label}
|
|
2
2
|
aria-valuemin="0" aria-valuemax=${this.safeMax} aria-valuenow=${this.progressValueNow}
|
|
3
3
|
aria-valuetext=${this.progressValueText}>
|
|
4
4
|
<div part="label" ?hidden=${!hasVisibleLabel}><slot></slot><slot name="label"></slot>${this.withValue&&!this.indeterminate?html`<span>${this.formattedPercent}</span>`:nothing}</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{html}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{variants}from"../../../internal/variants.styles.js";import{LyraProgressBase}from"./progress-base.js";import{joinAccessibleVisibleText}from"./progress-shared.js";import{ringStyles}from"./progress.styles.js";import{LYRA_DEFAULT_progress}from"../../../internal/default-strings.generated.js";class LyraProgressRing extends LyraProgressBase{constructor(){super(...arguments),this.size="m"}static{this.defaultStrings={...super.defaultStrings,progress:LYRA_DEFAULT_progress}}static{this.styles=[LyraElement.styles,variants,ringStyles]}computeVisibleLabelText(){const slots=this.renderRoot?.querySelectorAll('slot:not([name]), slot[name="label"]'),lightDomNodes=this.childNodes,nodes=slots&&slots.length>0?[...slots].flatMap(slot=>slot.assignedNodes().length>0?slot.assignedNodes({flatten:!0}):[]):Array.from(lightDomNodes??[]).filter(node=>{if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot")??"";return slotName===""||slotName==="label"});return joinAccessibleVisibleText(nodes)}get indicator(){return this.renderRoot.querySelector('[part="indicator"]')}get indicatorOffset(){const circumference=2*Math.PI*42;return this.indeterminate?circumference*.65:circumference*(1-this.percent/100)}render(){const circumference=2*Math.PI*42,offset=this.indicatorOffset,label=this.resolvedLabel;return html`<div part="base progress-ring" role="progressbar" aria-label=${label}
|
|
1
|
+
import{__decorate}from"tslib";import{html}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{variants}from"../../../internal/variants.styles.js";import{LyraProgressBase}from"./progress-base.js";import{joinAccessibleVisibleText}from"./progress-shared.js";import{ringStyles}from"./progress.styles.js";import{LYRA_DEFAULT_progress}from"../../../internal/default-strings/shared.generated.js";class LyraProgressRing extends LyraProgressBase{constructor(){super(...arguments),this.size="m"}static{this.defaultStrings={...super.defaultStrings,progress:LYRA_DEFAULT_progress}}static{this.styles=[LyraElement.styles,variants,ringStyles]}computeVisibleLabelText(){const slots=this.renderRoot?.querySelectorAll('slot:not([name]), slot[name="label"]'),lightDomNodes=this.childNodes,nodes=slots&&slots.length>0?[...slots].flatMap(slot=>slot.assignedNodes().length>0?slot.assignedNodes({flatten:!0}):[]):Array.from(lightDomNodes??[]).filter(node=>{if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot")??"";return slotName===""||slotName==="label"});return joinAccessibleVisibleText(nodes)}get indicator(){return this.renderRoot.querySelector('[part="indicator"]')}get indicatorOffset(){const circumference=2*Math.PI*42;return this.indeterminate?circumference*.65:circumference*(1-this.percent/100)}render(){const circumference=2*Math.PI*42,offset=this.indicatorOffset,label=this.resolvedLabel;return html`<div part="base progress-ring" role="progressbar" aria-label=${label}
|
|
2
2
|
aria-valuemin="0" aria-valuemax=${this.safeMax} aria-valuenow=${this.progressValueNow}
|
|
3
3
|
aria-valuetext=${this.progressValueText}>
|
|
4
4
|
<svg viewBox="0 0 100 100" aria-hidden="true">
|