@ds-mo/ui 15.11.2 → 15.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +120 -19
- package/dist/angular/ds-card-action-center.d.ts +1 -1
- package/dist/angular/ds-card-action-center.js +3 -3
- package/dist/angular/ds-card-chart.d.ts +1 -1
- package/dist/angular/ds-card-chart.js +3 -3
- package/dist/angular/ds-card-navigation.d.ts +1 -1
- package/dist/angular/ds-card-navigation.js +3 -3
- package/dist/angular/ds-card-setting.d.ts +1 -1
- package/dist/angular/ds-card-setting.js +3 -3
- package/dist/angular/ds-card-settings-scope.d.ts +1 -1
- package/dist/angular/ds-card-settings-scope.js +3 -3
- package/dist/angular/ds-field.d.ts +1 -1
- package/dist/angular/ds-field.js +3 -3
- package/dist/angular/ds-inline-banner-settings.d.ts +1 -1
- package/dist/angular/ds-inline-banner-settings.js +3 -3
- package/dist/angular/ds-pagination.d.ts +1 -1
- package/dist/angular/ds-pagination.js +3 -3
- package/dist/angular/ds-radio.d.ts +1 -1
- package/dist/angular/ds-radio.js +3 -3
- package/dist/angular/ds-setting-row-radio.d.ts +1 -1
- package/dist/angular/ds-setting-row-radio.js +3 -3
- package/dist/angular/ds-setting-row-toggle.d.ts +1 -1
- package/dist/angular/ds-setting-row-toggle.js +3 -3
- package/dist/angular/ds-skeleton.d.ts +1 -1
- package/dist/angular/ds-skeleton.js +3 -3
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-response.js.map +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-action.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-page-title.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-breadcrumb.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-inverted.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-calendar.js +1 -1
- package/dist/components/ds-card-action-center.js +1 -1
- package/dist/components/ds-card-action-center.js.map +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-chart.js.map +1 -1
- package/dist/components/ds-card-navigation.js +1 -1
- package/dist/components/ds-card-navigation.js.map +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-overview.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-setting.js.map +1 -1
- package/dist/components/ds-card-settings-scope.js +1 -1
- package/dist/components/ds-card-settings-scope.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart.js +1 -1
- package/dist/components/ds-checkbox-group.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-data-customize.js +1 -1
- package/dist/components/ds-data-customize.js.map +1 -1
- package/dist/components/ds-data-filter.js +1 -1
- package/dist/components/ds-data-group.js +1 -1
- package/dist/components/ds-data-preferences.js +1 -1
- package/dist/components/ds-data-saved-views.js +1 -1
- package/dist/components/ds-data-saved-views.js.map +1 -1
- package/dist/components/ds-data-search.js +1 -1
- package/dist/components/ds-data-sort.js +1 -1
- package/dist/components/ds-data-toolbar.js +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-inline-banner-settings.js +1 -1
- package/dist/components/ds-inline-banner-settings.js.map +1 -1
- package/dist/components/ds-input-date.js +1 -1
- package/dist/components/ds-input-time.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-map-cluster-marker.js +1 -1
- package/dist/components/ds-map-entity-marker.js +1 -1
- package/dist/components/ds-map-marker.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-bubble.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-navigation-tab-group.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-paper-texture.js +1 -1
- package/dist/components/ds-radio-tile.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-score.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-select-toggle.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-setting-row-checkbox.js +1 -1
- package/dist/components/ds-setting-row-radio.js +1 -1
- package/dist/components/ds-setting-row-radio.js.map +1 -1
- package/dist/components/ds-setting-row-toggle.js +1 -1
- package/dist/components/ds-setting-row-toggle.js.map +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-app.js.map +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-textarea.js +1 -1
- package/dist/components/ds-time-picker.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-tooltip-chart.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/p-3Xp9hXbL.js +2 -0
- package/dist/components/{p-BI6L3JoU.js.map → p-3Xp9hXbL.js.map} +1 -1
- package/dist/components/{p-6QYDIPd1.js → p-3dG9v5Aw.js} +2 -2
- package/dist/components/{p-C4kVTIBc.js → p-5PReYMiY.js} +2 -2
- package/dist/components/{p-CzTJAO2J.js → p-8fddX3V3.js} +2 -2
- package/dist/components/{p-Cw1ljgW1.js → p-9u2WDF0J.js} +2 -2
- package/dist/components/{p-M9pOLcyK.js → p-B-ChwMFE.js} +2 -2
- package/dist/components/{p-BvlkO__o.js → p-BAIYOobl.js} +2 -2
- package/dist/components/{p-BrJebF5t.js → p-BIMW5_Z7.js} +2 -2
- package/dist/components/{p-BkKdzYZP.js → p-BMI0F08u.js} +2 -2
- package/dist/components/{p-D0kzIzGQ.js → p-BV8sNEVP.js} +2 -2
- package/dist/components/{p-DNtwJJOC.js → p-BVUdtuog.js} +2 -2
- package/dist/components/{p-CgYDQSLW.js → p-BYo1-6b5.js} +2 -2
- package/dist/components/{p-CJ-igzsZ.js → p-BZbJkJpG.js} +2 -2
- package/dist/components/{p-D2rASHHq.js → p-BcYzHn1E.js} +2 -2
- package/dist/components/{p-0EpjqRWc.js → p-BfRAVR40.js} +2 -2
- package/dist/components/p-BhbniDw4.js +2 -0
- package/dist/components/p-BhbniDw4.js.map +1 -0
- package/dist/components/{p-BBZz2Dvg.js → p-BoWpIl_m.js} +2 -2
- package/dist/components/{p-529k8euH.js → p-BpPHCF63.js} +2 -2
- package/dist/components/{p-DXEInGEq.js → p-By_jYvHp.js} +2 -2
- package/dist/components/p-C5HGwzy9.js +2 -0
- package/dist/components/{p-CXF8wj9I.js.map → p-C5HGwzy9.js.map} +1 -1
- package/dist/components/{p-D4r6oWyQ.js → p-C860ilDn.js} +2 -2
- package/dist/components/{p-DcVK0W4X.js → p-CEHhx4VQ.js} +2 -2
- package/dist/components/p-CGtq7TnC.js +2 -0
- package/dist/components/p-CGtq7TnC.js.map +1 -0
- package/dist/components/p-CL0FpMKo.js +2 -0
- package/dist/components/{p-BjYoM1f8.js.map → p-CL0FpMKo.js.map} +1 -1
- package/dist/components/{p-CEm0AoDR.js → p-CQnjpuMX.js} +2 -2
- package/dist/components/{p-4qKHg502.js → p-CUG4EkKn.js} +2 -2
- package/dist/components/{p-CTstnsLe.js → p-CYmz92EF.js} +2 -2
- package/dist/components/{p-YE1r-XSR.js → p-CbP9ASmI.js} +2 -2
- package/dist/components/{p-C31AjGbg.js → p-CbPGO7vl.js} +2 -2
- package/dist/components/{p-DfphSI9S.js → p-CdMIA5hz.js} +2 -2
- package/dist/components/{p-Ds58qo_J.js → p-CeaIWw1Q.js} +2 -2
- package/dist/components/{p-DxVokKm8.js → p-Cfqvxxs2.js} +2 -2
- package/dist/components/{p-CsPqGA8B.js → p-CpqLGzv4.js} +2 -2
- package/dist/components/p-D538svhW.js +2 -0
- package/dist/components/p-D538svhW.js.map +1 -0
- package/dist/components/{p-DKg181YU.js → p-DFR9hqDU.js} +2 -2
- package/dist/components/{p-DEJLfD7k.js → p-DKZP3jCY.js} +2 -2
- package/dist/components/{p-CTAF7SkL.js → p-DMPn_dt7.js} +2 -2
- package/dist/components/{p-CYRTkP1A.js → p-DYruK9cb.js} +2 -2
- package/dist/components/p-DcvPY30Q.js +2 -0
- package/dist/components/p-DcvPY30Q.js.map +1 -0
- package/dist/components/{p-CqfYCn-e.js → p-DiUaIJ91.js} +2 -2
- package/dist/components/{p-Cqg9T781.js → p-DimFbKZH.js} +2 -2
- package/dist/components/{p-DHmHllUM.js → p-DuhJ49iN.js} +2 -2
- package/dist/components/{p-D_iZPukF.js → p-G6r6yYg8.js} +2 -2
- package/dist/components/{p-87FjWil8.js → p-IQdLCfJJ.js} +2 -2
- package/dist/components/{p-CAARHqjE.js → p-KTaiJztz.js} +2 -2
- package/dist/components/{p-BM-UYlIS.js → p-N-2CZze7.js} +2 -2
- package/dist/components/{p-Ch00yccW.js → p-Nx52go85.js} +2 -2
- package/dist/components/{p-DDawngok.js → p-P2-eHQJU.js} +2 -2
- package/dist/components/{p-CC4X8rpT.js → p-WEffoQQD.js} +2 -2
- package/dist/components/{p-vrRbdZAI.js → p-nakO4viw.js} +2 -2
- package/dist/components/{p-BC9xYdJD.js → p-pkJ3X3s7.js} +2 -2
- package/dist/components/{p-C6VWVB87.js → p-r_e6_0nP.js} +2 -2
- package/dist/docs/components.json +656 -7
- package/dist/lint/index.js +1 -1
- package/dist/mcp-data/registry/card-action-center.json +23 -3
- package/dist/mcp-data/registry/card-chart.json +23 -3
- package/dist/mcp-data/registry/card-navigation.json +23 -3
- package/dist/mcp-data/registry/card-overview.json +2 -2
- package/dist/mcp-data/registry/card-setting.json +23 -3
- package/dist/mcp-data/registry/card-settings-scope.json +22 -2
- package/dist/mcp-data/registry/field.json +22 -2
- package/dist/mcp-data/registry/inline-banner-settings.json +22 -2
- package/dist/mcp-data/registry/pagination.json +22 -2
- package/dist/mcp-data/registry/radio.json +22 -2
- package/dist/mcp-data/registry/registry.json +119 -18
- package/dist/mcp-data/registry/setting-row-radio.json +22 -2
- package/dist/mcp-data/registry/setting-row-toggle.json +23 -3
- package/dist/mcp-data/registry/shell-app.json +3 -2
- package/dist/mcp-data/registry/skeleton.json +120 -9
- package/dist/mcp-data/registry/table.json +7 -6
- package/dist/types/components/CardActionCenter/CardActionCenter.d.ts +2 -0
- package/dist/types/components/CardChart/CardChart.d.ts +2 -0
- package/dist/types/components/CardNavigation/CardNavigation.d.ts +2 -0
- package/dist/types/components/CardSetting/CardSetting.d.ts +2 -0
- package/dist/types/components/CardSettingsScope/CardSettingsScope.d.ts +2 -0
- package/dist/types/components/Field/Field.d.ts +3 -0
- package/dist/types/components/InlineBannerSettings/InlineBannerSettings.d.ts +2 -0
- package/dist/types/components/Pagination/Pagination.d.ts +3 -0
- package/dist/types/components/Radio/Radio.d.ts +2 -0
- package/dist/types/components/SettingRowRadio/SettingRowRadio.d.ts +2 -0
- package/dist/types/components/SettingRowToggle/SettingRowToggle.d.ts +2 -0
- package/dist/types/components/Skeleton/Skeleton.d.ts +24 -1
- package/dist/types/components/Skeleton/index.d.ts +1 -1
- package/dist/types/components/Table/Table.d.ts +1 -1
- package/dist/types/components.d.ts +180 -4
- package/dist/vue/ds-card-action-center.js +1 -0
- package/dist/vue/ds-card-chart.js +1 -0
- package/dist/vue/ds-card-navigation.js +1 -0
- package/dist/vue/ds-card-setting.js +1 -0
- package/dist/vue/ds-card-settings-scope.js +1 -0
- package/dist/vue/ds-field.js +2 -1
- package/dist/vue/ds-inline-banner-settings.js +2 -1
- package/dist/vue/ds-pagination.js +1 -0
- package/dist/vue/ds-radio.js +1 -0
- package/dist/vue/ds-setting-row-radio.js +2 -1
- package/dist/vue/ds-setting-row-toggle.js +1 -0
- package/dist/vue/ds-skeleton.js +5 -0
- package/package.json +1 -1
- package/dist/components/p-BI6L3JoU.js +0 -2
- package/dist/components/p-BjYoM1f8.js +0 -2
- package/dist/components/p-CXF8wj9I.js +0 -2
- package/dist/components/p-Cnzry0_v.js +0 -2
- package/dist/components/p-Cnzry0_v.js.map +0 -1
- package/dist/components/p-DwcAROOo.js +0 -2
- package/dist/components/p-DwcAROOo.js.map +0 -1
- package/dist/components/p-hWKa8Jn8.js +0 -2
- package/dist/components/p-hWKa8Jn8.js.map +0 -1
- package/dist/components/p-xCqqM1Rg.js +0 -2
- package/dist/components/p-xCqqM1Rg.js.map +0 -1
- /package/dist/components/{p-6QYDIPd1.js.map → p-3dG9v5Aw.js.map} +0 -0
- /package/dist/components/{p-C4kVTIBc.js.map → p-5PReYMiY.js.map} +0 -0
- /package/dist/components/{p-CzTJAO2J.js.map → p-8fddX3V3.js.map} +0 -0
- /package/dist/components/{p-Cw1ljgW1.js.map → p-9u2WDF0J.js.map} +0 -0
- /package/dist/components/{p-M9pOLcyK.js.map → p-B-ChwMFE.js.map} +0 -0
- /package/dist/components/{p-BvlkO__o.js.map → p-BAIYOobl.js.map} +0 -0
- /package/dist/components/{p-BrJebF5t.js.map → p-BIMW5_Z7.js.map} +0 -0
- /package/dist/components/{p-BkKdzYZP.js.map → p-BMI0F08u.js.map} +0 -0
- /package/dist/components/{p-D0kzIzGQ.js.map → p-BV8sNEVP.js.map} +0 -0
- /package/dist/components/{p-DNtwJJOC.js.map → p-BVUdtuog.js.map} +0 -0
- /package/dist/components/{p-CgYDQSLW.js.map → p-BYo1-6b5.js.map} +0 -0
- /package/dist/components/{p-CJ-igzsZ.js.map → p-BZbJkJpG.js.map} +0 -0
- /package/dist/components/{p-D2rASHHq.js.map → p-BcYzHn1E.js.map} +0 -0
- /package/dist/components/{p-0EpjqRWc.js.map → p-BfRAVR40.js.map} +0 -0
- /package/dist/components/{p-BBZz2Dvg.js.map → p-BoWpIl_m.js.map} +0 -0
- /package/dist/components/{p-529k8euH.js.map → p-BpPHCF63.js.map} +0 -0
- /package/dist/components/{p-DXEInGEq.js.map → p-By_jYvHp.js.map} +0 -0
- /package/dist/components/{p-D4r6oWyQ.js.map → p-C860ilDn.js.map} +0 -0
- /package/dist/components/{p-DcVK0W4X.js.map → p-CEHhx4VQ.js.map} +0 -0
- /package/dist/components/{p-CEm0AoDR.js.map → p-CQnjpuMX.js.map} +0 -0
- /package/dist/components/{p-4qKHg502.js.map → p-CUG4EkKn.js.map} +0 -0
- /package/dist/components/{p-CTstnsLe.js.map → p-CYmz92EF.js.map} +0 -0
- /package/dist/components/{p-YE1r-XSR.js.map → p-CbP9ASmI.js.map} +0 -0
- /package/dist/components/{p-C31AjGbg.js.map → p-CbPGO7vl.js.map} +0 -0
- /package/dist/components/{p-DfphSI9S.js.map → p-CdMIA5hz.js.map} +0 -0
- /package/dist/components/{p-Ds58qo_J.js.map → p-CeaIWw1Q.js.map} +0 -0
- /package/dist/components/{p-DxVokKm8.js.map → p-Cfqvxxs2.js.map} +0 -0
- /package/dist/components/{p-CsPqGA8B.js.map → p-CpqLGzv4.js.map} +0 -0
- /package/dist/components/{p-DKg181YU.js.map → p-DFR9hqDU.js.map} +0 -0
- /package/dist/components/{p-DEJLfD7k.js.map → p-DKZP3jCY.js.map} +0 -0
- /package/dist/components/{p-CTAF7SkL.js.map → p-DMPn_dt7.js.map} +0 -0
- /package/dist/components/{p-CYRTkP1A.js.map → p-DYruK9cb.js.map} +0 -0
- /package/dist/components/{p-CqfYCn-e.js.map → p-DiUaIJ91.js.map} +0 -0
- /package/dist/components/{p-Cqg9T781.js.map → p-DimFbKZH.js.map} +0 -0
- /package/dist/components/{p-DHmHllUM.js.map → p-DuhJ49iN.js.map} +0 -0
- /package/dist/components/{p-D_iZPukF.js.map → p-G6r6yYg8.js.map} +0 -0
- /package/dist/components/{p-87FjWil8.js.map → p-IQdLCfJJ.js.map} +0 -0
- /package/dist/components/{p-CAARHqjE.js.map → p-KTaiJztz.js.map} +0 -0
- /package/dist/components/{p-BM-UYlIS.js.map → p-N-2CZze7.js.map} +0 -0
- /package/dist/components/{p-Ch00yccW.js.map → p-Nx52go85.js.map} +0 -0
- /package/dist/components/{p-DDawngok.js.map → p-P2-eHQJU.js.map} +0 -0
- /package/dist/components/{p-CC4X8rpT.js.map → p-WEffoQQD.js.map} +0 -0
- /package/dist/components/{p-vrRbdZAI.js.map → p-nakO4viw.js.map} +0 -0
- /package/dist/components/{p-BC9xYdJD.js.map → p-pkJ3X3s7.js.map} +0 -0
- /package/dist/components/{p-C6VWVB87.js.map → p-r_e6_0nP.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["resolveMobileSectionPosition","sections","value","selectable","getSelectableTabs","matchedIndex","findIndex","section","id","selectedIndex","selected","hasPrevious","hasNext","length","mobileSectionSwitcherCss","nextMobileSectionSwitcherId","MobileSectionSwitcher","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navigationLabel","presentation","pageLabel","menuOpen","menuSurfaceOpen","initialFocusVisible","pointerFocus","sheetClosing","focusedSection","instanceId","triggerId","menuId","triggerEl","dialogEl","browserEdgeEl","browserEdgeColors","closeTimer","loaded","tasks","ConnectionTasks","el","isConnected","handleDocumentKeyDown","event","includes","key","updateBrowserEdgeColor","base","getComputedStyle","color","shade","backgroundColor","colors","canvas","ownerDocument","createElement","width","height","context","getContext","fillStyle","fillRect","red","green","blue","getImageData","data","style","setProperty","handleSheetKeyDown","preventDefault","stopPropagation","closeMenu","selectableSections","filter","isInactive","index","Math","max","next","ctrlKey","metaKey","altKey","match","_","offset","label","toLowerCase","startsWith","focusSheetItem","toggleMenu","detail","selectedSection","open","handleSelect","String","find","candidate","dsChange","emit","frame","focus","componentDidLoad","connectResources","connectedCallback","boundDocument","addEventListener","visibilityObserver","ResizeObserver","guard","getClientRects","finishSheetClose","observe","componentDidRender","initialSection","observeBrowserEdgeTheme","showModal","duration","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort2","animationDurationShort3","setTimeout","disconnectedCallback","cancel","removeEventListener","undefined","disconnect","handlePresentationChange","handleContextChange","restoreFocus","clearTimeout","wasOpen","close","themeObserver","MutationObserver","ancestor","parentElement","attributes","attributeFilter","buttons","Array","from","querySelectorAll","button","item","disabled","resolvedSections","triggerAriaLabel","menuSections","groups","items","commit","push","isTabDivider","dot","isSelected","handleSectionsChange","renderSheet","h","ref","element","class","tabIndex","onCancel","onKeyDown","onClick","target","rect","getBoundingClientRect","clientY","top","bottom","clientX","left","right","role","map","type","onFocus","as","variant","emphasis","lineTruncation","render","Host","combined","onPointerDown","anchorId","align","menuLabel","onDsClose","onDsAfterClose","onDsSelect"],"sources":["src/wc/components/MobileSectionSwitcher/mobile-section-switcher-utils.ts","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.css?tag=ds-mobile-section-switcher&encapsulation=scoped","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.tsx"],"sourcesContent":["import { getSelectableTabs, type TabItem, type TabItemTab } from '../TabGroup/tab-item-utils';\n\nexport interface MobileSectionPosition {\n selectedIndex: number;\n selected?: TabItemTab;\n hasPrevious: boolean;\n hasNext: boolean;\n}\n\n/** Resolve ordered selectable neighbors while ignoring visual divider entries. */\nexport function resolveMobileSectionPosition(\n sections: TabItem[],\n value: string\n): MobileSectionPosition {\n const selectable = getSelectableTabs(sections);\n const matchedIndex = selectable.findIndex(section => section.id === value);\n const selectedIndex = matchedIndex >= 0 ? matchedIndex : 0;\n return {\n selectedIndex,\n selected: selectable[selectedIndex],\n hasPrevious: selectedIndex > 0,\n hasNext: selectedIndex < selectable.length - 1,\n };\n}\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n\n:host {\n display: block;\n min-width: 0;\n max-width: 100%;\n color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n appearance: none;\n display: grid;\n grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-050);\n max-width: 100%;\n min-height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n border: 0;\n border-radius: var(--dimension-radius-100);\n background: var(--color-background-secondary);\n color: inherit;\n box-sizing: border-box;\n cursor: default;\n}\n\n.mobile-section-switcher__label {\n min-width: 0;\n max-width: 100%;\n text-align: center;\n}\n\n.mobile-section-switcher__position {\n width: var(--dimension-size-050);\n height: var(--dimension-size-050);\n border-radius: var(--dimension-radius-half);\n background: currentColor;\n opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n opacity: 1;\n}\n\n.mobile-section-switcher--sheet {\n grid-template-columns: minmax(0, auto);\n min-height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n border-radius: var(--dimension-radius-half);\n background: transparent;\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n.mobile-section-switcher--combined {\n display: flex;\n}\n\n.mobile-section-switcher__page-label {\n flex: 0 1 auto;\n min-width: 0;\n}\n\n.mobile-section-switcher__separator {\n flex: 0 0 auto;\n}\n\n.mobile-section-switcher--combined .mobile-section-switcher__label {\n flex: 0 0 auto;\n max-width: 50%;\n}\n\n.mobile-section-sheet {\n position: fixed;\n inset: 0 0 auto;\n width: 100%;\n max-width: none;\n max-height: calc(100dvh - var(--dimension-size-400) - var(--dimension-space-200));\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 0;\n box-sizing: border-box;\n overflow: visible;\n background: transparent;\n color: var(--color-foreground-secondary);\n outline: none;\n}\n\n.mobile-section-sheet[open] {\n display: flex;\n flex-direction: column;\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__items {\n animation: mobileSectionSheetIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet::backdrop {\n background: var(--color-background-shade);\n animation: mobileSectionShadeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__items {\n animation-name: mobileSectionSheetOut;\n}\n\n.mobile-section-sheet--closing::backdrop {\n animation-name: mobileSectionShadeOut;\n}\n\n.mobile-section-sheet__items {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-100);\n min-height: 0;\n max-height: inherit;\n box-sizing: border-box;\n background: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-floating);\n padding: var(--dimension-space-100);\n padding-block-start: max(var(--dimension-space-100), env(safe-area-inset-top, 0px));\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n.mobile-section-sheet__item {\n appearance: none;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n height: var(--ds-control-height);\n width: 100%;\n min-width: 0;\n padding: 0 var(--ds-control-padding-inline);\n box-sizing: border-box;\n border: 0;\n border-radius: var(--ds-control-radius);\n background: transparent;\n color: inherit;\n text-align: start;\n}\n\n.mobile-section-sheet__item[aria-current='page'] {\n color: var(--color-foreground-primary);\n}\n\n.mobile-section-sheet__item:disabled {\n color: var(--color-foreground-tertiary);\n}\n\n.mobile-section-sheet__label {\n min-width: 0;\n padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-section-sheet__divider {\n flex: 0 0 auto;\n height: var(--dimension-stroke-width-012);\n margin-inline: var(--dimension-space-100);\n background: var(--color-border-tertiary);\n}\n\n@keyframes mobileSectionSheetIn {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes mobileSectionSheetOut {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n\n@keyframes mobileSectionShadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes mobileSectionShadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n/* Safari can preserve :focus-visible across modal entry and focus return after\n * a tap. Track the actual input, while leaving focus and keyboard access intact. */\n:host(.mobile-section-switcher--pointer-focus) .ds-focus-ring-inset::after {\n outline: none;\n}\n\n/* Keep this opaque strip in the modal top layer, outside the moving sheet.\n * Safari samples fixed edge backgrounds to tint its browser controls. */\n.mobile-section-sheet__browser-edge {\n position: fixed;\n inset: auto 0 0;\n height: max(var(--dimension-space-200), env(safe-area-inset-bottom, 0px));\n pointer-events: none;\n color: var(--color-background-primary);\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__browser-edge {\n animation: mobileSectionEdgeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__browser-edge {\n animation-name: mobileSectionEdgeOut;\n}\n\n/* Animate the opaque color, not opacity: the backdrop is already fading below. */\n@keyframes mobileSectionEdgeIn {\n from {\n background-color: var(--color-background-primary);\n }\n to {\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n }\n}\n\n@keyframes mobileSectionEdgeOut {\n from {\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n }\n to {\n background-color: var(--color-background-primary);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mobile-section-sheet[open] .mobile-section-sheet__items,\n .mobile-section-sheet[open] .mobile-section-sheet__browser-edge,\n .mobile-section-sheet::backdrop {\n animation: none;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\nimport { resolveMobileSectionPosition } from './mobile-section-switcher-utils';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\n\nlet nextMobileSectionSwitcherId = 0;\n\n@Component({\n tag: 'ds-mobile-section-switcher',\n styleUrl: 'MobileSectionSwitcher.css',\n scoped: true,\n})\nexport class MobileSectionSwitcher {\n @Element() el!: HTMLElement;\n\n /** Ordered controlled sections. Divider entries group the popup menu. */\n @Prop() sections: TabItem[] = [];\n /** Controlled selected section id. */\n @Prop() value: string = '';\n /** Accessible name for the section chooser. */\n @Prop() navigationLabel: string = 'Change page section';\n /** Anchored local-view menu or viewport-edge sheet for primary page sections. */\n @Prop() presentation: 'menu' | 'sheet' = 'menu';\n /** Stable page identity shown before the selected section in a sheet trigger. */\n @Prop() pageLabel: string = '';\n\n /** Selection intent. The route, tool, or workflow owner updates `value`. */\n @Event() dsChange!: EventEmitter<string>;\n\n @State() private menuOpen = false;\n @State() private menuSurfaceOpen = false;\n @State() private initialFocusVisible = false;\n @State() private pointerFocus = false;\n @State() private sheetClosing = false;\n @State() private focusedSection = '';\n\n private readonly instanceId = nextMobileSectionSwitcherId++;\n private readonly triggerId = `ds-mobile-section-switcher-trigger-${this.instanceId}`;\n private readonly menuId = `ds-mobile-section-switcher-menu-${this.instanceId}`;\n private triggerEl: HTMLButtonElement | null = null;\n private dialogEl: HTMLDialogElement | null = null;\n private browserEdgeEl: HTMLDivElement | null = null;\n private browserEdgeColors = '';\n private themeObserver?: MutationObserver;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private visibilityObserver?: ResizeObserver;\n private loaded = false;\n private boundDocument?: Document;\n private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (['Shift', 'Control', 'Alt', 'Meta'].includes(event.key)) return;\n this.pointerFocus = false;\n };\n\n componentDidLoad() {\n this.loaded = true;\n this.connectResources();\n }\n\n connectedCallback() {\n if (this.loaded) this.connectResources();\n }\n\n private connectResources() {\n if (!this.el.isConnected || this.boundDocument) return;\n this.boundDocument = this.el.ownerDocument;\n this.boundDocument.addEventListener('keydown', this.handleDocumentKeyDown, true);\n this.visibilityObserver = new ResizeObserver(\n this.tasks.guard(() => {\n if (this.dialogEl?.open && !this.triggerEl?.getClientRects().length) {\n this.finishSheetClose(false);\n }\n })\n );\n this.visibilityObserver.observe(this.el);\n }\n\n componentDidRender() {\n if (!this.el.isConnected || !this.dialogEl) return;\n if (this.presentation === 'sheet' && this.menuOpen && !this.dialogEl.open) {\n const initialSection = this.focusedSection;\n this.updateBrowserEdgeColor();\n this.observeBrowserEdgeTheme();\n this.dialogEl.showModal();\n this.focusSheetItem(initialSection);\n }\n if (this.sheetClosing && this.dialogEl.open && !this.closeTimer) {\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort2,\n TOKEN_DEFAULTS.animationDurationShort3\n );\n if (!duration) this.finishSheetClose();\n else this.closeTimer = setTimeout(() => this.finishSheetClose(), duration);\n }\n }\n\n disconnectedCallback() {\n this.tasks.cancel();\n this.boundDocument?.removeEventListener('keydown', this.handleDocumentKeyDown, true);\n this.boundDocument = undefined;\n this.visibilityObserver?.disconnect();\n this.visibilityObserver = undefined;\n this.pointerFocus = false;\n this.menuSurfaceOpen = false;\n this.finishSheetClose(false);\n }\n\n @Watch('presentation')\n handlePresentationChange() {\n this.menuSurfaceOpen = false;\n this.closeMenu();\n }\n\n @Watch('value')\n @Watch('pageLabel')\n handleContextChange() {\n this.closeMenu();\n }\n\n private finishSheetClose(restoreFocus = true) {\n if (this.closeTimer) clearTimeout(this.closeTimer);\n this.closeTimer = null;\n const wasOpen = this.dialogEl?.open;\n this.dialogEl?.close();\n this.themeObserver?.disconnect();\n this.menuOpen = false;\n this.sheetClosing = false;\n if (wasOpen && restoreFocus && this.triggerEl?.getClientRects().length) this.triggerEl.focus();\n }\n\n private updateBrowserEdgeColor = () => {\n if (!this.el.isConnected || !this.browserEdgeEl || !this.dialogEl) return;\n const base = getComputedStyle(this.browserEdgeEl).color;\n const shade = getComputedStyle(this.dialogEl, '::backdrop').backgroundColor;\n const colors = `${base}|${shade}`;\n if (colors === this.browserEdgeColors) return;\n // Let the browser resolve token colors, including alpha and non-sRGB syntax,\n // then flatten the shade over the bar into the opaque color Safari samples.\n const canvas = this.el.ownerDocument.createElement('canvas');\n canvas.width = canvas.height = 1;\n const context = canvas.getContext('2d');\n if (!context) return;\n context.fillStyle = base;\n context.fillRect(0, 0, 1, 1);\n context.fillStyle = shade;\n context.fillRect(0, 0, 1, 1);\n const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;\n this.browserEdgeEl.style.setProperty(\n '--_mobile-section-edge-color',\n `rgb(${red}, ${green}, ${blue})`\n );\n this.browserEdgeColors = colors;\n };\n\n private observeBrowserEdgeTheme() {\n this.themeObserver ??= new MutationObserver(this.updateBrowserEdgeColor);\n // Token themes are inherited from the page or a containing theme scope.\n for (let ancestor: HTMLElement | null = this.el; ancestor; ancestor = ancestor.parentElement) {\n this.themeObserver.observe(ancestor, {\n attributes: true,\n attributeFilter: ['class', 'style', 'data-theme'],\n });\n }\n }\n\n private focusSheetItem(id: string) {\n const buttons = Array.from(this.dialogEl?.querySelectorAll<HTMLButtonElement>('button') ?? []);\n const button =\n buttons.find(item => item.value === id && !item.disabled) ??\n buttons.find(item => !item.disabled);\n if (button) {\n this.focusedSection = button.value;\n button.focus();\n } else this.dialogEl?.focus();\n }\n\n private handleSheetKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n this.closeMenu();\n return;\n }\n const sections = this.selectableSections.filter(section => !section.isInactive);\n if (!sections.length) return;\n const index = Math.max(\n 0,\n sections.findIndex(section => section.id === this.focusedSection)\n );\n let next: number;\n if (event.key === 'ArrowDown') next = (index + 1) % sections.length;\n else if (event.key === 'ArrowUp') next = (index + sections.length - 1) % sections.length;\n else if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = sections.length - 1;\n else if (event.key === 'Tab') next = index;\n else if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey &&\n event.key !== ' '\n ) {\n const match = sections.findIndex((_, offset) =>\n sections[(index + offset + 1) % sections.length].label\n .toLowerCase()\n .startsWith(event.key.toLowerCase())\n );\n if (match < 0) return;\n next = (index + match + 1) % sections.length;\n } else return;\n event.preventDefault();\n this.initialFocusVisible = true;\n this.focusSheetItem(sections[next].id);\n };\n\n private get resolvedSections(): TabItem[] {\n return this.sections ?? [];\n }\n\n private get selectableSections(): TabItemTab[] {\n return getSelectableTabs(this.resolvedSections);\n }\n\n private get selectedIndex(): number {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).selectedIndex;\n }\n\n private get selectedSection(): TabItemTab | undefined {\n return this.selectableSections[this.selectedIndex];\n }\n\n private get hasPrevious(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasPrevious;\n }\n\n private get hasNext(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasNext;\n }\n\n private get triggerAriaLabel(): string {\n return `${this.presentation === 'sheet' && this.pageLabel ? `${this.pageLabel}. ` : ''}${this.navigationLabel}. Current section: ${this.selectedSection?.label ?? ''}`;\n }\n\n private get menuSections(): MenuSection[] {\n const groups: MenuSection[] = [];\n let items: MenuItemData[] = [];\n const commit = () => {\n if (items.length) groups.push({ items });\n items = [];\n };\n\n for (const section of this.resolvedSections) {\n if (isTabDivider(section)) {\n commit();\n continue;\n }\n items.push({\n label: section.label,\n value: section.id,\n dot: section.dot,\n isSelected: section.id === this.selectedSection?.id,\n isInactive: section.isInactive,\n });\n }\n commit();\n return groups;\n }\n\n @Watch('sections')\n handleSectionsChange() {\n if (this.selectableSections.length <= 1) {\n this.closeMenu();\n this.menuSurfaceOpen = false;\n } else if (this.dialogEl?.open && !this.sheetClosing) {\n this.tasks.frame(() => {\n if (this.dialogEl?.open && !this.sheetClosing) this.focusSheetItem(this.focusedSection);\n });\n }\n }\n\n private toggleMenu = (event: MouseEvent) => {\n if (this.selectableSections.length <= 1) return;\n this.initialFocusVisible = event.detail === 0;\n if (this.presentation === 'sheet') {\n if (this.menuOpen) this.closeMenu();\n else {\n this.focusedSection = this.selectedSection?.id ?? '';\n this.menuOpen = true;\n }\n return;\n }\n this.menuOpen = !this.menuOpen;\n if (this.menuOpen) this.menuSurfaceOpen = true;\n };\n\n private closeMenu = () => {\n this.menuOpen = false;\n if (this.dialogEl?.open) this.sheetClosing = true;\n };\n\n private renderSheet() {\n return (\n <dialog\n id={this.menuId}\n ref={element => {\n this.dialogEl = element ?? null;\n }}\n class={{ 'mobile-section-sheet': true, 'mobile-section-sheet--closing': this.sheetClosing }}\n aria-label={this.navigationLabel}\n tabIndex={-1}\n onCancel={event => {\n event.preventDefault();\n this.closeMenu();\n }}\n onKeyDown={this.handleSheetKeyDown}\n onClick={event => {\n if (!this.dialogEl || event.target !== this.dialogEl) return;\n const rect = this.dialogEl.getBoundingClientRect();\n if (\n event.clientY < rect.top ||\n event.clientY > rect.bottom ||\n event.clientX < rect.left ||\n event.clientX > rect.right\n )\n this.closeMenu();\n }}\n >\n <div class=\"mobile-section-sheet__items\" role=\"menu\" aria-label={this.navigationLabel}>\n {this.resolvedSections.map(section =>\n isTabDivider(section) ? (\n <div class=\"mobile-section-sheet__divider\" role=\"separator\" />\n ) : (\n <button\n type=\"button\"\n role=\"menuitem\"\n value={section.id}\n disabled={section.isInactive}\n aria-current={section.id === this.selectedSection?.id ? 'page' : undefined}\n tabIndex={section.id === this.focusedSection ? 0 : -1}\n class={{\n 'mobile-section-sheet__item': true,\n 'ds-control--md': true,\n 'ds-interaction-fill': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible':\n this.initialFocusVisible && section.id === this.focusedSection,\n }}\n onFocus={() => {\n this.focusedSection = section.id;\n }}\n onClick={() => {\n if (this.sheetClosing || section.isInactive) return;\n this.closeMenu();\n if (section.id !== this.selectedSection?.id) this.dsChange.emit(section.id);\n }}\n >\n <ds-text\n class=\"mobile-section-sheet__label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"inherit\"\n emphasis={section.id === this.selectedSection?.id}\n lineTruncation={1}\n >\n {section.label}\n </ds-text>\n </button>\n )\n )}\n </div>\n <div\n ref={element => {\n if (this.browserEdgeEl !== element) this.browserEdgeColors = '';\n this.browserEdgeEl = element ?? null;\n }}\n class=\"mobile-section-sheet__browser-edge\"\n aria-hidden=\"true\"\n />\n </dialog>\n );\n }\n\n private handleSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail.value ?? '');\n const section = this.selectableSections.find(candidate => candidate.id === id);\n if (!section || section.isInactive) return;\n this.closeMenu();\n if (id !== this.selectedSection?.id) this.dsChange.emit(id);\n this.tasks.frame(() => this.triggerEl?.focus());\n };\n\n render() {\n const selected = this.selectedSection;\n if (!selected) return <Host />;\n const combined = this.presentation === 'sheet' && !!this.pageLabel;\n\n return (\n <Host\n class={{ 'mobile-section-switcher--pointer-focus': this.pointerFocus }}\n onPointerDown={() => {\n this.pointerFocus = true;\n this.initialFocusVisible = false;\n }}\n >\n <button\n ref={element => {\n this.triggerEl = element ?? null;\n }}\n id={this.triggerId}\n class={{\n 'mobile-section-switcher': true,\n 'mobile-section-switcher--expanded': this.menuOpen,\n 'ds-interaction-fill--surface-open':\n this.menuSurfaceOpen || this.menuOpen || this.sheetClosing,\n 'mobile-section-switcher--sheet': this.presentation === 'sheet',\n 'mobile-section-switcher--combined': combined,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n type=\"button\"\n aria-haspopup={this.presentation === 'sheet' ? 'dialog' : 'menu'}\n aria-controls={this.menuId}\n aria-expanded={String(this.menuOpen)}\n aria-label={this.triggerAriaLabel}\n onClick={this.toggleMenu}\n >\n {this.presentation === 'menu' ? (\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasPrevious,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n ) : null}\n {combined\n ? [\n <ds-text\n class=\"mobile-section-switcher__page-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"inherit\"\n lineTruncation={1}\n >\n {this.pageLabel}\n </ds-text>,\n <ds-text\n class=\"mobile-section-switcher__separator ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"inherit\"\n aria-hidden=\"true\"\n >\n ·\n </ds-text>,\n ]\n : null}\n <ds-text\n class=\"mobile-section-switcher__label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"inherit\"\n lineTruncation={1}\n >\n {selected.label}\n </ds-text>\n {this.presentation === 'menu' ? (\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasNext,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n ) : null}\n </button>\n\n {this.presentation === 'sheet' || this.sheetClosing ? (\n this.renderSheet()\n ) : this.selectableSections.length > 1 ? (\n <ds-menu\n id={this.menuId}\n anchorId={this.triggerId}\n align=\"center\"\n menuLabel={this.navigationLabel}\n open={this.menuOpen}\n initialFocusVisible={this.initialFocusVisible}\n sections={this.menuSections}\n onDsClose={this.closeMenu}\n onDsAfterClose={() => {\n if (!this.menuOpen) this.menuSurfaceOpen = false;\n }}\n onDsSelect={this.handleSelect}\n />\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["resolveMobileSectionPosition","sections","value","selectable","getSelectableTabs","matchedIndex","findIndex","section","id","selectedIndex","selected","hasPrevious","hasNext","length","mobileSectionSwitcherCss","nextMobileSectionSwitcherId","MobileSectionSwitcher","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navigationLabel","presentation","pageLabel","menuOpen","menuSurfaceOpen","initialFocusVisible","pointerFocus","sheetClosing","focusedSection","instanceId","triggerId","menuId","triggerEl","dialogEl","browserEdgeEl","browserEdgeColors","closeTimer","loaded","tasks","ConnectionTasks","el","isConnected","handleDocumentKeyDown","event","includes","key","updateBrowserEdgeColor","base","getComputedStyle","color","shade","backgroundColor","colors","canvas","ownerDocument","createElement","width","height","context","getContext","fillStyle","fillRect","red","green","blue","getImageData","data","style","setProperty","handleSheetKeyDown","preventDefault","stopPropagation","closeMenu","selectableSections","filter","isInactive","index","Math","max","next","ctrlKey","metaKey","altKey","match","_","offset","label","toLowerCase","startsWith","focusSheetItem","toggleMenu","detail","selectedSection","open","handleSelect","String","find","candidate","dsChange","emit","frame","focus","componentDidLoad","connectResources","connectedCallback","boundDocument","addEventListener","visibilityObserver","ResizeObserver","guard","getClientRects","finishSheetClose","observe","componentDidRender","initialSection","observeBrowserEdgeTheme","showModal","duration","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort2","animationDurationShort3","setTimeout","disconnectedCallback","cancel","removeEventListener","undefined","disconnect","handlePresentationChange","handleContextChange","restoreFocus","clearTimeout","wasOpen","close","themeObserver","MutationObserver","ancestor","parentElement","attributes","attributeFilter","buttons","Array","from","querySelectorAll","button","item","disabled","resolvedSections","triggerAriaLabel","menuSections","groups","items","commit","push","isTabDivider","dot","isSelected","handleSectionsChange","renderSheet","h","ref","element","class","tabIndex","onCancel","onKeyDown","onClick","target","rect","getBoundingClientRect","clientY","top","bottom","clientX","left","right","role","map","type","onFocus","as","variant","emphasis","lineTruncation","render","Host","combined","onPointerDown","anchorId","align","menuLabel","onDsClose","onDsAfterClose","onDsSelect"],"sources":["src/wc/components/MobileSectionSwitcher/mobile-section-switcher-utils.ts","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.css?tag=ds-mobile-section-switcher&encapsulation=scoped","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.tsx"],"sourcesContent":["import { getSelectableTabs, type TabItem, type TabItemTab } from '../TabGroup/tab-item-utils';\n\nexport interface MobileSectionPosition {\n selectedIndex: number;\n selected?: TabItemTab;\n hasPrevious: boolean;\n hasNext: boolean;\n}\n\n/** Resolve ordered selectable neighbors while ignoring visual divider entries. */\nexport function resolveMobileSectionPosition(\n sections: TabItem[],\n value: string\n): MobileSectionPosition {\n const selectable = getSelectableTabs(sections);\n const matchedIndex = selectable.findIndex(section => section.id === value);\n const selectedIndex = matchedIndex >= 0 ? matchedIndex : 0;\n return {\n selectedIndex,\n selected: selectable[selectedIndex],\n hasPrevious: selectedIndex > 0,\n hasNext: selectedIndex < selectable.length - 1,\n };\n}\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n\n:host {\n display: block;\n min-width: 0;\n max-width: 100%;\n color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n appearance: none;\n display: grid;\n grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-050);\n max-width: 100%;\n min-height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n border: 0;\n border-radius: var(--dimension-radius-100);\n background: var(--color-background-secondary);\n color: inherit;\n box-sizing: border-box;\n cursor: default;\n}\n\n.mobile-section-switcher__label {\n min-width: 0;\n max-width: 100%;\n text-align: center;\n}\n\n.mobile-section-switcher__position {\n width: var(--dimension-size-050);\n height: var(--dimension-size-050);\n border-radius: var(--dimension-radius-half);\n background: currentColor;\n opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n opacity: 1;\n}\n\n.mobile-section-switcher--sheet {\n grid-template-columns: minmax(0, auto);\n min-height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n border-radius: var(--dimension-radius-half);\n background: transparent;\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n.mobile-section-switcher--combined {\n display: flex;\n}\n\n.mobile-section-switcher__page-label {\n flex: 0 1 auto;\n min-width: 0;\n}\n\n.mobile-section-switcher__separator {\n flex: 0 0 auto;\n}\n\n.mobile-section-switcher--combined .mobile-section-switcher__label {\n flex: 0 0 auto;\n max-width: 50%;\n}\n\n.mobile-section-sheet {\n position: fixed;\n inset: 0 0 auto;\n width: 100%;\n max-width: none;\n max-height: calc(100dvh - var(--dimension-size-400) - var(--dimension-space-200));\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 0;\n box-sizing: border-box;\n overflow: visible;\n background: transparent;\n color: var(--color-foreground-secondary);\n outline: none;\n}\n\n.mobile-section-sheet[open] {\n display: flex;\n flex-direction: column;\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__items {\n animation: mobileSectionSheetIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet::backdrop {\n background: var(--color-background-shade);\n animation: mobileSectionShadeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__items {\n animation-name: mobileSectionSheetOut;\n}\n\n.mobile-section-sheet--closing::backdrop {\n animation-name: mobileSectionShadeOut;\n}\n\n.mobile-section-sheet__items {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-100);\n min-height: 0;\n max-height: inherit;\n box-sizing: border-box;\n background: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-floating);\n padding: var(--dimension-space-100);\n padding-block-start: max(var(--dimension-space-100), env(safe-area-inset-top, 0px));\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n.mobile-section-sheet__item {\n appearance: none;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n height: var(--ds-control-height);\n width: 100%;\n min-width: 0;\n padding: 0 var(--ds-control-padding-inline);\n box-sizing: border-box;\n border: 0;\n border-radius: var(--ds-control-radius);\n background: transparent;\n color: inherit;\n text-align: start;\n}\n\n.mobile-section-sheet__item[aria-current='page'] {\n color: var(--color-foreground-primary);\n}\n\n.mobile-section-sheet__item:disabled {\n color: var(--color-foreground-tertiary);\n}\n\n.mobile-section-sheet__label {\n min-width: 0;\n padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-section-sheet__divider {\n flex: 0 0 auto;\n height: var(--dimension-stroke-width-012);\n margin-inline: var(--dimension-space-100);\n background: var(--color-border-tertiary);\n}\n\n@keyframes mobileSectionSheetIn {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes mobileSectionSheetOut {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n\n@keyframes mobileSectionShadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes mobileSectionShadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n/* Safari can preserve :focus-visible across modal entry and focus return after\n * a tap. Track the actual input, while leaving focus and keyboard access intact. */\n:host(.mobile-section-switcher--pointer-focus) .ds-focus-ring-inset::after {\n outline: none;\n}\n\n/* Keep this opaque strip in the modal top layer, outside the moving sheet.\n * Safari samples fixed edge backgrounds to tint its browser controls. */\n.mobile-section-sheet__browser-edge {\n position: fixed;\n inset: auto 0 0;\n height: max(var(--dimension-space-200), env(safe-area-inset-bottom, 0px));\n pointer-events: none;\n color: var(--color-background-primary);\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n}\n\n.mobile-section-sheet[open] .mobile-section-sheet__browser-edge {\n animation: mobileSectionEdgeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] .mobile-section-sheet__browser-edge {\n animation-name: mobileSectionEdgeOut;\n}\n\n/* Animate the opaque color, not opacity: the backdrop is already fading below. */\n@keyframes mobileSectionEdgeIn {\n from {\n background-color: var(--color-background-primary);\n }\n to {\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n }\n}\n\n@keyframes mobileSectionEdgeOut {\n from {\n background-color: var(--_mobile-section-edge-color, var(--color-background-primary));\n }\n to {\n background-color: var(--color-background-primary);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mobile-section-sheet[open] .mobile-section-sheet__items,\n .mobile-section-sheet[open] .mobile-section-sheet__browser-edge,\n .mobile-section-sheet::backdrop {\n animation: none;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\nimport { resolveMobileSectionPosition } from './mobile-section-switcher-utils';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\n\nlet nextMobileSectionSwitcherId = 0;\n\n@Component({\n tag: 'ds-mobile-section-switcher',\n styleUrl: 'MobileSectionSwitcher.css',\n scoped: true,\n})\nexport class MobileSectionSwitcher {\n @Element() el!: HTMLElement;\n\n /** Ordered controlled sections. Divider entries group the popup menu. */\n @Prop() sections: TabItem[] = [];\n /** Controlled selected section id. */\n @Prop() value: string = '';\n /** Accessible name for the section chooser. */\n @Prop() navigationLabel: string = 'Change page section';\n /** Anchored local-view menu or viewport-edge sheet for primary page sections. */\n @Prop() presentation: 'menu' | 'sheet' = 'menu';\n /** Stable page identity shown before the selected section in a sheet trigger. */\n @Prop() pageLabel: string = '';\n\n /** Selection intent. The route, tool, or workflow owner updates `value`. */\n @Event() dsChange!: EventEmitter<string>;\n\n @State() private menuOpen = false;\n @State() private menuSurfaceOpen = false;\n @State() private initialFocusVisible = false;\n @State() private pointerFocus = false;\n @State() private sheetClosing = false;\n @State() private focusedSection = '';\n\n private readonly instanceId = nextMobileSectionSwitcherId++;\n private readonly triggerId = `ds-mobile-section-switcher-trigger-${this.instanceId}`;\n private readonly menuId = `ds-mobile-section-switcher-menu-${this.instanceId}`;\n private triggerEl: HTMLButtonElement | null = null;\n private dialogEl: HTMLDialogElement | null = null;\n private browserEdgeEl: HTMLDivElement | null = null;\n private browserEdgeColors = '';\n private themeObserver?: MutationObserver;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private visibilityObserver?: ResizeObserver;\n private loaded = false;\n private boundDocument?: Document;\n private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (['Shift', 'Control', 'Alt', 'Meta'].includes(event.key)) return;\n this.pointerFocus = false;\n };\n\n componentDidLoad() {\n this.loaded = true;\n this.connectResources();\n }\n\n connectedCallback() {\n if (this.loaded) this.connectResources();\n }\n\n private connectResources() {\n if (!this.el.isConnected || this.boundDocument) return;\n this.boundDocument = this.el.ownerDocument;\n this.boundDocument.addEventListener('keydown', this.handleDocumentKeyDown, true);\n this.visibilityObserver = new ResizeObserver(\n this.tasks.guard(() => {\n if (this.dialogEl?.open && !this.triggerEl?.getClientRects().length) {\n this.finishSheetClose(false);\n }\n })\n );\n this.visibilityObserver.observe(this.el);\n }\n\n componentDidRender() {\n if (!this.el.isConnected || !this.dialogEl) return;\n if (this.presentation === 'sheet' && this.menuOpen && !this.dialogEl.open) {\n const initialSection = this.focusedSection;\n this.updateBrowserEdgeColor();\n this.observeBrowserEdgeTheme();\n this.dialogEl.showModal();\n this.focusSheetItem(initialSection);\n }\n if (this.sheetClosing && this.dialogEl.open && !this.closeTimer) {\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort2,\n TOKEN_DEFAULTS.animationDurationShort3\n );\n if (!duration) this.finishSheetClose();\n else this.closeTimer = setTimeout(() => this.finishSheetClose(), duration);\n }\n }\n\n disconnectedCallback() {\n this.tasks.cancel();\n this.boundDocument?.removeEventListener('keydown', this.handleDocumentKeyDown, true);\n this.boundDocument = undefined;\n this.visibilityObserver?.disconnect();\n this.visibilityObserver = undefined;\n this.pointerFocus = false;\n this.menuSurfaceOpen = false;\n this.finishSheetClose(false);\n }\n\n @Watch('presentation')\n handlePresentationChange() {\n this.menuSurfaceOpen = false;\n this.closeMenu();\n }\n\n @Watch('value')\n @Watch('pageLabel')\n handleContextChange() {\n this.closeMenu();\n }\n\n private finishSheetClose(restoreFocus = true) {\n if (this.closeTimer) clearTimeout(this.closeTimer);\n this.closeTimer = null;\n const wasOpen = this.dialogEl?.open;\n this.dialogEl?.close();\n this.themeObserver?.disconnect();\n this.menuOpen = false;\n this.sheetClosing = false;\n if (wasOpen && restoreFocus && this.triggerEl?.getClientRects().length) this.triggerEl.focus();\n }\n\n private updateBrowserEdgeColor = () => {\n if (!this.el.isConnected || !this.browserEdgeEl || !this.dialogEl) return;\n const base = getComputedStyle(this.browserEdgeEl).color;\n const shade = getComputedStyle(this.dialogEl, '::backdrop').backgroundColor;\n const colors = `${base}|${shade}`;\n if (colors === this.browserEdgeColors) return;\n // Let the browser resolve token colors, including alpha and non-sRGB syntax,\n // then flatten the shade over the bar into the opaque color Safari samples.\n const canvas = this.el.ownerDocument.createElement('canvas');\n canvas.width = canvas.height = 1;\n const context = canvas.getContext('2d');\n if (!context) return;\n context.fillStyle = base;\n context.fillRect(0, 0, 1, 1);\n context.fillStyle = shade;\n context.fillRect(0, 0, 1, 1);\n const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;\n this.browserEdgeEl.style.setProperty(\n '--_mobile-section-edge-color',\n `rgb(${red}, ${green}, ${blue})`\n );\n this.browserEdgeColors = colors;\n };\n\n private observeBrowserEdgeTheme() {\n this.themeObserver ??= new MutationObserver(this.updateBrowserEdgeColor);\n // Token themes are inherited from the page or a containing theme scope.\n for (let ancestor: HTMLElement | null = this.el; ancestor; ancestor = ancestor.parentElement) {\n this.themeObserver.observe(ancestor, {\n attributes: true,\n attributeFilter: ['class', 'style', 'data-theme'],\n });\n }\n }\n\n private focusSheetItem(id: string) {\n const buttons = Array.from(this.dialogEl?.querySelectorAll<HTMLButtonElement>('button') ?? []);\n const button =\n buttons.find(item => item.value === id && !item.disabled) ??\n buttons.find(item => !item.disabled);\n if (button) {\n this.focusedSection = button.value;\n button.focus();\n } else this.dialogEl?.focus();\n }\n\n private handleSheetKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n this.closeMenu();\n return;\n }\n const sections = this.selectableSections.filter(section => !section.isInactive);\n if (!sections.length) return;\n const index = Math.max(\n 0,\n sections.findIndex(section => section.id === this.focusedSection)\n );\n let next: number;\n if (event.key === 'ArrowDown') next = (index + 1) % sections.length;\n else if (event.key === 'ArrowUp') next = (index + sections.length - 1) % sections.length;\n else if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = sections.length - 1;\n else if (event.key === 'Tab') next = index;\n else if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey &&\n event.key !== ' '\n ) {\n const match = sections.findIndex((_, offset) =>\n sections[(index + offset + 1) % sections.length].label\n .toLowerCase()\n .startsWith(event.key.toLowerCase())\n );\n if (match < 0) return;\n next = (index + match + 1) % sections.length;\n } else return;\n event.preventDefault();\n this.initialFocusVisible = true;\n this.focusSheetItem(sections[next].id);\n };\n\n private get resolvedSections(): TabItem[] {\n return this.sections ?? [];\n }\n\n private get selectableSections(): TabItemTab[] {\n return getSelectableTabs(this.resolvedSections);\n }\n\n private get selectedIndex(): number {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).selectedIndex;\n }\n\n private get selectedSection(): TabItemTab | undefined {\n return this.selectableSections[this.selectedIndex];\n }\n\n private get hasPrevious(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasPrevious;\n }\n\n private get hasNext(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasNext;\n }\n\n private get triggerAriaLabel(): string {\n return `${this.presentation === 'sheet' && this.pageLabel ? `${this.pageLabel}. ` : ''}${this.navigationLabel}. Current section: ${this.selectedSection?.label ?? ''}`;\n }\n\n private get menuSections(): MenuSection[] {\n const groups: MenuSection[] = [];\n let items: MenuItemData[] = [];\n const commit = () => {\n if (items.length) groups.push({ items });\n items = [];\n };\n\n for (const section of this.resolvedSections) {\n if (isTabDivider(section)) {\n commit();\n continue;\n }\n items.push({\n label: section.label,\n value: section.id,\n dot: section.dot,\n isSelected: section.id === this.selectedSection?.id,\n isInactive: section.isInactive,\n });\n }\n commit();\n return groups;\n }\n\n @Watch('sections')\n handleSectionsChange() {\n if (this.selectableSections.length <= 1) {\n this.closeMenu();\n this.menuSurfaceOpen = false;\n } else if (this.dialogEl?.open && !this.sheetClosing) {\n this.tasks.frame(() => {\n if (this.dialogEl?.open && !this.sheetClosing) this.focusSheetItem(this.focusedSection);\n });\n }\n }\n\n private toggleMenu = (event: MouseEvent) => {\n if (this.selectableSections.length <= 1) return;\n this.initialFocusVisible = event.detail === 0;\n if (this.presentation === 'sheet') {\n if (this.menuOpen) this.closeMenu();\n else {\n this.focusedSection = this.selectedSection?.id ?? '';\n this.menuOpen = true;\n }\n return;\n }\n this.menuOpen = !this.menuOpen;\n if (this.menuOpen) this.menuSurfaceOpen = true;\n };\n\n private closeMenu = () => {\n this.menuOpen = false;\n if (this.dialogEl?.open) this.sheetClosing = true;\n };\n\n private renderSheet() {\n return (\n <dialog\n id={this.menuId}\n ref={element => {\n this.dialogEl = element ?? null;\n }}\n class={{ 'mobile-section-sheet': true, 'mobile-section-sheet--closing': this.sheetClosing }}\n aria-label={this.navigationLabel}\n tabIndex={-1}\n onCancel={event => {\n event.preventDefault();\n this.closeMenu();\n }}\n onKeyDown={this.handleSheetKeyDown}\n onClick={event => {\n if (!this.dialogEl || event.target !== this.dialogEl) return;\n const rect = this.dialogEl.getBoundingClientRect();\n if (\n event.clientY < rect.top ||\n event.clientY > rect.bottom ||\n event.clientX < rect.left ||\n event.clientX > rect.right\n )\n this.closeMenu();\n }}\n >\n <div class=\"mobile-section-sheet__items\" role=\"menu\" aria-label={this.navigationLabel}>\n {this.resolvedSections.map(section =>\n isTabDivider(section) ? (\n <div class=\"mobile-section-sheet__divider\" role=\"separator\" />\n ) : (\n <button\n type=\"button\"\n role=\"menuitem\"\n value={section.id}\n disabled={section.isInactive}\n aria-current={section.id === this.selectedSection?.id ? 'page' : undefined}\n tabIndex={section.id === this.focusedSection ? 0 : -1}\n class={{\n 'mobile-section-sheet__item': true,\n 'ds-control--md': true,\n 'ds-interaction-fill': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible':\n this.initialFocusVisible && section.id === this.focusedSection,\n }}\n onFocus={() => {\n this.focusedSection = section.id;\n }}\n onClick={() => {\n if (this.sheetClosing || section.isInactive) return;\n this.closeMenu();\n if (section.id !== this.selectedSection?.id) this.dsChange.emit(section.id);\n }}\n >\n <ds-text\n class=\"mobile-section-sheet__label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"inherit\"\n emphasis={section.id === this.selectedSection?.id}\n lineTruncation={1}\n >\n {section.label}\n </ds-text>\n </button>\n )\n )}\n </div>\n <div\n ref={element => {\n if (this.browserEdgeEl !== element) this.browserEdgeColors = '';\n this.browserEdgeEl = element ?? null;\n }}\n class=\"mobile-section-sheet__browser-edge\"\n aria-hidden=\"true\"\n />\n </dialog>\n );\n }\n\n private handleSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail.value ?? '');\n const section = this.selectableSections.find(candidate => candidate.id === id);\n if (!section || section.isInactive) return;\n this.closeMenu();\n if (id !== this.selectedSection?.id) this.dsChange.emit(id);\n this.tasks.frame(() => this.triggerEl?.focus());\n };\n\n render() {\n const selected = this.selectedSection;\n if (!selected) return <Host />;\n const combined = this.presentation === 'sheet' && !!this.pageLabel;\n\n return (\n <Host\n class={{ 'mobile-section-switcher--pointer-focus': this.pointerFocus }}\n onPointerDown={() => {\n this.pointerFocus = true;\n this.initialFocusVisible = false;\n }}\n >\n <button\n ref={element => {\n this.triggerEl = element ?? null;\n }}\n id={this.triggerId}\n class={{\n 'mobile-section-switcher': true,\n 'mobile-section-switcher--expanded': this.menuOpen,\n 'ds-interaction-fill--surface-open':\n this.menuSurfaceOpen || this.menuOpen || this.sheetClosing,\n 'mobile-section-switcher--sheet': this.presentation === 'sheet',\n 'mobile-section-switcher--combined': combined,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n type=\"button\"\n aria-haspopup={this.presentation === 'sheet' ? 'dialog' : 'menu'}\n aria-controls={this.menuId}\n aria-expanded={String(this.menuOpen)}\n aria-label={this.triggerAriaLabel}\n onClick={this.toggleMenu}\n >\n {this.presentation === 'menu' ? (\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasPrevious,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n ) : null}\n {combined\n ? [\n <ds-text\n class=\"mobile-section-switcher__page-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"inherit\"\n lineTruncation={1}\n >\n {this.pageLabel}\n </ds-text>,\n <ds-text\n class=\"mobile-section-switcher__separator ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"inherit\"\n aria-hidden=\"true\"\n >\n ·\n </ds-text>,\n ]\n : null}\n <ds-text\n class=\"mobile-section-switcher__label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"inherit\"\n lineTruncation={1}\n >\n {selected.label}\n </ds-text>\n {this.presentation === 'menu' ? (\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasNext,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n ) : null}\n </button>\n\n {this.presentation === 'sheet' || this.sheetClosing ? (\n this.renderSheet()\n ) : this.selectableSections.length > 1 ? (\n <ds-menu\n id={this.menuId}\n anchorId={this.triggerId}\n align=\"center\"\n menuLabel={this.navigationLabel}\n open={this.menuOpen}\n initialFocusVisible={this.initialFocusVisible}\n sections={this.menuSections}\n onDsClose={this.closeMenu}\n onDsAfterClose={() => {\n if (!this.menuOpen) this.menuSurfaceOpen = false;\n }}\n onDsSelect={this.handleSelect}\n />\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,h as t,a as i,t as a}from"./index.js";import{r as l}from"./p-CVYjLzYI.js";function h(e,s,t){if(e!=="auto")return e;if(s==="constrained")return"constrained";if(s==="compact"||!t)return"compact";return"expanded"}const n=()=>`.sc-ds-shell-page-h{--_shell-page-content-background:var(--color-background-primary);--_shell-page-header-background:var(--color-background-primary);--_shell-page-responsive-content-block-start-inset:var(--dimension-space-200);--_shell-page-content-block-start-inset:var( --ds-shell-page-content-block-start-inset, var(--_shell-page-responsive-content-block-start-inset) );--ds-shell-page-sticky-header-block-size:var(--dimension-size-600);--ds-shell-page-content-block-start-offset:calc( var(--ds-shell-page-sticky-header-block-size) + var(--_shell-page-content-block-start-inset) );display:block;position:relative;min-width:0;min-height:100%;box-sizing:border-box;background:var(--_shell-page-content-background)}.shell-page-host--surface-secondary.sc-ds-shell-page-h{--_shell-page-content-background:var(--color-background-secondary)}.shell-page-host--surface-secondary[responsive-mode='desktop'].sc-ds-shell-page-h,.shell-page-host--surface-secondary[responsive-mode='tablet'].sc-ds-shell-page-h{--_shell-page-header-background:var(--color-background-secondary)}[responsive-mode='tablet'].sc-ds-shell-page-h,[responsive-mode='mobile'].sc-ds-shell-page-h{--_shell-page-responsive-content-block-start-inset:var(--dimension-space-200)}[responsive-mode='mobile'].sc-ds-shell-page-h{--ds-shell-page-sticky-header-block-size:calc( var(--dimension-size-500) + var(--dimension-space-200) )}.shell-page-host--header-compact.sc-ds-shell-page-h,.shell-page-host--header-constrained.sc-ds-shell-page-h{--_shell-page-content-block-start-inset:var( --ds-shell-page-compact-content-block-start-inset, var(--_shell-page-responsive-content-block-start-inset) )}.shell-page-host--inset-none.sc-ds-shell-page-h,.shell-page-host--block-start-inset-none.sc-ds-shell-page-h{--_shell-page-content-block-start-inset:0px}.shell-page-host--desktop-header-shell-bar.sc-ds-shell-page-h{--ds-shell-page-sticky-header-block-size:0px}.shell-page-host--desktop-header-shell-bar.shell-page-host--inset-default.sc-ds-shell-page-h{--_shell-page-content-block-start-inset:var(--_shell-page-responsive-content-block-start-inset)}.shell-page__scroll-sentinel.sc-ds-shell-page{position:absolute;inset-block-start:var(--ds-shell-page-header-travel, 0);inset-inline-start:0;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);pointer-events:none}.shell-page__sticky-header.sc-ds-shell-page{position:sticky;inset-block-start:var(--ds-shell-page-sticky-offset, 0);z-index:var(--dimension-z-index-overlay);min-width:0;background:var(--_shell-page-header-background);overflow:visible;overflow-anchor:none}.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-workflow,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-workflow,.shell-page__mobile-header.sc-ds-shell-page-s>ds-mobile-header,.shell-page__mobile-header .sc-ds-shell-page-s>ds-mobile-header{display:block;min-width:0}.shell-page__desktop-header[hidden].sc-ds-shell-page,.shell-page__mobile-header[hidden].sc-ds-shell-page{display:none}.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__scroll-sentinel.sc-ds-shell-page,.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__flow-spacer.sc-ds-shell-page{display:none}.shell-page__flow-spacer.sc-ds-shell-page{height:var(--ds-shell-page-flow-spacer, 0);background:var(--_shell-page-content-background)}.shell-page__content.sc-ds-shell-page{min-width:0;box-sizing:border-box;background:var(--_shell-page-content-background)}.shell-page-host--inset-default.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-200);padding-block-start:var(--_shell-page-content-block-start-inset)}.shell-page-host--inset-default[responsive-mode='tablet'].sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page,.shell-page-host--inset-default[responsive-mode='mobile'].sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-200);padding-block-start:var(--_shell-page-content-block-start-inset)}.shell-page-host--inset-none.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:0}`;const r=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.headerPresentation="auto";this.desktopHeaderPlacement="page";this.contentInset="default";this.contentInsetBlockStart="default";this.scrollCompaction=true;this.contentSurface="primary";this.responsiveMode="desktop";this.pageTopVisible=true;this.sentinelEl=null;this.spacerEl=null;this.stickyHeaderEl=null;this.headerEl=null;this.expandedHeaderHeight=0;this.headerTravel=0;this.expandedGeometryFrozen=false;this.pageHeaderResizeObserver=null;this.headerResizeObserver=null;this.headerMutationObserver=null;this.headerRevealFrame=null;this.headerGeometryFrame=null;this.reconnectFrame=null;this.scrollRoot=null;this.hasLoaded=false;this.handleScroll=()=>{if(!this.sentinelEl||!this.scrollRoot)return;const e=this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top;this.syncHeaderDividerInset(e);const s=this.sentinelEl.getBoundingClientRect().top>=e;if(this.effectiveScrollCompaction&&!s&&this.pageTopVisible&&this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl);this.expandedGeometryFrozen=true}if(s&&this.expandedGeometryFrozen&&this.el.getBoundingClientRect().top>=e){this.expandedGeometryFrozen=false;if(this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl)}}this.pageTopVisible=s};this.handleHeaderSlotChange=e=>{if(this.responsiveMode==="mobile")return;const s=e.target;const t=s.assignedElements().find((e=>e.tagName.toLowerCase()==="ds-bar-title"));this.observeHeader(t??null)}}handleHeaderContractChange(){this.syncHeaderVariant(true)}handleResponsiveModeChange(){this.el.style.removeProperty("--ds-shell-page-sticky-header-block-size");this.observeHeader(this.responsiveMode==="mobile"||this.desktopHeaderExternal?null:this.findHeader());this.syncPageHeaderBlockSize()}handleDesktopHeaderPlacementChange(){this.observeHeader(this.desktopHeaderExternal?null:this.findHeader());this.syncPageHeaderBlockSize()}componentDidLoad(){this.hasLoaded=true;this.connectRuntime()}componentDidRender(){this.syncHeaderVariant();this.syncPageHeaderBlockSize()}connectedCallback(){if(!this.hasLoaded)return;if(this.reconnectFrame!==null)cancelAnimationFrame(this.reconnectFrame);this.reconnectFrame=requestAnimationFrame((()=>{this.reconnectFrame=null;if(this.el.isConnected)this.connectRuntime()}))}disconnectedCallback(){if(this.reconnectFrame!==null)cancelAnimationFrame(this.reconnectFrame);this.reconnectFrame=null;this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.pageHeaderResizeObserver?.disconnect();this.pageHeaderResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerEl?.style.removeProperty("--ds-bar-title-divider-inset");this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=null}connectRuntime(){this.observePageHeaderGeometry();this.observeHeader(this.responsiveMode==="mobile"?null:this.findHeader());this.connectScrollRoot()}get effectiveVariant(){if(this.desktopHeaderExternal)return"compact";return h(this.headerPresentation,this.headerCapacity??"roomy",this.effectiveScrollCompaction?this.pageTopVisible:true)}get desktopHeaderExternal(){return this.responsiveMode!=="mobile"&&this.desktopHeaderPlacement==="shell-bar"}get effectiveScrollCompaction(){return this.scrollCompaction&&!this.desktopHeaderExternal}get headerContractResolved(){return this.headerPresentation!=="auto"||this.headerCapacity!==undefined}get isScrollCompacted(){return this.effectiveScrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"&&!this.pageTopVisible}get contentInsetStyles(){const e={};const s=this.contentInsetBlockStartSize?.trim();const t=this.compactContentInsetBlockStartSize?.trim();if(s)e["--ds-shell-page-content-block-start-inset"]=s;if(t)e["--ds-shell-page-compact-content-block-start-inset"]=t;return e}composedParent(e){return e.assignedSlot?.parentElement??e.parentElement}findScrollRoot(){let e=this.composedParent(this.el);while(e&&e!==document.documentElement){const s=getComputedStyle(e).overflowY;if(s==="auto"||s==="scroll"||s==="overlay"){return e}e=this.composedParent(e)}return window}connectScrollRoot(){const e=this.findScrollRoot();if(e===this.scrollRoot)return;this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=e;this.scrollRoot.addEventListener("scroll",this.handleScroll,{passive:true});this.handleScroll()}get scrollRootResolved(){const e=this.el.closest("ds-shell-app");if(!e)return true;const s=e.querySelector(".shell-app__content");return s!==null&&this.scrollRoot===s}findHeader(){return this.el.querySelector("ds-bar-title")}get compactHeaderHeight(){return l("--dimension-size-600",0)}syncHeaderDividerInset(e){const s=this.headerEl;if(!s)return;const t=this.effectiveScrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy";const i=l("--dimension-space-200",0);if(!t||!this.sentinelEl||!this.scrollRoot||this.headerTravel<=0||i<=0){s.style.removeProperty("--ds-bar-title-divider-inset");return}const a=e??(this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top);const h=this.sentinelEl.getBoundingClientRect().top-a;const n=Math.min(1,Math.max(0,1-h/this.headerTravel));s.style.setProperty("--ds-bar-title-divider-inset",`${i*(1-n)}px`)}setHeaderTravel(e){const s=Math.max(0,e);if(Math.abs(s-this.headerTravel)<.5)return;this.headerTravel=s;this.el.style.setProperty("--ds-shell-page-header-travel",`${s}px`);this.handleScroll()}measureHeaderTravel(e){const s=e.querySelector("[data-shell-page-header-anchor]");const t=this.compactHeaderHeight;if(!s||t<=0)return;const i=e.getBoundingClientRect();const a=s.getBoundingClientRect();if(i.height<=0||a.height<=0)return;const l=a.top-i.top;const h=Math.max(0,(t-a.height)/2);this.setHeaderTravel(l-h)}captureExpandedHeaderGeometry(e){this.expandedHeaderHeight=Math.max(this.expandedHeaderHeight,e.getBoundingClientRect().height);this.measureHeaderTravel(e)}setSpacerHeight(e){if(!this.spacerEl)return;this.spacerEl.style.setProperty("--ds-shell-page-flow-spacer",`${Math.max(0,e)}px`)}variantClass(e){return`bar-title-host--${e}`}setStickyHeaderOffset(e){this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset",e==="expanded"&&this.effectiveScrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"?`${-this.headerTravel}px`:"0px")}syncPageHeaderBlockSize(){if(this.desktopHeaderExternal){this.el.style.setProperty("--ds-shell-page-sticky-header-block-size","0px");return}const e=this.stickyHeaderEl?.getBoundingClientRect().height??0;if(e>0){this.el.style.setProperty("--ds-shell-page-sticky-header-block-size",`${e}px`)}else{this.el.style.removeProperty("--ds-shell-page-sticky-header-block-size")}}observePageHeaderGeometry(){this.pageHeaderResizeObserver?.disconnect();this.pageHeaderResizeObserver=null;this.syncPageHeaderBlockSize();if(!this.stickyHeaderEl||typeof ResizeObserver==="undefined")return;this.pageHeaderResizeObserver=new ResizeObserver((()=>{this.syncPageHeaderBlockSize()}));this.pageHeaderResizeObserver.observe(this.stickyHeaderEl)}syncRenderedHeaderGeometry(e){const s=this.effectiveVariant;if(!e.classList.contains(this.variantClass(s)))return;this.syncPageHeaderBlockSize();this.setSpacerHeight(this.isScrollCompacted?this.expandedHeaderHeight-this.compactHeaderHeight:0);this.setStickyHeaderOffset(s);if(s==="expanded"&&!this.expandedGeometryFrozen){this.captureExpandedHeaderGeometry(e);this.setStickyHeaderOffset(s)}}cancelHeaderGeometrySync(){if(this.headerGeometryFrame!==null)cancelAnimationFrame(this.headerGeometryFrame);this.headerGeometryFrame=null}scheduleHeaderGeometrySync(s){this.cancelHeaderGeometrySync();let t=e.MAX_HEADER_GEOMETRY_FRAMES;let i=0;const a=()=>{if(this.headerEl!==s)return;t-=1;i+=1;this.connectScrollRoot();this.syncRenderedHeaderGeometry(s);const e=this.effectiveVariant!=="expanded"||this.expandedHeaderHeight>0&&this.headerTravel>0;if(e&&this.scrollRootResolved&&i>=2||t<=0){this.headerGeometryFrame=null;return}this.headerGeometryFrame=requestAnimationFrame(a)};this.headerGeometryFrame=requestAnimationFrame(a)}cancelHeaderReveal(){if(this.headerRevealFrame!==null)cancelAnimationFrame(this.headerRevealFrame);this.headerRevealFrame=null;this.headerEl?.removeAttribute("data-shell-page-syncing")}revealHeaderWhenSynced(s,t){let i=e.MAX_HEADER_REVEAL_FRAMES;const a=()=>{if(this.headerEl!==s){s.removeAttribute("data-shell-page-syncing");return}i-=1;if(s.classList.contains(this.variantClass(t))){s.removeAttribute("data-shell-page-syncing");this.headerRevealFrame=null;return}if(i<=0){this.headerRevealFrame=null;return}this.headerRevealFrame=requestAnimationFrame(a)};this.headerRevealFrame=requestAnimationFrame(a)}syncHeaderVariant(e=false){const s=this.headerEl;if(!s)return;this.syncHeaderDividerInset();if(!this.headerContractResolved){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","");return}const t=this.effectiveVariant;const i=!s.classList.contains(this.variantClass(t));if(!i)this.syncRenderedHeaderGeometry(s);if(i&&this.isScrollCompacted){this.setSpacerHeight(this.expandedHeaderHeight-this.compactHeaderHeight);this.setStickyHeaderOffset(t)}if(e){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","")}if(s.variant!==t){s.variant=t;this.scheduleHeaderGeometrySync(s)}if(e){this.revealHeaderWhenSynced(s,t)}}observeHeader(e){this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.headerEl?.style.removeProperty("--ds-bar-title-divider-inset");this.headerEl=e;this.expandedHeaderHeight=0;this.expandedGeometryFrozen=false;this.setHeaderTravel(0);this.setSpacerHeight(0);this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset","0px");if(!e)return;if(e.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(e)}if(typeof ResizeObserver!=="undefined"){this.headerResizeObserver=new ResizeObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerResizeObserver.observe(e)}if(typeof MutationObserver!=="undefined"){this.headerMutationObserver=new MutationObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerMutationObserver.observe(e,{attributes:true,attributeFilter:["class"],childList:true,subtree:true})}this.syncHeaderVariant(true);this.scheduleHeaderGeometrySync(e)}render(){const e=this.responsiveMode==="mobile";return t(i,{key:"2a6f2058bbef8ff12fa15cc354f1ef9d53dd122b",role:"main",style:this.contentInsetStyles,class:{"shell-page-host--inset-default":this.contentInset==="default","shell-page-host--inset-none":this.contentInset==="none","shell-page-host--block-start-inset-none":this.contentInsetBlockStart==="none","shell-page-host--surface-primary":this.contentSurface==="primary","shell-page-host--surface-secondary":this.contentSurface==="secondary","shell-page-host--mobile":e,"shell-page-host--desktop-header-shell-bar":this.desktopHeaderExternal,[`shell-page-host--header-${this.effectiveVariant}`]:true}},t("div",{key:"e9de8b49a517b1000c6daf17339d976c6d86251d",ref:e=>{this.sentinelEl=e??null},class:"shell-page__scroll-sentinel","aria-hidden":"true"}),t("div",{key:"800f4240e9c32e0ec37c71b63b9214473b84c4c3",ref:e=>{this.stickyHeaderEl=e??null},class:"shell-page__sticky-header"},t("div",{key:"da873c1ef428619964e25376ff4ee2279707a206",class:"shell-page__desktop-header",hidden:e,"aria-hidden":e?"true":undefined,inert:e?true:undefined},t("slot",{key:"90a574d4d4811d2936a2ad2eadf06d3fa52642cb",name:"header",onSlotchange:this.handleHeaderSlotChange})),t("div",{key:"f582336002de3078bf1629b19b9a1e5075e3cab4",class:"shell-page__mobile-header",hidden:!e,"aria-hidden":!e?"true":undefined,inert:!e?true:undefined},t("slot",{key:"b0d233b8130f4f415723e9abb53c02f2e45d3f38",name:"mobile-header"}))),t("div",{key:"1d3d73c5d99c1b878efd4789afdb2a974cba1bb5",ref:e=>{this.spacerEl=e??null},class:"shell-page__flow-spacer","aria-hidden":"true"}),t("div",{key:"801b89d36f6fb8799b43d62188cee24ab2f7aa59",class:"shell-page__content"},t("slot",{key:"decd85b3b5317b33ee16b725fc545ad740d582b6"})))}get el(){return this}static get watchers(){return{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],scrollCompaction:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}],desktopHeaderPlacement:[{handleDesktopHeaderPlacementChange:0}]}}static get style(){return n()}},[262,"ds-shell-page",{headerPresentation:[1,"header-presentation"],headerCapacity:[1,"header-capacity"],desktopHeaderPlacement:[513,"desktop-header-placement"],contentInset:[1,"content-inset"],contentInsetBlockStart:[1,"content-inset-block-start"],contentInsetBlockStartSize:[1,"content-inset-block-start-size"],compactContentInsetBlockStartSize:[1,"compact-content-inset-block-start-size"],scrollCompaction:[4,"scroll-compaction"],contentSurface:[1,"content-surface"],responsiveMode:[513,"responsive-mode"],pageTopVisible:[32]},undefined,{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],scrollCompaction:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}],desktopHeaderPlacement:[{handleDesktopHeaderPlacementChange:0}]}]);r.MAX_HEADER_REVEAL_FRAMES=12;r.MAX_HEADER_GEOMETRY_FRAMES=12;function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-page"];e.forEach((e=>{switch(e){case"ds-shell-page":if(!customElements.get(a(e))){customElements.define(a(e),r)}break}}))}o();export{r as S,o as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as s,h as t,a as i,t as a}from"./index.js";import{r as l}from"./p-CVYjLzYI.js";function h(e,s,t){if(e!=="auto")return e;if(s==="constrained")return"constrained";if(s==="compact"||!t)return"compact";return"expanded"}const n=()=>`.sc-ds-shell-page-h{--_shell-page-content-background:var(--color-background-primary);--_shell-page-header-background:var(--color-background-primary);--_shell-page-responsive-content-block-start-inset:var(--dimension-space-200);--_shell-page-content-block-start-inset:var( --ds-shell-page-content-block-start-inset, var(--_shell-page-responsive-content-block-start-inset) );--ds-shell-page-sticky-header-block-size:var(--dimension-size-600);--ds-shell-page-content-block-start-offset:calc( var(--ds-shell-page-sticky-header-block-size) + var(--_shell-page-content-block-start-inset) );display:block;position:relative;min-width:0;min-height:100%;box-sizing:border-box;background:var(--_shell-page-content-background)}.shell-page-host--surface-secondary.sc-ds-shell-page-h{--_shell-page-content-background:var(--color-background-secondary)}.shell-page-host--surface-secondary[responsive-mode='desktop'].sc-ds-shell-page-h,.shell-page-host--surface-secondary[responsive-mode='tablet'].sc-ds-shell-page-h{--_shell-page-header-background:var(--color-background-secondary)}[responsive-mode='tablet'].sc-ds-shell-page-h,[responsive-mode='mobile'].sc-ds-shell-page-h{--_shell-page-responsive-content-block-start-inset:var(--dimension-space-200)}[responsive-mode='mobile'].sc-ds-shell-page-h{--ds-shell-page-sticky-header-block-size:calc( var(--dimension-size-500) + var(--dimension-space-200) )}.shell-page-host--header-compact.sc-ds-shell-page-h,.shell-page-host--header-constrained.sc-ds-shell-page-h{--_shell-page-content-block-start-inset:var( --ds-shell-page-compact-content-block-start-inset, var(--_shell-page-responsive-content-block-start-inset) )}.shell-page-host--inset-none.sc-ds-shell-page-h,.shell-page-host--block-start-inset-none.sc-ds-shell-page-h{--_shell-page-content-block-start-inset:0px}.shell-page-host--desktop-header-shell-bar.sc-ds-shell-page-h{--ds-shell-page-sticky-header-block-size:0px}.shell-page-host--desktop-header-shell-bar.shell-page-host--inset-default.sc-ds-shell-page-h{--_shell-page-content-block-start-inset:var(--_shell-page-responsive-content-block-start-inset)}.shell-page__scroll-sentinel.sc-ds-shell-page{position:absolute;inset-block-start:var(--ds-shell-page-header-travel, 0);inset-inline-start:0;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);pointer-events:none}.shell-page__sticky-header.sc-ds-shell-page{position:sticky;inset-block-start:var(--ds-shell-page-sticky-offset, 0);z-index:var(--dimension-z-index-overlay);min-width:0;background:var(--_shell-page-header-background);overflow:visible;overflow-anchor:none}.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-workflow,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-workflow,.shell-page__mobile-header.sc-ds-shell-page-s>ds-mobile-header,.shell-page__mobile-header .sc-ds-shell-page-s>ds-mobile-header{display:block;min-width:0}.shell-page__desktop-header[hidden].sc-ds-shell-page,.shell-page__mobile-header[hidden].sc-ds-shell-page{display:none}.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__scroll-sentinel.sc-ds-shell-page,.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__flow-spacer.sc-ds-shell-page{display:none}.shell-page__flow-spacer.sc-ds-shell-page{height:var(--ds-shell-page-flow-spacer, 0);background:var(--_shell-page-content-background)}.shell-page__content.sc-ds-shell-page{min-width:0;box-sizing:border-box;background:var(--_shell-page-content-background)}.shell-page-host--inset-default.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-200);padding-block-start:var(--_shell-page-content-block-start-inset)}.shell-page-host--inset-default[responsive-mode='tablet'].sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page,.shell-page-host--inset-default[responsive-mode='mobile'].sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-200);padding-block-start:var(--_shell-page-content-block-start-inset)}.shell-page-host--inset-none.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:0}`;const r=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.headerPresentation="auto";this.desktopHeaderPlacement="page";this.contentInset="default";this.contentInsetBlockStart="default";this.scrollCompaction=true;this.contentSurface="primary";this.responsiveMode="desktop";this.pageTopVisible=true;this.sentinelEl=null;this.spacerEl=null;this.stickyHeaderEl=null;this.headerEl=null;this.expandedHeaderHeight=0;this.headerTravel=0;this.expandedGeometryFrozen=false;this.pageHeaderResizeObserver=null;this.headerResizeObserver=null;this.headerMutationObserver=null;this.headerRevealFrame=null;this.headerGeometryFrame=null;this.reconnectFrame=null;this.scrollRoot=null;this.hasLoaded=false;this.handleScroll=()=>{if(!this.sentinelEl||!this.scrollRoot)return;const e=this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top;this.syncHeaderDividerInset(e);const s=this.sentinelEl.getBoundingClientRect().top>=e;if(this.effectiveScrollCompaction&&!s&&this.pageTopVisible&&this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl);this.expandedGeometryFrozen=true}if(s&&this.expandedGeometryFrozen&&this.el.getBoundingClientRect().top>=e){this.expandedGeometryFrozen=false;if(this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl)}}this.pageTopVisible=s};this.handleHeaderSlotChange=e=>{if(this.responsiveMode==="mobile")return;const s=e.target;const t=s.assignedElements().find((e=>e.tagName.toLowerCase()==="ds-bar-title"));this.observeHeader(t??null)}}handleHeaderContractChange(){this.syncHeaderVariant(true)}handleResponsiveModeChange(){this.el.style.removeProperty("--ds-shell-page-sticky-header-block-size");this.observeHeader(this.responsiveMode==="mobile"||this.desktopHeaderExternal?null:this.findHeader());this.syncPageHeaderBlockSize()}handleDesktopHeaderPlacementChange(){this.observeHeader(this.desktopHeaderExternal?null:this.findHeader());this.syncPageHeaderBlockSize()}componentDidLoad(){this.hasLoaded=true;this.connectRuntime()}componentDidRender(){this.syncHeaderVariant();this.syncPageHeaderBlockSize()}connectedCallback(){if(!this.hasLoaded)return;if(this.reconnectFrame!==null)cancelAnimationFrame(this.reconnectFrame);this.reconnectFrame=requestAnimationFrame((()=>{this.reconnectFrame=null;if(this.el.isConnected)this.connectRuntime()}))}disconnectedCallback(){if(this.reconnectFrame!==null)cancelAnimationFrame(this.reconnectFrame);this.reconnectFrame=null;this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.pageHeaderResizeObserver?.disconnect();this.pageHeaderResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerEl?.style.removeProperty("--ds-bar-title-divider-inset");this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=null}connectRuntime(){this.observePageHeaderGeometry();this.observeHeader(this.responsiveMode==="mobile"?null:this.findHeader());this.connectScrollRoot()}get effectiveVariant(){if(this.desktopHeaderExternal)return"compact";return h(this.headerPresentation,this.headerCapacity??"roomy",this.effectiveScrollCompaction?this.pageTopVisible:true)}get desktopHeaderExternal(){return this.responsiveMode!=="mobile"&&this.desktopHeaderPlacement==="shell-bar"}get effectiveScrollCompaction(){return this.scrollCompaction&&!this.desktopHeaderExternal}get headerContractResolved(){return this.headerPresentation!=="auto"||this.headerCapacity!==undefined}get isScrollCompacted(){return this.effectiveScrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"&&!this.pageTopVisible}get contentInsetStyles(){const e={};const s=this.contentInsetBlockStartSize?.trim();const t=this.compactContentInsetBlockStartSize?.trim();if(s)e["--ds-shell-page-content-block-start-inset"]=s;if(t)e["--ds-shell-page-compact-content-block-start-inset"]=t;return e}composedParent(e){return e.assignedSlot?.parentElement??e.parentElement}findScrollRoot(){let e=this.composedParent(this.el);while(e&&e!==document.documentElement){const s=getComputedStyle(e).overflowY;if(s==="auto"||s==="scroll"||s==="overlay"){return e}e=this.composedParent(e)}return window}connectScrollRoot(){const e=this.findScrollRoot();if(e===this.scrollRoot)return;this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=e;this.scrollRoot.addEventListener("scroll",this.handleScroll,{passive:true});this.handleScroll()}get scrollRootResolved(){const e=this.el.closest("ds-shell-app");if(!e)return true;const s=e.querySelector(".shell-app__content");return s!==null&&this.scrollRoot===s}findHeader(){return this.el.querySelector("ds-bar-title")}get compactHeaderHeight(){return l("--dimension-size-600",0)}syncHeaderDividerInset(e){const s=this.headerEl;if(!s)return;const t=this.effectiveScrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy";const i=l("--dimension-space-200",0);if(!t||!this.sentinelEl||!this.scrollRoot||this.headerTravel<=0||i<=0){s.style.removeProperty("--ds-bar-title-divider-inset");return}const a=e??(this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top);const h=this.sentinelEl.getBoundingClientRect().top-a;const n=Math.min(1,Math.max(0,1-h/this.headerTravel));s.style.setProperty("--ds-bar-title-divider-inset",`${i*(1-n)}px`)}setHeaderTravel(e){const s=Math.max(0,e);if(Math.abs(s-this.headerTravel)<.5)return;this.headerTravel=s;this.el.style.setProperty("--ds-shell-page-header-travel",`${s}px`);this.handleScroll()}measureHeaderTravel(e){const s=e.querySelector("[data-shell-page-header-anchor]");const t=this.compactHeaderHeight;if(!s||t<=0)return;const i=e.getBoundingClientRect();const a=s.getBoundingClientRect();if(i.height<=0||a.height<=0)return;const l=a.top-i.top;const h=Math.max(0,(t-a.height)/2);this.setHeaderTravel(l-h)}captureExpandedHeaderGeometry(e){this.expandedHeaderHeight=Math.max(this.expandedHeaderHeight,e.getBoundingClientRect().height);this.measureHeaderTravel(e)}setSpacerHeight(e){if(!this.spacerEl)return;this.spacerEl.style.setProperty("--ds-shell-page-flow-spacer",`${Math.max(0,e)}px`)}variantClass(e){return`bar-title-host--${e}`}setStickyHeaderOffset(e){this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset",e==="expanded"&&this.effectiveScrollCompaction&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"?`${-this.headerTravel}px`:"0px")}syncPageHeaderBlockSize(){if(this.desktopHeaderExternal){this.el.style.setProperty("--ds-shell-page-sticky-header-block-size","0px");return}const e=this.stickyHeaderEl?.getBoundingClientRect().height??0;if(e>0){this.el.style.setProperty("--ds-shell-page-sticky-header-block-size",`${e}px`)}else{this.el.style.removeProperty("--ds-shell-page-sticky-header-block-size")}}observePageHeaderGeometry(){this.pageHeaderResizeObserver?.disconnect();this.pageHeaderResizeObserver=null;this.syncPageHeaderBlockSize();if(!this.stickyHeaderEl||typeof ResizeObserver==="undefined")return;this.pageHeaderResizeObserver=new ResizeObserver((()=>{this.syncPageHeaderBlockSize()}));this.pageHeaderResizeObserver.observe(this.stickyHeaderEl)}syncRenderedHeaderGeometry(e){const s=this.effectiveVariant;if(!e.classList.contains(this.variantClass(s)))return;this.syncPageHeaderBlockSize();this.setSpacerHeight(this.isScrollCompacted?this.expandedHeaderHeight-this.compactHeaderHeight:0);this.setStickyHeaderOffset(s);if(s==="expanded"&&!this.expandedGeometryFrozen){this.captureExpandedHeaderGeometry(e);this.setStickyHeaderOffset(s)}}cancelHeaderGeometrySync(){if(this.headerGeometryFrame!==null)cancelAnimationFrame(this.headerGeometryFrame);this.headerGeometryFrame=null}scheduleHeaderGeometrySync(s){this.cancelHeaderGeometrySync();let t=e.MAX_HEADER_GEOMETRY_FRAMES;let i=0;const a=()=>{if(this.headerEl!==s)return;t-=1;i+=1;this.connectScrollRoot();this.syncRenderedHeaderGeometry(s);const e=this.effectiveVariant!=="expanded"||this.expandedHeaderHeight>0&&this.headerTravel>0;if(e&&this.scrollRootResolved&&i>=2||t<=0){this.headerGeometryFrame=null;return}this.headerGeometryFrame=requestAnimationFrame(a)};this.headerGeometryFrame=requestAnimationFrame(a)}cancelHeaderReveal(){if(this.headerRevealFrame!==null)cancelAnimationFrame(this.headerRevealFrame);this.headerRevealFrame=null;this.headerEl?.removeAttribute("data-shell-page-syncing")}revealHeaderWhenSynced(s,t){let i=e.MAX_HEADER_REVEAL_FRAMES;const a=()=>{if(this.headerEl!==s){s.removeAttribute("data-shell-page-syncing");return}i-=1;if(s.classList.contains(this.variantClass(t))){s.removeAttribute("data-shell-page-syncing");this.headerRevealFrame=null;return}if(i<=0){this.headerRevealFrame=null;return}this.headerRevealFrame=requestAnimationFrame(a)};this.headerRevealFrame=requestAnimationFrame(a)}syncHeaderVariant(e=false){const s=this.headerEl;if(!s)return;this.syncHeaderDividerInset();if(!this.headerContractResolved){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","");return}const t=this.effectiveVariant;const i=!s.classList.contains(this.variantClass(t));if(!i)this.syncRenderedHeaderGeometry(s);if(i&&this.isScrollCompacted){this.setSpacerHeight(this.expandedHeaderHeight-this.compactHeaderHeight);this.setStickyHeaderOffset(t)}if(e){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","")}if(s.variant!==t){s.variant=t;this.scheduleHeaderGeometrySync(s)}if(e){this.revealHeaderWhenSynced(s,t)}}observeHeader(e){this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.headerEl?.style.removeProperty("--ds-bar-title-divider-inset");this.headerEl=e;this.expandedHeaderHeight=0;this.expandedGeometryFrozen=false;this.setHeaderTravel(0);this.setSpacerHeight(0);this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset","0px");if(!e)return;if(e.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(e)}if(typeof ResizeObserver!=="undefined"){this.headerResizeObserver=new ResizeObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerResizeObserver.observe(e)}if(typeof MutationObserver!=="undefined"){this.headerMutationObserver=new MutationObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerMutationObserver.observe(e,{attributes:true,attributeFilter:["class"],childList:true,subtree:true})}this.syncHeaderVariant(true);this.scheduleHeaderGeometrySync(e)}render(){const e=this.responsiveMode==="mobile";return t(i,{key:"b10710804cec10c2edc9801653f04255e293013c",role:"main",style:this.contentInsetStyles,class:{"shell-page-host--inset-default":this.contentInset==="default","shell-page-host--inset-none":this.contentInset==="none","shell-page-host--block-start-inset-none":this.contentInsetBlockStart==="none","shell-page-host--surface-primary":this.contentSurface==="primary","shell-page-host--surface-secondary":this.contentSurface==="secondary","shell-page-host--mobile":e,"shell-page-host--desktop-header-shell-bar":this.desktopHeaderExternal,[`shell-page-host--header-${this.effectiveVariant}`]:true}},t("div",{key:"442f81eeabaa23b07b7b3025dd7bca8906f931a7",ref:e=>{this.sentinelEl=e??null},class:"shell-page__scroll-sentinel","aria-hidden":"true"}),t("div",{key:"4c93b5857bff72b5efa2f9354133e27555bc1145",ref:e=>{this.stickyHeaderEl=e??null},class:"shell-page__sticky-header"},t("div",{key:"37a9937cf3b77ddfa30b122bef1bb1f4b5836af1",class:"shell-page__desktop-header",hidden:e,"aria-hidden":e?"true":undefined,inert:e?true:undefined},t("slot",{key:"aeac8e3bb3456cdce1bd1728a65fe2dfa62cc2a0",name:"header",onSlotchange:this.handleHeaderSlotChange})),t("div",{key:"d46af59ce0f722a04a3e8b8f25fdb8b85cdab100",class:"shell-page__mobile-header",hidden:!e,"aria-hidden":!e?"true":undefined,inert:!e?true:undefined},t("slot",{key:"2a4690c3e3b6e9d1b57367d5ff75613c15235507",name:"mobile-header"}))),t("div",{key:"fc69139d560bf48c7798e5ff4b50dfe9d95163ea",ref:e=>{this.spacerEl=e??null},class:"shell-page__flow-spacer","aria-hidden":"true"}),t("div",{key:"b49d177df5a0f962f4d4d374e693a43ffe9426a6",class:"shell-page__content"},t("slot",{key:"b6f04a0b66486e4b7d17f7c93e7c59f5bbbd82e7"})))}get el(){return this}static get watchers(){return{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],scrollCompaction:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}],desktopHeaderPlacement:[{handleDesktopHeaderPlacementChange:0}]}}static get style(){return n()}},[262,"ds-shell-page",{headerPresentation:[1,"header-presentation"],headerCapacity:[1,"header-capacity"],desktopHeaderPlacement:[513,"desktop-header-placement"],contentInset:[1,"content-inset"],contentInsetBlockStart:[1,"content-inset-block-start"],contentInsetBlockStartSize:[1,"content-inset-block-start-size"],compactContentInsetBlockStartSize:[1,"compact-content-inset-block-start-size"],scrollCompaction:[4,"scroll-compaction"],contentSurface:[1,"content-surface"],responsiveMode:[513,"responsive-mode"],pageTopVisible:[32]},undefined,{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],scrollCompaction:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}],desktopHeaderPlacement:[{handleDesktopHeaderPlacementChange:0}]}]);r.MAX_HEADER_REVEAL_FRAMES=12;r.MAX_HEADER_GEOMETRY_FRAMES=12;function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-page"];e.forEach((e=>{switch(e){case"ds-shell-page":if(!customElements.get(a(e))){customElements.define(a(e),r)}break}}))}o();export{r as S,o as d};
|
|
2
|
+
//# sourceMappingURL=p-C860ilDn.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as t,c as e,h as s,a as r,t as n}from"./index.js";import{b as a,f as o,r as d,c,s as l,e as h,g as b,h as f,i as u,j as v,v as p,o as m,k as g,m as w,q as x,p as k,l as _,n as y}from"./p-BWSIw8AQ.js";import{d as A}from"./p-CzTJAO2J.js";import{d as I}from"./p-BM-UYlIS.js";import{d as z}from"./p-DKg181YU.js";import{d as M}from"./p-CC4X8rpT.js";import{d as C}from"./p-BVsVUnAw.js";import{d as T}from"./p-0XTyQNRG.js";import{d as S}from"./p-529k8euH.js";import{d as L}from"./p-Ch00yccW.js";import{d as j}from"./p-CAARHqjE.js";import{d as B}from"./p-M9pOLcyK.js";import{d as E}from"./p-CTAF7SkL.js";import{d as O}from"./p-BkKdzYZP.js";const V=()=>`.sc-ds-bar-title-h,.sc-ds-bar-title:where(.ds-table),.sc-ds-bar-title:where(.tooltip-popup),.sc-ds-bar-title:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-bar-title{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-bar-title{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-bar-title{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-bar-title,.ds-chrome-header__trailing.sc-ds-bar-title{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-bar-title{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-bar-title{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-bar-title{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-bar-title{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-bar-title,.ds-chrome-header__description.sc-ds-bar-title{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-bar-title{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-bar-title .ds-chrome-header__description.sc-ds-bar-title{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-bar-title-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-title-h,.ds-focus-ring.sc-ds-bar-title,.ds-focus-ring-inset.sc-ds-bar-title-h,.ds-focus-ring-inset.sc-ds-bar-title{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-title-h:focus-visible,.ds-focus-ring.sc-ds-bar-title:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-bar-title-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-bar-title-h,.ds-interaction-fill.sc-ds-bar-title{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before,.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before{z-index:1}.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-bar-title-h,.ds-interaction-fill--bordered.sc-ds-bar-title{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-bar-title-h,.ds-interaction-fill--selected.sc-ds-bar-title{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-bar-title-h::after,.ds-interaction-fill--grouped.sc-ds-bar-title::after,.ds-interaction-fill--grouped.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-bar-title-h,.ds-interaction-fill--grouped.sc-ds-bar-title{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-bar-title-h>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill.sc-ds-bar-title>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill__content.sc-ds-bar-title{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-bar-title-h,.ds-interaction-fill--on-faint.sc-ds-bar-title{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-bar-title-h,.ds-interaction-fill--on-medium.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-bar-title-h,.ds-interaction-fill--on-bold.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-bar-title-h,.ds-interaction-fill--on-strong.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-bar-title-h,.ds-interaction-fill--on-translucent.sc-ds-bar-title{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-bar-title-h,.ds-interaction-fill--on-inverted.sc-ds-bar-title{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-bar-title-h,.ds-interaction-fill--on-media.sc-ds-bar-title{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-bar-title-h,.ds-interaction-fill--on-always-dark.sc-ds-bar-title{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-bar-title-h,.ds-interaction-fill--on-chrome.sc-ds-bar-title{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-bar-title-h,.ds-interaction-fill--on-navigation.sc-ds-bar-title{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-bar-title-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-bar-title:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-bar-title-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-bar-title:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.sc-ds-bar-title-h{display:block;min-width:0;box-sizing:border-box;background:var(--_shell-page-header-background, var(--color-background-primary))}[placement='shell-bar'].sc-ds-bar-title-h{--_shell-page-header-background:var(--color-background-secondary)}ds-shell-app.sc-ds-bar-title-h:not([gradient-preset='none'])[placement='shell-bar'],ds-shell-app:not([gradient-preset='none']) [placement='shell-bar'].sc-ds-bar-title-h,ds-shell-app.sc-ds-bar-title-h:not([gradient-preset='none'])[placement='shell-bar'] .bar-title.sc-ds-bar-title,ds-shell-app:not([gradient-preset='none']) [placement='shell-bar'].sc-ds-bar-title-h .bar-title.sc-ds-bar-title,ds-shell-app.shell-app--paper-texture[placement='shell-bar'].sc-ds-bar-title-h,ds-shell-app.shell-app--paper-texture [placement='shell-bar'].sc-ds-bar-title-h,ds-shell-app.shell-app--paper-texture[placement='shell-bar'].sc-ds-bar-title-h .bar-title.sc-ds-bar-title,ds-shell-app.shell-app--paper-texture [placement='shell-bar'].sc-ds-bar-title-h .bar-title.sc-ds-bar-title{background:transparent}[data-shell-page-syncing].sc-ds-bar-title-h{visibility:hidden}.bar-title.sc-ds-bar-title{position:relative;min-width:0;box-sizing:border-box;background:var(--_shell-page-header-background, var(--color-background-primary))}.bar-title.sc-ds-bar-title::after{content:'';position:absolute;inset:auto var(--ds-bar-title-divider-inset, var(--dimension-space-200)) 0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.bar-title--divider-hidden.sc-ds-bar-title::after{display:none}.bar-title__inner.sc-ds-bar-title{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--dimension-space-100);padding:var(--dimension-space-200);box-sizing:border-box}.bar-title__row.sc-ds-bar-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);min-width:0}.bar-title-host--expanded.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{gap:var(--dimension-space-400)}.bar-title__leading.sc-ds-bar-title{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--dimension-space-050);min-width:0}.bar-title__title-row.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0;min-height:var(--dimension-size-400)}.bar-title__identity.sc-ds-bar-title{display:flex;flex:0 1 auto;align-items:center;gap:var(--dimension-space-050);min-width:0}.bar-title__back.sc-ds-bar-title,.bar-title__section-chevron.sc-ds-bar-title{flex:0 0 auto}.bar-title__breadcrumb.sc-ds-bar-title{display:block;width:100%;min-width:0}.bar-title__heading.sc-ds-bar-title{display:block;width:auto;min-width:0;user-select:none}.bar-title__divider.sc-ds-bar-title{width:var(--dimension-stroke-width-012);height:var(--dimension-size-250);margin-inline-start:var(--dimension-space-100);flex:0 0 var(--dimension-stroke-width-012);background:var(--color-border-tertiary)}.bar-title__section-selector.sc-ds-bar-title{display:flex;flex:0 1 auto;min-width:0;max-width:var(--dimension-panel-width-sm)}.bar-title__section-trigger.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-half);display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:0;max-width:100%;padding-inline:var(--ds-control-padding-inline);border:none;border-radius:var(--ds-control-radius);box-sizing:border-box;background:transparent;color:var(--color-foreground-secondary);cursor:default;font-family:inherit;user-select:none}.bar-title__section-label.sc-ds-bar-title{min-width:0;padding-inline:var(--ds-control-label-inset)}.bar-title__actions.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto}.bar-title__description.sc-ds-bar-title{display:block;min-width:0;max-width:100%}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title{height:var(--dimension-size-600)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title::after{inset-inline:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__inner.sc-ds-bar-title{flex:1 1 auto;height:100%;min-width:0;padding:0;gap:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{height:100%;align-items:center}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__identity.sc-ds-bar-title{height:var(--dimension-size-400)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__divider.sc-ds-bar-title{margin-inline-start:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__heading.sc-ds-bar-title{display:inline-flex;flex:1 1 auto;align-items:center;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box}`;let F=0;const D="calc(var(--dimension-space-100) + var(--dimension-space-050))";const H=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.dsBack=e(this,"dsBack",7);this.dsBreadcrumbSelect=e(this,"dsBreadcrumbSelect",7);this.dsSectionChange=e(this,"dsSectionChange",7);this.dsAction=e(this,"dsAction",7);this.description="";this.showBack=false;this.backAriaLabel="Back";this.backLabel="Back";this.breadcrumbs=[];this.breadcrumbAriaLabel="Breadcrumb";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.primaryAction=null;this.actions=[];this.actionsAriaLabel="More page actions";this.variant="expanded";this.placement="page";this.showDivider=true;this.sectionMenuOpen=false;this.openActionMenuId="";this.surfaceActionMenuId="";this.sectionSurfaceOpen=false;this.sectionMenuInitialFocusVisible=false;this.actionMenuInitialFocusVisible=false;this.instanceId=F++;this.sectionMenuTriggerId=`bar-title-section-trigger-${this.instanceId}`;this.sectionMenuId=`bar-title-section-menu-${this.instanceId}`;this.actionMenuTriggerId=`bar-title-action-trigger-${this.instanceId}`;this.actionMenuId=`bar-title-action-menu-${this.instanceId}`;this.sectionTriggerEl=null;this.actionTriggerEl=null;this.actionTriggerEls=new Map;this.toggleSectionMenu=i=>{this.sectionMenuInitialFocusVisible=i.detail===0;this.openActionMenuId="";this.sectionMenuOpen=!this.sectionMenuOpen;if(this.sectionMenuOpen)this.sectionSurfaceOpen=true};this.closeSectionMenu=()=>{this.sectionMenuOpen=false};this.handleSectionSelect=i=>{const t=String(i.detail?.value??"");const e=this.selectableSections.find((i=>i.id===t));if(!e||e.isInactive)return;this.closeSectionMenu();this.dsSectionChange.emit(t);requestAnimationFrame((()=>this.sectionTriggerEl?.focus()))};this.toggleActionMenu=(i,t)=>{this.actionMenuInitialFocusVisible=t.detail===0;this.sectionMenuOpen=false;this.openActionMenuId=this.openActionMenuId===i?"":i;if(this.openActionMenuId)this.surfaceActionMenuId=this.openActionMenuId};this.finishActionMenuClose=i=>{const t=this.surfaceActionMenuId;const e=t==="__overflow"?this.actionMenuId:a("bar-title",this.instanceId,this.resolvedActionItems,t);if(this.openActionMenuId!==t&&i.target.id===e){this.surfaceActionMenuId=""}};this.closeActionMenu=()=>{this.openActionMenuId=""};this.handleActionSelect=i=>{const t=String(i.detail?.value??"");const e=o(this.resolvedActionItems,t);if(!e||e.isInactive||"isLoading"in e&&e.isLoading)return;const s=this.openActionMenuId;this.closeActionMenu();this.dsAction.emit(t);requestAnimationFrame((()=>{void d({menuId:s,overflowTrigger:this.actionTriggerEl,actionTriggers:this.actionTriggerEls,resolvedActionItems:this.resolvedActionItems})}))};this.handleBreadcrumbSelect=i=>{if(this.breadcrumbs.length===0){this.dsBack.emit(i.detail.originalEvent);return}const t=this.dsBreadcrumbSelect.emit(i.detail);if(t.defaultPrevented)i.preventDefault()}}componentWillLoad(){if(this.el.closest("ds-shell-page")){this.el.setAttribute("data-shell-page-syncing","")}this.reportActionIdIssues()}handleSectionsChange(){if(!this.hasSectionSelector){this.closeSectionMenu();this.sectionSurfaceOpen=false}}handleActionsChange(){this.reportActionIdIssues();if(!this.availableActionMenuIds.has(this.openActionMenuId))this.closeActionMenu();if(!this.availableActionMenuIds.has(this.surfaceActionMenuId))this.surfaceActionMenuId=""}reportActionIdIssues(){for(const i of c(this.resolvedActionItems)){console.warn(`[ds-bar-title] ${i}`)}}get compact(){return this.effectiveVariant!=="expanded"}get menuSideOffset(){return this.placement==="shell-bar"?D:undefined}get effectiveVariant(){return this.placement==="shell-bar"?"compact":this.variant}get dividerVisible(){return this.compact?this.showCompactDivider??this.showDivider:this.showDivider}get expandedBreadcrumbItems(){if(this.breadcrumbs.length>0)return this.breadcrumbs;if(!this.showBack)return[];return[{id:"back",label:this.backLabel,ariaLabel:this.backAriaLabel}]}get primaryCollapsed(){return this.actionItems===undefined&&this.effectiveVariant==="constrained"&&this.primaryAction!==null&&(this.primaryAction.collapse??"auto")==="auto"}get selectableSections(){return l(this.sections)}get hasSectionSelector(){return this.selectableSections.length>1}get effectiveValue(){return h(this.sections,this.value)}get selectedSectionLabel(){return b(this.sections,this.value)}get sectionTriggerAriaLabel(){return f(this.sectionsAriaLabel,this.selectedSectionLabel)}get sectionMenuSections(){return u(this.sections,this.effectiveValue)}get resolvedActionItems(){return v(this.actionItems,this.primaryAction,this.actions)}get visibleActions(){return p(this.resolvedActionItems,this.effectiveVariant)}get actionMenuSections(){return m(this.resolvedActionItems,this.effectiveVariant)}get showActionMenuTrigger(){return this.actionMenuSections.length>0}get availableActionMenuIds(){return g(this.visibleActions,this.showActionMenuTrigger)}chromeActionOptions(){return{classPrefix:"bar-title",compact:this.compact,visibleActions:this.visibleActions,showOverflowTrigger:this.showActionMenuTrigger,actionItems:this.actionItems,primaryAction:this.primaryAction,resolvedActionItems:this.resolvedActionItems,instanceId:this.instanceId,openActionMenuId:this.openActionMenuId,surfaceActionMenuId:this.surfaceActionMenuId,actionsAriaLabel:this.actionsAriaLabel,actionMenuTriggerId:this.actionMenuTriggerId,actionMenuId:this.actionMenuId,actionTriggers:this.actionTriggerEls,setOverflowTriggerEl:i=>{this.actionTriggerEl=i},toggleActionMenu:this.toggleActionMenu,emitAction:i=>this.dsAction.emit(i)}}renderSectionSelector(){if(!this.hasSectionSelector)return null;return[s("div",{class:"bar-title__divider","aria-hidden":"true"}),w({classPrefix:"bar-title",triggerId:this.sectionMenuTriggerId,menuId:this.sectionMenuId,open:this.sectionMenuOpen,surfaceOpen:this.sectionSurfaceOpen,ariaLabel:this.sectionTriggerAriaLabel,selectedLabel:this.selectedSectionLabel,setTriggerEl:i=>{this.sectionTriggerEl=i},onToggle:this.toggleSectionMenu})]}renderActions(){return x(this.chromeActionOptions())}renderActionMenus(){return k({classPrefix:"bar-title",visibleActions:this.visibleActions,instanceId:this.instanceId,resolvedActionItems:this.resolvedActionItems,sideOffset:this.menuSideOffset,openActionMenuId:this.openActionMenuId,actionMenuInitialFocusVisible:this.actionMenuInitialFocusVisible,overflowTrigger:this.actionTriggerEl,actionTriggers:this.actionTriggerEls,closeActionMenu:this.closeActionMenu,finishActionMenuClose:this.finishActionMenuClose,handleActionSelect:this.handleActionSelect})}renderBreadcrumb(){const i=this.expandedBreadcrumbItems;if(i.length===0)return null;return s("ds-breadcrumb",{class:"bar-title__breadcrumb",items:i,ariaLabel:this.breadcrumbAriaLabel,onDsSelect:this.handleBreadcrumbSelect})}renderBack(){return _({classPrefix:"bar-title",showBack:this.showBack,backAriaLabel:this.backAriaLabel,onBack:i=>this.dsBack.emit(i)})}render(){const i=this.compact;return s(r,{key:"51f4ef35e29e82fd98968177ab10707c728dd4cc",class:{"bar-title-host--compact":i,"bar-title-host--expanded":this.effectiveVariant==="expanded","bar-title-host--constrained":this.effectiveVariant==="constrained","bar-title-host--has-description":!!this.description,"bar-title-host--has-back":this.showBack,"bar-title-host--has-breadcrumb":!i&&this.expandedBreadcrumbItems.length>0,"bar-title-host--shell-bar":this.placement==="shell-bar"}},s("div",{key:"b53626711457aaf4794755e9c3c857f6775ad5e9",class:{"bar-title":true,"bar-title--divider-hidden":!this.dividerVisible,"ds-chrome-header":i}},s("div",{key:"3990738466fc42a902cc800359868e79fdddaef0",class:"bar-title__inner"},!i?this.renderBreadcrumb():null,s("div",{key:"f60254e371c674ca9f64eb44a8bddb3a8bc2373d",class:"bar-title__row"},s("div",{key:"7e4403604106e10c0ab41e2fa8b434eeddbfbe13",class:"bar-title__leading"},s("div",{key:"ac94bf3abd8eefcac149faee153f6fefa5126ff7",class:"bar-title__title-row","data-shell-page-header-anchor":true},s("div",{key:"7724cbfac580ba570787e01ae1ce3068a3218999",class:"bar-title__identity"},i?this.renderBack():null,s("ds-text",{key:"d8c2e9684af84169d5bb1c4e747db448374d458d",class:"bar-title__heading ds-control--md",variant:i?"text-title-small":"text-title-medium",emphasis:true,color:"primary",as:"h1",lineTruncation:1},this.heading)),this.renderSectionSelector()),this.description&&!i?s("ds-text",{class:"bar-title__description",variant:"text-body-small",color:"secondary",lineTruncation:2,wrap:"wrap",as:"p"},this.description):null),this.renderActions()))),this.hasSectionSelector?s("ds-menu",{id:this.sectionMenuId,class:"bar-title__section-menu",anchorId:this.sectionMenuTriggerId,sideOffset:this.menuSideOffset,menuLabel:this.sectionsAriaLabel,open:this.sectionMenuOpen,initialFocusVisible:this.sectionMenuInitialFocusVisible,sections:this.sectionMenuSections,onDsClose:this.closeSectionMenu,onDsAfterClose:()=>{if(!this.sectionMenuOpen)this.sectionSurfaceOpen=false},onDsSelect:this.handleSectionSelect}):null,this.renderActionMenus(),y({classPrefix:"bar-title",showOverflowTrigger:this.showActionMenuTrigger,actionMenuId:this.actionMenuId,actionMenuTriggerId:this.actionMenuTriggerId,sideOffset:this.menuSideOffset,actionsAriaLabel:this.actionsAriaLabel,open:this.openActionMenuId==="__overflow",actionMenuInitialFocusVisible:this.actionMenuInitialFocusVisible,actionMenuSections:this.actionMenuSections,closeActionMenu:this.closeActionMenu,finishActionMenuClose:this.finishActionMenuClose,handleActionSelect:this.handleActionSelect}))}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}],actionItems:[{handleActionsChange:0}]}}static get style(){return V()}},[2,"ds-bar-title",{heading:[1],description:[1],showBack:[4,"show-back"],backAriaLabel:[1,"back-aria-label"],backLabel:[1,"back-label"],breadcrumbs:[16],breadcrumbAriaLabel:[1,"breadcrumb-aria-label"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],primaryAction:[16],actions:[16],actionItems:[16],actionsAriaLabel:[1,"actions-aria-label"],variant:[1],placement:[513],showDivider:[4,"show-divider"],showCompactDivider:[4,"show-compact-divider"],sectionMenuOpen:[32],openActionMenuId:[32],surfaceActionMenuId:[32],sectionSurfaceOpen:[32],sectionMenuInitialFocusVisible:[32],actionMenuInitialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}],actionItems:[{handleActionsChange:0}]}]);function P(){if(typeof customElements==="undefined"){return}const i=["ds-bar-title","ds-badge","ds-breadcrumb","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text","ds-tooltip"];i.forEach((i=>{switch(i){case"ds-bar-title":if(!customElements.get(n(i))){customElements.define(n(i),H)}break;case"ds-badge":if(!customElements.get(n(i))){A()}break;case"ds-breadcrumb":if(!customElements.get(n(i))){I()}break;case"ds-button-filled":if(!customElements.get(n(i))){z()}break;case"ds-button-unfilled":if(!customElements.get(n(i))){M()}break;case"ds-icon":if(!customElements.get(n(i))){C()}break;case"ds-loader":if(!customElements.get(n(i))){T()}break;case"ds-menu":if(!customElements.get(n(i))){S()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){L()}break;case"ds-switch":if(!customElements.get(n(i))){j()}break;case"ds-tag":if(!customElements.get(n(i))){B()}break;case"ds-text":if(!customElements.get(n(i))){E()}break;case"ds-tooltip":if(!customElements.get(n(i))){O()}break}}))}P();export{H as B,P as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as i,H as t,c as e,h as s,a as r,t as n}from"./index.js";import{b as a,f as o,r as d,c,s as l,e as h,g as b,h as f,i as u,j as v,v as p,o as m,k as g,m as w,q as x,p as _,l as k,n as y}from"./p-BWSIw8AQ.js";import{d as A}from"./p-8fddX3V3.js";import{d as I}from"./p-N-2CZze7.js";import{d as z}from"./p-DFR9hqDU.js";import{d as M}from"./p-WEffoQQD.js";import{d as T}from"./p-BVsVUnAw.js";import{d as C}from"./p-0XTyQNRG.js";import{d as S}from"./p-BpPHCF63.js";import{d as B}from"./p-Nx52go85.js";import{d as E}from"./p-KTaiJztz.js";import{d as j}from"./p-B-ChwMFE.js";import{d as L}from"./p-DMPn_dt7.js";import{d as F}from"./p-BMI0F08u.js";const O=()=>`.sc-ds-bar-title-h,.sc-ds-bar-title:where(.ds-table),.sc-ds-bar-title:where(.tooltip-popup),.sc-ds-bar-title:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-bar-title{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-bar-title{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-bar-title{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-bar-title,.ds-chrome-header__trailing.sc-ds-bar-title{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-bar-title{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-bar-title{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-bar-title{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-bar-title{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-bar-title,.ds-chrome-header__description.sc-ds-bar-title{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-bar-title{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-bar-title .ds-chrome-header__description.sc-ds-bar-title{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-bar-title-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-title-h,.ds-focus-ring.sc-ds-bar-title,.ds-focus-ring-inset.sc-ds-bar-title-h,.ds-focus-ring-inset.sc-ds-bar-title{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-title-h:focus-visible,.ds-focus-ring.sc-ds-bar-title:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-bar-title-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-bar-title-h,.ds-interaction-fill.sc-ds-bar-title{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before,.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before{z-index:1}.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-bar-title-h,.ds-interaction-fill--bordered.sc-ds-bar-title{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-bar-title-h,.ds-interaction-fill--selected.sc-ds-bar-title{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-bar-title-h::after,.ds-interaction-fill--grouped.sc-ds-bar-title::after,.ds-interaction-fill--grouped.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-bar-title-h,.ds-interaction-fill--grouped.sc-ds-bar-title{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-bar-title-h>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill.sc-ds-bar-title>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill__content.sc-ds-bar-title{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-bar-title-h,.ds-interaction-fill--on-faint.sc-ds-bar-title{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-bar-title-h,.ds-interaction-fill--on-medium.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-bar-title-h,.ds-interaction-fill--on-bold.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-bar-title-h,.ds-interaction-fill--on-strong.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-bar-title-h,.ds-interaction-fill--on-translucent.sc-ds-bar-title{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-bar-title-h,.ds-interaction-fill--on-inverted.sc-ds-bar-title{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-bar-title-h,.ds-interaction-fill--on-media.sc-ds-bar-title{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-bar-title-h,.ds-interaction-fill--on-always-dark.sc-ds-bar-title{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-bar-title-h,.ds-interaction-fill--on-chrome.sc-ds-bar-title{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-bar-title-h,.ds-interaction-fill--on-navigation.sc-ds-bar-title{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-bar-title-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-bar-title:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-bar-title-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-bar-title:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.sc-ds-bar-title-h{display:block;min-width:0;box-sizing:border-box;background:var(--_shell-page-header-background, var(--color-background-primary))}[placement='shell-bar'].sc-ds-bar-title-h{--_shell-page-header-background:var(--color-background-secondary)}ds-shell-app.sc-ds-bar-title-h:not([gradient-preset='none'])[placement='shell-bar'],ds-shell-app:not([gradient-preset='none']) [placement='shell-bar'].sc-ds-bar-title-h,ds-shell-app.sc-ds-bar-title-h:not([gradient-preset='none'])[placement='shell-bar'] .bar-title.sc-ds-bar-title,ds-shell-app:not([gradient-preset='none']) [placement='shell-bar'].sc-ds-bar-title-h .bar-title.sc-ds-bar-title,ds-shell-app.shell-app--paper-texture[placement='shell-bar'].sc-ds-bar-title-h,ds-shell-app.shell-app--paper-texture [placement='shell-bar'].sc-ds-bar-title-h,ds-shell-app.shell-app--paper-texture[placement='shell-bar'].sc-ds-bar-title-h .bar-title.sc-ds-bar-title,ds-shell-app.shell-app--paper-texture [placement='shell-bar'].sc-ds-bar-title-h .bar-title.sc-ds-bar-title{background:transparent}[data-shell-page-syncing].sc-ds-bar-title-h{visibility:hidden}.bar-title.sc-ds-bar-title{position:relative;min-width:0;box-sizing:border-box;background:var(--_shell-page-header-background, var(--color-background-primary))}.bar-title.sc-ds-bar-title::after{content:'';position:absolute;inset:auto var(--ds-bar-title-divider-inset, var(--dimension-space-200)) 0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.bar-title--divider-hidden.sc-ds-bar-title::after{display:none}.bar-title__inner.sc-ds-bar-title{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--dimension-space-100);padding:var(--dimension-space-200);box-sizing:border-box}.bar-title__row.sc-ds-bar-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);min-width:0}.bar-title-host--expanded.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{gap:var(--dimension-space-400)}.bar-title__leading.sc-ds-bar-title{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--dimension-space-050);min-width:0}.bar-title__title-row.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0;min-height:var(--dimension-size-400)}.bar-title__identity.sc-ds-bar-title{display:flex;flex:0 1 auto;align-items:center;gap:var(--dimension-space-050);min-width:0}.bar-title__back.sc-ds-bar-title,.bar-title__section-chevron.sc-ds-bar-title{flex:0 0 auto}.bar-title__breadcrumb.sc-ds-bar-title{display:block;width:100%;min-width:0}.bar-title__heading.sc-ds-bar-title{display:block;width:auto;min-width:0;user-select:none}.bar-title__divider.sc-ds-bar-title{width:var(--dimension-stroke-width-012);height:var(--dimension-size-250);margin-inline-start:var(--dimension-space-100);flex:0 0 var(--dimension-stroke-width-012);background:var(--color-border-tertiary)}.bar-title__section-selector.sc-ds-bar-title{display:flex;flex:0 1 auto;min-width:0;max-width:var(--dimension-panel-width-sm)}.bar-title__section-trigger.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-half);display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:0;max-width:100%;padding-inline:var(--ds-control-padding-inline);border:none;border-radius:var(--ds-control-radius);box-sizing:border-box;background:transparent;color:var(--color-foreground-secondary);cursor:default;font-family:inherit;user-select:none}.bar-title__section-label.sc-ds-bar-title{min-width:0;padding-inline:var(--ds-control-label-inset)}.bar-title__actions.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto}.bar-title__description.sc-ds-bar-title{display:block;min-width:0;max-width:100%}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title{height:var(--dimension-size-600)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title::after{inset-inline:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__inner.sc-ds-bar-title{flex:1 1 auto;height:100%;min-width:0;padding:0;gap:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{height:100%;align-items:center}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__identity.sc-ds-bar-title{height:var(--dimension-size-400)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__divider.sc-ds-bar-title{margin-inline-start:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__heading.sc-ds-bar-title{display:inline-flex;flex:1 1 auto;align-items:center;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box}`;let V=0;const D="calc(var(--dimension-space-100) + var(--dimension-space-050))";const P=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.dsBack=e(this,"dsBack",7);this.dsBreadcrumbSelect=e(this,"dsBreadcrumbSelect",7);this.dsSectionChange=e(this,"dsSectionChange",7);this.dsAction=e(this,"dsAction",7);this.description="";this.showBack=false;this.backAriaLabel="Back";this.backLabel="Back";this.breadcrumbs=[];this.breadcrumbAriaLabel="Breadcrumb";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.primaryAction=null;this.actions=[];this.actionsAriaLabel="More page actions";this.variant="expanded";this.placement="page";this.showDivider=true;this.sectionMenuOpen=false;this.openActionMenuId="";this.surfaceActionMenuId="";this.sectionSurfaceOpen=false;this.sectionMenuInitialFocusVisible=false;this.actionMenuInitialFocusVisible=false;this.instanceId=V++;this.sectionMenuTriggerId=`bar-title-section-trigger-${this.instanceId}`;this.sectionMenuId=`bar-title-section-menu-${this.instanceId}`;this.actionMenuTriggerId=`bar-title-action-trigger-${this.instanceId}`;this.actionMenuId=`bar-title-action-menu-${this.instanceId}`;this.sectionTriggerEl=null;this.actionTriggerEl=null;this.actionTriggerEls=new Map;this.toggleSectionMenu=i=>{this.sectionMenuInitialFocusVisible=i.detail===0;this.openActionMenuId="";this.sectionMenuOpen=!this.sectionMenuOpen;if(this.sectionMenuOpen)this.sectionSurfaceOpen=true};this.closeSectionMenu=()=>{this.sectionMenuOpen=false};this.handleSectionSelect=i=>{const t=String(i.detail?.value??"");const e=this.selectableSections.find((i=>i.id===t));if(!e||e.isInactive)return;this.closeSectionMenu();this.dsSectionChange.emit(t);requestAnimationFrame((()=>this.sectionTriggerEl?.focus()))};this.toggleActionMenu=(i,t)=>{this.actionMenuInitialFocusVisible=t.detail===0;this.sectionMenuOpen=false;this.openActionMenuId=this.openActionMenuId===i?"":i;if(this.openActionMenuId)this.surfaceActionMenuId=this.openActionMenuId};this.finishActionMenuClose=i=>{const t=this.surfaceActionMenuId;const e=t==="__overflow"?this.actionMenuId:a("bar-title",this.instanceId,this.resolvedActionItems,t);if(this.openActionMenuId!==t&&i.target.id===e){this.surfaceActionMenuId=""}};this.closeActionMenu=()=>{this.openActionMenuId=""};this.handleActionSelect=i=>{const t=String(i.detail?.value??"");const e=o(this.resolvedActionItems,t);if(!e||e.isInactive||"isLoading"in e&&e.isLoading)return;const s=this.openActionMenuId;this.closeActionMenu();this.dsAction.emit(t);requestAnimationFrame((()=>{void d({menuId:s,overflowTrigger:this.actionTriggerEl,actionTriggers:this.actionTriggerEls,resolvedActionItems:this.resolvedActionItems})}))};this.handleBreadcrumbSelect=i=>{if(this.breadcrumbs.length===0){this.dsBack.emit(i.detail.originalEvent);return}const t=this.dsBreadcrumbSelect.emit(i.detail);if(t.defaultPrevented)i.preventDefault()}}componentWillLoad(){if(this.el.closest("ds-shell-page")){this.el.setAttribute("data-shell-page-syncing","")}this.reportActionIdIssues()}handleSectionsChange(){if(!this.hasSectionSelector){this.closeSectionMenu();this.sectionSurfaceOpen=false}}handleActionsChange(){this.reportActionIdIssues();if(!this.availableActionMenuIds.has(this.openActionMenuId))this.closeActionMenu();if(!this.availableActionMenuIds.has(this.surfaceActionMenuId))this.surfaceActionMenuId=""}reportActionIdIssues(){for(const i of c(this.resolvedActionItems)){console.warn(`[ds-bar-title] ${i}`)}}get compact(){return this.effectiveVariant!=="expanded"}get menuSideOffset(){return this.placement==="shell-bar"?D:undefined}get effectiveVariant(){return this.placement==="shell-bar"?"compact":this.variant}get dividerVisible(){return this.compact?this.showCompactDivider??this.showDivider:this.showDivider}get expandedBreadcrumbItems(){if(this.breadcrumbs.length>0)return this.breadcrumbs;if(!this.showBack)return[];return[{id:"back",label:this.backLabel,ariaLabel:this.backAriaLabel}]}get primaryCollapsed(){return this.actionItems===undefined&&this.effectiveVariant==="constrained"&&this.primaryAction!==null&&(this.primaryAction.collapse??"auto")==="auto"}get selectableSections(){return l(this.sections)}get hasSectionSelector(){return this.selectableSections.length>1}get effectiveValue(){return h(this.sections,this.value)}get selectedSectionLabel(){return b(this.sections,this.value)}get sectionTriggerAriaLabel(){return f(this.sectionsAriaLabel,this.selectedSectionLabel)}get sectionMenuSections(){return u(this.sections,this.effectiveValue)}get resolvedActionItems(){return v(this.actionItems,this.primaryAction,this.actions)}get visibleActions(){return p(this.resolvedActionItems,this.effectiveVariant)}get actionMenuSections(){return m(this.resolvedActionItems,this.effectiveVariant)}get showActionMenuTrigger(){return this.actionMenuSections.length>0}get availableActionMenuIds(){return g(this.visibleActions,this.showActionMenuTrigger)}chromeActionOptions(){return{classPrefix:"bar-title",compact:this.compact,visibleActions:this.visibleActions,showOverflowTrigger:this.showActionMenuTrigger,actionItems:this.actionItems,primaryAction:this.primaryAction,resolvedActionItems:this.resolvedActionItems,instanceId:this.instanceId,openActionMenuId:this.openActionMenuId,surfaceActionMenuId:this.surfaceActionMenuId,actionsAriaLabel:this.actionsAriaLabel,actionMenuTriggerId:this.actionMenuTriggerId,actionMenuId:this.actionMenuId,actionTriggers:this.actionTriggerEls,setOverflowTriggerEl:i=>{this.actionTriggerEl=i},toggleActionMenu:this.toggleActionMenu,emitAction:i=>this.dsAction.emit(i)}}renderSectionSelector(){if(!this.hasSectionSelector)return null;return[s("div",{class:"bar-title__divider","aria-hidden":"true"}),w({classPrefix:"bar-title",triggerId:this.sectionMenuTriggerId,menuId:this.sectionMenuId,open:this.sectionMenuOpen,surfaceOpen:this.sectionSurfaceOpen,ariaLabel:this.sectionTriggerAriaLabel,selectedLabel:this.selectedSectionLabel,setTriggerEl:i=>{this.sectionTriggerEl=i},onToggle:this.toggleSectionMenu})]}renderActions(){return x(this.chromeActionOptions())}renderActionMenus(){return _({classPrefix:"bar-title",visibleActions:this.visibleActions,instanceId:this.instanceId,resolvedActionItems:this.resolvedActionItems,sideOffset:this.menuSideOffset,openActionMenuId:this.openActionMenuId,actionMenuInitialFocusVisible:this.actionMenuInitialFocusVisible,overflowTrigger:this.actionTriggerEl,actionTriggers:this.actionTriggerEls,closeActionMenu:this.closeActionMenu,finishActionMenuClose:this.finishActionMenuClose,handleActionSelect:this.handleActionSelect})}renderBreadcrumb(){const i=this.expandedBreadcrumbItems;if(i.length===0)return null;return s("ds-breadcrumb",{class:"bar-title__breadcrumb",items:i,ariaLabel:this.breadcrumbAriaLabel,onDsSelect:this.handleBreadcrumbSelect})}renderBack(){return k({classPrefix:"bar-title",showBack:this.showBack,backAriaLabel:this.backAriaLabel,onBack:i=>this.dsBack.emit(i)})}render(){const i=this.compact;return s(r,{key:"1fd9aabf44e7bb1594bc6b0f67948d8da66911a7",class:{"bar-title-host--compact":i,"bar-title-host--expanded":this.effectiveVariant==="expanded","bar-title-host--constrained":this.effectiveVariant==="constrained","bar-title-host--has-description":!!this.description,"bar-title-host--has-back":this.showBack,"bar-title-host--has-breadcrumb":!i&&this.expandedBreadcrumbItems.length>0,"bar-title-host--shell-bar":this.placement==="shell-bar"}},s("div",{key:"9a51aa93636881516b2017ca8525a584577f852f",class:{"bar-title":true,"bar-title--divider-hidden":!this.dividerVisible,"ds-chrome-header":i}},s("div",{key:"16d577111f6a5b8a54863f0abf64610a32887613",class:"bar-title__inner"},!i?this.renderBreadcrumb():null,s("div",{key:"4b96b84791b8562f6ae9819b2d590d5f61a7e110",class:"bar-title__row"},s("div",{key:"758d66d9f6dda61e7b7556ad909e8d57374151ca",class:"bar-title__leading"},s("div",{key:"9797b1aaf5b0dae2c6e728d2f8116e91f548f1d1",class:"bar-title__title-row","data-shell-page-header-anchor":true},s("div",{key:"19e4f88b89ce7bc7cf71e67bedf456f1ffe624b3",class:"bar-title__identity"},i?this.renderBack():null,s("ds-text",{key:"91a17420169c17b66269bacfc78df804a53814f2",class:"bar-title__heading ds-control--md",variant:i?"text-title-small":"text-title-medium",emphasis:true,color:"primary",as:"h1",lineTruncation:1},this.heading)),this.renderSectionSelector()),this.description&&!i?s("ds-text",{class:"bar-title__description",variant:"text-body-small",color:"secondary",lineTruncation:2,wrap:"wrap",as:"p"},this.description):null),this.renderActions()))),this.hasSectionSelector?s("ds-menu",{id:this.sectionMenuId,class:"bar-title__section-menu",anchorId:this.sectionMenuTriggerId,sideOffset:this.menuSideOffset,menuLabel:this.sectionsAriaLabel,open:this.sectionMenuOpen,initialFocusVisible:this.sectionMenuInitialFocusVisible,sections:this.sectionMenuSections,onDsClose:this.closeSectionMenu,onDsAfterClose:()=>{if(!this.sectionMenuOpen)this.sectionSurfaceOpen=false},onDsSelect:this.handleSectionSelect}):null,this.renderActionMenus(),y({classPrefix:"bar-title",showOverflowTrigger:this.showActionMenuTrigger,actionMenuId:this.actionMenuId,actionMenuTriggerId:this.actionMenuTriggerId,sideOffset:this.menuSideOffset,actionsAriaLabel:this.actionsAriaLabel,open:this.openActionMenuId==="__overflow",actionMenuInitialFocusVisible:this.actionMenuInitialFocusVisible,actionMenuSections:this.actionMenuSections,closeActionMenu:this.closeActionMenu,finishActionMenuClose:this.finishActionMenuClose,handleActionSelect:this.handleActionSelect}))}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}],actionItems:[{handleActionsChange:0}]}}static get style(){return O()}},[2,"ds-bar-title",{heading:[1],description:[1],showBack:[4,"show-back"],backAriaLabel:[1,"back-aria-label"],backLabel:[1,"back-label"],breadcrumbs:[16],breadcrumbAriaLabel:[1,"breadcrumb-aria-label"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],primaryAction:[16],actions:[16],actionItems:[16],actionsAriaLabel:[1,"actions-aria-label"],variant:[1],placement:[513],showDivider:[4,"show-divider"],showCompactDivider:[4,"show-compact-divider"],sectionMenuOpen:[32],openActionMenuId:[32],surfaceActionMenuId:[32],sectionSurfaceOpen:[32],sectionMenuInitialFocusVisible:[32],actionMenuInitialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}],actionItems:[{handleActionsChange:0}]}]);function H(){if(typeof customElements==="undefined"){return}const i=["ds-bar-title","ds-badge","ds-breadcrumb","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text","ds-tooltip"];i.forEach((i=>{switch(i){case"ds-bar-title":if(!customElements.get(n(i))){customElements.define(n(i),P)}break;case"ds-badge":if(!customElements.get(n(i))){A()}break;case"ds-breadcrumb":if(!customElements.get(n(i))){I()}break;case"ds-button-filled":if(!customElements.get(n(i))){z()}break;case"ds-button-unfilled":if(!customElements.get(n(i))){M()}break;case"ds-icon":if(!customElements.get(n(i))){T()}break;case"ds-loader":if(!customElements.get(n(i))){C()}break;case"ds-menu":if(!customElements.get(n(i))){S()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){B()}break;case"ds-switch":if(!customElements.get(n(i))){E()}break;case"ds-tag":if(!customElements.get(n(i))){j()}break;case"ds-text":if(!customElements.get(n(i))){L()}break;case"ds-tooltip":if(!customElements.get(n(i))){F()}break}}))}H();export{P as B,H as d};
|
|
2
|
+
//# sourceMappingURL=p-CEHhx4VQ.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as i,H as o,c as r,h as s,a as e,t as d}from"./index.js";import{d as n}from"./p-DcvPY30Q.js";import{d as t}from"./p-DMPn_dt7.js";import{D as a,s as c}from"./p-DOUk4KoT.js";import{s as l,r as v}from"./p-DGVZhrMd.js";import{C as h,a as f}from"./p-CuwopElg.js";const u=()=>`@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-radio-h,.sc-ds-radio:where(.ds-table),.sc-ds-radio:where(.tooltip-popup),.sc-ds-radio:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-radio,.ds-control--lg.sc-ds-radio-h,.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio,.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio,.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-radio-h,.ds-control--lg.sc-ds-radio{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-radio{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-control-icon-box.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-radio{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-radio{position:relative;padding-inline-end:calc( var(--ds-control-label-inset, var(--dimension-space-025)) + var(--ds-control-gap, var(--dimension-space-050)) )}.ds-control-label-dot__badge.sc-ds-radio{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-radio-h,.ds-focus-ring.sc-ds-radio,.ds-focus-ring-inset.sc-ds-radio-h,.ds-focus-ring-inset.sc-ds-radio{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-radio-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-radio-h,.ds-interaction-fill.sc-ds-radio{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-radio-h::after,.ds-interaction-fill--grouped.sc-ds-radio::after,.ds-interaction-fill--grouped.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-radio-h,.ds-interaction-fill--grouped.sc-ds-radio{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-radio-h,.ds-interaction-fill--on-chrome.sc-ds-radio{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-radio-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-radio:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-radio-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-radio:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.radio--labeled.sc-ds-radio-h{gap:var(--dimension-space-050)}.radio__options.sc-ds-radio{display:flex;flex-direction:column;gap:var(--dimension-space-050);min-width:0}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--horizontal.sc-ds-radio-h .radio__options.sc-ds-radio{flex-direction:row;gap:var(--dimension-space-100)}.radio--labeled.radio--horizontal.sc-ds-radio-h{flex-direction:column;gap:var(--dimension-space-050)}.radio--labeled.radio--horizontal.sc-ds-radio-h .radio__options.sc-ds-radio{flex-direction:row;gap:var(--dimension-space-100)}.radio--lg.sc-ds-radio-h{--_radio-circle-inset:calc(var(--dimension-space-100) + var(--dimension-space-025));--_radio-circle:var(--dimension-iconography-md);--_radio-dot:calc(var(--dimension-size-base) * 5 / 4);--_radio-stroke:var(--dimension-stroke-width-018)}.radio--md.sc-ds-radio-h{--_radio-circle-inset:var(--dimension-space-100);--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle-inset:var(--dimension-space-075);--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle-inset:var(--dimension-space-050);--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-settings-row-control-padding-inline, var(--ds-control-padding-inline));border-radius:var(--ds-control-radius);cursor:default;user-select:none}.radio__item--described.sc-ds-radio{align-items:flex-start;height:auto;min-height:var(--ds-control-height);padding-block:var(--dimension-space-075)}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2), box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}ds-text.radio__group-label.sc-ds-radio{padding-inline:var( --ds-settings-row-control-padding-inline, calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset)) )}.radio__copy.sc-ds-radio{display:grid;flex:1;gap:var(--dimension-space-025);min-width:0;padding:0 var(--ds-control-label-inset)}@media (forced-colors: active){.radio__circle.sc-ds-radio{border:var(--_radio-stroke) solid var(--ds-forced-color-content);box-shadow:none}.radio__circle--checked.sc-ds-radio{background-color:var(--ds-forced-color-selected);border-color:var(--ds-forced-color-selected)}.radio__dot.sc-ds-radio{background-color:var(--ds-forced-color-on-selected)}}`;let g=0;const p=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=r(this,"dsChange",7);this.internals=this.attachInternals();this.instanceId=++g;this.options=[];this.groupLabel="";this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage=a;this.direction="vertical";this.isInactive=false;this.isLoading=false;this.hasInteractionFill=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}get hasGroupLabel(){return Boolean(this.groupLabel.trim())}get hasSelection(){return this.options.some((i=>i.value===this.value&&!i.isInactive))}get showGroupLabel(){return this.hasGroupLabel&&!this.el.closest("ds-setting-row-radio")}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;l(this.internals,this.hasSelection?this.value:"",{inactive:i,state:this.value});const o=this.required&&!i&&!this.hasSelection;c(this.internals,o,this.requiredMessage)}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=v(i)}async setFocus(){this.activeItems.find((i=>i.tabIndex===0))?.focus()}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){if(this.isLoading)return;const o=this.activeItems;if(!o.length)return;const r=o.find((i=>i===document.activeElement));if(!r)return;const s=o.indexOf(r);let e=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();e=(s+1)%o.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();e=(s-1+o.length)%o.length;break;case"Home":i.preventDefault();e=0;break;case"End":i.preventDefault();e=o.length-1;break}if(e>=0){o[e].focus();const i=o[e].dataset["value"];if(i!==undefined&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isLoading||this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}renderOptions(i,o){return this.options.map(((r,e)=>{const d=i||!!r.isInactive;const n=r.value===this.value;const t=d?-1:e===o?0:-1;const a=`ds-radio-${this.instanceId}-label-${e}`;const c=`ds-radio-${this.instanceId}-description-${e}`;return s("div",{key:r.value,role:"radio","aria-checked":String(n),"aria-disabled":d?"true":undefined,"aria-labelledby":a,"aria-describedby":r.description?c:undefined,tabIndex:this.isLoading?-1:t,"aria-hidden":this.isLoading?"true":undefined,inert:this.isLoading,"data-radio-item":true,"data-value":r.value,"data-inactive":d||undefined,class:{radio__item:true,"radio__item--described":Boolean(r.description),[`ds-control--${this.size}`]:true,"ds-control-inactive":d,"ds-focus-ring-inset":!d,"ds-interaction-fill":!d&&this.hasInteractionFill},onClick:()=>!d&&this.selectItem(r.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!d){i.preventDefault();this.selectItem(r.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("ds-skeleton",{preserveLayout:true,isLoading:this.isLoading,variant:"control",rounded:true},s("span",{class:{radio__circle:true,"radio__circle--checked":n}},n&&s("span",{class:"radio__dot"})))),s("span",{class:"radio__copy ds-interaction-fill__content"},s("ds-skeleton",{preserveLayout:true,isLoading:this.isLoading,textVariant:h[this.size]},s("ds-text",{class:"radio__label",as:"span",variant:h[this.size],textId:a},r.label)),r.description?s("ds-skeleton",{preserveLayout:true,isLoading:this.isLoading,textVariant:f[this.size]},s("ds-text",{as:"span",variant:f[this.size],color:"secondary",textId:c},r.description)):null))}))}render(){const i=this.isInactive||this.disabled||this.formDisabled;const o=this.required&&!i&&!this.hasSelection;const r=this.options.findIndex((i=>i.value===this.value));const d=this.options.findIndex((o=>!i&&!o.isInactive));const n=r>=0&&!i&&!this.options[r]?.isInactive?r:d;const t=this.renderOptions(i,n);return s(e,{key:"d52c2dd28717e4954e3075677dd1167f896479fe",role:"radiogroup","aria-busy":this.isLoading?"true":undefined,"aria-label":this.showGroupLabel?this.groupLabel:this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":o?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true,"radio--labeled":this.showGroupLabel}},this.showGroupLabel?s("ds-skeleton",{preserveLayout:true,isLoading:this.isLoading,textVariant:"text-body-small"},s("ds-text",{key:"radio-group-label",class:`radio__group-label ds-control-section-heading ds-control--${this.size}`,as:"span",variant:"text-body-small",emphasis:true},this.groupLabel)):null,s("div",{key:"radio-options",class:"radio__options"},t))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],options:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],requiredMessage:[{syncFormValue:0}]}}static get style(){return u()}},[66,"ds-radio",{options:[16],groupLabel:[1,"group-label"],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],hasInteractionFill:[4,"has-interaction-fill"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32],setFocus:[64]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],options:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],requiredMessage:[{syncFormValue:0}]}]);function m(){if(typeof customElements==="undefined"){return}const i=["ds-radio","ds-skeleton","ds-text"];i.forEach((i=>{switch(i){case"ds-radio":if(!customElements.get(d(i))){customElements.define(d(i),p)}break;case"ds-skeleton":if(!customElements.get(d(i))){n()}break;case"ds-text":if(!customElements.get(d(i))){t()}break}}))}m();export{p as R,m as d};
|
|
2
|
+
//# sourceMappingURL=p-CGtq7TnC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["radioCss","radioIdCounter","Radio","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","instanceId","options","groupLabel","value","size","disabled","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","direction","isInactive","isLoading","hasInteractionFill","ariaLabel","initialValue","formDisabled","hasGroupLabel","Boolean","trim","hasSelection","some","option","showGroupLabel","el","closest","componentWillLoad","syncFormValue","inactive","setFormControlValue","internals","state","missing","setRequiredValidity","formDisabledCallback","formResetCallback","formStateRestoreCallback","restoreStringFormState","setFocus","activeItems","find","item","tabIndex","focus","Array","from","querySelectorAll","handleKeyDown","e","items","length","focused","document","activeElement","idx","indexOf","next","key","preventDefault","nextValue","dataset","undefined","dsChange","emit","selectItem","optValue","renderOptions","focusableIdx","map","index","isItemInactive","isChecked","tabIdx","labelId","descriptionId","h","role","String","description","inert","class","radio__item","onClick","onKeyDown","preserveLayout","variant","rounded","radio__circle","textVariant","CONTROL_TEXT_VARIANT","as","textId","label","CONTROL_SUPPORTING_TEXT_VARIANT","color","render","invalid","selectedIdx","findIndex","firstActiveIdx","renderedOptions","Host","ariaLabelledby","radio","emphasis"],"sources":["src/wc/components/Radio/Radio.css?tag=ds-radio&encapsulation=scoped","src/wc/components/Radio/Radio.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n}\n\n:host(.radio--labeled) {\n gap: var(--dimension-space-050);\n}\n\n.radio__options {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n min-width: 0;\n}\n\n:host(.radio--horizontal) {\n flex-direction: row;\n gap: var(--dimension-space-100);\n}\n\n:host(.radio--horizontal) .radio__options {\n flex-direction: row;\n gap: var(--dimension-space-100);\n}\n\n:host(.radio--labeled.radio--horizontal) {\n flex-direction: column;\n gap: var(--dimension-space-050);\n}\n\n:host(.radio--labeled.radio--horizontal) .radio__options {\n flex-direction: row;\n gap: var(--dimension-space-100);\n}\n\n:host(.radio--lg) {\n --_radio-circle-inset: calc(var(--dimension-space-100) + var(--dimension-space-025));\n --_radio-circle: var(--dimension-iconography-md);\n --_radio-dot: calc(var(--dimension-size-base) * 5 / 4);\n --_radio-stroke: var(--dimension-stroke-width-018);\n}\n\n:host(.radio--md) {\n --_radio-circle-inset: var(--dimension-space-100);\n --_radio-circle: var(--dimension-iconography-sm);\n --_radio-dot: var(--dimension-size-100);\n --_radio-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.radio--sm) {\n --_radio-circle-inset: var(--dimension-space-075);\n --_radio-circle: var(--dimension-iconography-xs);\n --_radio-dot: var(--dimension-size-075);\n --_radio-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.radio--xs) {\n --_radio-circle-inset: var(--dimension-space-050);\n --_radio-circle: var(--dimension-size-100);\n --_radio-dot: var(--dimension-size-050);\n --_radio-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.radio__item {\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n gap: var(--ds-control-gap);\n height: var(--ds-control-height);\n padding: 0 var(--ds-settings-row-control-padding-inline, var(--ds-control-padding-inline));\n border-radius: var(--ds-control-radius);\n cursor: default;\n user-select: none;\n}\n\n.radio__item--described {\n align-items: flex-start;\n height: auto;\n min-height: var(--ds-control-height);\n padding-block: var(--dimension-space-075);\n}\n\n.radio__placement {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--ds-control-icon);\n height: var(--ds-control-icon);\n}\n\n.radio__circle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--_radio-circle);\n height: var(--_radio-circle);\n border: 0;\n border-radius: var(--dimension-radius-half);\n box-shadow: inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);\n transition:\n background-color var(--effect-motion-short-2),\n box-shadow var(--effect-motion-short-2);\n}\n\n.radio__circle--checked {\n background-color: var(--color-background-bold-brand);\n box-shadow: none;\n}\n\n.radio__dot {\n width: var(--_radio-dot);\n height: var(--_radio-dot);\n border-radius: var(--dimension-radius-half);\n background-color: var(--color-foreground-on-bold-background-primary);\n}\n\nds-text.radio__group-label {\n padding-inline: var(\n --ds-settings-row-control-padding-inline,\n calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset))\n );\n}\n\n.radio__copy {\n display: grid;\n flex: 1;\n gap: var(--dimension-space-025);\n min-width: 0;\n padding: 0 var(--ds-control-label-inset);\n}\n\n@media (forced-colors: active) {\n .radio__circle {\n border: var(--_radio-stroke) solid var(--ds-forced-color-content);\n box-shadow: none;\n }\n\n .radio__circle--checked {\n background-color: var(--ds-forced-color-selected);\n border-color: var(--ds-forced-color-selected);\n }\n\n .radio__dot {\n background-color: var(--ds-forced-color-on-selected);\n }\n}\n","import {\n AttachInternals,\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Element,\n Listen,\n Method,\n Watch,\n h,\n Host,\n} from '@stencil/core';\nimport {\n CONTROL_SUPPORTING_TEXT_VARIANT,\n CONTROL_TEXT_VARIANT,\n DEFAULT_REQUIRED_MESSAGE,\n restoreStringFormState,\n setFormControlValue,\n setRequiredValidity,\n} from '../../utils';\n\nexport interface RadioOption {\n label: string;\n value: string;\n description?: string;\n isInactive?: boolean;\n}\n\nexport type RadioSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet radioIdCounter = 0;\n\n@Component({\n tag: 'ds-radio',\n styleUrl: 'Radio.css',\n scoped: true,\n formAssociated: true,\n})\nexport class Radio {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private readonly instanceId = ++radioIdCounter;\n\n /** Visible choices in this one-of-many set. */\n @Prop() options: RadioOption[] = [];\n /** Optional visible group label rendered above the options. */\n @Prop() groupLabel: string = '';\n /** Selected option value. */\n @Prop({ mutable: true }) value: string = '';\n /** Visual and placement density for every option. */\n @Prop() size: RadioSize = 'md';\n /** Native form field name. */\n @Prop({ reflect: true }) name: string | undefined;\n /** Associates the radio set with a form by id when rendered outside that form. */\n @Prop({ reflect: true }) form: string | undefined;\n /** Native disabled state for the complete set. */\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Require one option to be selected for form validity. */\n @Prop({ reflect: true }) required: boolean = false;\n /** Validation message used when a required set has no selection. */\n @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n /** Layout direction for the option set. */\n @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n /** Design-system inactive state for the complete set. */\n @Prop() isInactive: boolean = false;\n /** Preserve each option while replacing its circle and copy with loading atoms. */\n @Prop() isLoading: boolean = false;\n /** Show full-row hover and pressed feedback for choice-list presentations. */\n @Prop() hasInteractionFill: boolean = false;\n /** Accessible name when visible group labeling is unavailable. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** Id reference for a visible group label. */\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n /** Emitted after user selection with the selected option value. */\n @Event() dsChange!: EventEmitter<string>;\n\n private initialValue = '';\n @State() private formDisabled = false;\n\n private get hasGroupLabel(): boolean {\n return Boolean(this.groupLabel.trim());\n }\n\n private get hasSelection(): boolean {\n return this.options.some(option => option.value === this.value && !option.isInactive);\n }\n\n /** Settings rows own a separate heading; never mount the form group label there. */\n private get showGroupLabel(): boolean {\n return this.hasGroupLabel && !this.el.closest('ds-setting-row-radio');\n }\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.syncFormValue();\n }\n\n @Watch('value')\n @Watch('options')\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('required')\n @Watch('requiredMessage')\n syncFormValue() {\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n setFormControlValue(this.internals, this.hasSelection ? this.value : '', {\n inactive,\n state: this.value,\n });\n const missing = this.required && !inactive && !this.hasSelection;\n setRequiredValidity(this.internals, missing, this.requiredMessage);\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.value = restoreStringFormState(state);\n }\n\n /** Focus the selected option, or the first active option when nothing is selected. */\n @Method()\n async setFocus() {\n this.activeItems.find(item => item.tabIndex === 0)?.focus();\n }\n\n private get activeItems(): HTMLElement[] {\n return Array.from(\n this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])')\n );\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (this.isLoading) return;\n const items = this.activeItems;\n if (!items.length) return;\n\n const focused = items.find(item => item === document.activeElement);\n if (!focused) return;\n\n const idx = items.indexOf(focused);\n let next = -1;\n\n switch (e.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n e.preventDefault();\n next = (idx + 1) % items.length;\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n e.preventDefault();\n next = (idx - 1 + items.length) % items.length;\n break;\n case 'Home':\n e.preventDefault();\n next = 0;\n break;\n case 'End':\n e.preventDefault();\n next = items.length - 1;\n break;\n }\n\n if (next >= 0) {\n items[next].focus();\n const nextValue = items[next].dataset['value'];\n if (nextValue !== undefined && nextValue !== this.value) {\n this.value = nextValue;\n this.dsChange.emit(nextValue);\n }\n }\n }\n\n private selectItem(optValue: string) {\n if (this.isLoading || this.isInactive || this.disabled || this.formDisabled) return;\n if (optValue !== this.value) {\n this.value = optValue;\n this.dsChange.emit(optValue);\n }\n }\n\n private renderOptions(inactive: boolean, focusableIdx: number) {\n return this.options.map((option, index) => {\n const isItemInactive = inactive || !!option.isInactive;\n const isChecked = option.value === this.value;\n const tabIdx = isItemInactive ? -1 : index === focusableIdx ? 0 : -1;\n const labelId = `ds-radio-${this.instanceId}-label-${index}`;\n const descriptionId = `ds-radio-${this.instanceId}-description-${index}`;\n\n return (\n <div\n key={option.value}\n role=\"radio\"\n aria-checked={String(isChecked)}\n aria-disabled={isItemInactive ? 'true' : undefined}\n aria-labelledby={labelId}\n aria-describedby={option.description ? descriptionId : undefined}\n tabIndex={this.isLoading ? -1 : tabIdx}\n aria-hidden={this.isLoading ? 'true' : undefined}\n inert={this.isLoading}\n data-radio-item\n data-value={option.value}\n data-inactive={isItemInactive || undefined}\n class={{\n radio__item: true,\n 'radio__item--described': Boolean(option.description),\n [`ds-control--${this.size}`]: true,\n 'ds-control-inactive': isItemInactive,\n 'ds-focus-ring-inset': !isItemInactive,\n 'ds-interaction-fill': !isItemInactive && this.hasInteractionFill,\n }}\n onClick={() => !isItemInactive && this.selectItem(option.value)}\n onKeyDown={(e: KeyboardEvent) => {\n if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n e.preventDefault();\n this.selectItem(option.value);\n }\n }}\n >\n <span class=\"radio__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n <ds-skeleton preserveLayout isLoading={this.isLoading} variant=\"control\" rounded>\n <span class={{ radio__circle: true, 'radio__circle--checked': isChecked }}>\n {isChecked && <span class=\"radio__dot\" />}\n </span>\n </ds-skeleton>\n </span>\n <span class=\"radio__copy ds-interaction-fill__content\">\n <ds-skeleton\n preserveLayout\n isLoading={this.isLoading}\n textVariant={CONTROL_TEXT_VARIANT[this.size]}\n >\n <ds-text\n class=\"radio__label\"\n as=\"span\"\n variant={CONTROL_TEXT_VARIANT[this.size]}\n textId={labelId}\n >\n {option.label}\n </ds-text>\n </ds-skeleton>\n {option.description ? (\n <ds-skeleton\n preserveLayout\n isLoading={this.isLoading}\n textVariant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n >\n <ds-text\n as=\"span\"\n variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n color=\"secondary\"\n textId={descriptionId}\n >\n {option.description}\n </ds-text>\n </ds-skeleton>\n ) : null}\n </span>\n </div>\n );\n });\n }\n\n render() {\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n const invalid = this.required && !inactive && !this.hasSelection;\n const selectedIdx = this.options.findIndex(option => option.value === this.value);\n const firstActiveIdx = this.options.findIndex(option => !inactive && !option.isInactive);\n const focusableIdx =\n selectedIdx >= 0 && !inactive && !this.options[selectedIdx]?.isInactive\n ? selectedIdx\n : firstActiveIdx;\n const renderedOptions = this.renderOptions(inactive, focusableIdx);\n\n return (\n <Host\n role=\"radiogroup\"\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-label={this.showGroupLabel ? this.groupLabel : this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-required={this.required ? 'true' : undefined}\n aria-invalid={invalid ? 'true' : undefined}\n class={{\n radio: true,\n 'radio--horizontal': this.direction === 'horizontal',\n [`radio--${this.size}`]: true,\n 'radio--labeled': this.showGroupLabel,\n }}\n >\n {this.showGroupLabel ? (\n <ds-skeleton preserveLayout isLoading={this.isLoading} textVariant={'text-body-small'}>\n <ds-text\n key=\"radio-group-label\"\n class={`radio__group-label ds-control-section-heading ds-control--${this.size}`}\n as=\"span\"\n variant=\"text-body-small\"\n emphasis\n >\n {this.groupLabel}\n </ds-text>\n </ds-skeleton>\n ) : null}\n <div key=\"radio-options\" class=\"radio__options\">\n {renderedOptions}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|