@aceshooting/lyra-ui 16.0.0 → 17.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 +504 -0
- package/custom-elements.json +1 -1
- package/dist/cli/migration-contract.json +1 -1
- package/dist/components/agent-tools/browser-frame/browser-frame.class.d.ts +3 -3
- package/dist/components/agent-tools/browser-frame/browser-frame.class.js +2 -2
- package/dist/components/agent-tools/compare-panel/compare-panel.class.d.ts +2 -2
- package/dist/components/agent-tools/compare-panel/compare-panel.class.js +3 -3
- package/dist/components/agent-tools/confirm-bar/confirm-bar.class.d.ts +37 -13
- package/dist/components/agent-tools/confirm-bar/confirm-bar.class.js +2 -2
- package/dist/components/agent-tools/task-list/task-list.class.js +2 -2
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.d.ts +4 -0
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.js +2 -2
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.d.ts +3 -3
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.js +1 -1
- package/dist/components/charts/chart/chart.class.d.ts +117 -17
- package/dist/components/charts/chart/chart.class.js +3 -3
- package/dist/components/charts/chart/histogram-bin.d.ts +5 -1
- package/dist/components/charts/chart/histogram-bin.js +1 -1
- package/dist/components/charts/chart/lite-chart.class.d.ts +9 -0
- package/dist/components/conversation/code-block/code-block.styles.js +1 -1
- package/dist/components/conversation/message-actions/message-actions.styles.js +1 -1
- package/dist/components/conversation/model-select/model-select.class.d.ts +13 -4
- package/dist/components/conversation/model-select/model-select.class.js +2 -1
- package/dist/components/conversation/model-select/model-select.styles.js +1 -1
- package/dist/components/conversation/streaming-text/streaming-text-base.class.d.ts +40 -2
- package/dist/components/conversation/streaming-text/streaming-text-base.class.js +2 -2
- package/dist/components/conversation/streaming-text/streaming-text-core.class.d.ts +5 -3
- package/dist/components/conversation/streaming-text/streaming-text-core.class.js +10 -0
- package/dist/components/conversation/streaming-text/streaming-text.class.d.ts +9 -3
- package/dist/components/conversation/streaming-text/streaming-text.class.js +10 -0
- package/dist/components/conversation/suggestion-chips/suggestion-chips.class.d.ts +30 -2
- package/dist/components/conversation/suggestion-chips/suggestion-chips.class.js +4 -3
- package/dist/components/conversation/suggestion-chips/suggestion-chips.styles.js +1 -1
- package/dist/components/conversation/transcript-feed/transcript-feed.class.js +1 -1
- package/dist/components/conversation/usage-badge/usage-badge-overlay-runtime.js +1 -1
- package/dist/components/conversation/usage-badge/usage-badge.class.d.ts +4 -0
- package/dist/components/conversation/voice-picker/voice-picker.class.d.ts +16 -4
- package/dist/components/conversation/voice-picker/voice-picker.class.js +2 -1
- package/dist/components/conversation/voice-picker/voice-picker.styles.js +1 -1
- package/dist/components/data/context-meter/context-meter.class.d.ts +23 -4
- package/dist/components/data/context-meter/context-meter.class.js +10 -7
- package/dist/components/data/context-meter/context-meter.styles.js +1 -1
- package/dist/components/data/data-grid/data-grid.class.d.ts +5 -2
- package/dist/components/data/data-grid/data-grid.class.js +1 -1
- package/dist/components/data/flow-canvas/flow-canvas.class.d.ts +32 -5
- package/dist/components/data/flow-canvas/flow-canvas.class.js +3 -1
- package/dist/components/data/flow-canvas/flow-canvas.styles.js +1 -1
- package/dist/components/data/flow-canvas/flow-model.js +1 -1
- package/dist/components/data/flow-canvas/flow-types.d.ts +10 -1
- package/dist/components/data/gauge/gauge.class.d.ts +15 -2
- package/dist/components/data/gauge/gauge.class.js +20 -20
- package/dist/components/data/gauge/gauge.styles.js +1 -1
- package/dist/components/data/graph-query-builder/graph-query-builder.class.d.ts +14 -5
- package/dist/components/data/graph-query-builder/graph-query-builder.class.js +2 -2
- package/dist/components/data/sequence-strip/sequence-strip.class.d.ts +28 -2
- package/dist/components/data/sequence-strip/sequence-strip.class.js +3 -2
- package/dist/components/data/sequence-strip/sequence-strip.styles.js +1 -1
- package/dist/components/data/table/table.class.d.ts +155 -30
- package/dist/components/data/table/table.class.js +6 -4
- package/dist/components/data/table/table.styles.js +1 -1
- package/dist/components/data/timeline/timeline-item.class.d.ts +9 -1
- package/dist/components/data/timeline/timeline-item.class.js +2 -2
- package/dist/components/data/word-cloud/word-cloud.class.js +1 -1
- package/dist/components/data/word-cloud/word-cloud.styles.js +1 -1
- package/dist/components/forms/button/button.class.d.ts +30 -1
- package/dist/components/forms/button/button.class.js +2 -2
- package/dist/components/forms/checkbox/checkbox.class.d.ts +8 -6
- package/dist/components/forms/checkbox/checkbox.class.js +2 -2
- package/dist/components/forms/checkbox-group/checkbox-group.class.d.ts +7 -5
- package/dist/components/forms/checkbox-group/checkbox-group.class.js +1 -1
- package/dist/components/forms/color-picker/color-picker.class.d.ts +16 -2
- package/dist/components/forms/color-picker/color-picker.class.js +2 -2
- package/dist/components/forms/color-picker/color-picker.styles.js +1 -1
- package/dist/components/forms/combobox/combobox.class.d.ts +43 -8
- package/dist/components/forms/combobox/combobox.class.js +2 -2
- package/dist/components/forms/date-picker/date-input.class.d.ts +4 -0
- package/dist/components/forms/date-picker/date-input.class.js +1 -1
- package/dist/components/forms/icon-button/icon-button.class.d.ts +20 -3
- 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.class.d.ts +5 -2
- package/dist/components/forms/input/input.class.js +1 -1
- package/dist/components/forms/input/time-input.class.d.ts +4 -0
- package/dist/components/forms/input/time-input.class.js +1 -1
- package/dist/components/forms/locale-picker/locale-picker.class.d.ts +11 -5
- package/dist/components/forms/locale-picker/locale-picker.class.js +1 -1
- package/dist/components/forms/otp-input/otp-input.class.d.ts +7 -2
- package/dist/components/forms/otp-input/otp-input.class.js +2 -2
- package/dist/components/forms/radio/radio-button.class.d.ts +2 -1
- package/dist/components/forms/radio/radio-group.class.d.ts +9 -4
- package/dist/components/forms/radio/radio-group.class.js +1 -1
- package/dist/components/forms/radio/radio.class.d.ts +13 -7
- package/dist/components/forms/radio/radio.class.js +1 -1
- package/dist/components/forms/rubric-form/rubric-form.class.d.ts +16 -6
- package/dist/components/forms/rubric-form/rubric-form.class.js +2 -2
- package/dist/components/forms/select/select.class.d.ts +19 -8
- package/dist/components/forms/select/select.class.js +2 -2
- package/dist/components/forms/slider/slider.class.d.ts +4 -2
- package/dist/components/forms/slider/slider.class.js +1 -1
- package/dist/components/forms/switch/switch.class.d.ts +8 -6
- package/dist/components/forms/switch/switch.class.js +1 -1
- package/dist/components/forms/textarea/textarea.class.d.ts +5 -3
- package/dist/components/forms/textarea/textarea.class.js +1 -1
- package/dist/components/forms/time-range/time-range.class.d.ts +12 -7
- package/dist/components/forms/time-range/time-range.class.js +1 -1
- package/dist/components/forms/time-range/time-range.styles.js +1 -1
- package/dist/components/forms/token-input/token-input.class.d.ts +6 -4
- package/dist/components/forms/token-input/token-input.class.js +1 -1
- package/dist/components/layout/app-rail/app-rail-item.class.d.ts +109 -4
- package/dist/components/layout/app-rail/app-rail-item.class.js +34 -29
- package/dist/components/layout/app-rail/app-rail-item.styles.js +1 -1
- package/dist/components/layout/app-rail/app-rail.class.d.ts +25 -3
- package/dist/components/layout/app-rail/app-rail.styles.js +1 -1
- package/dist/components/layout/app-rail-group/app-rail-group.class.d.ts +2 -2
- package/dist/components/layout/app-rail-group/app-rail-group.class.js +2 -2
- package/dist/components/layout/carousel/carousel.class.d.ts +1 -1
- package/dist/components/layout/carousel/carousel.class.js +1 -1
- package/dist/components/layout/details/accordion.class.d.ts +2 -2
- package/dist/components/layout/details/accordion.class.js +2 -2
- package/dist/components/layout/filter-bar/filter-bar-register.d.ts +1 -0
- package/dist/components/layout/filter-bar/filter-bar-register.js +1 -0
- package/dist/components/layout/filter-bar/filter-bar.class.d.ts +85 -10
- package/dist/components/layout/filter-bar/filter-bar.class.js +7 -4
- package/dist/components/layout/menu/menu-item.class.d.ts +3 -3
- package/dist/components/layout/menu/menu-item.class.js +3 -3
- package/dist/components/layout/menu/menu.class.d.ts +5 -1
- package/dist/components/layout/menu/menu.class.js +2 -2
- package/dist/components/layout/reorder-list/reorder-item.styles.js +1 -1
- package/dist/components/layout/virtual-list/virtual-list.class.js +1 -1
- package/dist/components/media/attachment-trigger/attachment-trigger.styles.js +1 -1
- package/dist/components/media/avatar-group/avatar-group.class.d.ts +12 -1
- package/dist/components/media/avatar-group/avatar-group.class.js +2 -2
- package/dist/components/media/drop-zone/drop-zone.class.d.ts +32 -11
- package/dist/components/media/drop-zone/drop-zone.class.js +2 -2
- package/dist/components/media/file-input/file-input.class.d.ts +40 -19
- package/dist/components/media/file-input/file-input.class.js +2 -2
- package/dist/components/overlays/callout/callout.styles.js +1 -1
- package/dist/components/overlays/dialog/dialog.styles.js +1 -1
- package/dist/components/overlays/overlay/dropdown.class.d.ts +13 -3
- package/dist/components/overlays/overlay/dropdown.class.js +2 -2
- package/dist/components/overlays/overlay/popover.class.d.ts +12 -3
- package/dist/components/overlays/overlay/popover.class.js +2 -2
- package/dist/components/overlays/rating/rating.class.d.ts +9 -7
- package/dist/components/overlays/rating/rating.class.js +1 -1
- package/dist/components/retrieval/citation-badge/citation-badge.class.d.ts +5 -1
- package/dist/components/retrieval/citation-badge/citation-badge.class.js +1 -1
- package/dist/components/retrieval/embedding-explorer/embedding-explorer.styles.js +1 -1
- package/dist/components/retrieval/entity-chip/entity-chip.class.d.ts +5 -1
- package/dist/components/retrieval/entity-chip/entity-chip.class.js +1 -1
- package/dist/components/retrieval/graph-legend/graph-legend.styles.js +1 -1
- package/dist/components/retrieval/retrieval-value-format.js +1 -1
- package/dist/components/retrieval/source-list/source-list.styles.js +1 -1
- package/dist/components/utility/copy-button/copy-button.class.d.ts +23 -11
- package/dist/components/utility/copy-button/copy-button.class.js +2 -2
- package/dist/components/utility/copy-button/copy-button.styles.js +1 -1
- package/dist/components/utility/diff-view/diff-view.styles.js +1 -1
- package/dist/components/utility/export-button/export-button.class.d.ts +4 -0
- package/dist/components/utility/export-button/export-button.class.js +1 -1
- package/dist/components/utility/json-viewer/json-viewer.styles.js +1 -1
- package/dist/components/utility/known-date/known-date.class.js +1 -1
- package/dist/components/utility/mention-popover/mention-popover.class.d.ts +38 -3
- package/dist/components/utility/mention-popover/mention-popover.class.js +2 -1
- package/dist/components/utility/mention-popover/mention-popover.styles.js +1 -1
- package/dist/components/utility/poll-status/poll-status.styles.js +1 -1
- package/dist/components/utility/tour/tour.class.d.ts +4 -0
- package/dist/components/utility/tour/tour.class.js +1 -1
- package/dist/components/utility/tour/tour.styles.js +1 -1
- package/dist/components/viewers/document-preview/document-preview.class.js +2 -2
- package/dist/components/viewers/docx-viewer/docx-viewer.class.js +2 -2
- package/dist/components/viewers/ebook-viewer/ebook-viewer.class.js +2 -2
- package/dist/components/viewers/highlight-layer/highlight-layer.class.js +2 -2
- package/dist/components/viewers/notebook-viewer/notebook-viewer.class.js +2 -2
- package/dist/components/viewers/pdf-viewer/pdf-viewer.class.js +2 -2
- package/dist/components/viewers/pptx-viewer/pptx-viewer.class.js +2 -2
- package/dist/components/viewers/xml-viewer/xml-viewer.class.js +2 -2
- package/dist/custom-elements-jsx.d.ts +2 -2
- package/dist/events.d.ts +13 -12
- package/dist/internal/aggregate-file-limits.d.ts +33 -0
- package/dist/internal/aggregate-file-limits.js +1 -0
- package/dist/internal/catalog-picker.d.ts +15 -2
- package/dist/internal/catalog-picker.js +1 -1
- package/dist/internal/debounce-controller.d.ts +14 -0
- package/dist/internal/debounce-controller.js +1 -1
- package/dist/internal/default-strings.generated.d.ts +1 -1
- package/dist/internal/default-strings.generated.js +2 -2
- package/dist/internal/focus-navigation.d.ts +45 -0
- package/dist/internal/focus-navigation.js +1 -1
- package/dist/internal/form-associated.js +1 -1
- package/dist/internal/initial-slot-collection.d.ts +30 -0
- package/dist/internal/initial-slot-collection.js +1 -0
- package/dist/internal/intl-cache.js +1 -1
- package/dist/internal/invalid-event-alias.d.ts +46 -0
- package/dist/internal/invalid-event-alias.js +1 -1
- package/dist/internal/localization-runtime.d.ts +24 -0
- package/dist/internal/localization-runtime.js +1 -1
- package/dist/internal/localization-types.d.ts +1 -1
- package/dist/internal/localization.js +1 -1
- package/dist/internal/package-metadata.d.ts +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/internal/positioning-strategy.d.ts +3 -1
- package/dist/internal/state-part.d.ts +49 -0
- package/dist/internal/state-part.js +1 -0
- package/dist/internal/variants.styles.js +1 -1
- package/dist/lyra.d.ts +1 -1
- package/dist/svelte.d.ts +2 -2
- package/dist/testing/index.d.ts +1 -1
- package/dist/testing/index.js +1 -1
- package/dist/testing/lyra-tag-event-map.d.ts +2 -2
- package/dist/testing/lyra-tag-event-map.js +1 -1
- package/dist/testing/wait-for-mount.d.ts +46 -0
- package/dist/testing/wait-for-mount.js +1 -0
- package/dist/theme/theme-bootstrap.js +1 -1
- package/dist/theme/theme.d.ts +11 -2
- package/dist/theme/theme.js +1 -1
- package/dist/translations/ar/layout.js +1 -1
- package/dist/translations/de/layout.js +1 -1
- package/dist/translations/es/layout.js +1 -1
- package/dist/translations/fa/layout.js +1 -1
- package/dist/translations/fr/layout.js +1 -1
- package/dist/translations/he/layout.js +1 -1
- package/dist/translations/it/layout.js +1 -1
- package/dist/translations/ja/layout.js +1 -1
- package/dist/translations/pt-BR/layout.js +1 -1
- package/dist/translations/ru/layout.js +1 -1
- package/dist/translations/zh-CN/layout.js +1 -1
- package/dist/utilities/format.d.ts +17 -0
- package/dist/utilities/format.js +1 -1
- package/dist/vue.d.ts +2 -2
- package/llms/components/lr-app-rail-group.md +87 -10
- package/llms/components/lr-app-rail-item.md +88 -11
- package/llms/components/lr-app-rail.md +88 -11
- package/llms/components/lr-attachment-trigger.md +21 -0
- package/llms/components/lr-bar-chart.md +3 -2
- package/llms/components/lr-bubble-chart.md +3 -2
- package/llms/components/lr-callout.md +10 -0
- package/llms/components/lr-chart.md +43 -12
- package/llms/components/lr-citation-badge.md +7 -1
- package/llms/components/lr-code-block.md +21 -0
- package/llms/components/lr-color-picker.md +12 -7
- package/llms/components/lr-combobox.md +13 -1
- package/llms/components/lr-confirm-bar.md +36 -7
- package/llms/components/lr-context-meter.md +17 -4
- package/llms/components/lr-date-input.md +7 -1
- package/llms/components/lr-date-picker.md +6 -0
- package/llms/components/lr-dialog.md +21 -0
- package/llms/components/lr-doughnut-chart.md +3 -2
- package/llms/components/lr-drawer.md +10 -0
- package/llms/components/lr-drop-zone.md +16 -7
- package/llms/components/lr-dropdown-item.md +7 -0
- package/llms/components/lr-entity-chip.md +7 -1
- package/llms/components/lr-export-button.md +7 -1
- package/llms/components/lr-file-input.md +21 -10
- package/llms/components/lr-filter-bar.md +91 -15
- package/llms/components/lr-flow-canvas.md +16 -9
- package/llms/components/lr-gauge.md +22 -2
- package/llms/components/lr-histogram.md +7 -2
- package/llms/components/lr-icon-button.md +15 -7
- package/llms/components/lr-input.md +3 -1
- package/llms/components/lr-line-chart.md +3 -2
- package/llms/components/lr-lite-chart.md +13 -0
- package/llms/components/lr-locale-picker.md +7 -1
- package/llms/components/lr-mention-popover.md +16 -3
- package/llms/components/lr-menu-item.md +7 -0
- package/llms/components/lr-menu.md +8 -1
- package/llms/components/lr-message-actions.md +10 -0
- package/llms/components/lr-model-select.md +8 -3
- package/llms/components/lr-native-time-input.md +8 -1
- package/llms/components/lr-number-input.md +8 -1
- package/llms/components/lr-option.md +12 -0
- package/llms/components/lr-otp-input.md +6 -0
- package/llms/components/lr-pie-chart.md +3 -2
- package/llms/components/lr-polar-area-chart.md +3 -2
- package/llms/components/lr-prompt-input.md +2 -2
- package/llms/components/lr-radar-chart.md +3 -2
- package/llms/components/lr-reorder-item.md +12 -0
- package/llms/components/lr-reorder-list.md +12 -0
- package/llms/components/lr-scatter-chart.md +3 -2
- package/llms/components/lr-sequence-strip.md +10 -4
- package/llms/components/lr-streaming-text-core.md +21 -8
- package/llms/components/lr-streaming-text.md +34 -4
- package/llms/components/lr-suggestion-chips.md +8 -4
- package/llms/components/lr-table.md +47 -10
- package/llms/components/lr-textarea.md +1 -1
- package/llms/components/lr-time-input.md +7 -1
- package/llms/components/lr-tool-call-chip.md +7 -1
- package/llms/components/lr-tour.md +7 -1
- package/llms/components/lr-usage-badge.md +7 -1
- package/llms/components/lr-voice-picker.md +7 -3
- package/llms/shared.md +169 -16
- package/llms/tokens.md +17 -1
- package/llms-full.txt +941 -147
- package/package.json +16 -2
- package/registrations.json +1 -1
- package/vscode-css-data.json +1 -1
- package/vscode-html-data.json +1 -1
- package/web-types.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{activeElementIn}from"../../../internal/active-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{applyComposedFocusRepair,captureComposedFocusRepair,isComposedFocusAvailable}from"../../../internal/focus-navigation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{safeLinkHref}from"../../../internal/safe-url.js";import{deferredPlace as place}from"../../../internal/anchored-overlay-runtime.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{styles}from"./app-rail-item.styles.js";class LyraAppRailItem extends LyraElement{constructor(){super(...arguments),this.href="",this.target="",this.disabled=!1,this.current=!1,this.tooltip=!1,this.showTooltip=!1,this.hasEndSlot=!1,this.hasMetaSlot=!1,this.onFocusShow=event=>{if(this.tooltip&&this.hasAttribute("icon-only")&&(this.showTooltip=!0),event.type!=="focus")return;const related=event.relatedTarget;related&&related.nodeType===1&&isComposedFocusAvailable(related)&&(this.focusReturnTarget=related)},this.onBlurHide=()=>{this.showTooltip=!1},this.onEndSlotChange=event=>{this.
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{activeElementIn}from"../../../internal/active-element.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{applyComposedFocusRepair,captureComposedFocusRepair,isComposedFocusAvailable}from"../../../internal/focus-navigation.js";import{chevronIcon}from"../../../internal/icons.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{LyraElement}from"../../../internal/lyra-element.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{tag}from"../../../internal/prefix.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{safeLinkHref}from"../../../internal/safe-url.js";import{deferredPlace as place}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./app-rail-item.styles.js";import{LYRA_DEFAULT_appRailItemCollapse,LYRA_DEFAULT_appRailItemExpand}from"../../../internal/default-strings.generated.js";class LyraAppRailItem extends LyraElement{constructor(){super(...arguments),this.href="",this.target="",this.disabled=!1,this.current=!1,this.tooltip=!1,this._expanded=!1,this.toggleGuard=new VetoWriteGuard,this.showTooltip=!1,this.hasEndSlot=!1,this.hasMetaSlot=!1,this.childrenId=nextId("app-rail-item-children"),this.onToggleClick=event=>{event.stopPropagation();const next=!this._expanded;requestThenCommit({requestDetail:{open:next},emitRequest:(detail,init)=>this.emit("lr-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.expanded=next,this.emit("lr-toggle",{open:next})}})},this.onFocusShow=event=>{if(this.tooltip&&this.hasAttribute("icon-only")&&(this.showTooltip=!0),event.type!=="focus")return;const related=event.relatedTarget;related&&related.nodeType===1&&isComposedFocusAvailable(related)&&(this.focusReturnTarget=related)},this.onBlurHide=()=>{this.showTooltip=!1},this.onEndSlotChange=event=>{this.applyEndSlotPresence(event.target)},this.onMetaSlotChange=event=>{this.applyMetaSlotPresence(event.target)}}static{this.defaultStrings={...super.defaultStrings,appRailItemCollapse:LYRA_DEFAULT_appRailItemCollapse,appRailItemExpand:LYRA_DEFAULT_appRailItemExpand}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...super.observedAttributes,"icon-only"]}get expanded(){return this._expanded}set expanded(next){const old=this._expanded;this._expanded=next,markVetoGuardWrite(this.toggleGuard),this.requestUpdate("expanded",old)}get hasChildrenSlotted(){return Array.from(this.children).some(el=>el.getAttribute("slot")==="children")}connectedCallback(){super.connectedCallback(),this.armLabelObserver(),this.armChildrenObserver(),this.syncOwnedChildren()}armLabelObserver(){this.labelObserver?.disconnect();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.labelObserver=new MutationObserverCtor(()=>{this.showTooltip&&this.requestUpdate()}),this.labelObserver.observe(this,{childList:!0,characterData:!0,subtree:!0}))}armChildrenObserver(){this.childrenObserver?.disconnect();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.childrenObserver=new MutationObserverCtor(()=>{this.syncOwnedChildren(),this.requestUpdate()}),this.childrenObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]}))}syncOwnedChildren(){if(!this.isConnected)return;const iconOnly=this.hasAttribute("icon-only"),itemTag=tag("app-rail-item");for(const node of this.querySelectorAll(itemTag))(node.parentElement?.closest(itemTag)??null)===this&&node.toggleAttribute("icon-only",iconOnly)}get labelText(){return Array.from(this.childNodes).filter(node=>{if(node.nodeType===3)return!0;if(node.nodeType!==1)return!1;const slot=node.getAttribute("slot");return slot!=="icon"&&slot!=="children"}).map(n=>n.textContent??"").join("").trim()}get tooltipText(){return hostAriaLabel(this)??(this.labelText||"")}applyEndSlotPresence(slot){this.hasEndSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")}applyMetaSlotPresence(slot){this.hasMetaSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")}attributeChangedCallback(name,oldValue,newValue){super.attributeChangedCallback(name,oldValue,newValue),!(name!=="icon-only"||oldValue===newValue)&&(newValue===null&&(this.showTooltip=!1),this.syncOwnedChildren(),this.requestUpdate())}firstUpdated(changed){super.firstUpdated(changed);const metaSlot=this.metaSlot,endSlot=this.endSlot;queueMicrotask(()=>{collectInitialSlotAssignment(metaSlot,s=>this.applyMetaSlotPresence(s)),collectInitialSlotAssignment(endSlot,s=>this.applyEndSlotPresence(s))})}willUpdate(changed){if(super.willUpdate(changed),changed.has("tooltip")&&!this.tooltip&&(this.showTooltip=!1),changed.has("href")||changed.has("disabled")){const previous=this.renderRoot?.querySelector('[part="base"]')??null,nextIsLink=!!safeLinkHref(this.href)&&!this.disabled,ownerReplaced=previous!==null&&previous.localName==="a"!==nextIsLink;this.semanticFocusRepair=ownerReplaced&&activeElementIn(this.shadowRoot)===previous?captureComposedFocusRepair(this,this.focusFallback()??previous)??void 0:void 0}}updated(changed){super.updated(changed);const focusRepair=this.semanticFocusRepair;this.semanticFocusRepair=void 0,focusRepair&&this.scheduleAfterUpdate(()=>{const replacement=this.renderRoot.querySelector('[part="base"]'),target=replacement&&isComposedFocusAvailable(replacement)?replacement:this.focusFallback();applyComposedFocusRepair(focusRepair,target)},"app-rail-item-owner-focus");const popup=this.renderRoot.querySelector('[part="tooltip"]');if(!popup){this.stopPositioning?.(),this.stopPositioning=void 0;return}if(changed.has("showTooltip")||!this.stopPositioning){this.stopPositioning?.();const anchor=this.renderRoot.querySelector('[part="base"]');this.stopPositioning=place(anchor,popup,{placement:rtlAwarePlacement("right",this),strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")})}}disconnectedCallback(){super.disconnectedCallback(),this.semanticFocusRepair=void 0,this.focusReturnTarget=void 0,this.labelObserver?.disconnect(),this.labelObserver=void 0,this.childrenObserver?.disconnect(),this.childrenObserver=void 0,this.stopPositioning?.(),this.stopPositioning=void 0,this.showTooltip=!1}focusFallback(){if(this.focusReturnTarget&&isComposedFocusAvailable(this.focusReturnTarget))return this.focusReturnTarget;const owner=this.closest("lr-app-rail")?.shadowRoot?.querySelector('[part~="base"], [part~="panel"]')??null;return owner&&isComposedFocusAvailable(owner)?owner:null}click(){this.disabled||this.renderRoot.querySelector('[part~="base"]')?.click()}render(){const label=hostAriaLabel(this),href=safeLinkHref(this.href),content=html`
|
|
2
2
|
${this.current?html`<span part="current-indicator" aria-hidden="true"></span>`:nothing}
|
|
3
3
|
${renderInertPresentation(html`<slot name="icon"></slot>`,{part:"icon"})}
|
|
4
4
|
<span part="label"><slot></slot></span>
|
|
@@ -6,31 +6,36 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
6
6
|
><slot name="meta" @slotchange=${this.onMetaSlotChange}></slot></span
|
|
7
7
|
><span part="end" ?hidden=${!this.hasEndSlot}
|
|
8
8
|
><slot name="end" @slotchange=${this.onEndSlotChange}></slot></span
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
9
|
+
>`,hasChildren=this.hasChildrenSlotted,toggle=hasChildren?html`<button
|
|
10
|
+
part="toggle"
|
|
11
|
+
type="button"
|
|
12
|
+
aria-expanded=${this._expanded?"true":"false"}
|
|
13
|
+
aria-controls=${this.childrenId}
|
|
14
|
+
aria-label=${this.localize(this._expanded?"appRailItemCollapse":"appRailItemExpand",void 0,{label:this.tooltipText})}
|
|
15
|
+
@click=${this.onToggleClick}
|
|
16
|
+
><span part="toggle-icon" aria-hidden="true">${chevronIcon()}</span></button>`:nothing,childrenList=hasChildren?html`<span part="children" id=${this.childrenId} ?hidden=${!this._expanded}
|
|
17
|
+
><slot name="children"></slot
|
|
18
|
+
></span>`:nothing,row=href&&!this.disabled?html`<a
|
|
19
|
+
part="base"
|
|
20
|
+
href=${href}
|
|
21
|
+
target=${this.target||nothing}
|
|
22
|
+
rel=${this.target?"noopener noreferrer":nothing}
|
|
23
|
+
aria-label=${label??nothing}
|
|
24
|
+
aria-disabled="false"
|
|
25
|
+
aria-current=${this.current?"page":"false"}
|
|
26
|
+
@mouseenter=${this.onFocusShow}
|
|
27
|
+
@mouseleave=${this.onBlurHide}
|
|
28
|
+
@focus=${this.onFocusShow}
|
|
29
|
+
@blur=${this.onBlurHide}
|
|
30
|
+
>${content}</a>${adornments}${toggle}${tooltip}`:html`<button
|
|
31
|
+
part="base"
|
|
32
|
+
type="button"
|
|
33
|
+
?disabled=${this.disabled}
|
|
34
|
+
aria-disabled=${this.disabled?"true":"false"}
|
|
35
|
+
aria-label=${label??nothing}
|
|
36
|
+
aria-current=${this.current?"page":"false"}
|
|
37
|
+
@mouseenter=${this.onFocusShow}
|
|
38
|
+
@mouseleave=${this.onBlurHide}
|
|
39
|
+
@focus=${this.onFocusShow}
|
|
40
|
+
@blur=${this.onBlurHide}
|
|
41
|
+
>${content}</button>${adornments}${toggle}${tooltip}`;return html`<div class="row">${row}</div>${childrenList}`}}__decorate([property()],LyraAppRailItem.prototype,"href",void 0),__decorate([property()],LyraAppRailItem.prototype,"target",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailItem.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailItem.prototype,"current",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailItem.prototype,"tooltip",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailItem.prototype,"expanded",null),__decorate([state()],LyraAppRailItem.prototype,"showTooltip",void 0),__decorate([state()],LyraAppRailItem.prototype,"hasEndSlot",void 0),__decorate([state()],LyraAppRailItem.prototype,"hasMetaSlot",void 0),__decorate([query('slot[name="meta"]')],LyraAppRailItem.prototype,"metaSlot",void 0),__decorate([query('slot[name="end"]')],LyraAppRailItem.prototype,"endSlot",void 0);export{LyraAppRailItem};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{align-items:center;gap:var(--lr-app-rail-item-gap,var(--lr-space-s));inline-size:100%;display:flex}[part=base]{justify-content:flex-start;align-items:center;gap:var(--lr-app-rail-item-gap,var(--lr-space-s));inline-size:100%;min-inline-size:0;min-block-size:max(var(--lr-icon-button-size), var(--lr-app-rail-item-min-block-size,var(--lr-icon-button-size)));padding:var(--lr-app-rail-item-padding,var(--lr-space-s));border-radius:var(--lr-radius);color:var(--lr-color-text);font:inherit;font-size:var(--lr-app-rail-item-font-size,inherit);text-align:start;cursor:pointer;transition:background-color var(--lr-transition-fast), color var(--lr-transition-fast);background:0 0;border:0;flex:auto;text-decoration:none;display:flex;position:relative}[part=base]:not([aria-disabled=true]):hover{background:var(--lr-app-rail-item-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-item-hover-color,var(--lr-color-brand))}[part=base]:not([aria-disabled=true]):active{background:var(--lr-app-rail-item-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-app-rail-item-active-color,var(--lr-color-brand))}[part=base]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=base][aria-disabled=true]{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=base][aria-current=page]{background:var(--lr-app-rail-item-current-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-item-current-color,var(--lr-color-brand));font-weight:var(--lr-app-rail-item-current-font-weight,var(--lr-font-weight-semibold))}[part=current-indicator]{inset-block:0;inset-inline:var(--lr-app-rail-item-current-indicator-inset-inline,0 auto);inline-size:var(--lr-app-rail-item-current-indicator-width,var(--lr-size-2px));box-sizing:border-box;border-radius:var(--lr-radius-xs);background:var(--lr-app-rail-item-current-indicator-color,var(--lr-color-brand));pointer-events:none;z-index:var(--lr-layer-content);position:absolute}[part=icon]{inline-size:var(--lr-app-rail-item-icon-size,var(--lr-icon-button-size));min-inline-size:var(--lr-app-rail-item-icon-size,var(--lr-icon-button-size));flex:none;justify-content:center;align-items:center;display:inline-flex}[part=meta],[part=end]{flex:none;align-items:center;display:inline-flex}[part=meta][hidden],[part=end][hidden]{display:none}[part=meta]{color:var(--lr-app-rail-item-meta-color,var(--lr-color-text-quiet));font-size:var(--lr-app-rail-item-meta-font-size,var(--lr-font-size-sm))}[part=label]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}:host([icon-only]) [part=label]{inline-size:var(--lr-size-1px);block-size:var(--lr-size-1px);margin:var(--lr-size-neg-1px);clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;padding:0;position:absolute;overflow:hidden}:host([icon-only]) [part=base]{aspect-ratio:1;flex:none;justify-content:center;
|
|
1
|
+
import{css}from"lit";const styles=css`:host{gap:var(--lr-app-rail-item-gap,var(--lr-space-s));flex-direction:column;inline-size:100%;display:flex}.row{align-items:center;gap:var(--lr-app-rail-item-gap,var(--lr-space-s));inline-size:100%;display:flex}[part=base]{justify-content:flex-start;align-items:center;gap:var(--lr-app-rail-item-gap,var(--lr-space-s));inline-size:100%;min-inline-size:0;min-block-size:max(var(--lr-icon-button-size), var(--lr-app-rail-item-min-block-size,var(--lr-icon-button-size)));padding:var(--lr-app-rail-item-padding,var(--lr-space-s));border-radius:var(--lr-radius);color:var(--lr-color-text);font:inherit;font-size:var(--lr-app-rail-item-font-size,inherit);text-align:start;cursor:pointer;transition:background-color var(--lr-transition-fast), color var(--lr-transition-fast);background:0 0;border:0;flex:auto;text-decoration:none;display:flex;position:relative}[part=base]:not([aria-disabled=true]):hover{background:var(--lr-app-rail-item-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-item-hover-color,var(--lr-color-brand))}[part=base]:not([aria-disabled=true]):active{background:var(--lr-app-rail-item-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-app-rail-item-active-color,var(--lr-color-brand))}[part=base]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=base][aria-disabled=true]{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=base][aria-current=page]{background:var(--lr-app-rail-item-current-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-item-current-color,var(--lr-color-brand));font-weight:var(--lr-app-rail-item-current-font-weight,var(--lr-font-weight-semibold));box-shadow:var(--lr-app-rail-item-current-ring,none)}[part=current-indicator]{inset-block:0;inset-inline:var(--lr-app-rail-item-current-indicator-inset-inline,0 auto);inline-size:var(--lr-app-rail-item-current-indicator-width,var(--lr-size-2px));box-sizing:border-box;border-radius:var(--lr-radius-xs);background:var(--lr-app-rail-item-current-indicator-color,var(--lr-color-brand));pointer-events:none;z-index:var(--lr-layer-content);position:absolute}[part=icon]{inline-size:var(--lr-app-rail-item-icon-size,var(--lr-icon-button-size));min-inline-size:var(--lr-app-rail-item-icon-size,var(--lr-icon-button-size));flex:none;justify-content:center;align-items:center;display:inline-flex}[part=meta],[part=end]{flex:none;align-items:center;display:inline-flex}[part=meta][hidden],[part=end][hidden]{display:none}[part=meta]{color:var(--lr-app-rail-item-meta-color,var(--lr-color-text-quiet));font-size:var(--lr-app-rail-item-meta-font-size,var(--lr-font-size-sm))}[part=label]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}:host([icon-only]) [part=label]{inline-size:var(--lr-size-1px);block-size:var(--lr-size-1px);margin:var(--lr-size-neg-1px);clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;padding:0;position:absolute;overflow:hidden}:host([icon-only]) [part=base]{inline-size:var(--lr-app-rail-item-icon-only-size,auto);block-size:var(--lr-app-rail-item-icon-only-size,auto);min-block-size:var(--lr-app-rail-item-icon-only-size,max(var(--lr-icon-button-size), var(--lr-app-rail-item-min-block-size,var(--lr-icon-button-size))));aspect-ratio:1;flex:none;justify-content:center;padding-inline:0}:host([icon-only]) .row{justify-content:center}:host([icon-only]) [part=current-indicator]{display:var(--lr-app-rail-item-current-indicator-display,none)}:host([icon-only]) [part=base][aria-current=page]{box-shadow:var(--lr-app-rail-item-current-ring,inset 0 0 0 var(--lr-border-width-thin) var(--lr-app-rail-item-current-indicator-color,var(--lr-color-brand)))}:host([icon-only]) [part=meta]{inline-size:var(--lr-size-1px);block-size:var(--lr-size-1px);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;overflow:hidden}[part=toggle]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);aspect-ratio:1;border-radius:var(--lr-radius);color:inherit;font:inherit;cursor:pointer;transition:background-color var(--lr-transition-fast), color var(--lr-transition-fast);background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:flex}[part=toggle]:hover{background:var(--lr-app-rail-item-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-item-hover-color,var(--lr-color-brand))}[part=toggle]:active{background:var(--lr-app-rail-item-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-app-rail-item-active-color,var(--lr-color-brand))}[part=toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=toggle-icon]{transition:transform var(--lr-transition-fast);flex:none;display:inline-flex;transform:rotate(90deg)}[part=toggle]:where([aria-expanded=false]) [part=toggle-icon]{transform:none}:host(:dir(rtl)) [part=toggle]:where([aria-expanded=false]) [part=toggle-icon]{transform:rotate(180deg)}[part=children]{gap:var(--lr-app-rail-item-gap,var(--lr-space-s));flex-direction:column;inline-size:100%;padding-inline-start:var(--lr-app-rail-item-indent,var(--lr-space-l));display:flex}[part=children][hidden]{display:none}@media (prefers-reduced-motion:reduce){[part=toggle],[part=toggle-icon]{transition:none!important}}[part=tooltip]{z-index:var(--lr-layer-dropdown);padding:var(--lr-size-0-25rem) var(--lr-space-s);border-radius:var(--lr-radius);background:var(--lr-color-text);color:var(--lr-color-surface);font-size:var(--lr-font-size-sm);box-sizing:border-box;max-inline-size:var(--lr-positioner-available-inline-size,calc(100vw - 2 * var(--lr-space-s)));overflow-wrap:anywhere;white-space:normal;pointer-events:none;position:fixed}`;export{styles};
|
|
@@ -140,9 +140,27 @@ export declare function computeAppRailMode(iconOnlyMatches:boolean,mobileMatches
|
|
|
140
140
|
* @cssprop [--lr-app-rail-panel-inset-block-start=0] - Block-start (top) inset shared by
|
|
141
141
|
* `[part="panel"]` and `[part="backdrop"]` -- raise it to leave room for a fixed app bar/status
|
|
142
142
|
* area above the drawer instead of the panel/scrim starting flush with the viewport top.
|
|
143
|
-
* @cssprop [--lr-app-rail-panel-radius=0] -
|
|
144
|
-
* reproduces today's flush-edged drawer; pairs naturally with a nonzero
|
|
145
|
-
* `--lr-app-rail-panel-inset-block-start`, which exposes the panel's top corners.
|
|
143
|
+
* @cssprop [--lr-app-rail-panel-radius=0] - Uniform corner radius of `[part="panel"]`. `0` (the
|
|
144
|
+
* default) reproduces today's flush-edged drawer; pairs naturally with a nonzero
|
|
145
|
+
* `--lr-app-rail-panel-inset-block-start`, which exposes the panel's top corners. Each per-corner
|
|
146
|
+
* token below defaults to this one, so setting only this token still rounds all four corners
|
|
147
|
+
* uniformly, exactly as before the per-corner tokens existed.
|
|
148
|
+
* @cssprop [--lr-app-rail-panel-radius-start-start=var(--lr-app-rail-panel-radius)] - Logical
|
|
149
|
+
* `border-start-start-radius` of `[part="panel"]` -- the corner at the drawer's own flush
|
|
150
|
+
* inline-start edge, block-start side.
|
|
151
|
+
* @cssprop [--lr-app-rail-panel-radius-start-end=var(--lr-app-rail-panel-radius)] - Logical
|
|
152
|
+
* `border-start-end-radius` of `[part="panel"]` -- the corner away from the flush inline-start
|
|
153
|
+
* edge, block-start side. One of the two corners a flush-against-one-edge drawer typically
|
|
154
|
+
* rounds.
|
|
155
|
+
* @cssprop [--lr-app-rail-panel-radius-end-start=var(--lr-app-rail-panel-radius)] - Logical
|
|
156
|
+
* `border-end-start-radius` of `[part="panel"]` -- the corner at the drawer's own flush
|
|
157
|
+
* inline-start edge, block-end side.
|
|
158
|
+
* @cssprop [--lr-app-rail-panel-radius-end-end=var(--lr-app-rail-panel-radius)] - Logical
|
|
159
|
+
* `border-end-end-radius` of `[part="panel"]` -- the corner away from the flush inline-start
|
|
160
|
+
* edge, block-end side. The other corner a flush-against-one-edge drawer typically rounds. All
|
|
161
|
+
* four per-corner tokens are logical, so which physical corner each one paints swaps under
|
|
162
|
+
* `dir="rtl"` with no second consumer rule -- the panel's own flush edge stays its logical
|
|
163
|
+
* inline-start regardless of direction.
|
|
146
164
|
* @cssprop [--lr-app-rail-panel-overflow-block=auto] - `[part="panel"]`'s logical
|
|
147
165
|
* `overflow-block`, paired with `--lr-app-rail-panel-overflow-inline` below.
|
|
148
166
|
* @cssprop [--lr-app-rail-panel-overflow-inline=clip] - `[part="panel"]`'s logical
|
|
@@ -163,6 +181,10 @@ export declare function computeAppRailMode(iconOnlyMatches:boolean,mobileMatches
|
|
|
163
181
|
* is deliberately themed as a modal surface, not the docked rail chrome.
|
|
164
182
|
* @cssprop [--lr-app-rail-header-padding=var(--lr-space-m)] - `[part="header"]`'s padding.
|
|
165
183
|
* @cssprop [--lr-app-rail-footer-padding=var(--lr-space-m)] - `[part="footer"]`'s padding.
|
|
184
|
+
* @cssprop [--lr-app-rail-nav-padding=var(--lr-space-s)] - `[part="nav"]`'s padding, unset
|
|
185
|
+
* reproducing the value this rule hard-coded before the token existed.
|
|
186
|
+
* @cssprop [--lr-app-rail-nav-gap=var(--lr-space-xs)] - Gap between slotted items inside
|
|
187
|
+
* `[part="nav"]`, unset reproducing the value this rule hard-coded before the token existed.
|
|
166
188
|
* @cssprop [--lr-app-rail-header-min-block-size=auto] - `[part="header"]`'s minimum block size.
|
|
167
189
|
* `auto` (the default) is the property's own initial value, so unset reproduces today's exact
|
|
168
190
|
* height; set it to reserve room for header content that mounts or resizes asynchronously.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{--_lr-app-rail-width:var(--lr-size-15rem);--_lr-app-rail-icon-width:var(--lr-size-4rem);--_lr-app-rail-mobile-width:var(--lr-size-18rem);--_lr-app-rail-overlay-color:var(--lr-color-overlay);display:block;position:relative}[part=toggle]{font:inherit;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;justify-content:center;align-items:center;display:none}:host([mode=mobile]) [part=toggle]{display:inline-flex}:host([hide-toggle][mode=mobile]) [part=toggle]{display:none}:host([mode=mobile][open]) [part=toggle]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 2);position:relative}[part=panel]>[part=toggle]{flex:none;align-self:flex-end;margin-block-start:var(--lr-space-s);margin-inline-end:var(--lr-space-s)}:host([hide-toggle][mode=mobile]) [part=panel]>[part=toggle]{display:inline-flex}[part=toggle]:hover{background:var(--lr-app-rail-toggle-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-toggle-hover-color,var(--lr-color-brand))}[part=toggle]:active{background:var(--lr-app-rail-toggle-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-app-rail-toggle-active-color,var(--lr-color-brand))}[part=toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=backdrop]{z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));background:var(--lr-app-rail-overlay-color,var(--_lr-app-rail-overlay-color));position:fixed;inset-block-start:var(--lr-app-rail-panel-inset-block-start,0);inset-block-end:0;inset-inline:0}[part=base]{inline-size:var(--lr-app-rail-width,var(--_lr-app-rail-width));border-inline-end:var(--lr-border-width-thin) solid var(--lr-color-border);background:var(--lr-app-rail-background,var(--lr-color-surface));block-size:100%;transition:inline-size var(--lr-transition-base);flex-direction:column;padding-block-end:var(--lr-safe-area-bottom);display:flex;position:relative;overflow:clip auto}:host([mode=icon-only]) [part=base]{inline-size:var(--lr-app-rail-icon-width,var(--_lr-app-rail-icon-width))}:host([dragging]) [part=base]{transition:none}[part=resizer]{inline-size:var(--lr-icon-button-size);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);cursor:col-resize;touch-action:none;background:0 0;justify-content:center;align-items:stretch;display:flex;position:absolute;inset-block:0;inset-inline-end:calc(var(--lr-icon-button-size) * -.5)}[part=resizer-track]{inline-size:var(--lr-size-3px);transition:background-color var(--lr-transition-fast);background:0 0}[part=resizer]:hover [part=resizer-track]{background:var(--lr-app-rail-resizer-hover-bg,var(--lr-color-brand))}[part=resizer]:active [part=resizer-track]{background:var(--lr-app-rail-resizer-active-bg,color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=resizer]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=panel]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 1);inline-size:min(var(--lr-app-rail-mobile-width,var(--_lr-app-rail-mobile-width)), 85vw);
|
|
1
|
+
import{css}from"lit";const styles=css`:host{--_lr-app-rail-width:var(--lr-size-15rem);--_lr-app-rail-icon-width:var(--lr-size-4rem);--_lr-app-rail-mobile-width:var(--lr-size-18rem);--_lr-app-rail-overlay-color:var(--lr-color-overlay);display:block;position:relative}[part=toggle]{font:inherit;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;justify-content:center;align-items:center;display:none}:host([mode=mobile]) [part=toggle]{display:inline-flex}:host([hide-toggle][mode=mobile]) [part=toggle]{display:none}:host([mode=mobile][open]) [part=toggle]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 2);position:relative}[part=panel]>[part=toggle]{flex:none;align-self:flex-end;margin-block-start:var(--lr-space-s);margin-inline-end:var(--lr-space-s)}:host([hide-toggle][mode=mobile]) [part=panel]>[part=toggle]{display:inline-flex}[part=toggle]:hover{background:var(--lr-app-rail-toggle-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-toggle-hover-color,var(--lr-color-brand))}[part=toggle]:active{background:var(--lr-app-rail-toggle-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-app-rail-toggle-active-color,var(--lr-color-brand))}[part=toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=backdrop]{z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));background:var(--lr-app-rail-overlay-color,var(--_lr-app-rail-overlay-color));position:fixed;inset-block-start:var(--lr-app-rail-panel-inset-block-start,0);inset-block-end:0;inset-inline:0}[part=base]{inline-size:var(--lr-app-rail-width,var(--_lr-app-rail-width));border-inline-end:var(--lr-border-width-thin) solid var(--lr-color-border);background:var(--lr-app-rail-background,var(--lr-color-surface));block-size:100%;transition:inline-size var(--lr-transition-base);flex-direction:column;padding-block-end:var(--lr-safe-area-bottom);display:flex;position:relative;overflow:clip auto}:host([mode=icon-only]) [part=base]{inline-size:var(--lr-app-rail-icon-width,var(--_lr-app-rail-icon-width))}:host([dragging]) [part=base]{transition:none}[part=resizer]{inline-size:var(--lr-icon-button-size);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);cursor:col-resize;touch-action:none;background:0 0;justify-content:center;align-items:stretch;display:flex;position:absolute;inset-block:0;inset-inline-end:calc(var(--lr-icon-button-size) * -.5)}[part=resizer-track]{inline-size:var(--lr-size-3px);transition:background-color var(--lr-transition-fast);background:0 0}[part=resizer]:hover [part=resizer-track]{background:var(--lr-app-rail-resizer-hover-bg,var(--lr-color-brand))}[part=resizer]:active [part=resizer-track]{background:var(--lr-app-rail-resizer-active-bg,color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=resizer]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=panel]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 1);inline-size:min(var(--lr-app-rail-mobile-width,var(--_lr-app-rail-mobile-width)), 85vw);background:var(--lr-app-rail-panel-background,var(--lr-color-surface-overlay));box-shadow:var(--lr-shadow-l);overflow-block:var(--lr-app-rail-panel-overflow-block,auto);overflow-inline:var(--lr-app-rail-panel-overflow-inline,clip);transition:transform var(--lr-transition-base);border-start-start-radius:var(--lr-app-rail-panel-radius-start-start,var(--lr-app-rail-panel-radius,0));border-start-end-radius:var(--lr-app-rail-panel-radius-start-end,var(--lr-app-rail-panel-radius,0));border-end-end-radius:var(--lr-app-rail-panel-radius-end-end,var(--lr-app-rail-panel-radius,0));border-end-start-radius:var(--lr-app-rail-panel-radius-end-start,var(--lr-app-rail-panel-radius,0));flex-direction:column;padding-block-end:var(--lr-safe-area-bottom);display:flex;position:fixed;inset-block-start:var(--lr-app-rail-panel-inset-block-start,0);inset-block-end:0;inset-inline-start:0;transform:translate(-100%)}:host(:dir(rtl)) [part=panel]{transform:translate(100%)}:host([mode=mobile][open]) [part=panel]{transform:none}[part=header]{padding:var(--lr-app-rail-header-padding,var(--lr-space-m));min-block-size:var(--lr-app-rail-header-min-block-size,auto);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border)}[part=header][hidden]{display:none}:host([collapsible]:not([mode=mobile])) [part=header]{align-items:center;gap:var(--lr-space-s);display:flex}:host([collapsible][mode=icon-only]) [part=header]{justify-content:center}[part=collapse-toggle]{font:inherit;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius);color:var(--lr-color-text);cursor:pointer;transition:var(--lr-transition-interactive);background:0 0;border:0;flex:none;justify-content:center;align-items:center;margin-inline-start:auto;padding:0;display:inline-flex}:host([collapsible][mode=icon-only]) [part=collapse-toggle]{margin-inline-start:0}[part=collapse-toggle]:hover{background:var(--lr-app-rail-collapse-toggle-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-collapse-toggle-hover-color,var(--lr-color-brand))}[part=collapse-toggle]:active{background:var(--lr-app-rail-collapse-toggle-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-app-rail-collapse-toggle-active-color,var(--lr-color-brand))}[part=collapse-toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=collapse-icon]{display:inline-flex;transform:rotate(180deg)}[part=collapse-toggle]:where([aria-expanded=false]) [part=collapse-icon],:host(:dir(rtl)) [part=collapse-icon]{transform:none}:host(:dir(rtl)) [part=collapse-toggle]:where([aria-expanded=false]) [part=collapse-icon]{transform:rotate(180deg)}[part=footer]{padding:var(--lr-app-rail-footer-padding,var(--lr-space-m));border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border)}[part=footer][hidden]{display:none}[part=nav]{padding:var(--lr-app-rail-nav-padding,var(--lr-space-s));gap:var(--lr-app-rail-nav-gap,var(--lr-space-xs));flex-direction:column;flex:auto;display:flex;overflow:clip auto}:host([mode=icon-only]) [part=nav]{align-items:center}:host([mode=icon-only]) ::slotted(lr-app-rail-item){max-inline-size:var(--lr-app-rail-icon-width,var(--_lr-app-rail-icon-width))}@media (prefers-reduced-motion:reduce){[part=base],[part=panel],[part=collapse-toggle],[part=resizer-track]{transition:none!important}}`;export{styles};
|
|
@@ -98,7 +98,7 @@ collapsible:boolean;
|
|
|
98
98
|
* `trueDefaultBooleanConverter`: Lit's presence-based boolean converter cannot parse
|
|
99
99
|
* `open="false"`, so without it the property would be unsettable from markup.
|
|
100
100
|
* @default true */
|
|
101
|
-
get open():boolean;set open(next:boolean);private _open;private readonly toggleGuard;private hasHeadingSlot;private hasHeaderActionsSlot;private readonly headingId;private readonly contentId;private get safeHeadingLevel();connectedCallback():void;attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;protected updated(changed:PropertyValues):void;
|
|
101
|
+
get open():boolean;set open(next:boolean);private _open;private readonly toggleGuard;private hasHeadingSlot;private hasHeaderActionsSlot;private headingSlot?;private headerActionsSlot?;private readonly headingId;private readonly contentId;private get safeHeadingLevel();connectedCallback():void;attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;protected updated(changed:PropertyValues):void;protected firstUpdated(changed:PropertyValues):void;
|
|
102
102
|
/** Mirrors this group's `icon-only` state onto every `<lr-app-rail-item>` and nested
|
|
103
103
|
* `<lr-app-rail-group>` it DIRECTLY owns. The rail cannot reach these itself:
|
|
104
104
|
* `assignedElements({ flatten: true })` expands nested `<slot>` elements, not element children,
|
|
@@ -125,4 +125,4 @@ private syncOwnedItems;
|
|
|
125
125
|
* ran again). Gate on the UNFLATTENED list first -- it never contains fallback -- and flatten
|
|
126
126
|
* only once something really is assigned, which still resolves a consumer's forwarding
|
|
127
127
|
* `<slot>` down to its own (possibly empty) content. */
|
|
128
|
-
private onHeadingSlotChange;private onHeaderActionsSlotChange;private onContentSlotChange;private onToggleClick;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-app-rail-group':LyraAppRailGroup;}}
|
|
128
|
+
private onHeadingSlotChange;private applyHeadingSlotPresence;private onHeaderActionsSlotChange;private applyHeaderActionsSlotPresence;private onContentSlotChange;private onToggleClick;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-app-rail-group':LyraAppRailGroup;}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{nextId}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteRange}from"../../../internal/numbers.js";import{tag}from"../../../internal/prefix.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./app-rail-group.styles.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_expand}from"../../../internal/default-strings.generated.js";class LyraAppRailGroup extends LyraElement{constructor(){super(...arguments),this.heading="",this.headingLevel=3,this.collapsible=!1,this._open=!0,this.toggleGuard=new VetoWriteGuard,this.hasHeadingSlot=!1,this.hasHeaderActionsSlot=!1,this.headingId=nextId("app-rail-group-heading"),this.contentId=nextId("app-rail-group-content"),this.onHeadingSlotChange=event=>{
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{nextId}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteRange}from"../../../internal/numbers.js";import{tag}from"../../../internal/prefix.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./app-rail-group.styles.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_expand}from"../../../internal/default-strings.generated.js";class LyraAppRailGroup extends LyraElement{constructor(){super(...arguments),this.heading="",this.headingLevel=3,this.collapsible=!1,this._open=!0,this.toggleGuard=new VetoWriteGuard,this.hasHeadingSlot=!1,this.hasHeaderActionsSlot=!1,this.headingId=nextId("app-rail-group-heading"),this.contentId=nextId("app-rail-group-content"),this.onHeadingSlotChange=event=>{this.applyHeadingSlotPresence(event.target)},this.onHeaderActionsSlotChange=event=>{this.applyHeaderActionsSlotPresence(event.target)},this.onContentSlotChange=()=>{this.syncOwnedItems()},this.onToggleClick=()=>{const next=!this._open;requestThenCommit({requestDetail:{open:next},emitRequest:(detail,init)=>this.emit("lr-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.open=next,this.emit("lr-toggle",{open:next})}})}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,expand:LYRA_DEFAULT_expand}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...super.observedAttributes,"icon-only"]}get open(){return this._open}set open(next){const old=this._open;this._open=next,markVetoGuardWrite(this.toggleGuard),this.requestUpdate("open",old)}get safeHeadingLevel(){return Math.round(finiteRange(this.headingLevel,3,1,6))}connectedCallback(){super.connectedCallback(),this.syncOwnedItems()}attributeChangedCallback(name,oldValue,newValue){super.attributeChangedCallback(name,oldValue,newValue),!(name!=="icon-only"||oldValue===newValue)&&(this.syncOwnedItems(),this.requestUpdate())}updated(changed){super.updated(changed),this.syncOwnedItems()}firstUpdated(changed){super.firstUpdated(changed);const headingSlot=this.headingSlot,headerActionsSlot=this.headerActionsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(headingSlot,s=>this.applyHeadingSlotPresence(s)),collectInitialSlotAssignment(headerActionsSlot,s=>this.applyHeaderActionsSlotPresence(s))})}syncOwnedItems(){if(!this.isConnected)return;const iconOnly=this.hasAttribute("icon-only"),groupTag=tag("app-rail-group");for(const node of this.querySelectorAll(`${tag("app-rail-item")}, ${groupTag}`))(node.parentElement?.closest(groupTag)??null)===this&&node.toggleAttribute("icon-only",iconOnly)}applyHeadingSlotPresence(slot){this.hasHeadingSlot=slot.assignedNodes().length>0&&slot.assignedNodes({flatten:!0}).length>0}applyHeaderActionsSlotPresence(slot){this.hasHeaderActionsSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")}render(){const named=this.hasHeadingSlot||this.heading.trim()!=="",headingContent=html`<span part="heading-text"
|
|
2
2
|
><slot name="heading" @slotchange=${this.onHeadingSlotChange}
|
|
3
3
|
>${this.hasHeadingSlot?nothing:this.heading}</slot
|
|
4
4
|
></span
|
|
@@ -33,4 +33,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
33
33
|
<slot @slotchange=${this.onContentSlotChange}></slot>
|
|
34
34
|
</div>
|
|
35
35
|
</div>
|
|
36
|
-
`}}__decorate([property()],LyraAppRailGroup.prototype,"heading",void 0),__decorate([property({type:Number,attribute:"heading-level"})],LyraAppRailGroup.prototype,"headingLevel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailGroup.prototype,"collapsible",void 0),__decorate([property({type:Boolean,reflect:!0,converter:trueDefaultBooleanConverter})],LyraAppRailGroup.prototype,"open",null),__decorate([state()],LyraAppRailGroup.prototype,"hasHeadingSlot",void 0),__decorate([state()],LyraAppRailGroup.prototype,"hasHeaderActionsSlot",void 0);export{LyraAppRailGroup};
|
|
36
|
+
`}}__decorate([property()],LyraAppRailGroup.prototype,"heading",void 0),__decorate([property({type:Number,attribute:"heading-level"})],LyraAppRailGroup.prototype,"headingLevel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRailGroup.prototype,"collapsible",void 0),__decorate([property({type:Boolean,reflect:!0,converter:trueDefaultBooleanConverter})],LyraAppRailGroup.prototype,"open",null),__decorate([state()],LyraAppRailGroup.prototype,"hasHeadingSlot",void 0),__decorate([state()],LyraAppRailGroup.prototype,"hasHeaderActionsSlot",void 0),__decorate([query('slot[name="heading"]')],LyraAppRailGroup.prototype,"headingSlot",void 0),__decorate([query('slot[name="header-actions"]')],LyraAppRailGroup.prototype,"headerActionsSlot",void 0);export{LyraAppRailGroup};
|
|
@@ -95,7 +95,7 @@ accessibleLabel?:string;private hostAccessibleLabel;private slideSlot?;private v
|
|
|
95
95
|
* to rest on is published once the stream goes quiet. Scheduled on -- and cancelled through --
|
|
96
96
|
* the realm this carousel lives in at the time, so one adopted into another document neither
|
|
97
97
|
* leaves a task behind on the old realm nor loses the ability to cancel the new one. */
|
|
98
|
-
private readonly scrollSettle;private adoptingScrolledSlide;private hasAlignedOnce;private alignIndex?;private alignTarget?;private requestedBehavior?;private loopSide?;private loopClonesDirty;private pointerInteracting;private focusInteracting;private dragPointerId?;private dragStartCoordinate;private dragStartScroll;private dragMoved;private suppressClick;private clickTimer?;private clickTimerWindow?;private announcementSink?;private announcementsArmed;private changeOrigin;private manualPending;private observer?;private observerDocument?;private observerGeneration;private lastFocusedSlide?;constructor();attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;connectedCallback():void;disconnectedCallback():void;private armSlideContentObserver;private resetSlideContentObserver;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private setCurrentSlideState;private setPaginationState;private onMotionPreferenceChange;private onVisibilityChange;private queueOwnerMicrotask;private effectiveOrientation;private slideElements;private pageSize;private moveSize;private maxStartIndex;private normalizedIndex;private pageTargets;private visibleIndices;private announceActivePage;private restoreAttribute;private snapshotSlide;private adoptChanges;private restoreSlide;private restoreSlides;private syncSlides;
|
|
98
|
+
private readonly scrollSettle;private adoptingScrolledSlide;private hasAlignedOnce;private alignIndex?;private alignTarget?;private requestedBehavior?;private loopSide?;private loopClonesDirty;private pointerInteracting;private focusInteracting;private dragPointerId?;private dragStartCoordinate;private dragStartScroll;private dragMoved;private suppressClick;private clickTimer?;private clickTimerWindow?;private announcementSink?;private announcementsArmed;private changeOrigin;private manualPending;private observer?;private observerDocument?;private observerGeneration;private lastFocusedSlide?;constructor();attributeChangedCallback(name:string,oldValue:string|null,newValue:string|null):void;connectedCallback():void;disconnectedCallback():void;private armSlideContentObserver;private resetSlideContentObserver;protected willUpdate(changed:PropertyValues):void;protected firstUpdated(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private setCurrentSlideState;private setPaginationState;private onMotionPreferenceChange;private onVisibilityChange;private queueOwnerMicrotask;private effectiveOrientation;private slideElements;private pageSize;private moveSize;private maxStartIndex;private normalizedIndex;private pageTargets;private visibleIndices;private announceActivePage;private restoreAttribute;private snapshotSlide;private adoptChanges;private restoreSlide;private restoreSlides;private syncSlides;
|
|
99
99
|
/** Moves focus while the outgoing slide is still operable. Setting `inert` first lets the
|
|
100
100
|
* platform strand focus on the document body, outside this carousel's keyboard handler. The
|
|
101
101
|
* remembered-slide branch covers direct light-DOM removal, where slotchange necessarily runs
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{isAccessibilitySubtreeExcluded,isAccessibilityVisible,isAccessibilityVisibilityHidden}from"../../../internal/accessibility-visibility.js";import{activeElementIn,deepActiveElementIn}from"../../../internal/active-element.js";import{composedAccessibilityText}from"../../../internal/announcement-text.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteDuration,finiteInteger}from"../../../internal/numbers.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{composedContains}from"../../../internal/overlay-manager.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{tag}from"../../../internal/prefix.js";import{styles}from"./carousel.styles.js";import{LYRA_DEFAULT_carousel,LYRA_DEFAULT_carouselGoTo,LYRA_DEFAULT_carouselIndicators,LYRA_DEFAULT_carouselLabel,LYRA_DEFAULT_carouselSlide,LYRA_DEFAULT_carouselSlideAnnouncement,LYRA_DEFAULT_carouselSlideAnnouncementSeparator,LYRA_DEFAULT_carouselSlidePosition,LYRA_DEFAULT_next,LYRA_DEFAULT_previous}from"../../../internal/default-strings.generated.js";const SCROLL_SETTLE_MS=120,LOOP_SNAPSHOT_UNSAFE_TAGS=new Set(["audio","canvas","embed","form","iframe","img","input","link","object","picture","script","select","source","style","textarea","track","video"]),CAROUSEL_MANAGED_SLIDE_ATTRIBUTES=new Set(["aria-hidden","aria-label","aria-roledescription","hidden","inert","role"]),SLIDE_SNAPSHOT_KEYS=["hidden","inert","role","label","roleDescription","ariaHidden"];class LyraCarousel extends LyraElement{static{this.defaultStrings={...super.defaultStrings,carousel:LYRA_DEFAULT_carousel,carouselGoTo:LYRA_DEFAULT_carouselGoTo,carouselIndicators:LYRA_DEFAULT_carouselIndicators,carouselLabel:LYRA_DEFAULT_carouselLabel,carouselSlide:LYRA_DEFAULT_carouselSlide,carouselSlideAnnouncement:LYRA_DEFAULT_carouselSlideAnnouncement,carouselSlideAnnouncementSeparator:LYRA_DEFAULT_carouselSlideAnnouncementSeparator,carouselSlidePosition:LYRA_DEFAULT_carouselSlidePosition,next:LYRA_DEFAULT_next,previous:LYRA_DEFAULT_previous}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...new Set([...super.observedAttributes,"currentslide"])]}get currentSlide(){return this._currentSlide}set currentSlide(value){this.setCurrentSlideState(value)}get pagination(){return this._pagination}set pagination(value){this.setPaginationState(!!value)}get slides(){return this._slides}constructor(){super(),this._currentSlide=0,this._pagination=!1,this._slides=0,this.loop=!1,this.autoplay=!1,this.autoplayInterval=3e3,this.navigation=!1,this.orientation="horizontal",this.mouseDragging=!1,this.slidesPerPage=1,this.slidesPerMove=1,this.hostAccessibleLabel=null,this.reduceMotion=!1,this.snapshots=new Map,this.appliedSnapshots=new WeakMap,this.scrollSettle=new DebounceController(SCROLL_SETTLE_MS,()=>this.settleScrolledSlide(),()=>this.ownerDocument.defaultView),this.adoptingScrolledSlide=!1,this.hasAlignedOnce=!1,this.loopClonesDirty=!0,this.pointerInteracting=!1,this.focusInteracting=!1,this.dragStartCoordinate=0,this.dragStartScroll=0,this.dragMoved=!1,this.suppressClick=!1,this.announcementsArmed=!1,this.changeOrigin="manual",this.manualPending=!1,this.observerGeneration=0,this.onMotionPreferenceChange=event=>{this.reduceMotion=event.matches,this.restartAutoplay(),this.requestUpdate()},this.onVisibilityChange=()=>{this.restartAutoplay()},this.onSlotChange=()=>{this.handleSlidesChanged()},this.onViewportScroll=()=>{this.cancelScrollSettle(),this.ownerDocument.defaultView&&this.scrollSettle.push(void 0)},this.onViewportScrollEnd=()=>{this.cancelScrollSettle(),this.settleScrolledSlide()},this.settleScrolledSlide=()=>{if(!this.isConnected)return;const viewport=this.viewport;if(!viewport)return;if(this.alignTarget){if(Math.abs(this.axisOffsetOf(this.alignTarget,viewport))>2)return;const cloneSide=this.alignTarget.dataset.carouselClone;if(cloneSide==="before"||cloneSide==="after"){const realSlide=this.slideElements()[this.alignIndex??-1];if(realSlide){this.alignTarget=realSlide,this.scrollByAxis(viewport,this.axisOffsetOf(realSlide,viewport),"instant");return}}this.clearAlignment();return}const resting=this.restingSlide();if(!resting)return;const changed=resting.index!==this.currentSlide;!changed&&!resting.cloneSide||(this.adoptingScrolledSlide=!0,changed&&(this.currentSlide=resting.index,this.emit("lr-slide-change",{index:resting.index,slide:this.slideElements()[resting.index]})),this.updateComplete.then(()=>{if(resting.cloneSide&&this.isConnected&&this.viewport){const realSlide=this.slideElements()[resting.index];realSlide&&this.scrollByAxis(this.viewport,this.axisOffsetOf(realSlide,this.viewport),"instant")}this.adoptingScrolledSlide=!1}))},this.onViewportPointerEnter=()=>{this.pointerInteracting=!0,this.restartAutoplay()},this.onViewportPointerLeave=()=>{this.dragPointerId===void 0&&(this.pointerInteracting=!1,this.restartAutoplay())},this.onViewportFocusIn=event=>{this.focusInteracting=!0;const slides=new Set(this.slideElements()),focusedSlide=event.composedPath().find(candidate=>candidate.nodeType===1&&slides.has(candidate));focusedSlide&&(this.lastFocusedSlide=focusedSlide),this.restartAutoplay()},this.onViewportFocusOut=()=>{this.queueOwnerMicrotask(()=>{if(!this.isConnected)return;const active=deepActiveElementIn(this.ownerDocument);this.lastFocusedSlide&&!composedContains(this.lastFocusedSlide,active)&&(this.lastFocusedSlide.isConnected||active!==null&&active!==this.ownerDocument.body)&&(this.lastFocusedSlide=void 0),this.focusInteracting=this.matches(":focus-within"),this.restartAutoplay()})},this.onViewportPointerDown=event=>{if(!this.mouseDragging||event.pointerType!=="mouse"||!event.isPrimary||event.button!==0||this.dragPointerId!==void 0||this.targetsInteractiveContent(event))return;this.takeOverViewport();const viewport=this.viewport;if(viewport){this.dragPointerId=event.pointerId,this.dragStartCoordinate=this.effectiveOrientation()==="vertical"?event.clientY:event.clientX,this.dragStartScroll=this.effectiveOrientation()==="vertical"?viewport.scrollTop:viewport.scrollLeft,this.dragMoved=!1,viewport.setAttribute("data-dragging","");try{viewport.setPointerCapture(event.pointerId)}catch{}this.restartAutoplay()}},this.onViewportPointerMove=event=>{if(event.pointerId!==this.dragPointerId)return;const viewport=this.viewport;if(!viewport)return;const delta=(this.effectiveOrientation()==="vertical"?event.clientY:event.clientX)-this.dragStartCoordinate;Math.abs(delta)>2&&(this.dragMoved=!0),this.dragMoved&&(event.preventDefault(),this.effectiveOrientation()==="vertical"?viewport.scrollTo({top:this.dragStartScroll-delta,behavior:"instant"}):viewport.scrollTo({left:this.dragStartScroll-delta,behavior:"instant"}))},this.onViewportPointerUp=event=>{this.finishDrag(event.pointerId,!1)},this.onViewportPointerCancel=event=>{this.finishDrag(event.pointerId,!0)},this.onViewportLostPointerCapture=event=>{this.finishDrag(event.pointerId,!0)},this.onViewportClick=event=>{this.suppressClick&&(event.preventDefault(),event.stopImmediatePropagation())},this.onViewportKeyDown=event=>{if(this.targetsInteractiveContent(event,!0))return;const vertical=this.effectiveOrientation()==="vertical",rtl=this.effectiveDirection==="rtl",forwardKey=vertical?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=vertical?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";event.key===forwardKey?(event.preventDefault(),this.next()):event.key===backwardKey?(event.preventDefault(),this.previous()):event.key==="Home"?(event.preventDefault(),this.goToSlide(0)):event.key==="End"&&(event.preventDefault(),this.goToSlide(this.loop?this.slideElements().length-1:this.maxStartIndex()))},this.requestUpdate("currentSlide",void 0),this.requestUpdate("pagination",void 0)}attributeChangedCallback(name,oldValue,newValue){if(name==="currentslide"){oldValue!==newValue&&(this.currentSlide=finiteInteger(Number(newValue??0),0));return}super.attributeChangedCallback(name,oldValue,newValue),name==="current-slide"&&newValue===null&&oldValue!==newValue&&this.hasAttribute("currentslide")&&(this.currentSlide=finiteInteger(Number(this.getAttribute("currentslide")??0),0))}connectedCallback(){this.hasAttribute("current-slide")&&(this.currentSlide=finiteInteger(Number(this.getAttribute("current-slide")??0),0)),super.connectedCallback();const view=this.ownerDocument.defaultView;this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.announcementsArmed=!1,this.manualPending=!1,this.mediaQuery=typeof view?.matchMedia=="function"?view.matchMedia("(prefers-reduced-motion: reduce)"):void 0,this.reduceMotion=this.mediaQuery?.matches??!1,this.mediaQuery?.addEventListener("change",this.onMotionPreferenceChange),this.visibilityDocument=this.ownerDocument,this.visibilityDocument.addEventListener("visibilitychange",this.onVisibilityChange),this.armSlideContentObserver(),this.restartAutoplay(),this.hasUpdated&&this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()})}disconnectedCallback(){this.announcementSink?.release(),this.announcementSink=void 0,this.announcementsArmed=!1,this.manualPending=!1,this.cancelDrag(!1),this.stopAutoplay(),this.cancelScrollSettle(),this.cancelClickSuppression(),this.suppressClick=!1,this.pointerInteracting=!1,this.focusInteracting=!1,this.hasAlignedOnce=!1,this.clearAlignment(),this.mediaQuery?.removeEventListener("change",this.onMotionPreferenceChange),this.mediaQuery=void 0,this.visibilityDocument?.removeEventListener("visibilitychange",this.onVisibilityChange),this.visibilityDocument=void 0,this.resetSlideContentObserver(),this.restoreSlides(),this.lastFocusedSlide=void 0,super.disconnectedCallback()}armSlideContentObserver(){const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor||!this.isConnected)return;this.resetSlideContentObserver();const generation=this.observerGeneration,observer=new MutationObserverCtor(records=>{this.observer!==observer||this.observerDocument!==ownerDocument||this.observerGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||!records.some(record=>{if(record.type!=="attributes")return!0;if(record.target===this)return!1;if(!CAROUSEL_MANAGED_SLIDE_ATTRIBUTES.has(record.attributeName??""))return!0;const slide=record.target,snapshot=this.snapshots.get(slide);return snapshot?this.adoptChanges(slide,snapshot):!1})||(this.loop&&(this.loopClonesDirty=!0),this.syncSlides(),this.requestUpdate())});this.observer=observer,this.observerDocument=ownerDocument,observer.observe(this,{attributes:!0,characterData:!0,childList:!0,subtree:!0})}resetSlideContentObserver(){this.observerGeneration+=1,this.observer?.disconnect(),this.observer=void 0,this.observerDocument=void 0}willUpdate(changed){if(super.willUpdate(changed),(changed.has("currentSlide")||changed.has("slidesPerPage"))&&this.slideSlot){const normalized=this.normalizedIndex();this.currentSlide!==normalized&&(this.currentSlide=normalized)}}updated(changed){super.updated(changed);const shouldAnnounceActivePage=this.announcementsArmed&&(this.manualPending||changed.has("slidesPerPage"));this.syncSlides(),(this.loopClonesDirty||changed.has("loop")||changed.has("slidesPerPage")||changed.has("slidesPerMove"))&&(this.syncLoopClones(),this.loopClonesDirty=!1),(changed.has("autoplay")||changed.has("autoplayInterval")||changed.has("loop")||changed.has("slidesPerPage"))&&this.restartAutoplay(),!this.adoptingScrolledSlide&&(changed.has("currentSlide")||changed.has("slidesPerPage")||changed.has("orientation")||!this.hasAlignedOnce)&&this.alignToActiveSlide(),this.hasAlignedOnce=!0,shouldAnnounceActivePage&&this.announceActivePage(),this.manualPending=!1,this.announcementsArmed=!0}setCurrentSlideState(value){const old=this._currentSlide,next=finiteInteger(value,0);old!==next&&(this._currentSlide=next,this.changeOrigin==="manual"&&(this.manualPending=!0),this.requestUpdate("currentSlide",old))}setPaginationState(value){const old=this._pagination;old!==value&&(this._pagination=value,this.requestUpdate("pagination",old))}queueOwnerMicrotask(callback){const view=this.ownerDocument.defaultView;view?view.queueMicrotask(callback):queueMicrotask(callback)}effectiveOrientation(){return this.orientation==="vertical"?"vertical":"horizontal"}slideElements(){return(this.slideSlot?.assignedElements({flatten:!0})??[]).filter(element=>element.nodeType===1&&element.namespaceURI==="http://www.w3.org/1999/xhtml")}pageSize(count=this.slideElements().length){return finiteInteger(this.slidesPerPage,1,1,Math.max(1,count))}moveSize(count=this.slideElements().length){return finiteInteger(this.slidesPerMove,1,1,this.pageSize(count))}maxStartIndex(count=this.slideElements().length){return Math.max(0,count-this.pageSize(count))}normalizedIndex(count=this.slideElements().length){if(count===0)return 0;const max=this.loop?count-1:this.maxStartIndex(count);return finiteInteger(this.currentSlide,0,0,max)}pageTargets(count=this.slideElements().length){if(count===0)return[];if(this.loop)return Array.from({length:count},(_unused,index)=>index);const max=this.maxStartIndex(count),move=this.moveSize(count),targets=[0];for(let target=move;target<max;target+=move)targets.push(target);return max>0&&targets.at(-1)!==max&&targets.push(max),targets}visibleIndices(count,current){const visible=new Set,perPage=this.pageSize(count);for(let offset=0;offset<perPage;offset+=1){const index=this.loop?(current+offset)%count:current+offset;index>=0&&index<count&&visible.add(index)}return visible}announceActivePage(){if(!isAccessibilityVisible(this))return;const slides=this.slideElements();if(slides.length===0)return;const current=this.normalizedIndex(slides.length),visible=this.visibleIndices(slides.length,current),format=getNumberFormat(this.effectiveLocale),messages=slides.flatMap((slide,index)=>{if(!visible.has(index))return[];if(isAccessibilitySubtreeExcluded(slide))return[];const slideTextVisible=!isAccessibilityVisibilityHidden(slide),authoredLabel=slideTextVisible?this.snapshots.get(slide)?.label?.trim():"";if(authoredLabel)return[authoredLabel];const position=this.localize("carouselSlidePosition",void 0,{index:format.format(index+1),total:format.format(slides.length)}),content=Array.from(slide.childNodes).map(node=>composedAccessibilityText(node,slideTextVisible)).join(" ").replace(/\s+/g," ").trim();return!slideTextVisible&&!content?[]:[content&&content!==position?this.localize("carouselSlideAnnouncement",void 0,{position,content}):position]});this.announcementSink?.announce(messages.join(this.localize("carouselSlideAnnouncementSeparator")))}restoreAttribute(slide,name,value){value===null?slide.removeAttribute(name):slide.setAttribute(name,value)}snapshotSlide(slide){return{hidden:slide.hidden,inert:slide.inert,role:slide.getAttribute("role"),label:slide.getAttribute("aria-label"),roleDescription:slide.getAttribute("aria-roledescription"),ariaHidden:slide.getAttribute("aria-hidden")}}adoptChanges(slide,snapshot){const applied=this.appliedSnapshots.get(slide);if(!applied)return!1;const current=this.snapshotSlide(slide);let changed=!1;for(const key of SLIDE_SNAPSHOT_KEYS)current[key]!==applied[key]&&(snapshot[key]=current[key],changed=!0);return changed}restoreSlide(slide,snapshot){slide.hidden=snapshot.hidden,slide.inert=snapshot.inert,this.restoreAttribute(slide,"role",snapshot.role),this.restoreAttribute(slide,"aria-label",snapshot.label),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription),this.restoreAttribute(slide,"aria-hidden",snapshot.ariaHidden)}restoreSlides(){for(const[slide,snapshot]of this.snapshots)this.adoptChanges(slide,snapshot),this.restoreSlide(slide,snapshot);this.snapshots.clear()}syncSlides(){const slides=this.slideElements(),assigned=new Set(slides);for(const[slide,snapshot]of this.snapshots)this.adoptChanges(slide,snapshot)&&(this.loopClonesDirty=!0),assigned.has(slide)||(this.restoreSlide(slide,snapshot),this.snapshots.delete(slide));const current=this.normalizedIndex(slides.length);this.currentSlide!==current&&(this.currentSlide=current);const visible=this.visibleIndices(slides.length,current);this.repairFocusBeforeSlideExclusion(slides,visible);const format=getNumberFormat(this.effectiveLocale);slides.forEach((slide,slideIndex)=>{const existing=this.snapshots.get(slide),snapshot=existing??this.snapshotSlide(slide);existing||this.snapshots.set(slide,snapshot),slide.localName===tag("carousel-item")?(this.restoreAttribute(slide,"role",snapshot.role??"group"),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription??this.localize("carouselSlide")),this.restoreAttribute(slide,"aria-label",snapshot.label??this.localize("carouselSlidePosition",void 0,{index:format.format(slideIndex+1),total:format.format(slides.length)}))):(this.restoreAttribute(slide,"role",snapshot.role),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription),this.restoreAttribute(slide,"aria-label",snapshot.label)),slide.hidden=snapshot.hidden,visible.has(slideIndex)?(slide.inert=snapshot.inert,this.restoreAttribute(slide,"aria-hidden",snapshot.ariaHidden)):(slide.inert=!0,slide.setAttribute("aria-hidden","true")),this.appliedSnapshots.set(slide,this.snapshotSlide(slide))})}repairFocusBeforeSlideExclusion(slides,visible){const active=deepActiveElementIn(this.ownerDocument),focusedIndex=slides.findIndex(slide=>composedContains(slide,active)),focusedSlideWillBeExcluded=focusedIndex>=0&&!visible.has(focusedIndex),focusedSlideWasRemoved=focusedIndex<0&&this.lastFocusedSlide!==void 0&&!this.lastFocusedSlide.isConnected&&(active===null||active===this.ownerDocument.body);!focusedSlideWillBeExcluded&&!focusedSlideWasRemoved||(this.viewport?.focus(),this.lastFocusedSlide=void 0)}handleSlidesChanged(){const count=this.slideElements().length,active=activeElementIn(this.shadowRoot);if(active?.matches('[part~="pagination-item"]')){const children=active.parentElement.children,pages=this.pageTargets(count).length;(pages<2||[...children].indexOf(active)>=pages)&&(pages>1?children[pages-1]:this.viewport)?.focus()}else active?.matches('[part~="navigation-button"]')&&(!this.navigation||count<=this.pageSize(count))&&this.viewport?.focus();if(this._slides!==count){const previous=this._slides;this._slides=count,this.requestUpdate("slides",previous)}this.loopClonesDirty=!0,this.syncSlides(),this.syncLoopClones(),this.loopClonesDirty=!1,this.restartAutoplay(),this.requestUpdate()}prepareClone(original,index,side){if([original,...Array.from(original.querySelectorAll("*"))].some(element=>element.namespaceURI!=="http://www.w3.org/1999/xhtml"||element.localName.includes("-")||LOOP_SNAPSHOT_UNSAFE_TAGS.has(element.localName)))return;const clone=original.cloneNode(!0),descendants=[clone,...Array.from(clone.querySelectorAll("*"))];for(const descendant of descendants)descendant.removeAttribute("id"),descendant.removeAttribute("name"),descendant.removeAttribute("form"),descendant.removeAttribute("for"),descendant.removeAttribute("aria-controls"),descendant.removeAttribute("aria-describedby"),descendant.removeAttribute("aria-labelledby");return clone.removeAttribute("slot"),clone.dataset.carouselClone=side,clone.dataset.carouselIndex=String(index),clone.inert=!0,clone.setAttribute("aria-hidden","true"),clone}syncLoopClones(){const before=this.beforeClones,after=this.afterClones;if(!before||!after)return;before.replaceChildren(),after.replaceChildren();const slides=this.slideElements();if(!this.loop||slides.length<2)return;const cloneCount=Math.min(slides.length,Math.max(this.pageSize(slides.length),this.moveSize(slides.length))),beforeStart=slides.length-cloneCount;for(let index=beforeStart;index<slides.length;index+=1){const clone=this.prepareClone(slides[index],index,"before");clone&&before.append(clone)}for(let index=0;index<cloneCount;index+=1){const clone=this.prepareClone(slides[index],index,"after");clone&&after.append(clone)}}cloneFor(side,index){return(side==="before"?this.beforeClones:this.afterClones)?.querySelector(`[data-carousel-index="${index}"]`)??void 0}changeTo(index,behavior="smooth",origin="manual"){const slides=this.slideElements(),count=slides.length;if(count===0||!Number.isFinite(index))return;const requested=Math.trunc(index);let next,loopSide;if(this.loop?(next=(requested%count+count)%count,requested<0?loopSide="before":requested>=count&&(loopSide="after")):next=Math.min(this.maxStartIndex(count),Math.max(0,requested)),next===this.currentSlide)return;this.requestedBehavior=behavior,this.loopSide=loopSide;const previousOrigin=this.changeOrigin;this.changeOrigin=origin;try{this.currentSlide=next}finally{this.changeOrigin=previousOrigin}this.emit("lr-slide-change",{index:next,slide:slides[next]})}next(behavior="smooth"){this.changeTo(this.currentSlide+this.moveSize(),behavior)}previous(behavior="smooth"){this.changeTo(this.currentSlide-this.moveSize(),behavior)}goToSlide(index,behavior="smooth"){this.changeTo(index,behavior)}addSlide(slide){slide?.nodeType!==1||slide?.namespaceURI!=="http://www.w3.org/1999/xhtml"||(this.append(slide),this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()}))}removeSlide(index){if(!Number.isFinite(index))return;const target=this.slideElements()[Math.trunc(index)];target&&(target.remove(),this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()}))}stopAutoplay(){this.timer!==void 0&&this.timerWindow?.clearInterval(this.timer),this.timer=void 0,this.timerWindow=void 0}restartAutoplay(){this.stopAutoplay();const count=this.slideElements().length,doc=this.visibilityDocument??this.ownerDocument,view=doc.defaultView;if(!this.isConnected||!view||!this.autoplay||this.reduceMotion||this.pointerInteracting||this.focusInteracting||this.dragPointerId!==void 0||doc.visibilityState!=="visible"||count<=this.pageSize(count))return;const interval=finiteDuration(this.autoplayInterval,3e3,1e3);this.timerWindow=view,this.timer=view.setInterval(()=>{this.loop||this.currentSlide<this.maxStartIndex()?this.changeTo(this.currentSlide+this.moveSize(),"smooth","autoplay"):this.stopAutoplay()},interval)}scrollPaddingStart(){const rect=this.scrollHintProbe?.getBoundingClientRect();if(!rect)return 0;const pixels=this.effectiveOrientation()==="vertical"?rect.height:rect.width;return Number.isFinite(pixels)?pixels:0}axisOffsetOf(slide,viewport){const viewportRect=viewport.getBoundingClientRect(),slideRect=slide.getBoundingClientRect(),padding=this.scrollPaddingStart();return this.effectiveOrientation()==="vertical"?slideRect.top-(viewportRect.top+padding):this.effectiveDirection==="rtl"?slideRect.right-(viewportRect.right-padding):slideRect.left-(viewportRect.left+padding)}scrollByAxis(viewport,distance,behavior){this.effectiveOrientation()==="vertical"?viewport.scrollBy({top:distance,behavior}):viewport.scrollBy({left:distance,behavior})}restingSlide(){const viewport=this.viewport,slides=this.slideElements();if(!viewport||slides.length===0)return;const candidates=slides.map((element,index)=>({element,index}));for(const clone of this.shadowRoot?.querySelectorAll("[data-carousel-clone]")??[]){const index=Number(clone.dataset.carouselIndex),cloneSide=clone.dataset.carouselClone;Number.isInteger(index)&&index>=0&&index<slides.length&&(cloneSide==="before"||cloneSide==="after")&&candidates.push({element:clone,index,cloneSide})}let nearest,nearestDistance=Number.POSITIVE_INFINITY;for(const candidate of candidates){const distance=Math.abs(this.axisOffsetOf(candidate.element,viewport));distance<nearestDistance&&(nearestDistance=distance,nearest=candidate)}return nearest}alignToActiveSlide(){const viewport=this.viewport,targetIndex=this.normalizedIndex(),realSlide=this.slideElements()[targetIndex];if(!viewport||!realSlide)return;const loopSide=this.loopSide,requestedBehavior=this.requestedBehavior;this.loopSide=void 0,this.requestedBehavior=void 0;const target=loopSide?this.cloneFor(loopSide,targetIndex)??realSlide:realSlide,offset=this.axisOffsetOf(target,viewport);if(Math.round(offset)===0){this.clearAlignment();return}this.alignIndex=targetIndex,this.alignTarget=target;const behavior=this.motionAwareScrollBehavior(requestedBehavior??"smooth",!0);this.scrollByAxis(viewport,offset,behavior)}motionAwareScrollBehavior(requested,instantBeforeFirstAlignment=!1){return this.reduceMotion||instantBeforeFirstAlignment&&!this.hasAlignedOnce?"instant":requested}cancelScrollSettle(){this.scrollSettle.cancel()}clearAlignment(){this.alignTarget=void 0,this.alignIndex=void 0,this.loopSide=void 0,this.requestedBehavior=void 0}takeOverViewport(){this.clearAlignment()}targetsInteractiveContent(event,includeSlideEditors=!1){const slides=new Set(this.slideElements());for(const target of event.composedPath()){if(!(target instanceof Element))continue;const slideRoot=slides.has(target);if(target===this||target===this.viewport||slideRoot&&!includeSlideEditors)continue;const name=target.localName;if(name==="a"||name==="button"||name==="input"||name==="label"||name==="select"||name==="textarea"||target.hasAttribute("contenteditable")||!slideRoot&&name.includes("-")&&target.getRootNode()!==this.shadowRoot)return!0;const role=target.getAttribute("role")?.trim().toLowerCase();if(role&&["button","checkbox","combobox","link","radio","slider","spinbutton","switch","textbox"].includes(role))return!0}return!1}finishDrag(pointerId,canceled){if(pointerId!==this.dragPointerId)return;const viewport=this.viewport,moved=this.dragMoved;if(this.dragPointerId=void 0,this.dragMoved=!1,viewport?.removeAttribute("data-dragging"),viewport?.hasPointerCapture(pointerId))try{viewport.releasePointerCapture(pointerId)}catch{}if(moved){this.suppressClick=!0,this.cancelClickSuppression();const view=this.ownerDocument.defaultView;view?(this.clickTimerWindow=view,this.clickTimer=view.setTimeout(()=>{this.suppressClick=!1,this.clickTimer=void 0,this.clickTimerWindow=void 0},0)):this.suppressClick=!1}if(canceled&&viewport){const active=this.slideElements()[this.normalizedIndex()];active&&this.scrollByAxis(viewport,this.axisOffsetOf(active,viewport),this.motionAwareScrollBehavior("smooth"))}else canceled||this.onViewportScroll();this.matches(":hover")||(this.pointerInteracting=!1),this.restartAutoplay()}cancelClickSuppression(){this.clickTimer!==void 0&&this.clickTimerWindow?.clearTimeout(this.clickTimer),this.clickTimer=void 0,this.clickTimerWindow=void 0}cancelDrag(realign){this.dragPointerId!==void 0&&this.finishDrag(this.dragPointerId,realign)}computedSlideBasis(perPage){return perPage===1?"100%":`calc((100% - (${perPage-1} * var(--slide-gap, var(--lr-space-m)))) / ${perPage})`}render(){const count=this.slideElements().length,current=this.normalizedIndex(count),pageTargets=this.pageTargets(count),exactCurrentPage=pageTargets.indexOf(current),currentPage=exactCurrentPage>=0?exactCurrentPage:pageTargets.reduce((nearest,target,pageIndex)=>Math.abs(target-current)<Math.abs(pageTargets[nearest]-current)?pageIndex:nearest,0),hasNavigation=this.navigation&&count>this.pageSize(count),hasPagination=this.pagination&&pageTargets.length>1,label=this.hostAccessibleLabel!==null?this.hostAccessibleLabel:this.accessibleLabel==null?this.localize("carouselLabel"):this.accessibleLabel,numberFormat=getNumberFormat(this.effectiveLocale),orientation=this.effectiveOrientation(),perPage=this.pageSize(count);return html`<section
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{isAccessibilitySubtreeExcluded,isAccessibilityVisible,isAccessibilityVisibilityHidden}from"../../../internal/accessibility-visibility.js";import{activeElementIn,deepActiveElementIn}from"../../../internal/active-element.js";import{composedAccessibilityText}from"../../../internal/announcement-text.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteDuration,finiteInteger}from"../../../internal/numbers.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{composedContains}from"../../../internal/overlay-manager.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{tag}from"../../../internal/prefix.js";import{styles}from"./carousel.styles.js";import{LYRA_DEFAULT_carousel,LYRA_DEFAULT_carouselGoTo,LYRA_DEFAULT_carouselIndicators,LYRA_DEFAULT_carouselLabel,LYRA_DEFAULT_carouselSlide,LYRA_DEFAULT_carouselSlideAnnouncement,LYRA_DEFAULT_carouselSlideAnnouncementSeparator,LYRA_DEFAULT_carouselSlidePosition,LYRA_DEFAULT_next,LYRA_DEFAULT_previous}from"../../../internal/default-strings.generated.js";const SCROLL_SETTLE_MS=120,LOOP_SNAPSHOT_UNSAFE_TAGS=new Set(["audio","canvas","embed","form","iframe","img","input","link","object","picture","script","select","source","style","textarea","track","video"]),CAROUSEL_MANAGED_SLIDE_ATTRIBUTES=new Set(["aria-hidden","aria-label","aria-roledescription","hidden","inert","role"]),SLIDE_SNAPSHOT_KEYS=["hidden","inert","role","label","roleDescription","ariaHidden"];class LyraCarousel extends LyraElement{static{this.defaultStrings={...super.defaultStrings,carousel:LYRA_DEFAULT_carousel,carouselGoTo:LYRA_DEFAULT_carouselGoTo,carouselIndicators:LYRA_DEFAULT_carouselIndicators,carouselLabel:LYRA_DEFAULT_carouselLabel,carouselSlide:LYRA_DEFAULT_carouselSlide,carouselSlideAnnouncement:LYRA_DEFAULT_carouselSlideAnnouncement,carouselSlideAnnouncementSeparator:LYRA_DEFAULT_carouselSlideAnnouncementSeparator,carouselSlidePosition:LYRA_DEFAULT_carouselSlidePosition,next:LYRA_DEFAULT_next,previous:LYRA_DEFAULT_previous}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...new Set([...super.observedAttributes,"currentslide"])]}get currentSlide(){return this._currentSlide}set currentSlide(value){this.setCurrentSlideState(value)}get pagination(){return this._pagination}set pagination(value){this.setPaginationState(!!value)}get slides(){return this._slides}constructor(){super(),this._currentSlide=0,this._pagination=!1,this._slides=0,this.loop=!1,this.autoplay=!1,this.autoplayInterval=3e3,this.navigation=!1,this.orientation="horizontal",this.mouseDragging=!1,this.slidesPerPage=1,this.slidesPerMove=1,this.hostAccessibleLabel=null,this.reduceMotion=!1,this.snapshots=new Map,this.appliedSnapshots=new WeakMap,this.scrollSettle=new DebounceController(SCROLL_SETTLE_MS,()=>this.settleScrolledSlide(),()=>this.ownerDocument.defaultView),this.adoptingScrolledSlide=!1,this.hasAlignedOnce=!1,this.loopClonesDirty=!0,this.pointerInteracting=!1,this.focusInteracting=!1,this.dragStartCoordinate=0,this.dragStartScroll=0,this.dragMoved=!1,this.suppressClick=!1,this.announcementsArmed=!1,this.changeOrigin="manual",this.manualPending=!1,this.observerGeneration=0,this.onMotionPreferenceChange=event=>{this.reduceMotion=event.matches,this.restartAutoplay(),this.requestUpdate()},this.onVisibilityChange=()=>{this.restartAutoplay()},this.onSlotChange=()=>{this.handleSlidesChanged()},this.onViewportScroll=()=>{this.cancelScrollSettle(),this.ownerDocument.defaultView&&this.scrollSettle.push(void 0)},this.onViewportScrollEnd=()=>{this.cancelScrollSettle(),this.settleScrolledSlide()},this.settleScrolledSlide=()=>{if(!this.isConnected)return;const viewport=this.viewport;if(!viewport)return;if(this.alignTarget){if(Math.abs(this.axisOffsetOf(this.alignTarget,viewport))>2)return;const cloneSide=this.alignTarget.dataset.carouselClone;if(cloneSide==="before"||cloneSide==="after"){const realSlide=this.slideElements()[this.alignIndex??-1];if(realSlide){this.alignTarget=realSlide,this.scrollByAxis(viewport,this.axisOffsetOf(realSlide,viewport),"instant");return}}this.clearAlignment();return}const resting=this.restingSlide();if(!resting)return;const changed=resting.index!==this.currentSlide;!changed&&!resting.cloneSide||(this.adoptingScrolledSlide=!0,changed&&(this.currentSlide=resting.index,this.emit("lr-slide-change",{index:resting.index,slide:this.slideElements()[resting.index]})),this.updateComplete.then(()=>{if(resting.cloneSide&&this.isConnected&&this.viewport){const realSlide=this.slideElements()[resting.index];realSlide&&this.scrollByAxis(this.viewport,this.axisOffsetOf(realSlide,this.viewport),"instant")}this.adoptingScrolledSlide=!1}))},this.onViewportPointerEnter=()=>{this.pointerInteracting=!0,this.restartAutoplay()},this.onViewportPointerLeave=()=>{this.dragPointerId===void 0&&(this.pointerInteracting=!1,this.restartAutoplay())},this.onViewportFocusIn=event=>{this.focusInteracting=!0;const slides=new Set(this.slideElements()),focusedSlide=event.composedPath().find(candidate=>candidate.nodeType===1&&slides.has(candidate));focusedSlide&&(this.lastFocusedSlide=focusedSlide),this.restartAutoplay()},this.onViewportFocusOut=()=>{this.queueOwnerMicrotask(()=>{if(!this.isConnected)return;const active=deepActiveElementIn(this.ownerDocument);this.lastFocusedSlide&&!composedContains(this.lastFocusedSlide,active)&&(this.lastFocusedSlide.isConnected||active!==null&&active!==this.ownerDocument.body)&&(this.lastFocusedSlide=void 0),this.focusInteracting=this.matches(":focus-within"),this.restartAutoplay()})},this.onViewportPointerDown=event=>{if(!this.mouseDragging||event.pointerType!=="mouse"||!event.isPrimary||event.button!==0||this.dragPointerId!==void 0||this.targetsInteractiveContent(event))return;this.takeOverViewport();const viewport=this.viewport;if(viewport){this.dragPointerId=event.pointerId,this.dragStartCoordinate=this.effectiveOrientation()==="vertical"?event.clientY:event.clientX,this.dragStartScroll=this.effectiveOrientation()==="vertical"?viewport.scrollTop:viewport.scrollLeft,this.dragMoved=!1,viewport.setAttribute("data-dragging","");try{viewport.setPointerCapture(event.pointerId)}catch{}this.restartAutoplay()}},this.onViewportPointerMove=event=>{if(event.pointerId!==this.dragPointerId)return;const viewport=this.viewport;if(!viewport)return;const delta=(this.effectiveOrientation()==="vertical"?event.clientY:event.clientX)-this.dragStartCoordinate;Math.abs(delta)>2&&(this.dragMoved=!0),this.dragMoved&&(event.preventDefault(),this.effectiveOrientation()==="vertical"?viewport.scrollTo({top:this.dragStartScroll-delta,behavior:"instant"}):viewport.scrollTo({left:this.dragStartScroll-delta,behavior:"instant"}))},this.onViewportPointerUp=event=>{this.finishDrag(event.pointerId,!1)},this.onViewportPointerCancel=event=>{this.finishDrag(event.pointerId,!0)},this.onViewportLostPointerCapture=event=>{this.finishDrag(event.pointerId,!0)},this.onViewportClick=event=>{this.suppressClick&&(event.preventDefault(),event.stopImmediatePropagation())},this.onViewportKeyDown=event=>{if(this.targetsInteractiveContent(event,!0))return;const vertical=this.effectiveOrientation()==="vertical",rtl=this.effectiveDirection==="rtl",forwardKey=vertical?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=vertical?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";event.key===forwardKey?(event.preventDefault(),this.next()):event.key===backwardKey?(event.preventDefault(),this.previous()):event.key==="Home"?(event.preventDefault(),this.goToSlide(0)):event.key==="End"&&(event.preventDefault(),this.goToSlide(this.loop?this.slideElements().length-1:this.maxStartIndex()))},this.requestUpdate("currentSlide",void 0),this.requestUpdate("pagination",void 0)}attributeChangedCallback(name,oldValue,newValue){if(name==="currentslide"){oldValue!==newValue&&(this.currentSlide=finiteInteger(Number(newValue??0),0));return}super.attributeChangedCallback(name,oldValue,newValue),name==="current-slide"&&newValue===null&&oldValue!==newValue&&this.hasAttribute("currentslide")&&(this.currentSlide=finiteInteger(Number(this.getAttribute("currentslide")??0),0))}connectedCallback(){this.hasAttribute("current-slide")&&(this.currentSlide=finiteInteger(Number(this.getAttribute("current-slide")??0),0)),super.connectedCallback();const view=this.ownerDocument.defaultView;this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.announcementsArmed=!1,this.manualPending=!1,this.mediaQuery=typeof view?.matchMedia=="function"?view.matchMedia("(prefers-reduced-motion: reduce)"):void 0,this.reduceMotion=this.mediaQuery?.matches??!1,this.mediaQuery?.addEventListener("change",this.onMotionPreferenceChange),this.visibilityDocument=this.ownerDocument,this.visibilityDocument.addEventListener("visibilitychange",this.onVisibilityChange),this.armSlideContentObserver(),this.restartAutoplay(),this.hasUpdated&&this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()})}disconnectedCallback(){this.announcementSink?.release(),this.announcementSink=void 0,this.announcementsArmed=!1,this.manualPending=!1,this.cancelDrag(!1),this.stopAutoplay(),this.cancelScrollSettle(),this.cancelClickSuppression(),this.suppressClick=!1,this.pointerInteracting=!1,this.focusInteracting=!1,this.hasAlignedOnce=!1,this.clearAlignment(),this.mediaQuery?.removeEventListener("change",this.onMotionPreferenceChange),this.mediaQuery=void 0,this.visibilityDocument?.removeEventListener("visibilitychange",this.onVisibilityChange),this.visibilityDocument=void 0,this.resetSlideContentObserver(),this.restoreSlides(),this.lastFocusedSlide=void 0,super.disconnectedCallback()}armSlideContentObserver(){const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor||!this.isConnected)return;this.resetSlideContentObserver();const generation=this.observerGeneration,observer=new MutationObserverCtor(records=>{this.observer!==observer||this.observerDocument!==ownerDocument||this.observerGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||!records.some(record=>{if(record.type!=="attributes")return!0;if(record.target===this)return!1;if(!CAROUSEL_MANAGED_SLIDE_ATTRIBUTES.has(record.attributeName??""))return!0;const slide=record.target,snapshot=this.snapshots.get(slide);return snapshot?this.adoptChanges(slide,snapshot):!1})||(this.loop&&(this.loopClonesDirty=!0),this.syncSlides(),this.requestUpdate())});this.observer=observer,this.observerDocument=ownerDocument,observer.observe(this,{attributes:!0,characterData:!0,childList:!0,subtree:!0})}resetSlideContentObserver(){this.observerGeneration+=1,this.observer?.disconnect(),this.observer=void 0,this.observerDocument=void 0}willUpdate(changed){if(super.willUpdate(changed),(changed.has("currentSlide")||changed.has("slidesPerPage"))&&this.slideSlot){const normalized=this.normalizedIndex();this.currentSlide!==normalized&&(this.currentSlide=normalized)}}firstUpdated(changed){super.firstUpdated(changed);const slot=this.slideSlot;this.queueOwnerMicrotask(()=>{collectInitialSlotAssignment(slot,()=>this.handleSlidesChanged())})}updated(changed){super.updated(changed);const shouldAnnounceActivePage=this.announcementsArmed&&(this.manualPending||changed.has("slidesPerPage"));this.syncSlides(),(this.loopClonesDirty||changed.has("loop")||changed.has("slidesPerPage")||changed.has("slidesPerMove"))&&(this.syncLoopClones(),this.loopClonesDirty=!1),(changed.has("autoplay")||changed.has("autoplayInterval")||changed.has("loop")||changed.has("slidesPerPage"))&&this.restartAutoplay(),!this.adoptingScrolledSlide&&(changed.has("currentSlide")||changed.has("slidesPerPage")||changed.has("orientation")||!this.hasAlignedOnce)&&this.alignToActiveSlide(),this.hasAlignedOnce=!0,shouldAnnounceActivePage&&this.announceActivePage(),this.manualPending=!1,this.announcementsArmed=!0}setCurrentSlideState(value){const old=this._currentSlide,next=finiteInteger(value,0);old!==next&&(this._currentSlide=next,this.changeOrigin==="manual"&&(this.manualPending=!0),this.requestUpdate("currentSlide",old))}setPaginationState(value){const old=this._pagination;old!==value&&(this._pagination=value,this.requestUpdate("pagination",old))}queueOwnerMicrotask(callback){const view=this.ownerDocument.defaultView;view?view.queueMicrotask(callback):queueMicrotask(callback)}effectiveOrientation(){return this.orientation==="vertical"?"vertical":"horizontal"}slideElements(){return(this.slideSlot?.assignedElements({flatten:!0})??[]).filter(element=>element.nodeType===1&&element.namespaceURI==="http://www.w3.org/1999/xhtml")}pageSize(count=this.slideElements().length){return finiteInteger(this.slidesPerPage,1,1,Math.max(1,count))}moveSize(count=this.slideElements().length){return finiteInteger(this.slidesPerMove,1,1,this.pageSize(count))}maxStartIndex(count=this.slideElements().length){return Math.max(0,count-this.pageSize(count))}normalizedIndex(count=this.slideElements().length){if(count===0)return 0;const max=this.loop?count-1:this.maxStartIndex(count);return finiteInteger(this.currentSlide,0,0,max)}pageTargets(count=this.slideElements().length){if(count===0)return[];if(this.loop)return Array.from({length:count},(_unused,index)=>index);const max=this.maxStartIndex(count),move=this.moveSize(count),targets=[0];for(let target=move;target<max;target+=move)targets.push(target);return max>0&&targets.at(-1)!==max&&targets.push(max),targets}visibleIndices(count,current){const visible=new Set,perPage=this.pageSize(count);for(let offset=0;offset<perPage;offset+=1){const index=this.loop?(current+offset)%count:current+offset;index>=0&&index<count&&visible.add(index)}return visible}announceActivePage(){if(!isAccessibilityVisible(this))return;const slides=this.slideElements();if(slides.length===0)return;const current=this.normalizedIndex(slides.length),visible=this.visibleIndices(slides.length,current),format=getNumberFormat(this.effectiveLocale),messages=slides.flatMap((slide,index)=>{if(!visible.has(index))return[];if(isAccessibilitySubtreeExcluded(slide))return[];const slideTextVisible=!isAccessibilityVisibilityHidden(slide),authoredLabel=slideTextVisible?this.snapshots.get(slide)?.label?.trim():"";if(authoredLabel)return[authoredLabel];const position=this.localize("carouselSlidePosition",void 0,{index:format.format(index+1),total:format.format(slides.length)}),content=Array.from(slide.childNodes).map(node=>composedAccessibilityText(node,slideTextVisible)).join(" ").replace(/\s+/g," ").trim();return!slideTextVisible&&!content?[]:[content&&content!==position?this.localize("carouselSlideAnnouncement",void 0,{position,content}):position]});this.announcementSink?.announce(messages.join(this.localize("carouselSlideAnnouncementSeparator")))}restoreAttribute(slide,name,value){value===null?slide.removeAttribute(name):slide.setAttribute(name,value)}snapshotSlide(slide){return{hidden:slide.hidden,inert:slide.inert,role:slide.getAttribute("role"),label:slide.getAttribute("aria-label"),roleDescription:slide.getAttribute("aria-roledescription"),ariaHidden:slide.getAttribute("aria-hidden")}}adoptChanges(slide,snapshot){const applied=this.appliedSnapshots.get(slide);if(!applied)return!1;const current=this.snapshotSlide(slide);let changed=!1;for(const key of SLIDE_SNAPSHOT_KEYS)current[key]!==applied[key]&&(snapshot[key]=current[key],changed=!0);return changed}restoreSlide(slide,snapshot){slide.hidden=snapshot.hidden,slide.inert=snapshot.inert,this.restoreAttribute(slide,"role",snapshot.role),this.restoreAttribute(slide,"aria-label",snapshot.label),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription),this.restoreAttribute(slide,"aria-hidden",snapshot.ariaHidden)}restoreSlides(){for(const[slide,snapshot]of this.snapshots)this.adoptChanges(slide,snapshot),this.restoreSlide(slide,snapshot);this.snapshots.clear()}syncSlides(){const slides=this.slideElements(),assigned=new Set(slides);for(const[slide,snapshot]of this.snapshots)this.adoptChanges(slide,snapshot)&&(this.loopClonesDirty=!0),assigned.has(slide)||(this.restoreSlide(slide,snapshot),this.snapshots.delete(slide));const current=this.normalizedIndex(slides.length);this.currentSlide!==current&&(this.currentSlide=current);const visible=this.visibleIndices(slides.length,current);this.repairFocusBeforeSlideExclusion(slides,visible);const format=getNumberFormat(this.effectiveLocale);slides.forEach((slide,slideIndex)=>{const existing=this.snapshots.get(slide),snapshot=existing??this.snapshotSlide(slide);existing||this.snapshots.set(slide,snapshot),slide.localName===tag("carousel-item")?(this.restoreAttribute(slide,"role",snapshot.role??"group"),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription??this.localize("carouselSlide")),this.restoreAttribute(slide,"aria-label",snapshot.label??this.localize("carouselSlidePosition",void 0,{index:format.format(slideIndex+1),total:format.format(slides.length)}))):(this.restoreAttribute(slide,"role",snapshot.role),this.restoreAttribute(slide,"aria-roledescription",snapshot.roleDescription),this.restoreAttribute(slide,"aria-label",snapshot.label)),slide.hidden=snapshot.hidden,visible.has(slideIndex)?(slide.inert=snapshot.inert,this.restoreAttribute(slide,"aria-hidden",snapshot.ariaHidden)):(slide.inert=!0,slide.setAttribute("aria-hidden","true")),this.appliedSnapshots.set(slide,this.snapshotSlide(slide))})}repairFocusBeforeSlideExclusion(slides,visible){const active=deepActiveElementIn(this.ownerDocument),focusedIndex=slides.findIndex(slide=>composedContains(slide,active)),focusedSlideWillBeExcluded=focusedIndex>=0&&!visible.has(focusedIndex),focusedSlideWasRemoved=focusedIndex<0&&this.lastFocusedSlide!==void 0&&!this.lastFocusedSlide.isConnected&&(active===null||active===this.ownerDocument.body);!focusedSlideWillBeExcluded&&!focusedSlideWasRemoved||(this.viewport?.focus(),this.lastFocusedSlide=void 0)}handleSlidesChanged(){const count=this.slideElements().length,active=activeElementIn(this.shadowRoot);if(active?.matches('[part~="pagination-item"]')){const children=active.parentElement.children,pages=this.pageTargets(count).length;(pages<2||[...children].indexOf(active)>=pages)&&(pages>1?children[pages-1]:this.viewport)?.focus()}else active?.matches('[part~="navigation-button"]')&&(!this.navigation||count<=this.pageSize(count))&&this.viewport?.focus();if(this._slides!==count){const previous=this._slides;this._slides=count,this.requestUpdate("slides",previous)}this.loopClonesDirty=!0,this.syncSlides(),this.syncLoopClones(),this.loopClonesDirty=!1,this.restartAutoplay(),this.requestUpdate()}prepareClone(original,index,side){if([original,...Array.from(original.querySelectorAll("*"))].some(element=>element.namespaceURI!=="http://www.w3.org/1999/xhtml"||element.localName.includes("-")||LOOP_SNAPSHOT_UNSAFE_TAGS.has(element.localName)))return;const clone=original.cloneNode(!0),descendants=[clone,...Array.from(clone.querySelectorAll("*"))];for(const descendant of descendants)descendant.removeAttribute("id"),descendant.removeAttribute("name"),descendant.removeAttribute("form"),descendant.removeAttribute("for"),descendant.removeAttribute("aria-controls"),descendant.removeAttribute("aria-describedby"),descendant.removeAttribute("aria-labelledby");return clone.removeAttribute("slot"),clone.dataset.carouselClone=side,clone.dataset.carouselIndex=String(index),clone.inert=!0,clone.setAttribute("aria-hidden","true"),clone}syncLoopClones(){const before=this.beforeClones,after=this.afterClones;if(!before||!after)return;before.replaceChildren(),after.replaceChildren();const slides=this.slideElements();if(!this.loop||slides.length<2)return;const cloneCount=Math.min(slides.length,Math.max(this.pageSize(slides.length),this.moveSize(slides.length))),beforeStart=slides.length-cloneCount;for(let index=beforeStart;index<slides.length;index+=1){const clone=this.prepareClone(slides[index],index,"before");clone&&before.append(clone)}for(let index=0;index<cloneCount;index+=1){const clone=this.prepareClone(slides[index],index,"after");clone&&after.append(clone)}}cloneFor(side,index){return(side==="before"?this.beforeClones:this.afterClones)?.querySelector(`[data-carousel-index="${index}"]`)??void 0}changeTo(index,behavior="smooth",origin="manual"){const slides=this.slideElements(),count=slides.length;if(count===0||!Number.isFinite(index))return;const requested=Math.trunc(index);let next,loopSide;if(this.loop?(next=(requested%count+count)%count,requested<0?loopSide="before":requested>=count&&(loopSide="after")):next=Math.min(this.maxStartIndex(count),Math.max(0,requested)),next===this.currentSlide)return;this.requestedBehavior=behavior,this.loopSide=loopSide;const previousOrigin=this.changeOrigin;this.changeOrigin=origin;try{this.currentSlide=next}finally{this.changeOrigin=previousOrigin}this.emit("lr-slide-change",{index:next,slide:slides[next]})}next(behavior="smooth"){this.changeTo(this.currentSlide+this.moveSize(),behavior)}previous(behavior="smooth"){this.changeTo(this.currentSlide-this.moveSize(),behavior)}goToSlide(index,behavior="smooth"){this.changeTo(index,behavior)}addSlide(slide){slide?.nodeType!==1||slide?.namespaceURI!=="http://www.w3.org/1999/xhtml"||(this.append(slide),this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()}))}removeSlide(index){if(!Number.isFinite(index))return;const target=this.slideElements()[Math.trunc(index)];target&&(target.remove(),this.queueOwnerMicrotask(()=>{this.isConnected&&this.handleSlidesChanged()}))}stopAutoplay(){this.timer!==void 0&&this.timerWindow?.clearInterval(this.timer),this.timer=void 0,this.timerWindow=void 0}restartAutoplay(){this.stopAutoplay();const count=this.slideElements().length,doc=this.visibilityDocument??this.ownerDocument,view=doc.defaultView;if(!this.isConnected||!view||!this.autoplay||this.reduceMotion||this.pointerInteracting||this.focusInteracting||this.dragPointerId!==void 0||doc.visibilityState!=="visible"||count<=this.pageSize(count))return;const interval=finiteDuration(this.autoplayInterval,3e3,1e3);this.timerWindow=view,this.timer=view.setInterval(()=>{this.loop||this.currentSlide<this.maxStartIndex()?this.changeTo(this.currentSlide+this.moveSize(),"smooth","autoplay"):this.stopAutoplay()},interval)}scrollPaddingStart(){const rect=this.scrollHintProbe?.getBoundingClientRect();if(!rect)return 0;const pixels=this.effectiveOrientation()==="vertical"?rect.height:rect.width;return Number.isFinite(pixels)?pixels:0}axisOffsetOf(slide,viewport){const viewportRect=viewport.getBoundingClientRect(),slideRect=slide.getBoundingClientRect(),padding=this.scrollPaddingStart();return this.effectiveOrientation()==="vertical"?slideRect.top-(viewportRect.top+padding):this.effectiveDirection==="rtl"?slideRect.right-(viewportRect.right-padding):slideRect.left-(viewportRect.left+padding)}scrollByAxis(viewport,distance,behavior){this.effectiveOrientation()==="vertical"?viewport.scrollBy({top:distance,behavior}):viewport.scrollBy({left:distance,behavior})}restingSlide(){const viewport=this.viewport,slides=this.slideElements();if(!viewport||slides.length===0)return;const candidates=slides.map((element,index)=>({element,index}));for(const clone of this.shadowRoot?.querySelectorAll("[data-carousel-clone]")??[]){const index=Number(clone.dataset.carouselIndex),cloneSide=clone.dataset.carouselClone;Number.isInteger(index)&&index>=0&&index<slides.length&&(cloneSide==="before"||cloneSide==="after")&&candidates.push({element:clone,index,cloneSide})}let nearest,nearestDistance=Number.POSITIVE_INFINITY;for(const candidate of candidates){const distance=Math.abs(this.axisOffsetOf(candidate.element,viewport));distance<nearestDistance&&(nearestDistance=distance,nearest=candidate)}return nearest}alignToActiveSlide(){const viewport=this.viewport,targetIndex=this.normalizedIndex(),realSlide=this.slideElements()[targetIndex];if(!viewport||!realSlide)return;const loopSide=this.loopSide,requestedBehavior=this.requestedBehavior;this.loopSide=void 0,this.requestedBehavior=void 0;const target=loopSide?this.cloneFor(loopSide,targetIndex)??realSlide:realSlide,offset=this.axisOffsetOf(target,viewport);if(Math.round(offset)===0){this.clearAlignment();return}this.alignIndex=targetIndex,this.alignTarget=target;const behavior=this.motionAwareScrollBehavior(requestedBehavior??"smooth",!0);this.scrollByAxis(viewport,offset,behavior)}motionAwareScrollBehavior(requested,instantBeforeFirstAlignment=!1){return this.reduceMotion||instantBeforeFirstAlignment&&!this.hasAlignedOnce?"instant":requested}cancelScrollSettle(){this.scrollSettle.cancel()}clearAlignment(){this.alignTarget=void 0,this.alignIndex=void 0,this.loopSide=void 0,this.requestedBehavior=void 0}takeOverViewport(){this.clearAlignment()}targetsInteractiveContent(event,includeSlideEditors=!1){const slides=new Set(this.slideElements());for(const target of event.composedPath()){if(!(target instanceof Element))continue;const slideRoot=slides.has(target);if(target===this||target===this.viewport||slideRoot&&!includeSlideEditors)continue;const name=target.localName;if(name==="a"||name==="button"||name==="input"||name==="label"||name==="select"||name==="textarea"||target.hasAttribute("contenteditable")||!slideRoot&&name.includes("-")&&target.getRootNode()!==this.shadowRoot)return!0;const role=target.getAttribute("role")?.trim().toLowerCase();if(role&&["button","checkbox","combobox","link","radio","slider","spinbutton","switch","textbox"].includes(role))return!0}return!1}finishDrag(pointerId,canceled){if(pointerId!==this.dragPointerId)return;const viewport=this.viewport,moved=this.dragMoved;if(this.dragPointerId=void 0,this.dragMoved=!1,viewport?.removeAttribute("data-dragging"),viewport?.hasPointerCapture(pointerId))try{viewport.releasePointerCapture(pointerId)}catch{}if(moved){this.suppressClick=!0,this.cancelClickSuppression();const view=this.ownerDocument.defaultView;view?(this.clickTimerWindow=view,this.clickTimer=view.setTimeout(()=>{this.suppressClick=!1,this.clickTimer=void 0,this.clickTimerWindow=void 0},0)):this.suppressClick=!1}if(canceled&&viewport){const active=this.slideElements()[this.normalizedIndex()];active&&this.scrollByAxis(viewport,this.axisOffsetOf(active,viewport),this.motionAwareScrollBehavior("smooth"))}else canceled||this.onViewportScroll();this.matches(":hover")||(this.pointerInteracting=!1),this.restartAutoplay()}cancelClickSuppression(){this.clickTimer!==void 0&&this.clickTimerWindow?.clearTimeout(this.clickTimer),this.clickTimer=void 0,this.clickTimerWindow=void 0}cancelDrag(realign){this.dragPointerId!==void 0&&this.finishDrag(this.dragPointerId,realign)}computedSlideBasis(perPage){return perPage===1?"100%":`calc((100% - (${perPage-1} * var(--slide-gap, var(--lr-space-m)))) / ${perPage})`}render(){const count=this.slideElements().length,current=this.normalizedIndex(count),pageTargets=this.pageTargets(count),exactCurrentPage=pageTargets.indexOf(current),currentPage=exactCurrentPage>=0?exactCurrentPage:pageTargets.reduce((nearest,target,pageIndex)=>Math.abs(target-current)<Math.abs(pageTargets[nearest]-current)?pageIndex:nearest,0),hasNavigation=this.navigation&&count>this.pageSize(count),hasPagination=this.pagination&&pageTargets.length>1,label=this.hostAccessibleLabel!==null?this.hostAccessibleLabel:this.accessibleLabel==null?this.localize("carouselLabel"):this.accessibleLabel,numberFormat=getNumberFormat(this.effectiveLocale),orientation=this.effectiveOrientation(),perPage=this.pageSize(count);return html`<section
|
|
2
2
|
part="base carousel"
|
|
3
3
|
role="region"
|
|
4
4
|
aria-roledescription=${this.localize("carousel")}
|
|
@@ -74,7 +74,7 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement,type
|
|
|
74
74
|
* @status stable
|
|
75
75
|
* @since 4.0.0
|
|
76
76
|
*/
|
|
77
|
-
export declare class LyraAccordion extends LyraElement<LyraAccordionEventMap>{#private;protected static readonly identityEventDetailProperties:Readonly<{'lr-expand':readonly string[];'lr-after-expand':readonly string[];'lr-collapse':readonly string[];'lr-after-collapse':readonly string[];'lr-toggle-request':readonly string[];}>;protected static readonly immutableEventDetails:readonly string[];static styles:import("lit").CSSResultGroup[];private readonly panels;
|
|
77
|
+
export declare class LyraAccordion extends LyraElement<LyraAccordionEventMap>{#private;protected static readonly identityEventDetailProperties:Readonly<{'lr-expand':readonly string[];'lr-after-expand':readonly string[];'lr-collapse':readonly string[];'lr-after-collapse':readonly string[];'lr-toggle-request':readonly string[];}>;protected static readonly immutableEventDetails:readonly string[];static styles:import("lit").CSSResultGroup[];private readonly panels;private itemsSlot?;
|
|
78
78
|
/**
|
|
79
79
|
* Controls whether one or multiple items can be expanded.
|
|
80
80
|
* @default 'multiple'
|
|
@@ -85,7 +85,7 @@ iconPlacement:LyraAccordionIconPlacement;
|
|
|
85
85
|
/** Heading level applied to direct items. Values other than 1–6 and `none` use h3. */
|
|
86
86
|
headingLevel:LyraAccordionHeadingLevel;
|
|
87
87
|
/** Visual treatment applied to the group and its direct items. */
|
|
88
|
-
appearance:LyraAccordionAppearance;connectedCallback():void;disconnectedCallback():void;protected updated(changed:PropertyValues<this>):void;
|
|
88
|
+
appearance:LyraAccordionAppearance;connectedCallback():void;disconnectedCallback():void;protected firstUpdated(changed:PropertyValues<this>):void;protected updated(changed:PropertyValues<this>):void;
|
|
89
89
|
/** Expand every direct enabled item. No-op outside `multiple` mode. */
|
|
90
90
|
expandAll():void;
|
|
91
91
|
/** Collapse every direct expanded item. */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property}from"lit/decorators.js";import{composedParentElement,deepActiveElementIn}from"../../../internal/active-element.js";import{isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{applyAccordionItemOwnerState,bindAccordionItemOwner,releaseAccordionItemOwner}from"./accordion-owner.js";import{styles}from"./accordion.styles.js";function normalizeMode(value){return value==="single"||value==="single-collapsible"?value:"multiple"}class LyraAccordion extends LyraElement{constructor(){super(...arguments),this.#_mode="multiple",this.panels=new Set,this.#panelsInitialized=!1,this.iconPlacement="end",this.headingLevel="3",this.appearance="outlined",this.#handleSlotChange=event=>{this.#
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,query}from"lit/decorators.js";import{composedParentElement,deepActiveElementIn}from"../../../internal/active-element.js";import{isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{applyAccordionItemOwnerState,bindAccordionItemOwner,releaseAccordionItemOwner}from"./accordion-owner.js";import{styles}from"./accordion.styles.js";function normalizeMode(value){return value==="single"||value==="single-collapsible"?value:"multiple"}class LyraAccordion extends LyraElement{constructor(){super(...arguments),this.#_mode="multiple",this.panels=new Set,this.#panelsInitialized=!1,this.iconPlacement="end",this.headingLevel="3",this.appearance="outlined",this.#handleSlotChange=event=>{this.#bindPanelsFromSlot(event.target)},this.#handleOwnedItemStateChange=item=>{this.panels.has(item)&&queueMicrotask(()=>{this.panels.has(item)&&this.#reconcileRovingFocus(item)})},this.handleFocusIn=event=>{const item=this.#itemFor(event);!item||!this.#isNavigableItem(item)||(this.#lastFocusedItem=item,this.#syncRovingTabIndex(item))},this.handleKeyDown=event=>{const current=this.#itemFor(event);if(!current||!this.#isNavigableItem(current)||!this.#itemTriggerOwnsEvent(current,event))return;const items=this.#navigableItems();if(items.length===0)return;const currentIndex=items.indexOf(current);if(currentIndex<0)return;const forwardKey=this.effectiveDirection==="rtl"?"ArrowLeft":"ArrowRight",backwardKey=this.effectiveDirection==="rtl"?"ArrowRight":"ArrowLeft";let nextIndex;if(event.key==="ArrowDown"||event.key===forwardKey?nextIndex=(currentIndex+1)%items.length:event.key==="ArrowUp"||event.key===backwardKey?nextIndex=(currentIndex-1+items.length)%items.length:event.key==="Home"?nextIndex=0:event.key==="End"&&(nextIndex=items.length-1),nextIndex===void 0)return;event.preventDefault(),event.stopPropagation();const next=items[nextIndex];this.#syncRovingTabIndex(next),next.focus()},this.#handleOwnedItemTransition=(item,expanded,source)=>!this.panels.has(item)||item.disabled||!expanded&&source==="user"&&this.mode==="single"?!1:expanded?this.#emitToggleVeto(item,!1)?this.mode==="multiple"||this.#collapseSiblings(item):!1:this.#emitToggleVeto(item,!0),this.#handleOwnedItemTransitionSettled=(item,expanded)=>{!this.panels.has(item)||item.expanded!==expanded||this.emit(expanded?"lr-after-expand":"lr-after-collapse",{item})}}static{this.identityEventDetailProperties=Object.freeze({"lr-expand":Object.freeze(["item"]),"lr-after-expand":Object.freeze(["item"]),"lr-collapse":Object.freeze(["item"]),"lr-after-collapse":Object.freeze(["item"]),"lr-toggle-request":Object.freeze(["item"])})}static{this.immutableEventDetails=Object.freeze(["lr-expand","lr-after-expand","lr-collapse","lr-after-collapse","lr-toggle-request"])}static{this.styles=[LyraElement.styles,styles]}#_mode;#rovingItem;#lastFocusedItem;#availabilityObserver;#panelsInitialized;get mode(){return this.#_mode}set mode(next){const normalized=normalizeMode(next),old=this.#_mode;if(normalized!==old){if(this.#panelsInitialized&&normalized!=="multiple"&&!this.#reconcileExpandedPanels(!1,normalized)){this.requestUpdate("mode",normalized);return}this.#_mode=normalized,this.requestUpdate("mode",old)}}connectedCallback(){super.connectedCallback(),this.#armAvailabilityObserver(),this.hasUpdated&&queueMicrotask(()=>{if(!this.isConnected)return;const slot=this.renderRoot.querySelector("slot");slot&&this.#bindPanels(slot.assignedElements({flatten:!0}))})}disconnectedCallback(){this.#resetAvailabilityObserver();for(const panel of this.panels)releaseAccordionItemOwner(panel,this);this.panels.clear(),this.#rovingItem=void 0,this.#lastFocusedItem=void 0,super.disconnectedCallback()}firstUpdated(changed){super.firstUpdated(changed);const slot=this.itemsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>this.#bindPanelsFromSlot(s))})}updated(changed){super.updated(changed),(changed.has("iconPlacement")||changed.has("headingLevel")||changed.has("appearance"))&&this.#syncPresentation()}expandAll(){if(this.mode==="multiple")for(const panel of this.panels)panel.disabled||panel.expanded||panel.expand()}collapseAll(){for(const panel of this.panels)panel.expanded&&this.#requestCollapse(panel)}#bindPanels(assigned){const itemTag=tag("accordion-item"),next=assigned.filter(element=>element.localName===itemTag),previous=new Set(this.panels);this.panels.clear();for(const panel of next)this.panels.add(panel);for(const panel of previous)this.panels.has(panel)||releaseAccordionItemOwner(panel,this);this.#syncPresentation(),this.#reconcileExpandedPanels(!this.#panelsInitialized),this.#panelsInitialized=!0,this.#syncRovingTabIndex()}#syncPresentation(){for(const panel of this.panels)bindAccordionItemOwner(panel,{owner:this,iconPlacement:this.iconPlacement,headingLevel:this.headingLevel,appearance:this.appearance,requestTransition:this.#handleOwnedItemTransition,transitionSettled:this.#handleOwnedItemTransitionSettled,stateChanged:this.#handleOwnedItemStateChange})}#reconcileExpandedPanels(silent=!1,mode=this.mode){if(mode==="multiple")return!0;let foundExpanded=!1;for(const panel of this.panels){if(!panel.expanded)continue;if(!foundExpanded){foundExpanded=!0;continue}if(!(silent?this.#performPanelState(panel,!1):this.#requestCollapse(panel)))return!1}return!0}#isNavigableItem(item){if(item.disabled)return!1;for(let current=item;current;current=composedParentElement(current))if(isAccessibilitySubtreeExcluded(current))return!1;return!0}#navigableItems(){return[...this.panels].filter(panel=>this.#isNavigableItem(panel))}#syncRovingTabIndex(preferred){const items=this.#navigableItems(),active=preferred&&items.includes(preferred)?preferred:this.#rovingItem&&items.includes(this.#rovingItem)?this.#rovingItem:items.find(item=>item.isTabbable)??items[0];active&&(this.#rovingItem=active);for(const panel of this.panels)panel.isTabbable=panel===active;return active}#nextNavigableItem(displaced){const items=[...this.panels],index=items.indexOf(displaced);return index<0?this.#navigableItems()[0]:items.slice(index+1).find(item=>this.#isNavigableItem(item))??items.slice(0,index).reverse().find(item=>this.#isNavigableItem(item))}#reconcileRovingFocus(displaced=this.#lastFocusedItem){const unavailable=displaced!==void 0&&this.panels.has(displaced)&&!this.#isNavigableItem(displaced),focused=deepActiveElementIn(this.ownerDocument),wasFocused=displaced===this.#lastFocusedItem&&(focused===null||focused===this.ownerDocument.body||focused===displaced||focused!==null&&displaced?.shadowRoot?.contains(focused)),active=this.#syncRovingTabIndex(unavailable?this.#nextNavigableItem(displaced):void 0);!unavailable||!active||!wasFocused||active.focus()}#armAvailabilityObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.#availabilityObserver)return;const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const observer=new MutationObserverCtor(()=>{this.#availabilityObserver!==observer||!this.isConnected||this.ownerDocument!==ownerDocument||this.#reconcileRovingFocus()});this.#availabilityObserver=observer,observer.observe(this,{attributes:!0,subtree:!0,attributeFilter:["disabled","hidden","aria-hidden","inert","class","style"]});for(let ancestor=composedParentElement(this);ancestor;ancestor=composedParentElement(ancestor))observer.observe(ancestor,{attributes:!0,attributeFilter:["hidden","aria-hidden","inert","class","style"]})}#resetAvailabilityObserver(){this.#availabilityObserver?.disconnect(),this.#availabilityObserver=void 0}#performPanelState(panel,expanded,announce=!1){return applyAccordionItemOwnerState(panel,expanded,announce),panel.expanded===expanded}#emitToggleVeto(item,collapsed){const directional=this.emit(collapsed?"lr-collapse":"lr-expand",{item},{cancelable:!0}),unified=this.emit("lr-toggle-request",{item,collapsed},{cancelable:!0});return!directional.defaultPrevented&&!unified.defaultPrevented}#requestCollapse(panel){return panel.expanded?this.#emitToggleVeto(panel,!0)?this.#performPanelState(panel,!1,!0):!1:!0}#collapseSiblings(source){for(const panel of this.panels)if(!(panel===source||!panel.expanded)&&!this.#requestCollapse(panel))return!1;return!0}#handleSlotChange;#bindPanelsFromSlot(slot){this.#bindPanels(slot.assignedElements({flatten:!0}))}#handleOwnedItemStateChange;#itemFor(event){const item=event.composedPath().find(node=>node?.nodeType===1&&node.localName===tag("accordion-item"));return item&&this.panels.has(item)?item:void 0}#itemTriggerOwnsEvent(item,event){return event.composedPath().some(node=>{if(node?.nodeType!==1)return!1;const element=node;return element.localName==="button"&&element.getRootNode()===item.shadowRoot&&element.getAttribute("part")?.split(/\s+/u).includes("button")===!0})}#handleOwnedItemTransition;#handleOwnedItemTransitionSettled;render(){return html`<div
|
|
2
2
|
part="base"
|
|
3
3
|
@focusin=${this.handleFocusIn}
|
|
4
4
|
@keydown=${this.handleKeyDown}
|
|
5
5
|
>
|
|
6
6
|
<slot @slotchange=${this.#handleSlotChange}></slot>
|
|
7
|
-
</div>`}}__decorate([property({reflect:!0})],LyraAccordion.prototype,"mode",null),__decorate([property({attribute:"icon-placement",reflect:!0})],LyraAccordion.prototype,"iconPlacement",void 0),__decorate([property({attribute:"heading-level",reflect:!0})],LyraAccordion.prototype,"headingLevel",void 0),__decorate([property({reflect:!0})],LyraAccordion.prototype,"appearance",void 0);export{LyraAccordion};
|
|
7
|
+
</div>`}}__decorate([query("slot:not([name])")],LyraAccordion.prototype,"itemsSlot",void 0),__decorate([property({reflect:!0})],LyraAccordion.prototype,"mode",null),__decorate([property({attribute:"icon-placement",reflect:!0})],LyraAccordion.prototype,"iconPlacement",void 0),__decorate([property({attribute:"heading-level",reflect:!0})],LyraAccordion.prototype,"headingLevel",void 0),__decorate([property({reflect:!0})],LyraAccordion.prototype,"appearance",void 0);export{LyraAccordion};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export*from'./filter-bar.class.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export*from"./filter-bar.class.js";import{LyraFilterBar}from"./filter-bar.class.js";import{defineElement}from"../../../internal/prefix.js";defineElement("filter-bar",LyraFilterBar);
|