@ds-mo/ui 14.19.0 → 14.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +1 -1
- 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-avatar.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-banner.js.map +1 -1
- package/dist/components/ds-bar-action.js +1 -1
- package/dist/components/ds-bar-action.js.map +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-bar-workflow.js.map +1 -1
- package/dist/components/ds-breadcrumb.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-chart.js.map +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-overview.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-setting.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/ds-chart.js +1 -1
- package/dist/components/ds-chart.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-chip.js.map +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-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-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-loader.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-bubble.js +1 -1
- package/dist/components/ds-message-bubble.js.map +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-composer.js.map +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message-scroller.js.map +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js.map +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tool-search.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-scroll-overlay.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-app.js.map +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table-filter.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-sort.js.map +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/p-0XTyQNRG.js +2 -0
- package/dist/components/{p-JPTkZ3Ji.js.map → p-0XTyQNRG.js.map} +1 -1
- package/dist/components/{p-DFQ9mcbK.js → p-1YHFQeI7.js} +1 -1
- package/dist/components/p-1YHFQeI7.js.map +1 -0
- package/dist/components/p-B-HsfQOK.js +2 -0
- package/dist/components/p-B-HsfQOK.js.map +1 -0
- package/dist/components/p-B4wTnsUL.js +2 -0
- package/dist/components/p-B4wTnsUL.js.map +1 -0
- package/dist/components/p-B6WQre5D.js +2 -0
- package/dist/components/p-B6WQre5D.js.map +1 -0
- package/dist/components/{p-B1JRCDHS.js → p-BHhmB9-4.js} +2 -2
- package/dist/components/{p-B1JRCDHS.js.map → p-BHhmB9-4.js.map} +1 -1
- package/dist/components/{p-DaAXY-XS.js → p-BNq9fr9S.js} +2 -2
- package/dist/components/p-BNq9fr9S.js.map +1 -0
- package/dist/components/{p-BKp__CQX.js → p-BWwiCvep.js} +2 -2
- package/dist/components/p-BWwiCvep.js.map +1 -0
- package/dist/components/{p-BBG6Sswb.js → p-BYFS2qWb.js} +2 -2
- package/dist/components/{p-BBG6Sswb.js.map → p-BYFS2qWb.js.map} +1 -1
- package/dist/components/{p-uI6z53BE.js → p-Bb4KnRy0.js} +2 -2
- package/dist/components/{p-HB_cf_aR.js → p-BeA6Jv-3.js} +2 -2
- package/dist/components/{p-HB_cf_aR.js.map → p-BeA6Jv-3.js.map} +1 -1
- package/dist/components/{p-Bbb9A3NV.js → p-BjRD57w3.js} +2 -2
- package/dist/components/p-BjRD57w3.js.map +1 -0
- package/dist/components/{p-BS0AbMNK.js → p-BmlGeaY8.js} +2 -2
- package/dist/components/p-BmlGeaY8.js.map +1 -0
- package/dist/components/{p-r8PMqlqm.js → p-BubgDQlb.js} +2 -2
- package/dist/components/p-BubgDQlb.js.map +1 -0
- package/dist/components/{p-BNkU9dcc.js → p-Bv6FSDPR.js} +2 -2
- package/dist/components/{p-BNkU9dcc.js.map → p-Bv6FSDPR.js.map} +1 -1
- package/dist/components/p-Bx1IHqJb.js +2 -0
- package/dist/components/p-Bx1IHqJb.js.map +1 -0
- package/dist/components/{p-D3fMaUJ3.js → p-Bx5BSd6F.js} +2 -2
- package/dist/components/p-Bx5BSd6F.js.map +1 -0
- package/dist/components/{p-B8q-6a03.js → p-C0qN3PSb.js} +1 -1
- package/dist/components/{p-B8q-6a03.js.map → p-C0qN3PSb.js.map} +1 -1
- package/dist/components/{p-ZpQBAwZC.js → p-CFsLF-ts.js} +2 -2
- package/dist/components/p-CFsLF-ts.js.map +1 -0
- package/dist/components/p-CKtJ6FHM.js +2 -0
- package/dist/components/p-CKtJ6FHM.js.map +1 -0
- package/dist/components/p-CRSwNbPk.js +2 -0
- package/dist/components/p-CRSwNbPk.js.map +1 -0
- package/dist/components/{p-BFfLvMZd.js → p-Cea7rROU.js} +2 -2
- package/dist/components/{p-BFfLvMZd.js.map → p-Cea7rROU.js.map} +1 -1
- package/dist/components/{p-B0Byw6OX.js → p-CgGcgMjs.js} +1 -1
- package/dist/components/{p-B0Byw6OX.js.map → p-CgGcgMjs.js.map} +1 -1
- package/dist/components/{p-C-Y7gYgz.js → p-ChfVRPHw.js} +2 -2
- package/dist/components/p-ChfVRPHw.js.map +1 -0
- package/dist/components/{p-CJq3n5kA.js → p-Ck1hgD6g.js} +2 -2
- package/dist/components/p-Ck1hgD6g.js.map +1 -0
- package/dist/components/{p-BMc0DE59.js → p-CochmPyg.js} +1 -1
- package/dist/components/p-CochmPyg.js.map +1 -0
- package/dist/components/{p-iMuFgSoM.js → p-Cp5Hr7Vz.js} +2 -2
- package/dist/components/p-Cp5Hr7Vz.js.map +1 -0
- package/dist/components/p-CpUXubax.js +2 -0
- package/dist/components/{p-DtndC9f1.js.map → p-CpUXubax.js.map} +1 -1
- package/dist/components/{p-BNiuAMeh.js → p-Crz606uD.js} +2 -2
- package/dist/components/p-Crz606uD.js.map +1 -0
- package/dist/components/p-Cxr0IQjC.js.map +1 -1
- package/dist/components/p-D-MWvpg6.js +2 -0
- package/dist/components/p-D-MWvpg6.js.map +1 -0
- package/dist/components/{p-Bu3dOjpW.js → p-D7v6Na7U.js} +2 -2
- package/dist/components/{p-Bu3dOjpW.js.map → p-D7v6Na7U.js.map} +1 -1
- package/dist/components/{p-C6DNhlES.js → p-DA5H_Iq_.js} +1 -1
- package/dist/components/p-DA5H_Iq_.js.map +1 -0
- package/dist/components/p-DBYCwq9L.js +2 -0
- package/dist/components/{p-DOUDRJbE.js.map → p-DBYCwq9L.js.map} +1 -1
- package/dist/components/{p-CY4YFAT3.js → p-DCbKsABt.js} +1 -1
- package/dist/components/p-DCbKsABt.js.map +1 -0
- package/dist/components/{p-C6R5Lft0.js → p-DFC0sRM-.js} +2 -2
- package/dist/components/p-DFC0sRM-.js.map +1 -0
- package/dist/components/{p-CsBICYmt.js → p-DGkn8FwV.js} +2 -2
- package/dist/components/p-DGkn8FwV.js.map +1 -0
- package/dist/components/p-DIqT1m2r.js +2 -0
- package/dist/components/p-DIqT1m2r.js.map +1 -0
- package/dist/components/p-DKt_8s-U.js +2 -0
- package/dist/components/p-DKt_8s-U.js.map +1 -0
- package/dist/components/p-DOUk4KoT.js.map +1 -1
- package/dist/components/p-DQBT1Jkf.js +2 -0
- package/dist/components/p-DQBT1Jkf.js.map +1 -0
- package/dist/components/p-DW5Ita-P.js +2 -0
- package/dist/components/{p-DUdOmSFR.js.map → p-DW5Ita-P.js.map} +1 -1
- package/dist/components/{p-DNpLDbWY.js → p-DZ58Sg5a.js} +1 -1
- package/dist/components/p-DZ58Sg5a.js.map +1 -0
- package/dist/components/{p-DDgeXGbB.js → p-DZv2g9Pe.js} +2 -2
- package/dist/components/p-DZv2g9Pe.js.map +1 -0
- package/dist/components/{p-BknXYAEc.js → p-DdH7b4JF.js} +2 -2
- package/dist/components/p-DdH7b4JF.js.map +1 -0
- package/dist/components/{p-DBue3ISk.js → p-Demfba7T.js} +2 -2
- package/dist/components/p-Demfba7T.js.map +1 -0
- package/dist/components/p-Djxw2FjZ.js +2 -0
- package/dist/components/{p-CwjVgUqy.js.map → p-Djxw2FjZ.js.map} +1 -1
- package/dist/components/p-DmWoFSGs.js +2 -0
- package/dist/components/p-DmWoFSGs.js.map +1 -0
- package/dist/components/p-Do8wbFff.js +2 -0
- package/dist/components/p-Do8wbFff.js.map +1 -0
- package/dist/components/p-Drnyq8z7.js +2 -0
- package/dist/components/p-Drnyq8z7.js.map +1 -0
- package/dist/components/p-DsgEY6mZ.js +2 -0
- package/dist/components/p-DsgEY6mZ.js.map +1 -0
- package/dist/components/p-Is1lFmwp.js +2 -0
- package/dist/components/p-Is1lFmwp.js.map +1 -0
- package/dist/components/{p-BUDAwJVV.js → p-caLOcQUK.js} +2 -2
- package/dist/components/p-caLOcQUK.js.map +1 -0
- package/dist/components/{p-D1eEgwcP.js → p-etg-Uk1u.js} +1 -1
- package/dist/components/{p-D1eEgwcP.js.map → p-etg-Uk1u.js.map} +1 -1
- package/dist/components/{p-C9gC4haA.js → p-fRDzpfi9.js} +2 -2
- package/dist/components/p-fRDzpfi9.js.map +1 -0
- package/dist/components/{p-C-vRkDyn.js → p-rCeztgVn.js} +1 -1
- package/dist/components/{p-C-vRkDyn.js.map → p-rCeztgVn.js.map} +1 -1
- package/dist/components/{p-B_jZIC9R.js → p-vrotWZxt.js} +2 -2
- package/dist/components/{p-B_jZIC9R.js.map → p-vrotWZxt.js.map} +1 -1
- package/dist/docs/components.json +6 -6
- package/dist/lib/shell/index.d.ts +2 -2
- package/dist/lib/shell/index.js +8 -6
- package/dist/lib/shell/index.js.map +2 -2
- package/dist/lib/toast/index.js +1 -4
- package/dist/lib/toast/index.js.map +2 -2
- package/dist/lib/utils/index.d.ts +1 -1
- package/dist/lib/utils/index.js +104 -22
- package/dist/lib/utils/index.js.map +2 -2
- package/dist/mcp/cli.js +70 -31
- package/dist/mcp-data/registry/agent-activity.json +1 -1
- package/dist/mcp-data/registry/agent-questionnaire.json +3 -3
- package/dist/mcp-data/registry/agent-source-list.json +2 -2
- package/dist/mcp-data/registry/agent-tool-call.json +2 -2
- package/dist/mcp-data/registry/attachment-list.json +1 -1
- package/dist/mcp-data/registry/badge.json +1 -1
- package/dist/mcp-data/registry/banner.json +2 -2
- package/dist/mcp-data/registry/bar-action.json +1 -1
- package/dist/mcp-data/registry/bar-nav.json +3 -3
- package/dist/mcp-data/registry/bar-workflow.json +1 -1
- package/dist/mcp-data/registry/breadcrumb.json +1 -1
- package/dist/mcp-data/registry/button-filled.json +1 -1
- package/dist/mcp-data/registry/button-unfilled.json +1 -1
- package/dist/mcp-data/registry/card-chart.json +2 -2
- package/dist/mcp-data/registry/card-overview.json +3 -3
- package/dist/mcp-data/registry/card-setting.json +1 -1
- package/dist/mcp-data/registry/chart-legend.json +1 -1
- package/dist/mcp-data/registry/chart.json +1 -1
- package/dist/mcp-data/registry/checkbox.json +1 -1
- package/dist/mcp-data/registry/chip.json +1 -1
- package/dist/mcp-data/registry/code-block.json +1 -1
- package/dist/mcp-data/registry/conversation-list-item.json +1 -1
- package/dist/mcp-data/registry/conversation-list.json +2 -2
- package/dist/mcp-data/registry/divider.json +1 -1
- package/dist/mcp-data/registry/empty-state.json +1 -1
- package/dist/mcp-data/registry/field.json +1 -1
- package/dist/mcp-data/registry/filter-menu.json +1 -1
- package/dist/mcp-data/registry/icon.json +2 -2
- package/dist/mcp-data/registry/input.json +2 -2
- package/dist/mcp-data/registry/loader.json +1 -1
- package/dist/mcp-data/registry/menu.json +3 -3
- package/dist/mcp-data/registry/message-bubble.json +1 -1
- package/dist/mcp-data/registry/message-composer.json +2 -2
- package/dist/mcp-data/registry/message-scroller.json +3 -3
- package/dist/mcp-data/registry/mobile-bar-nav.json +1 -1
- package/dist/mcp-data/registry/mobile-header.json +2 -2
- package/dist/mcp-data/registry/mobile-section-switcher.json +2 -2
- package/dist/mcp-data/registry/mobile-sheet-nav.json +1 -1
- package/dist/mcp-data/registry/modal.json +2 -2
- package/dist/mcp-data/registry/pagination.json +2 -2
- package/dist/mcp-data/registry/panel-nav.json +2 -2
- package/dist/mcp-data/registry/panel-sub-nav.json +1 -1
- package/dist/mcp-data/registry/panel-tool-header.json +1 -1
- package/dist/mcp-data/registry/panel-tool-search.json +1 -1
- package/dist/mcp-data/registry/panel-tools.json +2 -2
- package/dist/mcp-data/registry/radio.json +1 -1
- package/dist/mcp-data/registry/select.json +1 -1
- package/dist/mcp-data/registry/shell-app.json +2 -2
- package/dist/mcp-data/registry/shell-page.json +1 -1
- package/dist/mcp-data/registry/shell-tools.json +1 -1
- package/dist/mcp-data/registry/skeleton.json +2 -2
- package/dist/mcp-data/registry/slider.json +2 -2
- package/dist/mcp-data/registry/swatch-picker.json +3 -3
- package/dist/mcp-data/registry/switch.json +2 -2
- package/dist/mcp-data/registry/tab-group.json +2 -2
- package/dist/mcp-data/registry/table-sort.json +1 -1
- package/dist/mcp-data/registry/table.json +18 -18
- package/dist/mcp-data/registry/tag.json +2 -2
- package/dist/mcp-data/registry/text.json +4 -4
- package/dist/mcp-data/registry/toast.json +2 -2
- package/dist/mcp-data/registry/tooltip-chart.json +2 -2
- package/dist/mcp-data/registry/tooltip.json +2 -2
- package/dist/styles/prose.css +42 -38
- package/dist/styles/table.css +39 -67
- package/dist/types/components/CardSetting/index.d.ts +1 -1
- package/dist/types/components/TooltipChart/index.d.ts +1 -1
- package/dist/types/shell/index.d.ts +2 -2
- package/dist/types/utils/index.d.ts +1 -1
- package/package.json +11 -1
- package/dist/components/p--CRAu9fJ.js +0 -2
- package/dist/components/p--CRAu9fJ.js.map +0 -1
- package/dist/components/p-BCOl1x0_.js +0 -2
- package/dist/components/p-BCOl1x0_.js.map +0 -1
- package/dist/components/p-BHVOiWz5.js +0 -2
- package/dist/components/p-BHVOiWz5.js.map +0 -1
- package/dist/components/p-BKp__CQX.js.map +0 -1
- package/dist/components/p-BMc0DE59.js.map +0 -1
- package/dist/components/p-BNiuAMeh.js.map +0 -1
- package/dist/components/p-BPG0r_mC.js +0 -2
- package/dist/components/p-BPG0r_mC.js.map +0 -1
- package/dist/components/p-BS0AbMNK.js.map +0 -1
- package/dist/components/p-BUDAwJVV.js.map +0 -1
- package/dist/components/p-BZVWmzKf.js +0 -2
- package/dist/components/p-BZVWmzKf.js.map +0 -1
- package/dist/components/p-Bbb9A3NV.js.map +0 -1
- package/dist/components/p-BhYS_Ump.js +0 -2
- package/dist/components/p-BhYS_Ump.js.map +0 -1
- package/dist/components/p-BknXYAEc.js.map +0 -1
- package/dist/components/p-BxGQ3cRJ.js +0 -2
- package/dist/components/p-BxGQ3cRJ.js.map +0 -1
- package/dist/components/p-BysVBVQv.js +0 -2
- package/dist/components/p-BysVBVQv.js.map +0 -1
- package/dist/components/p-C-Y7gYgz.js.map +0 -1
- package/dist/components/p-C6DNhlES.js.map +0 -1
- package/dist/components/p-C6R5Lft0.js.map +0 -1
- package/dist/components/p-C9gC4haA.js.map +0 -1
- package/dist/components/p-CAnnQL1F.js +0 -2
- package/dist/components/p-CAnnQL1F.js.map +0 -1
- package/dist/components/p-CJq3n5kA.js.map +0 -1
- package/dist/components/p-CY4YFAT3.js.map +0 -1
- package/dist/components/p-Cg0kimXZ.js +0 -2
- package/dist/components/p-Cg0kimXZ.js.map +0 -1
- package/dist/components/p-CsBICYmt.js.map +0 -1
- package/dist/components/p-CwjVgUqy.js +0 -2
- package/dist/components/p-D3fMaUJ3.js.map +0 -1
- package/dist/components/p-D7R4yE2C.js +0 -2
- package/dist/components/p-D7R4yE2C.js.map +0 -1
- package/dist/components/p-DAvh38E4.js +0 -2
- package/dist/components/p-DAvh38E4.js.map +0 -1
- package/dist/components/p-DBue3ISk.js.map +0 -1
- package/dist/components/p-DDgeXGbB.js.map +0 -1
- package/dist/components/p-DFQ9mcbK.js.map +0 -1
- package/dist/components/p-DNpLDbWY.js.map +0 -1
- package/dist/components/p-DOUDRJbE.js +0 -2
- package/dist/components/p-DUdOmSFR.js +0 -2
- package/dist/components/p-DaAXY-XS.js.map +0 -1
- package/dist/components/p-DlYw4UGQ.js +0 -2
- package/dist/components/p-DlYw4UGQ.js.map +0 -1
- package/dist/components/p-DtndC9f1.js +0 -2
- package/dist/components/p-JPTkZ3Ji.js +0 -2
- package/dist/components/p-ZpQBAwZC.js.map +0 -1
- package/dist/components/p-ag6Io-kL.js +0 -2
- package/dist/components/p-ag6Io-kL.js.map +0 -1
- package/dist/components/p-fg9EKoZp.js +0 -2
- package/dist/components/p-fg9EKoZp.js.map +0 -1
- package/dist/components/p-iMuFgSoM.js.map +0 -1
- package/dist/components/p-r8PMqlqm.js.map +0 -1
- /package/dist/components/{p-uI6z53BE.js.map → p-Bb4KnRy0.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-B-HsfQOK.js";const r=()=>`.ds-field-stack.sc-ds-field-h,.ds-field-stack.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.sc-ds-field-h{display:block}.field__control.sc-ds-field{display:flex;min-width:0}.field__control.sc-ds-field>*.sc-ds-field{width:100%}`;let a=0;const o=e=>e?.split(/\s+/).filter(Boolean)??[];const l=(...e)=>[...new Set(e.flat())];const h=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.error=false;this.focused=false;this.filled=false;this.dirty=false;this.touched=false;this.controlDisabled=false;this.controlRequired=false;this.generatedId=`ds-field-${++a}`;this.initialValue="";this.authoredAria=new WeakMap;this.syncControl=()=>{const e=this.findControl();if(!e)return;if(e!==this.control){this.control=e;this.initialValue=this.readValue(e);this.authoredAria.set(e,{labelledby:o(e.getAttribute("aria-labelledby")),describedby:o(e.getAttribute("aria-describedby"))})}const t=e.tagName.startsWith("DS-");if(t&&"inputId"in e)e.inputId=this.controlId;else this.updateControlAttribute(e,"id",this.controlId);const i=this.authoredAria.get(e)??{labelledby:[],describedby:[]};const s=l(i.labelledby,[this.labelId]).join(" ");const d=l(i.describedby,this.renderedDescription?[this.descriptionId]:[],this.renderedError?[this.errorId]:[]).join(" ");this.updateControlAttribute(e,"aria-labelledby",s);this.updateControlAttribute(e,"aria-describedby",d||undefined);this.updateControlAttribute(e,"aria-invalid",this.error?"true":undefined);if(t&&"error"in e&&e.error!==this.error)e.error=this.error;const n=this.readValue(e);this.filled=n.length>0;this.dirty=n!==this.initialValue;this.controlDisabled=Boolean(e.disabled||e.isInactive||e.hasAttribute("disabled"));this.controlRequired=Boolean(e.required||e.hasAttribute("required"))};this.handleLabelClick=e=>{if(!this.control?.tagName.startsWith("DS-"))return;e.preventDefault();this.control.setFocus?.()};this.handleFocusIn=()=>{this.focused=true};this.handleFocusOut=e=>{if(e.relatedTarget instanceof Node&&this.el.contains(e.relatedTarget))return;this.focused=false;this.touched=true};this.handleValueChange=()=>{this.syncControl()}}componentDidLoad(){this.syncControl();requestAnimationFrame((()=>this.syncControl()))}componentDidRender(){this.syncControl()}onFieldContractChange(){this.syncControl()}get controlId(){return this.fieldId||this.generatedId}get labelId(){return`${this.controlId}-label`}get descriptionId(){return`${this.controlId}-description`}get errorId(){return`${this.controlId}-error`}get renderedDescription(){return Boolean(this.description)&&!this.renderedError}get renderedError(){return this.error&&Boolean(this.errorMessage)}readValue(e){const t=e.value;return Array.isArray(t)?t.join(""):String(t??"")}updateControlAttribute(e,t,i){if(i===undefined){if(e.hasAttribute(t))e.removeAttribute(t);return}if(e.getAttribute(t)!==i)e.setAttribute(t,i)}findControl(){return this.controlContainer?.querySelector(":scope > :not(slot)")??undefined}render(){return i(s,{key:"ed769d3707274f7db253523379c2dae228d3f825","data-focused":this.focused?"":undefined,"data-filled":this.filled?"":undefined,"data-dirty":this.dirty?"":undefined,"data-touched":this.touched?"":undefined,"data-invalid":this.error?"":undefined,"data-disabled":this.controlDisabled?"":undefined,"data-required":this.controlRequired?"":undefined,onFocusin:this.handleFocusIn,onFocusout:this.handleFocusOut,onInput:this.handleValueChange,onChange:this.handleValueChange,onDsChange:this.handleValueChange},i("div",{key:"b8a79bd36713db716b7cd5e2687a85968cb1431f",class:"field ds-field-stack"},i("ds-text",{key:"03de5b6df70a18d1803f972ef0997771823e7fde",class:"field__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:this.controlId,textId:this.labelId,onClick:this.handleLabelClick},this.label),i("div",{key:"78f1cfdd050e30a3f05248d4e4458a112d8dfe2b",class:"field__control",ref:e=>this.controlContainer=e},i("slot",{key:"1631bf35710f9a085a5f3bdab653f2abeff9a612",onSlotchange:this.syncControl})),this.renderedDescription&&i("ds-text",{key:"8a10b68d3fdb594094e24cdf7955ea6ba0e0d897",class:"field__description",as:"div",variant:"text-body-small",color:"secondary",textId:this.descriptionId},this.description),this.renderedError&&i("ds-text",{key:"f8d1497d188a285051b4b3cabd45bf77f818e44b",class:"field__error",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage)))}get el(){return this}static get watchers(){return{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}}static get style(){return r()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"],description:[1],error:[4],errorMessage:[1,"error-message"],focused:[32],filled:[32],dirty:[32],touched:[32],controlDisabled:[32],controlRequired:[32]},undefined,{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(d(e))){customElements.define(d(e),h)}break;case"ds-text":if(!customElements.get(d(e))){n()}break}}))}f();export{h as F,f as d};
|
|
2
|
+
//# sourceMappingURL=p-BjRD57w3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["fieldCss","fieldCounter","tokens","value","split","filter","Boolean","uniqueTokens","groups","Set","flat","Field","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","error","focused","filled","dirty","touched","controlDisabled","controlRequired","generatedId","initialValue","authoredAria","WeakMap","syncControl","control","findControl","readValue","set","labelledby","getAttribute","describedby","isDsControl","tagName","startsWith","inputId","controlId","updateControlAttribute","authored","get","labelId","join","renderedDescription","descriptionId","renderedError","errorId","undefined","length","disabled","isInactive","hasAttribute","required","handleLabelClick","event","preventDefault","setFocus","handleFocusIn","handleFocusOut","relatedTarget","Node","el","contains","handleValueChange","componentDidLoad","requestAnimationFrame","componentDidRender","onFieldContractChange","fieldId","description","errorMessage","Array","isArray","String","name","removeAttribute","setAttribute","controlContainer","querySelector","render","h","Host","key","onFocusin","onFocusout","onInput","onChange","onDsChange","class","as","variant","color","emphasis","for","textId","onClick","label","ref","onSlotchange","role"],"sources":["src/wc/components/Field/Field.css?tag=ds-field&encapsulation=scoped","src/wc/components/Field/Field.tsx"],"sourcesContent":["@import '../../utils/field-stack.css';\n\n:host {\n display: block;\n}\n\n.field__control {\n display: flex;\n min-width: 0;\n}\n\n.field__control > * {\n width: 100%;\n}\n","import { Component, Element, Prop, State, Watch, h, Host } from '@stencil/core';\n\ninterface FieldControl extends HTMLElement {\n value?: string | string[];\n inputId?: string;\n error?: boolean;\n disabled?: boolean;\n isInactive?: boolean;\n required?: boolean;\n setFocus?: () => Promise<void> | void;\n}\n\ninterface AuthoredAria {\n labelledby: string[];\n describedby: string[];\n}\n\nlet fieldCounter = 0;\n\nconst tokens = (value: string | null | undefined): string[] =>\n value?.split(/\\s+/).filter(Boolean) ?? [];\n\nconst uniqueTokens = (...groups: string[][]): string[] => [...new Set(groups.flat())];\n\n@Component({\n tag: 'ds-field',\n styleUrl: 'Field.css',\n scoped: true,\n})\nexport class Field {\n @Element() el!: HTMLElement;\n\n /** Persistent visible label for the single slotted control. */\n @Prop() label!: string;\n /** Explicit ID for the slotted control; generated when omitted. */\n @Prop() fieldId: string | undefined;\n /** Optional guidance associated with the slotted control while no visible error is shown. */\n @Prop() description: string | undefined;\n /** Invalid visual and accessible state forwarded to supported ds controls. */\n @Prop() error: boolean = false;\n /** Visible error associated with the slotted control while error is true. */\n @Prop() errorMessage: string | undefined;\n\n @State() private focused = false;\n @State() private filled = false;\n @State() private dirty = false;\n @State() private touched = false;\n @State() private controlDisabled = false;\n @State() private controlRequired = false;\n\n private readonly generatedId = `ds-field-${++fieldCounter}`;\n private controlContainer?: HTMLDivElement;\n private control?: FieldControl;\n private initialValue = '';\n private authoredAria = new WeakMap<FieldControl, AuthoredAria>();\n\n componentDidLoad() {\n this.syncControl();\n requestAnimationFrame(() => this.syncControl());\n }\n\n componentDidRender() {\n this.syncControl();\n }\n\n @Watch('fieldId')\n @Watch('description')\n @Watch('error')\n @Watch('errorMessage')\n onFieldContractChange() {\n this.syncControl();\n }\n\n private get controlId(): string {\n return this.fieldId || this.generatedId;\n }\n\n private get labelId(): string {\n return `${this.controlId}-label`;\n }\n\n private get descriptionId(): string {\n return `${this.controlId}-description`;\n }\n\n private get errorId(): string {\n return `${this.controlId}-error`;\n }\n\n private get renderedDescription(): boolean {\n return Boolean(this.description) && !this.renderedError;\n }\n\n private get renderedError(): boolean {\n return this.error && Boolean(this.errorMessage);\n }\n\n private readValue(control: FieldControl): string {\n const value = control.value;\n return Array.isArray(value) ? value.join('\\u001f') : String(value ?? '');\n }\n\n private updateControlAttribute(control: FieldControl, name: string, value: string | undefined) {\n if (value === undefined) {\n if (control.hasAttribute(name)) control.removeAttribute(name);\n return;\n }\n if (control.getAttribute(name) !== value) control.setAttribute(name, value);\n }\n\n private findControl(): FieldControl | undefined {\n return this.controlContainer?.querySelector<FieldControl>(':scope > :not(slot)') ?? undefined;\n }\n\n private syncControl = () => {\n const control = this.findControl();\n if (!control) return;\n\n if (control !== this.control) {\n this.control = control;\n this.initialValue = this.readValue(control);\n this.authoredAria.set(control, {\n labelledby: tokens(control.getAttribute('aria-labelledby')),\n describedby: tokens(control.getAttribute('aria-describedby')),\n });\n }\n\n const isDsControl = control.tagName.startsWith('DS-');\n if (isDsControl && 'inputId' in control) control.inputId = this.controlId;\n else this.updateControlAttribute(control, 'id', this.controlId);\n\n const authored = this.authoredAria.get(control) ?? { labelledby: [], describedby: [] };\n const labelledby = uniqueTokens(authored.labelledby, [this.labelId]).join(' ');\n const describedby = uniqueTokens(\n authored.describedby,\n this.renderedDescription ? [this.descriptionId] : [],\n this.renderedError ? [this.errorId] : []\n ).join(' ');\n\n this.updateControlAttribute(control, 'aria-labelledby', labelledby);\n this.updateControlAttribute(control, 'aria-describedby', describedby || undefined);\n this.updateControlAttribute(control, 'aria-invalid', this.error ? 'true' : undefined);\n\n if (isDsControl && 'error' in control && control.error !== this.error)\n control.error = this.error;\n\n const value = this.readValue(control);\n this.filled = value.length > 0;\n this.dirty = value !== this.initialValue;\n this.controlDisabled = Boolean(\n control.disabled || control.isInactive || control.hasAttribute('disabled')\n );\n this.controlRequired = Boolean(control.required || control.hasAttribute('required'));\n };\n\n private handleLabelClick = (event: MouseEvent) => {\n if (!this.control?.tagName.startsWith('DS-')) return;\n event.preventDefault();\n this.control.setFocus?.();\n };\n\n private handleFocusIn = () => {\n this.focused = true;\n };\n\n private handleFocusOut = (event: FocusEvent) => {\n if (event.relatedTarget instanceof Node && this.el.contains(event.relatedTarget)) return;\n this.focused = false;\n this.touched = true;\n };\n\n private handleValueChange = () => {\n this.syncControl();\n };\n\n render() {\n return (\n <Host\n data-focused={this.focused ? '' : undefined}\n data-filled={this.filled ? '' : undefined}\n data-dirty={this.dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n data-invalid={this.error ? '' : undefined}\n data-disabled={this.controlDisabled ? '' : undefined}\n data-required={this.controlRequired ? '' : undefined}\n onFocusin={this.handleFocusIn}\n onFocusout={this.handleFocusOut}\n onInput={this.handleValueChange}\n onChange={this.handleValueChange}\n onDsChange={this.handleValueChange}\n >\n <div class=\"field ds-field-stack\">\n <ds-text\n class=\"field__label\"\n as=\"label\"\n variant=\"text-body-small\"\n color=\"primary\"\n emphasis\n for={this.controlId}\n textId={this.labelId}\n onClick={this.handleLabelClick}\n >\n {this.label}\n </ds-text>\n <div class=\"field__control\" ref={el => (this.controlContainer = el)}>\n <slot onSlotchange={this.syncControl} />\n </div>\n {this.renderedDescription && (\n <ds-text\n class=\"field__description\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"secondary\"\n textId={this.descriptionId}\n >\n {this.description}\n </ds-text>\n )}\n {this.renderedError && (\n <ds-text\n class=\"field__error\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"negative\"\n textId={this.errorId}\n role=\"alert\"\n >\n {this.errorMessage}\n </ds-text>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -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-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-
|
|
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-caLOcQUK.js";import{d as c}from"./p-DIqT1m2r.js";import{d as l}from"./p-Cea7rROU.js";import{d as h}from"./p-0XTyQNRG.js";import{d as b}from"./p-CKtJ6FHM.js";import{d as v}from"./p-Do8wbFff.js";import{d as f}from"./p-DGkn8FwV.js";import{d as u}from"./p-DQBT1Jkf.js";import{d as p}from"./p-B-HsfQOK.js";import{d as g}from"./p-Cp5Hr7Vz.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 M{constructor(){this.active=false}enter(){this.active=true}exit(){this.active=false}get isActive(){return this.active}}function O(s){let e=0;return{schedule(){if(e!==0)return;e=requestAnimationFrame((()=>{e=0;s()}))},cancel(){if(e!==0){cancelAnimationFrame(e);e=0}}}}function H(s){return s.detail?.source}function z(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 j=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=t(this,"dsTabChange",7);this.navStyle="dashboard";this.tabs=[];this.value="";this.basePath="";this.currentUrl="";this.moreTabsLabel="More tabs";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.focusedTabId="";this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabListEl=null;this.probeTabListEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new M;this.panelToolsTransition=new M;this.overflowCoalescer=O((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const e=H(s);if(e==="panel-nav"){this.panelNavTransition.enter();return}if(e==="panel-tools"){const e=z(s)??"opening";if(e==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const e=H(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:"f0194ba7e46462be16316006c650edf9bd77c7a0"},i("header",{key:"7c816dc85a90e8ce2ec43be3e5cb751373bcd4c6",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:"c87c7c4115667ec619a061faed929223bd049392",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:"e2e6ed4e596431e3c3c3a9d11208747eacb53f02",class:"bar-nav__left"},i("div",{key:`visible-${t}`,class:"bar-nav__tabs-visible"},this.renderTabList(r,false))),e&&!this.tabLayoutCommitted&&i("div",{key:"ed2aec637dde0a8d63b3416c21f8fc7fca056a45",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!e&&this.heading&&i("ds-text",{key:"6bffab32812149de95b1609d8e45b6c6f9679c04",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:"997b299fbee8369aed5c1186caa72299376ef868",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:"43eca460f0df5476273549852e2d098e9df01faf",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}]}]);j.HOST_PROP_SYNC_BUDGET=8;j.INTRINSIC_WIDTH_RETRY_MAX=3;j.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;j.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),j)}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{j as B,E as C,S as a,D as b,O as c,L as d,H as r};
|
|
2
|
+
//# sourceMappingURL=p-BmlGeaY8.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["deriveBarNavValueFromUrl","path","basePath","tabs","value","hideTabs","startsWith","remainder","slice","length","seg","split","selectableTabs","getSelectableTabs","id","tab","find","t","shouldResyncBarNavProps","resolvedTabs","tabsToMenuSections","selectedId","sections","batch","item","isTabDivider","push","items","label","dot","isSelected","isInactive","tabsToOverflowMenuSections","trimLeadingDividers","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","visibleTabCountForWidth","itemWidths","availableWidth","overflowTriggerWidth","itemGap","listExtraWidth","fullWidth","widthForItemCount","availableForTabs","Math","max","count","i","width","trimTrailingDividers","end","start","itemsWidth","reduce","sum","CHROME_TRANSITION_START","CHROME_TRANSITION_END","ChromeTransitionDepth","constructor","this","depth","enter","exit","isActive","ChromeTransitionGate","active","createRafCoalescer","onFrame","rafId","schedule","requestAnimationFrame","cancel","cancelAnimationFrame","readChromeTransitionSource","event","detail","source","readChromeTransitionPhase","phase","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","registerHost","navStyle","currentUrl","moreTabsLabel","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","menuTriggerActive","tabLayoutCommitted","visibleTabs","overflowTabs","menuInitialFocusVisible","overflowRovingFocused","focusedTabId","headerEl","triggerEl","menuEl","visibleTabListEl","probeTabListEl","resizeObserver","intrinsicWidthRetryCount","tabLayoutPendingFrames","panelNavTransition","panelToolsTransition","overflowCoalescer","updateTabsCollapsed","chromeTransitionShell","committedSection","pendingSection","onChromeTransitionStart","onChromeTransitionEnd","scheduleOverflowCheck","handleOverflowFocus","handleOverflowBlur","effectiveValue","renderedSelectableTabs","hasOverflowTabs","syncFocusedTabId","preferred","some","first","digestTabsConfig","map","join","resetTabOverflowLayout","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","bindChromeTransitionListeners","componentDidRender","chromeOverflowPaused","syncMenuAnchor","disconnectedCallback","disconnect","unbindChromeTransitionListeners","shell","el","closest","addEventListener","removeEventListener","syncValueFromUrl","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","horizontalPadding","parseFloat","paddingLeft","paddingRight","clientWidth","getTabsIntrinsicWidth","scrollWidth","getHeaderGap","style","columnGap","gap","getOverflowTriggerReserveWidth","getBoundingClientRect","getProbeTabMetrics","tabList","children","Array","from","child","childrenWidth","gapWidth","setOverflowTabLayout","nextCollapsed","visibleChanged","overflowChanged","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","forceTabLayoutCommit","fallbackCollapsed","metrics","intrinsicWidth","TAB_LAYOUT_COMMIT_MAX_FRAMES","shouldCollapse","OVERFLOW_HYSTERESIS_PX","visibleCount","anchor","handleMenuSelect","e","selectTab","String","handleMenuClose","handleMenuAfterClose","incomingTabs","nextBasePath","sectionChanged","tabsConfigChanged","dsTabChange","emit","querySelector","focus","preventScroll","focusVisibleTab","focusLastVisibleTab","last","reverse","findEnabledVisibleTab","step","index","handleTabKeyDown","targetId","target","getAttribute","focusedId","key","focused","preventDefault","currentIndex","findIndex","nextIndex","setFocus","reversedIndex","toggleTabMenu","options","minWidth","focusVisible","handleTriggerKeyDown","renderTabList","probe","h","role","class","heading","ref","next","onKeyDown","onFocusin","type","panelId","disabled","tabIndex","onClick","onFocus","as","variant","emphasis","color","hasRing","render","sectionReady","hasTabs","tabGroupKey","renderedTabs","Host","inert","lineTruncation","wrap","icon","activeFill","hasBorder","focusTabIndex","haspopup","expanded","onDsClick","onFocusout","side","align","sideOffset","initialFocusVisible","onDsSelect","onDsClose","onDsAfterClose"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/shell/chrome-transition.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["import { getSelectableTabs } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\n\nexport interface BarNavUrlState {\n /** Tab id derived from the URL, or empty when none applies. */\n value: string;\n /** When true, tabs should be hidden (e.g. non-tab child routes like detail pages). */\n hideTabs: boolean;\n}\n\n/** Derive BarNav tab selection from `currentUrl` relative to `basePath`.\n * Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */\nexport function deriveBarNavValueFromUrl(\n path: string,\n basePath: string,\n tabs: BarNavTab[]\n): BarNavUrlState {\n if (!path || !basePath) {\n return { value: '', hideTabs: false };\n }\n\n if (path !== basePath && !path.startsWith(`${basePath}/`)) {\n return { value: '', hideTabs: false };\n }\n\n const remainder = path.slice(basePath.length);\n const seg = remainder.startsWith('/') ? remainder.slice(1).split('/')[0] : '';\n const selectableTabs = getSelectableTabs(tabs);\n\n if (!seg) {\n return { value: selectableTabs[0]?.id ?? '', hideTabs: false };\n }\n\n const tab = selectableTabs.find(t => t.id === seg);\n if (tab) {\n return { value: tab.id, hideTabs: false };\n }\n\n return { value: '', hideTabs: true };\n}\n\n/** True when host array props have data but resolved internal state is still empty. */\nexport function shouldResyncBarNavProps(resolvedTabs: BarNavTab[], tabs: BarNavTab[]): boolean {\n return resolvedTabs.length === 0 && (tabs?.length ?? 0) > 0;\n}\n","import type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n const sections: MenuSection[] = [];\n let batch: MenuItemData[] = [];\n\n for (const item of tabs) {\n if (isTabDivider(item)) {\n if (batch.length > 0) {\n sections.push({ items: batch });\n batch = [];\n }\n continue;\n }\n\n batch.push({\n label: item.label,\n value: item.id,\n dot: item.dot,\n isSelected: item.id === selectedId,\n isInactive: item.isInactive,\n });\n }\n\n if (batch.length > 0) {\n sections.push({ items: batch });\n }\n\n return sections;\n}\n\nexport function tabsToOverflowMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n return tabsToMenuSections(trimLeadingDividers(tabs), selectedId);\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n const selectable = getSelectableTabs(tabs);\n return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n tabListScrollWidth: number,\n containerClientWidth: number,\n collapsed: boolean,\n hysteresis = 2\n): boolean {\n const diff = tabListScrollWidth - containerClientWidth;\n if (collapsed) {\n return diff > -hysteresis;\n }\n return diff > hysteresis;\n}\n\nexport function visibleTabCountForWidth(\n itemWidths: number[],\n availableWidth: number,\n overflowTriggerWidth: number,\n itemGap: number,\n listExtraWidth: number\n): number {\n if (itemWidths.length === 0 || availableWidth <= 0) return 0;\n\n const fullWidth = widthForItemCount(itemWidths, itemWidths.length, itemGap, listExtraWidth);\n if (fullWidth <= availableWidth) return itemWidths.length;\n\n const availableForTabs = Math.max(0, availableWidth - overflowTriggerWidth);\n let count = 0;\n\n for (let i = 1; i <= itemWidths.length; i++) {\n const width = widthForItemCount(itemWidths, i, itemGap, listExtraWidth);\n if (width > availableForTabs) break;\n count = i;\n }\n\n return count;\n}\n\nexport function trimTrailingDividers(tabs: TabItem[]): TabItem[] {\n let end = tabs.length;\n while (end > 0 && isTabDivider(tabs[end - 1])) {\n end -= 1;\n }\n return tabs.slice(0, end);\n}\n\nfunction trimLeadingDividers(tabs: TabItem[]): TabItem[] {\n let start = 0;\n while (start < tabs.length && isTabDivider(tabs[start])) {\n start += 1;\n }\n return tabs.slice(start);\n}\n\nfunction widthForItemCount(\n itemWidths: number[],\n count: number,\n itemGap: number,\n listExtraWidth: number\n): number {\n if (count <= 0) return 0;\n const itemsWidth = itemWidths.slice(0, count).reduce((sum, width) => sum + width, 0);\n return listExtraWidth + itemsWidth + itemGap * Math.max(0, count - 1);\n}\n","/** Bubbling/composed events — `ds-shell-app` and `ds-bar-nav` coordinate during width motion. */\n\nexport const CHROME_TRANSITION_START = 'dsChromeTransitionStart';\nexport const CHROME_TRANSITION_END = 'dsChromeTransitionEnd';\n\nexport type ChromeTransitionSource = 'panel-nav' | 'panel-tools';\n\nexport interface ChromeTransitionDetail {\n source: ChromeTransitionSource;\n /** Panel-tools drawer motion direction; omitted for panel-nav. */\n phase?: 'opening' | 'closing';\n}\n\n/** Reference-counted gate — used while panel-nav width is transitioning. */\nexport class ChromeTransitionDepth {\n private depth = 0;\n\n enter(): void {\n this.depth += 1;\n }\n\n exit(): void {\n this.depth = Math.max(0, this.depth - 1);\n }\n\n get isActive(): boolean {\n return this.depth > 0;\n }\n}\n\n/** Idempotent gate for one physical chrome surface.\n * Duplicate start notifications still require only one matching end. */\nexport class ChromeTransitionGate {\n private active = false;\n\n enter(): void {\n this.active = true;\n }\n\n exit(): void {\n this.active = false;\n }\n\n get isActive(): boolean {\n return this.active;\n }\n}\n\nexport interface RafCoalescer {\n schedule(): void;\n cancel(): void;\n}\n\n/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */\nexport function createRafCoalescer(onFrame: () => void): RafCoalescer {\n let rafId = 0;\n return {\n schedule() {\n if (rafId !== 0) return;\n rafId = requestAnimationFrame(() => {\n rafId = 0;\n onFrame();\n });\n },\n cancel() {\n if (rafId !== 0) {\n cancelAnimationFrame(rafId);\n rafId = 0;\n }\n },\n };\n}\n\nexport function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined {\n return (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n}\n\nexport function readChromeTransitionPhase(event: Event): ChromeTransitionDetail['phase'] {\n return (event as CustomEvent<ChromeTransitionDetail>).detail?.phase;\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n display: block;\n}\n\n.bar-nav {\n position: relative;\n height: var(--dimension-size-600);\n border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n background-color: var(--_bar-nav-bg);\n color: var(--_bar-nav-fg-primary);\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition:\n background-color var(--effect-motion-short-3),\n border-color var(--effect-motion-short-3),\n color var(--effect-motion-short-3);\n isolation: isolate;\n /* Default chrome — app surfaces */\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash) — bar is a transparent frame. */\n:host-context(ds-shell-app:not([gradient-preset='none'])) .bar-nav,\n:host-context(ds-shell-app.shell-app--paper-texture) .bar-nav {\n background-color: transparent;\n}\n\n.bar-nav > :not(.bar-nav__tabs-probe) {\n position: relative;\n z-index: 3;\n}\n\n/* Overflow — keep fitting tabs visible and pin the overflow trigger to the far edge. */\n.bar-nav--tabs-collapsed {\n display: flex;\n gap: var(--dimension-space-100);\n align-items: center;\n}\n\n/* Expanded tabs — consume full header width */\n.bar-nav__left {\n position: relative;\n flex: 1 1 0%;\n min-width: 0;\n width: 0;\n display: flex;\n align-items: center;\n}\n\n.bar-nav__tabs-visible {\n flex: 1;\n min-width: 0;\n width: 100%;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n position: absolute;\n left: 0;\n top: 0;\n visibility: hidden;\n pointer-events: none;\n overflow: visible;\n width: max-content;\n max-width: none;\n z-index: -1;\n}\n\n.bar-nav__tabs-probe > div {\n width: max-content;\n}\n\n.bar-nav__tab-list {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n position: relative;\n width: max-content;\n}\n\n.bar-nav__tab {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n height: var(--ds-control-height);\n min-width: var(--ds-control-height);\n padding: 0 var(--ds-control-padding-inline);\n box-sizing: border-box;\n border: none;\n border-radius: var(--ds-control-radius);\n background-color: transparent;\n color: var(--_bar-nav-fg-secondary);\n cursor: default;\n position: relative;\n flex-shrink: 0;\n -webkit-user-select: none;\n user-select: none;\n transition: color var(--effect-motion-short-2);\n}\n\n.bar-nav__tab::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--ds-control-radius);\n background: transparent;\n pointer-events: none;\n cursor: inherit;\n}\n\n@media (hover: hover) and (pointer: fine) {\n .bar-nav__tab:hover::after {\n background: var(--_bar-nav-hover);\n }\n}\n\n.bar-nav__tab:active::after {\n background: var(--_bar-nav-pressed);\n}\n\n.bar-nav__tab--selected {\n color: var(--_bar-nav-fg-primary);\n}\n\n.bar-nav__tab-label {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n}\n\n.bar-nav__tab-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--dimension-space-100);\n height: var(--ds-control-height);\n padding-block: var(--ds-control-padding-inline);\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.bar-nav__tab-divider-line {\n width: var(--dimension-stroke-width-012);\n align-self: stretch;\n background-color: var(--_bar-nav-border);\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n flex: 1;\n min-width: 0;\n height: var(--ds-control-height);\n visibility: hidden;\n pointer-events: none;\n}\n\n/* Overflow trigger — compact icon button aligned to the right edge. */\n.bar-nav__overflow-trigger {\n margin-left: auto;\n --ds-button-unfilled-fg: var(--_bar-nav-fg-secondary);\n --ds-button-unfilled-fg-active: var(--_bar-nav-fg-primary);\n --ds-interaction-hover: var(--_bar-nav-hover);\n --ds-interaction-pressed: var(--_bar-nav-pressed);\n --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n name shares the tab label's type token, color, height and horizontal inset.\n Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px).\n Color comes from ds-text color=\"primary\"; beat Text's inline-box display. */\nds-text.bar-nav__heading {\n display: inline-flex;\n align-items: center;\n height: var(--ds-control-height);\n padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n -webkit-user-select: none;\n user-select: none;\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n State,\n h,\n Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { getSelectableTabs, isTabDivider, type TabItemTab } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\nimport { deriveBarNavValueFromUrl, shouldResyncBarNavProps } from './bar-nav-utils';\nimport {\n tabsOverflowContainer,\n tabsToOverflowMenuSections,\n trimTrailingDividers,\n visibleTabCountForWidth,\n} from './bar-nav-tabs-menu-utils';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionGate,\n createRafCoalescer,\n readChromeTransitionSource,\n readChromeTransitionPhase,\n} from '../../shell/chrome-transition';\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /** Style slot: `dashboard` or `settings`. Colors match for now. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n @Element() el!: HTMLElement;\n\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n @Prop() basePath: string = '';\n\n /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n @Prop() currentUrl: string = '';\n @Prop() moreTabsLabel: string = 'More tabs';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n @State() private resolvedTabs: BarNavTab[] = [];\n @State() private urlDerivedValue: string = '';\n @State() private hideTabsForDetailRoute = false;\n @State() private tabsCollapsed = false;\n @State() private menuOpen = false;\n @State() private menuTriggerActive = false;\n /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n @State() private tabLayoutCommitted = false;\n @State() private visibleTabs: BarNavTab[] = [];\n @State() private overflowTabs: BarNavTab[] = [];\n @State() private menuInitialFocusVisible = false;\n @State() private overflowRovingFocused = false;\n @State() private focusedTabId = '';\n\n private static readonly HOST_PROP_SYNC_BUDGET = 8;\n private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;\n private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n private headerEl: HTMLElement | null = null;\n private triggerEl: (HTMLElement & { setFocus?: () => Promise<void> }) | null = null;\n private menuEl: HTMLDsMenuElement | null = null;\n private visibleTabListEl: HTMLElement | null = null;\n private probeTabListEl: HTMLElement | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private intrinsicWidthRetryCount = 0;\n private tabLayoutPendingFrames = 0;\n private readonly panelNavTransition = new ChromeTransitionGate();\n private readonly panelToolsTransition = new ChromeTransitionGate();\n private readonly overflowCoalescer = createRafCoalescer(() => {\n this.updateTabsCollapsed();\n });\n private chromeTransitionShell: HTMLElement | null = null;\n /** Matches `basePath` once tabs + URL are reconciled for the active section. */\n @State() private committedSection = '';\n /** Section waiting for URL + tabs to catch up after a cross-area navigation. */\n @State() private pendingSection = '';\n\n private get effectiveValue(): string {\n if (this.currentUrl && this.basePath) {\n return this.urlDerivedValue;\n }\n return this.value;\n }\n\n private get renderedSelectableTabs(): TabItemTab[] {\n const tabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n return getSelectableTabs(tabs);\n }\n\n private get hasOverflowTabs(): boolean {\n return this.tabLayoutCommitted && this.tabsCollapsed && this.overflowTabs.length > 0;\n }\n\n private syncFocusedTabId(preferred: string, tabs: TabItemTab[]) {\n if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {\n this.focusedTabId = preferred;\n return;\n }\n const first = tabs.find(tab => !tab.isInactive);\n this.focusedTabId = first?.id ?? '';\n }\n\n private digestTabsConfig(tabs: BarNavTab[]): string {\n return tabs.map(t => (isTabDivider(t) ? '|' : t.id)).join(',');\n }\n\n private resetTabOverflowLayout() {\n this.tabLayoutCommitted = false;\n this.tabsCollapsed = false;\n this.menuOpen = false;\n this.menuTriggerActive = false;\n this.menuInitialFocusVisible = false;\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.visibleTabs = [];\n this.overflowTabs = [];\n }\n\n @Watch('tabs')\n @Watch('currentUrl')\n @Watch('basePath')\n onHostPropsChange() {\n this.applyHostProps();\n }\n\n @Watch('value')\n @Watch('urlDerivedValue')\n onSelectionChange() {\n this.syncFocusedTabId(this.effectiveValue, this.renderedSelectableTabs);\n this.syncMenuSections();\n this.scheduleOverflowCheck();\n }\n\n @Watch('menuOpen')\n onMenuOpenChange(open: boolean) {\n if (this.menuEl) {\n this.menuEl.open = open;\n }\n }\n\n @Watch('tabsCollapsed')\n onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n if (!collapsed) {\n this.menuOpen = false;\n this.menuTriggerActive = false;\n this.menuInitialFocusVisible = false;\n this.menuEl = null;\n }\n this.scheduleOverflowCheck();\n if (collapsed) {\n requestAnimationFrame(() => {\n this.scheduleOverflowCheck();\n });\n }\n if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n queueMicrotask(() => this.focusVisibleSelectedTab());\n }\n\n componentWillLoad() {\n this.applyHostProps();\n this.syncFocusedTabId(this.effectiveValue, getSelectableTabs(this.resolvedTabs));\n }\n\n componentDidLoad() {\n this.syncHostPropsIfNeeded();\n this.scheduleDeferredHostPropSync();\n this.setupOverflowObserver();\n this.bindChromeTransitionListeners();\n this.scheduleOverflowCheck();\n }\n\n componentDidRender() {\n if (this.chromeOverflowPaused()) {\n this.syncMenuAnchor();\n return;\n }\n this.scheduleOverflowCheck();\n this.syncMenuAnchor();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.overflowCoalescer.cancel();\n this.unbindChromeTransitionListeners();\n }\n\n private bindChromeTransitionListeners() {\n const shell = this.el.closest<HTMLElement>('ds-shell-app');\n if (!shell) return;\n this.chromeTransitionShell = shell;\n shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n private unbindChromeTransitionListeners() {\n if (!this.chromeTransitionShell) return;\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_START,\n this.onChromeTransitionStart\n );\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_END,\n this.onChromeTransitionEnd\n );\n this.chromeTransitionShell = null;\n }\n\n private onChromeTransitionStart = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.enter();\n return;\n }\n if (source === 'panel-tools') {\n const phase = readChromeTransitionPhase(event) ?? 'opening';\n if (phase === 'closing') {\n this.panelToolsTransition.enter();\n }\n }\n };\n\n private chromeOverflowPaused(): boolean {\n return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;\n }\n\n private onChromeTransitionEnd = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.exit();\n if (!this.panelNavTransition.isActive) {\n this.scheduleOverflowCheck();\n }\n return;\n }\n if (source === 'panel-tools') {\n this.panelToolsTransition.exit();\n this.scheduleOverflowCheck();\n }\n };\n\n /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n private syncHostPropsIfNeeded() {\n if (shouldResyncBarNavProps(this.resolvedTabs, this.tabs)) {\n this.applyHostProps();\n } else if (this.currentUrl && this.basePath) {\n this.syncValueFromUrl();\n }\n }\n\n /** Poll across animation frames — host props may land without triggering @Watch. */\n private scheduleDeferredHostPropSync() {\n let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n const tick = () => {\n this.syncHostPropsIfNeeded();\n if (--remaining > 0) {\n requestAnimationFrame(tick);\n }\n };\n queueMicrotask(tick);\n }\n\n private setupOverflowObserver() {\n if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n this.resizeObserver?.disconnect();\n this.resizeObserver = new ResizeObserver(() => {\n if (this.chromeOverflowPaused()) return;\n this.scheduleOverflowCheck();\n });\n this.resizeObserver.observe(this.headerEl);\n }\n\n private scheduleOverflowCheck() {\n if (this.chromeOverflowPaused()) return;\n this.overflowCoalescer.schedule();\n }\n\n /** Width available for the tab row or collapsed trigger. */\n private getLeftZoneAvailableWidth(): number {\n if (!this.headerEl) return 0;\n\n const headerStyle = getComputedStyle(this.headerEl);\n const horizontalPadding =\n (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n\n return Math.max(0, this.headerEl.clientWidth - horizontalPadding);\n }\n\n private getTabsIntrinsicWidth(): number {\n return this.probeTabListEl?.scrollWidth ?? 0;\n }\n\n private getHeaderGap(): number {\n if (!this.headerEl) return 0;\n const style = getComputedStyle(this.headerEl);\n return parseFloat(style.columnGap || style.gap) || 0;\n }\n\n private getOverflowTriggerReserveWidth(): number {\n if (!this.triggerEl) {\n return 40;\n }\n return this.triggerEl.getBoundingClientRect().width + this.getHeaderGap();\n }\n\n private getProbeTabMetrics(): {\n itemWidths: number[];\n itemGap: number;\n listExtraWidth: number;\n } | null {\n const tabList = this.probeTabListEl;\n if (!tabList) return null;\n\n const children = Array.from(tabList.children) as HTMLElement[];\n const itemWidths = children.map(child => child.getBoundingClientRect().width);\n if (itemWidths.length === 0 || itemWidths.some(width => width === 0)) return null;\n\n const style = getComputedStyle(tabList);\n const itemGap = parseFloat(style.columnGap || style.gap) || 0;\n const childrenWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n const gapWidth = itemGap * Math.max(0, itemWidths.length - 1);\n const listExtraWidth = Math.max(0, tabList.scrollWidth - childrenWidth - gapWidth);\n\n return { itemWidths, itemGap, listExtraWidth };\n }\n\n private setOverflowTabLayout(visibleTabs: BarNavTab[], overflowTabs: BarNavTab[]) {\n const nextCollapsed = overflowTabs.length > 0;\n const visibleChanged =\n this.digestTabsConfig(visibleTabs) !== this.digestTabsConfig(this.visibleTabs);\n const overflowChanged =\n this.digestTabsConfig(overflowTabs) !== this.digestTabsConfig(this.overflowTabs);\n\n if (visibleChanged) {\n this.visibleTabs = visibleTabs;\n }\n if (overflowChanged) {\n this.overflowTabs = overflowTabs;\n }\n if (nextCollapsed !== this.tabsCollapsed) {\n this.tabsCollapsed = nextCollapsed;\n if (!nextCollapsed) {\n this.menuOpen = false;\n this.menuTriggerActive = false;\n }\n }\n this.syncFocusedTabId(\n this.effectiveValue,\n getSelectableTabs(nextCollapsed ? visibleTabs : this.resolvedTabs)\n );\n }\n\n private scheduleIntrinsicWidthRetry() {\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n this.intrinsicWidthRetryCount++;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n }\n\n private forceTabLayoutCommit(fallbackCollapsed: boolean) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.setOverflowTabLayout(\n fallbackCollapsed ? [] : this.resolvedTabs,\n fallbackCollapsed ? this.resolvedTabs : []\n );\n this.tabLayoutCommitted = true;\n }\n\n private updateTabsCollapsed() {\n if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n if (this.tabsCollapsed) {\n this.setOverflowTabLayout([], []);\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.tabLayoutCommitted = true;\n return;\n }\n\n const metrics = this.getProbeTabMetrics();\n const intrinsicWidth = this.getTabsIntrinsicWidth();\n if (!metrics || intrinsicWidth === 0) {\n this.tabLayoutPendingFrames += 1;\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {\n this.forceTabLayoutCommit(false);\n } else if (this.tabLayoutPendingFrames >= BarNav.TAB_LAYOUT_COMMIT_MAX_FRAMES) {\n this.forceTabLayoutCommit(false);\n } else {\n this.scheduleIntrinsicWidthRetry();\n }\n return;\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n\n const shouldCollapse = tabsOverflowContainer(\n intrinsicWidth,\n this.getLeftZoneAvailableWidth(),\n this.tabsCollapsed,\n BarNav.OVERFLOW_HYSTERESIS_PX\n );\n\n if (!shouldCollapse) {\n this.setOverflowTabLayout(this.resolvedTabs, []);\n this.tabLayoutCommitted = true;\n return;\n }\n\n const visibleCount = visibleTabCountForWidth(\n metrics.itemWidths,\n this.getLeftZoneAvailableWidth(),\n this.getOverflowTriggerReserveWidth(),\n metrics.itemGap,\n metrics.listExtraWidth\n );\n const visibleTabs = trimTrailingDividers(this.resolvedTabs.slice(0, visibleCount));\n const overflowTabs = this.resolvedTabs.slice(visibleTabs.length);\n this.setOverflowTabLayout(visibleTabs, overflowTabs);\n this.tabLayoutCommitted = true;\n }\n\n private syncMenuAnchor() {\n if (!this.menuEl || !this.triggerEl || !this.hasOverflowTabs) return;\n this.menuEl.anchor = this.triggerEl;\n this.syncMenuSections();\n }\n\n private handleMenuSelect(e: Event) {\n const detail = (e as CustomEvent<MenuItemData>).detail;\n if (detail?.value !== undefined) {\n this.selectTab(String(detail.value));\n }\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n }\n\n private handleMenuClose() {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n }\n\n private handleMenuAfterClose() {\n if (!this.menuOpen) this.menuTriggerActive = false;\n }\n\n /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */\n private incomingTabs(): BarNavTab[] {\n return this.tabs ?? [];\n }\n\n private applyHostProps() {\n const nextBasePath = this.basePath;\n const sectionChanged =\n nextBasePath !== '' && this.committedSection !== '' && nextBasePath !== this.committedSection;\n\n if (sectionChanged) {\n this.urlDerivedValue = '';\n this.committedSection = '';\n this.pendingSection = nextBasePath;\n this.resolvedTabs = [];\n this.resetTabOverflowLayout();\n return;\n }\n\n if (this.pendingSection) {\n if (!nextBasePath || nextBasePath !== this.pendingSection) {\n return;\n }\n if (!this.currentUrl.startsWith(this.pendingSection)) {\n return;\n }\n const tabs = this.incomingTabs();\n if (tabs.length === 0) {\n return;\n }\n this.pendingSection = '';\n }\n\n const tabs = this.incomingTabs();\n const tabsConfigChanged =\n this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);\n\n this.resolvedTabs = tabs;\n this.syncValueFromUrl();\n this.committedSection = nextBasePath;\n if (tabsConfigChanged) {\n this.resetTabOverflowLayout();\n }\n this.scheduleOverflowCheck();\n }\n\n private syncMenuSections() {\n if (!this.menuEl) return;\n this.menuEl.sections = tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue);\n }\n\n private syncValueFromUrl() {\n const tabs = this.incomingTabs();\n\n if (!this.currentUrl || !this.basePath) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n if (!this.currentUrl.startsWith(this.basePath)) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n const { value, hideTabs } = deriveBarNavValueFromUrl(this.currentUrl, this.basePath, tabs);\n this.urlDerivedValue = value;\n this.hideTabsForDetailRoute = hideTabs;\n }\n\n private selectTab(id: string) {\n this.value = id;\n this.dsTabChange.emit(id);\n }\n\n /** Move focus to the selected tab in the visible tab group (after expand). */\n private focusVisibleSelectedTab() {\n const tab = this.visibleTabListEl?.querySelector(\n `[data-tab-id=\"${this.effectiveValue}\"]`\n ) as HTMLElement | null;\n tab?.focus({ preventScroll: true });\n }\n\n private focusVisibleTab(id: string) {\n this.focusedTabId = id;\n const tab = this.visibleTabListEl?.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n tab?.focus({ preventScroll: true });\n }\n\n private focusLastVisibleTab() {\n const last = [...this.renderedSelectableTabs].reverse().find(tab => !tab.isInactive);\n if (last) this.focusVisibleTab(last.id);\n }\n\n private findEnabledVisibleTab(from: number, step: 1 | -1): number | null {\n const tabs = this.renderedSelectableTabs;\n for (let index = from + step; index >= 0 && index < tabs.length; index += step) {\n if (!tabs[index]?.isInactive) return index;\n }\n return null;\n }\n\n private handleTabKeyDown(e: KeyboardEvent) {\n const tabs = this.renderedSelectableTabs;\n if (!tabs.length) return;\n const targetId = (e.target as HTMLElement | null)?.getAttribute('data-tab-id');\n const focusedId = targetId ?? this.focusedTabId;\n\n if (e.key === 'Enter' || e.key === ' ') {\n const focused = tabs.find(tab => tab.id === focusedId);\n if (!focused || focused.isInactive) return;\n e.preventDefault();\n this.selectTab(focused.id);\n return;\n }\n\n const currentIndex = tabs.findIndex(tab => tab.id === focusedId);\n if (currentIndex < 0) return;\n\n let nextIndex: number | null;\n if (e.key === 'ArrowRight') {\n nextIndex = this.findEnabledVisibleTab(currentIndex, 1);\n if (nextIndex === null && this.hasOverflowTabs) {\n e.preventDefault();\n this.overflowRovingFocused = true;\n void this.triggerEl?.setFocus?.();\n return;\n }\n } else if (e.key === 'ArrowLeft') {\n nextIndex = this.findEnabledVisibleTab(currentIndex, -1);\n } else if (e.key === 'Home') {\n nextIndex = tabs.findIndex(tab => !tab.isInactive);\n } else if (e.key === 'End') {\n const reversedIndex = [...tabs].reverse().findIndex(tab => !tab.isInactive);\n nextIndex = reversedIndex < 0 ? null : tabs.length - 1 - reversedIndex;\n } else {\n return;\n }\n\n if (nextIndex === null || nextIndex < 0 || nextIndex === currentIndex) return;\n e.preventDefault();\n this.focusVisibleTab(tabs[nextIndex].id);\n }\n\n private toggleTabMenu(options?: { focusVisible?: boolean }) {\n if (this.menuOpen) {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n return;\n }\n\n if (this.menuEl && this.triggerEl) {\n this.menuEl.anchor = this.triggerEl;\n this.menuEl.minWidth = '';\n this.syncMenuSections();\n }\n\n this.menuInitialFocusVisible = options?.focusVisible ?? false;\n this.menuTriggerActive = true;\n this.menuOpen = true;\n }\n\n private handleOverflowFocus = () => {\n this.overflowRovingFocused = true;\n };\n\n private handleOverflowBlur = () => {\n this.overflowRovingFocused = false;\n };\n\n private handleTriggerKeyDown(e: KeyboardEvent) {\n if (!this.hasOverflowTabs) return;\n\n if (!this.menuOpen) {\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this.overflowRovingFocused = false;\n this.focusLastVisibleTab();\n return;\n }\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggleTabMenu({ focusVisible: true });\n }\n return;\n }\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n void this.triggerEl?.setFocus?.();\n }\n }\n\n private renderTabList(tabs: BarNavTab[], probe: boolean) {\n return (\n <div\n role=\"tablist\"\n class=\"bar-nav__tab-list\"\n aria-label={this.heading}\n ref={el => {\n if (probe) {\n const next = (el as HTMLElement) ?? null;\n if (next === this.probeTabListEl) return;\n this.probeTabListEl = next;\n if (next) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.scheduleOverflowCheck();\n }\n } else {\n this.visibleTabListEl = (el as HTMLElement) ?? null;\n }\n }}\n onKeyDown={probe ? undefined : (e: KeyboardEvent) => this.handleTabKeyDown(e)}\n onFocusin={\n probe\n ? undefined\n : () => {\n this.overflowRovingFocused = false;\n }\n }\n >\n {tabs.map((tab, index) => {\n if (isTabDivider(tab)) {\n return (\n <div class=\"bar-nav__tab-divider\" key={`divider-${index}`} aria-hidden=\"true\">\n <div class=\"bar-nav__tab-divider-line\" />\n </div>\n );\n }\n\n const isSelected = tab.id === this.effectiveValue;\n return (\n <button\n key={tab.id}\n type=\"button\"\n role=\"tab\"\n data-tab-id={tab.id}\n class={{\n 'bar-nav__tab': true,\n 'bar-nav__tab--selected': isSelected,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-inactive': !!tab.isInactive,\n }}\n aria-selected={isSelected ? 'true' : 'false'}\n aria-disabled={tab.isInactive ? 'true' : undefined}\n aria-controls={tab.panelId ?? undefined}\n disabled={tab.isInactive}\n tabIndex={\n !probe && !this.overflowRovingFocused && tab.id === this.focusedTabId ? 0 : -1\n }\n onClick={() => !probe && !tab.isInactive && this.selectTab(tab.id)}\n onFocus={() => {\n if (!probe) this.focusedTabId = tab.id;\n }}\n >\n <span\n class={{\n 'bar-nav__tab-label': true,\n 'ds-control-label-box': true,\n 'ds-control-label-dot': !!tab.dot,\n 'bar-nav__tab-label--dot': !!tab.dot,\n }}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" emphasis={isSelected} color=\"inherit\">\n {tab.label}\n </ds-text>\n {tab.dot && (\n <ds-badge\n class=\"bar-nav__tab-dot ds-control-label-dot__badge\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n </button>\n );\n })}\n </div>\n );\n }\n\n render() {\n // Section gating only applies when `basePath` is set (SPA section sync).\n // Tabs without a base path must still render — otherwise a single-tab bar\n // (or any non-routed tabs) silently falls through to an empty header.\n const sectionReady = this.basePath === '' || this.committedSection === this.basePath;\n const hasTabs = sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n const tabGroupKey = this.basePath || 'no-section';\n const renderedTabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n\n return (\n <Host>\n <header\n class={{\n 'bar-nav': true,\n 'ds-control--md': true,\n 'ds-chrome-row': true,\n 'ds-chrome-space--md': true,\n 'bar-nav--dashboard': this.navStyle === 'dashboard',\n 'bar-nav--settings': this.navStyle === 'settings',\n 'bar-nav--tabs-collapsed': hasTabs && this.hasOverflowTabs,\n }}\n ref={el => {\n this.headerEl = el as HTMLElement;\n if (el && !this.resizeObserver) {\n this.setupOverflowObserver();\n }\n }}\n >\n {hasTabs && (\n <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n <div key={`probe-${tabGroupKey}`}>{this.renderTabList(this.resolvedTabs, true)}</div>\n </div>\n )}\n\n {hasTabs && this.tabLayoutCommitted && renderedTabs.length > 0 && (\n <div class=\"bar-nav__left\">\n <div key={`visible-${tabGroupKey}`} class=\"bar-nav__tabs-visible\">\n {this.renderTabList(renderedTabs, false)}\n </div>\n </div>\n )}\n\n {hasTabs && !this.tabLayoutCommitted && (\n <div class=\"bar-nav__tabs-pending\" aria-hidden=\"true\" />\n )}\n\n {!hasTabs && this.heading && (\n <ds-text\n class=\"bar-nav__heading\"\n lineTruncation={1}\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"primary\"\n wrap=\"nowrap\"\n >\n {this.heading}\n </ds-text>\n )}\n\n {hasTabs && this.hasOverflowTabs && (\n <ds-button-unfilled\n variant=\"icon\"\n class={{\n 'bar-nav__overflow-trigger': true,\n }}\n icon=\"ChevronDown\"\n activeFill={false}\n hasBorder={false}\n focusTabIndex={this.overflowRovingFocused ? 0 : -1}\n ref={(el?: HTMLDsButtonUnfilledElement) => {\n this.triggerEl = (el as HTMLElement & { setFocus?: () => Promise<void> }) ?? null;\n }}\n haspopup=\"menu\"\n expanded={this.menuTriggerActive}\n aria-label={this.moreTabsLabel}\n onDsClick={() => this.toggleTabMenu({ focusVisible: false })}\n onFocusin={this.handleOverflowFocus}\n onFocusout={this.handleOverflowBlur}\n onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n />\n )}\n </header>\n\n {hasTabs && this.hasOverflowTabs && (\n <ds-menu\n ref={el => {\n this.menuEl = (el as HTMLDsMenuElement) ?? null;\n }}\n open={this.menuOpen}\n sections={tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue)}\n side=\"bottom\"\n align=\"end\"\n sideOffset=\"calc(var(--dimension-space-100) + var(--dimension-space-050))\"\n initialFocusVisible={this.menuInitialFocusVisible}\n onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n onDsClose={() => this.handleMenuClose()}\n onDsAfterClose={() => this.handleMenuAfterClose()}\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"ydAYgBA,EACdC,EACAC,EACAC,GAEA,IAAKF,IAASC,EAAU,CACtB,MAAO,CAAEE,MAAO,GAAIC,SAAU,M,CAGhC,GAAIJ,IAASC,IAAaD,EAAKK,WAAW,GAAGJ,MAAc,CACzD,MAAO,CAAEE,MAAO,GAAIC,SAAU,M,CAGhC,MAAME,EAAYN,EAAKO,MAAMN,EAASO,QACtC,MAAMC,EAAMH,EAAUD,WAAW,KAAOC,EAAUC,MAAM,GAAGG,MAAM,KAAK,GAAK,GAC3E,MAAMC,EAAiBC,EAAkBV,GAEzC,IAAKO,EAAK,CACR,MAAO,CAAEN,MAAOQ,EAAe,IAAIE,IAAM,GAAIT,SAAU,M,CAGzD,MAAMU,EAAMH,EAAeI,MAAKC,GAAKA,EAAEH,KAAOJ,IAC9C,GAAIK,EAAK,CACP,MAAO,CAAEX,MAAOW,EAAID,GAAIT,SAAU,M,CAGpC,MAAO,CAAED,MAAO,GAAIC,SAAU,KAChC,CAGM,SAAUa,EAAwBC,EAA2BhB,GACjE,OAAOgB,EAAaV,SAAW,IAAMN,GAAMM,QAAU,GAAK,CAC5D,CCnCM,SAAUW,EAAmBjB,EAAiBkB,GAClD,MAAMC,EAA0B,GAChC,IAAIC,EAAwB,GAE5B,IAAK,MAAMC,KAAQrB,EAAM,CACvB,GAAIsB,EAAaD,GAAO,CACtB,GAAID,EAAMd,OAAS,EAAG,CACpBa,EAASI,KAAK,CAAEC,MAAOJ,IACvBA,EAAQ,E,CAEV,Q,CAGFA,EAAMG,KAAK,CACTE,MAAOJ,EAAKI,MACZxB,MAAOoB,EAAKV,GACZe,IAAKL,EAAKK,IACVC,WAAYN,EAAKV,KAAOO,EACxBU,WAAYP,EAAKO,Y,CAIrB,GAAIR,EAAMd,OAAS,EAAG,CACpBa,EAASI,KAAK,CAAEC,MAAOJ,G,CAGzB,OAAOD,CACT,CAEM,SAAUU,EAA2B7B,EAAiBkB,GAC1D,OAAOD,EAAmBa,EAAoB9B,GAAOkB,EACvD,CAYM,SAAUa,EACdC,EACAC,EACAC,EACAC,EAAa,GAEb,MAAMC,EAAOJ,EAAqBC,EAClC,GAAIC,EAAW,CACb,OAAOE,GAAQD,C,CAEjB,OAAOC,EAAOD,CAChB,CAEM,SAAUE,EACdC,EACAC,EACAC,EACAC,EACAC,GAEA,GAAIJ,EAAWhC,SAAW,GAAKiC,GAAkB,EAAG,OAAO,EAE3D,MAAMI,EAAYC,EAAkBN,EAAYA,EAAWhC,OAAQmC,EAASC,GAC5E,GAAIC,GAAaJ,EAAgB,OAAOD,EAAWhC,OAEnD,MAAMuC,EAAmBC,KAAKC,IAAI,EAAGR,EAAiBC,GACtD,IAAIQ,EAAQ,EAEZ,IAAK,IAAIC,EAAI,EAAGA,GAAKX,EAAWhC,OAAQ2C,IAAK,CAC3C,MAAMC,EAAQN,EAAkBN,EAAYW,EAAGR,EAASC,GACxD,GAAIQ,EAAQL,EAAkB,MAC9BG,EAAQC,C,CAGV,OAAOD,CACT,CAEM,SAAUG,EAAqBnD,GACnC,IAAIoD,EAAMpD,EAAKM,OACf,MAAO8C,EAAM,GAAK9B,EAAatB,EAAKoD,EAAM,IAAK,CAC7CA,GAAO,C,CAET,OAAOpD,EAAKK,MAAM,EAAG+C,EACvB,CAEA,SAAStB,EAAoB9B,GAC3B,IAAIqD,EAAQ,EACZ,MAAOA,EAAQrD,EAAKM,QAAUgB,EAAatB,EAAKqD,IAAS,CACvDA,GAAS,C,CAEX,OAAOrD,EAAKK,MAAMgD,EACpB,CAEA,SAAST,EACPN,EACAU,EACAP,EACAC,GAEA,GAAIM,GAAS,EAAG,OAAO,EACvB,MAAMM,EAAahB,EAAWjC,MAAM,EAAG2C,GAAOO,QAAO,CAACC,EAAKN,IAAUM,EAAMN,GAAO,GAClF,OAAOR,EAAiBY,EAAab,EAAUK,KAAKC,IAAI,EAAGC,EAAQ,EACrE,CChHO,MAAMS,EAA0B,0BAChC,MAAMC,EAAwB,wB,MAWxBC,EAAb,WAAAC,GACUC,KAAAC,MAAQ,C,CAEhB,KAAAC,GACEF,KAAKC,OAAS,C,CAGhB,IAAAE,GACEH,KAAKC,MAAQhB,KAAKC,IAAI,EAAGc,KAAKC,MAAQ,E,CAGxC,YAAIG,GACF,OAAOJ,KAAKC,MAAQ,C,QAMXI,EAAb,WAAAN,GACUC,KAAAM,OAAS,K,CAEjB,KAAAJ,GACEF,KAAKM,OAAS,I,CAGhB,IAAAH,GACEH,KAAKM,OAAS,K,CAGhB,YAAIF,GACF,OAAOJ,KAAKM,M,EAUV,SAAUC,EAAmBC,GACjC,IAAIC,EAAQ,EACZ,MAAO,CACL,QAAAC,GACE,GAAID,IAAU,EAAG,OACjBA,EAAQE,uBAAsB,KAC5BF,EAAQ,EACRD,GAAS,G,EAGb,MAAAI,GACE,GAAIH,IAAU,EAAG,CACfI,qBAAqBJ,GACrBA,EAAQ,C,GAIhB,CAEM,SAAUK,EAA2BC,GACzC,OAAQA,EAA8CC,QAAQC,MAChE,CAEM,SAAUC,EAA0BH,GACxC,OAAQA,EAA8CC,QAAQG,KAChE,CC/EA,MAAMC,EAAY,IAAM,84V,MCoCXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAxB,CAAAyB,G,qFAOmDxB,KAAAyB,SAA2B,YAQpEzB,KAAA7D,KAAoB,GAGH6D,KAAA5D,MAAgB,GASjC4D,KAAA9D,SAAmB,GAGnB8D,KAAA0B,WAAqB,GACrB1B,KAAA2B,cAAwB,YAKf3B,KAAA7C,aAA4B,GAC5B6C,KAAA4B,gBAA0B,GAC1B5B,KAAA6B,uBAAyB,MACzB7B,KAAA8B,cAAgB,MAChB9B,KAAA+B,SAAW,MACX/B,KAAAgC,kBAAoB,MAEpBhC,KAAAiC,mBAAqB,MACrBjC,KAAAkC,YAA2B,GAC3BlC,KAAAmC,aAA4B,GAC5BnC,KAAAoC,wBAA0B,MAC1BpC,KAAAqC,sBAAwB,MACxBrC,KAAAsC,aAAe,GAOxBtC,KAAAuC,SAA+B,KAC/BvC,KAAAwC,UAAuE,KACvExC,KAAAyC,OAAmC,KACnCzC,KAAA0C,iBAAuC,KACvC1C,KAAA2C,eAAqC,KACrC3C,KAAA4C,eAAwC,KACxC5C,KAAA6C,yBAA2B,EAC3B7C,KAAA8C,uBAAyB,EAChB9C,KAAA+C,mBAAqB,IAAI1C,EACzBL,KAAAgD,qBAAuB,IAAI3C,EAC3BL,KAAAiD,kBAAoB1C,GAAmB,KACtDP,KAAKkD,qBAAqB,IAEpBlD,KAAAmD,sBAA4C,KAEnCnD,KAAAoD,iBAAmB,GAEnBpD,KAAAqD,eAAiB,GAsI1BrD,KAAAsD,wBAA2BvC,IACjC,MAAME,EAASH,EAA2BC,GAC1C,GAAIE,IAAW,YAAa,CAC1BjB,KAAK+C,mBAAmB7C,QACxB,M,CAEF,GAAIe,IAAW,cAAe,CAC5B,MAAME,EAAQD,EAA0BH,IAAU,UAClD,GAAII,IAAU,UAAW,CACvBnB,KAAKgD,qBAAqB9C,O,IASxBF,KAAAuD,sBAAyBxC,IAC/B,MAAME,EAASH,EAA2BC,GAC1C,GAAIE,IAAW,YAAa,CAC1BjB,KAAK+C,mBAAmB5C,OACxB,IAAKH,KAAK+C,mBAAmB3C,SAAU,CACrCJ,KAAKwD,uB,CAEP,M,CAEF,GAAIvC,IAAW,cAAe,CAC5BjB,KAAKgD,qBAAqB7C,OAC1BH,KAAKwD,uB,GAmXDxD,KAAAyD,oBAAsB,KAC5BzD,KAAKqC,sBAAwB,IAAI,EAG3BrC,KAAA0D,mBAAqB,KAC3B1D,KAAKqC,sBAAwB,KAAK,CAgOrC,CAzvBC,kBAAYsB,GACV,GAAI3D,KAAK0B,YAAc1B,KAAK9D,SAAU,CACpC,OAAO8D,KAAK4B,e,CAEd,OAAO5B,KAAK5D,K,CAGd,0BAAYwH,GACV,MAAMzH,EAAO6D,KAAK6D,gBAAkB7D,KAAKkC,YAAclC,KAAK7C,aAC5D,OAAON,EAAkBV,E,CAG3B,mBAAY0H,GACV,OAAO7D,KAAKiC,oBAAsBjC,KAAK8B,eAAiB9B,KAAKmC,aAAa1F,OAAS,C,CAG7E,gBAAAqH,CAAiBC,EAAmB5H,GAC1C,GAAIA,EAAK6H,MAAKjH,GAAOA,EAAID,KAAOiH,IAAchH,EAAIgB,aAAa,CAC7DiC,KAAKsC,aAAeyB,EACpB,M,CAEF,MAAME,EAAQ9H,EAAKa,MAAKD,IAAQA,EAAIgB,aACpCiC,KAAKsC,aAAe2B,GAAOnH,IAAM,E,CAG3B,gBAAAoH,CAAiB/H,GACvB,OAAOA,EAAKgI,KAAIlH,GAAMQ,EAAaR,GAAK,IAAMA,EAAEH,KAAKsH,KAAK,I,CAGpD,sBAAAC,GACNrE,KAAKiC,mBAAqB,MAC1BjC,KAAK8B,cAAgB,MACrB9B,KAAK+B,SAAW,MAChB/B,KAAKgC,kBAAoB,MACzBhC,KAAKoC,wBAA0B,MAC/BpC,KAAK6C,yBAA2B,EAChC7C,KAAK8C,uBAAyB,EAC9B9C,KAAKkC,YAAc,GACnBlC,KAAKmC,aAAe,E,CAMtB,iBAAAmC,GACEtE,KAAKuE,gB,CAKP,iBAAAC,GACExE,KAAK8D,iBAAiB9D,KAAK2D,eAAgB3D,KAAK4D,wBAChD5D,KAAKyE,mBACLzE,KAAKwD,uB,CAIP,gBAAAkB,CAAiBC,GACf,GAAI3E,KAAKyC,OAAQ,CACfzC,KAAKyC,OAAOkC,KAAOA,C,EAKvB,qBAAAC,CAAsBvG,EAAoBwG,GACxC,IAAKxG,EAAW,CACd2B,KAAK+B,SAAW,MAChB/B,KAAKgC,kBAAoB,MACzBhC,KAAKoC,wBAA0B,MAC/BpC,KAAKyC,OAAS,I,CAEhBzC,KAAKwD,wBACL,GAAInF,EAAW,CACbsC,uBAAsB,KACpBX,KAAKwD,uBAAuB,G,CAGhC,GAAInF,GAAawG,IAAkBC,WAAaD,IAAkBxG,EAAW,OAC7EsC,uBAAsB,IAAMX,KAAKwD,0BACjCuB,gBAAe,IAAM/E,KAAKgF,2B,CAG5B,iBAAAC,GACEjF,KAAKuE,iBACLvE,KAAK8D,iBAAiB9D,KAAK2D,eAAgB9G,EAAkBmD,KAAK7C,c,CAGpE,gBAAA+H,GACElF,KAAKmF,wBACLnF,KAAKoF,+BACLpF,KAAKqF,wBACLrF,KAAKsF,gCACLtF,KAAKwD,uB,CAGP,kBAAA+B,GACE,GAAIvF,KAAKwF,uBAAwB,CAC/BxF,KAAKyF,iBACL,M,CAEFzF,KAAKwD,wBACLxD,KAAKyF,gB,CAGP,oBAAAC,GACE1F,KAAK4C,gBAAgB+C,aACrB3F,KAAK4C,eAAiB,KACtB5C,KAAKiD,kBAAkBrC,SACvBZ,KAAK4F,iC,CAGC,6BAAAN,GACN,MAAMO,EAAQ7F,KAAK8F,GAAGC,QAAqB,gBAC3C,IAAKF,EAAO,OACZ7F,KAAKmD,sBAAwB0C,EAC7BA,EAAMG,iBAAiBpG,EAAyBI,KAAKsD,yBACrDuC,EAAMG,iBAAiBnG,EAAuBG,KAAKuD,sB,CAG7C,+BAAAqC,GACN,IAAK5F,KAAKmD,sBAAuB,OACjCnD,KAAKmD,sBAAsB8C,oBACzBrG,EACAI,KAAKsD,yBAEPtD,KAAKmD,sBAAsB8C,oBACzBpG,EACAG,KAAKuD,uBAEPvD,KAAKmD,sBAAwB,I,CAiBvB,oBAAAqC,GACN,OAAOxF,KAAK+C,mBAAmB3C,UAAYJ,KAAKgD,qBAAqB5C,Q,CAmB/D,qBAAA+E,GACN,GAAIjI,EAAwB8C,KAAK7C,aAAc6C,KAAK7D,MAAO,CACzD6D,KAAKuE,gB,MACA,GAAIvE,KAAK0B,YAAc1B,KAAK9D,SAAU,CAC3C8D,KAAKkG,kB,EAKD,4BAAAd,GACN,IAAIe,EAAY9E,EAAO+E,sBACvB,MAAMC,EAAO,KACXrG,KAAKmF,wBACL,KAAMgB,EAAY,EAAG,CACnBxF,sBAAsB0F,E,GAG1BtB,eAAesB,E,CAGT,qBAAAhB,GACN,UAAWiB,iBAAmB,cAAgBtG,KAAKuC,SAAU,OAC7DvC,KAAK4C,gBAAgB+C,aACrB3F,KAAK4C,eAAiB,IAAI0D,gBAAe,KACvC,GAAItG,KAAKwF,uBAAwB,OACjCxF,KAAKwD,uBAAuB,IAE9BxD,KAAK4C,eAAe2D,QAAQvG,KAAKuC,S,CAG3B,qBAAAiB,GACN,GAAIxD,KAAKwF,uBAAwB,OACjCxF,KAAKiD,kBAAkBvC,U,CAIjB,yBAAA8F,GACN,IAAKxG,KAAKuC,SAAU,OAAO,EAE3B,MAAMkE,EAAcC,iBAAiB1G,KAAKuC,UAC1C,MAAMoE,GACHC,WAAWH,EAAYI,cAAgB,IAAMD,WAAWH,EAAYK,eAAiB,GAExF,OAAO7H,KAAKC,IAAI,EAAGc,KAAKuC,SAASwE,YAAcJ,E,CAGzC,qBAAAK,GACN,OAAOhH,KAAK2C,gBAAgBsE,aAAe,C,CAGrC,YAAAC,GACN,IAAKlH,KAAKuC,SAAU,OAAO,EAC3B,MAAM4E,EAAQT,iBAAiB1G,KAAKuC,UACpC,OAAOqE,WAAWO,EAAMC,WAAaD,EAAME,MAAQ,C,CAG7C,8BAAAC,GACN,IAAKtH,KAAKwC,UAAW,CACnB,OAAO,E,CAET,OAAOxC,KAAKwC,UAAU+E,wBAAwBlI,MAAQW,KAAKkH,c,CAGrD,kBAAAM,GAKN,MAAMC,EAAUzH,KAAK2C,eACrB,IAAK8E,EAAS,OAAO,KAErB,MAAMC,EAAWC,MAAMC,KAAKH,EAAQC,UACpC,MAAMjJ,EAAaiJ,EAASvD,KAAI0D,GAASA,EAAMN,wBAAwBlI,QACvE,GAAIZ,EAAWhC,SAAW,GAAKgC,EAAWuF,MAAK3E,GAASA,IAAU,IAAI,OAAO,KAE7E,MAAM8H,EAAQT,iBAAiBe,GAC/B,MAAM7I,EAAUgI,WAAWO,EAAMC,WAAaD,EAAME,MAAQ,EAC5D,MAAMS,EAAgBrJ,EAAWiB,QAAO,CAACC,EAAKN,IAAUM,EAAMN,GAAO,GACrE,MAAM0I,EAAWnJ,EAAUK,KAAKC,IAAI,EAAGT,EAAWhC,OAAS,GAC3D,MAAMoC,EAAiBI,KAAKC,IAAI,EAAGuI,EAAQR,YAAca,EAAgBC,GAEzE,MAAO,CAAEtJ,aAAYG,UAASC,iB,CAGxB,oBAAAmJ,CAAqB9F,EAA0BC,GACrD,MAAM8F,EAAgB9F,EAAa1F,OAAS,EAC5C,MAAMyL,EACJlI,KAAKkE,iBAAiBhC,KAAiBlC,KAAKkE,iBAAiBlE,KAAKkC,aACpE,MAAMiG,EACJnI,KAAKkE,iBAAiB/B,KAAkBnC,KAAKkE,iBAAiBlE,KAAKmC,cAErE,GAAI+F,EAAgB,CAClBlI,KAAKkC,YAAcA,C,CAErB,GAAIiG,EAAiB,CACnBnI,KAAKmC,aAAeA,C,CAEtB,GAAI8F,IAAkBjI,KAAK8B,cAAe,CACxC9B,KAAK8B,cAAgBmG,EACrB,IAAKA,EAAe,CAClBjI,KAAK+B,SAAW,MAChB/B,KAAKgC,kBAAoB,K,EAG7BhC,KAAK8D,iBACH9D,KAAK2D,eACL9G,EAAkBoL,EAAgB/F,EAAclC,KAAK7C,c,CAIjD,2BAAAiL,GACN,GAAIpI,KAAK6C,0BAA4BxB,EAAOgH,0BAA2B,OACvErI,KAAK6C,2BACLlC,uBAAsB,IAAMX,KAAKwD,yB,CAG3B,oBAAA8E,CAAqBC,GAC3BvI,KAAK6C,yBAA2B,EAChC7C,KAAK8C,uBAAyB,EAC9B9C,KAAKgI,qBACHO,EAAoB,GAAKvI,KAAK7C,aAC9BoL,EAAoBvI,KAAK7C,aAAe,IAE1C6C,KAAKiC,mBAAqB,I,CAGpB,mBAAAiB,GACN,IAAKlD,KAAKuC,UAAYvC,KAAK7C,aAAaV,SAAW,GAAKuD,KAAK6B,uBAAwB,CACnF,GAAI7B,KAAK8B,cAAe,CACtB9B,KAAKgI,qBAAqB,GAAI,G,CAEhChI,KAAK6C,yBAA2B,EAChC7C,KAAK8C,uBAAyB,EAC9B9C,KAAKiC,mBAAqB,KAC1B,M,CAGF,MAAMuG,EAAUxI,KAAKwH,qBACrB,MAAMiB,EAAiBzI,KAAKgH,wBAC5B,IAAKwB,GAAWC,IAAmB,EAAG,CACpCzI,KAAK8C,wBAA0B,EAC/B,GAAI9C,KAAK6C,0BAA4BxB,EAAOgH,0BAA2B,CACrErI,KAAKsI,qBAAqB,M,MACrB,GAAItI,KAAK8C,wBAA0BzB,EAAOqH,6BAA8B,CAC7E1I,KAAKsI,qBAAqB,M,KACrB,CACLtI,KAAKoI,6B,CAEP,M,CAEFpI,KAAK6C,yBAA2B,EAChC7C,KAAK8C,uBAAyB,EAE9B,MAAM6F,EAAiBzK,EACrBuK,EACAzI,KAAKwG,4BACLxG,KAAK8B,cACLT,EAAOuH,wBAGT,IAAKD,EAAgB,CACnB3I,KAAKgI,qBAAqBhI,KAAK7C,aAAc,IAC7C6C,KAAKiC,mBAAqB,KAC1B,M,CAGF,MAAM4G,EAAerK,EACnBgK,EAAQ/J,WACRuB,KAAKwG,4BACLxG,KAAKsH,iCACLkB,EAAQ5J,QACR4J,EAAQ3J,gBAEV,MAAMqD,EAAc5C,EAAqBU,KAAK7C,aAAaX,MAAM,EAAGqM,IACpE,MAAM1G,EAAenC,KAAK7C,aAAaX,MAAM0F,EAAYzF,QACzDuD,KAAKgI,qBAAqB9F,EAAaC,GACvCnC,KAAKiC,mBAAqB,I,CAGpB,cAAAwD,GACN,IAAKzF,KAAKyC,SAAWzC,KAAKwC,YAAcxC,KAAK6D,gBAAiB,OAC9D7D,KAAKyC,OAAOqG,OAAS9I,KAAKwC,UAC1BxC,KAAKyE,kB,CAGC,gBAAAsE,CAAiBC,GACvB,MAAMhI,EAAUgI,EAAgChI,OAChD,GAAIA,GAAQ5E,QAAU0I,UAAW,CAC/B9E,KAAKiJ,UAAUC,OAAOlI,EAAO5E,O,CAE/B4D,KAAK+B,SAAW,MAChB/B,KAAKoC,wBAA0B,K,CAGzB,eAAA+G,GACNnJ,KAAK+B,SAAW,MAChB/B,KAAKoC,wBAA0B,K,CAGzB,oBAAAgH,GACN,IAAKpJ,KAAK+B,SAAU/B,KAAKgC,kBAAoB,K,CAIvC,YAAAqH,GACN,OAAOrJ,KAAK7D,MAAQ,E,CAGd,cAAAoI,GACN,MAAM+E,EAAetJ,KAAK9D,SAC1B,MAAMqN,EACJD,IAAiB,IAAMtJ,KAAKoD,mBAAqB,IAAMkG,IAAiBtJ,KAAKoD,iBAE/E,GAAImG,EAAgB,CAClBvJ,KAAK4B,gBAAkB,GACvB5B,KAAKoD,iBAAmB,GACxBpD,KAAKqD,eAAiBiG,EACtBtJ,KAAK7C,aAAe,GACpB6C,KAAKqE,yBACL,M,CAGF,GAAIrE,KAAKqD,eAAgB,CACvB,IAAKiG,GAAgBA,IAAiBtJ,KAAKqD,eAAgB,CACzD,M,CAEF,IAAKrD,KAAK0B,WAAWpF,WAAW0D,KAAKqD,gBAAiB,CACpD,M,CAEF,MAAMlH,EAAO6D,KAAKqJ,eAClB,GAAIlN,EAAKM,SAAW,EAAG,CACrB,M,CAEFuD,KAAKqD,eAAiB,E,CAGxB,MAAMlH,EAAO6D,KAAKqJ,eAClB,MAAMG,EACJxJ,KAAKkE,iBAAiB/H,KAAU6D,KAAKkE,iBAAiBlE,KAAK7C,cAE7D6C,KAAK7C,aAAehB,EACpB6D,KAAKkG,mBACLlG,KAAKoD,iBAAmBkG,EACxB,GAAIE,EAAmB,CACrBxJ,KAAKqE,wB,CAEPrE,KAAKwD,uB,CAGC,gBAAAiB,GACN,IAAKzE,KAAKyC,OAAQ,OAClBzC,KAAKyC,OAAOnF,SAAWU,EAA2BgC,KAAKmC,aAAcnC,KAAK2D,e,CAGpE,gBAAAuC,GACN,MAAM/J,EAAO6D,KAAKqJ,eAElB,IAAKrJ,KAAK0B,aAAe1B,KAAK9D,SAAU,CACtC8D,KAAK4B,gBAAkB,GACvB5B,KAAK6B,uBAAyB,MAC9B,M,CAGF,IAAK7B,KAAK0B,WAAWpF,WAAW0D,KAAK9D,UAAW,CAC9C8D,KAAK4B,gBAAkB,GACvB5B,KAAK6B,uBAAyB,MAC9B,M,CAGF,MAAMzF,MAAEA,EAAKC,SAAEA,GAAaL,EAAyBgE,KAAK0B,WAAY1B,KAAK9D,SAAUC,GACrF6D,KAAK4B,gBAAkBxF,EACvB4D,KAAK6B,uBAAyBxF,C,CAGxB,SAAA4M,CAAUnM,GAChBkD,KAAK5D,MAAQU,EACbkD,KAAKyJ,YAAYC,KAAK5M,E,CAIhB,uBAAAkI,GACN,MAAMjI,EAAMiD,KAAK0C,kBAAkBiH,cACjC,iBAAiB3J,KAAK2D,oBAExB5G,GAAK6M,MAAM,CAAEC,cAAe,M,CAGtB,eAAAC,CAAgBhN,GACtBkD,KAAKsC,aAAexF,EACpB,MAAMC,EAAMiD,KAAK0C,kBAAkBiH,cAAc,iBAAiB7M,OAClEC,GAAK6M,MAAM,CAAEC,cAAe,M,CAGtB,mBAAAE,GACN,MAAMC,EAAO,IAAIhK,KAAK4D,wBAAwBqG,UAAUjN,MAAKD,IAAQA,EAAIgB,aACzE,GAAIiM,EAAMhK,KAAK8J,gBAAgBE,EAAKlN,G,CAG9B,qBAAAoN,CAAsBtC,EAAcuC,GAC1C,MAAMhO,EAAO6D,KAAK4D,uBAClB,IAAK,IAAIwG,EAAQxC,EAAOuC,EAAMC,GAAS,GAAKA,EAAQjO,EAAKM,OAAQ2N,GAASD,EAAM,CAC9E,IAAKhO,EAAKiO,IAAQrM,WAAY,OAAOqM,C,CAEvC,OAAO,I,CAGD,gBAAAC,CAAiBrB,GACvB,MAAM7M,EAAO6D,KAAK4D,uBAClB,IAAKzH,EAAKM,OAAQ,OAClB,MAAM6N,EAAYtB,EAAEuB,QAA+BC,aAAa,eAChE,MAAMC,EAAYH,GAAYtK,KAAKsC,aAEnC,GAAI0G,EAAE0B,MAAQ,SAAW1B,EAAE0B,MAAQ,IAAK,CACtC,MAAMC,EAAUxO,EAAKa,MAAKD,GAAOA,EAAID,KAAO2N,IAC5C,IAAKE,GAAWA,EAAQ5M,WAAY,OACpCiL,EAAE4B,iBACF5K,KAAKiJ,UAAU0B,EAAQ7N,IACvB,M,CAGF,MAAM+N,EAAe1O,EAAK2O,WAAU/N,GAAOA,EAAID,KAAO2N,IACtD,GAAII,EAAe,EAAG,OAEtB,IAAIE,EACJ,GAAI/B,EAAE0B,MAAQ,aAAc,CAC1BK,EAAY/K,KAAKkK,sBAAsBW,EAAc,GACrD,GAAIE,IAAc,MAAQ/K,KAAK6D,gBAAiB,CAC9CmF,EAAE4B,iBACF5K,KAAKqC,sBAAwB,UACxBrC,KAAKwC,WAAWwI,aACrB,M,OAEG,GAAIhC,EAAE0B,MAAQ,YAAa,CAChCK,EAAY/K,KAAKkK,sBAAsBW,GAAc,E,MAChD,GAAI7B,EAAE0B,MAAQ,OAAQ,CAC3BK,EAAY5O,EAAK2O,WAAU/N,IAAQA,EAAIgB,Y,MAClC,GAAIiL,EAAE0B,MAAQ,MAAO,CAC1B,MAAMO,EAAgB,IAAI9O,GAAM8N,UAAUa,WAAU/N,IAAQA,EAAIgB,aAChEgN,EAAYE,EAAgB,EAAI,KAAO9O,EAAKM,OAAS,EAAIwO,C,KACpD,CACL,M,CAGF,GAAIF,IAAc,MAAQA,EAAY,GAAKA,IAAcF,EAAc,OACvE7B,EAAE4B,iBACF5K,KAAK8J,gBAAgB3N,EAAK4O,GAAWjO,G,CAG/B,aAAAoO,CAAcC,GACpB,GAAInL,KAAK+B,SAAU,CACjB/B,KAAK+B,SAAW,MAChB/B,KAAKoC,wBAA0B,MAC/B,M,CAGF,GAAIpC,KAAKyC,QAAUzC,KAAKwC,UAAW,CACjCxC,KAAKyC,OAAOqG,OAAS9I,KAAKwC,UAC1BxC,KAAKyC,OAAO2I,SAAW,GACvBpL,KAAKyE,kB,CAGPzE,KAAKoC,wBAA0B+I,GAASE,cAAgB,MACxDrL,KAAKgC,kBAAoB,KACzBhC,KAAK+B,SAAW,I,CAWV,oBAAAuJ,CAAqBtC,GAC3B,IAAKhJ,KAAK6D,gBAAiB,OAE3B,IAAK7D,KAAK+B,SAAU,CAClB,GAAIiH,EAAE0B,MAAQ,YAAa,CACzB1B,EAAE4B,iBACF5K,KAAKqC,sBAAwB,MAC7BrC,KAAK+J,sBACL,M,CAGF,GAAIf,EAAE0B,MAAQ,SAAW1B,EAAE0B,MAAQ,IAAK,CACtC1B,EAAE4B,iBACF5K,KAAKkL,cAAc,CAAEG,aAAc,M,CAErC,M,CAGF,GAAIrC,EAAE0B,MAAQ,SAAU,CACtB1B,EAAE4B,iBACF5K,KAAK+B,SAAW,MAChB/B,KAAKoC,wBAA0B,WAC1BpC,KAAKwC,WAAWwI,Y,EAIjB,aAAAO,CAAcpP,EAAmBqP,GACvC,OACEC,EAAA,OACEC,KAAK,UACLC,MAAM,oBAAmB,aACb3L,KAAK4L,QACjBC,IAAK/F,IACH,GAAI0F,EAAO,CACT,MAAMM,EAAQhG,GAAsB,KACpC,GAAIgG,IAAS9L,KAAK2C,eAAgB,OAClC3C,KAAK2C,eAAiBmJ,EACtB,GAAIA,EAAM,CACR9L,KAAK6C,yBAA2B,EAChC7C,KAAK8C,uBAAyB,EAC9B9C,KAAKwD,uB,MAEF,CACLxD,KAAK0C,iBAAoBoD,GAAsB,I,GAGnDiG,UAAWP,EAAQ1G,UAAakE,GAAqBhJ,KAAKqK,iBAAiBrB,GAC3EgD,UACER,EACI1G,UACA,KACE9E,KAAKqC,sBAAwB,KAAK,GAIzClG,EAAKgI,KAAI,CAACpH,EAAKqN,KACd,GAAI3M,EAAaV,GAAM,CACrB,OACE0O,EAAA,OAAKE,MAAM,uBAAuBjB,IAAK,WAAWN,IAAO,cAAc,QACrEqB,EAAA,OAAKE,MAAM,8B,CAKjB,MAAM7N,EAAaf,EAAID,KAAOkD,KAAK2D,eACnC,OACE8H,EAAA,UACEf,IAAK3N,EAAID,GACTmP,KAAK,SACLP,KAAK,MAAK,cACG3O,EAAID,GACjB6O,MAAO,CACL,eAAgB,KAChB,yBAA0B7N,EAC1B,iBAAkB,KAClB,sBAAuB,KACvB,wBAAyBf,EAAIgB,YAC9B,gBACcD,EAAa,OAAS,QAAO,gBAC7Bf,EAAIgB,WAAa,OAAS+G,UAAS,gBACnC/H,EAAImP,SAAWpH,UAC9BqH,SAAUpP,EAAIgB,WACdqO,UACGZ,IAAUxL,KAAKqC,uBAAyBtF,EAAID,KAAOkD,KAAKsC,aAAe,GAAI,EAE9E+J,QAAS,KAAOb,IAAUzO,EAAIgB,YAAciC,KAAKiJ,UAAUlM,EAAID,IAC/DwP,QAAS,KACP,IAAKd,EAAOxL,KAAKsC,aAAevF,EAAID,EAAE,GAGxC2O,EAAA,QACEE,MAAO,CACL,qBAAsB,KACtB,uBAAwB,KACxB,yBAA0B5O,EAAIc,IAC9B,4BAA6Bd,EAAIc,MAGnC4N,EAAA,WAASc,GAAG,OAAOC,QAAQ,mBAAmBC,SAAU3O,EAAY4O,MAAM,WACvE3P,EAAIa,OAENb,EAAIc,KACH4N,EAAA,YACEE,MAAM,+CACNa,QAAQ,MACRG,QAAS,MACT/O,MAAM,GAAE,cACI,UAIX,I,CAOnB,MAAAgP,GAIE,MAAMC,EAAe7M,KAAK9D,WAAa,IAAM8D,KAAKoD,mBAAqBpD,KAAK9D,SAC5E,MAAM4Q,EAAUD,GAAgB7M,KAAK7C,aAAaV,OAAS,IAAMuD,KAAK6B,uBACtE,MAAMkL,EAAc/M,KAAK9D,UAAY,aACrC,MAAM8Q,EAAehN,KAAK6D,gBAAkB7D,KAAKkC,YAAclC,KAAK7C,aAEpE,OACEsO,EAACwB,EAAI,CAAAvC,IAAA,4CACHe,EAAA,UAAAf,IAAA,2CACEiB,MAAO,CACL,UAAW,KACX,iBAAkB,KAClB,gBAAiB,KACjB,sBAAuB,KACvB,qBAAsB3L,KAAKyB,WAAa,YACxC,oBAAqBzB,KAAKyB,WAAa,WACvC,0BAA2BqL,GAAW9M,KAAK6D,iBAE7CgI,IAAK/F,IACH9F,KAAKuC,SAAWuD,EAChB,GAAIA,IAAO9F,KAAK4C,eAAgB,CAC9B5C,KAAKqF,uB,IAIRyH,GACCrB,EAAA,OAAAf,IAAA,2CAAKiB,MAAM,sBAAqB,cAAa,OAAOuB,MAAK,MACvDzB,EAAA,OAAKf,IAAK,SAASqC,KAAgB/M,KAAKuL,cAAcvL,KAAK7C,aAAc,QAI5E2P,GAAW9M,KAAKiC,oBAAsB+K,EAAavQ,OAAS,GAC3DgP,EAAA,OAAAf,IAAA,2CAAKiB,MAAM,iBACTF,EAAA,OAAKf,IAAK,WAAWqC,IAAepB,MAAM,yBACvC3L,KAAKuL,cAAcyB,EAAc,SAKvCF,IAAY9M,KAAKiC,oBAChBwJ,EAAA,OAAAf,IAAA,2CAAKiB,MAAM,wBAAuB,cAAa,UAG/CmB,GAAW9M,KAAK4L,SAChBH,EAAA,WAAAf,IAAA,2CACEiB,MAAM,mBACNwB,eAAgB,EAChBZ,GAAG,OACHC,QAAQ,mBACRC,SAAQ,KACRC,MAAM,UACNU,KAAK,UAEJpN,KAAK4L,SAITkB,GAAW9M,KAAK6D,iBACf4H,EAAA,sBAAAf,IAAA,2CACE8B,QAAQ,OACRb,MAAO,CACL,4BAA6B,MAE/B0B,KAAK,cACLC,WAAY,MACZC,UAAW,MACXC,cAAexN,KAAKqC,sBAAwB,GAAI,EAChDwJ,IAAM/F,IACJ9F,KAAKwC,UAAasD,GAA2D,IAAI,EAEnF2H,SAAS,OACTC,SAAU1N,KAAKgC,kBAAiB,aACpBhC,KAAK2B,cACjBgM,UAAW,IAAM3N,KAAKkL,cAAc,CAAEG,aAAc,QACpDW,UAAWhM,KAAKyD,oBAChBmK,WAAY5N,KAAK0D,mBACjBqI,UAAY/C,GAAqBhJ,KAAKsL,qBAAqBtC,MAKhE8D,GAAW9M,KAAK6D,iBACf4H,EAAA,WAAAf,IAAA,2CACEmB,IAAK/F,IACH9F,KAAKyC,OAAUqD,GAA4B,IAAI,EAEjDnB,KAAM3E,KAAK+B,SACXzE,SAAUU,EAA2BgC,KAAKmC,aAAcnC,KAAK2D,gBAC7DkK,KAAK,SACLC,MAAM,MACNC,WAAW,gEACXC,oBAAqBhO,KAAKoC,wBAC1B6L,WAAajF,GAAahJ,KAAK+I,iBAAiBC,GAChDkF,UAAW,IAAMlO,KAAKmJ,kBACtBgF,eAAgB,IAAMnO,KAAKoJ,yB,whCA3wBb/H,EAAA+E,sBAAwB,EACxB/E,EAAAgH,0BAA4B,EAC5BhH,EAAAqH,6BAA+B,GAC/BrH,EAAAuH,uBAAyB,E","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as e,c as s,h as t,a as o,t as n}from"./index.js";import{g as r,i as c}from"./p-BQq26pt9.js";import{d}from"./p-BUDAwJVV.js";import{d as a}from"./p-BFfLvMZd.js";import{d as l}from"./p-BZVWmzKf.js";import{d as h}from"./p-BysVBVQv.js";import{d as f}from"./p-CsBICYmt.js";import{d as u}from"./p-Cg0kimXZ.js";import{d as v}from"./p-CAnnQL1F.js";function b(i,e){const s=r(i);const t=s.findIndex((i=>i.id===e));const o=t>=0?t:0;return{selectedIndex:o,selected:s[o],hasPrevious:o>0,hasNext:o<s.length-1}}const m=()=>`@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--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-section-switcher-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-section-switcher-h,.ds-focus-ring.sc-ds-mobile-section-switcher,.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.sc-ds-mobile-section-switcher{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring.sc-ds-mobile-section-switcher: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-section-switcher-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher{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-section-switcher-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-section-switcher: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-section-switcher-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher::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-section-switcher-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill.sc-ds-mobile-section-switcher{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-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before,.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::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-section-switcher-h,.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher{--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-section-switcher-h>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill.sc-ds-mobile-section-switcher>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill__content.sc-ds-mobile-section-switcher{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher{--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-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::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-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::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-section-switcher-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher: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-section-switcher-h{display:block;min-width:0;max-width:100%;color:var(--color-foreground-primary)}.mobile-section-switcher.sc-ds-mobile-section-switcher{appearance:none;display:grid;grid-template-columns:var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:var(--color-background-secondary);color:inherit;box-sizing:border-box;cursor:default}.mobile-section-switcher--expanded.sc-ds-mobile-section-switcher{background:var(--color-background-tertiary)}.mobile-section-switcher__label.sc-ds-mobile-section-switcher{min-width:0;max-width:100%;text-align:center}.mobile-section-switcher__position.sc-ds-mobile-section-switcher{width:var(--dimension-size-050);height:var(--dimension-size-050);border-radius:var(--dimension-radius-half);background:currentColor;opacity:0}.mobile-section-switcher__position--visible.sc-ds-mobile-section-switcher{opacity:1}`;let w=0;const g=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=s(this,"dsChange",7);this.sections=[];this.value="";this.navigationLabel="Change page section";this.menuOpen=false;this.initialFocusVisible=false;this.instanceId=w++;this.triggerId=`ds-mobile-section-switcher-trigger-${this.instanceId}`;this.menuId=`ds-mobile-section-switcher-menu-${this.instanceId}`;this.triggerEl=null;this.toggleMenu=i=>{if(this.selectableSections.length<=1)return;this.initialFocusVisible=i.detail===0;this.menuOpen=!this.menuOpen};this.closeMenu=()=>{this.menuOpen=false};this.handleSelect=i=>{const e=String(i.detail.value??"");const s=this.selectableSections.find((i=>i.id===e));if(!s||s.isInactive)return;this.closeMenu();if(e!==this.selectedSection?.id)this.dsChange.emit(e);requestAnimationFrame((()=>this.triggerEl?.focus()))}}get resolvedSections(){return this.sections??[]}get selectableSections(){return r(this.resolvedSections)}get selectedIndex(){return b(this.resolvedSections,this.value).selectedIndex}get selectedSection(){return this.selectableSections[this.selectedIndex]}get hasPrevious(){return b(this.resolvedSections,this.value).hasPrevious}get hasNext(){return b(this.resolvedSections,this.value).hasNext}get triggerAriaLabel(){return`${this.navigationLabel}. Current section: ${this.selectedSection?.label??""}`}get menuSections(){const i=[];let e=[];const s=()=>{if(e.length)i.push({items:e});e=[]};for(const i of this.resolvedSections){if(c(i)){s();continue}e.push({label:i.label,value:i.id,dot:i.dot,isSelected:i.id===this.selectedSection?.id,isInactive:i.isInactive})}s();return i}handleSectionsChange(){if(this.selectableSections.length<=1)this.closeMenu()}render(){const i=this.selectedSection;if(!i)return t(o,null);return t(o,null,t("button",{ref:i=>{this.triggerEl=i??null},id:this.triggerId,class:{"mobile-section-switcher":true,"mobile-section-switcher--expanded":this.menuOpen,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.menuId,"aria-expanded":String(this.menuOpen),"aria-label":this.triggerAriaLabel,onClick:this.toggleMenu},t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasPrevious,"ds-interaction-fill__content":true},"aria-hidden":"true"}),t("ds-text",{class:"mobile-section-switcher__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},i.label),t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasNext,"ds-interaction-fill__content":true},"aria-hidden":"true"})),this.selectableSections.length>1?t("ds-menu",{id:this.menuId,anchorId:this.triggerId,align:"center",menuLabel:this.navigationLabel,open:this.menuOpen,initialFocusVisible:this.initialFocusVisible,sections:this.menuSections,onDsClose:this.closeMenu,onDsSelect:this.handleSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}]}}static get style(){return m()}},[2,"ds-mobile-section-switcher",{sections:[16],value:[1],navigationLabel:[1,"navigation-label"],menuOpen:[32],initialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const i=["ds-mobile-section-switcher","ds-badge","ds-icon","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text"];i.forEach((i=>{switch(i){case"ds-mobile-section-switcher":if(!customElements.get(n(i))){customElements.define(n(i),g)}break;case"ds-badge":if(!customElements.get(n(i))){d()}break;case"ds-icon":if(!customElements.get(n(i))){a()}break;case"ds-menu":if(!customElements.get(n(i))){l()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){h()}break;case"ds-switch":if(!customElements.get(n(i))){f()}break;case"ds-tag":if(!customElements.get(n(i))){u()}break;case"ds-text":if(!customElements.get(n(i))){v()}break}}))}p();export{g as M,p as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as i,H as e,c as s,h as t,a as o,t as n}from"./index.js";import{g as r,i as c}from"./p-BQq26pt9.js";import{d}from"./p-caLOcQUK.js";import{d as a}from"./p-Cea7rROU.js";import{d as l}from"./p-CKtJ6FHM.js";import{d as h}from"./p-Do8wbFff.js";import{d as f}from"./p-DGkn8FwV.js";import{d as u}from"./p-DQBT1Jkf.js";import{d as v}from"./p-B-HsfQOK.js";function b(i,e){const s=r(i);const t=s.findIndex((i=>i.id===e));const o=t>=0?t:0;return{selectedIndex:o,selected:s[o],hasPrevious:o>0,hasNext:o<s.length-1}}const m=()=>`@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--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-section-switcher-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-section-switcher-h,.ds-focus-ring.sc-ds-mobile-section-switcher,.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.sc-ds-mobile-section-switcher{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring.sc-ds-mobile-section-switcher: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-section-switcher-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher{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-section-switcher-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-section-switcher: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-section-switcher-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher::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-section-switcher-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill.sc-ds-mobile-section-switcher{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-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before,.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::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-section-switcher-h,.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher{--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-section-switcher-h>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill.sc-ds-mobile-section-switcher>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill__content.sc-ds-mobile-section-switcher{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher{--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-section-switcher-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher{--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-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::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-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::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-section-switcher-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher: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-section-switcher-h{display:block;min-width:0;max-width:100%;color:var(--color-foreground-primary)}.mobile-section-switcher.sc-ds-mobile-section-switcher{appearance:none;display:grid;grid-template-columns:var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:var(--color-background-secondary);color:inherit;box-sizing:border-box;cursor:default}.mobile-section-switcher--expanded.sc-ds-mobile-section-switcher{background:var(--color-background-tertiary)}.mobile-section-switcher__label.sc-ds-mobile-section-switcher{min-width:0;max-width:100%;text-align:center}.mobile-section-switcher__position.sc-ds-mobile-section-switcher{width:var(--dimension-size-050);height:var(--dimension-size-050);border-radius:var(--dimension-radius-half);background:currentColor;opacity:0}.mobile-section-switcher__position--visible.sc-ds-mobile-section-switcher{opacity:1}`;let w=0;const g=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=s(this,"dsChange",7);this.sections=[];this.value="";this.navigationLabel="Change page section";this.menuOpen=false;this.initialFocusVisible=false;this.instanceId=w++;this.triggerId=`ds-mobile-section-switcher-trigger-${this.instanceId}`;this.menuId=`ds-mobile-section-switcher-menu-${this.instanceId}`;this.triggerEl=null;this.toggleMenu=i=>{if(this.selectableSections.length<=1)return;this.initialFocusVisible=i.detail===0;this.menuOpen=!this.menuOpen};this.closeMenu=()=>{this.menuOpen=false};this.handleSelect=i=>{const e=String(i.detail.value??"");const s=this.selectableSections.find((i=>i.id===e));if(!s||s.isInactive)return;this.closeMenu();if(e!==this.selectedSection?.id)this.dsChange.emit(e);requestAnimationFrame((()=>this.triggerEl?.focus()))}}get resolvedSections(){return this.sections??[]}get selectableSections(){return r(this.resolvedSections)}get selectedIndex(){return b(this.resolvedSections,this.value).selectedIndex}get selectedSection(){return this.selectableSections[this.selectedIndex]}get hasPrevious(){return b(this.resolvedSections,this.value).hasPrevious}get hasNext(){return b(this.resolvedSections,this.value).hasNext}get triggerAriaLabel(){return`${this.navigationLabel}. Current section: ${this.selectedSection?.label??""}`}get menuSections(){const i=[];let e=[];const s=()=>{if(e.length)i.push({items:e});e=[]};for(const i of this.resolvedSections){if(c(i)){s();continue}e.push({label:i.label,value:i.id,dot:i.dot,isSelected:i.id===this.selectedSection?.id,isInactive:i.isInactive})}s();return i}handleSectionsChange(){if(this.selectableSections.length<=1)this.closeMenu()}render(){const i=this.selectedSection;if(!i)return t(o,null);return t(o,null,t("button",{ref:i=>{this.triggerEl=i??null},id:this.triggerId,class:{"mobile-section-switcher":true,"mobile-section-switcher--expanded":this.menuOpen,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.menuId,"aria-expanded":String(this.menuOpen),"aria-label":this.triggerAriaLabel,onClick:this.toggleMenu},t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasPrevious,"ds-interaction-fill__content":true},"aria-hidden":"true"}),t("ds-text",{class:"mobile-section-switcher__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},i.label),t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasNext,"ds-interaction-fill__content":true},"aria-hidden":"true"})),this.selectableSections.length>1?t("ds-menu",{id:this.menuId,anchorId:this.triggerId,align:"center",menuLabel:this.navigationLabel,open:this.menuOpen,initialFocusVisible:this.initialFocusVisible,sections:this.menuSections,onDsClose:this.closeMenu,onDsSelect:this.handleSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}]}}static get style(){return m()}},[2,"ds-mobile-section-switcher",{sections:[16],value:[1],navigationLabel:[1,"navigation-label"],menuOpen:[32],initialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const i=["ds-mobile-section-switcher","ds-badge","ds-icon","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text"];i.forEach((i=>{switch(i){case"ds-mobile-section-switcher":if(!customElements.get(n(i))){customElements.define(n(i),g)}break;case"ds-badge":if(!customElements.get(n(i))){d()}break;case"ds-icon":if(!customElements.get(n(i))){a()}break;case"ds-menu":if(!customElements.get(n(i))){l()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){h()}break;case"ds-switch":if(!customElements.get(n(i))){f()}break;case"ds-tag":if(!customElements.get(n(i))){u()}break;case"ds-text":if(!customElements.get(n(i))){v()}break}}))}p();export{g as M,p as d};
|
|
2
|
+
//# sourceMappingURL=p-BubgDQlb.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["resolveMobileSectionPosition","sections","value","selectable","getSelectableTabs","matchedIndex","findIndex","section","id","selectedIndex","selected","hasPrevious","hasNext","length","mobileSectionSwitcherCss","nextMobileSectionSwitcherId","MobileSectionSwitcher","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navigationLabel","menuOpen","initialFocusVisible","instanceId","triggerId","menuId","triggerEl","toggleMenu","event","selectableSections","detail","closeMenu","handleSelect","String","find","candidate","isInactive","selectedSection","dsChange","emit","requestAnimationFrame","focus","resolvedSections","triggerAriaLabel","label","menuSections","groups","items","commit","push","isTabDivider","dot","isSelected","handleSectionsChange","render","h","Host","ref","element","class","type","onClick","as","variant","emphasis","color","lineTruncation","anchorId","align","menuLabel","open","onDsClose","onDsSelect"],"sources":["src/wc/components/MobileSectionSwitcher/mobile-section-switcher-utils.ts","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.css?tag=ds-mobile-section-switcher&encapsulation=scoped","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.tsx"],"sourcesContent":["import { getSelectableTabs, type TabItem, type TabItemTab } from '../TabGroup/tab-item-utils';\n\nexport interface MobileSectionPosition {\n selectedIndex: number;\n selected?: TabItemTab;\n hasPrevious: boolean;\n hasNext: boolean;\n}\n\n/** Resolve ordered selectable neighbors while ignoring visual divider entries. */\nexport function resolveMobileSectionPosition(\n sections: TabItem[],\n value: string\n): MobileSectionPosition {\n const selectable = getSelectableTabs(sections);\n const matchedIndex = selectable.findIndex(section => section.id === value);\n const selectedIndex = matchedIndex >= 0 ? matchedIndex : 0;\n return {\n selectedIndex,\n selected: selectable[selectedIndex],\n hasPrevious: selectedIndex > 0,\n hasNext: selectedIndex < selectable.length - 1,\n };\n}\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n display: block;\n min-width: 0;\n max-width: 100%;\n color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n appearance: none;\n display: grid;\n grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-050);\n max-width: 100%;\n min-height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n border: 0;\n border-radius: var(--dimension-radius-100);\n background: var(--color-background-secondary);\n color: inherit;\n box-sizing: border-box;\n cursor: default;\n}\n\n.mobile-section-switcher--expanded {\n background: var(--color-background-tertiary);\n}\n\n.mobile-section-switcher__label {\n min-width: 0;\n max-width: 100%;\n text-align: center;\n}\n\n.mobile-section-switcher__position {\n width: var(--dimension-size-050);\n height: var(--dimension-size-050);\n border-radius: var(--dimension-radius-half);\n background: currentColor;\n opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n opacity: 1;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\nimport { resolveMobileSectionPosition } from './mobile-section-switcher-utils';\n\nlet nextMobileSectionSwitcherId = 0;\n\n@Component({\n tag: 'ds-mobile-section-switcher',\n styleUrl: 'MobileSectionSwitcher.css',\n scoped: true,\n})\nexport class MobileSectionSwitcher {\n @Element() el!: HTMLElement;\n\n /** Ordered controlled sections. Divider entries group the popup menu. */\n @Prop() sections: TabItem[] = [];\n /** Controlled selected section id. */\n @Prop() value: string = '';\n /** Accessible name for the section chooser. */\n @Prop() navigationLabel: string = 'Change page section';\n\n /** Selection intent. The route, tool, or workflow owner updates `value`. */\n @Event() dsChange!: EventEmitter<string>;\n\n @State() private menuOpen = false;\n @State() private initialFocusVisible = false;\n\n private readonly instanceId = nextMobileSectionSwitcherId++;\n private readonly triggerId = `ds-mobile-section-switcher-trigger-${this.instanceId}`;\n private readonly menuId = `ds-mobile-section-switcher-menu-${this.instanceId}`;\n private triggerEl: HTMLButtonElement | null = null;\n\n private get resolvedSections(): TabItem[] {\n return this.sections ?? [];\n }\n\n private get selectableSections(): TabItemTab[] {\n return getSelectableTabs(this.resolvedSections);\n }\n\n private get selectedIndex(): number {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).selectedIndex;\n }\n\n private get selectedSection(): TabItemTab | undefined {\n return this.selectableSections[this.selectedIndex];\n }\n\n private get hasPrevious(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasPrevious;\n }\n\n private get hasNext(): boolean {\n return resolveMobileSectionPosition(this.resolvedSections, this.value).hasNext;\n }\n\n private get triggerAriaLabel(): string {\n return `${this.navigationLabel}. Current section: ${this.selectedSection?.label ?? ''}`;\n }\n\n private get menuSections(): MenuSection[] {\n const groups: MenuSection[] = [];\n let items: MenuItemData[] = [];\n const commit = () => {\n if (items.length) groups.push({ items });\n items = [];\n };\n\n for (const section of this.resolvedSections) {\n if (isTabDivider(section)) {\n commit();\n continue;\n }\n items.push({\n label: section.label,\n value: section.id,\n dot: section.dot,\n isSelected: section.id === this.selectedSection?.id,\n isInactive: section.isInactive,\n });\n }\n commit();\n return groups;\n }\n\n @Watch('sections')\n handleSectionsChange() {\n if (this.selectableSections.length <= 1) this.closeMenu();\n }\n\n private toggleMenu = (event: MouseEvent) => {\n if (this.selectableSections.length <= 1) return;\n this.initialFocusVisible = event.detail === 0;\n this.menuOpen = !this.menuOpen;\n };\n\n private closeMenu = () => {\n this.menuOpen = false;\n };\n\n private handleSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail.value ?? '');\n const section = this.selectableSections.find(candidate => candidate.id === id);\n if (!section || section.isInactive) return;\n this.closeMenu();\n if (id !== this.selectedSection?.id) this.dsChange.emit(id);\n requestAnimationFrame(() => this.triggerEl?.focus());\n };\n\n render() {\n const selected = this.selectedSection;\n if (!selected) return <Host />;\n\n return (\n <Host>\n <button\n ref={element => {\n this.triggerEl = element ?? null;\n }}\n id={this.triggerId}\n class={{\n 'mobile-section-switcher': true,\n 'mobile-section-switcher--expanded': this.menuOpen,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-controls={this.menuId}\n aria-expanded={String(this.menuOpen)}\n aria-label={this.triggerAriaLabel}\n onClick={this.toggleMenu}\n >\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasPrevious,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n <ds-text\n class=\"mobile-section-switcher__label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"inherit\"\n lineTruncation={1}\n >\n {selected.label}\n </ds-text>\n <span\n class={{\n 'mobile-section-switcher__position': true,\n 'mobile-section-switcher__position--visible': this.hasNext,\n 'ds-interaction-fill__content': true,\n }}\n aria-hidden=\"true\"\n />\n </button>\n\n {this.selectableSections.length > 1 ? (\n <ds-menu\n id={this.menuId}\n anchorId={this.triggerId}\n align=\"center\"\n menuLabel={this.navigationLabel}\n open={this.menuOpen}\n initialFocusVisible={this.initialFocusVisible}\n sections={this.menuSections}\n onDsClose={this.closeMenu}\n onDsSelect={this.handleSelect}\n />\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as d,H as i,h as e,a as r,t as s}from"./index.js";const o=()=>`@media (forced-colors: active){.sc-ds-divider:root,.sc-ds-divider-h,.ds-forced-colors-scope.sc-ds-divider{--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-divider-h{--_divider-color:var(--color-divider-divider);--_divider-inset:0;--_divider-length:100%;display:block;flex-shrink:0;width:var(--_divider-length);height:var(--dimension-stroke-width-012);margin:0 var(--_divider-inset);border:none;background-color:var(--_divider-color)}.divider--vertical.sc-ds-divider-h{width:var(--dimension-stroke-width-012);height:var(--_divider-length);min-height:var(--dimension-stroke-width-012);margin:var(--_divider-inset) 0;align-self:stretch}.divider--vertical.divider--custom-length.sc-ds-divider-h{align-self:center}[background='bold'].sc-ds-divider-h,.divider--background-bold.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-bold-background)}[background='strong'].sc-ds-divider-h,.divider--background-strong.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-strong-background)}[background='medium'].sc-ds-divider-h,.divider--background-medium.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-medium-background)}[background='translucent'].sc-ds-divider-h,.divider--background-translucent.sc-ds-divider-h{--_divider-color:var(--color-translucent-divider)}[background='navigation'].sc-ds-divider-h,.divider--background-navigation.sc-ds-divider-h{--_divider-color:var(--color-navigation-divider)}[background='media'].sc-ds-divider-h,.divider--background-media.sc-ds-divider-h{--_divider-color:var(--color-media-divider)}[background='always-dark'].sc-ds-divider-h,.divider--background-always-dark.sc-ds-divider-h{--_divider-color:var(--color-always-dark-divider)}[background='inverted'].sc-ds-divider-h,.divider--background-inverted.sc-ds-divider-h{--_divider-color:var(--color-inverted-divider)}@media (forced-colors: active){.sc-ds-divider-h{background-color:var(--ds-forced-color-content)}}`;const c={none:"0","space-000":"var(--dimension-space-000)","space-012":"var(--dimension-space-012)","space-025":"var(--dimension-space-025)","space-050":"var(--dimension-space-050)","space-075":"var(--dimension-space-075)","space-100":"var(--dimension-space-100)","space-125":"var(--dimension-space-125)","space-150":"var(--dimension-space-150)","space-175":"var(--dimension-space-175)","space-200":"var(--dimension-space-200)","space-250":"var(--dimension-space-250)","space-300":"var(--dimension-space-300)","space-400":"var(--dimension-space-400)","space-600":"var(--dimension-space-600)","space-800":"var(--dimension-space-800)"};const a=d(class d extends i{constructor(d){super();if(d!==false){this.__registerHost()}this.orientation="horizontal";this.inset="none";this.length="auto";this.semantic=false}resolveInset(){return Object.prototype.hasOwnProperty.call(c,this.inset)?c[this.inset]:this.inset}resolveLength(){return this.length==="auto"||this.length==="full"?"100%":this.length}render(){const d=this.orientation==="vertical";const i=this.length!=="auto"&&this.length!=="full";return e(r,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as d,H as i,h as e,a as r,t as s}from"./index.js";const o=()=>`@media (forced-colors: active){.sc-ds-divider:root,.sc-ds-divider-h,.ds-forced-colors-scope.sc-ds-divider{--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-divider-h{--_divider-color:var(--color-divider-divider);--_divider-inset:0;--_divider-length:100%;display:block;flex-shrink:0;width:var(--_divider-length);height:var(--dimension-stroke-width-012);margin:0 var(--_divider-inset);border:none;background-color:var(--_divider-color)}.divider--vertical.sc-ds-divider-h{width:var(--dimension-stroke-width-012);height:var(--_divider-length);min-height:var(--dimension-stroke-width-012);margin:var(--_divider-inset) 0;align-self:stretch}.divider--vertical.divider--custom-length.sc-ds-divider-h{align-self:center}[background='bold'].sc-ds-divider-h,.divider--background-bold.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-bold-background)}[background='strong'].sc-ds-divider-h,.divider--background-strong.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-strong-background)}[background='medium'].sc-ds-divider-h,.divider--background-medium.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-medium-background)}[background='translucent'].sc-ds-divider-h,.divider--background-translucent.sc-ds-divider-h{--_divider-color:var(--color-translucent-divider)}[background='navigation'].sc-ds-divider-h,.divider--background-navigation.sc-ds-divider-h{--_divider-color:var(--color-navigation-divider)}[background='media'].sc-ds-divider-h,.divider--background-media.sc-ds-divider-h{--_divider-color:var(--color-media-divider)}[background='always-dark'].sc-ds-divider-h,.divider--background-always-dark.sc-ds-divider-h{--_divider-color:var(--color-always-dark-divider)}[background='inverted'].sc-ds-divider-h,.divider--background-inverted.sc-ds-divider-h{--_divider-color:var(--color-inverted-divider)}@media (forced-colors: active){.sc-ds-divider-h{background-color:var(--ds-forced-color-content)}}`;const c={none:"0","space-000":"var(--dimension-space-000)","space-012":"var(--dimension-space-012)","space-025":"var(--dimension-space-025)","space-050":"var(--dimension-space-050)","space-075":"var(--dimension-space-075)","space-100":"var(--dimension-space-100)","space-125":"var(--dimension-space-125)","space-150":"var(--dimension-space-150)","space-175":"var(--dimension-space-175)","space-200":"var(--dimension-space-200)","space-250":"var(--dimension-space-250)","space-300":"var(--dimension-space-300)","space-400":"var(--dimension-space-400)","space-600":"var(--dimension-space-600)","space-800":"var(--dimension-space-800)"};const a=d(class d extends i{constructor(d){super();if(d!==false){this.__registerHost()}this.orientation="horizontal";this.inset="none";this.length="auto";this.semantic=false}resolveInset(){return Object.prototype.hasOwnProperty.call(c,this.inset)?c[this.inset]:this.inset}resolveLength(){return this.length==="auto"||this.length==="full"?"100%":this.length}render(){const d=this.orientation==="vertical";const i=this.length!=="auto"&&this.length!=="full";return e(r,{key:"a568a2a9c68bcfdc268fe9bb5c848f88cd7e5ec5",role:this.semantic?"separator":undefined,"aria-orientation":this.semantic?this.orientation:undefined,"aria-hidden":this.semantic?undefined:"true",class:{divider:true,"divider--vertical":d,"divider--custom-length":i,[`divider--background-${this.background}`]:!!this.background},style:{"--_divider-inset":this.resolveInset(),"--_divider-length":this.resolveLength()}})}static get style(){return o()}},[2,"ds-divider",{orientation:[1],background:[1],inset:[1],length:[1],semantic:[4]}]);function n(){if(typeof customElements==="undefined"){return}const d=["ds-divider"];d.forEach((d=>{switch(d){case"ds-divider":if(!customElements.get(s(d))){customElements.define(s(d),a)}break}}))}n();export{a as D,n as d};
|
|
2
|
+
//# sourceMappingURL=p-Bv6FSDPR.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["dividerCss","INSET_VALUE","none","Divider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","orientation","inset","length","semantic","resolveInset","Object","prototype","hasOwnProperty","call","resolveLength","render","isVertical","hasCustomLength","h","Host","key","role","undefined","class","divider","background","style"],"sources":["src/wc/components/Divider/Divider.css?tag=ds-divider&encapsulation=scoped","src/wc/components/Divider/Divider.tsx"],"sourcesContent":["@import '../../utils/forced-colors.css';\n\n:host {\n --_divider-color: var(--color-divider-divider);\n --_divider-inset: 0;\n --_divider-length: 100%;\n\n display: block;\n flex-shrink: 0;\n width: var(--_divider-length);\n height: var(--dimension-stroke-width-012);\n margin: 0 var(--_divider-inset);\n border: none;\n background-color: var(--_divider-color);\n}\n\n:host(.divider--vertical) {\n width: var(--dimension-stroke-width-012);\n height: var(--_divider-length);\n min-height: var(--dimension-stroke-width-012);\n margin: var(--_divider-inset) 0;\n align-self: stretch;\n}\n\n:host(.divider--vertical.divider--custom-length) {\n align-self: center;\n}\n\n:host([background='bold']),\n:host(.divider--background-bold) {\n --_divider-color: var(--color-divider-divider-on-bold-background);\n}\n\n:host([background='strong']),\n:host(.divider--background-strong) {\n --_divider-color: var(--color-divider-divider-on-strong-background);\n}\n\n:host([background='medium']),\n:host(.divider--background-medium) {\n --_divider-color: var(--color-divider-divider-on-medium-background);\n}\n\n:host([background='translucent']),\n:host(.divider--background-translucent) {\n --_divider-color: var(--color-translucent-divider);\n}\n\n:host([background='navigation']),\n:host(.divider--background-navigation) {\n --_divider-color: var(--color-navigation-divider);\n}\n\n:host([background='media']),\n:host(.divider--background-media) {\n --_divider-color: var(--color-media-divider);\n}\n\n:host([background='always-dark']),\n:host(.divider--background-always-dark) {\n --_divider-color: var(--color-always-dark-divider);\n}\n\n:host([background='inverted']),\n:host(.divider--background-inverted) {\n --_divider-color: var(--color-inverted-divider);\n}\n\n@media (forced-colors: active) {\n :host {\n background-color: var(--ds-forced-color-content);\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'navigation'\n | 'always-dark';\nexport type DividerInsetToken =\n | 'space-000'\n | 'space-012'\n | 'space-025'\n | 'space-050'\n | 'space-075'\n | 'space-100'\n | 'space-125'\n | 'space-150'\n | 'space-175'\n | 'space-200'\n | 'space-250'\n | 'space-300'\n | 'space-400'\n | 'space-600'\n | 'space-800';\nexport type DividerInset = 'none' | DividerInsetToken | (string & {});\nexport type DividerLength = 'auto' | 'full' | (string & {});\n\nconst INSET_VALUE: Record<'none' | DividerInsetToken, string> = {\n none: '0',\n 'space-000': 'var(--dimension-space-000)',\n 'space-012': 'var(--dimension-space-012)',\n 'space-025': 'var(--dimension-space-025)',\n 'space-050': 'var(--dimension-space-050)',\n 'space-075': 'var(--dimension-space-075)',\n 'space-100': 'var(--dimension-space-100)',\n 'space-125': 'var(--dimension-space-125)',\n 'space-150': 'var(--dimension-space-150)',\n 'space-175': 'var(--dimension-space-175)',\n 'space-200': 'var(--dimension-space-200)',\n 'space-250': 'var(--dimension-space-250)',\n 'space-300': 'var(--dimension-space-300)',\n 'space-400': 'var(--dimension-space-400)',\n 'space-600': 'var(--dimension-space-600)',\n 'space-800': 'var(--dimension-space-800)',\n};\n\n@Component({\n tag: 'ds-divider',\n styleUrl: 'Divider.css',\n scoped: true,\n})\nexport class Divider {\n /** Direction of the divider line. Defaults to 'horizontal'. */\n @Prop() orientation: DividerOrientation = 'horizontal';\n\n /** Actual parent surface context. Omit on primary and secondary surfaces. */\n @Prop() background: DividerBackground | undefined;\n\n /** Insets the divider from its start/end edges. Accepts spacing token names or any CSS length. */\n @Prop() inset: DividerInset = 'none';\n\n /** Visual line length. Defaults to filling the available axis. Accepts any CSS length. */\n @Prop() length: DividerLength = 'auto';\n\n /** Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default. */\n @Prop() semantic: boolean = false;\n\n private resolveInset(): string {\n return Object.prototype.hasOwnProperty.call(INSET_VALUE, this.inset)\n ? INSET_VALUE[this.inset as keyof typeof INSET_VALUE]\n : this.inset;\n }\n\n private resolveLength(): string {\n return this.length === 'auto' || this.length === 'full'
|
|
1
|
+
{"version":3,"names":["dividerCss","INSET_VALUE","none","Divider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","orientation","inset","length","semantic","resolveInset","Object","prototype","hasOwnProperty","call","resolveLength","render","isVertical","hasCustomLength","h","Host","key","role","undefined","class","divider","background","style"],"sources":["src/wc/components/Divider/Divider.css?tag=ds-divider&encapsulation=scoped","src/wc/components/Divider/Divider.tsx"],"sourcesContent":["@import '../../utils/forced-colors.css';\n\n:host {\n --_divider-color: var(--color-divider-divider);\n --_divider-inset: 0;\n --_divider-length: 100%;\n\n display: block;\n flex-shrink: 0;\n width: var(--_divider-length);\n height: var(--dimension-stroke-width-012);\n margin: 0 var(--_divider-inset);\n border: none;\n background-color: var(--_divider-color);\n}\n\n:host(.divider--vertical) {\n width: var(--dimension-stroke-width-012);\n height: var(--_divider-length);\n min-height: var(--dimension-stroke-width-012);\n margin: var(--_divider-inset) 0;\n align-self: stretch;\n}\n\n:host(.divider--vertical.divider--custom-length) {\n align-self: center;\n}\n\n:host([background='bold']),\n:host(.divider--background-bold) {\n --_divider-color: var(--color-divider-divider-on-bold-background);\n}\n\n:host([background='strong']),\n:host(.divider--background-strong) {\n --_divider-color: var(--color-divider-divider-on-strong-background);\n}\n\n:host([background='medium']),\n:host(.divider--background-medium) {\n --_divider-color: var(--color-divider-divider-on-medium-background);\n}\n\n:host([background='translucent']),\n:host(.divider--background-translucent) {\n --_divider-color: var(--color-translucent-divider);\n}\n\n:host([background='navigation']),\n:host(.divider--background-navigation) {\n --_divider-color: var(--color-navigation-divider);\n}\n\n:host([background='media']),\n:host(.divider--background-media) {\n --_divider-color: var(--color-media-divider);\n}\n\n:host([background='always-dark']),\n:host(.divider--background-always-dark) {\n --_divider-color: var(--color-always-dark-divider);\n}\n\n:host([background='inverted']),\n:host(.divider--background-inverted) {\n --_divider-color: var(--color-inverted-divider);\n}\n\n@media (forced-colors: active) {\n :host {\n background-color: var(--ds-forced-color-content);\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'navigation'\n | 'always-dark';\nexport type DividerInsetToken =\n | 'space-000'\n | 'space-012'\n | 'space-025'\n | 'space-050'\n | 'space-075'\n | 'space-100'\n | 'space-125'\n | 'space-150'\n | 'space-175'\n | 'space-200'\n | 'space-250'\n | 'space-300'\n | 'space-400'\n | 'space-600'\n | 'space-800';\nexport type DividerInset = 'none' | DividerInsetToken | (string & {});\nexport type DividerLength = 'auto' | 'full' | (string & {});\n\nconst INSET_VALUE: Record<'none' | DividerInsetToken, string> = {\n none: '0',\n 'space-000': 'var(--dimension-space-000)',\n 'space-012': 'var(--dimension-space-012)',\n 'space-025': 'var(--dimension-space-025)',\n 'space-050': 'var(--dimension-space-050)',\n 'space-075': 'var(--dimension-space-075)',\n 'space-100': 'var(--dimension-space-100)',\n 'space-125': 'var(--dimension-space-125)',\n 'space-150': 'var(--dimension-space-150)',\n 'space-175': 'var(--dimension-space-175)',\n 'space-200': 'var(--dimension-space-200)',\n 'space-250': 'var(--dimension-space-250)',\n 'space-300': 'var(--dimension-space-300)',\n 'space-400': 'var(--dimension-space-400)',\n 'space-600': 'var(--dimension-space-600)',\n 'space-800': 'var(--dimension-space-800)',\n};\n\n@Component({\n tag: 'ds-divider',\n styleUrl: 'Divider.css',\n scoped: true,\n})\nexport class Divider {\n /** Direction of the divider line. Defaults to 'horizontal'. */\n @Prop() orientation: DividerOrientation = 'horizontal';\n\n /** Actual parent surface context. Omit on primary and secondary surfaces. */\n @Prop() background: DividerBackground | undefined;\n\n /** Insets the divider from its start/end edges. Accepts spacing token names or any CSS length. */\n @Prop() inset: DividerInset = 'none';\n\n /** Visual line length. Defaults to filling the available axis. Accepts any CSS length. */\n @Prop() length: DividerLength = 'auto';\n\n /** Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default. */\n @Prop() semantic: boolean = false;\n\n private resolveInset(): string {\n return Object.prototype.hasOwnProperty.call(INSET_VALUE, this.inset)\n ? INSET_VALUE[this.inset as keyof typeof INSET_VALUE]\n : this.inset;\n }\n\n private resolveLength(): string {\n return this.length === 'auto' || this.length === 'full' ? '100%' : this.length;\n }\n\n render() {\n const isVertical = this.orientation === 'vertical';\n const hasCustomLength = this.length !== 'auto' && this.length !== 'full';\n\n return (\n <Host\n role={this.semantic ? 'separator' : undefined}\n aria-orientation={this.semantic ? this.orientation : undefined}\n aria-hidden={this.semantic ? undefined : 'true'}\n class={{\n divider: true,\n 'divider--vertical': isVertical,\n 'divider--custom-length': hasCustomLength,\n [`divider--background-${this.background}`]: !!this.background,\n }}\n style={{\n '--_divider-inset': this.resolveInset(),\n '--_divider-length': this.resolveLength(),\n }}\n />\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAa,IAAM,0kECgCzB,MAAMC,EAA0D,CAC9DC,KAAM,IACN,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,6BACb,YAAa,8B,MAQFC,EAAOC,EAAA,MAAAD,UAAAE,EALpB,WAAAC,CAAAC,G,4CAOUC,KAAAC,YAAkC,aAMlCD,KAAAE,MAAsB,OAGtBF,KAAAG,OAAwB,OAGxBH,KAAAI,SAAoB,KAkC7B,CAhCS,YAAAC,GACN,OAAOC,OAAOC,UAAUC,eAAeC,KAAKhB,EAAaO,KAAKE,OAC1DT,EAAYO,KAAKE,OACjBF,KAAKE,K,CAGH,aAAAQ,GACN,OAAOV,KAAKG,SAAW,QAAUH,KAAKG,SAAW,OAAS,OAASH,KAAKG,M,CAG1E,MAAAQ,GACE,MAAMC,EAAaZ,KAAKC,cAAgB,WACxC,MAAMY,EAAkBb,KAAKG,SAAW,QAAUH,KAAKG,SAAW,OAElE,OACEW,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAMjB,KAAKI,SAAW,YAAcc,UAAS,mBAC3BlB,KAAKI,SAAWJ,KAAKC,YAAciB,UAAS,cACjDlB,KAAKI,SAAWc,UAAY,OACzCC,MAAO,CACLC,QAAS,KACT,oBAAqBR,EACrB,yBAA0BC,EAC1B,CAAC,uBAAuBb,KAAKqB,gBAAiBrB,KAAKqB,YAErDC,MAAO,CACL,mBAAoBtB,KAAKK,eACzB,oBAAqBL,KAAKU,kB","ignoreList":[]}
|