@ds-mo/ui 14.20.0 → 14.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +8 -4
- package/dist/agent.json +447 -44
- package/dist/angular/ds-bar-title.d.ts +1 -1
- package/dist/angular/ds-bar-title.js +3 -3
- package/dist/angular/ds-chip.d.ts +1 -1
- package/dist/angular/ds-chip.js +3 -3
- package/dist/angular/ds-filter-menu.d.ts +7 -1
- package/dist/angular/ds-filter-menu.js +7 -4
- package/dist/angular/ds-input.d.ts +1 -1
- package/dist/angular/ds-input.js +3 -3
- package/dist/angular/ds-panel-nav.d.ts +7 -1
- package/dist/angular/ds-panel-nav.js +7 -4
- package/dist/angular/ds-shell-app.d.ts +7 -1
- package/dist/angular/ds-shell-app.js +7 -4
- package/dist/angular/ds-shell-page.d.ts +1 -1
- package/dist/angular/ds-shell-page.js +3 -3
- package/dist/angular/ds-tab-group.d.ts +1 -1
- package/dist/angular/ds-tab-group.js +3 -3
- package/dist/angular/ds-table-filter.d.ts +7 -1
- package/dist/angular/ds-table-filter.js +7 -4
- package/dist/angular/ds-table-group.d.ts +29 -0
- package/dist/angular/ds-table-group.js +48 -0
- package/dist/angular/ds-table-search.d.ts +20 -0
- package/dist/angular/ds-table-search.js +49 -0
- package/dist/angular/ds-table.d.ts +1 -1
- package/dist/angular/ds-table.js +3 -3
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +2 -0
- package/dist/angular/proxies.d.ts +2 -0
- package/dist/angular/proxies.js +2 -0
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-action.js +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-breadcrumb.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-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-section.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-composer.js +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-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tool-search.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-paper-texture.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-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-slider.js +1 -1
- package/dist/components/ds-swatch-picker.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-filter.js.map +1 -1
- package/dist/components/ds-table-group.d.ts +11 -0
- package/dist/components/ds-table-group.js +2 -0
- package/dist/components/ds-table-group.js.map +1 -0
- package/dist/components/ds-table-saved-views.js +1 -1
- package/dist/components/ds-table-search.d.ts +11 -0
- package/dist/components/ds-table-search.js +2 -0
- package/dist/components/ds-table-search.js.map +1 -0
- 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-toolbar.js.map +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-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-Bf7PZJPT.js → p-5Z4oYuiK.js} +2 -2
- package/dist/components/{p-DIlScMvI.js → p-6rB0eAda.js} +2 -2
- package/dist/components/{p-CptSB-tA.js → p-9ykZwPlI.js} +2 -2
- package/dist/components/p-B0OZx3JB.js +2 -0
- package/dist/components/p-B0OZx3JB.js.map +1 -0
- package/dist/components/{p-BHhmB9-4.js → p-B0kSlcaw.js} +2 -2
- package/dist/components/{p-DWjTOoXs.js → p-B1wMpt1z.js} +2 -2
- package/dist/components/p-BEttT0UB.js +2 -0
- package/dist/components/p-BEttT0UB.js.map +1 -0
- package/dist/components/p-BFit8o0r.js +2 -0
- package/dist/components/p-BFit8o0r.js.map +1 -0
- package/dist/components/{p-fRDzpfi9.js → p-BXv6RpoF.js} +2 -2
- package/dist/components/{p-D7QlTWbN.js → p-BbG7nOcz.js} +2 -2
- package/dist/components/{p-Bx5BSd6F.js → p-BcxidW9k.js} +2 -2
- package/dist/components/{p-1UAVanY9.js → p-Bd8I2oXN.js} +2 -2
- package/dist/components/{p-DGe5oXR0.js → p-Bjq1KP_Y.js} +2 -2
- package/dist/components/p-Bjq1KP_Y.js.map +1 -0
- package/dist/components/{p-DW5Ita-P.js → p-BnTPuV3x.js} +2 -2
- package/dist/components/{p-DW5Ita-P.js.map → p-BnTPuV3x.js.map} +1 -1
- package/dist/components/p-BqVXMEJm.js +2 -0
- package/dist/components/p-BqVXMEJm.js.map +1 -0
- package/dist/components/p-CB3fv_Oh.js +2 -0
- package/dist/components/p-CB3fv_Oh.js.map +1 -0
- package/dist/components/{p-DdH7b4JF.js → p-CBymzuOO.js} +2 -2
- package/dist/components/{p-BjRD57w3.js → p-CE2b5GPu.js} +2 -2
- package/dist/components/{p-DBYv7fRq.js → p-CFkZSDwI.js} +2 -2
- package/dist/components/{p-Bb4KnRy0.js → p-CTH3dSYg.js} +2 -2
- package/dist/components/{p-BmssRAEZ.js → p-CZ144LS5.js} +2 -2
- package/dist/components/{p-B-HsfQOK.js → p-Cd1JnnVK.js} +2 -2
- package/dist/components/p-CeKa4VbU.js +2 -0
- package/dist/components/{p-AtUP95E_.js.map → p-CeKa4VbU.js.map} +1 -1
- package/dist/components/{p-CDw_WEVt.js → p-Cnsvgx1M.js} +2 -2
- package/dist/components/{p-BYFS2qWb.js → p-CpeJMKJ5.js} +2 -2
- package/dist/components/{p-DM1Z_hh0.js → p-D36EmETH.js} +2 -2
- package/dist/components/p-D9wZlB_N.js +2 -0
- package/dist/components/p-D9wZlB_N.js.map +1 -0
- package/dist/components/{p-DFC0sRM-.js → p-DI8DUozc.js} +2 -2
- package/dist/components/{p-v4oqkJms.js → p-DSy1oOnd.js} +2 -2
- package/dist/components/{p-v4oqkJms.js.map → p-DSy1oOnd.js.map} +1 -1
- package/dist/components/{p-DQBT1Jkf.js → p-DbLLH3hr.js} +2 -2
- package/dist/components/{p-B2FT4Da6.js → p-De0qjzPu.js} +2 -2
- package/dist/components/{p-B6rSDhJY.js → p-Dit6JmAK.js} +2 -2
- package/dist/components/p-DnZ7DNaz.js +2 -0
- package/dist/components/p-DnZ7DNaz.js.map +1 -0
- package/dist/components/{p-caLOcQUK.js → p-DzPtYdXy.js} +2 -2
- package/dist/components/{p-Do8wbFff.js → p-XaCYqck3.js} +2 -2
- package/dist/components/{p-L8IIeDXM.js → p-_C-XRpCB.js} +2 -2
- package/dist/components/{p-CyZqk196.js → p-bHnk8t5I.js} +2 -2
- package/dist/components/p-hYjmOPCI.js +2 -0
- package/dist/components/p-hYjmOPCI.js.map +1 -0
- package/dist/components/{p-ChfVRPHw.js → p-pUOA3iDG.js} +2 -2
- package/dist/components/{p-DLbHgbVj.js → p-pnO8tAYB.js} +2 -2
- package/dist/components/{p-CCmgtju-.js → p-pxN8JGEh.js} +2 -2
- package/dist/components/p-pxN8JGEh.js.map +1 -0
- package/dist/components/{p-B4wTnsUL.js → p-w9fkkwL2.js} +2 -2
- package/dist/components/p-x5u5Ueli.js +2 -0
- package/dist/components/{p-BeA6Jv-3.js.map → p-x5u5Ueli.js.map} +1 -1
- package/dist/docs/components.json +1582 -45
- package/dist/lib/components/BarTitle/bar-title-types.d.ts +1 -0
- package/dist/lib/components/Menu/menu-placement.d.ts +13 -0
- package/dist/lib/components/PanelNav/panel-nav-types.d.ts +19 -0
- package/dist/lib/components/ShellApp/shell-app-types.d.ts +1 -0
- package/dist/lib/components/ShellPage/shell-page-types.d.ts +1 -0
- package/dist/lib/shell/index.d.ts +3 -3
- package/dist/lib/shell/index.js.map +2 -2
- package/dist/mcp-data/registry/bar-title.json +25 -4
- package/dist/mcp-data/registry/button-filled.json +1 -0
- package/dist/mcp-data/registry/button-unfilled.json +1 -0
- package/dist/mcp-data/registry/chip.json +39 -2
- package/dist/mcp-data/registry/filter-menu.json +84 -11
- package/dist/mcp-data/registry/input.json +54 -2
- package/dist/mcp-data/registry/menu.json +1 -1
- package/dist/mcp-data/registry/panel-nav.json +71 -10
- package/dist/mcp-data/registry/panel-tool-search.json +4 -5
- package/dist/mcp-data/registry/registry.json +452 -43
- package/dist/mcp-data/registry/select.json +1 -0
- package/dist/mcp-data/registry/shell-app.json +47 -5
- package/dist/mcp-data/registry/shell-page.json +25 -5
- package/dist/mcp-data/registry/tab-group.json +21 -2
- package/dist/mcp-data/registry/table-filter.json +79 -9
- package/dist/mcp-data/registry/table-group.json +301 -0
- package/dist/mcp-data/registry/table-search.json +343 -0
- package/dist/mcp-data/registry/table-sort.json +1 -1
- package/dist/mcp-data/registry/table-toolbar.json +7 -6
- package/dist/mcp-data/registry/table.json +55 -17
- package/dist/react/components.d.ts +2 -0
- package/dist/react/components.js +2 -0
- package/dist/react/ds-filter-menu.d.ts +2 -1
- package/dist/react/ds-filter-menu.js +1 -0
- package/dist/react/ds-panel-nav.d.ts +2 -1
- package/dist/react/ds-panel-nav.js +1 -0
- package/dist/react/ds-shell-app.d.ts +2 -1
- package/dist/react/ds-shell-app.js +1 -0
- package/dist/react/ds-table-filter.d.ts +2 -1
- package/dist/react/ds-table-filter.js +1 -0
- package/dist/react/ds-table-group.d.ts +14 -0
- package/dist/react/ds-table-group.js +16 -0
- package/dist/react/ds-table-search.d.ts +14 -0
- package/dist/react/ds-table-search.js +16 -0
- package/dist/styles/table.css +46 -0
- package/dist/types/components/BarTitle/BarTitle.d.ts +4 -1
- package/dist/types/components/BarTitle/bar-title-types.d.ts +1 -0
- package/dist/types/components/BarTitle/index.d.ts +1 -1
- package/dist/types/components/Chip/Chip.d.ts +5 -0
- package/dist/types/components/FilterMenu/FilterMenu.d.ts +26 -0
- package/dist/types/components/Input/Input.d.ts +6 -0
- package/dist/types/components/Menu/menu-placement.d.ts +13 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +29 -2
- package/dist/types/components/PanelNav/index.d.ts +2 -2
- package/dist/types/components/PanelNav/panel-nav-types.d.ts +19 -0
- package/dist/types/components/PanelNav/panel-nav-utils.d.ts +10 -2
- package/dist/types/components/ShellApp/ShellApp.d.ts +11 -1
- package/dist/types/components/ShellApp/shell-app-types.d.ts +1 -0
- package/dist/types/components/ShellPage/ShellPage.d.ts +6 -1
- package/dist/types/components/ShellPage/index.d.ts +1 -1
- package/dist/types/components/ShellPage/shell-page-types.d.ts +1 -0
- package/dist/types/components/TabGroup/TabGroup.d.ts +2 -0
- package/dist/types/components/Table/Table.d.ts +6 -0
- package/dist/types/components/Table/index.d.ts +1 -1
- package/dist/types/components/Table/table-cell-model.d.ts +11 -1
- package/dist/types/components/Table/table-highlight.d.ts +12 -0
- package/dist/types/components/Table/table-model.d.ts +6 -5
- package/dist/types/components/Table/table-render-model.d.ts +1 -1
- package/dist/types/components/Table/table-row-view.d.ts +4 -1
- package/dist/types/components/Table/table-types.d.ts +22 -4
- package/dist/types/components/Table/table-virtual-model.d.ts +2 -0
- package/dist/types/components/TableFilter/TableFilter.d.ts +9 -1
- package/dist/types/components/TableGroup/TableGroup.d.ts +60 -0
- package/dist/types/components/TableSearch/TableSearch.d.ts +56 -0
- package/dist/types/components/TableSearch/table-search-model.d.ts +10 -0
- package/dist/types/components/TableSearch/table-search-types.d.ts +10 -0
- package/dist/types/components.d.ts +459 -14
- package/dist/types/shell/index.d.ts +3 -3
- package/dist/types/utils/choice-list-parts.d.ts +11 -1
- package/dist/types/utils/select-controller.d.ts +1 -1
- package/dist/vue/components.d.ts +2 -0
- package/dist/vue/components.js +2 -0
- package/dist/vue/ds-bar-title.js +1 -0
- package/dist/vue/ds-chip.js +2 -0
- package/dist/vue/ds-filter-menu.js +5 -0
- package/dist/vue/ds-input.js +3 -0
- package/dist/vue/ds-panel-nav.js +4 -0
- package/dist/vue/ds-shell-app.js +3 -0
- package/dist/vue/ds-shell-page.js +1 -0
- package/dist/vue/ds-tab-group.js +1 -0
- package/dist/vue/ds-table-filter.js +5 -0
- package/dist/vue/ds-table-group.d.ts +3 -0
- package/dist/vue/ds-table-group.js +20 -0
- package/dist/vue/ds-table-search.d.ts +3 -0
- package/dist/vue/ds-table-search.js +22 -0
- package/dist/vue/ds-table.js +2 -0
- package/package.json +1 -1
- package/dist/components/p-AtUP95E_.js +0 -2
- package/dist/components/p-B5-R5mb8.js +0 -2
- package/dist/components/p-B5-R5mb8.js.map +0 -1
- package/dist/components/p-BUexfjjg.js +0 -2
- package/dist/components/p-BUexfjjg.js.map +0 -1
- package/dist/components/p-BeA6Jv-3.js +0 -2
- package/dist/components/p-BkelrY4-.js +0 -2
- package/dist/components/p-BkelrY4-.js.map +0 -1
- package/dist/components/p-CCmgtju-.js.map +0 -1
- package/dist/components/p-DA5H_Iq_.js +0 -2
- package/dist/components/p-DA5H_Iq_.js.map +0 -1
- package/dist/components/p-DGe5oXR0.js.map +0 -1
- package/dist/components/p-DKt_8s-U.js +0 -2
- package/dist/components/p-DKt_8s-U.js.map +0 -1
- package/dist/components/p-DfDoqOlx.js +0 -2
- package/dist/components/p-DfDoqOlx.js.map +0 -1
- package/dist/components/p-rw0ZxIE4.js +0 -2
- package/dist/components/p-rw0ZxIE4.js.map +0 -1
- /package/dist/components/{p-Bf7PZJPT.js.map → p-5Z4oYuiK.js.map} +0 -0
- /package/dist/components/{p-DIlScMvI.js.map → p-6rB0eAda.js.map} +0 -0
- /package/dist/components/{p-CptSB-tA.js.map → p-9ykZwPlI.js.map} +0 -0
- /package/dist/components/{p-BHhmB9-4.js.map → p-B0kSlcaw.js.map} +0 -0
- /package/dist/components/{p-DWjTOoXs.js.map → p-B1wMpt1z.js.map} +0 -0
- /package/dist/components/{p-fRDzpfi9.js.map → p-BXv6RpoF.js.map} +0 -0
- /package/dist/components/{p-D7QlTWbN.js.map → p-BbG7nOcz.js.map} +0 -0
- /package/dist/components/{p-Bx5BSd6F.js.map → p-BcxidW9k.js.map} +0 -0
- /package/dist/components/{p-1UAVanY9.js.map → p-Bd8I2oXN.js.map} +0 -0
- /package/dist/components/{p-DdH7b4JF.js.map → p-CBymzuOO.js.map} +0 -0
- /package/dist/components/{p-BjRD57w3.js.map → p-CE2b5GPu.js.map} +0 -0
- /package/dist/components/{p-DBYv7fRq.js.map → p-CFkZSDwI.js.map} +0 -0
- /package/dist/components/{p-Bb4KnRy0.js.map → p-CTH3dSYg.js.map} +0 -0
- /package/dist/components/{p-BmssRAEZ.js.map → p-CZ144LS5.js.map} +0 -0
- /package/dist/components/{p-B-HsfQOK.js.map → p-Cd1JnnVK.js.map} +0 -0
- /package/dist/components/{p-CDw_WEVt.js.map → p-Cnsvgx1M.js.map} +0 -0
- /package/dist/components/{p-BYFS2qWb.js.map → p-CpeJMKJ5.js.map} +0 -0
- /package/dist/components/{p-DM1Z_hh0.js.map → p-D36EmETH.js.map} +0 -0
- /package/dist/components/{p-DFC0sRM-.js.map → p-DI8DUozc.js.map} +0 -0
- /package/dist/components/{p-DQBT1Jkf.js.map → p-DbLLH3hr.js.map} +0 -0
- /package/dist/components/{p-B2FT4Da6.js.map → p-De0qjzPu.js.map} +0 -0
- /package/dist/components/{p-B6rSDhJY.js.map → p-Dit6JmAK.js.map} +0 -0
- /package/dist/components/{p-caLOcQUK.js.map → p-DzPtYdXy.js.map} +0 -0
- /package/dist/components/{p-Do8wbFff.js.map → p-XaCYqck3.js.map} +0 -0
- /package/dist/components/{p-L8IIeDXM.js.map → p-_C-XRpCB.js.map} +0 -0
- /package/dist/components/{p-CyZqk196.js.map → p-bHnk8t5I.js.map} +0 -0
- /package/dist/components/{p-ChfVRPHw.js.map → p-pUOA3iDG.js.map} +0 -0
- /package/dist/components/{p-DLbHgbVj.js.map → p-pnO8tAYB.js.map} +0 -0
- /package/dist/components/{p-B4wTnsUL.js.map → p-w9fkkwL2.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["TABLE_CAPTION_COMPACT_MAX_PX","isTableCaptionCompact","width","tableCaptionInlineSize","entry","contentBoxSize","inlineSize","contentRect","observeTableCaptionCompact","host","onChange","ResizeObserver","undefined","table","closest","sync","observer","entries","observe","clientWidth","disconnect","buttonUnfilledCss","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","isInset","insetDepth","label","labelEmphasis","icon","isActive","activeFill","hasBorder","rounded","pressScale","dot","isInactive","isLoading","type","ariaLabel","collapseLabel","hasMenu","captionCompact","buttonEl","hasLoaded","handleClick","event","preventDefault","stopPropagation","dsClick","emit","pressed","dsChange","componentDidLoad","syncCaptionCompactObserver","connectedCallback","disconnectedCallback","disconnectCaptionCompactObserver","onCollapseLabelChange","setFocus","focus","captionIconOnly","Boolean","visualVariant","showDot","captionCompactDisconnect","el","compact","resolvedHaspopup","haspopup","doubleInset","expandedPopup","expanded","visuallyActive","dotRing","accessibleName","render","bg","background","cls","button","h","key","ref","class","disabled","tabIndex","focusTabIndex","controls","String","onPointerDown","beginElevatedControlPress","onClick","renderButtonContent","namespace","visible","Host","controlWidthClass","side"],"sources":["src/wc/utils/table-caption-compact.ts","src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["/** Matches `@container ds-table (max-width: 899px)` on caption Filter/Group/Sort. */\nexport const TABLE_CAPTION_COMPACT_MAX_PX = 899;\n\nexport function isTableCaptionCompact(width: number): boolean {\n return width > 0 && width <= TABLE_CAPTION_COMPACT_MAX_PX;\n}\n\nexport function tableCaptionInlineSize(entry: ResizeObserverEntry): number {\n return entry.contentBoxSize[0]?.inlineSize ?? entry.contentRect.width;\n}\n\nexport function observeTableCaptionCompact(\n host: HTMLElement,\n onChange: (compact: boolean) => void\n): () => void {\n if (typeof ResizeObserver === 'undefined') {\n onChange(false);\n return () => undefined;\n }\n\n const table = host.closest('ds-table');\n if (!table) {\n onChange(false);\n return () => undefined;\n }\n\n const sync = (width: number) => {\n if (width <= 0) return;\n onChange(isTableCaptionCompact(width));\n };\n\n const observer = new ResizeObserver(entries => {\n sync(entries[0] ? tableCaptionInlineSize(entries[0]) : 0);\n });\n observer.observe(table);\n sync(table.clientWidth);\n return () => observer.disconnect();\n}\n","@import '../../utils/button-base.css';\n@import '../../utils/table-caption-control.css';\n\n:host {\n --ds-button-unfilled-fg: var(--color-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n.button-unfilled {\n background: transparent;\n color: var(--ds-button-unfilled-fg);\n /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n Active foreground changes remain independent from popup-open pressed paint. */\n}\n\n.button-unfilled--active {\n color: var(--ds-button-unfilled-fg-active);\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. Keep the\n * pressed wash visible for the popup's complete rendered lifecycle without\n * promoting the resting foreground or selected fill.\n */\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-media-background);\n --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type { ControlInsetDepth } from '../../utils/control-text';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\nimport type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';\n\nexport type ButtonUnfilledBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'always-dark';\n\nexport type ButtonUnfilledVariant = ButtonVariant;\nexport type ButtonUnfilledSize = ButtonSize;\nexport type ButtonUnfilledWidth = ButtonWidth;\nexport type ButtonUnfilledPopup = ButtonPopup;\n\n@Component({\n tag: 'ds-button-unfilled',\n styleUrl: 'ButtonUnfilled.css',\n scoped: true,\n})\nexport class ButtonUnfilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonUnfilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonUnfilledSize = 'md';\n\n /** Use reduced outer geometry when nested inside a control of the same size. */\n @Prop() isInset: boolean = false;\n\n /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n @Prop() insetDepth: ControlInsetDepth = 'single';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonUnfilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Whether the visible label uses the emphasized weight. */\n @Prop() labelEmphasis: boolean = true;\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /**\n * Owner-controlled visual emphasis inside a composite. This does not add\n * toggle semantics and does not emit dsChange.\n */\n @Prop() isActive: boolean = false;\n\n /**\n * When active, render the selected interaction fill.\n * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n * `false` so selection is foreground-only (primary color, no fill).\n */\n @Prop() activeFill: boolean = true;\n\n /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n @Prop() hasBorder: boolean = true;\n\n /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\n\n /**\n * Scale down during a physical pointer press.\n * Disable when an owning composite requires fixed child or background geometry.\n */\n @Prop() pressScale: boolean = true;\n\n /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n @Prop() dot: boolean = false;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /** Actual parent surface context. Omit on primary and secondary surfaces. */\n @Prop() background: ButtonUnfilledBackground | undefined;\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop() controls: string | undefined;\n /**\n * Controlled disclosure or popup state forwarded to `aria-expanded`.\n * Popup triggers hold only the pressed wash while open; their resting\n * foreground is unchanged. Ordinary disclosures remain visually neutral.\n */\n @Prop() expanded: boolean | undefined;\n @Prop() haspopup: ButtonUnfilledPopup | undefined;\n /**\n * Controlled state for a genuine toggle button. Adds aria-pressed, promotes\n * active styling, and makes activation emit dsChange with the requested state.\n */\n @Prop() pressed: boolean | undefined;\n\n /**\n * Collapse the visible label and chevron to an icon-only control when the\n * owning `ds-table` caption is narrower than 900px. The trigger omits those\n * parts rather than clipping them.\n */\n @Prop({ reflect: true }) collapseLabel: boolean = false;\n\n /**\n * Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\n * both menu-button shapes:\n *\n * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n * the affordance.\n * - `icon` — the button *is* a menu. No chevron is added, so the glyph must\n * convey the menu on its own. Use `Ellipses` for generic more-options;\n * use a specific icon when the menu has a named purpose, such as\n * `Table` for Customize table.\n *\n * Use `haspopup` directly for non-menu popups.\n */\n @Prop() hasMenu: boolean = false;\n\n /**\n * Native `tabindex` for roving keyboard groups in shell chrome.\n * Omit for the default button tab stop (`0`).\n */\n @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n @Event() dsChange!: EventEmitter<boolean>;\n\n @State() private captionCompact = false;\n\n private buttonEl: HTMLButtonElement | null = null;\n private captionCompactDisconnect: (() => void) | undefined;\n private hasLoaded = false;\n\n componentDidLoad(): void {\n this.hasLoaded = true;\n this.syncCaptionCompactObserver();\n }\n\n connectedCallback(): void {\n if (this.hasLoaded) this.syncCaptionCompactObserver();\n }\n\n disconnectedCallback(): void {\n this.disconnectCaptionCompactObserver();\n }\n\n @Watch('collapseLabel')\n onCollapseLabelChange() {\n this.syncCaptionCompactObserver();\n }\n\n @Method()\n async setFocus() {\n this.buttonEl?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsClick.emit(event);\n if (this.pressed !== undefined) this.dsChange.emit(!this.pressed);\n };\n\n private get captionIconOnly(): boolean {\n return (\n this.collapseLabel &&\n this.captionCompact &&\n this.variant === 'icon-label' &&\n Boolean(this.icon)\n );\n }\n\n private get visualVariant(): ButtonUnfilledVariant {\n return this.captionIconOnly ? 'icon' : this.variant;\n }\n\n private get showDot(): boolean {\n return this.variant === 'icon' && this.dot && !this.isLoading;\n }\n\n private syncCaptionCompactObserver(): void {\n this.disconnectCaptionCompactObserver();\n if (!this.collapseLabel) {\n if (this.captionCompact) this.captionCompact = false;\n return;\n }\n this.captionCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n if (this.captionCompact !== compact) this.captionCompact = compact;\n });\n }\n\n private disconnectCaptionCompactObserver(): void {\n this.captionCompactDisconnect?.();\n this.captionCompactDisconnect = undefined;\n }\n\n private get resolvedHaspopup(): ButtonUnfilledPopup | undefined {\n return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n }\n\n private get doubleInset(): boolean {\n return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n }\n\n /** Only popup triggers hold a pressed visual while expanded. */\n private get expandedPopup(): boolean {\n return this.expanded === true && this.resolvedHaspopup !== undefined && !this.isInactive;\n }\n\n private get visuallyActive(): boolean {\n return this.isActive || this.pressed === true;\n }\n\n /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n private get dotRing(): string {\n if ((this.isActive || this.pressed === true) && this.activeFill) {\n return 'var(--ds-interaction-active)';\n }\n return 'var(--ds-button-unfilled-dot-ring)';\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n render() {\n const bg = this.background;\n const cls: Record<string, boolean> = {\n 'button-unfilled': true,\n 'ds-button': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-press-scale': this.pressScale,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected':\n (this.isActive || this.pressed === true) && this.activeFill && !this.isInactive,\n 'ds-interaction-fill--on-faint': bg === 'faint',\n 'ds-interaction-fill--on-medium': bg === 'medium',\n 'ds-interaction-fill--on-bold': bg === 'bold',\n 'ds-interaction-fill--on-strong': bg === 'strong',\n 'ds-interaction-fill--on-translucent': bg === 'translucent',\n 'ds-interaction-fill--on-inverted': bg === 'inverted',\n 'ds-interaction-fill--on-media': bg === 'media',\n 'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n 'button-unfilled--active': this.visuallyActive,\n 'button-unfilled--expanded': this.expandedPopup,\n 'ds-button--expanded': this.expandedPopup,\n 'button-unfilled--bordered': this.hasBorder,\n 'ds-button--bordered': this.hasBorder,\n 'button-unfilled--rounded': this.rounded,\n 'ds-button--rounded': this.rounded,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n 'ds-control-frame': true,\n 'button-unfilled--icon': this.visualVariant === 'icon',\n 'ds-button--icon': this.visualVariant === 'icon',\n 'button-unfilled--label': this.visualVariant === 'label',\n 'button-unfilled--icon-label': this.visualVariant === 'icon-label',\n 'button-unfilled--background-faint': bg === 'faint',\n 'button-unfilled--background-medium': bg === 'medium',\n 'button-unfilled--background-bold': bg === 'bold',\n 'button-unfilled--background-strong': bg === 'strong',\n 'button-unfilled--background-translucent': bg === 'translucent',\n 'button-unfilled--background-inverted': bg === 'inverted',\n 'button-unfilled--background-media': bg === 'media',\n 'button-unfilled--on-always-dark': bg === 'always-dark',\n };\n\n const button = (\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={cls}\n disabled={this.isInactive}\n tabIndex={this.focusTabIndex ?? 0}\n aria-label={this.accessibleName}\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-disabled={this.isLoading ? 'true' : undefined}\n aria-controls={this.controls}\n aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n aria-haspopup={this.resolvedHaspopup}\n aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n onPointerDown={event =>\n beginElevatedControlPress(event, this.pressScale && !this.isInactive && !this.isLoading)\n }\n onClick={this.handleClick}\n >\n {renderButtonContent({\n namespace: 'button-unfilled',\n variant: this.visualVariant,\n size: this.size,\n label: this.label,\n labelEmphasis: this.labelEmphasis,\n icon: this.icon,\n hasMenu: this.hasMenu,\n isLoading: this.isLoading,\n dot: {\n visible: this.showDot,\n background: this.dotRing,\n },\n })}\n </button>\n );\n\n return (\n <Host\n class={{\n 'button-unfilled-host': true,\n 'button-unfilled-host--icon': this.visualVariant === 'icon',\n 'ds-button-host--icon': this.visualVariant === 'icon',\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n 'ds-table-caption-control': this.collapseLabel,\n 'ds-table-caption-control--compact': this.captionIconOnly,\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n {this.collapseLabel ? (\n <ds-tooltip\n label={this.captionIconOnly ? this.label || this.accessibleName || '' : ''}\n side=\"top\"\n size=\"sm\"\n >\n {button}\n </ds-tooltip>\n ) : (\n button\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["TABLE_CAPTION_COMPACT_MAX_PX","isTableCaptionCompact","width","tableCaptionInlineSize","entry","contentBoxSize","inlineSize","contentRect","observeTableCaptionCompact","host","onChange","ResizeObserver","undefined","table","closest","sync","observer","entries","observe","clientWidth","disconnect","buttonUnfilledCss","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","isInset","insetDepth","label","labelEmphasis","icon","isActive","activeFill","hasBorder","rounded","pressScale","dot","isInactive","isLoading","type","ariaLabel","collapseLabel","hasMenu","captionCompact","buttonEl","hasLoaded","handleClick","event","preventDefault","stopPropagation","dsClick","emit","pressed","dsChange","componentDidLoad","syncCaptionCompactObserver","connectedCallback","disconnectedCallback","disconnectCaptionCompactObserver","onCollapseLabelChange","setFocus","focus","captionIconOnly","Boolean","visualVariant","showDot","captionCompactDisconnect","el","compact","resolvedHaspopup","haspopup","doubleInset","expandedPopup","expanded","visuallyActive","dotRing","accessibleName","render","bg","background","cls","button","h","key","ref","class","disabled","tabIndex","focusTabIndex","controls","String","onPointerDown","beginElevatedControlPress","onClick","renderButtonContent","namespace","visible","Host","controlWidthClass","side"],"sources":["src/wc/utils/table-caption-compact.ts","src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["/** Matches `@container ds-table (max-width: 899px)` on caption Filter/Group/Sort. */\nexport const TABLE_CAPTION_COMPACT_MAX_PX = 899;\n\nexport function isTableCaptionCompact(width: number): boolean {\n return width > 0 && width <= TABLE_CAPTION_COMPACT_MAX_PX;\n}\n\nexport function tableCaptionInlineSize(entry: ResizeObserverEntry): number {\n return entry.contentBoxSize[0]?.inlineSize ?? entry.contentRect.width;\n}\n\nexport function observeTableCaptionCompact(\n host: HTMLElement,\n onChange: (compact: boolean) => void\n): () => void {\n if (typeof ResizeObserver === 'undefined') {\n onChange(false);\n return () => undefined;\n }\n\n const table = host.closest('ds-table');\n if (!table) {\n onChange(false);\n return () => undefined;\n }\n\n const sync = (width: number) => {\n if (width <= 0) return;\n onChange(isTableCaptionCompact(width));\n };\n\n const observer = new ResizeObserver(entries => {\n sync(entries[0] ? tableCaptionInlineSize(entries[0]) : 0);\n });\n observer.observe(table);\n sync(table.clientWidth);\n return () => observer.disconnect();\n}\n","@import '../../utils/button-base.css';\n@import '../../utils/table-caption-control.css';\n\n:host {\n --ds-button-unfilled-fg: var(--color-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n.button-unfilled {\n background: transparent;\n color: var(--ds-button-unfilled-fg);\n /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n Active foreground changes remain independent from popup-open pressed paint. */\n}\n\n.button-unfilled--active {\n color: var(--ds-button-unfilled-fg-active);\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. Keep the\n * pressed wash visible for the popup's complete rendered lifecycle without\n * promoting the resting foreground or selected fill.\n */\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-media-background);\n --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type { ControlInsetDepth } from '../../utils/control-text';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\nimport type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';\n\nexport type ButtonUnfilledBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'always-dark';\n\nexport type ButtonUnfilledVariant = ButtonVariant;\nexport type ButtonUnfilledSize = ButtonSize;\nexport type ButtonUnfilledWidth = ButtonWidth;\nexport type ButtonUnfilledPopup = ButtonPopup;\n\n@Component({\n tag: 'ds-button-unfilled',\n styleUrl: 'ButtonUnfilled.css',\n scoped: true,\n})\nexport class ButtonUnfilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonUnfilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonUnfilledSize = 'md';\n\n /** Use reduced outer geometry when nested inside a control of the same size. */\n @Prop() isInset: boolean = false;\n\n /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n @Prop() insetDepth: ControlInsetDepth = 'single';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonUnfilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Whether the visible label uses the emphasized weight. */\n @Prop() labelEmphasis: boolean = true;\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /**\n * Owner-controlled visual emphasis inside a composite. This does not add\n * toggle semantics and does not emit dsChange.\n */\n @Prop() isActive: boolean = false;\n\n /**\n * When active, render the selected interaction fill.\n * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n * `false` so selection is foreground-only (primary color, no fill).\n */\n @Prop() activeFill: boolean = true;\n\n /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n @Prop() hasBorder: boolean = true;\n\n /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\n\n /**\n * Scale down during a physical pointer press.\n * Disable when an owning composite requires fixed child or background geometry.\n */\n @Prop() pressScale: boolean = true;\n\n /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n @Prop() dot: boolean = false;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /** Actual parent surface context. Omit on primary and secondary surfaces. */\n @Prop() background: ButtonUnfilledBackground | undefined;\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop() controls: string | undefined;\n /**\n * Controlled disclosure or popup state forwarded to `aria-expanded`.\n * Popup triggers hold only the pressed wash while open; their resting\n * foreground is unchanged. Ordinary disclosures remain visually neutral.\n */\n @Prop() expanded: boolean | undefined;\n @Prop() haspopup: ButtonUnfilledPopup | undefined;\n /**\n * Controlled state for a genuine toggle button. Adds aria-pressed, promotes\n * active styling, and makes activation emit dsChange with the requested state.\n */\n @Prop() pressed: boolean | undefined;\n\n /**\n * Collapse the visible label and chevron to an icon-only control when the\n * owning `ds-table` caption is narrower than 900px. The trigger omits those\n * parts rather than clipping them.\n */\n @Prop({ reflect: true }) collapseLabel: boolean = false;\n\n /**\n * Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\n * both menu-button shapes:\n *\n * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n * the affordance.\n * - `icon` — the button *is* a menu. No chevron is added, so the glyph must\n * convey the menu on its own. Use `Ellipses` for generic more-options;\n * use a specific icon when the menu has a named purpose, such as\n * `Table` for Customize table.\n *\n * Use `haspopup` directly for non-menu popups.\n */\n @Prop() hasMenu: boolean = false;\n\n /**\n * Native `tabindex` for roving keyboard groups in shell chrome.\n * Omit for the default button tab stop (`0`).\n */\n @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n @Event() dsChange!: EventEmitter<boolean>;\n\n @State() private captionCompact = false;\n\n private buttonEl: HTMLButtonElement | null = null;\n private captionCompactDisconnect: (() => void) | undefined;\n private hasLoaded = false;\n\n componentDidLoad(): void {\n this.hasLoaded = true;\n this.syncCaptionCompactObserver();\n }\n\n connectedCallback(): void {\n if (this.hasLoaded) this.syncCaptionCompactObserver();\n }\n\n disconnectedCallback(): void {\n this.disconnectCaptionCompactObserver();\n }\n\n @Watch('collapseLabel')\n onCollapseLabelChange() {\n this.syncCaptionCompactObserver();\n }\n\n @Method()\n async setFocus() {\n this.buttonEl?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsClick.emit(event);\n if (this.pressed !== undefined) this.dsChange.emit(!this.pressed);\n };\n\n private get captionIconOnly(): boolean {\n return (\n this.collapseLabel &&\n this.captionCompact &&\n this.variant === 'icon-label' &&\n Boolean(this.icon)\n );\n }\n\n private get visualVariant(): ButtonUnfilledVariant {\n return this.captionIconOnly ? 'icon' : this.variant;\n }\n\n private get showDot(): boolean {\n return this.variant === 'icon' && this.dot && !this.isLoading;\n }\n\n private syncCaptionCompactObserver(): void {\n this.disconnectCaptionCompactObserver();\n if (!this.collapseLabel) {\n if (this.captionCompact) this.captionCompact = false;\n return;\n }\n this.captionCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n if (this.captionCompact !== compact) this.captionCompact = compact;\n });\n }\n\n private disconnectCaptionCompactObserver(): void {\n this.captionCompactDisconnect?.();\n this.captionCompactDisconnect = undefined;\n }\n\n private get resolvedHaspopup(): ButtonUnfilledPopup | undefined {\n return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n }\n\n private get doubleInset(): boolean {\n return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n }\n\n /** Only popup triggers hold a pressed visual while expanded. */\n private get expandedPopup(): boolean {\n return this.expanded === true && this.resolvedHaspopup !== undefined && !this.isInactive;\n }\n\n private get visuallyActive(): boolean {\n return this.isActive || this.pressed === true;\n }\n\n /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n private get dotRing(): string {\n if ((this.isActive || this.pressed === true) && this.activeFill) {\n return 'var(--ds-interaction-active)';\n }\n return 'var(--ds-button-unfilled-dot-ring)';\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n render() {\n const bg = this.background;\n const cls: Record<string, boolean> = {\n 'button-unfilled': true,\n 'ds-button': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-press-scale': this.pressScale,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected':\n (this.isActive || this.pressed === true) && this.activeFill && !this.isInactive,\n 'ds-interaction-fill--on-faint': bg === 'faint',\n 'ds-interaction-fill--on-medium': bg === 'medium',\n 'ds-interaction-fill--on-bold': bg === 'bold',\n 'ds-interaction-fill--on-strong': bg === 'strong',\n 'ds-interaction-fill--on-translucent': bg === 'translucent',\n 'ds-interaction-fill--on-inverted': bg === 'inverted',\n 'ds-interaction-fill--on-media': bg === 'media',\n 'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n 'button-unfilled--active': this.visuallyActive,\n 'button-unfilled--expanded': this.expandedPopup,\n 'ds-button--expanded': this.expandedPopup,\n 'button-unfilled--bordered': this.hasBorder,\n 'ds-button--bordered': this.hasBorder,\n 'button-unfilled--rounded': this.rounded,\n 'ds-button--rounded': this.rounded,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n 'ds-control-frame': true,\n 'button-unfilled--icon': this.visualVariant === 'icon',\n 'ds-button--icon': this.visualVariant === 'icon',\n 'button-unfilled--label': this.visualVariant === 'label',\n 'button-unfilled--icon-label': this.visualVariant === 'icon-label',\n 'button-unfilled--background-faint': bg === 'faint',\n 'button-unfilled--background-medium': bg === 'medium',\n 'button-unfilled--background-bold': bg === 'bold',\n 'button-unfilled--background-strong': bg === 'strong',\n 'button-unfilled--background-translucent': bg === 'translucent',\n 'button-unfilled--background-inverted': bg === 'inverted',\n 'button-unfilled--background-media': bg === 'media',\n 'button-unfilled--on-always-dark': bg === 'always-dark',\n };\n\n const button = (\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={cls}\n disabled={this.isInactive}\n tabIndex={this.focusTabIndex ?? 0}\n aria-label={this.accessibleName}\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-disabled={this.isLoading ? 'true' : undefined}\n aria-controls={this.controls}\n aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n aria-haspopup={this.resolvedHaspopup}\n aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n onPointerDown={event =>\n beginElevatedControlPress(event, this.pressScale && !this.isInactive && !this.isLoading)\n }\n onClick={this.handleClick}\n >\n {renderButtonContent({\n namespace: 'button-unfilled',\n variant: this.visualVariant,\n size: this.size,\n label: this.label,\n labelEmphasis: this.labelEmphasis,\n icon: this.icon,\n hasMenu: this.hasMenu,\n isLoading: this.isLoading,\n dot: {\n visible: this.showDot,\n background: this.dotRing,\n },\n })}\n </button>\n );\n\n return (\n <Host\n class={{\n 'button-unfilled-host': true,\n 'button-unfilled-host--icon': this.visualVariant === 'icon',\n 'ds-button-host--icon': this.visualVariant === 'icon',\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n 'ds-table-caption-control': this.collapseLabel,\n 'ds-table-caption-control--compact': this.captionIconOnly,\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n {this.collapseLabel ? (\n <ds-tooltip\n label={this.captionIconOnly ? this.label || this.accessibleName || '' : ''}\n side=\"top\"\n size=\"sm\"\n >\n {button}\n </ds-tooltip>\n ) : (\n button\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as t,c as n,h as r,a as i,t as s}from"./index.js";import{d as a}from"./p-Cea7rROU.js";import{d as e}from"./p-B-HsfQOK.js";import{C as c}from"./p-CuwopElg.js";const d=()=>`.ds-control--lg.sc-ds-tag,.ds-control--lg.sc-ds-tag-h,.ds-control--md.sc-ds-tag-h,.ds-control--md.sc-ds-tag,.ds-control--sm.sc-ds-tag-h,.ds-control--sm.sc-ds-tag,.ds-control--xs.sc-ds-tag-h,.ds-control--xs.sc-ds-tag{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tag-h,.ds-control--lg.sc-ds-tag{--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-tag-h,.ds-control--md.sc-ds-tag{--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-tag-h,.ds-control--sm.sc-ds-tag{--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-tag-h,.ds-control--xs.sc-ds-tag{--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}@media (forced-colors: active){.sc-ds-tag:root,.sc-ds-tag-h,.ds-forced-colors-scope.sc-ds-tag{--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-tag-h,.ds-interaction-fill.sc-ds-tag{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-tag-h::before,.ds-interaction-fill.sc-ds-tag::before,.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before{z-index:1}.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::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-tag-h,.ds-interaction-fill--bordered.sc-ds-tag{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tag-h,.ds-interaction-fill--selected.sc-ds-tag{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-tag-h::after,.ds-interaction-fill--grouped.sc-ds-tag::after,.ds-interaction-fill--grouped.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-tag-h,.ds-interaction-fill--grouped.sc-ds-tag{--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-tag-h>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill.sc-ds-tag>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill__content.sc-ds-tag{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-tag-h,.ds-interaction-fill--on-faint.sc-ds-tag{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-tag-h,.ds-interaction-fill--on-medium.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-bold.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-strong.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-translucent.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-inverted.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-media.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-always-dark.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-navigation.sc-ds-tag{--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-tag-h::after,.ds-interaction-fill.sc-ds-tag::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-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::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-tag-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-tag:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-tag:root,.sc-ds-tag-h,.ds-forced-colors-scope.sc-ds-tag{--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-tag-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-tag-h,.ds-focus-ring.sc-ds-tag,.ds-focus-ring-inset.sc-ds-tag-h,.ds-focus-ring-inset.sc-ds-tag{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-tag-h:focus-visible,.ds-focus-ring.sc-ds-tag: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-tag-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-tag{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-tag-h:focus-visible,.ds-focus-ring-inset.sc-ds-tag:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tag-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-tag: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-tag-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag::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-tag-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-tag:root,.sc-ds-tag-h,.ds-forced-colors-scope.sc-ds-tag{--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-tag-h,.ds-control-inactive.sc-ds-tag{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-tag-h,.ds-control-inactive.sc-ds-tag{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag__label.sc-ds-tag{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.ds-control--lg.ds-control--inset.sc-ds-tag-h,.ds-control--lg.ds-control--inset.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-025))}.ds-control--md.ds-control--inset.sc-ds-tag-h,.ds-control--md.ds-control--inset.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-025))}.ds-control--sm.ds-control--inset.sc-ds-tag-h,.ds-control--sm.ds-control--inset.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-025))}.ds-control--xs.ds-control--inset.sc-ds-tag-h,.ds-control--xs.ds-control--inset.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-025) - var(--dimension-space-025))}.ds-control--lg.ds-control--inset-double.sc-ds-tag-h,.ds-control--lg.ds-control--inset-double.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-050))}.ds-control--md.ds-control--inset-double.sc-ds-tag-h,.ds-control--md.ds-control--inset-double.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-050))}.ds-control--sm.ds-control--inset-double.sc-ds-tag-h,.ds-control--sm.ds-control--inset-double.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-050))}.sc-ds-tag-h{min-inline-size:var(--ds-control-height)}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-on-strong-background-primary)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-on-medium-background-primary)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{padding:0;gap:0}.tag__button.sc-ds-tag{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;max-width:100%;height:100%;padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);border-radius:inherit;color:inherit;cursor:default}.tag__button.sc-ds-tag:disabled{cursor:not-allowed}.tag__button--expanded.sc-ds-tag::after{background:var(--ds-interaction-pressed)}.tag__prefix-icon.sc-ds-tag,.tag__suffix-icon.sc-ds-tag{position:relative;z-index:2;display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const g=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=n(this,"dsClick",7);this.icon="";this.intent="neutral";this.contrast="faint";this.size="md";this.isInset=false;this.insetDepth="single";this.rounded=false;this.interactive=false;this.expanded=false;this.isInactive=false;this.handleClick=o=>{if(!this.interactive||this.isInactive)return;this.dsClick.emit(o)}}render(){const o=c[this.size];const t=l[this.size];const n=this.isInset&&this.insetDepth==="double"&&this.size!=="xs";const s=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const a={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!n,"ds-control--inset-double":n,"tag--rounded":this.rounded,"tag--interactive":this.interactive,"ds-control-inactive":this.interactive&&this.isInactive};const e=[this.icon&&r("ds-icon",{class:"tag__prefix-icon",name:this.icon,size:t,color:"inherit"}),r("ds-text",{class:"tag__label",as:"span",variant:o,color:"inherit"},this.label)];if(!this.interactive){return r(i,{class:a,style:s},e)}return r(i,{class:a,style:s},r("button",{type:"button",class:{tag__button:true,"tag__button--expanded":this.expanded,"ds-interaction-fill":true,"ds-focus-ring-inset":true},"aria-haspopup":"menu","aria-expanded":this.expanded?"true":"false","aria-controls":this.ariaControls,disabled:this.isInactive||undefined,onClick:this.handleClick},e,r("ds-icon",{class:"tag__suffix-icon",name:"ChevronUpDown",size:t,color:"inherit"})))}static get style(){return d()}},[2,"ds-tag",{label:[1],icon:[1],intent:[1],contrast:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],rounded:[4],maxWidth:[8,"max-width"],interactive:[4],expanded:[4],ariaControls:[1,"aria-controls"],isInactive:[4,"is-inactive"]}]);function v(){if(typeof customElements==="undefined"){return}const o=["ds-tag","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(s(o))){customElements.define(s(o),g)}break;case"ds-icon":if(!customElements.get(s(o))){a()}break;case"ds-text":if(!customElements.get(s(o))){e()}break}}))}v();export{g as T,v as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as o,H as t,c as n,h as r,a as i,t as s}from"./index.js";import{d as a}from"./p-Cea7rROU.js";import{d as e}from"./p-Cd1JnnVK.js";import{C as c}from"./p-CuwopElg.js";const d=()=>`.ds-control--lg.sc-ds-tag,.ds-control--lg.sc-ds-tag-h,.ds-control--md.sc-ds-tag-h,.ds-control--md.sc-ds-tag,.ds-control--sm.sc-ds-tag-h,.ds-control--sm.sc-ds-tag,.ds-control--xs.sc-ds-tag-h,.ds-control--xs.sc-ds-tag{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tag-h,.ds-control--lg.sc-ds-tag{--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-tag-h,.ds-control--md.sc-ds-tag{--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-tag-h,.ds-control--sm.sc-ds-tag{--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-tag-h,.ds-control--xs.sc-ds-tag{--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}@media (forced-colors: active){.sc-ds-tag:root,.sc-ds-tag-h,.ds-forced-colors-scope.sc-ds-tag{--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-tag-h,.ds-interaction-fill.sc-ds-tag{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-tag-h::before,.ds-interaction-fill.sc-ds-tag::before,.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before{z-index:1}.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::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-tag-h,.ds-interaction-fill--bordered.sc-ds-tag{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tag-h,.ds-interaction-fill--selected.sc-ds-tag{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-tag-h::after,.ds-interaction-fill--grouped.sc-ds-tag::after,.ds-interaction-fill--grouped.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-tag-h,.ds-interaction-fill--grouped.sc-ds-tag{--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-tag-h>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill.sc-ds-tag>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill__content.sc-ds-tag{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-tag-h,.ds-interaction-fill--on-faint.sc-ds-tag{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-tag-h,.ds-interaction-fill--on-medium.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-bold.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-strong.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-translucent.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-inverted.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-media.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-always-dark.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-navigation.sc-ds-tag{--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-tag-h::after,.ds-interaction-fill.sc-ds-tag::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-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::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-tag-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-tag:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-tag:root,.sc-ds-tag-h,.ds-forced-colors-scope.sc-ds-tag{--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-tag-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-tag-h,.ds-focus-ring.sc-ds-tag,.ds-focus-ring-inset.sc-ds-tag-h,.ds-focus-ring-inset.sc-ds-tag{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-tag-h:focus-visible,.ds-focus-ring.sc-ds-tag: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-tag-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-tag{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-tag-h:focus-visible,.ds-focus-ring-inset.sc-ds-tag:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tag-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-tag: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-tag-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag::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-tag-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-tag:root,.sc-ds-tag-h,.ds-forced-colors-scope.sc-ds-tag{--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-tag-h,.ds-control-inactive.sc-ds-tag{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-tag-h,.ds-control-inactive.sc-ds-tag{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag__label.sc-ds-tag{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.ds-control--lg.ds-control--inset.sc-ds-tag-h,.ds-control--lg.ds-control--inset.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-025))}.ds-control--md.ds-control--inset.sc-ds-tag-h,.ds-control--md.ds-control--inset.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-025))}.ds-control--sm.ds-control--inset.sc-ds-tag-h,.ds-control--sm.ds-control--inset.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-025))}.ds-control--xs.ds-control--inset.sc-ds-tag-h,.ds-control--xs.ds-control--inset.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-025) - var(--dimension-space-025))}.ds-control--lg.ds-control--inset-double.sc-ds-tag-h,.ds-control--lg.ds-control--inset-double.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-050))}.ds-control--md.ds-control--inset-double.sc-ds-tag-h,.ds-control--md.ds-control--inset-double.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-050))}.ds-control--sm.ds-control--inset-double.sc-ds-tag-h,.ds-control--sm.ds-control--inset-double.sc-ds-tag{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-050))}.sc-ds-tag-h{min-inline-size:var(--ds-control-height)}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-on-strong-background-primary)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-on-medium-background-primary)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{padding:0;gap:0}.tag__button.sc-ds-tag{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;max-width:100%;height:100%;padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);border-radius:inherit;color:inherit;cursor:default}.tag__button.sc-ds-tag:disabled{cursor:not-allowed}.tag__button--expanded.sc-ds-tag::after{background:var(--ds-interaction-pressed)}.tag__prefix-icon.sc-ds-tag,.tag__suffix-icon.sc-ds-tag{position:relative;z-index:2;display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const g=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=n(this,"dsClick",7);this.icon="";this.intent="neutral";this.contrast="faint";this.size="md";this.isInset=false;this.insetDepth="single";this.rounded=false;this.interactive=false;this.expanded=false;this.isInactive=false;this.handleClick=o=>{if(!this.interactive||this.isInactive)return;this.dsClick.emit(o)}}render(){const o=c[this.size];const t=l[this.size];const n=this.isInset&&this.insetDepth==="double"&&this.size!=="xs";const s=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const a={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!n,"ds-control--inset-double":n,"tag--rounded":this.rounded,"tag--interactive":this.interactive,"ds-control-inactive":this.interactive&&this.isInactive};const e=[this.icon&&r("ds-icon",{class:"tag__prefix-icon",name:this.icon,size:t,color:"inherit"}),r("ds-text",{class:"tag__label",as:"span",variant:o,color:"inherit"},this.label)];if(!this.interactive){return r(i,{class:a,style:s},e)}return r(i,{class:a,style:s},r("button",{type:"button",class:{tag__button:true,"tag__button--expanded":this.expanded,"ds-interaction-fill":true,"ds-focus-ring-inset":true},"aria-haspopup":"menu","aria-expanded":this.expanded?"true":"false","aria-controls":this.ariaControls,disabled:this.isInactive||undefined,onClick:this.handleClick},e,r("ds-icon",{class:"tag__suffix-icon",name:"ChevronUpDown",size:t,color:"inherit"})))}static get style(){return d()}},[2,"ds-tag",{label:[1],icon:[1],intent:[1],contrast:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],rounded:[4],maxWidth:[8,"max-width"],interactive:[4],expanded:[4],ariaControls:[1,"aria-controls"],isInactive:[4,"is-inactive"]}]);function v(){if(typeof customElements==="undefined"){return}const o=["ds-tag","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(s(o))){customElements.define(s(o),g)}break;case"ds-icon":if(!customElements.get(s(o))){a()}break;case"ds-text":if(!customElements.get(s(o))){e()}break}}))}v();export{g as T,v as d};
|
|
2
|
+
//# sourceMappingURL=p-DbLLH3hr.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as i,c as s,h as o,a as n,t}from"./index.js";import{d as r}from"./p-rw0ZxIE4.js";import{d as a}from"./p-caLOcQUK.js";import{d}from"./p-v4oqkJms.js";import{d as c}from"./p-Cea7rROU.js";import{d as l}from"./p-0XTyQNRG.js";import{d as h}from"./p-DGe5oXR0.js";import{d as v}from"./p-B-HsfQOK.js";import{d as m}from"./p-DLbHgbVj.js";const b=()=>`.ds-control--lg.sc-ds-mobile-sheet-nav,.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav,.ds-control--sm.sc-ds-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-nav,.ds-control--xs.sc-ds-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--lg.sc-ds-mobile-sheet-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-nav{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--sm.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--md.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--lg.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav,.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav,.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-mobile-sheet-nav:root,.sc-ds-mobile-sheet-nav-h,.ds-forced-colors-scope.sc-ds-mobile-sheet-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-mobile-sheet-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-mobile-sheet-nav-h,.ds-focus-ring.sc-ds-mobile-sheet-nav,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-sheet-nav-h:focus-visible,.ds-focus-ring.sc-ds-mobile-sheet-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-sheet-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-sheet-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-mobile-sheet-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-sheet-nav:root,.sc-ds-mobile-sheet-nav-h,.ds-forced-colors-scope.sc-ds-mobile-sheet-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill.sc-ds-mobile-sheet-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--bordered.sc-ds-mobile-sheet-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill.sc-ds-mobile-sheet-nav>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill__content.sc-ds-mobile-sheet-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-bold.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-strong.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-media.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.sc-ds-mobile-sheet-nav-h{display:block;min-width:0;min-height:0;height:100%;background:var(--color-background-primary)}.sc-ds-mobile-sheet-nav-h:not([open]){display:none}.mobile-sheet-nav.sc-ds-mobile-sheet-nav{display:grid;grid-template-rows:auto minmax(0, 1fr);height:100%;min-height:0;background:var(--color-background-primary)}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav{position:relative;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr)}.mobile-sheet-nav__header--expanded-context.sc-ds-mobile-sheet-nav{grid-template-columns:minmax(var(--dimension-size-500), 1fr) minmax(0, 4fr) minmax(var(--dimension-size-500), 1fr)}.mobile-sheet-nav__header--expanded-context.sc-ds-mobile-sheet-nav .mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{width:100%}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-sheet-nav__brand.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-start;min-width:0}.mobile-sheet-nav__logo.sc-ds-mobile-sheet-nav{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-500);height:var(--dimension-size-500);padding:var(--dimension-space-100);box-sizing:border-box;color:var(--color-foreground-primary)}.mobile-sheet-nav__logo-mark.sc-ds-mobile-sheet-nav{width:var(--dimension-iconography-lg);height:var(--dimension-iconography-lg);flex:0 0 auto}.mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{justify-self:center}.mobile-sheet-nav__actions.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--dimension-space-050);min-width:0}.mobile-sheet-nav__body.sc-ds-mobile-sheet-nav{min-height:0;overflow:auto;overscroll-behavior:contain}.mobile-sheet-nav__sections.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-400)}.mobile-sheet-nav__items.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-100)}.mobile-sheet-nav__item.sc-ds-mobile-sheet-nav{appearance:none;width:100%;height:var(--ds-control-height);min-height:var(--ds-control-height);padding-inline:var(--ds-control-padding-inline);border:0;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);cursor:default;text-align:start;box-sizing:border-box}.mobile-sheet-nav__item--selected.sc-ds-mobile-sheet-nav{color:var(--color-foreground-primary)}.mobile-sheet-nav__item-label.sc-ds-mobile-sheet-nav{min-width:0;padding-inline:var(--ds-control-label-inset)}.mobile-sheet-nav__dot.sc-ds-mobile-sheet-nav{margin-inline-start:auto}`;const f=[{id:"dashboard",label:"Dashboard",icon:"Dashboard",variant:"icon"},{id:"settings",label:"Settings",icon:"Gear",variant:"icon"}];const u=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAreaSelect=s(this,"dsAreaSelect",7);this.dsBrowseContextChange=s(this,"dsBrowseContextChange",7);this.dsClose=s(this,"dsClose",7);this.open=false;this.browseContext="dashboard";this.dashboardGroups=[];this.settingsGroups=[];this.currentUrl="";this.routeSelectionActive=true;this.navigationLabel="Application navigation";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.helpLabel="Help & Support";this.showAccount=true;this.handleContextChange=e=>{const i=e.detail==="settings"?"settings":"dashboard";if(i===this.browseContext)return;this.dsBrowseContextChange.emit(i)}}get groups(){return this.browseContext==="settings"?this.settingsGroups:this.dashboardGroups}get activeId(){if(!this.routeSelectionActive)return"";return r(this.currentUrl,[...this.dashboardGroups.flatMap((e=>e.items)),...this.settingsGroups.flatMap((e=>e.items))])}handleOpenChange(e){if(!e)return;requestAnimationFrame((()=>{const e=this.el.querySelector('[aria-current="page"]');const i=this.el.querySelector(".mobile-sheet-nav__item");(e??i)?.focus({preventScroll:true})}))}handleKeyDown(e){if(!this.open||e.key!=="Escape")return;e.preventDefault();this.dsClose.emit()}renderItem(e){const i=e.id===this.activeId;return o("button",{type:"button",class:{"mobile-sheet-nav__item":true,"mobile-sheet-nav__item--selected":i,"ds-control--lg":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":i?"page":undefined,onClick:()=>this.dsAreaSelect.emit(e.id)},o("ds-icon",{class:"ds-interaction-fill__content",name:e.icon,size:"lg",color:"inherit"}),o("ds-text",{class:"mobile-sheet-nav__item-label ds-interaction-fill__content",as:"span",variant:"text-body-large",emphasis:i,color:"inherit"},e.label),e.dot&&o("ds-badge",{class:"mobile-sheet-nav__dot ds-interaction-fill__content",variant:"dot",hasRing:false,label:"","aria-hidden":"true"}))}renderLogo(){return o("span",{class:"mobile-sheet-nav__logo","aria-hidden":"true"},o("svg",{class:"mobile-sheet-nav__logo-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},o("path",{d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"})))}renderHeaderDestination(e,i,s){return o("ds-tooltip",{label:s,side:"bottom",size:"sm"},o("ds-button-unfilled",{variant:"icon",size:"lg",icon:i,"aria-label":s,activeFill:false,hasBorder:false,onDsClick:()=>this.dsAreaSelect.emit(e)}))}render(){const e=[{...f[0],label:this.dashboardLabel},{...f[1],label:this.settingsLabel}];return o(n,{key:"83756cd5453605a15041de753e4e5be24271df2d","aria-hidden":this.open?undefined:"true",inert:this.open?undefined:true},o("section",{key:"906d701e72c17d2e47b8aeaf43632e454d0863af",id:"ds-mobile-sheet-nav",class:"mobile-sheet-nav"},o("header",{key:"bf86698126c87b213dfc55096e7154695a918cf5",class:{"mobile-sheet-nav__header":true,"mobile-sheet-nav__header--expanded-context":!this.showAccount,"ds-chrome-grid":true,"ds-chrome-space--md":true}},o("div",{key:"0394fc2986fd695d60ccc6bb6e88e3d8ed71b390",class:"mobile-sheet-nav__brand"},this.renderLogo()),o("ds-tab-group",{key:"086e51c6e5469e078d6034d620c67949c13e5882",class:"mobile-sheet-nav__context",tabs:e,value:this.browseContext,size:"lg",width:this.showAccount?"hug":"fill","aria-label":"Browse context",onDsChange:this.handleContextChange}),o("div",{key:"244076e478bfa8b035e8ba42cc834c19485212b0",class:"mobile-sheet-nav__actions"},this.renderHeaderDestination("help","CircleQuestion",this.helpLabel),this.showAccount?this.renderHeaderDestination("account","Avatar",this.accountLabel):null)),o("nav",{key:"3d08cc4bdf858dd2c98fde5f5e66042973911453",class:"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md","aria-label":this.navigationLabel},o("div",{key:"d90ef6b9b3192f6a2ddf0418bf12f9213a454bcb",class:"mobile-sheet-nav__sections"},this.groups.filter((e=>e.items.length>0)).map((e=>o("div",{class:"mobile-sheet-nav__items"},e.items.map((e=>this.renderItem(e))))))))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return b()}},[2,"ds-mobile-sheet-nav",{open:[516],browseContext:[1,"browse-context"],dashboardGroups:[16],settingsGroups:[16],currentUrl:[1,"current-url"],routeSelectionActive:[4,"route-selection-active"],navigationLabel:[1,"navigation-label"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],helpLabel:[1,"help-label"],showAccount:[4,"show-account"]},[[0,"keydown","handleKeyDown"]],{open:[{handleOpenChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-sheet-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-tab-group","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-mobile-sheet-nav":if(!customElements.get(t(e))){customElements.define(t(e),u)}break;case"ds-badge":if(!customElements.get(t(e))){a()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){d()}break;case"ds-icon":if(!customElements.get(t(e))){c()}break;case"ds-loader":if(!customElements.get(t(e))){l()}break;case"ds-tab-group":if(!customElements.get(t(e))){h()}break;case"ds-text":if(!customElements.get(t(e))){v()}break;case"ds-tooltip":if(!customElements.get(t(e))){m()}break}}))}g();export{u as M,g as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as i,c as s,h as o,a as n,t}from"./index.js";import{d as r}from"./p-D9wZlB_N.js";import{d as a}from"./p-DzPtYdXy.js";import{d}from"./p-DSy1oOnd.js";import{d as c}from"./p-Cea7rROU.js";import{d as l}from"./p-0XTyQNRG.js";import{d as h}from"./p-Bjq1KP_Y.js";import{d as v}from"./p-Cd1JnnVK.js";import{d as m}from"./p-pnO8tAYB.js";const b=()=>`.ds-control--lg.sc-ds-mobile-sheet-nav,.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav,.ds-control--sm.sc-ds-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-nav,.ds-control--xs.sc-ds-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--lg.sc-ds-mobile-sheet-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-nav{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--sm.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--md.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--lg.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav,.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav,.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-mobile-sheet-nav:root,.sc-ds-mobile-sheet-nav-h,.ds-forced-colors-scope.sc-ds-mobile-sheet-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-mobile-sheet-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-mobile-sheet-nav-h,.ds-focus-ring.sc-ds-mobile-sheet-nav,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-sheet-nav-h:focus-visible,.ds-focus-ring.sc-ds-mobile-sheet-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-sheet-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-sheet-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-mobile-sheet-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-sheet-nav:root,.sc-ds-mobile-sheet-nav-h,.ds-forced-colors-scope.sc-ds-mobile-sheet-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill.sc-ds-mobile-sheet-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--bordered.sc-ds-mobile-sheet-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--grouped.sc-ds-mobile-sheet-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill.sc-ds-mobile-sheet-nav>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill__content.sc-ds-mobile-sheet-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-bold.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-strong.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-media.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-sheet-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.sc-ds-mobile-sheet-nav-h{display:block;min-width:0;min-height:0;height:100%;background:var(--color-background-primary)}.sc-ds-mobile-sheet-nav-h:not([open]){display:none}.mobile-sheet-nav.sc-ds-mobile-sheet-nav{display:grid;grid-template-rows:auto minmax(0, 1fr);height:100%;min-height:0;background:var(--color-background-primary)}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav{position:relative;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr)}.mobile-sheet-nav__header--expanded-context.sc-ds-mobile-sheet-nav{grid-template-columns:minmax(var(--dimension-size-500), 1fr) minmax(0, 4fr) minmax(var(--dimension-size-500), 1fr)}.mobile-sheet-nav__header--expanded-context.sc-ds-mobile-sheet-nav .mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{width:100%}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-sheet-nav__brand.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-start;min-width:0}.mobile-sheet-nav__logo.sc-ds-mobile-sheet-nav{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-500);height:var(--dimension-size-500);padding:var(--dimension-space-100);box-sizing:border-box;color:var(--color-foreground-primary)}.mobile-sheet-nav__logo-mark.sc-ds-mobile-sheet-nav{width:var(--dimension-iconography-lg);height:var(--dimension-iconography-lg);flex:0 0 auto}.mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{justify-self:center}.mobile-sheet-nav__actions.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--dimension-space-050);min-width:0}.mobile-sheet-nav__body.sc-ds-mobile-sheet-nav{min-height:0;overflow:auto;overscroll-behavior:contain}.mobile-sheet-nav__sections.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-400)}.mobile-sheet-nav__items.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-100)}.mobile-sheet-nav__item.sc-ds-mobile-sheet-nav{appearance:none;width:100%;height:var(--ds-control-height);min-height:var(--ds-control-height);padding-inline:var(--ds-control-padding-inline);border:0;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);cursor:default;text-align:start;box-sizing:border-box}.mobile-sheet-nav__item--selected.sc-ds-mobile-sheet-nav{color:var(--color-foreground-primary)}.mobile-sheet-nav__item-label.sc-ds-mobile-sheet-nav{min-width:0;padding-inline:var(--ds-control-label-inset)}.mobile-sheet-nav__dot.sc-ds-mobile-sheet-nav{margin-inline-start:auto}`;const f=[{id:"dashboard",label:"Dashboard",icon:"Dashboard",variant:"icon"},{id:"settings",label:"Settings",icon:"Gear",variant:"icon"}];const u=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAreaSelect=s(this,"dsAreaSelect",7);this.dsBrowseContextChange=s(this,"dsBrowseContextChange",7);this.dsClose=s(this,"dsClose",7);this.open=false;this.browseContext="dashboard";this.dashboardGroups=[];this.settingsGroups=[];this.currentUrl="";this.routeSelectionActive=true;this.navigationLabel="Application navigation";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.helpLabel="Help & Support";this.showAccount=true;this.handleContextChange=e=>{const i=e.detail==="settings"?"settings":"dashboard";if(i===this.browseContext)return;this.dsBrowseContextChange.emit(i)}}get groups(){return this.browseContext==="settings"?this.settingsGroups:this.dashboardGroups}get activeId(){if(!this.routeSelectionActive)return"";return r(this.currentUrl,[...this.dashboardGroups.flatMap((e=>e.items)),...this.settingsGroups.flatMap((e=>e.items))])}handleOpenChange(e){if(!e)return;requestAnimationFrame((()=>{const e=this.el.querySelector('[aria-current="page"]');const i=this.el.querySelector(".mobile-sheet-nav__item");(e??i)?.focus({preventScroll:true})}))}handleKeyDown(e){if(!this.open||e.key!=="Escape")return;e.preventDefault();this.dsClose.emit()}renderItem(e){const i=e.id===this.activeId;return o("button",{type:"button",class:{"mobile-sheet-nav__item":true,"mobile-sheet-nav__item--selected":i,"ds-control--lg":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":i?"page":undefined,onClick:()=>this.dsAreaSelect.emit(e.id)},o("ds-icon",{class:"ds-interaction-fill__content",name:e.icon,size:"lg",color:"inherit"}),o("ds-text",{class:"mobile-sheet-nav__item-label ds-interaction-fill__content",as:"span",variant:"text-body-large",emphasis:i,color:"inherit"},e.label),e.dot&&o("ds-badge",{class:"mobile-sheet-nav__dot ds-interaction-fill__content",variant:"dot",hasRing:false,label:"","aria-hidden":"true"}))}renderLogo(){return o("span",{class:"mobile-sheet-nav__logo","aria-hidden":"true"},o("svg",{class:"mobile-sheet-nav__logo-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},o("path",{d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"})))}renderHeaderDestination(e,i,s){return o("ds-tooltip",{label:s,side:"bottom",size:"sm"},o("ds-button-unfilled",{variant:"icon",size:"lg",icon:i,"aria-label":s,activeFill:false,hasBorder:false,onDsClick:()=>this.dsAreaSelect.emit(e)}))}render(){const e=[{...f[0],label:this.dashboardLabel},{...f[1],label:this.settingsLabel}];return o(n,{key:"c43f525774bb3a6634a06e4e2d1e96d20c1e6fc1","aria-hidden":this.open?undefined:"true",inert:this.open?undefined:true},o("section",{key:"96c113be515e98317cfaf8e3c6c2eebd8e9858ed",id:"ds-mobile-sheet-nav",class:"mobile-sheet-nav"},o("header",{key:"3584495f66a4fee16beacbfd5423723d0e21d6f5",class:{"mobile-sheet-nav__header":true,"mobile-sheet-nav__header--expanded-context":!this.showAccount,"ds-chrome-grid":true,"ds-chrome-space--md":true}},o("div",{key:"fa20dd38aa965083a14d42c1e7e41932eb204c3d",class:"mobile-sheet-nav__brand"},this.renderLogo()),o("ds-tab-group",{key:"a443ad3cf6138734e545c4a404e9f5f9a618d175",class:"mobile-sheet-nav__context",tabs:e,value:this.browseContext,size:"lg",width:this.showAccount?"hug":"fill","aria-label":"Browse context",onDsChange:this.handleContextChange}),o("div",{key:"0f855c0208114ae28e64119a5ce455f264299ddb",class:"mobile-sheet-nav__actions"},this.renderHeaderDestination("help","CircleQuestion",this.helpLabel),this.showAccount?this.renderHeaderDestination("account","Avatar",this.accountLabel):null)),o("nav",{key:"6b059aed59ba67a8c6e6b704a03b12bc90b1436f",class:"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md","aria-label":this.navigationLabel},o("div",{key:"bad8c7a37e95e767aef5d01af91e81f2f8894375",class:"mobile-sheet-nav__sections"},this.groups.filter((e=>e.items.length>0)).map((e=>o("div",{class:"mobile-sheet-nav__items"},e.items.map((e=>this.renderItem(e))))))))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return b()}},[2,"ds-mobile-sheet-nav",{open:[516],browseContext:[1,"browse-context"],dashboardGroups:[16],settingsGroups:[16],currentUrl:[1,"current-url"],routeSelectionActive:[4,"route-selection-active"],navigationLabel:[1,"navigation-label"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],helpLabel:[1,"help-label"],showAccount:[4,"show-account"]},[[0,"keydown","handleKeyDown"]],{open:[{handleOpenChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-sheet-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-tab-group","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-mobile-sheet-nav":if(!customElements.get(t(e))){customElements.define(t(e),u)}break;case"ds-badge":if(!customElements.get(t(e))){a()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){d()}break;case"ds-icon":if(!customElements.get(t(e))){c()}break;case"ds-loader":if(!customElements.get(t(e))){l()}break;case"ds-tab-group":if(!customElements.get(t(e))){h()}break;case"ds-text":if(!customElements.get(t(e))){v()}break;case"ds-tooltip":if(!customElements.get(t(e))){m()}break}}))}g();export{u as M,g as d};
|
|
2
|
+
//# sourceMappingURL=p-De0qjzPu.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as o,h as s,a,t}from"./index.js";import{C as i}from"./p-BnhGV__o.js";import{d}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as o,h as s,a,t}from"./index.js";import{C as i}from"./p-BnhGV__o.js";import{d}from"./p-DzPtYdXy.js";import{d as n}from"./p-DSy1oOnd.js";import{d as c}from"./p-Cea7rROU.js";import{d as r}from"./p-0XTyQNRG.js";import{d as l}from"./p-Cd1JnnVK.js";import{d as f}from"./p-pnO8tAYB.js";const b=()=>`.sc-ds-code-block-h{display:block;width:100%;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.code-block.sc-ds-code-block{width:100%;min-width:0;margin:0;overflow:hidden;border-radius:var(--dimension-radius-050);background:var(--color-background-strong-neutral);color:var(--color-foreground-faint-neutral);box-sizing:border-box}.code-block__header.sc-ds-code-block{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);padding:var(--dimension-space-050) var(--dimension-space-100);background:var(--color-background-strong-neutral);box-sizing:border-box}pre.sc-ds-code-block{margin:0;padding:var(--dimension-space-150);overflow:auto;font-family:var( --typography-font-family-code, 'Fira Code', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace );font-size:var(--typography-fontsize-sm);font-variant-ligatures:var(--ds-code-font-variant-ligatures, normal);font-weight:var(--typography-weight-regular);line-height:var(--typography-lineheight-sm);letter-spacing:var(--typography-letterspacing-none);tab-size:2;-webkit-user-select:text;user-select:text}code.sc-ds-code-block{font:inherit;white-space:pre}`;const p=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.code="";this.language="";this.filename="";this.copied=false;this.copyFeedback=new i((e=>{this.copied=e}));this.copy=async()=>{await this.copyFeedback.copy(this.code)}}connectedCallback(){this.copyFeedback.connect()}handleCodeChange(){this.copyFeedback.reset()}disconnectedCallback(){this.copyFeedback.disconnect()}render(){const e=this.filename||this.language||"Code";return s(a,{key:"e310cc824969366958b67548bb04f35e2e9113fe"},s("figure",{key:"b32e4d96cd3594f76bece4318e65ae7d08edfeea",class:"code-block"},s("figcaption",{key:"628a5191587aef94fefa46183a80b5a73a2bc2a4",class:"code-block__header"},s("ds-text",{key:"0cd29234edfcbb3ddeffb9fafab599677ef2a509",as:"span",variant:"text-caption",emphasis:true,color:"on-strong"},e),s("ds-tooltip",{key:"0ff5f6aa899ef18ce760abb4f71efe7017ce2285",label:this.copied?"Copied":"Copy code",side:"bottom",size:"sm"},s("ds-button-unfilled",{key:"7793ded14c85aaa8cdba079334efb8c886f65b8f",variant:"icon",icon:this.copied?"Check":"Copy",size:"xs","aria-label":this.copied?"Copied":"Copy code",hasBorder:false,onDsClick:this.copy}))),s("pre",{key:"0a5eb53fe4c79ae67dd096dede49a893468b36fe"},s("code",{key:"0f6ab3a280d292fe8a46b7a30b5c9cbd0e21af8f"},this.code))))}static get watchers(){return{code:[{handleCodeChange:0}]}}static get style(){return b()}},[2,"ds-code-block",{code:[1],language:[1],filename:[1],copied:[32]},undefined,{code:[{handleCodeChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-code-block","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-code-block":if(!customElements.get(t(e))){customElements.define(t(e),p)}break;case"ds-badge":if(!customElements.get(t(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){n()}break;case"ds-icon":if(!customElements.get(t(e))){c()}break;case"ds-loader":if(!customElements.get(t(e))){r()}break;case"ds-text":if(!customElements.get(t(e))){l()}break;case"ds-tooltip":if(!customElements.get(t(e))){f()}break}}))}m();export{p as C,m as d};
|
|
2
|
+
//# sourceMappingURL=p-Dit6JmAK.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as t,H as i,c as e,h as s,a as r,t as n}from"./index.js";import{d as a}from"./p-DzPtYdXy.js";import{d as o}from"./p-BcxidW9k.js";import{d}from"./p-BnTPuV3x.js";import{d as c}from"./p-DSy1oOnd.js";import{d as l}from"./p-Cea7rROU.js";import{d as h}from"./p-0XTyQNRG.js";import{d as b}from"./p-CFkZSDwI.js";import{d as u}from"./p-XaCYqck3.js";import{d as p}from"./p-DGkn8FwV.js";import{d as f}from"./p-DbLLH3hr.js";import{d as v}from"./p-Cd1JnnVK.js";import{d as m}from"./p-pnO8tAYB.js";function g(t){return"type"in t&&t.type==="divider"}const _=()=>`.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-bar-title{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-bar-title{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-bar-title{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-bar-title,.ds-chrome-header__trailing.sc-ds-bar-title{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-bar-title{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-bar-title{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-bar-title{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-bar-title{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-bar-title,.ds-chrome-header__description.sc-ds-bar-title{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-bar-title{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-bar-title .ds-chrome-header__description.sc-ds-bar-title{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-bar-title-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-title-h,.ds-focus-ring.sc-ds-bar-title,.ds-focus-ring-inset.sc-ds-bar-title-h,.ds-focus-ring-inset.sc-ds-bar-title{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-title-h:focus-visible,.ds-focus-ring.sc-ds-bar-title:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-bar-title-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-bar-title-h,.ds-interaction-fill.sc-ds-bar-title{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before,.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before{z-index:1}.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-bar-title-h,.ds-interaction-fill--bordered.sc-ds-bar-title{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-bar-title-h,.ds-interaction-fill--selected.sc-ds-bar-title{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-bar-title-h::after,.ds-interaction-fill--grouped.sc-ds-bar-title::after,.ds-interaction-fill--grouped.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-bar-title-h,.ds-interaction-fill--grouped.sc-ds-bar-title{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-bar-title-h>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill.sc-ds-bar-title>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill__content.sc-ds-bar-title{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-bar-title-h,.ds-interaction-fill--on-faint.sc-ds-bar-title{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-bar-title-h,.ds-interaction-fill--on-medium.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-bar-title-h,.ds-interaction-fill--on-bold.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-bar-title-h,.ds-interaction-fill--on-strong.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-bar-title-h,.ds-interaction-fill--on-translucent.sc-ds-bar-title{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-bar-title-h,.ds-interaction-fill--on-inverted.sc-ds-bar-title{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-bar-title-h,.ds-interaction-fill--on-media.sc-ds-bar-title{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-bar-title-h,.ds-interaction-fill--on-always-dark.sc-ds-bar-title{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-bar-title-h,.ds-interaction-fill--on-navigation.sc-ds-bar-title{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.sc-ds-bar-title-h{display:block;min-width:0;box-sizing:border-box;background:var(--_shell-page-header-background, var(--color-background-primary))}[placement='shell-bar'].sc-ds-bar-title-h{--_shell-page-header-background:var(--color-background-secondary)}ds-shell-app.sc-ds-bar-title-h:not([gradient-preset='none'])[placement='shell-bar'],ds-shell-app:not([gradient-preset='none']) [placement='shell-bar'].sc-ds-bar-title-h,ds-shell-app.sc-ds-bar-title-h:not([gradient-preset='none'])[placement='shell-bar'] .bar-title.sc-ds-bar-title,ds-shell-app:not([gradient-preset='none']) [placement='shell-bar'].sc-ds-bar-title-h .bar-title.sc-ds-bar-title,ds-shell-app.shell-app--paper-texture[placement='shell-bar'].sc-ds-bar-title-h,ds-shell-app.shell-app--paper-texture [placement='shell-bar'].sc-ds-bar-title-h,ds-shell-app.shell-app--paper-texture[placement='shell-bar'].sc-ds-bar-title-h .bar-title.sc-ds-bar-title,ds-shell-app.shell-app--paper-texture [placement='shell-bar'].sc-ds-bar-title-h .bar-title.sc-ds-bar-title{background:transparent}[data-shell-page-syncing].sc-ds-bar-title-h{visibility:hidden}.bar-title.sc-ds-bar-title{position:relative;min-width:0;box-sizing:border-box;background:var(--_shell-page-header-background, var(--color-background-primary))}.bar-title.sc-ds-bar-title::after{content:'';position:absolute;inset:auto var(--ds-bar-title-divider-inset, var(--dimension-space-400)) 0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.bar-title--divider-hidden.sc-ds-bar-title::after{display:none}.bar-title__inner.sc-ds-bar-title{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--dimension-space-100);padding:var(--dimension-space-400);box-sizing:border-box}.bar-title__row.sc-ds-bar-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);min-width:0}.bar-title-host--expanded.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{gap:var(--dimension-space-400)}.bar-title__leading.sc-ds-bar-title{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--dimension-space-100);min-width:0}.bar-title__title-row.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0;min-height:var(--dimension-size-400)}.bar-title__identity.sc-ds-bar-title{display:flex;flex:0 1 auto;align-items:center;gap:var(--dimension-space-050);min-width:0}.bar-title__back.sc-ds-bar-title,.bar-title__section-chevron.sc-ds-bar-title{flex:0 0 auto}.bar-title__breadcrumb.sc-ds-bar-title{display:block;width:100%;min-width:0}.bar-title__heading.sc-ds-bar-title{display:block;width:auto;min-width:0;user-select:none}.bar-title__divider.sc-ds-bar-title{width:var(--dimension-stroke-width-012);height:var(--dimension-size-250);margin-inline-start:var(--dimension-space-100);flex:0 0 var(--dimension-stroke-width-012);background:var(--color-border-tertiary)}.bar-title__section-selector.sc-ds-bar-title{display:flex;flex:0 1 auto;min-width:0;max-width:var(--dimension-panel-width-sm)}.bar-title__section-trigger.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-half);display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:0;max-width:100%;padding-inline:var(--ds-control-padding-inline);border:none;border-radius:var(--ds-control-radius);box-sizing:border-box;background:transparent;color:var(--color-foreground-secondary);cursor:default;font-family:inherit;user-select:none}.bar-title__section-trigger--expanded.sc-ds-bar-title{color:var(--color-foreground-primary);--ds-interaction-hover:var(--ds-interaction-pressed)}.bar-title__section-trigger--expanded.sc-ds-bar-title::after{background:var(--ds-interaction-pressed)}.bar-title__section-label.sc-ds-bar-title{min-width:0;padding-inline:var(--ds-control-label-inset)}.bar-title__actions.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto}.bar-title__description.sc-ds-bar-title{display:block;min-width:0;max-width:100%}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title{height:var(--dimension-size-600)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title::after{inset-inline:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__inner.sc-ds-bar-title{flex:1 1 auto;height:100%;min-width:0;padding:0;gap:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{height:100%;align-items:center}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__identity.sc-ds-bar-title{height:var(--dimension-size-400)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__divider.sc-ds-bar-title{margin-inline-start:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__heading.sc-ds-bar-title{display:inline-flex;flex:1 1 auto;align-items:center;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box}`;let x=0;const w=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsBack=e(this,"dsBack",7);this.dsBreadcrumbSelect=e(this,"dsBreadcrumbSelect",7);this.dsSectionChange=e(this,"dsSectionChange",7);this.dsAction=e(this,"dsAction",7);this.description="";this.showBack=false;this.backAriaLabel="Back";this.backLabel="Back";this.breadcrumbs=[];this.breadcrumbAriaLabel="Breadcrumb";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.primaryAction=null;this.actions=[];this.actionsAriaLabel="More page actions";this.variant="expanded";this.placement="page";this.showDivider=true;this.sectionMenuOpen=false;this.actionMenuOpen=false;this.sectionMenuInitialFocusVisible=false;this.actionMenuInitialFocusVisible=false;this.instanceId=x++;this.sectionMenuTriggerId=`bar-title-section-trigger-${this.instanceId}`;this.sectionMenuId=`bar-title-section-menu-${this.instanceId}`;this.actionMenuTriggerId=`bar-title-action-trigger-${this.instanceId}`;this.actionMenuId=`bar-title-action-menu-${this.instanceId}`;this.sectionTriggerEl=null;this.actionTriggerEl=null;this.toggleSectionMenu=t=>{this.sectionMenuInitialFocusVisible=t.detail===0;this.actionMenuOpen=false;this.sectionMenuOpen=!this.sectionMenuOpen};this.closeSectionMenu=()=>{this.sectionMenuOpen=false};this.handleSectionSelect=t=>{const i=String(t.detail?.value??"");const e=this.selectableSections.find((t=>t.id===i));if(!e||e.isInactive)return;this.closeSectionMenu();this.dsSectionChange.emit(i);requestAnimationFrame((()=>this.sectionTriggerEl?.focus()))};this.toggleActionMenu=t=>{this.actionMenuInitialFocusVisible=t.detail===0;this.sectionMenuOpen=false;this.actionMenuOpen=!this.actionMenuOpen};this.closeActionMenu=()=>{this.actionMenuOpen=false};this.handleActionSelect=t=>{const i=String(t.detail?.value??"");const e=this.primaryCollapsed&&this.primaryAction?.id===i;const s=this.selectableActions.find((t=>t.id===i));if(!e&&!s)return;if(e&&(this.primaryAction?.isInactive||this.primaryAction?.isLoading)||s?.isInactive){return}this.closeActionMenu();this.dsAction.emit(i);requestAnimationFrame((()=>void this.actionTriggerEl?.setFocus?.()))};this.handleBreadcrumbSelect=t=>{if(this.breadcrumbs.length===0){this.dsBack.emit(t.detail.originalEvent);return}const i=this.dsBreadcrumbSelect.emit(t.detail);if(i.defaultPrevented)t.preventDefault()}}componentWillLoad(){if(this.el.closest("ds-shell-page")){this.el.setAttribute("data-shell-page-syncing","")}}handleSectionsChange(){if(!this.hasSectionSelector)this.closeSectionMenu()}handleActionsChange(){if(!this.showActionMenuTrigger)this.closeActionMenu()}get compact(){return this.effectiveVariant!=="expanded"}get effectiveVariant(){return this.placement==="shell-bar"?"compact":this.variant}get dividerVisible(){return this.compact?this.showCompactDivider??this.showDivider:this.showDivider}get expandedBreadcrumbItems(){if(this.breadcrumbs.length>0)return this.breadcrumbs;if(!this.showBack)return[];return[{id:"back",label:this.backLabel,ariaLabel:this.backAriaLabel}]}get backTooltipLabel(){return"Go back"}get primaryCollapsed(){return this.effectiveVariant==="constrained"&&this.primaryAction!==null&&(this.primaryAction.collapse??"auto")==="auto"}get selectableSections(){return this.sections.filter((t=>!g(t)))}get hasSectionSelector(){return this.selectableSections.length>1}get effectiveValue(){return this.selectableSections.some((t=>t.id===this.value))?this.value:this.selectableSections[0]?.id??""}get selectedSectionLabel(){return this.selectableSections.find((t=>t.id===this.effectiveValue))?.label??""}get sectionTriggerAriaLabel(){return`${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`}groupsFromItems(t,i){const e=[];let s=[];const r=()=>{if(s.length>0)e.push({items:s});s=[]};for(const e of t){if(g(e)){r()}else{s.push(i(e))}}r();return e}get sectionMenuSections(){return this.groupsFromItems(this.sections,(t=>({label:t.label,value:t.id,isSelected:t.id===this.effectiveValue,isInactive:t.isInactive})))}get selectableActions(){return this.actions.filter((t=>!g(t)))}get showActionMenuTrigger(){return this.selectableActions.length>0||this.primaryCollapsed&&this.primaryAction!==null}actionMenuItem(t){const i=t;return{label:t.label,value:t.id,isInactive:t.isInactive||i.isLoading,isDestructive:t.isDestructive||i.intent==="negative"}}get actionMenuSections(){const t=this.groupsFromItems(this.actions,(t=>this.actionMenuItem(t)));if(!this.primaryCollapsed||!this.primaryAction)return t;return[{items:[this.actionMenuItem(this.primaryAction)]},...t]}renderSectionSelector(){if(!this.hasSectionSelector)return null;return[s("div",{class:"bar-title__divider","aria-hidden":"true"}),s("div",{class:"bar-title__section-selector"},s("button",{ref:t=>{this.sectionTriggerEl=t??null},id:this.sectionMenuTriggerId,class:{"bar-title__section-trigger":true,"bar-title__section-trigger--expanded":this.sectionMenuOpen,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.sectionMenuId,"aria-expanded":String(this.sectionMenuOpen),"aria-label":this.sectionTriggerAriaLabel,onClick:this.toggleSectionMenu},s("ds-text",{class:"bar-title__section-label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",lineTruncation:1},this.selectedSectionLabel),s("ds-icon",{class:"bar-title__section-chevron ds-interaction-fill__content",name:"ChevronUpDown",size:"md",color:"inherit","aria-hidden":"true"})))]}renderActions(){const t=this.primaryAction;if(!t&&!this.showActionMenuTrigger)return null;return s("div",{class:"bar-title__actions"},t&&!this.primaryCollapsed?s("ds-button-filled",{class:"bar-title__primary-action",variant:t.icon?"icon-label":"label",icon:t.icon??"",label:t.label,intent:t.intent??"brand",contrast:t.contrast??"bold",size:"md",type:t.type??"button",isInactive:t.isInactive,isLoading:t.isLoading,onDsClick:()=>this.dsAction.emit(t.id)}):null,this.showActionMenuTrigger?s("ds-tooltip",{label:"Page options",side:"bottom",size:"sm"},s("ds-button-unfilled",{ref:t=>{this.actionTriggerEl=t??null},id:this.actionMenuTriggerId,class:"bar-title__more-actions",variant:"icon",icon:"Ellipses","aria-label":this.actionsAriaLabel,size:"md",activeFill:!this.compact,hasBorder:t!==null&&!this.primaryCollapsed,haspopup:"menu",controls:this.actionMenuId,expanded:this.actionMenuOpen,onDsClick:t=>this.toggleActionMenu(t.detail)})):null)}renderBreadcrumb(){const t=this.expandedBreadcrumbItems;if(t.length===0)return null;return s("ds-breadcrumb",{class:"bar-title__breadcrumb",items:t,ariaLabel:this.breadcrumbAriaLabel,onDsSelect:this.handleBreadcrumbSelect})}renderBack(){if(!this.showBack)return null;return s("ds-tooltip",{label:this.backTooltipLabel,side:"bottom",size:"sm"},s("ds-button-unfilled",{class:"bar-title__back",variant:"icon",icon:"ChevronLeft","aria-label":this.backAriaLabel,size:"md",activeFill:false,hasBorder:false,onDsClick:t=>this.dsBack.emit(t.detail)}))}render(){const t=this.compact;return s(r,{key:"4763857037e9660fd1a8f980b803b4189f873a96",class:{"bar-title-host--compact":t,"bar-title-host--expanded":this.effectiveVariant==="expanded","bar-title-host--constrained":this.effectiveVariant==="constrained","bar-title-host--has-description":!!this.description,"bar-title-host--has-back":this.showBack,"bar-title-host--has-breadcrumb":!t&&this.expandedBreadcrumbItems.length>0,"bar-title-host--shell-bar":this.placement==="shell-bar"}},s("div",{key:"4d82aa08996a598dfc46d8d8d595becf5dec0993",class:{"bar-title":true,"bar-title--divider-hidden":!this.dividerVisible,"ds-chrome-header":t}},s("div",{key:"dca3f5e14b16d2c71902a052fff94d51cdd3a8df",class:"bar-title__inner"},!t?this.renderBreadcrumb():null,s("div",{key:"a0b55dfa2178bb0f012dc3612a63a1f5f3768dc5",class:"bar-title__row"},s("div",{key:"0249db9eaf0ed7eaa6d3d3580846d0beae2ddeb2",class:"bar-title__leading"},s("div",{key:"dbad8c1f5e27e06b7e9da83987349261332e0ab9",class:"bar-title__title-row","data-shell-page-header-anchor":true},s("div",{key:"7bcd2a4e77d68b87541b5fd1c712d779194226a5",class:"bar-title__identity"},t?this.renderBack():null,s("ds-text",{key:"27ed8f611ac873e04b03ea238f75a032f68c1c9b",class:"bar-title__heading ds-control--md",variant:t?"text-title-small":"text-title-medium",emphasis:true,color:"primary",as:"h1",lineTruncation:1},this.heading)),this.renderSectionSelector()),this.description&&!t?s("ds-text",{class:"bar-title__description",variant:"text-body-small",color:"secondary",lineTruncation:2,wrap:"wrap",as:"p"},this.description):null),this.renderActions()))),this.hasSectionSelector?s("ds-menu",{id:this.sectionMenuId,class:"bar-title__section-menu",anchorId:this.sectionMenuTriggerId,menuLabel:this.sectionsAriaLabel,open:this.sectionMenuOpen,initialFocusVisible:this.sectionMenuInitialFocusVisible,sections:this.sectionMenuSections,onDsClose:this.closeSectionMenu,onDsSelect:this.handleSectionSelect}):null,this.showActionMenuTrigger?s("ds-menu",{id:this.actionMenuId,class:"bar-title__action-menu",anchorId:this.actionMenuTriggerId,align:"end",menuLabel:this.actionsAriaLabel,open:this.actionMenuOpen,initialFocusVisible:this.actionMenuInitialFocusVisible,sections:this.actionMenuSections,onDsClose:this.closeActionMenu,onDsSelect:this.handleActionSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}}static get style(){return _()}},[2,"ds-bar-title",{heading:[1],description:[1],showBack:[4,"show-back"],backAriaLabel:[1,"back-aria-label"],backLabel:[1,"back-label"],breadcrumbs:[16],breadcrumbAriaLabel:[1,"breadcrumb-aria-label"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],primaryAction:[16],actions:[16],actionsAriaLabel:[1,"actions-aria-label"],variant:[1],placement:[513],showDivider:[4,"show-divider"],showCompactDivider:[4,"show-compact-divider"],sectionMenuOpen:[32],actionMenuOpen:[32],sectionMenuInitialFocusVisible:[32],actionMenuInitialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}]);function k(){if(typeof customElements==="undefined"){return}const t=["ds-bar-title","ds-badge","ds-breadcrumb","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text","ds-tooltip"];t.forEach((t=>{switch(t){case"ds-bar-title":if(!customElements.get(n(t))){customElements.define(n(t),w)}break;case"ds-badge":if(!customElements.get(n(t))){a()}break;case"ds-breadcrumb":if(!customElements.get(n(t))){o()}break;case"ds-button-filled":if(!customElements.get(n(t))){d()}break;case"ds-button-unfilled":if(!customElements.get(n(t))){c()}break;case"ds-icon":if(!customElements.get(n(t))){l()}break;case"ds-loader":if(!customElements.get(n(t))){h()}break;case"ds-menu":if(!customElements.get(n(t))){b()}break;case"ds-swatch-picker":if(!customElements.get(n(t))){u()}break;case"ds-switch":if(!customElements.get(n(t))){p()}break;case"ds-tag":if(!customElements.get(n(t))){f()}break;case"ds-text":if(!customElements.get(n(t))){v()}break;case"ds-tooltip":if(!customElements.get(n(t))){m()}break}}))}k();export{w as B,k as d};
|
|
2
|
+
//# sourceMappingURL=p-DnZ7DNaz.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["isBarTitleDivider","item","type","barTitleCss","nextBarTitleId","BarTitle","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","description","showBack","backAriaLabel","backLabel","breadcrumbs","breadcrumbAriaLabel","sections","value","sectionsAriaLabel","primaryAction","actions","actionsAriaLabel","variant","placement","showDivider","sectionMenuOpen","actionMenuOpen","sectionMenuInitialFocusVisible","actionMenuInitialFocusVisible","instanceId","sectionMenuTriggerId","sectionMenuId","actionMenuTriggerId","actionMenuId","sectionTriggerEl","actionTriggerEl","toggleSectionMenu","event","detail","closeSectionMenu","handleSectionSelect","id","String","selected","selectableSections","find","section","isInactive","dsSectionChange","emit","requestAnimationFrame","focus","toggleActionMenu","closeActionMenu","handleActionSelect","primaryMatches","primaryCollapsed","action","selectableActions","candidate","isLoading","dsAction","setFocus","handleBreadcrumbSelect","length","dsBack","originalEvent","forwarded","dsBreadcrumbSelect","defaultPrevented","preventDefault","componentWillLoad","el","closest","setAttribute","handleSectionsChange","hasSectionSelector","handleActionsChange","showActionMenuTrigger","compact","effectiveVariant","dividerVisible","showCompactDivider","expandedBreadcrumbItems","label","ariaLabel","backTooltipLabel","collapse","filter","effectiveValue","some","selectedSectionLabel","sectionTriggerAriaLabel","groupsFromItems","source","map","groups","items","commit","push","sectionMenuSections","isSelected","actionMenuItem","primary","isDestructive","intent","actionMenuSections","renderSectionSelector","h","class","ref","onClick","as","emphasis","color","lineTruncation","name","size","renderActions","icon","contrast","onDsClick","side","activeFill","hasBorder","haspopup","controls","expanded","renderBreadcrumb","onDsSelect","renderBack","render","Host","key","heading","wrap","anchorId","menuLabel","open","initialFocusVisible","onDsClose","align"],"sources":["src/wc/components/BarTitle/bar-title-types.ts","src/wc/components/BarTitle/BarTitle.css?tag=ds-bar-title&encapsulation=scoped","src/wc/components/BarTitle/BarTitle.tsx"],"sourcesContent":["import type { ButtonFilledContrast, ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';\n\nexport interface BarTitleSection {\n id: string;\n label: string;\n isInactive?: boolean;\n}\n\nexport interface BarTitleDivider {\n type: 'divider';\n}\n\nexport type BarTitleSectionItem = BarTitleSection | BarTitleDivider;\n\nexport interface BarTitleAction {\n id: string;\n label: string;\n isInactive?: boolean;\n isDestructive?: boolean;\n}\n\nexport interface BarTitlePrimaryAction extends BarTitleAction {\n icon?: string;\n intent?: ButtonFilledIntent;\n contrast?: ButtonFilledContrast;\n isLoading?: boolean;\n type?: 'button' | 'submit' | 'reset';\n collapse?: BarTitlePrimaryActionCollapse;\n}\n\nexport type BarTitleActionItem = BarTitleAction | BarTitleDivider;\n\nexport type BarTitleVariant = 'expanded' | 'compact' | 'constrained';\nexport type BarTitlePlacement = 'page' | 'shell-bar';\n\nexport type BarTitlePrimaryActionCollapse = 'auto' | 'never';\n\nexport function isBarTitleDivider(\n item: BarTitleSectionItem | BarTitleActionItem\n): item is BarTitleDivider {\n return 'type' in item && item.type === 'divider';\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n display: block;\n min-width: 0;\n box-sizing: border-box;\n background: var(--_shell-page-header-background, var(--color-background-primary));\n}\n\n:host([placement='shell-bar']) {\n --_shell-page-header-background: var(--color-background-secondary);\n}\n\n:host-context(ds-shell-app:not([gradient-preset='none']))[placement='shell-bar'],\n:host-context(ds-shell-app:not([gradient-preset='none']))[placement='shell-bar'] .bar-title,\n:host-context(ds-shell-app.shell-app--paper-texture)[placement='shell-bar'],\n:host-context(ds-shell-app.shell-app--paper-texture)[placement='shell-bar'] .bar-title {\n background: transparent;\n}\n\n:host([data-shell-page-syncing]) {\n visibility: hidden;\n}\n\n.bar-title {\n position: relative;\n min-width: 0;\n box-sizing: border-box;\n background: var(--_shell-page-header-background, var(--color-background-primary));\n}\n\n.bar-title::after {\n content: '';\n position: absolute;\n inset: auto var(--ds-bar-title-divider-inset, var(--dimension-space-400)) 0;\n height: var(--dimension-stroke-width-012);\n background: var(--color-border-tertiary);\n pointer-events: none;\n}\n\n.bar-title--divider-hidden::after {\n display: none;\n}\n\n.bar-title__inner {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-400);\n box-sizing: border-box;\n}\n\n.bar-title__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--dimension-space-100);\n min-height: var(--dimension-size-400);\n min-width: 0;\n}\n\n:host(.bar-title-host--expanded) .bar-title__row {\n gap: var(--dimension-space-400);\n}\n\n.bar-title__leading {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: var(--dimension-space-100);\n min-width: 0;\n}\n\n.bar-title__title-row {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-100);\n min-width: 0;\n min-height: var(--dimension-size-400);\n}\n\n.bar-title__identity {\n display: flex;\n flex: 0 1 auto;\n align-items: center;\n gap: var(--dimension-space-050);\n min-width: 0;\n}\n\n.bar-title__back,\n.bar-title__section-chevron {\n flex: 0 0 auto;\n}\n\n.bar-title__breadcrumb {\n display: block;\n width: 100%;\n min-width: 0;\n}\n\n.bar-title__heading {\n display: block;\n width: auto;\n min-width: 0;\n user-select: none;\n}\n\n.bar-title__divider {\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-size-250);\n margin-inline-start: var(--dimension-space-100);\n flex: 0 0 var(--dimension-stroke-width-012);\n background: var(--color-border-tertiary);\n}\n\n.bar-title__section-selector {\n display: flex;\n flex: 0 1 auto;\n min-width: 0;\n max-width: var(--dimension-panel-width-sm);\n}\n\n.bar-title__section-trigger {\n --ds-control-radius: var(--dimension-radius-half);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n height: var(--ds-control-height);\n min-width: 0;\n max-width: 100%;\n padding-inline: var(--ds-control-padding-inline);\n border: none;\n border-radius: var(--ds-control-radius);\n box-sizing: border-box;\n background: transparent;\n color: var(--color-foreground-secondary);\n cursor: default;\n font-family: inherit;\n user-select: none;\n}\n\n.bar-title__section-trigger--expanded {\n color: var(--color-foreground-primary);\n --ds-interaction-hover: var(--ds-interaction-pressed);\n}\n\n.bar-title__section-trigger--expanded::after {\n background: var(--ds-interaction-pressed);\n}\n\n.bar-title__section-label {\n min-width: 0;\n padding-inline: var(--ds-control-label-inset);\n}\n\n.bar-title__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-100);\n flex: 0 0 auto;\n}\n\n.bar-title__description {\n display: block;\n min-width: 0;\n max-width: 100%;\n}\n\n:host(.bar-title-host--compact) .bar-title {\n height: var(--dimension-size-600);\n}\n\n:host(.bar-title-host--compact) .bar-title::after {\n inset-inline: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__inner {\n flex: 1 1 auto;\n height: 100%;\n min-width: 0;\n padding: 0;\n gap: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__row {\n height: 100%;\n align-items: center;\n}\n\n:host(.bar-title-host--compact) .bar-title__identity {\n height: var(--dimension-size-400);\n}\n\n:host(.bar-title-host--compact) .bar-title__divider {\n margin-inline-start: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__heading {\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n box-sizing: border-box;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport type { BreadcrumbItem, BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n isBarTitleDivider,\n type BarTitleAction,\n type BarTitleActionItem,\n type BarTitlePrimaryAction,\n type BarTitleSection,\n type BarTitleSectionItem,\n type BarTitlePlacement,\n type BarTitleVariant,\n} from './bar-title-types';\n\nlet nextBarTitleId = 0;\n\ntype FocusableButton = HTMLElement & { setFocus?: () => Promise<void> };\n\n@Component({\n tag: 'ds-bar-title',\n styleUrl: 'BarTitle.css',\n scoped: true,\n})\nexport class BarTitle {\n @Element() el!: HTMLElement;\n\n /** The page's single visible h1. */\n @Prop() heading!: string;\n\n /** Optional supporting copy shown in the expanded presentation. */\n @Prop() description: string = '';\n\n /** Show the leading page-level Back action. */\n @Prop({ attribute: 'show-back' }) showBack: boolean = false;\n\n /** Accessible name for the leading Back action. */\n @Prop() backAriaLabel: string = 'Back';\n\n /** Visible parent-page label used by the expanded breadcrumb when breadcrumbs is empty. */\n @Prop() backLabel: string = 'Back';\n\n /** Optional expanded ancestor path. Compact variants continue to use the Back action. */\n @Prop() breadcrumbs: BreadcrumbItem[] = [];\n\n /** Accessible name for the expanded breadcrumb navigation landmark. */\n @Prop() breadcrumbAriaLabel: string = 'Breadcrumb';\n\n /** Optional page sections exposed through the active-section menu. */\n @Prop() sections: BarTitleSectionItem[] = [];\n\n /** Id of the active page section. */\n @Prop() value: string = '';\n\n /** Accessible name for the page-section menu. */\n @Prop() sectionsAriaLabel: string = 'Change page section';\n\n /** The one highest-emphasis page action. */\n @Prop() primaryAction: BarTitlePrimaryAction | null = null;\n\n /** Secondary page actions shown in the overflow menu. Dividers create groups. */\n @Prop() actions: BarTitleActionItem[] = [];\n\n /** Accessible name for the page-actions menu. */\n @Prop() actionsAriaLabel: string = 'More page actions';\n\n /** Explicit visual/capacity variant. ShellPage owns automatic selection. */\n @Prop() variant: BarTitleVariant = 'expanded';\n\n /** Page-header placement, or compact application-shell bar placement. */\n @Prop({ reflect: true }) placement: BarTitlePlacement = 'page';\n\n /** Draw the page-title divider beneath the header. */\n @Prop() showDivider: boolean = true;\n\n /** Override divider visibility for compact and constrained variants. */\n @Prop() showCompactDivider?: boolean;\n\n /** Emitted when the leading Back action is activated. */\n @Event() dsBack!: EventEmitter<MouseEvent>;\n\n /** Emitted when an authored expanded breadcrumb item is activated. */\n @Event({ cancelable: true }) dsBreadcrumbSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n /** Emitted with the newly selected page-section id. */\n @Event() dsSectionChange!: EventEmitter<string>;\n\n /** Emitted with the activated primary or overflow action id. */\n @Event() dsAction!: EventEmitter<string>;\n\n @State() private sectionMenuOpen = false;\n @State() private actionMenuOpen = false;\n @State() private sectionMenuInitialFocusVisible = false;\n @State() private actionMenuInitialFocusVisible = false;\n\n private readonly instanceId = nextBarTitleId++;\n private readonly sectionMenuTriggerId = `bar-title-section-trigger-${this.instanceId}`;\n private readonly sectionMenuId = `bar-title-section-menu-${this.instanceId}`;\n private readonly actionMenuTriggerId = `bar-title-action-trigger-${this.instanceId}`;\n private readonly actionMenuId = `bar-title-action-menu-${this.instanceId}`;\n private sectionTriggerEl: HTMLButtonElement | null = null;\n private actionTriggerEl: FocusableButton | null = null;\n\n componentWillLoad() {\n if (this.el.closest('ds-shell-page')) {\n this.el.setAttribute('data-shell-page-syncing', '');\n }\n }\n\n @Watch('sections')\n handleSectionsChange() {\n if (!this.hasSectionSelector) this.closeSectionMenu();\n }\n\n @Watch('actions')\n @Watch('primaryAction')\n handleActionsChange() {\n if (!this.showActionMenuTrigger) this.closeActionMenu();\n }\n\n private get compact(): boolean {\n return this.effectiveVariant !== 'expanded';\n }\n\n private get effectiveVariant(): BarTitleVariant {\n return this.placement === 'shell-bar' ? 'compact' : this.variant;\n }\n\n private get dividerVisible(): boolean {\n return this.compact ? (this.showCompactDivider ?? this.showDivider) : this.showDivider;\n }\n\n private get expandedBreadcrumbItems(): BreadcrumbItem[] {\n if (this.breadcrumbs.length > 0) return this.breadcrumbs;\n if (!this.showBack) return [];\n return [\n {\n id: 'back',\n label: this.backLabel,\n ariaLabel: this.backAriaLabel,\n },\n ];\n }\n\n /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */\n private get backTooltipLabel(): string {\n return 'Go back';\n }\n\n private get primaryCollapsed(): boolean {\n return (\n this.effectiveVariant === 'constrained' &&\n this.primaryAction !== null &&\n (this.primaryAction.collapse ?? 'auto') === 'auto'\n );\n }\n\n private get selectableSections(): BarTitleSection[] {\n return this.sections.filter((item): item is BarTitleSection => !isBarTitleDivider(item));\n }\n\n private get hasSectionSelector(): boolean {\n return this.selectableSections.length > 1;\n }\n\n private get effectiveValue(): string {\n return this.selectableSections.some(section => section.id === this.value)\n ? this.value\n : (this.selectableSections[0]?.id ?? '');\n }\n\n private get selectedSectionLabel(): string {\n return this.selectableSections.find(section => section.id === this.effectiveValue)?.label ?? '';\n }\n\n private get sectionTriggerAriaLabel(): string {\n return `${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`;\n }\n\n private groupsFromItems<T extends BarTitleSection | BarTitleAction>(\n source: Array<T | { type: 'divider' }>,\n map: (item: T) => MenuItemData\n ): MenuSection[] {\n const groups: MenuSection[] = [];\n let items: MenuItemData[] = [];\n const commit = () => {\n if (items.length > 0) groups.push({ items });\n items = [];\n };\n\n for (const item of source) {\n if (isBarTitleDivider(item)) {\n commit();\n } else {\n items.push(map(item));\n }\n }\n commit();\n return groups;\n }\n\n private get sectionMenuSections(): MenuSection[] {\n return this.groupsFromItems(this.sections, section => ({\n label: section.label,\n value: section.id,\n isSelected: section.id === this.effectiveValue,\n isInactive: section.isInactive,\n }));\n }\n\n private get selectableActions(): BarTitleAction[] {\n return this.actions.filter((item): item is BarTitleAction => !isBarTitleDivider(item));\n }\n\n private get showActionMenuTrigger(): boolean {\n return (\n this.selectableActions.length > 0 || (this.primaryCollapsed && this.primaryAction !== null)\n );\n }\n\n private actionMenuItem(action: BarTitleAction | BarTitlePrimaryAction): MenuItemData {\n const primary = action as BarTitlePrimaryAction;\n return {\n label: action.label,\n value: action.id,\n isInactive: action.isInactive || primary.isLoading,\n isDestructive: action.isDestructive || primary.intent === 'negative',\n };\n }\n\n private get actionMenuSections(): MenuSection[] {\n const groups = this.groupsFromItems(this.actions, action => this.actionMenuItem(action));\n if (!this.primaryCollapsed || !this.primaryAction) return groups;\n return [{ items: [this.actionMenuItem(this.primaryAction)] }, ...groups];\n }\n\n private toggleSectionMenu = (event: MouseEvent) => {\n this.sectionMenuInitialFocusVisible = event.detail === 0;\n this.actionMenuOpen = false;\n this.sectionMenuOpen = !this.sectionMenuOpen;\n };\n\n private closeSectionMenu = () => {\n this.sectionMenuOpen = false;\n };\n\n private handleSectionSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail?.value ?? '');\n const selected = this.selectableSections.find(section => section.id === id);\n if (!selected || selected.isInactive) return;\n this.closeSectionMenu();\n this.dsSectionChange.emit(id);\n requestAnimationFrame(() => this.sectionTriggerEl?.focus());\n };\n\n private toggleActionMenu = (event: MouseEvent) => {\n this.actionMenuInitialFocusVisible = event.detail === 0;\n this.sectionMenuOpen = false;\n this.actionMenuOpen = !this.actionMenuOpen;\n };\n\n private closeActionMenu = () => {\n this.actionMenuOpen = false;\n };\n\n private handleActionSelect = (event: CustomEvent<MenuItemData>) => {\n const id = String(event.detail?.value ?? '');\n const primaryMatches = this.primaryCollapsed && this.primaryAction?.id === id;\n const action = this.selectableActions.find(candidate => candidate.id === id);\n if (!primaryMatches && !action) return;\n if (\n (primaryMatches && (this.primaryAction?.isInactive || this.primaryAction?.isLoading)) ||\n action?.isInactive\n ) {\n return;\n }\n this.closeActionMenu();\n this.dsAction.emit(id);\n requestAnimationFrame(() => void this.actionTriggerEl?.setFocus?.());\n };\n\n private renderSectionSelector() {\n if (!this.hasSectionSelector) return null;\n return [\n <div class=\"bar-title__divider\" aria-hidden=\"true\" />,\n <div class=\"bar-title__section-selector\">\n <button\n ref={el => {\n this.sectionTriggerEl = el ?? null;\n }}\n id={this.sectionMenuTriggerId}\n class={{\n 'bar-title__section-trigger': true,\n 'bar-title__section-trigger--expanded': this.sectionMenuOpen,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n }}\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-controls={this.sectionMenuId}\n aria-expanded={String(this.sectionMenuOpen)}\n aria-label={this.sectionTriggerAriaLabel}\n onClick={this.toggleSectionMenu}\n >\n <ds-text\n class=\"bar-title__section-label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"primary\"\n lineTruncation={1}\n >\n {this.selectedSectionLabel}\n </ds-text>\n <ds-icon\n class=\"bar-title__section-chevron ds-interaction-fill__content\"\n name=\"ChevronUpDown\"\n size=\"md\"\n color=\"inherit\"\n aria-hidden=\"true\"\n />\n </button>\n </div>,\n ];\n }\n\n private renderActions() {\n const primary = this.primaryAction;\n if (!primary && !this.showActionMenuTrigger) return null;\n\n return (\n <div class=\"bar-title__actions\">\n {primary && !this.primaryCollapsed ? (\n <ds-button-filled\n class=\"bar-title__primary-action\"\n variant={primary.icon ? 'icon-label' : 'label'}\n icon={primary.icon ?? ''}\n label={primary.label}\n intent={primary.intent ?? 'brand'}\n contrast={primary.contrast ?? 'bold'}\n size=\"md\"\n type={primary.type ?? 'button'}\n isInactive={primary.isInactive}\n isLoading={primary.isLoading}\n onDsClick={() => this.dsAction.emit(primary.id)}\n />\n ) : null}\n {this.showActionMenuTrigger ? (\n <ds-tooltip label=\"Page options\" side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n ref={el => {\n this.actionTriggerEl = el ?? null;\n }}\n id={this.actionMenuTriggerId}\n class=\"bar-title__more-actions\"\n variant=\"icon\"\n icon=\"Ellipses\"\n aria-label={this.actionsAriaLabel}\n size=\"md\"\n activeFill={!this.compact}\n hasBorder={primary !== null && !this.primaryCollapsed}\n haspopup=\"menu\"\n controls={this.actionMenuId}\n expanded={this.actionMenuOpen}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.toggleActionMenu(event.detail)}\n />\n </ds-tooltip>\n ) : null}\n </div>\n );\n }\n\n private handleBreadcrumbSelect = (event: CustomEvent<BreadcrumbSelectDetail>) => {\n if (this.breadcrumbs.length === 0) {\n this.dsBack.emit(event.detail.originalEvent);\n return;\n }\n const forwarded = this.dsBreadcrumbSelect.emit(event.detail);\n if (forwarded.defaultPrevented) event.preventDefault();\n };\n\n private renderBreadcrumb() {\n const items = this.expandedBreadcrumbItems;\n if (items.length === 0) return null;\n return (\n <ds-breadcrumb\n class=\"bar-title__breadcrumb\"\n items={items}\n ariaLabel={this.breadcrumbAriaLabel}\n onDsSelect={this.handleBreadcrumbSelect}\n />\n );\n }\n\n private renderBack() {\n if (!this.showBack) return null;\n return (\n <ds-tooltip label={this.backTooltipLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n class=\"bar-title__back\"\n variant=\"icon\"\n icon=\"ChevronLeft\"\n aria-label={this.backAriaLabel}\n size=\"md\"\n activeFill={false}\n hasBorder={false}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n />\n </ds-tooltip>\n );\n }\n\n render() {\n const compact = this.compact;\n return (\n <Host\n class={{\n 'bar-title-host--compact': compact,\n 'bar-title-host--expanded': this.effectiveVariant === 'expanded',\n 'bar-title-host--constrained': this.effectiveVariant === 'constrained',\n 'bar-title-host--has-description': !!this.description,\n 'bar-title-host--has-back': this.showBack,\n 'bar-title-host--has-breadcrumb': !compact && this.expandedBreadcrumbItems.length > 0,\n 'bar-title-host--shell-bar': this.placement === 'shell-bar',\n }}\n >\n <div\n class={{\n 'bar-title': true,\n 'bar-title--divider-hidden': !this.dividerVisible,\n 'ds-chrome-header': compact,\n }}\n >\n <div class=\"bar-title__inner\">\n {!compact ? this.renderBreadcrumb() : null}\n <div class=\"bar-title__row\">\n <div class=\"bar-title__leading\">\n <div class=\"bar-title__title-row\" data-shell-page-header-anchor>\n <div class=\"bar-title__identity\">\n {compact ? this.renderBack() : null}\n <ds-text\n class=\"bar-title__heading ds-control--md\"\n variant={compact ? 'text-title-small' : 'text-title-medium'}\n emphasis\n color=\"primary\"\n as=\"h1\"\n lineTruncation={1}\n >\n {this.heading}\n </ds-text>\n </div>\n {this.renderSectionSelector()}\n </div>\n {this.description && !compact ? (\n <ds-text\n class=\"bar-title__description\"\n variant=\"text-body-small\"\n color=\"secondary\"\n lineTruncation={2}\n wrap=\"wrap\"\n as=\"p\"\n >\n {this.description}\n </ds-text>\n ) : null}\n </div>\n {this.renderActions()}\n </div>\n </div>\n </div>\n\n {this.hasSectionSelector ? (\n <ds-menu\n id={this.sectionMenuId}\n class=\"bar-title__section-menu\"\n anchorId={this.sectionMenuTriggerId}\n menuLabel={this.sectionsAriaLabel}\n open={this.sectionMenuOpen}\n initialFocusVisible={this.sectionMenuInitialFocusVisible}\n sections={this.sectionMenuSections}\n onDsClose={this.closeSectionMenu}\n onDsSelect={this.handleSectionSelect}\n />\n ) : null}\n\n {this.showActionMenuTrigger ? (\n <ds-menu\n id={this.actionMenuId}\n class=\"bar-title__action-menu\"\n anchorId={this.actionMenuTriggerId}\n align=\"end\"\n menuLabel={this.actionsAriaLabel}\n open={this.actionMenuOpen}\n initialFocusVisible={this.actionMenuInitialFocusVisible}\n sections={this.actionMenuSections}\n onDsClose={this.closeActionMenu}\n onDsSelect={this.handleActionSelect}\n />\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as a,h as r,a as d,t as o}from"./index.js";import{d as n}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as a,h as r,a as d,t as o}from"./index.js";import{d as n}from"./p-Cd1JnnVK.js";const t=()=>`.ds-visually-hidden.sc-ds-badge-h,.ds-visually-hidden.sc-ds-badge{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@media (forced-colors: active){.sc-ds-badge:root,.sc-ds-badge-h,.ds-forced-colors-scope.sc-ds-badge{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;container-name:ds-badge-gradient;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018);--_badge-gradient-context:var(--ds-shell-gradient-context, flat)}.badge--force-gradient-background.sc-ds-badge-h{--_badge-gradient-context:gradient}.badge--force-flat-background.sc-ds-badge-h{--_badge-gradient-context:flat}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--no-ring.sc-ds-badge-h{--_badge-ring-width:0}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:auto;min-width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-half)}@container ds-badge-gradient style(--_badge-gradient-context: gradient){.badge__mark.badge__mark{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge__mark::before,.badge__mark::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite:exclude}.badge__mark::before{z-index:-2;background-color:var(--_badge-ring)}.badge__mark::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}}@media (forced-colors: active){.badge__mark.sc-ds-badge{color:var(--ds-forced-color-on-selected);background:var(--ds-forced-color-selected);box-shadow:none;outline:var(--_badge-ring-width) solid var(--ds-forced-color-surface)}.badge__mark.sc-ds-badge::before,.badge__mark.sc-ds-badge::after{display:none}}`;const s={primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",faint:"var(--color-background-faint-neutral)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",translucent:"var(--color-translucent-translucent)",inverted:"var(--color-inverted-background)",media:"var(--color-media-background)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const i=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="primary";this.hasRing=true}render(){const e=this.variant==="dot";if(!e&&this.count<=0)return r(d,{style:{display:"none"}});const a=this.count>this.max?`${this.max}+`:String(this.count);const o=this.background??s[this.surface];return r(d,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--no-ring":!this.hasRing,"badge--force-gradient-background":this.gradientBackground===true,"badge--force-flat-background":this.gradientBackground===false},style:{"--_badge-ring":o}},r("span",{class:"badge__mark","aria-hidden":"true"},!e&&r("ds-text",{as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a)),this.label&&r("span",{class:"badge__a11y ds-visually-hidden"},this.label))}static get style(){return t()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],hasRing:[4,"has-ring"],gradientBackground:[516,"gradient-background"],label:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-badge","ds-text"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(o(e))){customElements.define(o(e),i)}break;case"ds-text":if(!customElements.get(o(e))){n()}break}}))}c();export{i as B,c as d};
|
|
2
|
+
//# sourceMappingURL=p-DzPtYdXy.js.map
|