@ds-mo/ui 14.18.0 → 14.19.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/README.md +7 -0
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +4 -3
- package/dist/agent.json +59 -22
- package/dist/angular/ds-filter-menu.d.ts +1 -1
- package/dist/angular/ds-filter-menu.js +3 -3
- package/dist/angular/ds-input.d.ts +1 -1
- package/dist/angular/ds-input.js +3 -3
- package/dist/angular/ds-menu.d.ts +1 -1
- package/dist/angular/ds-menu.js +3 -3
- package/dist/angular/ds-pagination.d.ts +1 -1
- package/dist/angular/ds-pagination.js +3 -3
- package/dist/angular/ds-panel-tool-header.d.ts +3 -8
- package/dist/angular/ds-panel-tools.d.ts +3 -8
- package/dist/angular/ds-select.d.ts +1 -1
- package/dist/angular/ds-select.js +3 -3
- package/dist/angular/ds-tooltip.d.ts +1 -1
- package/dist/angular/ds-tooltip.js +3 -3
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-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-overview.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-conversation-list.js.map +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-bubble.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-composer.js.map +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-paper-texture.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-scroll-overlay.js +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-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.js +1 -1
- package/dist/components/ds-table-saved-views.js +1 -1
- package/dist/components/ds-table-sort.js +1 -1
- package/dist/components/ds-table-toolbar.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-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/ds-typing-indicator.js.map +1 -1
- package/dist/components/p--CRAu9fJ.js +2 -0
- package/dist/components/{p-C6yLERx6.js → p-B1JRCDHS.js} +2 -2
- package/dist/components/p-BBG6Sswb.js +2 -0
- package/dist/components/{p-Drcl4zS9.js.map → p-BBG6Sswb.js.map} +1 -1
- package/dist/components/{p-Dd8VKdAO.js → p-BCOl1x0_.js} +2 -2
- package/dist/components/{p-C9StMCWg.js → p-BHVOiWz5.js} +2 -2
- package/dist/components/p-BNiuAMeh.js +2 -0
- package/dist/components/p-BNiuAMeh.js.map +1 -0
- package/dist/components/{p-DJ0GCCFa.js → p-BNkU9dcc.js} +2 -2
- package/dist/components/p-BPG0r_mC.js +2 -0
- package/dist/components/p-BPG0r_mC.js.map +1 -0
- package/dist/components/{p-DHzn7INS.js → p-BS0AbMNK.js} +2 -2
- package/dist/components/p-BUDAwJVV.js +2 -0
- package/dist/components/p-BUDAwJVV.js.map +1 -0
- package/dist/components/p-BZVWmzKf.js +2 -0
- package/dist/components/p-BZVWmzKf.js.map +1 -0
- package/dist/components/{p-CihNoe1M.js → p-B_jZIC9R.js} +2 -2
- package/dist/components/{p-CAJIARNW.js → p-Bbb9A3NV.js} +2 -2
- package/dist/components/{p-Dginv8PT.js → p-Bf7PZJPT.js} +2 -2
- package/dist/components/{p-D6P_1YrL.js → p-BhYS_Ump.js} +2 -2
- package/dist/components/p-BknXYAEc.js +2 -0
- package/dist/components/{p-9GuNIXuz.js.map → p-BknXYAEc.js.map} +1 -1
- package/dist/components/{p-BKx2ihnG.js → p-Bu3dOjpW.js} +2 -2
- package/dist/components/{p-BiBXCjjo.js → p-BxGQ3cRJ.js} +2 -2
- package/dist/components/{p-Dl3gciej.js → p-BysVBVQv.js} +2 -2
- package/dist/components/{p-CBa_6lqj.js → p-C-Y7gYgz.js} +2 -2
- package/dist/components/{p-9EQ3xLI1.js → p-C6R5Lft0.js} +2 -2
- package/dist/components/{p-DPR0TGGJ.js → p-C9gC4haA.js} +2 -2
- package/dist/components/{p-LHzBS95u.js → p-CAnnQL1F.js} +2 -2
- package/dist/components/p-CY4YFAT3.js +2 -0
- package/dist/components/p-CY4YFAT3.js.map +1 -0
- package/dist/components/{p-3WlVHGUe.js → p-Cg0kimXZ.js} +2 -2
- package/dist/components/{p-HZz5aJKz.js → p-CsBICYmt.js} +2 -2
- package/dist/components/p-CwjVgUqy.js +2 -0
- package/dist/components/p-CwjVgUqy.js.map +1 -0
- package/dist/components/p-D1eEgwcP.js +2 -0
- package/dist/components/p-D1eEgwcP.js.map +1 -0
- package/dist/components/{p-oCc3mz_c.js → p-D3fMaUJ3.js} +2 -2
- package/dist/components/p-D7R4yE2C.js +2 -0
- package/dist/components/{p-Ba7DaFkb.js.map → p-D7R4yE2C.js.map} +1 -1
- package/dist/components/{p-CHEt4mW8.js → p-DAvh38E4.js} +2 -2
- package/dist/components/{p-DPpHSIzS.js → p-DBue3ISk.js} +2 -2
- package/dist/components/{p-BdgoB2ef.js → p-DDgeXGbB.js} +2 -2
- package/dist/components/{p-hp_2W2Qy.js → p-DOUDRJbE.js} +2 -2
- package/dist/components/{p-Be-vZpWx.js → p-DUdOmSFR.js} +2 -2
- package/dist/components/p-DaAXY-XS.js +2 -0
- package/dist/components/p-DaAXY-XS.js.map +1 -0
- package/dist/components/{p-B9ZfoprK.js → p-DlYw4UGQ.js} +2 -2
- package/dist/components/p-DlYw4UGQ.js.map +1 -0
- package/dist/components/p-DtndC9f1.js +2 -0
- package/dist/components/p-DtndC9f1.js.map +1 -0
- package/dist/components/p-HB_cf_aR.js +2 -0
- package/dist/components/{p-BBmRD_S0.js.map → p-HB_cf_aR.js.map} +1 -1
- package/dist/components/{p-BTTxl3ro.js → p-ZpQBAwZC.js} +2 -2
- package/dist/components/p-ZpQBAwZC.js.map +1 -0
- package/dist/components/p-ag6Io-kL.js +2 -0
- package/dist/components/p-ag6Io-kL.js.map +1 -0
- package/dist/components/p-fg9EKoZp.js +2 -0
- package/dist/components/{p-DMaQkEYP.js.map → p-fg9EKoZp.js.map} +1 -1
- package/dist/components/p-iMuFgSoM.js +2 -0
- package/dist/components/p-iMuFgSoM.js.map +1 -0
- package/dist/components/{p-CbZ0RU2c.js → p-r8PMqlqm.js} +2 -2
- package/dist/components/{p-B145kX-i.js → p-uI6z53BE.js} +2 -2
- package/dist/docs/components.json +252 -37
- package/dist/lib/components/PanelTools/panel-tools-types.d.ts +12 -0
- package/dist/lib/shell/index.d.ts +1 -1
- package/dist/lib/shell/index.js.map +1 -1
- package/dist/lib/utils/anchored-position.d.ts +6 -2
- package/dist/mcp-data/registry/badge.json +7 -9
- package/dist/mcp-data/registry/banner.json +2 -2
- package/dist/mcp-data/registry/bar-action.json +2 -2
- package/dist/mcp-data/registry/button-unfilled.json +1 -1
- package/dist/mcp-data/registry/conversation-list.json +2 -2
- package/dist/mcp-data/registry/filter-menu.json +21 -6
- package/dist/mcp-data/registry/input.json +23 -3
- package/dist/mcp-data/registry/menu.json +22 -4
- package/dist/mcp-data/registry/message-composer.json +2 -2
- package/dist/mcp-data/registry/pagination.json +31 -10
- package/dist/mcp-data/registry/panel-nav.json +1 -1
- package/dist/mcp-data/registry/panel-tool-header.json +3 -3
- package/dist/mcp-data/registry/panel-tools.json +5 -4
- package/dist/mcp-data/registry/registry.json +58 -21
- package/dist/mcp-data/registry/select.json +17 -3
- package/dist/mcp-data/registry/shell-app.json +3 -2
- package/dist/mcp-data/registry/table.json +21 -1
- package/dist/mcp-data/registry/toast.json +2 -2
- package/dist/mcp-data/registry/tooltip.json +20 -3
- package/dist/mcp-data/registry/typing-indicator.json +4 -4
- package/dist/react/ds-panel-tool-header.d.ts +2 -5
- package/dist/react/ds-panel-tools.d.ts +2 -5
- package/dist/types/components/Badge/Badge.d.ts +2 -16
- package/dist/types/components/Banner/Banner.d.ts +0 -1
- package/dist/types/components/BarAction/BarAction.d.ts +0 -7
- package/dist/types/components/ConversationList/ConversationList.d.ts +1 -0
- package/dist/types/components/FilterMenu/FilterMenu.d.ts +5 -5
- package/dist/types/components/Input/Input.d.ts +7 -0
- package/dist/types/components/Menu/Menu.d.ts +3 -4
- package/dist/types/components/MessageComposer/MessageComposer.d.ts +0 -3
- package/dist/types/components/Pagination/Pagination.d.ts +2 -0
- package/dist/types/components/Pagination/pagination-types.d.ts +2 -0
- package/dist/types/components/PanelToolHeader/PanelToolHeader.d.ts +2 -5
- package/dist/types/components/PanelTools/PanelTools.d.ts +2 -5
- package/dist/types/components/PanelTools/panel-tools-types.d.ts +12 -0
- package/dist/types/components/Select/Select.d.ts +3 -0
- package/dist/types/components/Table/Table.d.ts +1 -13
- package/dist/types/components/Table/table-body-renderer.d.ts +36 -0
- package/dist/types/components/Table/table-load-view.d.ts +17 -0
- package/dist/types/components/Table/table-row-view.d.ts +26 -0
- package/dist/types/components/Table/table-skeleton-view.d.ts +12 -0
- package/dist/types/components/Tooltip/Tooltip.d.ts +3 -0
- package/dist/types/components.d.ts +72 -23
- package/dist/types/shell/index.d.ts +1 -1
- package/dist/types/utils/anchored-overlay-boundary.d.ts +14 -0
- package/dist/types/utils/anchored-overlay-interaction-controller.d.ts +26 -0
- package/dist/types/utils/anchored-position-controller.d.ts +14 -0
- package/dist/types/utils/anchored-position.d.ts +6 -2
- package/dist/types/utils/select-controller.d.ts +1 -0
- package/dist/vue/ds-filter-menu.js +1 -0
- package/dist/vue/ds-input.js +1 -0
- package/dist/vue/ds-menu.js +1 -0
- package/dist/vue/ds-pagination.js +1 -0
- package/dist/vue/ds-select.js +1 -0
- package/dist/vue/ds-tooltip.js +1 -0
- package/package.json +4 -1
- package/dist/components/p-9GuNIXuz.js +0 -2
- package/dist/components/p-B9ZfoprK.js.map +0 -1
- package/dist/components/p-BBmRD_S0.js +0 -2
- package/dist/components/p-BTTxl3ro.js.map +0 -1
- package/dist/components/p-Ba7DaFkb.js +0 -2
- package/dist/components/p-BcNYvLMi.js +0 -2
- package/dist/components/p-BcNYvLMi.js.map +0 -1
- package/dist/components/p-CI5Ce8VF.js +0 -2
- package/dist/components/p-CI5Ce8VF.js.map +0 -1
- package/dist/components/p-Cgm7YMLw.js +0 -2
- package/dist/components/p-Cgm7YMLw.js.map +0 -1
- package/dist/components/p-Cj5Hkt6Y.js +0 -2
- package/dist/components/p-Cj5Hkt6Y.js.map +0 -1
- package/dist/components/p-DC_8dK55.js +0 -2
- package/dist/components/p-DC_8dK55.js.map +0 -1
- package/dist/components/p-DKY3IJqt.js +0 -2
- package/dist/components/p-DKY3IJqt.js.map +0 -1
- package/dist/components/p-DMaQkEYP.js +0 -2
- package/dist/components/p-DQyvAN44.js +0 -2
- package/dist/components/p-DQyvAN44.js.map +0 -1
- package/dist/components/p-DaxKVtZG.js +0 -2
- package/dist/components/p-DbJahF86.js +0 -2
- package/dist/components/p-DbJahF86.js.map +0 -1
- package/dist/components/p-DhKvqh5G.js +0 -2
- package/dist/components/p-DhKvqh5G.js.map +0 -1
- package/dist/components/p-Drcl4zS9.js +0 -2
- package/dist/components/p-DzPw6aDK.js +0 -2
- package/dist/components/p-DzPw6aDK.js.map +0 -1
- package/dist/components/p-jk2-y5dH.js +0 -2
- package/dist/components/p-jk2-y5dH.js.map +0 -1
- package/dist/types/shell/badge-gradient-ring.d.ts +0 -28
- /package/dist/components/{p-DaxKVtZG.js.map → p--CRAu9fJ.js.map} +0 -0
- /package/dist/components/{p-C6yLERx6.js.map → p-B1JRCDHS.js.map} +0 -0
- /package/dist/components/{p-Dd8VKdAO.js.map → p-BCOl1x0_.js.map} +0 -0
- /package/dist/components/{p-C9StMCWg.js.map → p-BHVOiWz5.js.map} +0 -0
- /package/dist/components/{p-DJ0GCCFa.js.map → p-BNkU9dcc.js.map} +0 -0
- /package/dist/components/{p-DHzn7INS.js.map → p-BS0AbMNK.js.map} +0 -0
- /package/dist/components/{p-CihNoe1M.js.map → p-B_jZIC9R.js.map} +0 -0
- /package/dist/components/{p-CAJIARNW.js.map → p-Bbb9A3NV.js.map} +0 -0
- /package/dist/components/{p-Dginv8PT.js.map → p-Bf7PZJPT.js.map} +0 -0
- /package/dist/components/{p-D6P_1YrL.js.map → p-BhYS_Ump.js.map} +0 -0
- /package/dist/components/{p-BKx2ihnG.js.map → p-Bu3dOjpW.js.map} +0 -0
- /package/dist/components/{p-BiBXCjjo.js.map → p-BxGQ3cRJ.js.map} +0 -0
- /package/dist/components/{p-Dl3gciej.js.map → p-BysVBVQv.js.map} +0 -0
- /package/dist/components/{p-CBa_6lqj.js.map → p-C-Y7gYgz.js.map} +0 -0
- /package/dist/components/{p-9EQ3xLI1.js.map → p-C6R5Lft0.js.map} +0 -0
- /package/dist/components/{p-DPR0TGGJ.js.map → p-C9gC4haA.js.map} +0 -0
- /package/dist/components/{p-LHzBS95u.js.map → p-CAnnQL1F.js.map} +0 -0
- /package/dist/components/{p-3WlVHGUe.js.map → p-Cg0kimXZ.js.map} +0 -0
- /package/dist/components/{p-HZz5aJKz.js.map → p-CsBICYmt.js.map} +0 -0
- /package/dist/components/{p-oCc3mz_c.js.map → p-D3fMaUJ3.js.map} +0 -0
- /package/dist/components/{p-CHEt4mW8.js.map → p-DAvh38E4.js.map} +0 -0
- /package/dist/components/{p-DPpHSIzS.js.map → p-DBue3ISk.js.map} +0 -0
- /package/dist/components/{p-BdgoB2ef.js.map → p-DDgeXGbB.js.map} +0 -0
- /package/dist/components/{p-hp_2W2Qy.js.map → p-DOUDRJbE.js.map} +0 -0
- /package/dist/components/{p-Be-vZpWx.js.map → p-DUdOmSFR.js.map} +0 -0
- /package/dist/components/{p-CbZ0RU2c.js.map → p-r8PMqlqm.js.map} +0 -0
- /package/dist/components/{p-B145kX-i.js.map → p-uI6z53BE.js.map} +0 -0
|
@@ -1,2 +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-DbJahF86.js";import{d as c}from"./p-DC_8dK55.js";import{d as l}from"./p-BFfLvMZd.js";import{d as h}from"./p-JPTkZ3Ji.js";import{d as b}from"./p-DKY3IJqt.js";import{d as v}from"./p-Dl3gciej.js";import{d as f}from"./p-HZz5aJKz.js";import{d as u}from"./p-3WlVHGUe.js";import{d as p}from"./p-LHzBS95u.js";import{d as g}from"./p-Cj5Hkt6Y.js";function m(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 _(s,e){return s.length===0&&(e?.length??0)>0}function y(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 w(s,e){return y(C(s),e)}function x(s,e,t,i=2){const n=s-e;if(t){return n>-i}return n>i}function k(s,e,t,i,n){if(s.length===0||e<=0)return 0;const r=F(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=F(s,e,i,n);if(t>a)break;o=e}return o}function T(s){let e=s.length;while(e>0&&o(s[e-1])){e-=1}return s.slice(0,e)}function C(s){let e=0;while(e<s.length&&o(s[e])){e+=1}return s.slice(e)}function F(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 S="dsChromeTransitionStart";const D="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 H{constructor(){this.active=false}enter(){this.active=true}exit(){this.active=false}get isActive(){return this.active}}function M(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 j(s){return s.detail?.phase}const A=()=>`.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 O=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 H;this.panelToolsTransition=new H;this.overflowCoalescer=M((()=>{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=j(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(S,this.onChromeTransitionStart);s.addEventListener(D,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(S,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(D,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(_(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=x(t,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!i){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=k(e.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),e.itemGap,e.listExtraWidth);const r=T(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=w(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}=m(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:"badde6cdfb168882a9cd8dee34a3136739bddc90"},i("header",{key:"85d564bd957f74174e9a57688e65af81d6ef8de0",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:"f08efec3bc9eea84cec3315ec8835e054cc153ad",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:"d9e66e52659dbd9f64c754da43558d59cb9384a6",class:"bar-nav__left"},i("div",{key:`visible-${t}`,class:"bar-nav__tabs-visible"},this.renderTabList(r,false))),e&&!this.tabLayoutCommitted&&i("div",{key:"80b004ed6f617177545ceed9f299d2df12a8ebf6",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!e&&this.heading&&i("ds-text",{key:"24affadc3697fc11f008a1cbdcdfb01f4f54c810",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:"024a86e6332e036ecd497e20daafb054220d6412",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:"07ad6aadfab8c26fa94b4bab6d52bded08937d6d",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:w(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 A()}},[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}]}]);O.HOST_PROP_SYNC_BUDGET=8;O.INTRINSIC_WIDTH_RETRY_MAX=3;O.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;O.OVERFLOW_HYSTERESIS_PX=8;function L(){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","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(r(s))){customElements.define(r(s),O)}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;case"ds-tooltip":if(!customElements.get(r(s))){g()}break}}))}L();export{O as B,E as C,S as a,D as b,M as c,L as d,z as r};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
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-BUDAwJVV.js";import{d as c}from"./p-ag6Io-kL.js";import{d as l}from"./p-BFfLvMZd.js";import{d as h}from"./p-JPTkZ3Ji.js";import{d as b}from"./p-BZVWmzKf.js";import{d as v}from"./p-BysVBVQv.js";import{d as f}from"./p-CsBICYmt.js";import{d as u}from"./p-Cg0kimXZ.js";import{d as p}from"./p-CAnnQL1F.js";import{d as g}from"./p-iMuFgSoM.js";function m(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 _(s,e){return s.length===0&&(e?.length??0)>0}function y(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 w(s,e){return y(T(s),e)}function x(s,e,t,i=2){const n=s-e;if(t){return n>-i}return n>i}function k(s,e,t,i,n){if(s.length===0||e<=0)return 0;const r=F(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=F(s,e,i,n);if(t>a)break;o=e}return o}function C(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 F(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 S="dsChromeTransitionStart";const M="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 A{constructor(){this.active=false}enter(){this.active=true}exit(){this.active=false}get isActive(){return this.active}}function V(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 D(s){return s.detail?.phase}const L=()=>`.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 O=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 A;this.panelToolsTransition=new A;this.overflowCoalescer=V((()=>{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=D(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(S,this.onChromeTransitionStart);s.addEventListener(M,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(S,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(M,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(_(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=x(t,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!i){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=k(e.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),e.itemGap,e.listExtraWidth);const r=C(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=w(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}=m(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:"c83d13a900976ec752d315a3a1201d9c76bbb0fb"},i("header",{key:"d165a0cdcab7cbbad8c9d444c8f49674be26d306",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:"a62349409c326189d0c6280c04a895dc9eb666be",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:"0d6ccede0c0f00529757fff0515467691f5ede3c",class:"bar-nav__left"},i("div",{key:`visible-${t}`,class:"bar-nav__tabs-visible"},this.renderTabList(r,false))),e&&!this.tabLayoutCommitted&&i("div",{key:"556dd2a23906e409fb79ea3aae2c90f393450c29",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!e&&this.heading&&i("ds-text",{key:"b9b7562ad21367efc1ed228def20e24f765648f1",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:"c759d6c043bc463db20b582dea9399416d6afe28",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:"786ec950f56672c313be24376abd232886c5fd96",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:w(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 L()}},[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}]}]);O.HOST_PROP_SYNC_BUDGET=8;O.INTRINSIC_WIDTH_RETRY_MAX=3;O.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;O.OVERFLOW_HYSTERESIS_PX=8;function H(){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","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(r(s))){customElements.define(r(s),O)}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;case"ds-tooltip":if(!customElements.get(r(s))){g()}break}}))}H();export{O as B,E as C,S as a,M as b,V as c,H as d,z as r};
|
|
2
|
+
//# sourceMappingURL=p-BS0AbMNK.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as e,H as a,h as r,a as d,t as o}from"./index.js";import{d as n}from"./p-CAnnQL1F.js";const t=()=>`.ds-visually-hidden.sc-ds-badge-h,.ds-visually-hidden.sc-ds-badge{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@media (forced-colors: active){.sc-ds-badge:root,.sc-ds-badge-h,.ds-forced-colors-scope.sc-ds-badge{--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-badge-h{display:inline-flex;align-items:center;justify-content:center;container-name:ds-badge-gradient;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018);--_badge-gradient-context:var(--ds-shell-gradient-context, flat)}.badge--force-gradient-background.sc-ds-badge-h{--_badge-gradient-context:gradient}.badge--force-flat-background.sc-ds-badge-h{--_badge-gradient-context:flat}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--no-ring.sc-ds-badge-h{--_badge-ring-width:0}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:auto;min-width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-half)}@container ds-badge-gradient style(--_badge-gradient-context: gradient){.badge__mark.badge__mark{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge__mark::before,.badge__mark::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite:exclude}.badge__mark::before{z-index:-2;background-color:var(--_badge-ring)}.badge__mark::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}}@media (forced-colors: active){.badge__mark.sc-ds-badge{color:var(--ds-forced-color-on-selected);background:var(--ds-forced-color-selected);box-shadow:none;outline:var(--_badge-ring-width) solid var(--ds-forced-color-surface)}.badge__mark.sc-ds-badge::before,.badge__mark.sc-ds-badge::after{display:none}}`;const s={primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",faint:"var(--color-background-faint-neutral)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",translucent:"var(--color-translucent-translucent)",inverted:"var(--color-inverted-background)",media:"var(--color-media-background)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const i=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="primary";this.hasRing=true}render(){const e=this.variant==="dot";if(!e&&this.count<=0)return r(d,{style:{display:"none"}});const a=this.count>this.max?`${this.max}+`:String(this.count);const o=this.background??s[this.surface];return r(d,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--no-ring":!this.hasRing,"badge--force-gradient-background":this.gradientBackground===true,"badge--force-flat-background":this.gradientBackground===false},style:{"--_badge-ring":o}},r("span",{class:"badge__mark","aria-hidden":"true"},!e&&r("ds-text",{as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a)),this.label&&r("span",{class:"badge__a11y ds-visually-hidden"},this.label))}static get style(){return t()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],hasRing:[4,"has-ring"],gradientBackground:[516,"gradient-background"],label:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-badge","ds-text"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(o(e))){customElements.define(o(e),i)}break;case"ds-text":if(!customElements.get(o(e))){n()}break}}))}c();export{i as B,c as d};
|
|
2
|
+
//# sourceMappingURL=p-BUDAwJVV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["badgeCss","SURFACE_RING","primary","secondary","faint","medium","bold","strong","translucent","inverted","media","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","hasRing","render","isDot","h","Host","style","display","String","ring","background","class","badge","gradientBackground","as","emphasis","color","label"],"sources":["src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n container-name: ds-badge-gradient;\n pointer-events: none;\n vertical-align: middle;\n\n --_badge-bg: var(--color-background-bold-brand);\n --_badge-fg: var(--color-foreground-on-bold-background-primary);\n --_badge-ring: var(--color-background-secondary);\n --_badge-ring-width: var(--dimension-stroke-width-018);\n --_badge-gradient-context: var(--ds-shell-gradient-context, flat);\n}\n\n:host(.badge--force-gradient-background) {\n --_badge-gradient-context: gradient;\n}\n\n:host(.badge--force-flat-background) {\n --_badge-gradient-context: flat;\n}\n\n.badge__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n color: var(--_badge-fg);\n background: var(--_badge-bg);\n box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n --_badge-ring-width: 0;\n}\n\n\n:host(.badge--dot) .badge__mark {\n width: var(--dimension-size-075);\n height: var(--dimension-size-075);\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n width: auto;\n min-width: var(--dimension-size-150);\n height: var(--dimension-size-150);\n padding: 0 var(--dimension-space-025);\n border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n@container ds-badge-gradient style(--_badge-gradient-context: gradient) {\n /* Match the scoped base rule's specificity; Stencil does not yet scope style-query selectors. */\n .badge__mark.badge__mark {\n position: relative;\n z-index: 0;\n box-shadow: none;\n isolation: isolate;\n }\n\n .badge__mark::before,\n .badge__mark::after {\n content: '';\n position: absolute;\n inset: calc(-1 * var(--_badge-ring-width));\n border-radius: inherit;\n box-sizing: border-box;\n padding: var(--_badge-ring-width);\n pointer-events: none;\n /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* stylelint-enable color-no-hex */\n mask-composite: exclude;\n }\n\n .badge__mark::before {\n z-index: -2;\n background-color: var(--_badge-ring);\n }\n\n .badge__mark::after {\n z-index: -1;\n background-image: var(--ds-shell-gradient-image, none);\n background-size: var(--ds-shell-gradient-size, auto);\n background-position: 0 0;\n background-repeat: no-repeat;\n background-attachment: fixed;\n opacity: var(--ds-shell-gradient-opacity, 1);\n }\n}\n\n@media (forced-colors: active) {\n .badge__mark {\n color: var(--ds-forced-color-on-selected);\n background: var(--ds-forced-color-selected);\n box-shadow: none;\n outline: var(--_badge-ring-width) solid var(--ds-forced-color-surface);\n }\n\n .badge__mark::before,\n .badge__mark::after {\n display: none;\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n | 'primary'\n | 'secondary'\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'navigation'\n | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n primary: 'var(--color-background-primary)',\n secondary: 'var(--color-background-secondary)',\n faint: 'var(--color-background-faint-neutral)',\n medium: 'var(--color-background-medium-neutral)',\n bold: 'var(--color-background-bold-neutral)',\n strong: 'var(--color-background-strong-neutral)',\n translucent: 'var(--color-translucent-translucent)',\n inverted: 'var(--color-inverted-background)',\n media: 'var(--color-media-background)',\n navigation: 'var(--color-navigation-background)',\n 'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n tag: 'ds-badge',\n styleUrl: 'Badge.css',\n scoped: true,\n})\nexport class Badge {\n /** Render as a compact counter or notification dot. */\n @Prop() variant: BadgeVariant = 'counter';\n\n /** Count shown for counter badges. Count 0 hides the badge. */\n @Prop() count: number = 0;\n\n /** Highest count shown before compacting to \"{max}+\". */\n @Prop() max: number = 9;\n\n /** Immediate backing surface matched by the ring around either variant. */\n @Prop() surface: BadgeSurface = 'primary';\n\n /** Direct ring background override for component-local surfaces. */\n @Prop() background: string | undefined;\n\n /** Show the separation ring when the badge overlaps an icon or other content. */\n @Prop() hasRing: boolean = true;\n\n /**\n * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n * `box-shadow`. Omit to inherit ShellApp context; set true or false to override.\n *\n * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n * unknown `on*` member down the event-listener path during attribute\n * reflection, calling addEventListener with a non-listener and throwing.\n */\n @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground?: boolean;\n\n /** Contextual supplemental text. Omit when the owner hides the badge from assistive technology. */\n @Prop() label: string | undefined;\n\n render() {\n const isDot = this.variant === 'dot';\n\n if (!isDot && this.count <= 0) return <Host style={{ display: 'none' }} />;\n\n const display = this.count > this.max ? `${this.max}+` : String(this.count);\n const ring = this.background ?? SURFACE_RING[this.surface];\n\n return (\n <Host\n class={{\n badge: true,\n 'badge--counter': !isDot,\n 'badge--dot': isDot,\n 'badge--no-ring': !this.hasRing,\n 'badge--force-gradient-background': this.gradientBackground === true,\n 'badge--force-flat-background': this.gradientBackground === false,\n }}\n style={{ '--_badge-ring': ring }}\n >\n <span class=\"badge__mark\" aria-hidden=\"true\">\n {!isDot && (\n <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n {display}\n </ds-text>\n )}\n </span>\n {this.label && <span class=\"badge__a11y ds-visually-hidden\">{this.label}</span>}\n </Host>\n );\n }\n}\n"],"mappings":"+FAAA,MAAMA,EAAW,IAAM,k8FCgBvB,MAAMC,EAA6C,CACjDC,QAAS,kCACTC,UAAW,oCACXC,MAAO,wCACPC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,YAAa,uCACbC,SAAU,mCACVC,MAAO,gCACPC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAOUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAI,QAAwB,UAMxBJ,KAAAK,QAAmB,IA8C5B,CA/BC,MAAAC,GACE,MAAMC,EAAQP,KAAKC,UAAY,MAE/B,IAAKM,GAASP,KAAKE,OAAS,EAAG,OAAOM,EAACC,EAAI,CAACC,MAAO,CAAEC,QAAS,UAE9D,MAAMA,EAAUX,KAAKE,MAAQF,KAAKG,IAAM,GAAGH,KAAKG,OAASS,OAAOZ,KAAKE,OACrE,MAAMW,EAAOb,KAAKc,YAAc9B,EAAagB,KAAKI,SAElD,OACEI,EAACC,EAAI,CACHM,MAAO,CACLC,MAAO,KACP,kBAAmBT,EACnB,aAAcA,EACd,kBAAmBP,KAAKK,QACxB,mCAAoCL,KAAKiB,qBAAuB,KAChE,+BAAgCjB,KAAKiB,qBAAuB,OAE9DP,MAAO,CAAE,gBAAiBG,IAE1BL,EAAA,QAAMO,MAAM,cAAa,cAAa,SAClCR,GACAC,EAAA,WAASU,GAAG,OAAOjB,QAAQ,eAAekB,SAAQ,KAACC,MAAM,WACtDT,IAINX,KAAKqB,OAASb,EAAA,QAAMO,MAAM,kCAAkCf,KAAKqB,O","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as e,H as i,c as n,h as s,a as o,t}from"./index.js";import{A as r,r as c,c as d}from"./p-CY4YFAT3.js";import{c as a,r as l,A as u}from"./p-D1eEgwcP.js";import{d as h}from"./p-BUDAwJVV.js";import{d as m}from"./p-BFfLvMZd.js";import{d as f}from"./p-BysVBVQv.js";import{d as p}from"./p-CsBICYmt.js";import{d as v}from"./p-Cg0kimXZ.js";import{d as g}from"./p-CAnnQL1F.js";import{a as b,b as x,T as w}from"./p-DFQ9mcbK.js";import{r as _}from"./p-BMc0DE59.js";import{a as y,C as k}from"./p-CuwopElg.js";function C(e){return"variant"in e&&e.variant==="swatch-picker"}function P(e){return C(e)}function A(e){return e.map((e=>{if(C(e)){return{...e,...e.options?{options:e.options.map((e=>({...e})))}:{},...e.sections?{sections:e.sections.map((e=>({...e,options:e.options.map((e=>({...e})))})))}:{}}}return{...e,items:e.items.map((e=>({...e})))}}))}function z(e,i){if(!e[i]?.reorderable)return null;let n=i;while(n>0&&e[n-1]?.reorderable)n-=1;let s=i;while(s<e.length-1&&e[s+1]?.reorderable)s+=1;return{start:n,end:s}}function I(e,i,n){const s=z(e,i);if(!s)return null;const o=Math.min(Math.max(n,s.start),s.end+1);let t=o;if(i<t)t-=1;if(t===i||t<s.start||t>s.end)return null;const r=[...e];const[c]=r.splice(i,1);r.splice(t,0,c);return r}function T(e,i,n){if(n===0)return null;return I(e,i,i+(n<0?n:n+1))}function M(e,i){let n=i;for(let i=0;i<e.length;i+=1){const s=e[i];if(P(s))continue;if(n<s.items.length){return{sectionIndex:i,itemIndex:n,items:s.items}}n-=s.items.length}return null}function D(e,i,n,s){const o=e[i];if(!o)return null;const t=n.indexOf(o);if(t<0){const e=o.value;const t=e?n.findIndex((i=>i.value===e)):-1;if(t<0)return null;return{item:o,fromIndex:i,toIndex:t,sectionIndex:s,items:n}}return{item:o,fromIndex:i,toIndex:t,sectionIndex:s,items:n}}const O=()=>`@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--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-menu-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-menu-h,.ds-focus-ring.sc-ds-menu,.ds-focus-ring-inset.sc-ds-menu-h,.ds-focus-ring-inset.sc-ds-menu{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-menu-h:focus-visible,.ds-focus-ring.sc-ds-menu: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-menu-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu{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-menu-h:focus-visible,.ds-focus-ring-inset.sc-ds-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-menu: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-menu-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::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-menu-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--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}}@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--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-menu-h,.ds-interaction-fill.sc-ds-menu{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-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::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-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-menu-h::after,.ds-interaction-fill--grouped.sc-ds-menu::after,.ds-interaction-fill--grouped.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-menu-h,.ds-interaction-fill--grouped.sc-ds-menu{--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-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-menu-h,.ds-interaction-fill--on-faint.sc-ds-menu{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-translucent.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-inverted.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-media.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--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-menu-h::after,.ds-interaction-fill.sc-ds-menu::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-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::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-menu-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--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-menu-h,.ds-control-inactive.sc-ds-menu{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-menu-h,.ds-control-inactive.sc-ds-menu{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-menu,.ds-control--lg.sc-ds-menu-h,.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu,.ds-control--sm.sc-ds-menu-h,.ds-control--sm.sc-ds-menu,.ds-control--xs.sc-ds-menu-h,.ds-control--xs.sc-ds-menu{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-menu-h,.ds-control--lg.sc-ds-menu{--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-menu-h,.ds-control--md.sc-ds-menu{--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-menu-h,.ds-control--sm.sc-ds-menu{--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-menu-h,.ds-control--xs.sc-ds-menu{--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-space--sm.sc-ds-menu-h,.ds-chrome-space--sm.sc-ds-menu{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-menu-h,.ds-chrome-space--md.sc-ds-menu{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-menu-h,.ds-chrome-space--lg.sc-ds-menu{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-menu-h,.ds-chrome-row.sc-ds-menu,.ds-chrome-column.sc-ds-menu-h,.ds-chrome-column.sc-ds-menu,.ds-chrome-grid.sc-ds-menu-h,.ds-chrome-grid.sc-ds-menu{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-menu-h,.ds-chrome-row.sc-ds-menu{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-menu-h,.ds-chrome-column.sc-ds-menu{flex-direction:column}.ds-chrome-grid.sc-ds-menu-h,.ds-chrome-grid.sc-ds-menu{display:grid;align-items:center}.ds-control-frame.sc-ds-menu{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-menu{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-menu{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-menu{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-menu{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-menu{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-empty-region.sc-ds-menu{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-menu{padding:var(--dimension-space-200)}.sc-ds-menu:where(.ds-text-decoration,.ds-text-action).sc-ds-menu{text-decoration-color:var(--ds-text-decoration-color, var(--color-foreground-tertiary));text-decoration-thickness:var(--ds-text-decoration-thickness, var(--dimension-stroke-width-012));text-underline-offset:var(--ds-text-decoration-offset, var(--dimension-space-025))}.ds-text-action.sc-ds-menu{--ds-text-action-foreground:var(--color-foreground-bold-brand);--ds-text-decoration-color:var(--ds-text-action-foreground);color:var(--ds-text-action-foreground);text-decoration-line:none}.ds-text-action--on-medium.sc-ds-menu{--ds-text-action-foreground:var(--color-foreground-on-medium-background-primary);--ds-text-decoration-color:var(--color-foreground-on-medium-background-secondary);text-decoration-line:underline}.ds-text-action--on-strong.sc-ds-menu{--ds-text-action-foreground:var(--color-foreground-on-strong-background-primary);--ds-text-decoration-color:var(--color-foreground-on-strong-background-secondary);text-decoration-line:underline}.ds-text-action--on-bold.sc-ds-menu{--ds-text-action-foreground:var(--color-foreground-on-bold-background-primary);--ds-text-decoration-color:var(--color-foreground-on-bold-background-secondary);text-decoration-line:underline}@media (hover: hover) and (pointer: fine){.ds-text-action.sc-ds-menu:hover{text-decoration-line:underline}}@media (forced-colors: active){.ds-text-action.sc-ds-menu{text-decoration-line:underline;text-decoration-color:currentcolor}}.ds-choice-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--ds-choice-popup-min-inline-size, var(--dimension-menu-width-xs));max-width:min(var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)));max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);color:var(--color-foreground-secondary);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-menu{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-menu{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-menu{opacity:0}}.ds-choice-list.sc-ds-menu{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-menu{text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-section--headed-after-first.sc-ds-menu{margin-block-start:var(--dimension-space-050)}.ds-choice-item.sc-ds-menu{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-menu:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-menu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-menu{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-menu,.ds-choice-item__suffix.sc-ds-menu{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));pointer-events:none}.ds-choice-item.ds-interaction-fill--selected.sc-ds-menu .ds-choice-item__icon.sc-ds-menu{color:var(--color-foreground-primary)}.ds-choice-item__tag.sc-ds-menu{flex-shrink:0;pointer-events:none}.ds-choice-empty.sc-ds-menu,.ds-choice-loading.sc-ds-menu{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-menu{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-menu::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-menu{display:flex;align-items:center;justify-content:space-between;column-gap:var(--dimension-space-050);box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-menu,.ds-choice-footer__summary-measure.sc-ds-menu,.ds-choice-footer__clear.sc-ds-menu ds-text.sc-ds-menu,.ds-choice-footer__action.sc-ds-menu ds-text.sc-ds-menu{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__summary.sc-ds-menu,.ds-choice-footer__summary-measure.sc-ds-menu,.ds-choice-footer__clear.sc-ds-menu,.ds-choice-footer__action.sc-ds-menu{white-space:nowrap}.ds-choice-footer__summary-measure.sc-ds-menu{position:absolute;visibility:hidden;pointer-events:none}.ds-choice-footer__clear.sc-ds-menu,.ds-choice-footer__action.sc-ds-menu{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;cursor:default}@media (forced-colors: active){.ds-choice-popup.sc-ds-menu{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.ds-choice-popup.sc-ds-menu::after{box-shadow:none}.ds-choice-section--divided.sc-ds-menu{border-bottom-color:var(--ds-forced-color-content)}.ds-choice-footer.sc-ds-menu::before{background-color:var(--ds-forced-color-content)}}.ds-visually-hidden.sc-ds-menu-h,.ds-visually-hidden.sc-ds-menu{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@media (forced-colors: active){.sc-ds-menu:root,.sc-ds-menu-h,.ds-forced-colors-scope.sc-ds-menu{--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}}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__dot-box.sc-ds-menu{display: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));pointer-events:none}.menu-item__switch.sc-ds-menu{flex-shrink:0;margin-inline-start:calc( var(--dimension-space-100) - var(--ds-control-gap, var(--dimension-space-050)) )}.menu-item.sc-ds-menu>.menu-item__handle.sc-ds-menu{pointer-events:auto;cursor:grab;touch-action:none}.menu-item.sc-ds-menu>.menu-item__handle.sc-ds-menu:active,.menu-item--dragging.sc-ds-menu>.menu-item__handle.sc-ds-menu{cursor:grabbing}.menu-item--dragging.sc-ds-menu{opacity:var(--effect-opacity-medium)}.menu-item__drop-rail.sc-ds-menu{position:absolute;z-index:var(--dimension-z-index-raised);inset-inline:var(--dimension-space-050);block-size:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-half);background:var(--color-border-bold-brand);pointer-events:none}.menu-item__drop-rail--before.sc-ds-menu{inset-block-start:calc(-1 * var(--dimension-space-025));transform:translateY(-50%)}.menu-item__drop-rail--after.sc-ds-menu{inset-block-end:calc(-1 * var(--dimension-space-025));transform:translateY(50%)}@media (forced-colors: active){.menu-item__drop-rail.sc-ds-menu{background:var(--ds-forced-color-selected)}}`;const j={lg:"md",md:"sm",sm:"xs",xs:"xs"};const F=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=n(this,"dsClose",7);this.dsAfterClose=n(this,"dsAfterClose",7);this.dsSelect=n(this,"dsSelect",7);this.dsSwatchSelect=n(this,"dsSwatchSelect",7);this.dsReorder=n(this,"dsReorder",7);this.open=false;this.items=[];this.size="md";this.selectionMode="none";this.sections=[];this.side="bottom";this.align="start";this.anchorAlignment="choice-cell";this.sideOffset=b.space050;this.alignOffset=0;this.initialFocusVisible=false;this.menuLabel="Menu";this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.availableHeight=null;this.focusRingVisible=false;this.reorderFromFlat=null;this.reorderInsertBefore=null;this.reorderAnnouncement="";this.closeTimer=null;this.suppressItemClick=false;this.reorderPointer=null;this.position=new r({getAnchor:()=>this.resolvedAnchor??null,getPopup:()=>this.el.querySelector(".menu-popup"),getOwnerDocument:()=>this.el.ownerDocument,measure:(e,i)=>{if(!this.open)return null;const n=e.getBoundingClientRect();const s=this.viewportPadPx;if(!this.minWidth){if(this.anchorAlignment==="choice-cell"&&(this.side==="top"||this.side==="bottom")){i.style.minWidth=`max(var(--dimension-menu-width-xs), ${a(n.width,s)}px)`}else{i.style.removeProperty("min-width")}}const o=this.viewportPadPx;const t=i.querySelector(".ds-choice-list");const r=Math.min(Math.max(i.offsetHeight,t?.scrollHeight??0),window.innerHeight-o*2);const u={anchorRect:n,popupWidth:i.offsetWidth||this.popupFallbackWidthPx,popupHeight:r||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:l({align:this.align,alignOffsetPx:this.alignOffsetPx,sectionInsetPx:s,anchorAlignment:this.anchorAlignment}),viewportPadPx:o,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight,collisionRect:c(e,this.boundary)};const h=d(u);return{...u,popupHeight:Math.min(u.popupHeight,h.availableHeight)}},apply:({x:e,y:i,availableHeight:n})=>{this.pos={x:e,y:i};this.availableHeight=n},onReady:()=>{this.positionReady=true},liveUpdate:"double-frame",topLayer:true,observeResize:true,observeAnchorMotion:true});this.interaction=new u({getAnchor:()=>this.resolvedAnchor,getPopup:()=>this.el.querySelector(".menu-popup"),getOwnerDocument:()=>this.el.ownerDocument,onOutsideActivation:()=>this.close()});this.lastRenderedSections=[];this.closingSections=null;this.onReorderPointerMove=e=>{const i=this.reorderPointer;if(!i||e.pointerId!==i.pointerId)return;const n=this.activeSections[i.sectionIndex];if(!n||P(n))return;const s=this.resolveReorderInsertBefore(e.clientY,i.sectionIndex,i.fromIndex,n.items);if(s!==this.reorderInsertBefore)this.reorderInsertBefore=s};this.onReorderPointerUp=e=>{const i=this.reorderPointer;if(!i||e.pointerId!==i.pointerId)return;const n=this.activeSections[i.sectionIndex];const s=this.reorderInsertBefore;this.clearReorderPointer();queueMicrotask((()=>{this.suppressItemClick=false}));if(!n||P(n)||s===null)return;const o=I(n.items,i.fromIndex,s);if(!o)return;this.emitReorder(n.items,i.fromIndex,o,i.sectionIndex)};this.onReorderPointerCancel=e=>{if(!this.reorderPointer||e.pointerId!==this.reorderPointer.pointerId)return;this.clearReorderPointer();queueMicrotask((()=>{this.suppressItemClick=false}))}}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.cancelLivePositionUpdate();this.clearReorderPointer();this.teardownListeners()}onOpenChange(e){if(e){this.teardownListeners();this.closingSections=null;this.shouldRender=true;this.closing=false;this.positionReady=false;this.availableHeight=null;this.focusRingVisible=this.initialFocusVisible;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.positionReadyCallback=undefined;this.cancelPositionRetry();this.captureClosingSections();this.closing=true;this.teardownListeners();const e=this.closeAnimationMs;if(e<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),e)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return _(w.space050,w.space050)}get sideOffsetPx(){return _(this.sideOffset,w.space050)}get alignOffsetPx(){return _(this.alignOffset,0)}get popupFallbackWidthPx(){return _(w.menuWidthXs,w.menuWidthXs)}get popupFallbackHeightPx(){return _(w.menuFallbackHeight,w.menuFallbackHeight)}get closeAnimationMs(){return x(w.motionShort2,w.animationDurationShort3)}finishClose(){const e=this.el.querySelector(".menu-popup");if(e?.matches(":popover-open"))e.hidePopover();this.shouldRender=false;this.closing=false;this.lastRenderedSections=[];this.closingSections=null;this.clearReorderPointer();this.reorderAnnouncement="";this.dsAfterClose.emit()}captureClosingSections(){if(this.closingSections)return;const e=this.lastRenderedSections.length?this.lastRenderedSections:this.activeSections;this.closingSections=A(e)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}compositeTabLeavesPopup(e){return this.interaction.tabLeavesPopup(e)}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>P(e)?[]:e.items))}get hasCompositeSections(){return this.activeSections.some(P)}cancelPositionRetry(){this.position.cancel()}cancelLivePositionUpdate(){this.position.cancel()}scheduleLivePositionUpdate(){this.position.scheduleLiveUpdate()}schedulePositionUpdate(e){if(!this.open)return;this.positionReady=false;if(e)this.positionReadyCallback=e;const i=this.positionReadyCallback;this.position.schedule((()=>{if(this.positionReadyCallback===i){this.positionReadyCallback=undefined}i?.()}))}calculatePosition(){return this.position.update()}focusInitialItem(){if(this.hasCompositeSections){requestAnimationFrame((()=>{this.el.querySelector('.menu-popup [tabindex="0"]')?.focus()}));return}const e=this.flatItems;const i=e.findIndex((e=>e.isSelected&&!e.isInactive));const n=e.findIndex((e=>!e.isInactive||!!e.reorderable));this.focusedIndex=i>=0?i:n>=0?n:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.interaction.connect();this.position.observe()}teardownListeners(){this.position.unobserve();this.interaction.disconnect();if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(e=true){this.captureClosingSections();if(e)this.interaction.focusAnchor();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(e){if(!this.shouldRender||this.closing)return;if(e.key==="Escape"){e.preventDefault();this.close();return}if(e.key==="Tab"){if(this.hasCompositeSections&&!this.compositeTabLeavesPopup(e))return;e.preventDefault();this.close(false);this.interaction.moveFocusAfterTab(e.shiftKey);return}if(this.hasCompositeSections)return;if((e.key==="ArrowUp"||e.key==="ArrowDown")&&e.altKey&&!e.ctrlKey&&!e.shiftKey){this.handleReorderKey(e);return}const i=this.flatItems;const n=i.map(((e,i)=>({it:e,i}))).filter((({it:e})=>!e.isInactive||!!e.reorderable)).map((({i:e})=>e));if(!n.length)return;const s=n.indexOf(this.focusedIndex);const o=s<0?0:s;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(o+1)%n.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(o-1+n.length)%n.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[n.length-1];this.focusItem(this.focusedIndex);break}}focusItem(e){const i=this.el.querySelectorAll(".menu-item");i[e]?.focus()}handleItemClick(e){if(this.suppressItemClick){this.suppressItemClick=false;return}if(e.isInactive)return;this.captureClosingSections();this.dsSelect.emit(e)}handleSwatchSelect(e){this.dsSwatchSelect.emit(e)}handleReorderKey(e){const i=M(this.activeSections,this.focusedIndex);if(!i||!i.items[i.itemIndex]?.reorderable)return;const n=T(i.items,i.itemIndex,e.key==="ArrowUp"?-1:1);if(!n)return;e.preventDefault();e.stopPropagation();this.emitReorder(i.items,i.itemIndex,n,i.sectionIndex)}emitReorder(e,i,n,s){const o=D(e,i,n,s);if(!o)return;this.focusedIndex=this.flatIndexFor(s,o.toIndex);this.announceReorder(o);this.dsReorder.emit(o)}flatIndexFor(e,i){let n=0;for(let s=0;s<this.activeSections.length;s+=1){const o=this.activeSections[s];if(P(o))continue;if(s===e)return n+i;n+=o.items.length}return i}announceReorder(e){const i=z(e.items,e.toIndex);const n=i?i.end-i.start+1:e.items.length;const s=i?e.toIndex-i.start+1:e.toIndex+1;this.reorderAnnouncement=`${e.item.label} moved to position ${s} of ${n}`}onReorderPointerDown(e,i,n,s){if(e.button!==0)return;const o=this.activeSections[i];if(!o||P(o))return;if(!o.items[n]?.reorderable)return;e.preventDefault();e.stopPropagation();this.suppressItemClick=true;this.focusRingVisible=false;this.focusedIndex=s;this.focusItem(s);this.reorderPointer={pointerId:e.pointerId,sectionIndex:i,fromIndex:n};this.reorderFromFlat=s;this.reorderInsertBefore=n;window.addEventListener("pointermove",this.onReorderPointerMove);window.addEventListener("pointerup",this.onReorderPointerUp);window.addEventListener("pointercancel",this.onReorderPointerCancel)}resolveReorderInsertBefore(e,i,n,s){const o=z(s,n);if(!o)return n;const t=[...this.el.querySelectorAll(".menu-item")];const r=this.flatIndexFor(i,0);let c=o.end+1;for(let i=o.start;i<=o.end;i+=1){const n=t[r+i];if(!n)continue;const s=n.getBoundingClientRect();if(e<s.top+s.height/2){c=i;break}}return Math.min(Math.max(c,o.start),o.end+1)}clearReorderPointer(){if(this.reorderPointer){window.removeEventListener("pointermove",this.onReorderPointerMove);window.removeEventListener("pointerup",this.onReorderPointerUp);window.removeEventListener("pointercancel",this.onReorderPointerCancel)}this.reorderPointer=null;this.reorderFromFlat=null;this.reorderInsertBefore=null}render(){if(!this.shouldRender)return s(o,{style:{display:"contents"}});const e=this.closing?this.closingSections??this.lastRenderedSections:this.activeSections;const i=e.some(P);if(!this.closing){this.lastRenderedSections=A(e);this.closingSections=null}let n=0;const t=this.reorderFromFlat===null?null:M(e,this.reorderFromFlat);const r=t?z(t.items,t.itemIndex):null;const c={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)c["width"]=this.menuWidth;if(this.minWidth)c["min-width"]=this.minWidth;if(this.availableHeight!==null){c["max-height"]=`${Math.floor(this.availableHeight)}px`}return s(o,{style:{display:"contents"}},s("div",{popover:"manual",class:{"menu-popup":true,"menu-popup--closing":this.closing,"ds-choice-popup":true,"ds-choice-popup--closing":this.closing},style:c,role:i?"dialog":"menu","aria-label":this.menuLabel,"aria-orientation":i?undefined:"vertical"},s("div",{class:"ds-choice-list"},e.map(((o,c)=>s("div",{key:c,class:{"menu-section":true,"menu-section--divided":c<e.length-1,"menu-section--swatch-picker":P(o),"ds-choice-section":true,"ds-chrome-column":true,"ds-chrome-space--sm":true,"ds-choice-section--divided":c<e.length-1,"ds-choice-section--headed-after-first":c>0&&Boolean(o.header)},role:o.header?"group":undefined,"aria-label":o.header},o.header&&s("ds-text",{class:`section-header ds-choice-section__header ds-control-section-heading ds-control--${this.size}`,as:"span",variant:y[this.size],emphasis:true,color:"primary","aria-hidden":"true"},s("span",{class:"ds-choice-section__header-label"},o.header)),C(o)?s("ds-swatch-picker",{value:o.value,groupLabel:o.groupLabel??o.header??"Swatch options",options:o.options??[],sections:o.sections??[],onDsChange:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}}):o.items.map(((e,d)=>{const a=n++;const l=this.focusedIndex===a;const u=!i&&this.selectionMode==="single"&&!e.showSwitch;const h=o.items.some((e=>e.reorderable||!!e.icon));const m=!!e.isInactive&&!e.reorderable;const f=this.reorderFromFlat===a;const p=t?.sectionIndex===c&&r!==null&&d<=r.end&&this.reorderInsertBefore===d;const v=t?.sectionIndex===c&&r!==null&&this.reorderInsertBefore===r.end+1&&d===r.end;return s("button",{key:e.value??`${c}-${e.label}`,type:"button",class:{"menu-item":true,"ds-choice-item":true,"ds-control-frame":true,[`ds-control--${this.size}`]:true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":l&&this.focusRingVisible,"ds-interaction-fill":!m,"ds-interaction-fill--selected":!!e.isSelected&&!m,"menu-item--selected":!!e.isSelected,"menu-item--switch":!!e.showSwitch,"ds-control-inactive":m,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":l,"menu-item--dragging":f},role:i?undefined:e.showSwitch?"menuitemcheckbox":u?"menuitemradio":"menuitem","aria-checked":!i&&e.showSwitch?String(!!e.switchValue):u?String(!!e.isSelected):undefined,"aria-pressed":i?String(e.showSwitch?!!e.switchValue:!!e.isSelected):undefined,"aria-current":!i&&!e.showSwitch&&!u&&e.isSelected?"true":undefined,"aria-description":e.reorderable?e.isInactive?"Visibility cannot be changed. Alt + Arrow Up or Alt + Arrow Down moves this row.":"Drag to reorder. Alt + Arrow Up or Alt + Arrow Down moves this row.":undefined,"aria-disabled":e.isInactive?"true":undefined,disabled:m,tabIndex:i?0:l?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=a}},(p||v)&&s("span",{class:{"menu-item__drop-rail":true,"menu-item__drop-rail--before":p,"menu-item__drop-rail--after":v},"data-menu-drop-rail":true,"aria-hidden":"true"}),e.reorderable?s("span",{class:"menu-item__handle ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","data-menu-handle":true,"aria-hidden":"true",onPointerDown:e=>this.onReorderPointerDown(e,c,d,a),onClick:e=>{e.preventDefault();e.stopPropagation()}},s("ds-icon",{name:"Drag",size:this.size,color:"inherit"})):h&&e.icon?s("span",{class:"menu-item__icon ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},s("ds-icon",{name:e.icon,size:this.size,color:"inherit"})):h?s("span",{class:"menu-item__icon-spacer ds-choice-item__icon ds-control-icon-box","aria-hidden":"true"}):null,s("div",{class:"menu-item__content ds-choice-item__content ds-interaction-fill__content"},s("ds-text",{class:"menu-item__label ds-choice-item__label ds-control-label-box",as:"span",variant:k[this.size],color:e.isSelected?"primary":"secondary"},e.label),e.subtext&&s("ds-text",{class:"menu-item__subtext ds-choice-item__subtext ds-control-label-box",as:"span",variant:y[this.size],color:"secondary"},e.subtext)),e.tag&&s("ds-tag",{class:"ds-choice-item__tag ds-interaction-fill__content",label:e.tag.label,size:j[this.size],intent:e.tag.intent??"neutral",contrast:e.tag.contrast??"faint",rounded:e.tag.rounded??false,isInset:true}),e.dot&&s("span",{class:"menu-item__dot-box ds-interaction-fill__content","aria-hidden":"true"},s("ds-badge",{class:"menu-item__dot",variant:"dot",hasRing:false,label:""})),e.showSwitch&&s("ds-switch",{class:"menu-item__switch ds-interaction-fill__content",size:this.size,checked:!!e.switchValue,isInactive:!!e.isInactive,presentation:true}))}))))))),s("div",{class:"ds-visually-hidden",role:"status","aria-live":"polite"},this.reorderAnnouncement))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],boundary:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],anchorAlignment:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return O()}},[2,"ds-menu",{open:[1028],items:[16],size:[1],selectionMode:[1,"selection-mode"],sections:[16],side:[1],align:[1],anchorAlignment:[1,"anchor-alignment"],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],boundary:[16],initialFocusVisible:[4,"initial-focus-visible"],menuLabel:[1,"menu-label"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],availableHeight:[32],focusRingVisible:[32],reorderFromFlat:[32],reorderInsertBefore:[32],reorderAnnouncement:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],boundary:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],anchorAlignment:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function H(){if(typeof customElements==="undefined"){return}const e=["ds-menu","ds-badge","ds-icon","ds-swatch-picker","ds-switch","ds-tag","ds-text"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(t(e))){customElements.define(t(e),F)}break;case"ds-badge":if(!customElements.get(t(e))){h()}break;case"ds-icon":if(!customElements.get(t(e))){m()}break;case"ds-swatch-picker":if(!customElements.get(t(e))){f()}break;case"ds-switch":if(!customElements.get(t(e))){p()}break;case"ds-tag":if(!customElements.get(t(e))){v()}break;case"ds-text":if(!customElements.get(t(e))){g()}break}}))}H();export{F as M,H as d};
|
|
2
|
+
//# sourceMappingURL=p-BZVWmzKf.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["isMenuSwatchPickerSection","section","variant","isMenuPickerSection","snapshotMenuSections","sections","map","options","option","swatchSection","items","item","menuReorderableRange","index","reorderable","start","end","length","moveReorderableMenuItemBefore","fromIndex","insertBefore","range","clamped","Math","min","max","toIndex","next","splice","moveReorderableMenuItemBy","offset","locateMenuItem","flatIndex","remaining","sectionIndex","itemIndex","createMenuReorderDetail","nextItems","indexOf","value","matched","findIndex","candidate","menuCss","MENU_ITEM_TAG_SIZE","lg","md","sm","xs","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","size","selectionMode","side","align","anchorAlignment","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","menuLabel","shouldRender","closing","pos","x","y","focusedIndex","positionReady","availableHeight","focusRingVisible","reorderFromFlat","reorderInsertBefore","reorderAnnouncement","closeTimer","suppressItemClick","reorderPointer","position","AnchoredPositionController","getAnchor","resolvedAnchor","getPopup","el","querySelector","getOwnerDocument","ownerDocument","measure","anchorEl","popup","anchorRect","getBoundingClientRect","sectionInsetPx","viewportPadPx","minWidth","style","choicePopupMinWidth","width","removeProperty","list","naturalPopupHeight","offsetHeight","scrollHeight","window","innerHeight","input","popupWidth","offsetWidth","popupFallbackWidthPx","popupHeight","popupFallbackHeightPx","sideOffsetPx","alignOffsetPx","resolveChoicePopupAlignOffset","viewportWidth","innerWidth","viewportHeight","collisionRect","resolveAnchoredOverlayBoundaryRect","boundary","unconstrained","computeAnchoredPosition","apply","onReady","liveUpdate","topLayer","observeResize","observeAnchorMotion","interaction","AnchoredOverlayInteractionController","onOutsideActivation","close","lastRenderedSections","closingSections","onReorderPointerMove","event","drag","pointerId","activeSections","resolveReorderInsertBefore","clientY","onReorderPointerUp","clearReorderPointer","queueMicrotask","emitReorder","onReorderPointerCancel","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","cancelLivePositionUpdate","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","positionReadyCallback","undefined","captureClosingSections","closeAnimationMs","finishClose","setTimeout","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","TOKEN_DEFAULTS","menuWidthXs","menuFallbackHeight","resolveMotionTimeMs","motionShort2","animationDurationShort3","matches","hidePopover","dsAfterClose","emit","visibleSections","anchor","anchorId","document","getElementById","compositeTabLeavesPopup","tabLeavesPopup","flatItems","flatMap","hasCompositeSections","some","cancel","scheduleLivePositionUpdate","scheduleLiveUpdate","callback","schedule","calculatePosition","update","requestAnimationFrame","focus","flat","selectedIdx","it","isSelected","isInactive","firstEnabledIdx","btns","querySelectorAll","connect","observe","unobserve","disconnect","clearTimeout","restoreFocus","focusAnchor","dsClose","handleKeyDown","e","key","preventDefault","moveFocusAfterTab","shiftKey","altKey","ctrlKey","handleReorderKey","enabled","i","filter","cur","safe","stopPropagation","focusItem","idx","handleItemClick","dsSelect","handleSwatchSelect","dsSwatchSelect","located","detail","flatIndexFor","announceReorder","dsReorder","count","label","onReorderPointerDown","button","addEventListener","buttons","sectionStart","row","rect","top","height","removeEventListener","render","h","Host","display","flatIdx","dragLocated","dragRange","popupStyle","left","transform","round","zIndex","visibility","menuWidth","floor","popover","class","role","si","Boolean","header","as","CONTROL_SUPPORTING_TEXT_VARIANT","emphasis","color","groupLabel","onDsChange","isFocused","isSingleSelectionItem","showSwitch","usesLeading","icon","locked","dragging","dropBefore","dropAfter","type","isDestructive","String","switchValue","disabled","tabIndex","onMouseDown","onClick","onFocus","onPointerDown","name","CONTROL_TEXT_VARIANT","subtext","tag","intent","contrast","rounded","isInset","dot","hasRing","checked","presentation"],"sources":["src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/menu-sections.ts","src/wc/components/Menu/menu-reorder.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["import type { SwatchPickerOption, SwatchPickerSection } from '../SwatchPicker/swatch-picker-types';\nimport type { TagContrast, TagIntent } from '../Tag/Tag';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n PANEL_NAV_USER_MENU_PLACEMENT,\n PANEL_TOOLS_HEADER_MENU_PLACEMENT,\n type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemTagData {\n label: string;\n intent?: TagIntent;\n contrast?: TagContrast;\n rounded?: boolean;\n}\n\nexport interface MenuItemData {\n label: string;\n value?: string;\n subtext?: string;\n /** Leading decorative icon. Ignored when `reorderable` is true. */\n icon?: string;\n /** Show a supplemental brand notification dot. */\n dot?: boolean;\n /** Show a non-interactive tag at the trailing edge of the row. */\n tag?: MenuItemTagData;\n isSelected?: boolean;\n isInactive?: boolean;\n isDestructive?: boolean;\n /** Render a compact switch indicator; the menu row owns interaction. */\n showSwitch?: boolean;\n switchValue?: boolean;\n /** Prefix a drag handle and allow pointer and keyboard reorder within the contiguous reorderable run. */\n reorderable?: boolean;\n}\n\n/** Next section item order after a pointer or keyboard reorder. */\nexport interface MenuReorderDetail {\n item: MenuItemData;\n fromIndex: number;\n toIndex: number;\n sectionIndex: number;\n items: MenuItemData[];\n}\n\nexport interface MenuItemsSection {\n header?: string;\n items: MenuItemData[];\n}\n\nexport interface MenuSwatchPickerSection {\n header?: string;\n variant: 'swatch-picker';\n value: string;\n options?: SwatchPickerOption[];\n sections?: SwatchPickerSection[];\n groupLabel?: string;\n}\n\nexport type MenuSection =\n | MenuItemsSection\n | MenuSwatchPickerSection;\n\nexport function isMenuSwatchPickerSection(\n section: MenuSection,\n): section is MenuSwatchPickerSection {\n return 'variant' in section && section.variant === 'swatch-picker';\n}\n\nexport function isMenuPickerSection(\n section: MenuSection,\n): section is MenuSwatchPickerSection {\n return isMenuSwatchPickerSection(section);\n}\n\nexport type { SwatchPickerOption, SwatchPickerSection };\n","import type { MenuSection } from './menu-types';\nimport { isMenuSwatchPickerSection } from './menu-types';\n\n/** Preserve the exact menu context painted during exit motion. */\nexport function snapshotMenuSections(sections: readonly MenuSection[]): MenuSection[] {\n return sections.map(section => {\n if (isMenuSwatchPickerSection(section)) {\n return {\n ...section,\n ...(section.options\n ? { options: section.options.map(option => ({ ...option })) }\n : {}),\n ...(section.sections\n ? {\n sections: section.sections.map(swatchSection => ({\n ...swatchSection,\n options: swatchSection.options.map(option => ({ ...option })),\n })),\n }\n : {}),\n };\n }\n return { ...section, items: section.items.map(item => ({ ...item })) };\n });\n}\n","import {\n isMenuPickerSection,\n type MenuItemData,\n type MenuReorderDetail,\n type MenuSection,\n} from './menu-types';\n\nexport interface MenuReorderRange {\n start: number;\n end: number;\n}\n\n/** Contiguous reorderable run containing `index`, or null when that row cannot move. */\nexport function menuReorderableRange(\n items: readonly MenuItemData[],\n index: number,\n): MenuReorderRange | null {\n if (!items[index]?.reorderable) return null;\n\n let start = index;\n while (start > 0 && items[start - 1]?.reorderable) start -= 1;\n\n let end = index;\n while (end < items.length - 1 && items[end + 1]?.reorderable) end += 1;\n\n return { start, end };\n}\n\n/**\n * Move a reorderable row so it would be inserted before `insertBefore`.\n * `insertBefore` is clamped to the contiguous reorderable run.\n */\nexport function moveReorderableMenuItemBefore(\n items: readonly MenuItemData[],\n fromIndex: number,\n insertBefore: number,\n): MenuItemData[] | null {\n const range = menuReorderableRange(items, fromIndex);\n if (!range) return null;\n\n const clamped = Math.min(Math.max(insertBefore, range.start), range.end + 1);\n let toIndex = clamped;\n if (fromIndex < toIndex) toIndex -= 1;\n if (toIndex === fromIndex || toIndex < range.start || toIndex > range.end) return null;\n\n const next = [...items];\n const [item] = next.splice(fromIndex, 1);\n next.splice(toIndex, 0, item);\n return next;\n}\n\n/** Keyboard step: move one slot within the reorderable run. */\nexport function moveReorderableMenuItemBy(\n items: readonly MenuItemData[],\n fromIndex: number,\n offset: number,\n): MenuItemData[] | null {\n if (offset === 0) return null;\n return moveReorderableMenuItemBefore(\n items,\n fromIndex,\n fromIndex + (offset < 0 ? offset : offset + 1),\n );\n}\n\nexport function locateMenuItem(\n sections: readonly MenuSection[],\n flatIndex: number,\n): { sectionIndex: number; itemIndex: number; items: MenuItemData[] } | null {\n let remaining = flatIndex;\n for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex += 1) {\n const section = sections[sectionIndex];\n if (isMenuPickerSection(section)) continue;\n if (remaining < section.items.length) {\n return { sectionIndex, itemIndex: remaining, items: section.items };\n }\n remaining -= section.items.length;\n }\n return null;\n}\n\nexport function createMenuReorderDetail(\n items: MenuItemData[],\n fromIndex: number,\n nextItems: MenuItemData[],\n sectionIndex: number,\n): MenuReorderDetail | null {\n const item = items[fromIndex];\n if (!item) return null;\n const toIndex = nextItems.indexOf(item);\n if (toIndex < 0) {\n const value = item.value;\n const matched = value\n ? nextItems.findIndex(candidate => candidate.value === value)\n : -1;\n if (matched < 0) return null;\n return { item, fromIndex, toIndex: matched, sectionIndex, items: nextItems };\n }\n return { item, fromIndex, toIndex, sectionIndex, items: nextItems };\n}\n","@import '../../utils/choice-list.css';\n@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.menu-item--destructive .menu-item__label {\n /* Beat ds-text color-* host classes for destructive rows. */\n color: var(--color-foreground-bold-negative) !important;\n}\n\n/* Standard md icon zone keeps the dot aligned with other control suffixes. */\n.menu-item__dot-box {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--ds-control-icon, var(--dimension-iconography-md));\n height: var(--ds-control-icon, var(--dimension-iconography-md));\n pointer-events: none;\n}\n\n/* Switch suffix keeps an 8px label-to-control gap without changing the\n density gap between a prefix icon or drag handle and the label. */\n.menu-item__switch {\n flex-shrink: 0;\n margin-inline-start: calc(\n var(--dimension-space-100) - var(--ds-control-gap, var(--dimension-space-050))\n );\n}\n\n/* ── Prefix icon / reorder handle ────────────────────────────────────────── */\n\n.menu-item > .menu-item__handle {\n pointer-events: auto;\n cursor: grab;\n touch-action: none;\n}\n\n.menu-item > .menu-item__handle:active,\n.menu-item--dragging > .menu-item__handle {\n cursor: grabbing;\n}\n\n.menu-item--dragging {\n opacity: var(--effect-opacity-medium);\n}\n\n.menu-item__drop-rail {\n position: absolute;\n z-index: var(--dimension-z-index-raised);\n inset-inline: var(--dimension-space-050);\n block-size: var(--dimension-stroke-width-025);\n border-radius: var(--dimension-radius-half);\n background: var(--color-border-bold-brand);\n pointer-events: none;\n}\n\n.menu-item__drop-rail--before {\n inset-block-start: calc(-1 * var(--dimension-space-025));\n transform: translateY(-50%);\n}\n\n.menu-item__drop-rail--after {\n inset-block-end: calc(-1 * var(--dimension-space-025));\n transform: translateY(50%);\n}\n\n@media (forced-colors: active) {\n .menu-item__drop-rail {\n background: var(--ds-forced-color-selected);\n }\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Element,\n Watch,\n Listen,\n h,\n Host,\n} from '@stencil/core';\nimport {\n choicePopupMinWidth,\n CONTROL_SUPPORTING_TEXT_VARIANT,\n CONTROL_TEXT_VARIANT,\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n resolveMotionTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n type ChoicePopupAnchorAlignment,\n type ControlSize,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { computeAnchoredPosition, type AnchoredPositionInput } from '../../utils/anchored-position';\nimport type { MenuAlign, MenuSide } from './menu-position';\nimport {\n isMenuPickerSection,\n isMenuSwatchPickerSection,\n type MenuItemData,\n type MenuReorderDetail,\n type MenuSection,\n} from './menu-types';\nimport { snapshotMenuSections } from './menu-sections';\nimport {\n createMenuReorderDetail,\n locateMenuItem,\n menuReorderableRange,\n moveReorderableMenuItemBefore,\n moveReorderableMenuItemBy,\n} from './menu-reorder';\n\nexport type MenuSelectionMode = 'none' | 'single';\nexport type MenuSize = ControlSize;\nconst MENU_ITEM_TAG_SIZE: Record<MenuSize, 'md' | 'sm' | 'xs'> = {\n lg: 'md',\n md: 'sm',\n sm: 'xs',\n xs: 'xs',\n};\n\n@Component({\n tag: 'ds-menu',\n styleUrl: 'Menu.css',\n scoped: true,\n})\nexport class Menu {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() items: MenuItemData[] = [];\n /** Choice-row density. */\n @Prop() size: MenuSize = 'md';\n /** Give ordinary rows mutually-exclusive menu semantics using isSelected. */\n @Prop() selectionMode: MenuSelectionMode = 'none';\n @Prop() sections: MenuSection[] = [];\n /** Preferred side; placement flips to the opposite side when that offers a better fit. */\n @Prop() side: MenuSide = 'bottom';\n @Prop() align: MenuAlign = 'start';\n /** Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry. */\n @Prop() anchorAlignment: ChoicePopupAnchorAlignment = 'choice-cell';\n /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n @Prop() menuWidth: string | undefined;\n @Prop() minWidth: string | undefined;\n /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n @Prop() anchor: HTMLElement | undefined;\n /** ID of the external trigger element for positioning */\n @Prop() anchorId: string | undefined;\n /** Explicit collision owner; otherwise the nearest data-ds-overlay-boundary ancestor is used. */\n @Prop() boundary: HTMLElement | undefined;\n /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n @Prop() initialFocusVisible: boolean = false;\n /** Accessible name for the popup menu. */\n @Prop() menuLabel: string = 'Menu';\n\n @State() private shouldRender: boolean = false;\n @State() private closing: boolean = false;\n @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n @State() private focusedIndex: number = 0;\n @State() private positionReady: boolean = false;\n @State() private availableHeight: number | null = null;\n @State() private focusRingVisible: boolean = false;\n @State() private reorderFromFlat: number | null = null;\n @State() private reorderInsertBefore: number | null = null;\n @State() private reorderAnnouncement = '';\n\n @Event() dsClose!: EventEmitter<void>;\n /** Emitted after the popup's exit motion is complete and its rendered content is removed. */\n @Event() dsAfterClose!: EventEmitter<void>;\n @Event() dsSelect!: EventEmitter<MenuItemData>;\n /** Emitted when a generic `swatch-picker` section option is chosen. */\n @Event() dsSwatchSelect!: EventEmitter<string>;\n /** Emitted after a pointer drop or keyboard move; Menu never mutates item order. */\n @Event() dsReorder!: EventEmitter<MenuReorderDetail>;\n\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private positionReadyCallback: (() => void) | undefined;\n private suppressItemClick = false;\n private reorderPointer: {\n pointerId: number;\n sectionIndex: number;\n fromIndex: number;\n } | null = null;\n /**\n * Anchored placement. The choice-cell measurement stays here on purpose: the\n * inner-cell align offset and the `--dimension-menu-width-xs` floor are Menu\n * semantics, not shared geometry.\n */\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.resolvedAnchor ?? null,\n getPopup: () => this.el.querySelector<HTMLElement>('.menu-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n measure: (anchorEl, popup) => {\n if (!this.open) return null;\n\n const anchorRect = anchorEl.getBoundingClientRect();\n const sectionInsetPx = this.viewportPadPx;\n if (!this.minWidth) {\n if (\n this.anchorAlignment === 'choice-cell' &&\n (this.side === 'top' || this.side === 'bottom')\n ) {\n popup.style.minWidth = `max(var(--dimension-menu-width-xs), ${choicePopupMinWidth(\n anchorRect.width,\n sectionInsetPx\n )}px)`;\n } else {\n popup.style.removeProperty('min-width');\n }\n }\n\n const viewportPadPx = this.viewportPadPx;\n const list = popup.querySelector<HTMLElement>('.ds-choice-list');\n const naturalPopupHeight = Math.min(\n Math.max(popup.offsetHeight, list?.scrollHeight ?? 0),\n window.innerHeight - viewportPadPx * 2\n );\n const input: AnchoredPositionInput = {\n anchorRect,\n popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n popupHeight: naturalPopupHeight || this.popupFallbackHeightPx,\n side: this.side,\n align: this.align,\n sideOffsetPx: this.sideOffsetPx,\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: this.align,\n alignOffsetPx: this.alignOffsetPx,\n sectionInsetPx,\n anchorAlignment: this.anchorAlignment,\n }),\n viewportPadPx,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n collisionRect: resolveAnchoredOverlayBoundaryRect(anchorEl, this.boundary),\n };\n const unconstrained = computeAnchoredPosition(input);\n return {\n ...input,\n popupHeight: Math.min(input.popupHeight, unconstrained.availableHeight),\n };\n },\n apply: ({ x, y, availableHeight }) => {\n this.pos = { x, y };\n this.availableHeight = availableHeight;\n },\n onReady: () => {\n this.positionReady = true;\n },\n liveUpdate: 'double-frame',\n topLayer: true,\n observeResize: true,\n observeAnchorMotion: true,\n });\n private readonly interaction = new AnchoredOverlayInteractionController({\n getAnchor: () => this.resolvedAnchor,\n getPopup: () => this.el.querySelector<HTMLElement>('.menu-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n onOutsideActivation: () => this.close(),\n });\n /** Last content actually painted while open; retained unchanged through exit motion. */\n private lastRenderedSections: MenuSection[] = [];\n private closingSections: MenuSection[] | null = null;\n\n componentDidLoad() {\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.cancelPositionRetry();\n this.cancelLivePositionUpdate();\n this.clearReorderPointer();\n this.teardownListeners();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.teardownListeners();\n this.closingSections = null;\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.availableHeight = null;\n this.focusRingVisible = this.initialFocusVisible;\n this.setupListeners();\n this.schedulePositionUpdate(() => {\n this.focusInitialItem();\n });\n } else if (this.shouldRender) {\n this.positionReadyCallback = undefined;\n this.cancelPositionRetry();\n this.captureClosingSections();\n this.closing = true;\n this.teardownListeners();\n const closeAnimationMs = this.closeAnimationMs;\n if (closeAnimationMs <= 0) {\n this.finishClose();\n return;\n }\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.finishClose();\n }, closeAnimationMs);\n }\n }\n\n @Watch('anchor')\n @Watch('anchorId')\n @Watch('boundary')\n onAnchorChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n @Watch('side')\n @Watch('align')\n @Watch('anchorAlignment')\n @Watch('sideOffset')\n @Watch('alignOffset')\n onPositionPropsChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get popupFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeightPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get closeAnimationMs(): number {\n return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private finishClose() {\n const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n if (popup?.matches(':popover-open')) popup.hidePopover();\n this.shouldRender = false;\n this.closing = false;\n this.lastRenderedSections = [];\n this.closingSections = null;\n this.clearReorderPointer();\n this.reorderAnnouncement = '';\n this.dsAfterClose.emit();\n }\n\n private captureClosingSections() {\n if (this.closingSections) return;\n const visibleSections = this.lastRenderedSections.length\n ? this.lastRenderedSections\n : this.activeSections;\n this.closingSections = snapshotMenuSections(visibleSections);\n }\n\n private get resolvedAnchor(): HTMLElement | null {\n if (this.anchor) return this.anchor;\n if (this.anchorId) return document.getElementById(this.anchorId);\n return null;\n }\n\n private compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n return this.interaction.tabLeavesPopup(event);\n }\n\n private get activeSections(): MenuSection[] {\n if (this.sections.length > 0) return this.sections;\n if (this.items.length > 0) return [{ items: this.items }];\n return [];\n }\n\n private get flatItems(): MenuItemData[] {\n return this.activeSections.flatMap(section =>\n isMenuPickerSection(section) ? [] : section.items\n );\n }\n\n /** Rich preference content is a non-modal dialog, not an ARIA action menu. */\n private get hasCompositeSections(): boolean {\n return this.activeSections.some(isMenuPickerSection);\n }\n\n private cancelPositionRetry() {\n this.position.cancel();\n }\n\n private cancelLivePositionUpdate() {\n this.position.cancel();\n }\n\n /** Reposition after the current scroll/layout frame without hiding the open popup. */\n private scheduleLivePositionUpdate() {\n this.position.scheduleLiveUpdate();\n }\n\n /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n private schedulePositionUpdate(onReady?: () => void) {\n if (!this.open) return;\n this.positionReady = false;\n // Opening often sets `open` and `anchorId` together. Each Watch reschedules\n // placement; keep the open-path ready callback so initial focus is not dropped.\n if (onReady) this.positionReadyCallback = onReady;\n const callback = this.positionReadyCallback;\n this.position.schedule(() => {\n if (this.positionReadyCallback === callback) {\n this.positionReadyCallback = undefined;\n }\n callback?.();\n });\n }\n\n /** @returns `true` when anchor and popup were found and `pos` was updated. */\n private calculatePosition(): boolean {\n return this.position.update();\n }\n\n /** Focus the selected item when present, otherwise the first enabled item. */\n private focusInitialItem() {\n if (this.hasCompositeSections) {\n requestAnimationFrame(() => {\n this.el.querySelector<HTMLElement>('.menu-popup [tabindex=\"0\"]')?.focus();\n });\n return;\n }\n\n const flat = this.flatItems;\n const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n const firstEnabledIdx = flat.findIndex(it => !it.isInactive || !!it.reorderable);\n this.focusedIndex = selectedIdx >= 0 ? selectedIdx : firstEnabledIdx >= 0 ? firstEnabledIdx : 0;\n\n requestAnimationFrame(() => {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[this.focusedIndex]?.focus();\n });\n }\n\n private setupListeners() {\n this.interaction.connect();\n this.position.observe();\n }\n\n private teardownListeners() {\n this.position.unobserve();\n this.interaction.disconnect();\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private close(restoreFocus = true) {\n this.captureClosingSections();\n if (restoreFocus) this.interaction.focusAnchor();\n this.dsClose.emit();\n this.open = false;\n this.onOpenChange(false);\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.close();\n return;\n }\n\n if (e.key === 'Tab') {\n if (this.hasCompositeSections && !this.compositeTabLeavesPopup(e)) return;\n e.preventDefault();\n this.close(false);\n this.interaction.moveFocusAfterTab(e.shiftKey);\n return;\n }\n\n if (this.hasCompositeSections) return;\n\n if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.altKey && !e.ctrlKey && !e.shiftKey) {\n this.handleReorderKey(e);\n return;\n }\n\n const flat = this.flatItems;\n const enabled = flat\n .map((it, i) => ({ it, i }))\n .filter(({ it }) => !it.isInactive || !!it.reorderable)\n .map(({ i }) => i);\n if (!enabled.length) return;\n\n const cur = enabled.indexOf(this.focusedIndex);\n const safe = cur < 0 ? 0 : cur;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe + 1) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'ArrowUp':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'Home':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[0];\n this.focusItem(this.focusedIndex);\n break;\n case 'End':\n e.preventDefault();\n e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[enabled.length - 1];\n this.focusItem(this.focusedIndex);\n break;\n }\n }\n\n private focusItem(idx: number) {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[idx]?.focus();\n }\n\n private handleItemClick(item: MenuItemData) {\n if (this.suppressItemClick) {\n this.suppressItemClick = false;\n return;\n }\n if (item.isInactive) return;\n // Consumers commonly change the item source while handling selection.\n // Capture first so the exit animation never paints the next menu context.\n this.captureClosingSections();\n this.dsSelect.emit(item);\n }\n\n private handleSwatchSelect(value: string) {\n this.dsSwatchSelect.emit(value);\n }\n\n private handleReorderKey(event: KeyboardEvent): void {\n const located = locateMenuItem(this.activeSections, this.focusedIndex);\n if (!located || !located.items[located.itemIndex]?.reorderable) return;\n\n const nextItems = moveReorderableMenuItemBy(\n located.items,\n located.itemIndex,\n event.key === 'ArrowUp' ? -1 : 1\n );\n if (!nextItems) return;\n\n event.preventDefault();\n event.stopPropagation();\n this.emitReorder(located.items, located.itemIndex, nextItems, located.sectionIndex);\n }\n\n private emitReorder(\n items: MenuItemData[],\n fromIndex: number,\n nextItems: MenuItemData[],\n sectionIndex: number\n ): void {\n const detail = createMenuReorderDetail(items, fromIndex, nextItems, sectionIndex);\n if (!detail) return;\n this.focusedIndex = this.flatIndexFor(sectionIndex, detail.toIndex);\n this.announceReorder(detail);\n this.dsReorder.emit(detail);\n }\n\n private flatIndexFor(sectionIndex: number, itemIndex: number): number {\n let flat = 0;\n for (let index = 0; index < this.activeSections.length; index += 1) {\n const section = this.activeSections[index];\n if (isMenuPickerSection(section)) continue;\n if (index === sectionIndex) return flat + itemIndex;\n flat += section.items.length;\n }\n return itemIndex;\n }\n\n private announceReorder(detail: MenuReorderDetail): void {\n const range = menuReorderableRange(detail.items, detail.toIndex);\n const count = range ? range.end - range.start + 1 : detail.items.length;\n const position = range ? detail.toIndex - range.start + 1 : detail.toIndex + 1;\n this.reorderAnnouncement = `${detail.item.label} moved to position ${position} of ${count}`;\n }\n\n private onReorderPointerDown(\n event: PointerEvent,\n sectionIndex: number,\n itemIndex: number,\n flatIndex: number\n ): void {\n if (event.button !== 0) return;\n const section = this.activeSections[sectionIndex];\n if (!section || isMenuPickerSection(section)) return;\n if (!section.items[itemIndex]?.reorderable) return;\n\n event.preventDefault();\n event.stopPropagation();\n this.suppressItemClick = true;\n this.focusRingVisible = false;\n this.focusedIndex = flatIndex;\n this.focusItem(flatIndex);\n this.reorderPointer = {\n pointerId: event.pointerId,\n sectionIndex,\n fromIndex: itemIndex,\n };\n this.reorderFromFlat = flatIndex;\n this.reorderInsertBefore = itemIndex;\n window.addEventListener('pointermove', this.onReorderPointerMove);\n window.addEventListener('pointerup', this.onReorderPointerUp);\n window.addEventListener('pointercancel', this.onReorderPointerCancel);\n }\n\n private onReorderPointerMove = (event: PointerEvent) => {\n const drag = this.reorderPointer;\n if (!drag || event.pointerId !== drag.pointerId) return;\n const section = this.activeSections[drag.sectionIndex];\n if (!section || isMenuPickerSection(section)) return;\n\n const insertBefore = this.resolveReorderInsertBefore(\n event.clientY,\n drag.sectionIndex,\n drag.fromIndex,\n section.items\n );\n if (insertBefore !== this.reorderInsertBefore) this.reorderInsertBefore = insertBefore;\n };\n\n private onReorderPointerUp = (event: PointerEvent) => {\n const drag = this.reorderPointer;\n if (!drag || event.pointerId !== drag.pointerId) return;\n\n const section = this.activeSections[drag.sectionIndex];\n const insertBefore = this.reorderInsertBefore;\n this.clearReorderPointer();\n queueMicrotask(() => {\n this.suppressItemClick = false;\n });\n if (!section || isMenuPickerSection(section) || insertBefore === null) return;\n\n const nextItems = moveReorderableMenuItemBefore(section.items, drag.fromIndex, insertBefore);\n if (!nextItems) return;\n this.emitReorder(section.items, drag.fromIndex, nextItems, drag.sectionIndex);\n };\n\n private onReorderPointerCancel = (event: PointerEvent) => {\n if (!this.reorderPointer || event.pointerId !== this.reorderPointer.pointerId) return;\n this.clearReorderPointer();\n queueMicrotask(() => {\n this.suppressItemClick = false;\n });\n };\n\n private resolveReorderInsertBefore(\n clientY: number,\n sectionIndex: number,\n fromIndex: number,\n items: MenuItemData[]\n ): number {\n const range = menuReorderableRange(items, fromIndex);\n if (!range) return fromIndex;\n\n const buttons = [...this.el.querySelectorAll<HTMLElement>('.menu-item')];\n const sectionStart = this.flatIndexFor(sectionIndex, 0);\n let insertBefore = range.end + 1;\n for (let itemIndex = range.start; itemIndex <= range.end; itemIndex += 1) {\n const row = buttons[sectionStart + itemIndex];\n if (!row) continue;\n const rect = row.getBoundingClientRect();\n if (clientY < rect.top + rect.height / 2) {\n insertBefore = itemIndex;\n break;\n }\n }\n return Math.min(Math.max(insertBefore, range.start), range.end + 1);\n }\n\n private clearReorderPointer(): void {\n if (this.reorderPointer) {\n window.removeEventListener('pointermove', this.onReorderPointerMove);\n window.removeEventListener('pointerup', this.onReorderPointerUp);\n window.removeEventListener('pointercancel', this.onReorderPointerCancel);\n }\n this.reorderPointer = null;\n this.reorderFromFlat = null;\n this.reorderInsertBefore = null;\n }\n\n render() {\n if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n const sections = this.closing\n ? (this.closingSections ?? this.lastRenderedSections)\n : this.activeSections;\n const hasCompositeSections = sections.some(isMenuPickerSection);\n if (!this.closing) {\n this.lastRenderedSections = snapshotMenuSections(sections);\n this.closingSections = null;\n }\n let flatIdx = 0;\n const dragLocated =\n this.reorderFromFlat === null ? null : locateMenuItem(sections, this.reorderFromFlat);\n const dragRange = dragLocated\n ? menuReorderableRange(dragLocated.items, dragLocated.itemIndex)\n : null;\n\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n if (this.availableHeight !== null) {\n popupStyle['max-height'] = `${Math.floor(this.availableHeight)}px`;\n }\n\n return (\n <Host style={{ display: 'contents' }}>\n <div\n popover=\"manual\"\n class={{\n 'menu-popup': true,\n 'menu-popup--closing': this.closing,\n 'ds-choice-popup': true,\n 'ds-choice-popup--closing': this.closing,\n }}\n style={popupStyle}\n role={hasCompositeSections ? 'dialog' : 'menu'}\n aria-label={this.menuLabel}\n aria-orientation={hasCompositeSections ? undefined : 'vertical'}\n >\n <div class=\"ds-choice-list\">\n {sections.map((section, si) => (\n <div\n key={si}\n class={{\n 'menu-section': true,\n 'menu-section--divided': si < sections.length - 1,\n 'menu-section--swatch-picker': isMenuPickerSection(section),\n 'ds-choice-section': true,\n 'ds-chrome-column': true,\n 'ds-chrome-space--sm': true,\n 'ds-choice-section--divided': si < sections.length - 1,\n 'ds-choice-section--headed-after-first': si > 0 && Boolean(section.header),\n }}\n role={section.header ? 'group' : undefined}\n aria-label={section.header}\n >\n {section.header && (\n <ds-text\n class={`section-header ds-choice-section__header ds-control-section-heading ds-control--${this.size}`}\n as=\"span\"\n variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n emphasis\n color=\"primary\"\n aria-hidden=\"true\"\n >\n <span class=\"ds-choice-section__header-label\">{section.header}</span>\n </ds-text>\n )}\n {isMenuSwatchPickerSection(section) ? (\n <ds-swatch-picker\n value={section.value}\n groupLabel={section.groupLabel ?? section.header ?? 'Swatch options'}\n options={section.options ?? []}\n sections={section.sections ?? []}\n onDsChange={(e: CustomEvent<string>) => {\n e.stopPropagation();\n this.handleSwatchSelect(e.detail);\n }}\n />\n ) : (\n section.items.map((item, itemIndex) => {\n const idx = flatIdx++;\n const isFocused = this.focusedIndex === idx;\n const isSingleSelectionItem =\n !hasCompositeSections && this.selectionMode === 'single' && !item.showSwitch;\n const usesLeading = section.items.some(\n candidate => candidate.reorderable || !!candidate.icon\n );\n const locked = !!item.isInactive && !item.reorderable;\n const dragging = this.reorderFromFlat === idx;\n const dropBefore =\n dragLocated?.sectionIndex === si &&\n dragRange !== null &&\n itemIndex <= dragRange.end &&\n this.reorderInsertBefore === itemIndex;\n const dropAfter =\n dragLocated?.sectionIndex === si &&\n dragRange !== null &&\n this.reorderInsertBefore === dragRange.end + 1 &&\n itemIndex === dragRange.end;\n return (\n <button\n key={item.value ?? `${si}-${item.label}`}\n type=\"button\"\n class={{\n 'menu-item': true,\n 'ds-choice-item': true,\n 'ds-control-frame': true,\n [`ds-control--${this.size}`]: true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n 'ds-interaction-fill': !locked,\n 'ds-interaction-fill--selected': !!item.isSelected && !locked,\n 'menu-item--selected': !!item.isSelected,\n 'menu-item--switch': !!item.showSwitch,\n 'ds-control-inactive': locked,\n 'menu-item--destructive': !!item.isDestructive,\n 'menu-item--focused': isFocused,\n 'menu-item--dragging': dragging,\n }}\n role={\n hasCompositeSections\n ? undefined\n : item.showSwitch\n ? 'menuitemcheckbox'\n : isSingleSelectionItem\n ? 'menuitemradio'\n : 'menuitem'\n }\n aria-checked={\n !hasCompositeSections && item.showSwitch\n ? String(!!item.switchValue)\n : isSingleSelectionItem\n ? String(!!item.isSelected)\n : undefined\n }\n aria-pressed={\n hasCompositeSections\n ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n : undefined\n }\n aria-current={\n !hasCompositeSections &&\n !item.showSwitch &&\n !isSingleSelectionItem &&\n item.isSelected\n ? 'true'\n : undefined\n }\n aria-description={\n item.reorderable\n ? item.isInactive\n ? 'Visibility cannot be changed. Alt + Arrow Up or Alt + Arrow Down moves this row.'\n : 'Drag to reorder. Alt + Arrow Up or Alt + Arrow Down moves this row.'\n : undefined\n }\n aria-disabled={item.isInactive ? 'true' : undefined}\n disabled={locked}\n tabIndex={hasCompositeSections ? 0 : isFocused ? 0 : -1}\n onMouseDown={() => {\n this.focusRingVisible = false;\n }}\n onClick={() => this.handleItemClick(item)}\n onFocus={() => {\n this.focusedIndex = idx;\n }}\n >\n {(dropBefore || dropAfter) && (\n <span\n class={{\n 'menu-item__drop-rail': true,\n 'menu-item__drop-rail--before': dropBefore,\n 'menu-item__drop-rail--after': dropAfter,\n }}\n data-menu-drop-rail\n aria-hidden=\"true\"\n />\n )}\n {item.reorderable ? (\n <span\n class=\"menu-item__handle ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n data-menu-handle\n aria-hidden=\"true\"\n onPointerDown={event =>\n this.onReorderPointerDown(event, si, itemIndex, idx)\n }\n onClick={event => {\n event.preventDefault();\n event.stopPropagation();\n }}\n >\n <ds-icon name=\"Drag\" size={this.size} color=\"inherit\" />\n </span>\n ) : usesLeading && item.icon ? (\n <span\n class=\"menu-item__icon ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n aria-hidden=\"true\"\n >\n <ds-icon name={item.icon} size={this.size} color=\"inherit\" />\n </span>\n ) : usesLeading ? (\n <span\n class=\"menu-item__icon-spacer ds-choice-item__icon ds-control-icon-box\"\n aria-hidden=\"true\"\n />\n ) : null}\n <div class=\"menu-item__content ds-choice-item__content ds-interaction-fill__content\">\n <ds-text\n class=\"menu-item__label ds-choice-item__label ds-control-label-box\"\n as=\"span\"\n variant={CONTROL_TEXT_VARIANT[this.size]}\n color={item.isSelected ? 'primary' : 'secondary'}\n >\n {item.label}\n </ds-text>\n {item.subtext && (\n <ds-text\n class=\"menu-item__subtext ds-choice-item__subtext ds-control-label-box\"\n as=\"span\"\n variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n color=\"secondary\"\n >\n {item.subtext}\n </ds-text>\n )}\n </div>\n {item.tag && (\n <ds-tag\n class=\"ds-choice-item__tag ds-interaction-fill__content\"\n label={item.tag.label}\n size={MENU_ITEM_TAG_SIZE[this.size]}\n intent={item.tag.intent ?? 'neutral'}\n contrast={item.tag.contrast ?? 'faint'}\n rounded={item.tag.rounded ?? false}\n isInset\n />\n )}\n {item.dot && (\n <span\n class=\"menu-item__dot-box ds-interaction-fill__content\"\n aria-hidden=\"true\"\n >\n <ds-badge\n class=\"menu-item__dot\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n />\n </span>\n )}\n {item.showSwitch && (\n <ds-switch\n class=\"menu-item__switch ds-interaction-fill__content\"\n size={this.size}\n checked={!!item.switchValue}\n isInactive={!!item.isInactive}\n presentation\n />\n )}\n </button>\n );\n })\n )}\n </div>\n ))}\n </div>\n </div>\n <div class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\">\n {this.reorderAnnouncement}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as i,c as s,h as o,a as n,t}from"./index.js";import{d as r}from"./p-BKp__CQX.js";import{d as a}from"./p-DbJahF86.js";import{d}from"./p-DC_8dK55.js";import{d as c}from"./p-BFfLvMZd.js";import{d as l}from"./p-JPTkZ3Ji.js";import{d as h}from"./p-CHEt4mW8.js";import{d as v}from"./p-LHzBS95u.js";import{d as m}from"./p-Cj5Hkt6Y.js";const b=()=>`.ds-control--lg.sc-ds-mobile-sheet-nav,.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav,.ds-control--sm.sc-ds-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-nav,.ds-control--xs.sc-ds-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--lg.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-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-chrome-space--sm.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--sm.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--md.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--lg.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav,.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav,.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-mobile-sheet-nav:root,.sc-ds-mobile-sheet-nav-h,.ds-forced-colors-scope.sc-ds-mobile-sheet-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-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring.sc-ds-mobile-sheet-nav,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-sheet-nav-h:focus-visible,.ds-focus-ring.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-sheet-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-mobile-sheet-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-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-mobile-sheet-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-sheet-nav:root,.sc-ds-mobile-sheet-nav-h,.ds-forced-colors-scope.sc-ds-mobile-sheet-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-interaction-fill.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill.sc-ds-mobile-sheet-nav{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-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::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-mobile-sheet-nav-h,.ds-interaction-fill--bordered.sc-ds-mobile-sheet-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill.sc-ds-mobile-sheet-nav>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill__content.sc-ds-mobile-sheet-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-bold.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-strong.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-media.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::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-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::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-mobile-sheet-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav: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-mobile-sheet-nav-h{display:block;min-width:0;min-height:0;height:100%;background:var(--color-background-primary)}.sc-ds-mobile-sheet-nav-h:not([open]){display:none}.mobile-sheet-nav.sc-ds-mobile-sheet-nav{display:grid;grid-template-rows:auto minmax(0, 1fr);height:100%;min-height:0;background:var(--color-background-primary)}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav{position:relative;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr)}.mobile-sheet-nav__header--expanded-context.sc-ds-mobile-sheet-nav{grid-template-columns:minmax(var(--dimension-size-500), 1fr) minmax(0, 4fr) minmax(var(--dimension-size-500), 1fr)}.mobile-sheet-nav__header--expanded-context.sc-ds-mobile-sheet-nav .mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{width:100%}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-sheet-nav__brand.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-start;min-width:0}.mobile-sheet-nav__logo.sc-ds-mobile-sheet-nav{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-500);height:var(--dimension-size-500);padding:var(--dimension-space-100);box-sizing:border-box;color:var(--color-foreground-primary)}.mobile-sheet-nav__logo-mark.sc-ds-mobile-sheet-nav{width:var(--dimension-iconography-lg);height:var(--dimension-iconography-lg);flex:0 0 auto}.mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{justify-self:center}.mobile-sheet-nav__actions.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--dimension-space-050);min-width:0}.mobile-sheet-nav__body.sc-ds-mobile-sheet-nav{min-height:0;overflow:auto;overscroll-behavior:contain}.mobile-sheet-nav__sections.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-400)}.mobile-sheet-nav__items.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-100)}.mobile-sheet-nav__item.sc-ds-mobile-sheet-nav{appearance:none;width:100%;height:var(--ds-control-height);min-height:var(--ds-control-height);padding-inline:var(--ds-control-padding-inline);border:0;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);cursor:default;text-align:start;box-sizing:border-box}.mobile-sheet-nav__item--selected.sc-ds-mobile-sheet-nav{color:var(--color-foreground-primary)}.mobile-sheet-nav__item-label.sc-ds-mobile-sheet-nav{min-width:0;padding-inline:var(--ds-control-label-inset)}.mobile-sheet-nav__dot.sc-ds-mobile-sheet-nav{margin-inline-start:auto}`;const f=[{id:"dashboard",label:"Dashboard",icon:"Dashboard",variant:"icon"},{id:"settings",label:"Settings",icon:"Gear",variant:"icon"}];const u=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAreaSelect=s(this,"dsAreaSelect",7);this.dsBrowseContextChange=s(this,"dsBrowseContextChange",7);this.dsClose=s(this,"dsClose",7);this.open=false;this.browseContext="dashboard";this.dashboardGroups=[];this.settingsGroups=[];this.currentUrl="";this.routeSelectionActive=true;this.navigationLabel="Application navigation";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.helpLabel="Help & Support";this.showAccount=true;this.handleContextChange=e=>{const i=e.detail==="settings"?"settings":"dashboard";if(i===this.browseContext)return;this.dsBrowseContextChange.emit(i)}}get groups(){return this.browseContext==="settings"?this.settingsGroups:this.dashboardGroups}get activeId(){if(!this.routeSelectionActive)return"";return r(this.currentUrl,[...this.dashboardGroups.flatMap((e=>e.items)),...this.settingsGroups.flatMap((e=>e.items))])}handleOpenChange(e){if(!e)return;requestAnimationFrame((()=>{const e=this.el.querySelector('[aria-current="page"]');const i=this.el.querySelector(".mobile-sheet-nav__item");(e??i)?.focus({preventScroll:true})}))}handleKeyDown(e){if(!this.open||e.key!=="Escape")return;e.preventDefault();this.dsClose.emit()}renderItem(e){const i=e.id===this.activeId;return o("button",{type:"button",class:{"mobile-sheet-nav__item":true,"mobile-sheet-nav__item--selected":i,"ds-control--lg":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":i?"page":undefined,onClick:()=>this.dsAreaSelect.emit(e.id)},o("ds-icon",{class:"ds-interaction-fill__content",name:e.icon,size:"lg",color:"inherit"}),o("ds-text",{class:"mobile-sheet-nav__item-label ds-interaction-fill__content",as:"span",variant:"text-body-large",emphasis:i,color:"inherit"},e.label),e.dot&&o("ds-badge",{class:"mobile-sheet-nav__dot ds-interaction-fill__content",variant:"dot",hasRing:false,label:"","aria-hidden":"true"}))}renderLogo(){return o("span",{class:"mobile-sheet-nav__logo","aria-hidden":"true"},o("svg",{class:"mobile-sheet-nav__logo-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},o("path",{d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"})))}renderHeaderDestination(e,i,s){return o("ds-tooltip",{label:s,side:"bottom",size:"sm"},o("ds-button-unfilled",{variant:"icon",size:"lg",icon:i,"aria-label":s,activeFill:false,hasBorder:false,onDsClick:()=>this.dsAreaSelect.emit(e)}))}render(){const e=[{...f[0],label:this.dashboardLabel},{...f[1],label:this.settingsLabel}];return o(n,{key:"bb17e735c4f2d8ea0cda61910eab262ee9acc355","aria-hidden":this.open?undefined:"true",inert:this.open?undefined:true},o("section",{key:"5d005a84990c3f6ebef9e119b3dfcd6379b3e7cf",id:"ds-mobile-sheet-nav",class:"mobile-sheet-nav"},o("header",{key:"7095e0a99dd3245a201692dc7ca69ffb50d8394f",class:{"mobile-sheet-nav__header":true,"mobile-sheet-nav__header--expanded-context":!this.showAccount,"ds-chrome-grid":true,"ds-chrome-space--md":true}},o("div",{key:"e9623a92d134f03db4f3f8644d0690b523a5b0ba",class:"mobile-sheet-nav__brand"},this.renderLogo()),o("ds-tab-group",{key:"2ef12ab3b7b4f6a6fcc8d617982a87fd9bd1ca66",class:"mobile-sheet-nav__context",tabs:e,value:this.browseContext,size:"lg",width:this.showAccount?"hug":"fill","aria-label":"Browse context",onDsChange:this.handleContextChange}),o("div",{key:"860d89eafa42650934cc3dcca97c8dfc1999037a",class:"mobile-sheet-nav__actions"},this.renderHeaderDestination("help","CircleQuestion",this.helpLabel),this.showAccount?this.renderHeaderDestination("account","Avatar",this.accountLabel):null)),o("nav",{key:"11fe92978c7c551d5ae488b3faea245b95d58848",class:"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md","aria-label":this.navigationLabel},o("div",{key:"f87e2c5d99bc8a11d0a7c224b98f38521b027438",class:"mobile-sheet-nav__sections"},this.groups.filter((e=>e.items.length>0)).map((e=>o("div",{class:"mobile-sheet-nav__items"},e.items.map((e=>this.renderItem(e))))))))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return b()}},[2,"ds-mobile-sheet-nav",{open:[516],browseContext:[1,"browse-context"],dashboardGroups:[16],settingsGroups:[16],currentUrl:[1,"current-url"],routeSelectionActive:[4,"route-selection-active"],navigationLabel:[1,"navigation-label"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],helpLabel:[1,"help-label"],showAccount:[4,"show-account"]},[[0,"keydown","handleKeyDown"]],{open:[{handleOpenChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-sheet-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-tab-group","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-mobile-sheet-nav":if(!customElements.get(t(e))){customElements.define(t(e),u)}break;case"ds-badge":if(!customElements.get(t(e))){a()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){d()}break;case"ds-icon":if(!customElements.get(t(e))){c()}break;case"ds-loader":if(!customElements.get(t(e))){l()}break;case"ds-tab-group":if(!customElements.get(t(e))){h()}break;case"ds-text":if(!customElements.get(t(e))){v()}break;case"ds-tooltip":if(!customElements.get(t(e))){m()}break}}))}g();export{u as M,g as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as i,c as s,h as o,a as n,t}from"./index.js";import{d as r}from"./p-BKp__CQX.js";import{d as a}from"./p-BUDAwJVV.js";import{d}from"./p-ag6Io-kL.js";import{d as c}from"./p-BFfLvMZd.js";import{d as l}from"./p-JPTkZ3Ji.js";import{d as h}from"./p-DAvh38E4.js";import{d as v}from"./p-CAnnQL1F.js";import{d as m}from"./p-iMuFgSoM.js";const b=()=>`.ds-control--lg.sc-ds-mobile-sheet-nav,.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav,.ds-control--sm.sc-ds-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-nav,.ds-control--xs.sc-ds-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--lg.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-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-chrome-space--sm.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--sm.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--md.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--lg.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav,.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav,.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-mobile-sheet-nav:root,.sc-ds-mobile-sheet-nav-h,.ds-forced-colors-scope.sc-ds-mobile-sheet-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-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring.sc-ds-mobile-sheet-nav,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-sheet-nav-h:focus-visible,.ds-focus-ring.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-sheet-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-mobile-sheet-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-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-mobile-sheet-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-sheet-nav:root,.sc-ds-mobile-sheet-nav-h,.ds-forced-colors-scope.sc-ds-mobile-sheet-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-interaction-fill.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill.sc-ds-mobile-sheet-nav{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-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::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-mobile-sheet-nav-h,.ds-interaction-fill--bordered.sc-ds-mobile-sheet-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill.sc-ds-mobile-sheet-nav>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill__content.sc-ds-mobile-sheet-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-bold.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-strong.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-media.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-sheet-nav{--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-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::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-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::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-mobile-sheet-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav: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-mobile-sheet-nav-h{display:block;min-width:0;min-height:0;height:100%;background:var(--color-background-primary)}.sc-ds-mobile-sheet-nav-h:not([open]){display:none}.mobile-sheet-nav.sc-ds-mobile-sheet-nav{display:grid;grid-template-rows:auto minmax(0, 1fr);height:100%;min-height:0;background:var(--color-background-primary)}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav{position:relative;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr)}.mobile-sheet-nav__header--expanded-context.sc-ds-mobile-sheet-nav{grid-template-columns:minmax(var(--dimension-size-500), 1fr) minmax(0, 4fr) minmax(var(--dimension-size-500), 1fr)}.mobile-sheet-nav__header--expanded-context.sc-ds-mobile-sheet-nav .mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{width:100%}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-sheet-nav__brand.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-start;min-width:0}.mobile-sheet-nav__logo.sc-ds-mobile-sheet-nav{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-500);height:var(--dimension-size-500);padding:var(--dimension-space-100);box-sizing:border-box;color:var(--color-foreground-primary)}.mobile-sheet-nav__logo-mark.sc-ds-mobile-sheet-nav{width:var(--dimension-iconography-lg);height:var(--dimension-iconography-lg);flex:0 0 auto}.mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{justify-self:center}.mobile-sheet-nav__actions.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--dimension-space-050);min-width:0}.mobile-sheet-nav__body.sc-ds-mobile-sheet-nav{min-height:0;overflow:auto;overscroll-behavior:contain}.mobile-sheet-nav__sections.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-400)}.mobile-sheet-nav__items.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-100)}.mobile-sheet-nav__item.sc-ds-mobile-sheet-nav{appearance:none;width:100%;height:var(--ds-control-height);min-height:var(--ds-control-height);padding-inline:var(--ds-control-padding-inline);border:0;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);cursor:default;text-align:start;box-sizing:border-box}.mobile-sheet-nav__item--selected.sc-ds-mobile-sheet-nav{color:var(--color-foreground-primary)}.mobile-sheet-nav__item-label.sc-ds-mobile-sheet-nav{min-width:0;padding-inline:var(--ds-control-label-inset)}.mobile-sheet-nav__dot.sc-ds-mobile-sheet-nav{margin-inline-start:auto}`;const f=[{id:"dashboard",label:"Dashboard",icon:"Dashboard",variant:"icon"},{id:"settings",label:"Settings",icon:"Gear",variant:"icon"}];const u=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAreaSelect=s(this,"dsAreaSelect",7);this.dsBrowseContextChange=s(this,"dsBrowseContextChange",7);this.dsClose=s(this,"dsClose",7);this.open=false;this.browseContext="dashboard";this.dashboardGroups=[];this.settingsGroups=[];this.currentUrl="";this.routeSelectionActive=true;this.navigationLabel="Application navigation";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.helpLabel="Help & Support";this.showAccount=true;this.handleContextChange=e=>{const i=e.detail==="settings"?"settings":"dashboard";if(i===this.browseContext)return;this.dsBrowseContextChange.emit(i)}}get groups(){return this.browseContext==="settings"?this.settingsGroups:this.dashboardGroups}get activeId(){if(!this.routeSelectionActive)return"";return r(this.currentUrl,[...this.dashboardGroups.flatMap((e=>e.items)),...this.settingsGroups.flatMap((e=>e.items))])}handleOpenChange(e){if(!e)return;requestAnimationFrame((()=>{const e=this.el.querySelector('[aria-current="page"]');const i=this.el.querySelector(".mobile-sheet-nav__item");(e??i)?.focus({preventScroll:true})}))}handleKeyDown(e){if(!this.open||e.key!=="Escape")return;e.preventDefault();this.dsClose.emit()}renderItem(e){const i=e.id===this.activeId;return o("button",{type:"button",class:{"mobile-sheet-nav__item":true,"mobile-sheet-nav__item--selected":i,"ds-control--lg":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":i?"page":undefined,onClick:()=>this.dsAreaSelect.emit(e.id)},o("ds-icon",{class:"ds-interaction-fill__content",name:e.icon,size:"lg",color:"inherit"}),o("ds-text",{class:"mobile-sheet-nav__item-label ds-interaction-fill__content",as:"span",variant:"text-body-large",emphasis:i,color:"inherit"},e.label),e.dot&&o("ds-badge",{class:"mobile-sheet-nav__dot ds-interaction-fill__content",variant:"dot",hasRing:false,label:"","aria-hidden":"true"}))}renderLogo(){return o("span",{class:"mobile-sheet-nav__logo","aria-hidden":"true"},o("svg",{class:"mobile-sheet-nav__logo-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},o("path",{d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"})))}renderHeaderDestination(e,i,s){return o("ds-tooltip",{label:s,side:"bottom",size:"sm"},o("ds-button-unfilled",{variant:"icon",size:"lg",icon:i,"aria-label":s,activeFill:false,hasBorder:false,onDsClick:()=>this.dsAreaSelect.emit(e)}))}render(){const e=[{...f[0],label:this.dashboardLabel},{...f[1],label:this.settingsLabel}];return o(n,{key:"937e842b9fb55c5e0adc7446b1fe886a253f491f","aria-hidden":this.open?undefined:"true",inert:this.open?undefined:true},o("section",{key:"2188e3a3515462f52494b0aed9241a47a4eb2ec7",id:"ds-mobile-sheet-nav",class:"mobile-sheet-nav"},o("header",{key:"f6c8dd05912e8c33e78747e8295f11d52308ad2b",class:{"mobile-sheet-nav__header":true,"mobile-sheet-nav__header--expanded-context":!this.showAccount,"ds-chrome-grid":true,"ds-chrome-space--md":true}},o("div",{key:"533809f3e3c2ee02b9fca67e5b3ff1ee76271ce2",class:"mobile-sheet-nav__brand"},this.renderLogo()),o("ds-tab-group",{key:"8b2c9663394f46635bdf52cd73c6699036e459d2",class:"mobile-sheet-nav__context",tabs:e,value:this.browseContext,size:"lg",width:this.showAccount?"hug":"fill","aria-label":"Browse context",onDsChange:this.handleContextChange}),o("div",{key:"57caf5e39a33995d4cb0e016d01530d5bb93af79",class:"mobile-sheet-nav__actions"},this.renderHeaderDestination("help","CircleQuestion",this.helpLabel),this.showAccount?this.renderHeaderDestination("account","Avatar",this.accountLabel):null)),o("nav",{key:"dddae656c561b5982f94acc0079da375412f061e",class:"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md","aria-label":this.navigationLabel},o("div",{key:"06bacd03ca73cc068b0a3a256c20c622295cd5d5",class:"mobile-sheet-nav__sections"},this.groups.filter((e=>e.items.length>0)).map((e=>o("div",{class:"mobile-sheet-nav__items"},e.items.map((e=>this.renderItem(e))))))))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return b()}},[2,"ds-mobile-sheet-nav",{open:[516],browseContext:[1,"browse-context"],dashboardGroups:[16],settingsGroups:[16],currentUrl:[1,"current-url"],routeSelectionActive:[4,"route-selection-active"],navigationLabel:[1,"navigation-label"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],helpLabel:[1,"help-label"],showAccount:[4,"show-account"]},[[0,"keydown","handleKeyDown"]],{open:[{handleOpenChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-sheet-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-tab-group","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-mobile-sheet-nav":if(!customElements.get(t(e))){customElements.define(t(e),u)}break;case"ds-badge":if(!customElements.get(t(e))){a()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){d()}break;case"ds-icon":if(!customElements.get(t(e))){c()}break;case"ds-loader":if(!customElements.get(t(e))){l()}break;case"ds-tab-group":if(!customElements.get(t(e))){h()}break;case"ds-text":if(!customElements.get(t(e))){v()}break;case"ds-tooltip":if(!customElements.get(t(e))){m()}break}}))}g();export{u as M,g as d};
|
|
2
|
+
//# sourceMappingURL=p-B_jZIC9R.js.map
|