@ds-mo/ui 14.15.1 → 14.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +3 -3
- package/dist/agent.json +317 -24
- package/dist/angular/ds-button-unfilled.d.ts +1 -1
- package/dist/angular/ds-button-unfilled.js +3 -3
- package/dist/angular/ds-filter-menu.d.ts +1 -1
- package/dist/angular/ds-filter-menu.js +3 -3
- package/dist/angular/ds-select.d.ts +1 -1
- package/dist/angular/ds-select.js +3 -3
- package/dist/angular/ds-table-filter.d.ts +44 -0
- package/dist/angular/ds-table-filter.js +57 -0
- package/dist/angular/ds-table-sort.d.ts +16 -0
- package/dist/angular/ds-table-sort.js +43 -0
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +2 -0
- package/dist/angular/proxies.d.ts +2 -0
- package/dist/angular/proxies.js +2 -0
- 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-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-banner.js.map +1 -1
- package/dist/components/ds-bar-action.js +1 -1
- package/dist/components/ds-bar-action.js.map +1 -1
- package/dist/components/ds-bar-nav.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-bar-workflow.js.map +1 -1
- package/dist/components/ds-breadcrumb.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +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-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-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/ds-chart.js +1 -1
- package/dist/components/ds-chart.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-chip.js.map +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-item.js.map +1 -1
- package/dist/components/ds-conversation-list-section.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-filter-menu.js.map +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-loader.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-actions.js.map +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-composer.js.map +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message-scroller.js.map +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-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-sub-nav.js.map +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-tool-search.js.map +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.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-scroll-overlay.js.map +1 -1
- package/dist/components/ds-select.js +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-slider.js.map +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-filter.d.ts +11 -0
- package/dist/components/ds-table-filter.js +2 -0
- package/dist/components/ds-table-filter.js.map +1 -0
- package/dist/components/ds-table-saved-views.js +1 -1
- package/dist/components/ds-table-saved-views.js.map +1 -1
- package/dist/components/ds-table-sort.d.ts +11 -0
- package/dist/components/ds-table-sort.js +2 -0
- package/dist/components/ds-table-sort.js.map +1 -0
- package/dist/components/ds-table-toolbar.js +1 -1
- package/dist/components/ds-table-toolbar.js.map +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-toast.js +1 -1
- package/dist/components/ds-toast.js.map +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/index.js +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/p-23u3lIr1.js +2 -0
- package/dist/components/{p-DLkNcCY0.js.map → p-23u3lIr1.js.map} +1 -1
- package/dist/components/{p-C1q-tq3U.js → p-7tZx4ukz.js} +2 -2
- package/dist/components/{p-DfyfrfHL.js → p-Asi9h3pa.js} +2 -2
- package/dist/components/{p-DfyfrfHL.js.map → p-Asi9h3pa.js.map} +1 -1
- package/dist/components/{p-C5TrNd31.js → p-B0PEg5RF.js} +2 -2
- package/dist/components/{p-C5TrNd31.js.map → p-B0PEg5RF.js.map} +1 -1
- package/dist/components/p-BFSLT0yc.js +2 -0
- package/dist/components/p-BFSLT0yc.js.map +1 -0
- package/dist/components/{p-DZFilC--.js → p-BGXqFq2C.js} +2 -2
- package/dist/components/{p-Rfpd5mWO.js → p-BHDkJmrC.js} +2 -2
- package/dist/components/{p-Rfpd5mWO.js.map → p-BHDkJmrC.js.map} +1 -1
- package/dist/components/{p-Cyw9odJX.js → p-BHz78C8h.js} +2 -2
- package/dist/components/{p-Cyw9odJX.js.map → p-BHz78C8h.js.map} +1 -1
- package/dist/components/{p-Dcnd5ZX5.js → p-BKp__CQX.js} +2 -2
- package/dist/components/{p-V2ywPfsR.js → p-BVlfQ8xZ.js} +2 -2
- package/dist/components/{p-V2ywPfsR.js.map → p-BVlfQ8xZ.js.map} +1 -1
- package/dist/components/p-BdnQv7Zl.js +2 -0
- package/dist/components/p-BdnQv7Zl.js.map +1 -0
- package/dist/components/{p-Dsn1RCS5.js → p-Be1sY58w.js} +2 -2
- package/dist/components/{p-Dsn1RCS5.js.map → p-Be1sY58w.js.map} +1 -1
- package/dist/components/p-Bh67XbfB.js +2 -0
- package/dist/components/{p-BzLnSwG9.js.map → p-Bh67XbfB.js.map} +1 -1
- package/dist/components/{p-Btxwp4lJ.js → p-BhYWdbEp.js} +2 -2
- package/dist/components/{p-Btxwp4lJ.js.map → p-BhYWdbEp.js.map} +1 -1
- package/dist/components/{p-D1Nqlrrl.js → p-Bn8NryHK.js} +2 -2
- package/dist/components/{p-D1Nqlrrl.js.map → p-Bn8NryHK.js.map} +1 -1
- package/dist/components/{p-B80NfEqc.js → p-C0X2zKbB.js} +2 -2
- package/dist/components/{p-Ct-m0I6U.js → p-C4TgWJi9.js} +2 -2
- package/dist/components/p-CKmfuK7k.js +2 -0
- package/dist/components/p-CKmfuK7k.js.map +1 -0
- package/dist/components/{p-DTMxwYQj.js → p-CMFvaY05.js} +2 -2
- package/dist/components/{p-PzI11fs8.js → p-CzcWZiH-.js} +2 -2
- package/dist/components/{p-PzI11fs8.js.map → p-CzcWZiH-.js.map} +1 -1
- package/dist/components/{p-BagXfn1G.js → p-D1YhYulL.js} +2 -2
- package/dist/components/{p-BzObtSlo.js → p-D2z2DgtX.js} +2 -2
- package/dist/components/{p-BzObtSlo.js.map → p-D2z2DgtX.js.map} +1 -1
- package/dist/components/{p-BXPQmp7q.js → p-D4K9CE8a.js} +2 -2
- package/dist/components/{p-DcPVSNDr.js → p-D8Qd6gkf.js} +2 -2
- package/dist/components/{p-DcPVSNDr.js.map → p-D8Qd6gkf.js.map} +1 -1
- package/dist/components/{p-BHjw0x3L.js → p-DAqSoyd4.js} +2 -2
- package/dist/components/{p-BHjw0x3L.js.map → p-DAqSoyd4.js.map} +1 -1
- package/dist/components/p-DEjh3klB.js +2 -0
- package/dist/components/{p-CKJzHclc.js.map → p-DEjh3klB.js.map} +1 -1
- package/dist/components/{p-NdahPypA.js → p-DFQ9mcbK.js} +2 -2
- package/dist/components/{p-Ck_VRQYi.js → p-DHuyj-9J.js} +2 -2
- package/dist/components/{p-Ck_VRQYi.js.map → p-DHuyj-9J.js.map} +1 -1
- package/dist/components/p-DIEK54fV.js +2 -0
- package/dist/components/{p-URdgCwEs.js.map → p-DIEK54fV.js.map} +1 -1
- package/dist/components/{p-Bf_D3crn.js → p-DNJTN_s0.js} +2 -2
- package/dist/components/p-DOqnJVos.js +2 -0
- package/dist/components/{p-CWDmHPJC.js.map → p-DOqnJVos.js.map} +1 -1
- package/dist/components/{p-DL_5VENG.js → p-DQqOzDEq.js} +2 -2
- package/dist/components/{p-D-kWb8cF.js → p-DSIOINBK.js} +2 -2
- package/dist/components/{p-C5eosu67.js → p-DZ55e3j9.js} +2 -2
- package/dist/components/{p-C5eosu67.js.map → p-DZ55e3j9.js.map} +1 -1
- package/dist/components/{p-QdI17bl-.js → p-Dg9qiMDa.js} +2 -2
- package/dist/components/p-DsJW5W3W.js +2 -0
- package/dist/components/{p-C2n8A8NA.js.map → p-DsJW5W3W.js.map} +1 -1
- package/dist/components/p-JPTkZ3Ji.js +2 -0
- package/dist/components/p-JPTkZ3Ji.js.map +1 -0
- package/dist/components/p-NzGRAPcF.js +2 -0
- package/dist/components/p-NzGRAPcF.js.map +1 -0
- package/dist/components/{p-B7Hf86NF.js → p-PD1Vfg0t.js} +2 -2
- package/dist/components/{p-B7Hf86NF.js.map → p-PD1Vfg0t.js.map} +1 -1
- package/dist/components/{p-BxqBiVbH.js → p-U8JIZzI2.js} +2 -2
- package/dist/components/{p-BxqBiVbH.js.map → p-U8JIZzI2.js.map} +1 -1
- package/dist/components/{p-CKY989vF.js → p-ZZzC52Ea.js} +2 -2
- package/dist/components/{p-CKY989vF.js.map → p-ZZzC52Ea.js.map} +1 -1
- package/dist/components/p-__lNIImO.js +2 -0
- package/dist/components/{p-CnWC0QvG.js.map → p-__lNIImO.js.map} +1 -1
- package/dist/components/{p-vWK5faWZ.js → p-a6qP60zb.js} +2 -2
- package/dist/components/{p-CjgnFGd6.js → p-rrFMAZkj.js} +2 -2
- package/dist/components/{p-CjgnFGd6.js.map → p-rrFMAZkj.js.map} +1 -1
- package/dist/components/p-ruPTIV6t.js +2 -0
- package/dist/components/{p-M9DPfXbP.js.map → p-ruPTIV6t.js.map} +1 -1
- package/dist/components/{p-jMCRaxQW.js → p-y4jhIkRc.js} +2 -2
- package/dist/components/{p-jMCRaxQW.js.map → p-y4jhIkRc.js.map} +1 -1
- package/dist/docs/components.json +813 -76
- package/dist/mcp-data/registry/button-unfilled.json +26 -7
- package/dist/mcp-data/registry/filter-menu.json +21 -2
- package/dist/mcp-data/registry/loader.json +2 -1
- package/dist/mcp-data/registry/registry.json +322 -23
- package/dist/mcp-data/registry/select.json +22 -3
- package/dist/mcp-data/registry/table-filter.json +399 -0
- package/dist/mcp-data/registry/table-saved-views.json +4 -4
- package/dist/mcp-data/registry/table-sort.json +229 -0
- package/dist/mcp-data/registry/table-toolbar.json +21 -14
- package/dist/mcp-data/registry/table.json +11 -8
- package/dist/react/components.d.ts +2 -0
- package/dist/react/components.js +2 -0
- package/dist/react/ds-table-filter.d.ts +17 -0
- package/dist/react/ds-table-filter.js +19 -0
- package/dist/react/ds-table-sort.d.ts +12 -0
- package/dist/react/ds-table-sort.js +12 -0
- package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +18 -1
- package/dist/types/components/FilterMenu/FilterMenu.d.ts +13 -0
- package/dist/types/components/Select/Select.d.ts +13 -0
- package/dist/types/components/Table/Table.d.ts +4 -0
- package/dist/types/components/Table/table-column-customizer.d.ts +2 -0
- package/dist/types/components/TableFilter/TableFilter.d.ts +37 -0
- package/dist/types/components/TableSort/TableSort.d.ts +24 -0
- package/dist/types/components/TableSort/table-sort-menu.d.ts +15 -0
- package/dist/types/components.d.ts +254 -2
- package/dist/types/utils/table-caption-compact.d.ts +6 -0
- package/dist/vue/components.d.ts +2 -0
- package/dist/vue/components.js +2 -0
- package/dist/vue/ds-button-unfilled.js +1 -0
- package/dist/vue/ds-filter-menu.js +1 -0
- package/dist/vue/ds-select.js +1 -0
- package/dist/vue/ds-table-filter.d.ts +3 -0
- package/dist/vue/ds-table-filter.js +29 -0
- package/dist/vue/ds-table-sort.d.ts +3 -0
- package/dist/vue/ds-table-sort.js +13 -0
- package/package.json +1 -1
- package/dist/components/p-BzLnSwG9.js +0 -2
- package/dist/components/p-C2n8A8NA.js +0 -2
- package/dist/components/p-C7rzVotG.js +0 -2
- package/dist/components/p-C7rzVotG.js.map +0 -1
- package/dist/components/p-CKJzHclc.js +0 -2
- package/dist/components/p-CWDmHPJC.js +0 -2
- package/dist/components/p-Ca-I2UnB.js +0 -2
- package/dist/components/p-Ca-I2UnB.js.map +0 -1
- package/dist/components/p-CnWC0QvG.js +0 -2
- package/dist/components/p-CooNucm0.js +0 -2
- package/dist/components/p-CooNucm0.js.map +0 -1
- package/dist/components/p-DLkNcCY0.js +0 -2
- package/dist/components/p-M9DPfXbP.js +0 -2
- package/dist/components/p-URdgCwEs.js +0 -2
- /package/dist/components/{p-C1q-tq3U.js.map → p-7tZx4ukz.js.map} +0 -0
- /package/dist/components/{p-DZFilC--.js.map → p-BGXqFq2C.js.map} +0 -0
- /package/dist/components/{p-Dcnd5ZX5.js.map → p-BKp__CQX.js.map} +0 -0
- /package/dist/components/{p-B80NfEqc.js.map → p-C0X2zKbB.js.map} +0 -0
- /package/dist/components/{p-Ct-m0I6U.js.map → p-C4TgWJi9.js.map} +0 -0
- /package/dist/components/{p-DTMxwYQj.js.map → p-CMFvaY05.js.map} +0 -0
- /package/dist/components/{p-BagXfn1G.js.map → p-D1YhYulL.js.map} +0 -0
- /package/dist/components/{p-BXPQmp7q.js.map → p-D4K9CE8a.js.map} +0 -0
- /package/dist/components/{p-NdahPypA.js.map → p-DFQ9mcbK.js.map} +0 -0
- /package/dist/components/{p-Bf_D3crn.js.map → p-DNJTN_s0.js.map} +0 -0
- /package/dist/components/{p-DL_5VENG.js.map → p-DQqOzDEq.js.map} +0 -0
- /package/dist/components/{p-D-kWb8cF.js.map → p-DSIOINBK.js.map} +0 -0
- /package/dist/components/{p-QdI17bl-.js.map → p-Dg9qiMDa.js.map} +0 -0
- /package/dist/components/{p-vWK5faWZ.js.map → p-a6qP60zb.js.map} +0 -0
|
@@ -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{d as o}from"./p-vWK5faWZ.js";import{d as a}from"./p-PzI11fs8.js";import{d}from"./p-BxqBiVbH.js";import{d as c}from"./p-C7rzVotG.js";import{d as l}from"./p-BFfLvMZd.js";import{d as h}from"./p-Ca-I2UnB.js";import{d as b}from"./p-DfyfrfHL.js";import{d as u}from"./p-Rfpd5mWO.js";import{d as v}from"./p-Btxwp4lJ.js";import{d as f}from"./p-jMCRaxQW.js";import{d as m}from"./p-DZFilC--.js";import{d as p}from"./p-BXPQmp7q.js";function g(i){return"type"in i&&i.type==="divider"}const _=()=>`.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(--dimension-radius-025)}.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(--dimension-radius-025)}.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-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)}@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--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))}[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-400)) 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-400);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-100);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-trigger--expanded.sc-ds-bar-title{color:var(--color-foreground-primary);--ds-interaction-hover:var(--ds-interaction-pressed)}.bar-title__section-trigger--expanded.sc-ds-bar-title::after{background:var(--ds-interaction-pressed)}.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 x=0;const w=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.dsBack=e(this,"dsBack");this.dsBreadcrumbSelect=e(this,"dsBreadcrumbSelect");this.dsSectionChange=e(this,"dsSectionChange");this.dsAction=e(this,"dsAction");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.showDivider=true;this.sectionMenuOpen=false;this.actionMenuOpen=false;this.sectionMenuInitialFocusVisible=false;this.actionMenuInitialFocusVisible=false;this.instanceId=x++;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.toggleSectionMenu=i=>{this.sectionMenuInitialFocusVisible=i.detail===0;this.actionMenuOpen=false;this.sectionMenuOpen=!this.sectionMenuOpen};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=>{this.actionMenuInitialFocusVisible=i.detail===0;this.sectionMenuOpen=false;this.actionMenuOpen=!this.actionMenuOpen};this.closeActionMenu=()=>{this.actionMenuOpen=false};this.handleActionSelect=i=>{const t=String(i.detail?.value??"");const e=this.primaryCollapsed&&this.primaryAction?.id===t;const s=this.selectableActions.find((i=>i.id===t));if(!e&&!s)return;if(e&&(this.primaryAction?.isInactive||this.primaryAction?.isLoading)||s?.isInactive){return}this.closeActionMenu();this.dsAction.emit(t);requestAnimationFrame((()=>void this.actionTriggerEl?.setFocus?.()))};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","")}}handleSectionsChange(){if(!this.hasSectionSelector)this.closeSectionMenu()}handleActionsChange(){if(!this.showActionMenuTrigger)this.closeActionMenu()}get compact(){return this.variant!=="expanded"}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 backTooltipLabel(){return"Go back"}get primaryCollapsed(){return this.variant==="constrained"&&this.primaryAction!==null&&(this.primaryAction.collapse??"auto")==="auto"}get selectableSections(){return this.sections.filter((i=>!g(i)))}get hasSectionSelector(){return this.selectableSections.length>1}get effectiveValue(){return this.selectableSections.some((i=>i.id===this.value))?this.value:this.selectableSections[0]?.id??""}get selectedSectionLabel(){return this.selectableSections.find((i=>i.id===this.effectiveValue))?.label??""}get sectionTriggerAriaLabel(){return`${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`}groupsFromItems(i,t){const e=[];let s=[];const r=()=>{if(s.length>0)e.push({items:s});s=[]};for(const e of i){if(g(e)){r()}else{s.push(t(e))}}r();return e}get sectionMenuSections(){return this.groupsFromItems(this.sections,(i=>({label:i.label,value:i.id,isSelected:i.id===this.effectiveValue,isInactive:i.isInactive})))}get selectableActions(){return this.actions.filter((i=>!g(i)))}get showActionMenuTrigger(){return this.selectableActions.length>0||this.primaryCollapsed&&this.primaryAction!==null}actionMenuItem(i){const t=i;return{label:i.label,value:i.id,isInactive:i.isInactive||t.isLoading,isDestructive:i.isDestructive||t.intent==="negative"}}get actionMenuSections(){const i=this.groupsFromItems(this.actions,(i=>this.actionMenuItem(i)));if(!this.primaryCollapsed||!this.primaryAction)return i;return[{items:[this.actionMenuItem(this.primaryAction)]},...i]}renderSectionSelector(){if(!this.hasSectionSelector)return null;return[s("div",{class:"bar-title__divider","aria-hidden":"true"}),s("div",{class:"bar-title__section-selector"},s("button",{ref:i=>{this.sectionTriggerEl=i??null},id:this.sectionMenuTriggerId,class:{"bar-title__section-trigger":true,"bar-title__section-trigger--expanded":this.sectionMenuOpen,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.sectionMenuId,"aria-expanded":String(this.sectionMenuOpen),"aria-label":this.sectionTriggerAriaLabel,onClick:this.toggleSectionMenu},s("ds-text",{class:"bar-title__section-label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",lineTruncation:1},this.selectedSectionLabel),s("ds-icon",{class:"bar-title__section-chevron ds-interaction-fill__content",name:"ChevronUpDown",size:"md",color:"inherit","aria-hidden":"true"})))]}renderActions(){const i=this.primaryAction;if(!i&&!this.showActionMenuTrigger)return null;return s("div",{class:"bar-title__actions"},i&&!this.primaryCollapsed?s("ds-button-filled",{class:"bar-title__primary-action",variant:i.icon?"icon-label":"label",icon:i.icon??"",label:i.label,intent:i.intent??"brand",contrast:i.contrast??"bold",size:"md",type:i.type??"button",isInactive:i.isInactive,isLoading:i.isLoading,onDsClick:()=>this.dsAction.emit(i.id)}):null,this.showActionMenuTrigger?s("ds-tooltip",{label:"Page options",side:"bottom",size:"sm"},s("ds-button-unfilled",{ref:i=>{this.actionTriggerEl=i??null},id:this.actionMenuTriggerId,class:"bar-title__more-actions",variant:"icon",icon:"Ellipses","aria-label":this.actionsAriaLabel,size:"md",activeFill:!this.compact,hasBorder:i!==null&&!this.primaryCollapsed,haspopup:"menu",controls:this.actionMenuId,expanded:this.actionMenuOpen,onDsClick:i=>this.toggleActionMenu(i.detail)})):null)}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(){if(!this.showBack)return null;return s("ds-tooltip",{label:this.backTooltipLabel,side:"bottom",size:"sm"},s("ds-button-unfilled",{class:"bar-title__back",variant:"icon",icon:"ChevronLeft","aria-label":this.backAriaLabel,size:"md",activeFill:false,hasBorder:false,onDsClick:i=>this.dsBack.emit(i.detail)}))}render(){const i=this.compact;return s(r,{key:"5d28cbbcdc035781a166dddb00035d87e3aabcd9",class:{"bar-title-host--compact":i,"bar-title-host--expanded":this.variant==="expanded","bar-title-host--constrained":this.variant==="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}},s("div",{key:"b2336ad4bfdaec80002a9ff6945c45227f211b5e",class:{"bar-title":true,"bar-title--divider-hidden":!this.dividerVisible,"ds-chrome-header":i}},s("div",{key:"95e8106aa5ee41153372776595e7009f917e5e54",class:"bar-title__inner"},!i?this.renderBreadcrumb():null,s("div",{key:"59246271233e0c88f7c9ae4e5625f80011d1065f",class:"bar-title__row"},s("div",{key:"737a3ec6438cb1d6de5a37ae5b9eb77dcbd56f1a",class:"bar-title__leading"},s("div",{key:"bea152fb099212101c3e902b478f09c4952b392a",class:"bar-title__title-row","data-shell-page-header-anchor":true},s("div",{key:"10dc89189eacd1b5734a5765ab1166c28a89596e",class:"bar-title__identity"},i?this.renderBack():null,s("ds-text",{key:"7291b316bd6df4a2c60f14af2b89ecc02264573b",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,menuLabel:this.sectionsAriaLabel,open:this.sectionMenuOpen,initialFocusVisible:this.sectionMenuInitialFocusVisible,sections:this.sectionMenuSections,onDsClose:this.closeSectionMenu,onDsSelect:this.handleSectionSelect}):null,this.showActionMenuTrigger?s("ds-menu",{id:this.actionMenuId,class:"bar-title__action-menu",anchorId:this.actionMenuTriggerId,align:"end",menuLabel:this.actionsAriaLabel,open:this.actionMenuOpen,initialFocusVisible:this.actionMenuInitialFocusVisible,sections:this.actionMenuSections,onDsClose:this.closeActionMenu,onDsSelect:this.handleActionSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}}static get style(){return _()}},[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],actionsAriaLabel:[1,"actions-aria-label"],variant:[1],showDivider:[4,"show-divider"],showCompactDivider:[4,"show-compact-divider"],sectionMenuOpen:[32],actionMenuOpen:[32],sectionMenuInitialFocusVisible:[32],actionMenuInitialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}]);function k(){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),w)}break;case"ds-badge":if(!customElements.get(n(i))){o()}break;case"ds-breadcrumb":if(!customElements.get(n(i))){a()}break;case"ds-button-filled":if(!customElements.get(n(i))){d()}break;case"ds-button-unfilled":if(!customElements.get(n(i))){c()}break;case"ds-icon":if(!customElements.get(n(i))){l()}break;case"ds-loader":if(!customElements.get(n(i))){h()}break;case"ds-menu":if(!customElements.get(n(i))){b()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){u()}break;case"ds-switch":if(!customElements.get(n(i))){v()}break;case"ds-tag":if(!customElements.get(n(i))){f()}break;case"ds-text":if(!customElements.get(n(i))){m()}break;case"ds-tooltip":if(!customElements.get(n(i))){p()}break}}))}k();export{w as B,k 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{d as o}from"./p-a6qP60zb.js";import{d as a}from"./p-CzcWZiH-.js";import{d}from"./p-U8JIZzI2.js";import{d as c}from"./p-NzGRAPcF.js";import{d as l}from"./p-BFfLvMZd.js";import{d as h}from"./p-JPTkZ3Ji.js";import{d as b}from"./p-Asi9h3pa.js";import{d as f}from"./p-BHDkJmrC.js";import{d as u}from"./p-BhYWdbEp.js";import{d as v}from"./p-y4jhIkRc.js";import{d as m}from"./p-BGXqFq2C.js";import{d as p}from"./p-D4K9CE8a.js";function g(i){return"type"in i&&i.type==="divider"}const _=()=>`.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(--dimension-radius-025)}.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(--dimension-radius-025)}.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-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)}@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--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))}[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-400)) 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-400);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-100);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-trigger--expanded.sc-ds-bar-title{color:var(--color-foreground-primary);--ds-interaction-hover:var(--ds-interaction-pressed)}.bar-title__section-trigger--expanded.sc-ds-bar-title::after{background:var(--ds-interaction-pressed)}.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 x=0;const w=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.showDivider=true;this.sectionMenuOpen=false;this.actionMenuOpen=false;this.sectionMenuInitialFocusVisible=false;this.actionMenuInitialFocusVisible=false;this.instanceId=x++;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.toggleSectionMenu=i=>{this.sectionMenuInitialFocusVisible=i.detail===0;this.actionMenuOpen=false;this.sectionMenuOpen=!this.sectionMenuOpen};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=>{this.actionMenuInitialFocusVisible=i.detail===0;this.sectionMenuOpen=false;this.actionMenuOpen=!this.actionMenuOpen};this.closeActionMenu=()=>{this.actionMenuOpen=false};this.handleActionSelect=i=>{const t=String(i.detail?.value??"");const e=this.primaryCollapsed&&this.primaryAction?.id===t;const s=this.selectableActions.find((i=>i.id===t));if(!e&&!s)return;if(e&&(this.primaryAction?.isInactive||this.primaryAction?.isLoading)||s?.isInactive){return}this.closeActionMenu();this.dsAction.emit(t);requestAnimationFrame((()=>void this.actionTriggerEl?.setFocus?.()))};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","")}}handleSectionsChange(){if(!this.hasSectionSelector)this.closeSectionMenu()}handleActionsChange(){if(!this.showActionMenuTrigger)this.closeActionMenu()}get compact(){return this.variant!=="expanded"}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 backTooltipLabel(){return"Go back"}get primaryCollapsed(){return this.variant==="constrained"&&this.primaryAction!==null&&(this.primaryAction.collapse??"auto")==="auto"}get selectableSections(){return this.sections.filter((i=>!g(i)))}get hasSectionSelector(){return this.selectableSections.length>1}get effectiveValue(){return this.selectableSections.some((i=>i.id===this.value))?this.value:this.selectableSections[0]?.id??""}get selectedSectionLabel(){return this.selectableSections.find((i=>i.id===this.effectiveValue))?.label??""}get sectionTriggerAriaLabel(){return`${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`}groupsFromItems(i,t){const e=[];let s=[];const r=()=>{if(s.length>0)e.push({items:s});s=[]};for(const e of i){if(g(e)){r()}else{s.push(t(e))}}r();return e}get sectionMenuSections(){return this.groupsFromItems(this.sections,(i=>({label:i.label,value:i.id,isSelected:i.id===this.effectiveValue,isInactive:i.isInactive})))}get selectableActions(){return this.actions.filter((i=>!g(i)))}get showActionMenuTrigger(){return this.selectableActions.length>0||this.primaryCollapsed&&this.primaryAction!==null}actionMenuItem(i){const t=i;return{label:i.label,value:i.id,isInactive:i.isInactive||t.isLoading,isDestructive:i.isDestructive||t.intent==="negative"}}get actionMenuSections(){const i=this.groupsFromItems(this.actions,(i=>this.actionMenuItem(i)));if(!this.primaryCollapsed||!this.primaryAction)return i;return[{items:[this.actionMenuItem(this.primaryAction)]},...i]}renderSectionSelector(){if(!this.hasSectionSelector)return null;return[s("div",{class:"bar-title__divider","aria-hidden":"true"}),s("div",{class:"bar-title__section-selector"},s("button",{ref:i=>{this.sectionTriggerEl=i??null},id:this.sectionMenuTriggerId,class:{"bar-title__section-trigger":true,"bar-title__section-trigger--expanded":this.sectionMenuOpen,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.sectionMenuId,"aria-expanded":String(this.sectionMenuOpen),"aria-label":this.sectionTriggerAriaLabel,onClick:this.toggleSectionMenu},s("ds-text",{class:"bar-title__section-label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",lineTruncation:1},this.selectedSectionLabel),s("ds-icon",{class:"bar-title__section-chevron ds-interaction-fill__content",name:"ChevronUpDown",size:"md",color:"inherit","aria-hidden":"true"})))]}renderActions(){const i=this.primaryAction;if(!i&&!this.showActionMenuTrigger)return null;return s("div",{class:"bar-title__actions"},i&&!this.primaryCollapsed?s("ds-button-filled",{class:"bar-title__primary-action",variant:i.icon?"icon-label":"label",icon:i.icon??"",label:i.label,intent:i.intent??"brand",contrast:i.contrast??"bold",size:"md",type:i.type??"button",isInactive:i.isInactive,isLoading:i.isLoading,onDsClick:()=>this.dsAction.emit(i.id)}):null,this.showActionMenuTrigger?s("ds-tooltip",{label:"Page options",side:"bottom",size:"sm"},s("ds-button-unfilled",{ref:i=>{this.actionTriggerEl=i??null},id:this.actionMenuTriggerId,class:"bar-title__more-actions",variant:"icon",icon:"Ellipses","aria-label":this.actionsAriaLabel,size:"md",activeFill:!this.compact,hasBorder:i!==null&&!this.primaryCollapsed,haspopup:"menu",controls:this.actionMenuId,expanded:this.actionMenuOpen,onDsClick:i=>this.toggleActionMenu(i.detail)})):null)}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(){if(!this.showBack)return null;return s("ds-tooltip",{label:this.backTooltipLabel,side:"bottom",size:"sm"},s("ds-button-unfilled",{class:"bar-title__back",variant:"icon",icon:"ChevronLeft","aria-label":this.backAriaLabel,size:"md",activeFill:false,hasBorder:false,onDsClick:i=>this.dsBack.emit(i.detail)}))}render(){const i=this.compact;return s(r,{key:"a7312892c61852505bbcd9fbf7f8087ff1d2ec7c",class:{"bar-title-host--compact":i,"bar-title-host--expanded":this.variant==="expanded","bar-title-host--constrained":this.variant==="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}},s("div",{key:"c80024cb467a02b79fd23a37458537b21ed765a1",class:{"bar-title":true,"bar-title--divider-hidden":!this.dividerVisible,"ds-chrome-header":i}},s("div",{key:"32b0d58050864fb420efc01303cdef2bed483375",class:"bar-title__inner"},!i?this.renderBreadcrumb():null,s("div",{key:"771b6d5f8c355171b2b02eb19f8951626fed4195",class:"bar-title__row"},s("div",{key:"1d3f15bf8ac58b6c5745d24eb69bcd187bdc3431",class:"bar-title__leading"},s("div",{key:"ebd0bcfb18d9b7c0549c18e72ff9153ebc276f0b",class:"bar-title__title-row","data-shell-page-header-anchor":true},s("div",{key:"886fa72dbab4f7e9647e887691842d1ddd31da44",class:"bar-title__identity"},i?this.renderBack():null,s("ds-text",{key:"aa82af711ae78518efa7ef465f2f59496eb7a819",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,menuLabel:this.sectionsAriaLabel,open:this.sectionMenuOpen,initialFocusVisible:this.sectionMenuInitialFocusVisible,sections:this.sectionMenuSections,onDsClose:this.closeSectionMenu,onDsSelect:this.handleSectionSelect}):null,this.showActionMenuTrigger?s("ds-menu",{id:this.actionMenuId,class:"bar-title__action-menu",anchorId:this.actionMenuTriggerId,align:"end",menuLabel:this.actionsAriaLabel,open:this.actionMenuOpen,initialFocusVisible:this.actionMenuInitialFocusVisible,sections:this.actionMenuSections,onDsClose:this.closeActionMenu,onDsSelect:this.handleActionSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}}static get style(){return _()}},[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],actionsAriaLabel:[1,"actions-aria-label"],variant:[1],showDivider:[4,"show-divider"],showCompactDivider:[4,"show-compact-divider"],sectionMenuOpen:[32],actionMenuOpen:[32],sectionMenuInitialFocusVisible:[32],actionMenuInitialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}]);function k(){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),w)}break;case"ds-badge":if(!customElements.get(n(i))){o()}break;case"ds-breadcrumb":if(!customElements.get(n(i))){a()}break;case"ds-button-filled":if(!customElements.get(n(i))){d()}break;case"ds-button-unfilled":if(!customElements.get(n(i))){c()}break;case"ds-icon":if(!customElements.get(n(i))){l()}break;case"ds-loader":if(!customElements.get(n(i))){h()}break;case"ds-menu":if(!customElements.get(n(i))){b()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){f()}break;case"ds-switch":if(!customElements.get(n(i))){u()}break;case"ds-tag":if(!customElements.get(n(i))){v()}break;case"ds-text":if(!customElements.get(n(i))){m()}break;case"ds-tooltip":if(!customElements.get(n(i))){p()}break}}))}k();export{w as B,k as d};
|
|
2
|
+
//# sourceMappingURL=p-DHuyj-9J.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["isBarTitleDivider","item","type","barTitleCss","nextBarTitleId","BarTitle","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","description","showBack","backAriaLabel","backLabel","breadcrumbs","breadcrumbAriaLabel","sections","value","sectionsAriaLabel","primaryAction","actions","actionsAriaLabel","variant","showDivider","sectionMenuOpen","actionMenuOpen","sectionMenuInitialFocusVisible","actionMenuInitialFocusVisible","instanceId","sectionMenuTriggerId","sectionMenuId","actionMenuTriggerId","actionMenuId","sectionTriggerEl","actionTriggerEl","toggleSectionMenu","event","detail","closeSectionMenu","handleSectionSelect","id","String","selected","selectableSections","find","section","isInactive","dsSectionChange","emit","requestAnimationFrame","focus","toggleActionMenu","closeActionMenu","handleActionSelect","primaryMatches","primaryCollapsed","action","selectableActions","candidate","isLoading","dsAction","setFocus","handleBreadcrumbSelect","length","dsBack","originalEvent","forwarded","dsBreadcrumbSelect","defaultPrevented","preventDefault","componentWillLoad","el","closest","setAttribute","handleSectionsChange","hasSectionSelector","handleActionsChange","showActionMenuTrigger","compact","dividerVisible","showCompactDivider","expandedBreadcrumbItems","label","ariaLabel","backTooltipLabel","collapse","filter","effectiveValue","some","selectedSectionLabel","sectionTriggerAriaLabel","groupsFromItems","source","map","groups","items","commit","push","sectionMenuSections","isSelected","actionMenuItem","primary","isDestructive","intent","actionMenuSections","renderSectionSelector","h","class","ref","onClick","as","emphasis","color","lineTruncation","name","size","renderActions","icon","contrast","onDsClick","side","activeFill","hasBorder","haspopup","controls","expanded","renderBreadcrumb","onDsSelect","renderBack","render","Host","key","heading","wrap","anchorId","menuLabel","open","initialFocusVisible","onDsClose","align"],"sources":["src/wc/components/BarTitle/bar-title-types.ts","src/wc/components/BarTitle/BarTitle.css?tag=ds-bar-title&encapsulation=scoped","src/wc/components/BarTitle/BarTitle.tsx"],"sourcesContent":["import type { ButtonFilledContrast, ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';\n\nexport interface BarTitleSection {\n id: string;\n label: string;\n isInactive?: boolean;\n}\n\nexport interface BarTitleDivider {\n type: 'divider';\n}\n\nexport type BarTitleSectionItem = BarTitleSection | BarTitleDivider;\n\nexport interface BarTitleAction {\n id: string;\n label: string;\n isInactive?: boolean;\n isDestructive?: boolean;\n}\n\nexport interface BarTitlePrimaryAction extends BarTitleAction {\n icon?: string;\n intent?: ButtonFilledIntent;\n contrast?: ButtonFilledContrast;\n isLoading?: boolean;\n type?: 'button' | 'submit' | 'reset';\n collapse?: BarTitlePrimaryActionCollapse;\n}\n\nexport type BarTitleActionItem = BarTitleAction | BarTitleDivider;\n\nexport type BarTitleVariant = 'expanded' | 'compact' | 'constrained';\n\nexport type BarTitlePrimaryActionCollapse = 'auto' | 'never';\n\nexport function isBarTitleDivider(\n item: BarTitleSectionItem | BarTitleActionItem\n): item is BarTitleDivider {\n return 'type' in item && item.type === 'divider';\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n display: block;\n min-width: 0;\n box-sizing: border-box;\n background: var(--_shell-page-header-background, var(--color-background-primary));\n}\n\n:host([data-shell-page-syncing]) {\n visibility: hidden;\n}\n\n.bar-title {\n position: relative;\n min-width: 0;\n box-sizing: border-box;\n background: var(--_shell-page-header-background, var(--color-background-primary));\n}\n\n.bar-title::after {\n content: '';\n position: absolute;\n inset: auto var(--ds-bar-title-divider-inset, var(--dimension-space-400)) 0;\n height: var(--dimension-stroke-width-012);\n background: var(--color-border-tertiary);\n pointer-events: none;\n}\n\n.bar-title--divider-hidden::after {\n display: none;\n}\n\n.bar-title__inner {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-400);\n box-sizing: border-box;\n}\n\n.bar-title__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--dimension-space-100);\n min-height: var(--dimension-size-400);\n min-width: 0;\n}\n\n:host(.bar-title-host--expanded) .bar-title__row {\n gap: var(--dimension-space-400);\n}\n\n.bar-title__leading {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: var(--dimension-space-100);\n min-width: 0;\n}\n\n.bar-title__title-row {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-100);\n min-width: 0;\n min-height: var(--dimension-size-400);\n}\n\n.bar-title__identity {\n display: flex;\n flex: 0 1 auto;\n align-items: center;\n gap: var(--dimension-space-050);\n min-width: 0;\n}\n\n.bar-title__back,\n.bar-title__section-chevron {\n flex: 0 0 auto;\n}\n\n.bar-title__breadcrumb {\n display: block;\n width: 100%;\n min-width: 0;\n}\n\n.bar-title__heading {\n display: block;\n width: auto;\n min-width: 0;\n user-select: none;\n}\n\n.bar-title__divider {\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-size-250);\n margin-inline-start: var(--dimension-space-100);\n flex: 0 0 var(--dimension-stroke-width-012);\n background: var(--color-border-tertiary);\n}\n\n.bar-title__section-selector {\n display: flex;\n flex: 0 1 auto;\n min-width: 0;\n max-width: var(--dimension-panel-width-sm);\n}\n\n.bar-title__section-trigger {\n --ds-control-radius: var(--dimension-radius-half);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n height: var(--ds-control-height);\n min-width: 0;\n max-width: 100%;\n padding-inline: var(--ds-control-padding-inline);\n border: none;\n border-radius: var(--ds-control-radius);\n box-sizing: border-box;\n background: transparent;\n color: var(--color-foreground-secondary);\n cursor: default;\n font-family: inherit;\n user-select: none;\n}\n\n.bar-title__section-trigger--expanded {\n color: var(--color-foreground-primary);\n --ds-interaction-hover: var(--ds-interaction-pressed);\n}\n\n.bar-title__section-trigger--expanded::after {\n background: var(--ds-interaction-pressed);\n}\n\n.bar-title__section-label {\n min-width: 0;\n padding-inline: var(--ds-control-label-inset);\n}\n\n.bar-title__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-100);\n flex: 0 0 auto;\n}\n\n.bar-title__description {\n display: block;\n min-width: 0;\n max-width: 100%;\n}\n\n:host(.bar-title-host--compact) .bar-title {\n height: var(--dimension-size-600);\n}\n\n:host(.bar-title-host--compact) .bar-title::after {\n inset-inline: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__inner {\n flex: 1 1 auto;\n height: 100%;\n min-width: 0;\n padding: 0;\n gap: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__row {\n height: 100%;\n align-items: center;\n}\n\n:host(.bar-title-host--compact) .bar-title__identity {\n height: var(--dimension-size-400);\n}\n\n:host(.bar-title-host--compact) .bar-title__divider {\n margin-inline-start: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__heading {\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n box-sizing: border-box;\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 { BreadcrumbItem, BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n isBarTitleDivider,\n type BarTitleAction,\n type BarTitleActionItem,\n type BarTitlePrimaryAction,\n type BarTitleSection,\n type BarTitleSectionItem,\n type BarTitleVariant,\n} from './bar-title-types';\n\nlet nextBarTitleId = 0;\n\ntype FocusableButton = HTMLElement & { setFocus?: () => Promise<void> };\n\n@Component({\n tag: 'ds-bar-title',\n styleUrl: 'BarTitle.css',\n scoped: true,\n})\nexport class BarTitle {\n @Element() el!: HTMLElement;\n\n /** The page's single visible h1. */\n @Prop() heading!: string;\n\n /** Optional supporting copy shown in the expanded presentation. */\n @Prop() description: string = '';\n\n /** Show the leading page-level Back action. */\n @Prop({ attribute: 'show-back' }) showBack: boolean = false;\n\n /** Accessible name for the leading Back action. */\n @Prop() backAriaLabel: string = 'Back';\n\n /** Visible parent-page label used by the expanded breadcrumb when breadcrumbs is empty. */\n @Prop() backLabel: string = 'Back';\n\n /** Optional expanded ancestor path. Compact variants continue to use the Back action. */\n @Prop() breadcrumbs: BreadcrumbItem[] = [];\n\n /** Accessible name for the expanded breadcrumb navigation landmark. */\n @Prop() breadcrumbAriaLabel: string = 'Breadcrumb';\n\n /** Optional page sections exposed through the active-section menu. */\n @Prop() sections: BarTitleSectionItem[] = [];\n\n /** Id of the active page section. */\n @Prop() value: string = '';\n\n /** Accessible name for the page-section menu. */\n @Prop() sectionsAriaLabel: string = 'Change page section';\n\n /** The one highest-emphasis page action. */\n @Prop() primaryAction: BarTitlePrimaryAction | null = null;\n\n /** Secondary page actions shown in the overflow menu. Dividers create groups. */\n @Prop() actions: BarTitleActionItem[] = [];\n\n /** Accessible name for the page-actions menu. */\n @Prop() actionsAriaLabel: string = 'More page actions';\n\n /** Explicit visual/capacity variant. ShellPage owns automatic selection. */\n @Prop() variant: BarTitleVariant = 'expanded';\n\n /** Draw the page-title divider beneath the header. */\n @Prop() showDivider: boolean = true;\n\n /** Override divider visibility for compact and constrained variants. */\n @Prop() showCompactDivider?: boolean;\n\n /** Emitted when the leading Back action is activated. */\n @Event() dsBack!: EventEmitter<MouseEvent>;\n\n /** Emitted when an authored expanded breadcrumb item is activated. */\n @Event({ cancelable: true }) dsBreadcrumbSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n /** Emitted with the newly selected page-section id. */\n @Event() dsSectionChange!: EventEmitter<string>;\n\n /** Emitted with the activated primary or overflow action id. */\n @Event() dsAction!: EventEmitter<string>;\n\n @State() private sectionMenuOpen = false;\n @State() private actionMenuOpen = false;\n @State() private sectionMenuInitialFocusVisible = false;\n @State() private actionMenuInitialFocusVisible = false;\n\n private readonly instanceId = nextBarTitleId++;\n private readonly sectionMenuTriggerId = `bar-title-section-trigger-${this.instanceId}`;\n private readonly sectionMenuId = `bar-title-section-menu-${this.instanceId}`;\n private readonly actionMenuTriggerId = `bar-title-action-trigger-${this.instanceId}`;\n private readonly actionMenuId = `bar-title-action-menu-${this.instanceId}`;\n private sectionTriggerEl: HTMLButtonElement | null = null;\n private actionTriggerEl: FocusableButton | null = null;\n\n componentWillLoad() {\n if (this.el.closest('ds-shell-page')) {\n this.el.setAttribute('data-shell-page-syncing', '');\n }\n }\n\n @Watch('sections')\n handleSectionsChange() {\n if (!this.hasSectionSelector) this.closeSectionMenu();\n }\n\n @Watch('actions')\n @Watch('primaryAction')\n handleActionsChange() {\n if (!this.showActionMenuTrigger) this.closeActionMenu();\n }\n\n private get compact(): boolean {\n return this.variant !== 'expanded';\n }\n\n private get dividerVisible(): boolean {\n return this.compact ? (this.showCompactDivider ?? this.showDivider) : this.showDivider;\n }\n\n private get expandedBreadcrumbItems(): BreadcrumbItem[] {\n if (this.breadcrumbs.length > 0) return this.breadcrumbs;\n if (!this.showBack) return [];\n return [\n {\n id: 'back',\n label: this.backLabel,\n ariaLabel: this.backAriaLabel,\n },\n ];\n }\n\n /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */\n private get backTooltipLabel(): string {\n return 'Go back';\n }\n\n private get primaryCollapsed(): boolean {\n return (\n this.variant === 'constrained' &&\n this.primaryAction !== null &&\n (this.primaryAction.collapse ?? 'auto') === 'auto'\n );\n }\n\n private get selectableSections(): BarTitleSection[] {\n return this.sections.filter((item): item is BarTitleSection => !isBarTitleDivider(item));\n }\n\n private get hasSectionSelector(): boolean {\n return this.selectableSections.length > 1;\n }\n\n private get effectiveValue(): string {\n return this.selectableSections.some(section => section.id === this.value)\n ? this.value\n : (this.selectableSections[0]?.id ?? '');\n }\n\n private get selectedSectionLabel(): string {\n return this.selectableSections.find(section => section.id === this.effectiveValue)?.label ?? '';\n }\n\n private get sectionTriggerAriaLabel(): string {\n return `${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`;\n }\n\n private groupsFromItems<T extends BarTitleSection | BarTitleAction>(\n source: Array<T | { type: 'divider' }>,\n map: (item: T) => MenuItemData\n ): MenuSection[] {\n const groups: MenuSection[] = [];\n let items: MenuItemData[] = [];\n const commit = () => {\n if (items.length > 0) groups.push({ items });\n items = [];\n };\n\n for (const item of source) {\n if (isBarTitleDivider(item)) {\n commit();\n } else {\n items.push(map(item));\n }\n }\n commit();\n return groups;\n }\n\n private get sectionMenuSections(): MenuSection[] {\n return this.groupsFromItems(this.sections, section => ({\n label: section.label,\n value: section.id,\n isSelected: section.id === this.effectiveValue,\n isInactive: section.isInactive,\n }));\n }\n\n private get selectableActions(): BarTitleAction[] {\n return this.actions.filter((item): item is BarTitleAction => !isBarTitleDivider(item));\n }\n\n private get showActionMenuTrigger(): boolean {\n return (\n this.selectableActions.length > 0 || (this.primaryCollapsed && this.primaryAction !== null)\n );\n }\n\n private actionMenuItem(action: BarTitleAction | BarTitlePrimaryAction): MenuItemData {\n const primary = action as BarTitlePrimaryAction;\n return {\n label: action.label,\n value: action.id,\n isInactive: action.isInactive || primary.isLoading,\n isDestructive: action.isDestructive || primary.intent === 'negative',\n };\n }\n\n private get actionMenuSections(): MenuSection[] {\n const groups = this.groupsFromItems(this.actions, action => this.actionMenuItem(action));\n if (!this.primaryCollapsed || !this.primaryAction) return groups;\n return [{ items: [this.actionMenuItem(this.primaryAction)] }, ...groups];\n }\n\n private toggleSectionMenu = (event: MouseEvent) => {\n this.sectionMenuInitialFocusVisible = event.detail === 0;\n this.actionMenuOpen = false;\n this.sectionMenuOpen = !this.sectionMenuOpen;\n };\n\n private closeSectionMenu = () => {\n this.sectionMenuOpen = false;\n };\n\n private handleSectionSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail?.value ?? '');\n const selected = this.selectableSections.find(section => section.id === id);\n if (!selected || selected.isInactive) return;\n this.closeSectionMenu();\n this.dsSectionChange.emit(id);\n requestAnimationFrame(() => this.sectionTriggerEl?.focus());\n };\n\n private toggleActionMenu = (event: MouseEvent) => {\n this.actionMenuInitialFocusVisible = event.detail === 0;\n this.sectionMenuOpen = false;\n this.actionMenuOpen = !this.actionMenuOpen;\n };\n\n private closeActionMenu = () => {\n this.actionMenuOpen = false;\n };\n\n private handleActionSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail?.value ?? '');\n const primaryMatches = this.primaryCollapsed && this.primaryAction?.id === id;\n const action = this.selectableActions.find(candidate => candidate.id === id);\n if (!primaryMatches && !action) return;\n if (\n (primaryMatches && (this.primaryAction?.isInactive || this.primaryAction?.isLoading)) ||\n action?.isInactive\n ) {\n return;\n }\n this.closeActionMenu();\n this.dsAction.emit(id);\n requestAnimationFrame(() => void this.actionTriggerEl?.setFocus?.());\n };\n\n private renderSectionSelector() {\n if (!this.hasSectionSelector) return null;\n return [\n <div class=\"bar-title__divider\" aria-hidden=\"true\" />,\n <div class=\"bar-title__section-selector\">\n <button\n ref={el => {\n this.sectionTriggerEl = el ?? null;\n }}\n id={this.sectionMenuTriggerId}\n class={{\n 'bar-title__section-trigger': true,\n 'bar-title__section-trigger--expanded': this.sectionMenuOpen,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-controls={this.sectionMenuId}\n aria-expanded={String(this.sectionMenuOpen)}\n aria-label={this.sectionTriggerAriaLabel}\n onClick={this.toggleSectionMenu}\n >\n <ds-text\n class=\"bar-title__section-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"primary\"\n lineTruncation={1}\n >\n {this.selectedSectionLabel}\n </ds-text>\n <ds-icon\n class=\"bar-title__section-chevron ds-interaction-fill__content\"\n name=\"ChevronUpDown\"\n size=\"md\"\n color=\"inherit\"\n aria-hidden=\"true\"\n />\n </button>\n </div>,\n ];\n }\n\n private renderActions() {\n const primary = this.primaryAction;\n if (!primary && !this.showActionMenuTrigger) return null;\n\n return (\n <div class=\"bar-title__actions\">\n {primary && !this.primaryCollapsed ? (\n <ds-button-filled\n class=\"bar-title__primary-action\"\n variant={primary.icon ? 'icon-label' : 'label'}\n icon={primary.icon ?? ''}\n label={primary.label}\n intent={primary.intent ?? 'brand'}\n contrast={primary.contrast ?? 'bold'}\n size=\"md\"\n type={primary.type ?? 'button'}\n isInactive={primary.isInactive}\n isLoading={primary.isLoading}\n onDsClick={() => this.dsAction.emit(primary.id)}\n />\n ) : null}\n {this.showActionMenuTrigger ? (\n <ds-tooltip label=\"Page options\" side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n ref={el => {\n this.actionTriggerEl = el ?? null;\n }}\n id={this.actionMenuTriggerId}\n class=\"bar-title__more-actions\"\n variant=\"icon\"\n icon=\"Ellipses\"\n aria-label={this.actionsAriaLabel}\n size=\"md\"\n activeFill={!this.compact}\n hasBorder={primary !== null && !this.primaryCollapsed}\n haspopup=\"menu\"\n controls={this.actionMenuId}\n expanded={this.actionMenuOpen}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.toggleActionMenu(event.detail)}\n />\n </ds-tooltip>\n ) : null}\n </div>\n );\n }\n\n private handleBreadcrumbSelect = (event: CustomEvent<BreadcrumbSelectDetail>) => {\n if (this.breadcrumbs.length === 0) {\n this.dsBack.emit(event.detail.originalEvent);\n return;\n }\n const forwarded = this.dsBreadcrumbSelect.emit(event.detail);\n if (forwarded.defaultPrevented) event.preventDefault();\n };\n\n private renderBreadcrumb() {\n const items = this.expandedBreadcrumbItems;\n if (items.length === 0) return null;\n return (\n <ds-breadcrumb\n class=\"bar-title__breadcrumb\"\n items={items}\n ariaLabel={this.breadcrumbAriaLabel}\n onDsSelect={this.handleBreadcrumbSelect}\n />\n );\n }\n\n private renderBack() {\n if (!this.showBack) return null;\n return (\n <ds-tooltip label={this.backTooltipLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n class=\"bar-title__back\"\n variant=\"icon\"\n icon=\"ChevronLeft\"\n aria-label={this.backAriaLabel}\n size=\"md\"\n activeFill={false}\n hasBorder={false}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n />\n </ds-tooltip>\n );\n }\n\n render() {\n const compact = this.compact;\n return (\n <Host\n class={{\n 'bar-title-host--compact': compact,\n 'bar-title-host--expanded': this.variant === 'expanded',\n 'bar-title-host--constrained': this.variant === 'constrained',\n 'bar-title-host--has-description': !!this.description,\n 'bar-title-host--has-back': this.showBack,\n 'bar-title-host--has-breadcrumb': !compact && this.expandedBreadcrumbItems.length > 0,\n }}\n >\n <div\n class={{\n 'bar-title': true,\n 'bar-title--divider-hidden': !this.dividerVisible,\n 'ds-chrome-header': compact,\n }}\n >\n <div class=\"bar-title__inner\">\n {!compact ? this.renderBreadcrumb() : null}\n <div class=\"bar-title__row\">\n <div class=\"bar-title__leading\">\n <div class=\"bar-title__title-row\" data-shell-page-header-anchor>\n <div class=\"bar-title__identity\">\n {compact ? this.renderBack() : null}\n <ds-text\n class=\"bar-title__heading ds-control--md\"\n variant={compact ? 'text-title-small' : 'text-title-medium'}\n emphasis\n color=\"primary\"\n as=\"h1\"\n lineTruncation={1}\n >\n {this.heading}\n </ds-text>\n </div>\n {this.renderSectionSelector()}\n </div>\n {this.description && !compact ? (\n <ds-text\n class=\"bar-title__description\"\n variant=\"text-body-small\"\n color=\"secondary\"\n lineTruncation={2}\n wrap=\"wrap\"\n as=\"p\"\n >\n {this.description}\n </ds-text>\n ) : null}\n </div>\n {this.renderActions()}\n </div>\n </div>\n </div>\n\n {this.hasSectionSelector ? (\n <ds-menu\n id={this.sectionMenuId}\n class=\"bar-title__section-menu\"\n anchorId={this.sectionMenuTriggerId}\n menuLabel={this.sectionsAriaLabel}\n open={this.sectionMenuOpen}\n initialFocusVisible={this.sectionMenuInitialFocusVisible}\n sections={this.sectionMenuSections}\n onDsClose={this.closeSectionMenu}\n onDsSelect={this.handleSectionSelect}\n />\n ) : null}\n\n {this.showActionMenuTrigger ? (\n <ds-menu\n id={this.actionMenuId}\n class=\"bar-title__action-menu\"\n anchorId={this.actionMenuTriggerId}\n align=\"end\"\n menuLabel={this.actionsAriaLabel}\n open={this.actionMenuOpen}\n initialFocusVisible={this.actionMenuInitialFocusVisible}\n sections={this.actionMenuSections}\n onDsClose={this.closeActionMenu}\n onDsSelect={this.handleActionSelect}\n />\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["isBarTitleDivider","item","type","barTitleCss","nextBarTitleId","BarTitle","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","description","showBack","backAriaLabel","backLabel","breadcrumbs","breadcrumbAriaLabel","sections","value","sectionsAriaLabel","primaryAction","actions","actionsAriaLabel","variant","showDivider","sectionMenuOpen","actionMenuOpen","sectionMenuInitialFocusVisible","actionMenuInitialFocusVisible","instanceId","sectionMenuTriggerId","sectionMenuId","actionMenuTriggerId","actionMenuId","sectionTriggerEl","actionTriggerEl","toggleSectionMenu","event","detail","closeSectionMenu","handleSectionSelect","id","String","selected","selectableSections","find","section","isInactive","dsSectionChange","emit","requestAnimationFrame","focus","toggleActionMenu","closeActionMenu","handleActionSelect","primaryMatches","primaryCollapsed","action","selectableActions","candidate","isLoading","dsAction","setFocus","handleBreadcrumbSelect","length","dsBack","originalEvent","forwarded","dsBreadcrumbSelect","defaultPrevented","preventDefault","componentWillLoad","el","closest","setAttribute","handleSectionsChange","hasSectionSelector","handleActionsChange","showActionMenuTrigger","compact","dividerVisible","showCompactDivider","expandedBreadcrumbItems","label","ariaLabel","backTooltipLabel","collapse","filter","effectiveValue","some","selectedSectionLabel","sectionTriggerAriaLabel","groupsFromItems","source","map","groups","items","commit","push","sectionMenuSections","isSelected","actionMenuItem","primary","isDestructive","intent","actionMenuSections","renderSectionSelector","h","class","ref","onClick","as","emphasis","color","lineTruncation","name","size","renderActions","icon","contrast","onDsClick","side","activeFill","hasBorder","haspopup","controls","expanded","renderBreadcrumb","onDsSelect","renderBack","render","Host","key","heading","wrap","anchorId","menuLabel","open","initialFocusVisible","onDsClose","align"],"sources":["src/wc/components/BarTitle/bar-title-types.ts","src/wc/components/BarTitle/BarTitle.css?tag=ds-bar-title&encapsulation=scoped","src/wc/components/BarTitle/BarTitle.tsx"],"sourcesContent":["import type { ButtonFilledContrast, ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';\n\nexport interface BarTitleSection {\n id: string;\n label: string;\n isInactive?: boolean;\n}\n\nexport interface BarTitleDivider {\n type: 'divider';\n}\n\nexport type BarTitleSectionItem = BarTitleSection | BarTitleDivider;\n\nexport interface BarTitleAction {\n id: string;\n label: string;\n isInactive?: boolean;\n isDestructive?: boolean;\n}\n\nexport interface BarTitlePrimaryAction extends BarTitleAction {\n icon?: string;\n intent?: ButtonFilledIntent;\n contrast?: ButtonFilledContrast;\n isLoading?: boolean;\n type?: 'button' | 'submit' | 'reset';\n collapse?: BarTitlePrimaryActionCollapse;\n}\n\nexport type BarTitleActionItem = BarTitleAction | BarTitleDivider;\n\nexport type BarTitleVariant = 'expanded' | 'compact' | 'constrained';\n\nexport type BarTitlePrimaryActionCollapse = 'auto' | 'never';\n\nexport function isBarTitleDivider(\n item: BarTitleSectionItem | BarTitleActionItem\n): item is BarTitleDivider {\n return 'type' in item && item.type === 'divider';\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n display: block;\n min-width: 0;\n box-sizing: border-box;\n background: var(--_shell-page-header-background, var(--color-background-primary));\n}\n\n:host([data-shell-page-syncing]) {\n visibility: hidden;\n}\n\n.bar-title {\n position: relative;\n min-width: 0;\n box-sizing: border-box;\n background: var(--_shell-page-header-background, var(--color-background-primary));\n}\n\n.bar-title::after {\n content: '';\n position: absolute;\n inset: auto var(--ds-bar-title-divider-inset, var(--dimension-space-400)) 0;\n height: var(--dimension-stroke-width-012);\n background: var(--color-border-tertiary);\n pointer-events: none;\n}\n\n.bar-title--divider-hidden::after {\n display: none;\n}\n\n.bar-title__inner {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-400);\n box-sizing: border-box;\n}\n\n.bar-title__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--dimension-space-100);\n min-height: var(--dimension-size-400);\n min-width: 0;\n}\n\n:host(.bar-title-host--expanded) .bar-title__row {\n gap: var(--dimension-space-400);\n}\n\n.bar-title__leading {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: var(--dimension-space-100);\n min-width: 0;\n}\n\n.bar-title__title-row {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-100);\n min-width: 0;\n min-height: var(--dimension-size-400);\n}\n\n.bar-title__identity {\n display: flex;\n flex: 0 1 auto;\n align-items: center;\n gap: var(--dimension-space-050);\n min-width: 0;\n}\n\n.bar-title__back,\n.bar-title__section-chevron {\n flex: 0 0 auto;\n}\n\n.bar-title__breadcrumb {\n display: block;\n width: 100%;\n min-width: 0;\n}\n\n.bar-title__heading {\n display: block;\n width: auto;\n min-width: 0;\n user-select: none;\n}\n\n.bar-title__divider {\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-size-250);\n margin-inline-start: var(--dimension-space-100);\n flex: 0 0 var(--dimension-stroke-width-012);\n background: var(--color-border-tertiary);\n}\n\n.bar-title__section-selector {\n display: flex;\n flex: 0 1 auto;\n min-width: 0;\n max-width: var(--dimension-panel-width-sm);\n}\n\n.bar-title__section-trigger {\n --ds-control-radius: var(--dimension-radius-half);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n height: var(--ds-control-height);\n min-width: 0;\n max-width: 100%;\n padding-inline: var(--ds-control-padding-inline);\n border: none;\n border-radius: var(--ds-control-radius);\n box-sizing: border-box;\n background: transparent;\n color: var(--color-foreground-secondary);\n cursor: default;\n font-family: inherit;\n user-select: none;\n}\n\n.bar-title__section-trigger--expanded {\n color: var(--color-foreground-primary);\n --ds-interaction-hover: var(--ds-interaction-pressed);\n}\n\n.bar-title__section-trigger--expanded::after {\n background: var(--ds-interaction-pressed);\n}\n\n.bar-title__section-label {\n min-width: 0;\n padding-inline: var(--ds-control-label-inset);\n}\n\n.bar-title__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-100);\n flex: 0 0 auto;\n}\n\n.bar-title__description {\n display: block;\n min-width: 0;\n max-width: 100%;\n}\n\n:host(.bar-title-host--compact) .bar-title {\n height: var(--dimension-size-600);\n}\n\n:host(.bar-title-host--compact) .bar-title::after {\n inset-inline: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__inner {\n flex: 1 1 auto;\n height: 100%;\n min-width: 0;\n padding: 0;\n gap: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__row {\n height: 100%;\n align-items: center;\n}\n\n:host(.bar-title-host--compact) .bar-title__identity {\n height: var(--dimension-size-400);\n}\n\n:host(.bar-title-host--compact) .bar-title__divider {\n margin-inline-start: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__heading {\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n box-sizing: border-box;\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 { BreadcrumbItem, BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n isBarTitleDivider,\n type BarTitleAction,\n type BarTitleActionItem,\n type BarTitlePrimaryAction,\n type BarTitleSection,\n type BarTitleSectionItem,\n type BarTitleVariant,\n} from './bar-title-types';\n\nlet nextBarTitleId = 0;\n\ntype FocusableButton = HTMLElement & { setFocus?: () => Promise<void> };\n\n@Component({\n tag: 'ds-bar-title',\n styleUrl: 'BarTitle.css',\n scoped: true,\n})\nexport class BarTitle {\n @Element() el!: HTMLElement;\n\n /** The page's single visible h1. */\n @Prop() heading!: string;\n\n /** Optional supporting copy shown in the expanded presentation. */\n @Prop() description: string = '';\n\n /** Show the leading page-level Back action. */\n @Prop({ attribute: 'show-back' }) showBack: boolean = false;\n\n /** Accessible name for the leading Back action. */\n @Prop() backAriaLabel: string = 'Back';\n\n /** Visible parent-page label used by the expanded breadcrumb when breadcrumbs is empty. */\n @Prop() backLabel: string = 'Back';\n\n /** Optional expanded ancestor path. Compact variants continue to use the Back action. */\n @Prop() breadcrumbs: BreadcrumbItem[] = [];\n\n /** Accessible name for the expanded breadcrumb navigation landmark. */\n @Prop() breadcrumbAriaLabel: string = 'Breadcrumb';\n\n /** Optional page sections exposed through the active-section menu. */\n @Prop() sections: BarTitleSectionItem[] = [];\n\n /** Id of the active page section. */\n @Prop() value: string = '';\n\n /** Accessible name for the page-section menu. */\n @Prop() sectionsAriaLabel: string = 'Change page section';\n\n /** The one highest-emphasis page action. */\n @Prop() primaryAction: BarTitlePrimaryAction | null = null;\n\n /** Secondary page actions shown in the overflow menu. Dividers create groups. */\n @Prop() actions: BarTitleActionItem[] = [];\n\n /** Accessible name for the page-actions menu. */\n @Prop() actionsAriaLabel: string = 'More page actions';\n\n /** Explicit visual/capacity variant. ShellPage owns automatic selection. */\n @Prop() variant: BarTitleVariant = 'expanded';\n\n /** Draw the page-title divider beneath the header. */\n @Prop() showDivider: boolean = true;\n\n /** Override divider visibility for compact and constrained variants. */\n @Prop() showCompactDivider?: boolean;\n\n /** Emitted when the leading Back action is activated. */\n @Event() dsBack!: EventEmitter<MouseEvent>;\n\n /** Emitted when an authored expanded breadcrumb item is activated. */\n @Event({ cancelable: true }) dsBreadcrumbSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n /** Emitted with the newly selected page-section id. */\n @Event() dsSectionChange!: EventEmitter<string>;\n\n /** Emitted with the activated primary or overflow action id. */\n @Event() dsAction!: EventEmitter<string>;\n\n @State() private sectionMenuOpen = false;\n @State() private actionMenuOpen = false;\n @State() private sectionMenuInitialFocusVisible = false;\n @State() private actionMenuInitialFocusVisible = false;\n\n private readonly instanceId = nextBarTitleId++;\n private readonly sectionMenuTriggerId = `bar-title-section-trigger-${this.instanceId}`;\n private readonly sectionMenuId = `bar-title-section-menu-${this.instanceId}`;\n private readonly actionMenuTriggerId = `bar-title-action-trigger-${this.instanceId}`;\n private readonly actionMenuId = `bar-title-action-menu-${this.instanceId}`;\n private sectionTriggerEl: HTMLButtonElement | null = null;\n private actionTriggerEl: FocusableButton | null = null;\n\n componentWillLoad() {\n if (this.el.closest('ds-shell-page')) {\n this.el.setAttribute('data-shell-page-syncing', '');\n }\n }\n\n @Watch('sections')\n handleSectionsChange() {\n if (!this.hasSectionSelector) this.closeSectionMenu();\n }\n\n @Watch('actions')\n @Watch('primaryAction')\n handleActionsChange() {\n if (!this.showActionMenuTrigger) this.closeActionMenu();\n }\n\n private get compact(): boolean {\n return this.variant !== 'expanded';\n }\n\n private get dividerVisible(): boolean {\n return this.compact ? (this.showCompactDivider ?? this.showDivider) : this.showDivider;\n }\n\n private get expandedBreadcrumbItems(): BreadcrumbItem[] {\n if (this.breadcrumbs.length > 0) return this.breadcrumbs;\n if (!this.showBack) return [];\n return [\n {\n id: 'back',\n label: this.backLabel,\n ariaLabel: this.backAriaLabel,\n },\n ];\n }\n\n /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */\n private get backTooltipLabel(): string {\n return 'Go back';\n }\n\n private get primaryCollapsed(): boolean {\n return (\n this.variant === 'constrained' &&\n this.primaryAction !== null &&\n (this.primaryAction.collapse ?? 'auto') === 'auto'\n );\n }\n\n private get selectableSections(): BarTitleSection[] {\n return this.sections.filter((item): item is BarTitleSection => !isBarTitleDivider(item));\n }\n\n private get hasSectionSelector(): boolean {\n return this.selectableSections.length > 1;\n }\n\n private get effectiveValue(): string {\n return this.selectableSections.some(section => section.id === this.value)\n ? this.value\n : (this.selectableSections[0]?.id ?? '');\n }\n\n private get selectedSectionLabel(): string {\n return this.selectableSections.find(section => section.id === this.effectiveValue)?.label ?? '';\n }\n\n private get sectionTriggerAriaLabel(): string {\n return `${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`;\n }\n\n private groupsFromItems<T extends BarTitleSection | BarTitleAction>(\n source: Array<T | { type: 'divider' }>,\n map: (item: T) => MenuItemData\n ): MenuSection[] {\n const groups: MenuSection[] = [];\n let items: MenuItemData[] = [];\n const commit = () => {\n if (items.length > 0) groups.push({ items });\n items = [];\n };\n\n for (const item of source) {\n if (isBarTitleDivider(item)) {\n commit();\n } else {\n items.push(map(item));\n }\n }\n commit();\n return groups;\n }\n\n private get sectionMenuSections(): MenuSection[] {\n return this.groupsFromItems(this.sections, section => ({\n label: section.label,\n value: section.id,\n isSelected: section.id === this.effectiveValue,\n isInactive: section.isInactive,\n }));\n }\n\n private get selectableActions(): BarTitleAction[] {\n return this.actions.filter((item): item is BarTitleAction => !isBarTitleDivider(item));\n }\n\n private get showActionMenuTrigger(): boolean {\n return (\n this.selectableActions.length > 0 || (this.primaryCollapsed && this.primaryAction !== null)\n );\n }\n\n private actionMenuItem(action: BarTitleAction | BarTitlePrimaryAction): MenuItemData {\n const primary = action as BarTitlePrimaryAction;\n return {\n label: action.label,\n value: action.id,\n isInactive: action.isInactive || primary.isLoading,\n isDestructive: action.isDestructive || primary.intent === 'negative',\n };\n }\n\n private get actionMenuSections(): MenuSection[] {\n const groups = this.groupsFromItems(this.actions, action => this.actionMenuItem(action));\n if (!this.primaryCollapsed || !this.primaryAction) return groups;\n return [{ items: [this.actionMenuItem(this.primaryAction)] }, ...groups];\n }\n\n private toggleSectionMenu = (event: MouseEvent) => {\n this.sectionMenuInitialFocusVisible = event.detail === 0;\n this.actionMenuOpen = false;\n this.sectionMenuOpen = !this.sectionMenuOpen;\n };\n\n private closeSectionMenu = () => {\n this.sectionMenuOpen = false;\n };\n\n private handleSectionSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail?.value ?? '');\n const selected = this.selectableSections.find(section => section.id === id);\n if (!selected || selected.isInactive) return;\n this.closeSectionMenu();\n this.dsSectionChange.emit(id);\n requestAnimationFrame(() => this.sectionTriggerEl?.focus());\n };\n\n private toggleActionMenu = (event: MouseEvent) => {\n this.actionMenuInitialFocusVisible = event.detail === 0;\n this.sectionMenuOpen = false;\n this.actionMenuOpen = !this.actionMenuOpen;\n };\n\n private closeActionMenu = () => {\n this.actionMenuOpen = false;\n };\n\n private handleActionSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail?.value ?? '');\n const primaryMatches = this.primaryCollapsed && this.primaryAction?.id === id;\n const action = this.selectableActions.find(candidate => candidate.id === id);\n if (!primaryMatches && !action) return;\n if (\n (primaryMatches && (this.primaryAction?.isInactive || this.primaryAction?.isLoading)) ||\n action?.isInactive\n ) {\n return;\n }\n this.closeActionMenu();\n this.dsAction.emit(id);\n requestAnimationFrame(() => void this.actionTriggerEl?.setFocus?.());\n };\n\n private renderSectionSelector() {\n if (!this.hasSectionSelector) return null;\n return [\n <div class=\"bar-title__divider\" aria-hidden=\"true\" />,\n <div class=\"bar-title__section-selector\">\n <button\n ref={el => {\n this.sectionTriggerEl = el ?? null;\n }}\n id={this.sectionMenuTriggerId}\n class={{\n 'bar-title__section-trigger': true,\n 'bar-title__section-trigger--expanded': this.sectionMenuOpen,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-controls={this.sectionMenuId}\n aria-expanded={String(this.sectionMenuOpen)}\n aria-label={this.sectionTriggerAriaLabel}\n onClick={this.toggleSectionMenu}\n >\n <ds-text\n class=\"bar-title__section-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"primary\"\n lineTruncation={1}\n >\n {this.selectedSectionLabel}\n </ds-text>\n <ds-icon\n class=\"bar-title__section-chevron ds-interaction-fill__content\"\n name=\"ChevronUpDown\"\n size=\"md\"\n color=\"inherit\"\n aria-hidden=\"true\"\n />\n </button>\n </div>,\n ];\n }\n\n private renderActions() {\n const primary = this.primaryAction;\n if (!primary && !this.showActionMenuTrigger) return null;\n\n return (\n <div class=\"bar-title__actions\">\n {primary && !this.primaryCollapsed ? (\n <ds-button-filled\n class=\"bar-title__primary-action\"\n variant={primary.icon ? 'icon-label' : 'label'}\n icon={primary.icon ?? ''}\n label={primary.label}\n intent={primary.intent ?? 'brand'}\n contrast={primary.contrast ?? 'bold'}\n size=\"md\"\n type={primary.type ?? 'button'}\n isInactive={primary.isInactive}\n isLoading={primary.isLoading}\n onDsClick={() => this.dsAction.emit(primary.id)}\n />\n ) : null}\n {this.showActionMenuTrigger ? (\n <ds-tooltip label=\"Page options\" side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n ref={el => {\n this.actionTriggerEl = el ?? null;\n }}\n id={this.actionMenuTriggerId}\n class=\"bar-title__more-actions\"\n variant=\"icon\"\n icon=\"Ellipses\"\n aria-label={this.actionsAriaLabel}\n size=\"md\"\n activeFill={!this.compact}\n hasBorder={primary !== null && !this.primaryCollapsed}\n haspopup=\"menu\"\n controls={this.actionMenuId}\n expanded={this.actionMenuOpen}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.toggleActionMenu(event.detail)}\n />\n </ds-tooltip>\n ) : null}\n </div>\n );\n }\n\n private handleBreadcrumbSelect = (event: CustomEvent<BreadcrumbSelectDetail>) => {\n if (this.breadcrumbs.length === 0) {\n this.dsBack.emit(event.detail.originalEvent);\n return;\n }\n const forwarded = this.dsBreadcrumbSelect.emit(event.detail);\n if (forwarded.defaultPrevented) event.preventDefault();\n };\n\n private renderBreadcrumb() {\n const items = this.expandedBreadcrumbItems;\n if (items.length === 0) return null;\n return (\n <ds-breadcrumb\n class=\"bar-title__breadcrumb\"\n items={items}\n ariaLabel={this.breadcrumbAriaLabel}\n onDsSelect={this.handleBreadcrumbSelect}\n />\n );\n }\n\n private renderBack() {\n if (!this.showBack) return null;\n return (\n <ds-tooltip label={this.backTooltipLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n class=\"bar-title__back\"\n variant=\"icon\"\n icon=\"ChevronLeft\"\n aria-label={this.backAriaLabel}\n size=\"md\"\n activeFill={false}\n hasBorder={false}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n />\n </ds-tooltip>\n );\n }\n\n render() {\n const compact = this.compact;\n return (\n <Host\n class={{\n 'bar-title-host--compact': compact,\n 'bar-title-host--expanded': this.variant === 'expanded',\n 'bar-title-host--constrained': this.variant === 'constrained',\n 'bar-title-host--has-description': !!this.description,\n 'bar-title-host--has-back': this.showBack,\n 'bar-title-host--has-breadcrumb': !compact && this.expandedBreadcrumbItems.length > 0,\n }}\n >\n <div\n class={{\n 'bar-title': true,\n 'bar-title--divider-hidden': !this.dividerVisible,\n 'ds-chrome-header': compact,\n }}\n >\n <div class=\"bar-title__inner\">\n {!compact ? this.renderBreadcrumb() : null}\n <div class=\"bar-title__row\">\n <div class=\"bar-title__leading\">\n <div class=\"bar-title__title-row\" data-shell-page-header-anchor>\n <div class=\"bar-title__identity\">\n {compact ? this.renderBack() : null}\n <ds-text\n class=\"bar-title__heading ds-control--md\"\n variant={compact ? 'text-title-small' : 'text-title-medium'}\n emphasis\n color=\"primary\"\n as=\"h1\"\n lineTruncation={1}\n >\n {this.heading}\n </ds-text>\n </div>\n {this.renderSectionSelector()}\n </div>\n {this.description && !compact ? (\n <ds-text\n class=\"bar-title__description\"\n variant=\"text-body-small\"\n color=\"secondary\"\n lineTruncation={2}\n wrap=\"wrap\"\n as=\"p\"\n >\n {this.description}\n </ds-text>\n ) : null}\n </div>\n {this.renderActions()}\n </div>\n </div>\n </div>\n\n {this.hasSectionSelector ? (\n <ds-menu\n id={this.sectionMenuId}\n class=\"bar-title__section-menu\"\n anchorId={this.sectionMenuTriggerId}\n menuLabel={this.sectionsAriaLabel}\n open={this.sectionMenuOpen}\n initialFocusVisible={this.sectionMenuInitialFocusVisible}\n sections={this.sectionMenuSections}\n onDsClose={this.closeSectionMenu}\n onDsSelect={this.handleSectionSelect}\n />\n ) : null}\n\n {this.showActionMenuTrigger ? (\n <ds-menu\n id={this.actionMenuId}\n class=\"bar-title__action-menu\"\n anchorId={this.actionMenuTriggerId}\n align=\"end\"\n menuLabel={this.actionsAriaLabel}\n open={this.actionMenuOpen}\n initialFocusVisible={this.actionMenuInitialFocusVisible}\n sections={this.actionMenuSections}\n onDsClose={this.closeActionMenu}\n onDsSelect={this.handleActionSelect}\n />\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as s,H as e,c as t,h as i,a as n,t as r}from"./index.js";import{g as a,i as o}from"./p-BQq26pt9.js";import{d}from"./p-a6qP60zb.js";import{d as c}from"./p-NzGRAPcF.js";import{d as l}from"./p-BFfLvMZd.js";import{d as h}from"./p-JPTkZ3Ji.js";import{d as b}from"./p-Asi9h3pa.js";import{d as v}from"./p-BHDkJmrC.js";import{d as f}from"./p-BhYWdbEp.js";import{d as u}from"./p-y4jhIkRc.js";import{d as p}from"./p-BGXqFq2C.js";function g(s,e,t){if(!s||!e){return{value:"",hideTabs:false}}if(s!==e&&!s.startsWith(`${e}/`)){return{value:"",hideTabs:false}}const i=s.slice(e.length);const n=i.startsWith("/")?i.slice(1).split("/")[0]:"";const r=a(t);if(!n){return{value:r[0]?.id??"",hideTabs:false}}const o=r.find((s=>s.id===n));if(o){return{value:o.id,hideTabs:false}}return{value:"",hideTabs:true}}function m(s,e){return s.length===0&&(e?.length??0)>0}function _(s,e){const t=[];let i=[];for(const n of s){if(o(n)){if(i.length>0){t.push({items:i});i=[]}continue}i.push({label:n.label,value:n.id,dot:n.dot,isSelected:n.id===e,isInactive:n.isInactive})}if(i.length>0){t.push({items:i})}return t}function y(s,e){return _(T(s),e)}function w(s,e,t,i=2){const n=s-e;if(t){return n>-i}return n>i}function x(s,e,t,i,n){if(s.length===0||e<=0)return 0;const r=C(s,s.length,i,n);if(r<=e)return s.length;const a=Math.max(0,e-t);let o=0;for(let e=1;e<=s.length;e++){const t=C(s,e,i,n);if(t>a)break;o=e}return o}function k(s){let e=s.length;while(e>0&&o(s[e-1])){e-=1}return s.slice(0,e)}function T(s){let e=0;while(e<s.length&&o(s[e])){e+=1}return s.slice(e)}function C(s,e,t,i){if(e<=0)return 0;const n=s.slice(0,e).reduce(((s,e)=>s+e),0);return i+n+t*Math.max(0,e-1)}const F="dsChromeTransitionStart";const S="dsChromeTransitionEnd";class E{constructor(){this.depth=0}enter(){this.depth+=1}exit(){this.depth=Math.max(0,this.depth-1)}get isActive(){return this.depth>0}}class M{constructor(){this.active=false}enter(){this.active=true}exit(){this.active=false}get isActive(){return this.active}}function A(s){let e=0;return{schedule(){if(e!==0)return;e=requestAnimationFrame((()=>{e=0;s()}))},cancel(){if(e!==0){cancelAnimationFrame(e);e=0}}}}function z(s){return s.detail?.source}function P(s){return s.detail?.phase}const D=()=>`.ds-control--lg.sc-ds-bar-nav,.ds-control--lg.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav,.ds-control--sm.sc-ds-bar-nav-h,.ds-control--sm.sc-ds-bar-nav,.ds-control--xs.sc-ds-bar-nav-h,.ds-control--xs.sc-ds-bar-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-nav-h,.ds-control--lg.sc-ds-bar-nav{--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-nav-h,.ds-control--md.sc-ds-bar-nav{--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-nav-h,.ds-control--sm.sc-ds-bar-nav{--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-nav-h,.ds-control--xs.sc-ds-bar-nav{--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-bar-nav{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-bar-nav{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-bar-nav{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-bar-nav{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-bar-nav{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-bar-nav{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-chrome-space--sm.sc-ds-bar-nav-h,.ds-chrome-space--sm.sc-ds-bar-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-bar-nav-h,.ds-chrome-space--md.sc-ds-bar-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-bar-nav-h,.ds-chrome-space--lg.sc-ds-bar-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-bar-nav-h,.ds-chrome-row.sc-ds-bar-nav,.ds-chrome-column.sc-ds-bar-nav-h,.ds-chrome-column.sc-ds-bar-nav,.ds-chrome-grid.sc-ds-bar-nav-h,.ds-chrome-grid.sc-ds-bar-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-bar-nav-h,.ds-chrome-row.sc-ds-bar-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-bar-nav-h,.ds-chrome-column.sc-ds-bar-nav{flex-direction:column}.ds-chrome-grid.sc-ds-bar-nav-h,.ds-chrome-grid.sc-ds-bar-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-bar-nav:root,.sc-ds-bar-nav-h,.ds-forced-colors-scope.sc-ds-bar-nav{--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-nav-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-nav-h,.ds-focus-ring.sc-ds-bar-nav,.ds-focus-ring-inset.sc-ds-bar-nav-h,.ds-focus-ring-inset.sc-ds-bar-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring.sc-ds-bar-nav: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-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{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-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-nav: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-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::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-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-nav:root,.sc-ds-bar-nav-h,.ds-forced-colors-scope.sc-ds-bar-nav{--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-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{position:relative;height:var(--dimension-size-600);border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-shell-app.sc-ds-bar-nav-h:not([gradient-preset='none']) .bar-nav.sc-ds-bar-nav,ds-shell-app:not([gradient-preset='none']) .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-shell-app.shell-app--paper-texture.sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-shell-app.shell-app--paper-texture .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__tabs-visible.sc-ds-bar-nav{flex:1;min-width:0;width:100%}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav>div.sc-ds-bar-nav{width:max-content}.bar-nav__tab-list.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content}.bar-nav__tab.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background-color:transparent;color:var(--_bar-nav-fg-secondary);cursor:default;position:relative;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.bar-nav__tab.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--ds-control-radius);background:transparent;pointer-events:none;cursor:inherit}@media (hover: hover) and (pointer: fine){.bar-nav__tab.sc-ds-bar-nav:hover::after{background:var(--_bar-nav-hover)}}.bar-nav__tab.sc-ds-bar-nav:active::after{background:var(--_bar-nav-pressed)}.bar-nav__tab--selected.sc-ds-bar-nav{color:var(--_bar-nav-fg-primary)}.bar-nav__tab-label.sc-ds-bar-nav{display:inline-flex;align-items:center;white-space:nowrap}.bar-nav__tab-divider.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--ds-control-height);padding-block:var(--ds-control-padding-inline);flex-shrink:0;pointer-events:none}.bar-nav__tab-divider-line.sc-ds-bar-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--_bar-nav-border)}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--ds-control-height);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_bar-nav-fg-primary);--ds-interaction-hover:var(--_bar-nav-hover);--ds-interaction-pressed:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}ds-text.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));-webkit-user-select:none;user-select:none}`;const H=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=t(this,"dsTabChange",7);this.navStyle="dashboard";this.tabs=[];this.value="";this.basePath="";this.currentUrl="";this.moreTabsLabel="More tabs";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.focusedTabId="";this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabListEl=null;this.probeTabListEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new M;this.panelToolsTransition=new M;this.overflowCoalescer=A((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const e=z(s);if(e==="panel-nav"){this.panelNavTransition.enter();return}if(e==="panel-tools"){const e=P(s)??"opening";if(e==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const e=z(s);if(e==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(e==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get renderedSelectableTabs(){const s=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return a(s)}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}syncFocusedTabId(s,e){if(e.some((e=>e.id===s&&!e.isInactive))){this.focusedTabId=s;return}const t=e.find((s=>!s.isInactive));this.focusedTabId=t?.id??""}digestTabsConfig(s){return s.map((s=>o(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncFocusedTabId(this.effectiveValue,this.renderedSelectableTabs);this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,e){if(!s){this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||e===undefined||e===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps();this.syncFocusedTabId(this.effectiveValue,a(this.resolvedTabs))}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-shell-app");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(F,this.onChromeTransitionStart);s.addEventListener(S,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(F,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(S,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(m(this.resolvedTabs,this.tabs)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let e=s.HOST_PROP_SYNC_BUDGET;const t=()=>{this.syncHostPropsIfNeeded();if(--e>0){requestAnimationFrame(t)}};queueMicrotask(t)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const e=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-e)}getTabsIntrinsicWidth(){return this.probeTabListEl?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=this.probeTabListEl;if(!s)return null;const e=Array.from(s.children);const t=e.map((s=>s.getBoundingClientRect().width));if(t.length===0||t.some((s=>s===0)))return null;const i=getComputedStyle(s);const n=parseFloat(i.columnGap||i.gap)||0;const r=t.reduce(((s,e)=>s+e),0);const a=n*Math.max(0,t.length-1);const o=Math.max(0,s.scrollWidth-r-a);return{itemWidths:t,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,e){const t=e.length>0;const i=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(e)!==this.digestTabsConfig(this.overflowTabs);if(i){this.visibleTabs=s}if(n){this.overflowTabs=e}if(t!==this.tabsCollapsed){this.tabsCollapsed=t;if(!t){this.menuOpen=false;this.menuTriggerActive=false}}this.syncFocusedTabId(this.effectiveValue,a(t?s:this.resolvedTabs))}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const e=this.getProbeTabMetrics();const t=this.getTabsIntrinsicWidth();if(!e||t===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const i=w(t,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!i){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=x(e.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),e.itemGap,e.listExtraWidth);const r=k(this.resolvedTabs.slice(0,n));const a=this.resolvedTabs.slice(r.length);this.setOverflowTabLayout(r,a);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const e=s.detail;if(e?.value!==undefined){this.selectTab(String(e.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuAfterClose(){if(!this.menuOpen)this.menuTriggerActive=false}incomingTabs(){return this.tabs??[]}applyHostProps(){const s=this.basePath;const e=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(e){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const e=this.incomingTabs();if(e.length===0){return}this.pendingSection=""}const t=this.incomingTabs();const i=this.digestTabsConfig(t)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=t;this.syncValueFromUrl();this.committedSection=s;if(i){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=y(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:e,hideTabs:t}=g(this.currentUrl,this.basePath,s);this.urlDerivedValue=e;this.hideTabsForDetailRoute=t}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=this.visibleTabListEl?.querySelector(`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}focusVisibleTab(s){this.focusedTabId=s;const e=this.visibleTabListEl?.querySelector(`[data-tab-id="${s}"]`);e?.focus({preventScroll:true})}focusLastVisibleTab(){const s=[...this.renderedSelectableTabs].reverse().find((s=>!s.isInactive));if(s)this.focusVisibleTab(s.id)}findEnabledVisibleTab(s,e){const t=this.renderedSelectableTabs;for(let i=s+e;i>=0&&i<t.length;i+=e){if(!t[i]?.isInactive)return i}return null}handleTabKeyDown(s){const e=this.renderedSelectableTabs;if(!e.length)return;const t=s.target?.getAttribute("data-tab-id");const i=t??this.focusedTabId;if(s.key==="Enter"||s.key===" "){const t=e.find((s=>s.id===i));if(!t||t.isInactive)return;s.preventDefault();this.selectTab(t.id);return}const n=e.findIndex((s=>s.id===i));if(n<0)return;let r;if(s.key==="ArrowRight"){r=this.findEnabledVisibleTab(n,1);if(r===null&&this.hasOverflowTabs){s.preventDefault();this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.();return}}else if(s.key==="ArrowLeft"){r=this.findEnabledVisibleTab(n,-1)}else if(s.key==="Home"){r=e.findIndex((s=>!s.isInactive))}else if(s.key==="End"){const s=[...e].reverse().findIndex((s=>!s.isInactive));r=s<0?null:e.length-1-s}else{return}if(r===null||r<0||r===n)return;s.preventDefault();this.focusVisibleTab(e[r].id)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuTriggerActive=true;this.menuOpen=true}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;this.focusLastVisibleTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}renderTabList(s,e){return i("div",{role:"tablist",class:"bar-nav__tab-list","aria-label":this.heading,ref:s=>{if(e){const e=s??null;if(e===this.probeTabListEl)return;this.probeTabListEl=e;if(e){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}}else{this.visibleTabListEl=s??null}},onKeyDown:e?undefined:s=>this.handleTabKeyDown(s),onFocusin:e?undefined:()=>{this.overflowRovingFocused=false}},s.map(((s,t)=>{if(o(s)){return i("div",{class:"bar-nav__tab-divider",key:`divider-${t}`,"aria-hidden":"true"},i("div",{class:"bar-nav__tab-divider-line"}))}const n=s.id===this.effectiveValue;return i("button",{key:s.id,type:"button",role:"tab","data-tab-id":s.id,class:{"bar-nav__tab":true,"bar-nav__tab--selected":n,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},"aria-selected":n?"true":"false","aria-disabled":s.isInactive?"true":undefined,"aria-controls":s.panelId??undefined,disabled:s.isInactive,tabIndex:!e&&!this.overflowRovingFocused&&s.id===this.focusedTabId?0:-1,onClick:()=>!e&&!s.isInactive&&this.selectTab(s.id),onFocus:()=>{if(!e)this.focusedTabId=s.id}},i("span",{class:{"bar-nav__tab-label":true,"ds-control-label-box":true,"ds-control-label-dot":!!s.dot,"bar-nav__tab-label--dot":!!s.dot}},i("ds-text",{as:"span",variant:"text-body-medium",emphasis:n,color:"inherit"},s.label),s.dot&&i("ds-badge",{class:"bar-nav__tab-dot ds-control-label-dot__badge",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))})))}render(){const s=this.basePath===""||this.committedSection===this.basePath;const e=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const t=this.basePath||"no-section";const r=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return i(n,{key:"81c10d4f14663f76bb8b905ce2d83402da943031"},i("header",{key:"32ea2428d587616498e83f8f236639baa77c63ea",class:{"bar-nav":true,"ds-control--md":true,"ds-chrome-row":true,"ds-chrome-space--md":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":e&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},e&&i("div",{key:"6455592322461dc0d3976b026092c14f2c4be569",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},i("div",{key:`probe-${t}`},this.renderTabList(this.resolvedTabs,true))),e&&this.tabLayoutCommitted&&r.length>0&&i("div",{key:"299c298a7fdb3b45d0dd6911b2a21e5500bfcf4b",class:"bar-nav__left"},i("div",{key:`visible-${t}`,class:"bar-nav__tabs-visible"},this.renderTabList(r,false))),e&&!this.tabLayoutCommitted&&i("div",{key:"24707cc9680ffdd10b54b38b0932f961b6d16875",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!e&&this.heading&&i("ds-text",{key:"d836c6ff49dd2a5ef91e85b34d1fb16dbeb7bd1a",class:"bar-nav__heading",lineTruncation:1,as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},this.heading),e&&this.hasOverflowTabs&&i("ds-button-unfilled",{key:"6346f4e2420270f4e0b1976d9424927cc360fb3a",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"ChevronDown",activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuTriggerActive,"aria-label":this.moreTabsLabel,onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),e&&this.hasOverflowTabs&&i("ds-menu",{key:"a783025008a130ebaf7d927088892e50829c3286",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:y(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose(),onDsAfterClose:()=>this.handleMenuAfterClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return D()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],moreTabsLabel:[1,"more-tabs-label"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],menuTriggerActive:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],focusedTabId:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);H.HOST_PROP_SYNC_BUDGET=8;H.INTRINSIC_WIDTH_RETRY_MAX=3;H.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;H.OVERFLOW_HYSTERESIS_PX=8;function O(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(r(s))){customElements.define(r(s),H)}break;case"ds-badge":if(!customElements.get(r(s))){d()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){c()}break;case"ds-icon":if(!customElements.get(r(s))){l()}break;case"ds-loader":if(!customElements.get(r(s))){h()}break;case"ds-menu":if(!customElements.get(r(s))){b()}break;case"ds-swatch-picker":if(!customElements.get(r(s))){v()}break;case"ds-switch":if(!customElements.get(r(s))){f()}break;case"ds-tag":if(!customElements.get(r(s))){u()}break;case"ds-text":if(!customElements.get(r(s))){p()}break}}))}O();export{H as B,E as C,F as a,S as b,A as c,O as d,z as r};
|
|
2
|
+
//# sourceMappingURL=p-DIEK54fV.js.map
|