@ds-mo/ui 14.19.0 → 14.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +1 -1
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-avatar.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-banner.js.map +1 -1
- package/dist/components/ds-bar-action.js +1 -1
- package/dist/components/ds-bar-action.js.map +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-bar-workflow.js.map +1 -1
- package/dist/components/ds-breadcrumb.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-chart.js.map +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-overview.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-setting.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/ds-chart.js +1 -1
- package/dist/components/ds-chart.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-chip.js.map +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-conversation-list.js.map +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-loader.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-bubble.js +1 -1
- package/dist/components/ds-message-bubble.js.map +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-composer.js.map +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message-scroller.js.map +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js.map +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tool-search.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-scroll-overlay.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-app.js.map +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table-filter.js +1 -1
- package/dist/components/ds-table-saved-views.js +1 -1
- package/dist/components/ds-table-sort.js +1 -1
- package/dist/components/ds-table-sort.js.map +1 -1
- package/dist/components/ds-table-toolbar.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-toast.js.map +1 -1
- package/dist/components/ds-tooltip-chart.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/p-0XTyQNRG.js +2 -0
- package/dist/components/{p-JPTkZ3Ji.js.map → p-0XTyQNRG.js.map} +1 -1
- package/dist/components/{p-DFQ9mcbK.js → p-1YHFQeI7.js} +1 -1
- package/dist/components/p-1YHFQeI7.js.map +1 -0
- package/dist/components/p-B-HsfQOK.js +2 -0
- package/dist/components/p-B-HsfQOK.js.map +1 -0
- package/dist/components/p-B4wTnsUL.js +2 -0
- package/dist/components/p-B4wTnsUL.js.map +1 -0
- package/dist/components/p-B6WQre5D.js +2 -0
- package/dist/components/p-B6WQre5D.js.map +1 -0
- package/dist/components/{p-B1JRCDHS.js → p-BHhmB9-4.js} +2 -2
- package/dist/components/{p-B1JRCDHS.js.map → p-BHhmB9-4.js.map} +1 -1
- package/dist/components/{p-DaAXY-XS.js → p-BNq9fr9S.js} +2 -2
- package/dist/components/p-BNq9fr9S.js.map +1 -0
- package/dist/components/{p-BKp__CQX.js → p-BWwiCvep.js} +2 -2
- package/dist/components/p-BWwiCvep.js.map +1 -0
- package/dist/components/{p-BBG6Sswb.js → p-BYFS2qWb.js} +2 -2
- package/dist/components/{p-BBG6Sswb.js.map → p-BYFS2qWb.js.map} +1 -1
- package/dist/components/{p-uI6z53BE.js → p-Bb4KnRy0.js} +2 -2
- package/dist/components/{p-HB_cf_aR.js → p-BeA6Jv-3.js} +2 -2
- package/dist/components/{p-HB_cf_aR.js.map → p-BeA6Jv-3.js.map} +1 -1
- package/dist/components/{p-Bbb9A3NV.js → p-BjRD57w3.js} +2 -2
- package/dist/components/p-BjRD57w3.js.map +1 -0
- package/dist/components/{p-BS0AbMNK.js → p-BmlGeaY8.js} +2 -2
- package/dist/components/p-BmlGeaY8.js.map +1 -0
- package/dist/components/{p-r8PMqlqm.js → p-BubgDQlb.js} +2 -2
- package/dist/components/p-BubgDQlb.js.map +1 -0
- package/dist/components/{p-BNkU9dcc.js → p-Bv6FSDPR.js} +2 -2
- package/dist/components/{p-BNkU9dcc.js.map → p-Bv6FSDPR.js.map} +1 -1
- package/dist/components/p-Bx1IHqJb.js +2 -0
- package/dist/components/p-Bx1IHqJb.js.map +1 -0
- package/dist/components/{p-D3fMaUJ3.js → p-Bx5BSd6F.js} +2 -2
- package/dist/components/p-Bx5BSd6F.js.map +1 -0
- package/dist/components/{p-B8q-6a03.js → p-C0qN3PSb.js} +1 -1
- package/dist/components/{p-B8q-6a03.js.map → p-C0qN3PSb.js.map} +1 -1
- package/dist/components/{p-ZpQBAwZC.js → p-CFsLF-ts.js} +2 -2
- package/dist/components/p-CFsLF-ts.js.map +1 -0
- package/dist/components/p-CKtJ6FHM.js +2 -0
- package/dist/components/p-CKtJ6FHM.js.map +1 -0
- package/dist/components/p-CRSwNbPk.js +2 -0
- package/dist/components/p-CRSwNbPk.js.map +1 -0
- package/dist/components/{p-BFfLvMZd.js → p-Cea7rROU.js} +2 -2
- package/dist/components/{p-BFfLvMZd.js.map → p-Cea7rROU.js.map} +1 -1
- package/dist/components/{p-B0Byw6OX.js → p-CgGcgMjs.js} +1 -1
- package/dist/components/{p-B0Byw6OX.js.map → p-CgGcgMjs.js.map} +1 -1
- package/dist/components/{p-C-Y7gYgz.js → p-ChfVRPHw.js} +2 -2
- package/dist/components/p-ChfVRPHw.js.map +1 -0
- package/dist/components/{p-CJq3n5kA.js → p-Ck1hgD6g.js} +2 -2
- package/dist/components/p-Ck1hgD6g.js.map +1 -0
- package/dist/components/{p-BMc0DE59.js → p-CochmPyg.js} +1 -1
- package/dist/components/p-CochmPyg.js.map +1 -0
- package/dist/components/{p-iMuFgSoM.js → p-Cp5Hr7Vz.js} +2 -2
- package/dist/components/p-Cp5Hr7Vz.js.map +1 -0
- package/dist/components/p-CpUXubax.js +2 -0
- package/dist/components/{p-DtndC9f1.js.map → p-CpUXubax.js.map} +1 -1
- package/dist/components/{p-BNiuAMeh.js → p-Crz606uD.js} +2 -2
- package/dist/components/p-Crz606uD.js.map +1 -0
- package/dist/components/p-Cxr0IQjC.js.map +1 -1
- package/dist/components/p-D-MWvpg6.js +2 -0
- package/dist/components/p-D-MWvpg6.js.map +1 -0
- package/dist/components/{p-Bu3dOjpW.js → p-D7v6Na7U.js} +2 -2
- package/dist/components/{p-Bu3dOjpW.js.map → p-D7v6Na7U.js.map} +1 -1
- package/dist/components/{p-C6DNhlES.js → p-DA5H_Iq_.js} +1 -1
- package/dist/components/p-DA5H_Iq_.js.map +1 -0
- package/dist/components/p-DBYCwq9L.js +2 -0
- package/dist/components/{p-DOUDRJbE.js.map → p-DBYCwq9L.js.map} +1 -1
- package/dist/components/{p-CY4YFAT3.js → p-DCbKsABt.js} +1 -1
- package/dist/components/p-DCbKsABt.js.map +1 -0
- package/dist/components/{p-C6R5Lft0.js → p-DFC0sRM-.js} +2 -2
- package/dist/components/p-DFC0sRM-.js.map +1 -0
- package/dist/components/{p-CsBICYmt.js → p-DGkn8FwV.js} +2 -2
- package/dist/components/p-DGkn8FwV.js.map +1 -0
- package/dist/components/p-DIqT1m2r.js +2 -0
- package/dist/components/p-DIqT1m2r.js.map +1 -0
- package/dist/components/p-DKt_8s-U.js +2 -0
- package/dist/components/p-DKt_8s-U.js.map +1 -0
- package/dist/components/p-DOUk4KoT.js.map +1 -1
- package/dist/components/p-DQBT1Jkf.js +2 -0
- package/dist/components/p-DQBT1Jkf.js.map +1 -0
- package/dist/components/p-DW5Ita-P.js +2 -0
- package/dist/components/{p-DUdOmSFR.js.map → p-DW5Ita-P.js.map} +1 -1
- package/dist/components/{p-DNpLDbWY.js → p-DZ58Sg5a.js} +1 -1
- package/dist/components/p-DZ58Sg5a.js.map +1 -0
- package/dist/components/{p-DDgeXGbB.js → p-DZv2g9Pe.js} +2 -2
- package/dist/components/p-DZv2g9Pe.js.map +1 -0
- package/dist/components/{p-BknXYAEc.js → p-DdH7b4JF.js} +2 -2
- package/dist/components/p-DdH7b4JF.js.map +1 -0
- package/dist/components/{p-DBue3ISk.js → p-Demfba7T.js} +2 -2
- package/dist/components/p-Demfba7T.js.map +1 -0
- package/dist/components/p-Djxw2FjZ.js +2 -0
- package/dist/components/{p-CwjVgUqy.js.map → p-Djxw2FjZ.js.map} +1 -1
- package/dist/components/p-DmWoFSGs.js +2 -0
- package/dist/components/p-DmWoFSGs.js.map +1 -0
- package/dist/components/p-Do8wbFff.js +2 -0
- package/dist/components/p-Do8wbFff.js.map +1 -0
- package/dist/components/p-Drnyq8z7.js +2 -0
- package/dist/components/p-Drnyq8z7.js.map +1 -0
- package/dist/components/p-DsgEY6mZ.js +2 -0
- package/dist/components/p-DsgEY6mZ.js.map +1 -0
- package/dist/components/p-Is1lFmwp.js +2 -0
- package/dist/components/p-Is1lFmwp.js.map +1 -0
- package/dist/components/{p-BUDAwJVV.js → p-caLOcQUK.js} +2 -2
- package/dist/components/p-caLOcQUK.js.map +1 -0
- package/dist/components/{p-D1eEgwcP.js → p-etg-Uk1u.js} +1 -1
- package/dist/components/{p-D1eEgwcP.js.map → p-etg-Uk1u.js.map} +1 -1
- package/dist/components/{p-C9gC4haA.js → p-fRDzpfi9.js} +2 -2
- package/dist/components/p-fRDzpfi9.js.map +1 -0
- package/dist/components/{p-C-vRkDyn.js → p-rCeztgVn.js} +1 -1
- package/dist/components/{p-C-vRkDyn.js.map → p-rCeztgVn.js.map} +1 -1
- package/dist/components/{p-B_jZIC9R.js → p-vrotWZxt.js} +2 -2
- package/dist/components/{p-B_jZIC9R.js.map → p-vrotWZxt.js.map} +1 -1
- package/dist/docs/components.json +6 -6
- package/dist/lib/shell/index.d.ts +2 -2
- package/dist/lib/shell/index.js +8 -6
- package/dist/lib/shell/index.js.map +2 -2
- package/dist/lib/toast/index.js +1 -4
- package/dist/lib/toast/index.js.map +2 -2
- package/dist/lib/utils/index.d.ts +1 -1
- package/dist/lib/utils/index.js +104 -22
- package/dist/lib/utils/index.js.map +2 -2
- package/dist/mcp/cli.js +70 -31
- package/dist/mcp-data/registry/agent-activity.json +1 -1
- package/dist/mcp-data/registry/agent-questionnaire.json +3 -3
- package/dist/mcp-data/registry/agent-source-list.json +2 -2
- package/dist/mcp-data/registry/agent-tool-call.json +2 -2
- package/dist/mcp-data/registry/attachment-list.json +1 -1
- package/dist/mcp-data/registry/badge.json +1 -1
- package/dist/mcp-data/registry/banner.json +2 -2
- package/dist/mcp-data/registry/bar-action.json +1 -1
- package/dist/mcp-data/registry/bar-nav.json +3 -3
- package/dist/mcp-data/registry/bar-workflow.json +1 -1
- package/dist/mcp-data/registry/breadcrumb.json +1 -1
- package/dist/mcp-data/registry/button-filled.json +1 -1
- package/dist/mcp-data/registry/button-unfilled.json +1 -1
- package/dist/mcp-data/registry/card-chart.json +2 -2
- package/dist/mcp-data/registry/card-overview.json +3 -3
- package/dist/mcp-data/registry/card-setting.json +1 -1
- package/dist/mcp-data/registry/chart-legend.json +1 -1
- package/dist/mcp-data/registry/chart.json +1 -1
- package/dist/mcp-data/registry/checkbox.json +1 -1
- package/dist/mcp-data/registry/chip.json +1 -1
- package/dist/mcp-data/registry/code-block.json +1 -1
- package/dist/mcp-data/registry/conversation-list-item.json +1 -1
- package/dist/mcp-data/registry/conversation-list.json +2 -2
- package/dist/mcp-data/registry/divider.json +1 -1
- package/dist/mcp-data/registry/empty-state.json +1 -1
- package/dist/mcp-data/registry/field.json +1 -1
- package/dist/mcp-data/registry/filter-menu.json +1 -1
- package/dist/mcp-data/registry/icon.json +2 -2
- package/dist/mcp-data/registry/input.json +2 -2
- package/dist/mcp-data/registry/loader.json +1 -1
- package/dist/mcp-data/registry/menu.json +3 -3
- package/dist/mcp-data/registry/message-bubble.json +1 -1
- package/dist/mcp-data/registry/message-composer.json +2 -2
- package/dist/mcp-data/registry/message-scroller.json +3 -3
- package/dist/mcp-data/registry/mobile-bar-nav.json +1 -1
- package/dist/mcp-data/registry/mobile-header.json +2 -2
- package/dist/mcp-data/registry/mobile-section-switcher.json +2 -2
- package/dist/mcp-data/registry/mobile-sheet-nav.json +1 -1
- package/dist/mcp-data/registry/modal.json +2 -2
- package/dist/mcp-data/registry/pagination.json +2 -2
- package/dist/mcp-data/registry/panel-nav.json +2 -2
- package/dist/mcp-data/registry/panel-sub-nav.json +1 -1
- package/dist/mcp-data/registry/panel-tool-header.json +1 -1
- package/dist/mcp-data/registry/panel-tool-search.json +1 -1
- package/dist/mcp-data/registry/panel-tools.json +2 -2
- package/dist/mcp-data/registry/radio.json +1 -1
- package/dist/mcp-data/registry/select.json +1 -1
- package/dist/mcp-data/registry/shell-app.json +2 -2
- package/dist/mcp-data/registry/shell-page.json +1 -1
- package/dist/mcp-data/registry/shell-tools.json +1 -1
- package/dist/mcp-data/registry/skeleton.json +2 -2
- package/dist/mcp-data/registry/slider.json +2 -2
- package/dist/mcp-data/registry/swatch-picker.json +3 -3
- package/dist/mcp-data/registry/switch.json +2 -2
- package/dist/mcp-data/registry/tab-group.json +2 -2
- package/dist/mcp-data/registry/table-sort.json +1 -1
- package/dist/mcp-data/registry/table.json +18 -18
- package/dist/mcp-data/registry/tag.json +2 -2
- package/dist/mcp-data/registry/text.json +4 -4
- package/dist/mcp-data/registry/toast.json +2 -2
- package/dist/mcp-data/registry/tooltip-chart.json +2 -2
- package/dist/mcp-data/registry/tooltip.json +2 -2
- package/dist/styles/prose.css +42 -38
- package/dist/styles/table.css +39 -67
- package/dist/types/components/CardSetting/index.d.ts +1 -1
- package/dist/types/components/TooltipChart/index.d.ts +1 -1
- package/dist/types/shell/index.d.ts +2 -2
- package/dist/types/utils/index.d.ts +1 -1
- package/package.json +11 -1
- package/dist/components/p--CRAu9fJ.js +0 -2
- package/dist/components/p--CRAu9fJ.js.map +0 -1
- package/dist/components/p-BCOl1x0_.js +0 -2
- package/dist/components/p-BCOl1x0_.js.map +0 -1
- package/dist/components/p-BHVOiWz5.js +0 -2
- package/dist/components/p-BHVOiWz5.js.map +0 -1
- package/dist/components/p-BKp__CQX.js.map +0 -1
- package/dist/components/p-BMc0DE59.js.map +0 -1
- package/dist/components/p-BNiuAMeh.js.map +0 -1
- package/dist/components/p-BPG0r_mC.js +0 -2
- package/dist/components/p-BPG0r_mC.js.map +0 -1
- package/dist/components/p-BS0AbMNK.js.map +0 -1
- package/dist/components/p-BUDAwJVV.js.map +0 -1
- package/dist/components/p-BZVWmzKf.js +0 -2
- package/dist/components/p-BZVWmzKf.js.map +0 -1
- package/dist/components/p-Bbb9A3NV.js.map +0 -1
- package/dist/components/p-BhYS_Ump.js +0 -2
- package/dist/components/p-BhYS_Ump.js.map +0 -1
- package/dist/components/p-BknXYAEc.js.map +0 -1
- package/dist/components/p-BxGQ3cRJ.js +0 -2
- package/dist/components/p-BxGQ3cRJ.js.map +0 -1
- package/dist/components/p-BysVBVQv.js +0 -2
- package/dist/components/p-BysVBVQv.js.map +0 -1
- package/dist/components/p-C-Y7gYgz.js.map +0 -1
- package/dist/components/p-C6DNhlES.js.map +0 -1
- package/dist/components/p-C6R5Lft0.js.map +0 -1
- package/dist/components/p-C9gC4haA.js.map +0 -1
- package/dist/components/p-CAnnQL1F.js +0 -2
- package/dist/components/p-CAnnQL1F.js.map +0 -1
- package/dist/components/p-CJq3n5kA.js.map +0 -1
- package/dist/components/p-CY4YFAT3.js.map +0 -1
- package/dist/components/p-Cg0kimXZ.js +0 -2
- package/dist/components/p-Cg0kimXZ.js.map +0 -1
- package/dist/components/p-CsBICYmt.js.map +0 -1
- package/dist/components/p-CwjVgUqy.js +0 -2
- package/dist/components/p-D3fMaUJ3.js.map +0 -1
- package/dist/components/p-D7R4yE2C.js +0 -2
- package/dist/components/p-D7R4yE2C.js.map +0 -1
- package/dist/components/p-DAvh38E4.js +0 -2
- package/dist/components/p-DAvh38E4.js.map +0 -1
- package/dist/components/p-DBue3ISk.js.map +0 -1
- package/dist/components/p-DDgeXGbB.js.map +0 -1
- package/dist/components/p-DFQ9mcbK.js.map +0 -1
- package/dist/components/p-DNpLDbWY.js.map +0 -1
- package/dist/components/p-DOUDRJbE.js +0 -2
- package/dist/components/p-DUdOmSFR.js +0 -2
- package/dist/components/p-DaAXY-XS.js.map +0 -1
- package/dist/components/p-DlYw4UGQ.js +0 -2
- package/dist/components/p-DlYw4UGQ.js.map +0 -1
- package/dist/components/p-DtndC9f1.js +0 -2
- package/dist/components/p-JPTkZ3Ji.js +0 -2
- package/dist/components/p-ZpQBAwZC.js.map +0 -1
- package/dist/components/p-ag6Io-kL.js +0 -2
- package/dist/components/p-ag6Io-kL.js.map +0 -1
- package/dist/components/p-fg9EKoZp.js +0 -2
- package/dist/components/p-fg9EKoZp.js.map +0 -1
- package/dist/components/p-iMuFgSoM.js.map +0 -1
- package/dist/components/p-r8PMqlqm.js.map +0 -1
- /package/dist/components/{p-uI6z53BE.js.map → p-Bb4KnRy0.js.map} +0 -0
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as e,H as s,h as o,a as r,t as n}from"./index.js";const t=()=>`.ds-control--lg,:host(.ds-control--lg),:host(.ds-control--md),.ds-control--md,:host(.ds-control--sm),.ds-control--sm,:host(.ds-control--xs),.ds-control--xs{--ds-control-radius:var(--dimension-radius-025)}:host(.ds-control--lg),.ds-control--lg{--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)}:host(.ds-control--md),.ds-control--md{--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)}:host(.ds-control--sm),.ds-control--sm{--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)}:host(.ds-control--xs),.ds-control--xs{--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){:root,:host,.ds-forced-colors-scope{--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}}@keyframes ds-shimmer-text-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}@keyframes ds-shimmer-surface-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}.ds-shimmer-text{--ds-shimmer-base:currentColor;--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc( var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay) );--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc( var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200) );background-color:var(--ds-shimmer-base);background-image:linear-gradient( 330deg, transparent calc(50% - var(--ds-shimmer-spread)), var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%, transparent calc(50% + var(--ds-shimmer-spread)) );background-repeat:no-repeat;background-position:100% 0;background-size:calc( 200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2 ) 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:ds-shimmer-text-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing) infinite}.ds-shimmer-surface{--ds-shimmer-surface-base:var(--color-foreground-quaternary);--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc( var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay) );--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc( var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200) );position:relative;overflow:hidden;background-color:var(--ds-shimmer-surface-base)}.ds-shimmer-surface::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient( 330deg, transparent calc(50% - var(--ds-shimmer-spread)), var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%, transparent calc(50% + var(--ds-shimmer-spread)) );background-repeat:no-repeat;background-position:100% 0;background-size:calc( 200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2 ) 100%;animation:ds-shimmer-surface-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing) infinite}@media (prefers-reduced-motion: reduce){.ds-shimmer-text{animation:none;background-image:none;-webkit-text-fill-color:currentColor}.ds-shimmer-surface::after{display:none;animation:none}}@media (forced-colors: active){.ds-shimmer-text{animation:none;background-image:none;-webkit-text-fill-color:currentColor}.ds-shimmer-surface{background-color:var(--ds-forced-color-disabled)}.ds-shimmer-surface::after{display:none;animation:none}}:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;vertical-align:middle;--ds-skeleton-base:var(--color-foreground-quaternary);--ds-shimmer:var(--color-shimmer-shimmer)}.skeleton__shape{--ds-shimmer-surface-base:var(--ds-skeleton-base);display:block;width:100%;height:100%;flex:0 0 auto;background-color:var(--ds-skeleton-base);border-radius:var(--dimension-radius-025)}:host(.skeleton--background-medium){--ds-skeleton-base:var(--color-foreground-on-medium-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-medium-background)}:host(.skeleton--background-bold){--ds-skeleton-base:var(--color-foreground-on-bold-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-bold-background)}:host(.skeleton--background-strong){--ds-skeleton-base:var(--color-foreground-on-strong-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-strong-background)}:host(.skeleton--background-translucent){--ds-skeleton-base:var(--color-translucent-foreground-quaternary);--ds-shimmer:var(--color-translucent-shimmer)}:host(.skeleton--background-inverted){--ds-skeleton-base:var(--color-inverted-foreground-quaternary);--ds-shimmer:var(--color-inverted-shimmer)}:host(.skeleton--background-media){--ds-skeleton-base:var(--color-media-foreground-quaternary);--ds-shimmer:var(--color-media-shimmer)}:host(.skeleton--background-always-dark){--ds-skeleton-base:var(--color-always-dark-foreground-quaternary);--ds-shimmer:var(--color-always-dark-shimmer)}:host(.skeleton--background-navigation){--ds-skeleton-base:var(--color-navigation-foreground-quaternary);--ds-shimmer:var(--color-navigation-shimmer)}:host(.skeleton--text){width:100%;height:var(--ds-skeleton-canvas-size);padding-block:0}:host(.skeleton--text) .skeleton__shape{height:75%}:host(.skeleton--text-text-display-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-3xl)}:host(.skeleton--text-text-display-small){--ds-skeleton-canvas-size:var(--typography-lineheight-2xl)}:host(.skeleton--text-text-title-large){--ds-skeleton-canvas-size:var(--typography-lineheight-xl)}:host(.skeleton--text-text-title-medium),:host(.skeleton--text-text-body-large){--ds-skeleton-canvas-size:var(--typography-lineheight-lg)}:host(.skeleton--text-text-title-small),:host(.skeleton--text-text-body-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-md)}:host(.skeleton--text-text-body-small){--ds-skeleton-canvas-size:var(--typography-lineheight-sm)}:host(.skeleton--text-text-caption){--ds-skeleton-canvas-size:var(--typography-lineheight-xs)}:host(.skeleton--icon){width:var(--ds-skeleton-canvas-size);height:var(--ds-skeleton-canvas-size);padding:0}:host(.skeleton--icon) .skeleton__shape{width:75%;height:75%}:host(.skeleton--icon.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}:host(.skeleton--icon-xs){--ds-skeleton-canvas-size:var(--dimension-iconography-xs)}:host(.skeleton--icon-sm){--ds-skeleton-canvas-size:var(--dimension-iconography-sm)}:host(.skeleton--icon-md){--ds-skeleton-canvas-size:var(--dimension-iconography-md)}:host(.skeleton--icon-lg){--ds-skeleton-canvas-size:var(--dimension-iconography-lg)}:host(.skeleton--icon-xl){--ds-skeleton-canvas-size:var(--dimension-iconography-xl)}:host(.skeleton--icon-2xl){--ds-skeleton-canvas-size:var(--dimension-iconography-2xl)}:host(.skeleton--icon-3xl){--ds-skeleton-canvas-size:var(--dimension-iconography-3xl)}:host(.skeleton--control){width:100%;height:var(--ds-control-height)}:host(.skeleton--control) .skeleton__shape{border-radius:var(--ds-control-radius, var(--dimension-radius-025))}:host(.skeleton--control.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}@media (forced-colors: active){.skeleton__shape{background-color:var(--ds-forced-color-disabled)}}`;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.variant="text";this.textVariant="text-body-medium";this.iconSize="md";this.controlSize="md";this.rounded=false;this.shimmer=true}get widthCss(){const e=this.width;if(e==null)return undefined;return typeof e==="number"?`${e}px`:e}render(){return o(r,{key:"8857bc323a144735d056e81d52a24baaf73df0ee","aria-hidden":"true",class:{skeleton:true,[`skeleton--${this.variant}`]:true,[`skeleton--text-${this.textVariant}`]:this.variant==="text",[`skeleton--icon-${this.iconSize}`]:this.variant==="icon",[`ds-control--${this.controlSize}`]:this.variant==="control",[`skeleton--background-${this.background}`]:!!this.background,"skeleton--rounded":this.variant!=="text"&&this.rounded},style:this.variant==="icon"?undefined:{width:this.widthCss}},o("span",{key:"bb1c45082a38ec1ff7ea26018d5ff93d65613dff",class:{skeleton__shape:true,"ds-shimmer-surface":this.shimmer}}))}static get style(){return t()}},[1,"ds-skeleton",{variant:[1],textVariant:[1,"text-variant"],iconSize:[1,"icon-size"],controlSize:[1,"control-size"],width:[8],rounded:[4],shimmer:[4],background:[1]}]);function i(){if(typeof customElements==="undefined"){return}const e=["ds-skeleton"];e.forEach((e=>{switch(e){case"ds-skeleton":if(!customElements.get(n(e))){customElements.define(n(e),a)}break}}))}i();export{a as S,i as d};
|
|
2
|
-
//# sourceMappingURL=p-BHVOiWz5.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["skeletonCss","Skeleton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","textVariant","iconSize","controlSize","rounded","shimmer","widthCss","v","width","undefined","render","h","Host","key","class","skeleton","background","style","skeleton__shape"],"sources":["src/wc/components/Skeleton/Skeleton.css?tag=ds-skeleton&encapsulation=shadow","src/wc/components/Skeleton/Skeleton.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/shimmer.css';\n\n:host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: 0;\n vertical-align: middle;\n --ds-skeleton-base: var(--color-foreground-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer);\n}\n\n.skeleton__shape {\n --ds-shimmer-surface-base: var(--ds-skeleton-base);\n\n display: block;\n width: 100%;\n height: 100%;\n flex: 0 0 auto;\n background-color: var(--ds-skeleton-base);\n border-radius: var(--dimension-radius-025);\n}\n\n/* ── Background context ────────────────────────────────────────────────── */\n\n:host(.skeleton--background-medium) {\n --ds-skeleton-base: var(--color-foreground-on-medium-background-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer-on-medium-background);\n}\n\n:host(.skeleton--background-bold) {\n --ds-skeleton-base: var(--color-foreground-on-bold-background-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer-on-bold-background);\n}\n\n:host(.skeleton--background-strong) {\n --ds-skeleton-base: var(--color-foreground-on-strong-background-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer-on-strong-background);\n}\n\n:host(.skeleton--background-translucent) {\n --ds-skeleton-base: var(--color-translucent-foreground-quaternary);\n --ds-shimmer: var(--color-translucent-shimmer);\n}\n\n:host(.skeleton--background-inverted) {\n --ds-skeleton-base: var(--color-inverted-foreground-quaternary);\n --ds-shimmer: var(--color-inverted-shimmer);\n}\n\n:host(.skeleton--background-media) {\n --ds-skeleton-base: var(--color-media-foreground-quaternary);\n --ds-shimmer: var(--color-media-shimmer);\n}\n\n:host(.skeleton--background-always-dark) {\n --ds-skeleton-base: var(--color-always-dark-foreground-quaternary);\n --ds-shimmer: var(--color-always-dark-shimmer);\n}\n\n:host(.skeleton--background-navigation) {\n --ds-skeleton-base: var(--color-navigation-foreground-quaternary);\n --ds-shimmer: var(--color-navigation-shimmer);\n}\n\n/* ── Text ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--text) {\n width: 100%;\n height: var(--ds-skeleton-canvas-size);\n padding-block: 0;\n}\n\n:host(.skeleton--text) .skeleton__shape {\n height: 75%;\n}\n\n:host(.skeleton--text-text-display-medium) { --ds-skeleton-canvas-size: var(--typography-lineheight-3xl); }\n:host(.skeleton--text-text-display-small) { --ds-skeleton-canvas-size: var(--typography-lineheight-2xl); }\n:host(.skeleton--text-text-title-large) { --ds-skeleton-canvas-size: var(--typography-lineheight-xl); }\n:host(.skeleton--text-text-title-medium),\n:host(.skeleton--text-text-body-large) { --ds-skeleton-canvas-size: var(--typography-lineheight-lg); }\n:host(.skeleton--text-text-title-small),\n:host(.skeleton--text-text-body-medium) { --ds-skeleton-canvas-size: var(--typography-lineheight-md); }\n:host(.skeleton--text-text-body-small) { --ds-skeleton-canvas-size: var(--typography-lineheight-sm); }\n:host(.skeleton--text-text-caption) { --ds-skeleton-canvas-size: var(--typography-lineheight-xs); }\n\n/* ── Icon ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--icon) {\n width: var(--ds-skeleton-canvas-size);\n height: var(--ds-skeleton-canvas-size);\n padding: 0;\n}\n\n:host(.skeleton--icon) .skeleton__shape {\n width: 75%;\n height: 75%;\n}\n\n:host(.skeleton--icon.skeleton--rounded) .skeleton__shape {\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.skeleton--icon-xs) { --ds-skeleton-canvas-size: var(--dimension-iconography-xs); }\n:host(.skeleton--icon-sm) { --ds-skeleton-canvas-size: var(--dimension-iconography-sm); }\n:host(.skeleton--icon-md) { --ds-skeleton-canvas-size: var(--dimension-iconography-md); }\n:host(.skeleton--icon-lg) { --ds-skeleton-canvas-size: var(--dimension-iconography-lg); }\n:host(.skeleton--icon-xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-xl); }\n:host(.skeleton--icon-2xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-2xl); }\n:host(.skeleton--icon-3xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-3xl); }\n\n/* ── Control ───────────────────────────────────────────────────────────── */\n\n:host(.skeleton--control) {\n width: 100%;\n height: var(--ds-control-height);\n}\n\n:host(.skeleton--control) .skeleton__shape {\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n:host(.skeleton--control.skeleton--rounded) .skeleton__shape {\n border-radius: var(--dimension-radius-half);\n}\n\n@media (forced-colors: active) {\n .skeleton__shape {\n background-color: var(--ds-forced-color-disabled);\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { IconSize } from '../Icon/Icon';\nimport type { TextVariant } from '../Text/text-types';\nimport type { ControlSize } from '../../utils/control-text';\n\nexport type SkeletonVariant = 'text' | 'icon' | 'control';\nexport type SkeletonBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'navigation'\n | 'always-dark';\n\n@Component({\n tag: 'ds-skeleton',\n styleUrl: 'Skeleton.css',\n shadow: true,\n})\nexport class Skeleton {\n @Prop() variant: SkeletonVariant = 'text';\n /** Text metric recipe whose line-height defines the text canvas. */\n @Prop() textVariant: TextVariant = 'text-body-medium';\n /** Iconography token whose square canvas defines the icon canvas. */\n @Prop() iconSize: IconSize = 'md';\n /** Shared control-density size whose height defines the control canvas. */\n @Prop() controlSize: ControlSize = 'md';\n /** Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons. */\n @Prop() width: string | number | undefined;\n /** Round icon skeletons into circles and control skeletons into pills. Ignored for text. */\n @Prop() rounded: boolean = false;\n /** Whether to show the shimmer animation. */\n @Prop() shimmer: boolean = true;\n /** Actual parent surface context. Omit on primary and secondary surfaces. */\n @Prop() background: SkeletonBackground | undefined;\n\n private get widthCss() {\n const v = this.width;\n if (v == null) return undefined;\n return typeof v === 'number' ? `${v}px` : v;\n }\n\n render() {\n return (\n <Host\n aria-hidden=\"true\"\n class={{\n 'skeleton': true,\n [`skeleton--${this.variant}`]: true,\n [`skeleton--text-${this.textVariant}`]: this.variant === 'text',\n [`skeleton--icon-${this.iconSize}`]: this.variant === 'icon',\n [`ds-control--${this.controlSize}`]: this.variant === 'control',\n [`skeleton--background-${this.background}`]: !!this.background,\n 'skeleton--rounded': this.variant !== 'text' && this.rounded,\n }}\n style={this.variant === 'icon' ? undefined : { width: this.widthCss }}\n >\n <span\n class={{\n 'skeleton__shape': true,\n 'ds-shimmer-surface': this.shimmer,\n }}\n />\n </Host>\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAc,IAAM,2sQ,MCsBbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,kEAMUC,KAAAC,QAA2B,OAE3BD,KAAAE,YAA2B,mBAE3BF,KAAAG,SAAqB,KAErBH,KAAAI,YAA2B,KAI3BJ,KAAAK,QAAmB,MAEnBL,KAAAM,QAAmB,IAkC5B,CA9BC,YAAYC,GACV,MAAMC,EAAIR,KAAKS,MACf,GAAID,GAAK,KAAM,OAAOE,UACtB,cAAcF,IAAM,SAAW,GAAGA,MAAQA,C,CAG5C,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,yDACS,OACZC,MAAO,CACLC,SAAY,KACZ,CAAC,aAAahB,KAAKC,WAAY,KAC/B,CAAC,kBAAkBD,KAAKE,eAAgBF,KAAKC,UAAY,OACzD,CAAC,kBAAkBD,KAAKG,YAAaH,KAAKC,UAAY,OACtD,CAAC,eAAeD,KAAKI,eAAgBJ,KAAKC,UAAY,UACtD,CAAC,wBAAwBD,KAAKiB,gBAAiBjB,KAAKiB,WACpD,oBAAqBjB,KAAKC,UAAY,QAAUD,KAAKK,SAEvDa,MAAOlB,KAAKC,UAAY,OAASS,UAAY,CAAED,MAAOT,KAAKO,WAE3DK,EAAA,QAAAE,IAAA,2CACEC,MAAO,CACLI,gBAAmB,KACnB,qBAAsBnB,KAAKM,W","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["hrefMatchesPath","path","href","startsWith","deriveActiveIdFromUrl","items","bestId","bestLen","item","length","id","countPanelNavItems","groups","reduce","sum","g","resolvePanelNavToggle","collapsed","viewportNarrow","parseCssTimeList","value","split","map","parseCssTimeMs","trim","panelNavWidthTransitionMs","style","properties","transitionProperty","durations","transitionDuration","delays","transitionDelay","max","property","index","duration","delay","Math","parsePanelNavGroups","Array","isArray","parsed","JSON","parse","resolvePanelNavDisableVt","prop","attr","shouldResyncPanelNavGroups","parsedGroups"],"sources":["src/wc/components/PanelNav/panel-nav-utils.ts"],"sourcesContent":["import type { PanelNavGroup, PanelNavItem } from './panel-nav-types';\nimport { parseCssTimeMs } from '../../utils/resolve-css-time-ms';\nimport {\n NAV_STYLE_HINT_ATTR,\n clearNavStyleHint,\n readNavStyleAttr,\n resolveNavChromeStyle,\n setNavStyleHint,\n shouldResyncNavChromeStyle,\n} from '../../shell/nav-chrome';\n\nexport type { NavChromeStyle } from '../../shell/nav-chrome';\nexport {\n NAV_STYLE_HINT_ATTR,\n readNavStyleAttr,\n setNavStyleHint,\n clearNavStyleHint,\n resolveNavChromeStyle as resolvePanelNavStyle,\n shouldResyncNavChromeStyle as shouldResyncPanelNavStyle,\n};\n\n/** Whether `path` matches `href` at a segment boundary (exact or child path). */\nexport function hrefMatchesPath(path: string, href: string): boolean {\n return path === href || path.startsWith(`${href}/`);\n}\n\n/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */\nexport function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string {\n if (!path) return '';\n\n let bestId = '';\n let bestLen = 0;\n\n for (const item of items) {\n if (!item.href) continue;\n if (hrefMatchesPath(path, item.href) && item.href.length > bestLen) {\n bestId = item.id;\n bestLen = item.href.length;\n }\n }\n\n return bestId;\n}\n\n/** Total nav item count across all groups. */\nexport function countPanelNavItems(groups: PanelNavGroup[]): number {\n return groups.reduce((sum, g) => sum + g.items.length, 0);\n}\n\n/** Resolve a user toggle without mutating the persisted desktop preference while breakpoint-locked. */\nexport function resolvePanelNavToggle(\n collapsed: boolean,\n viewportNarrow: boolean,\n): boolean | null {\n return viewportNarrow ? null : !collapsed;\n}\n\nexport interface PanelNavTransitionStyle {\n transitionProperty: string;\n transitionDuration: string;\n transitionDelay: string;\n}\n\nfunction parseCssTimeList(value: string): number[] {\n return value.split(',').map(item => parseCssTimeMs(item.trim(), 0));\n}\n\n/**\n * Maximum computed time for PanelNav's width transition. CSS repeats shorter\n * duration/delay lists to match the property list, so mirror that behavior.\n */\nexport function panelNavWidthTransitionMs(style: PanelNavTransitionStyle): number {\n const properties = style.transitionProperty.split(',').map(item => item.trim());\n const durations = parseCssTimeList(style.transitionDuration);\n const delays = parseCssTimeList(style.transitionDelay);\n\n return properties.reduce((max, property, index) => {\n if (property !== 'all' && property !== 'width' && property !== 'min-width') return max;\n const duration = durations[index % durations.length] ?? 0;\n const delay = delays[index % delays.length] ?? 0;\n return Math.max(max, duration + delay, 0);\n }, 0);\n}\n\n/** Parse `groups` from either a JSON attribute string or a JS property array. */\nexport function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[] {\n if (Array.isArray(groups)) return groups;\n if (typeof groups === 'string') {\n try {\n const parsed = JSON.parse(groups);\n return Array.isArray(parsed) ? parsed : [];\n } catch {\n return [];\n }\n }\n return [];\n}\n\n/** Resolve whether VT is disabled from prop and/or host attribute. */\nexport function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean {\n if (prop) return true;\n if (attr === null) return false;\n return attr !== 'false';\n}\n\n/** True when host `groups` has items but internal parsed state is still empty. */\nexport function shouldResyncPanelNavGroups(\n parsedGroups: PanelNavGroup[],\n groups: string | unknown,\n): boolean {\n return (\n countPanelNavItems(parsedGroups) === 0 &&\n countPanelNavItems(parsePanelNavGroups(groups)) > 0\n );\n}\n"],"mappings":"oCAsBM,SAAUA,EAAgBC,EAAcC,GAC5C,OAAOD,IAASC,GAAQD,EAAKE,WAAW,GAAGD,KAC7C,CAGM,SAAUE,EAAsBH,EAAcI,GAClD,IAAKJ,EAAM,MAAO,GAElB,IAAIK,EAAS,GACb,IAAIC,EAAU,EAEd,IAAK,MAAMC,KAAQH,EAAO,CACxB,IAAKG,EAAKN,KAAM,SAChB,GAAIF,EAAgBC,EAAMO,EAAKN,OAASM,EAAKN,KAAKO,OAASF,EAAS,CAClED,EAASE,EAAKE,GACdH,EAAUC,EAAKN,KAAKO,M,EAIxB,OAAOH,CACT,CAGM,SAAUK,EAAmBC,GACjC,OAAOA,EAAOC,QAAO,CAACC,EAAKC,IAAMD,EAAMC,EAAEV,MAAMI,QAAQ,EACzD,CAGM,SAAUO,EACdC,EACAC,GAEA,OAAOA,EAAiB,MAAQD,CAClC,CAQA,SAASE,EAAiBC,GACxB,OAAOA,EAAMC,MAAM,KAAKC,KAAId,GAAQe,EAAef,EAAKgB,OAAQ,IAClE,CAMM,SAAUC,EAA0BC,GACxC,MAAMC,EAAaD,EAAME,mBAAmBP,MAAM,KAAKC,KAAId,GAAQA,EAAKgB,SACxE,MAAMK,EAAYV,EAAiBO,EAAMI,oBACzC,MAAMC,EAASZ,EAAiBO,EAAMM,iBAEtC,OAAOL,EAAWd,QAAO,CAACoB,EAAKC,EAAUC,KACvC,GAAID,IAAa,OAASA,IAAa,SAAWA,IAAa,YAAa,OAAOD,EACnF,MAAMG,EAAWP,EAAUM,EAAQN,EAAUpB,SAAW,EACxD,MAAM4B,EAAQN,EAAOI,EAAQJ,EAAOtB,SAAW,EAC/C,OAAO6B,KAAKL,IAAIA,EAAKG,EAAWC,EAAO,EAAE,GACxC,EACL,CAGM,SAAUE,EAAoB3B,GAClC,GAAI4B,MAAMC,QAAQ7B,GAAS,OAAOA,EAClC,UAAWA,IAAW,SAAU,CAC9B,IACE,MAAM8B,EAASC,KAAKC,MAAMhC,GAC1B,OAAO4B,MAAMC,QAAQC,GAAUA,EAAS,E,CACxC,MACA,MAAO,E,EAGX,MAAO,EACT,CAGM,SAAUG,EAAyBC,EAAeC,GACtD,GAAID,EAAM,OAAO,KACjB,GAAIC,IAAS,KAAM,OAAO,MAC1B,OAAOA,IAAS,OAClB,CAGM,SAAUC,EACdC,EACArC,GAEA,OACED,EAAmBsC,KAAkB,GACrCtC,EAAmB4B,EAAoB3B,IAAW,CAEtD,Q","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["lengthPxCache","Map","probeEl","getProbeElement","document","createElement","setAttribute","style","cssText","documentElement","appendChild","applyContextVariables","probe","cssLength","context","contextStyle","getComputedStyle","pending","matchAll","map","match","visited","Set","previous","length","name","shift","has","add","value","getPropertyValue","trim","push","priority","getPropertyPriority","setProperty","restoreProbeVariables","removeProperty","resolveCssLengthPx","fallback","resolved","undefined","trimmed","scopedProperty","scopedValue","contextDependent","includes","cached","get","test","n","Number","set","pxMatch","px","parseFloat","previousVariables","width","getBoundingClientRect"],"sources":["src/wc/utils/resolve-css-length-px.ts"],"sourcesContent":["const lengthPxCache = new Map<string, number>();\n\nlet probeEl: HTMLElement | null = null;\n\nfunction getProbeElement(): HTMLElement | null {\n if (typeof document === 'undefined') return null;\n\n if (!probeEl) {\n probeEl = document.createElement('div');\n probeEl.setAttribute('aria-hidden', 'true');\n probeEl.style.cssText =\n 'position:absolute;visibility:hidden;pointer-events:none;top:0;left:0;width:0;height:0;overflow:hidden;';\n document.documentElement.appendChild(probeEl);\n }\n\n return probeEl;\n}\n\nfunction applyContextVariables(\n probe: HTMLElement,\n cssLength: string,\n context: Element,\n): Array<{ name: string; value: string; priority: string }> {\n const contextStyle = getComputedStyle(context);\n const pending = [...cssLength.matchAll(/var\\(\\s*(--[\\w-]+)/g)].map(match => match[1]);\n const visited = new Set<string>();\n const previous: Array<{ name: string; value: string; priority: string }> = [];\n\n while (pending.length > 0) {\n const name = pending.shift();\n if (!name || visited.has(name)) continue;\n visited.add(name);\n const value = contextStyle.getPropertyValue(name).trim();\n if (!value) continue;\n previous.push({\n name,\n value: probe.style.getPropertyValue(name),\n priority: probe.style.getPropertyPriority(name),\n });\n probe.style.setProperty(name, value);\n for (const match of value.matchAll(/var\\(\\s*(--[\\w-]+)/g)) pending.push(match[1]);\n }\n\n return previous;\n}\n\nfunction restoreProbeVariables(\n probe: HTMLElement,\n previous: Array<{ name: string; value: string; priority: string }>,\n): void {\n for (const { name, value, priority } of previous) {\n if (value) probe.style.setProperty(name, value, priority);\n else probe.style.removeProperty(name);\n }\n}\n\n/** Clear session cache (tests only). */\nexport function clearCssLengthPxCache(): void {\n lengthPxCache.clear();\n}\n\n/**\n * Resolve a CSS length to pixels for layout math.\n * Numbers pass through; `var(--dimension-*)`, `calc(...)`, and `16px` resolve via a hidden probe.\n */\nexport function resolveCssLengthPx(\n value: number | string | undefined,\n fallback: number | string,\n context?: Element,\n): number {\n const resolved = value === undefined || value === null || value === '' ? fallback : value;\n if (typeof resolved === 'number') return resolved;\n\n const trimmed = resolved.trim();\n if (!trimmed) return resolveCssLengthPx(fallback, 0, context);\n\n // Component-scoped custom properties inherit from their actual composition\n // boundary, not documentElement where the shared measurement probe lives.\n // Resolve a direct var() from that scope first, then measure the resulting\n // token/calc/px value with the normal cached path.\n const scopedProperty = context ? trimmed.match(/^var\\(\\s*(--[\\w-]+)/)?.[1] : undefined;\n if (context && scopedProperty) {\n const scopedValue = getComputedStyle(context).getPropertyValue(scopedProperty).trim();\n if (scopedValue && scopedValue !== trimmed) {\n return resolveCssLengthPx(scopedValue, fallback, context);\n }\n }\n\n const contextDependent = !!context && trimmed.includes('var(');\n const cached = contextDependent ? undefined : lengthPxCache.get(trimmed);\n if (cached !== undefined) return cached;\n\n if (/^-?\\d+(\\.\\d+)?$/.test(trimmed)) {\n const n = Number(trimmed);\n lengthPxCache.set(trimmed, n);\n return n;\n }\n\n const pxMatch = trimmed.match(/^(-?\\d+(\\.\\d+)?)px$/);\n if (pxMatch) {\n const px = parseFloat(pxMatch[1]);\n lengthPxCache.set(trimmed, px);\n return px;\n }\n\n const cssLength = /^--[\\w-]+$/.test(trimmed) ? `var(${trimmed})` : trimmed;\n\n const probe = getProbeElement();\n if (!probe) {\n return typeof fallback === 'number' ? fallback : 0;\n }\n\n const previousVariables = context\n ? applyContextVariables(probe, cssLength, context)\n : [];\n probe.style.width = cssLength;\n const px = probe.getBoundingClientRect().width;\n probe.style.width = '';\n restoreProbeVariables(probe, previousVariables);\n // A stylesheet can finish loading after a custom element's first layout\n // pass (notably in WebKit). Do not permanently cache the probe's temporary\n // zero when the length depends on a custom property; a later call must be\n // able to resolve the now-available token.\n if (!contextDependent && (px !== 0 || !cssLength.includes('var('))) {\n lengthPxCache.set(trimmed, px);\n }\n return px;\n}\n"],"mappings":"AAAA,MAAMA,EAAgB,IAAIC,IAE1B,IAAIC,EAA8B,KAElC,SAASC,IACP,UAAWC,WAAa,YAAa,OAAO,KAE5C,IAAKF,EAAS,CACZA,EAAUE,SAASC,cAAc,OACjCH,EAAQI,aAAa,cAAe,QACpCJ,EAAQK,MAAMC,QACZ,yGACFJ,SAASK,gBAAgBC,YAAYR,E,CAGvC,OAAOA,CACT,CAEA,SAASS,EACPC,EACAC,EACAC,GAEA,MAAMC,EAAeC,iBAAiBF,GACtC,MAAMG,EAAU,IAAIJ,EAAUK,SAAS,wBAAwBC,KAAIC,GAASA,EAAM,KAClF,MAAMC,EAAU,IAAIC,IACpB,MAAMC,EAAqE,GAE3E,MAAON,EAAQO,OAAS,EAAG,CACzB,MAAMC,EAAOR,EAAQS,QACrB,IAAKD,GAAQJ,EAAQM,IAAIF,GAAO,SAChCJ,EAAQO,IAAIH,GACZ,MAAMI,EAAQd,EAAae,iBAAiBL,GAAMM,OAClD,IAAKF,EAAO,SACZN,EAASS,KAAK,CACZP,OACAI,MAAOjB,EAAML,MAAMuB,iBAAiBL,GACpCQ,SAAUrB,EAAML,MAAM2B,oBAAoBT,KAE5Cb,EAAML,MAAM4B,YAAYV,EAAMI,GAC9B,IAAK,MAAMT,KAASS,EAAMX,SAAS,uBAAwBD,EAAQe,KAAKZ,EAAM,G,CAGhF,OAAOG,CACT,CAEA,SAASa,EACPxB,EACAW,GAEA,IAAK,MAAME,KAAEA,EAAII,MAAEA,EAAKI,SAAEA,KAAcV,EAAU,CAChD,GAAIM,EAAOjB,EAAML,MAAM4B,YAAYV,EAAMI,EAAOI,QAC3CrB,EAAML,MAAM8B,eAAeZ,E,CAEpC,C,SAWgBa,EACdT,EACAU,EACAzB,GAEA,MAAM0B,EAAWX,IAAUY,WAAaZ,IAAU,MAAQA,IAAU,GAAKU,EAAWV,EACpF,UAAWW,IAAa,SAAU,OAAOA,EAEzC,MAAME,EAAUF,EAAST,OACzB,IAAKW,EAAS,OAAOJ,EAAmBC,EAAU,EAAGzB,GAMrD,MAAM6B,EAAiB7B,EAAU4B,EAAQtB,MAAM,yBAAyB,GAAKqB,UAC7E,GAAI3B,GAAW6B,EAAgB,CAC7B,MAAMC,EAAc5B,iBAAiBF,GAASgB,iBAAiBa,GAAgBZ,OAC/E,GAAIa,GAAeA,IAAgBF,EAAS,CAC1C,OAAOJ,EAAmBM,EAAaL,EAAUzB,E,EAIrD,MAAM+B,IAAqB/B,GAAW4B,EAAQI,SAAS,QACvD,MAAMC,EAASF,EAAmBJ,UAAYzC,EAAcgD,IAAIN,GAChE,GAAIK,IAAWN,UAAW,OAAOM,EAEjC,GAAI,kBAAkBE,KAAKP,GAAU,CACnC,MAAMQ,EAAIC,OAAOT,GACjB1C,EAAcoD,IAAIV,EAASQ,GAC3B,OAAOA,C,CAGT,MAAMG,EAAUX,EAAQtB,MAAM,uBAC9B,GAAIiC,EAAS,CACX,MAAMC,EAAKC,WAAWF,EAAQ,IAC9BrD,EAAcoD,IAAIV,EAASY,GAC3B,OAAOA,C,CAGT,MAAMzC,EAAY,aAAaoC,KAAKP,GAAW,OAAOA,KAAaA,EAEnE,MAAM9B,EAAQT,IACd,IAAKS,EAAO,CACV,cAAc2B,IAAa,SAAWA,EAAW,C,CAGnD,MAAMiB,EAAoB1C,EACtBH,EAAsBC,EAAOC,EAAWC,GACxC,GACJF,EAAML,MAAMkD,MAAQ5C,EACpB,MAAMyC,EAAK1C,EAAM8C,wBAAwBD,MACzC7C,EAAML,MAAMkD,MAAQ,GACpBrB,EAAsBxB,EAAO4C,GAK7B,IAAKX,IAAqBS,IAAO,IAAMzC,EAAUiC,SAAS,SAAU,CAClE9C,EAAcoD,IAAIV,EAASY,E,CAE7B,OAAOA,CACT,Q","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["DEFAULT_PAGE_SIZE_OPTIONS","nonNegativeInteger","value","Number","isFinite","Math","max","trunc","positiveInteger","fallback","resolvePaginationState","state","pageSize","pageSizeMode","totalItems","totalPages","ceil","pageIndex","min","options","pageSizeOptions","length","map","filter","Set","sort","left","right","firstItem","lastItem","paginationCss","paginationId","Pagination","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","fitToPage","fitToPageInactive","fitPageSizeLabel","fitPageSizeTriggerLabel","itemLabel","pageSizeLabel","label","showFirstLastButtons","loading","tableCompact","pageSizeControlId","hasLoaded","componentDidLoad","syncTableCompactObserver","connectedCallback","disconnectedCallback","tableCompactDisconnect","undefined","observeTableCaptionCompact","el","compact","requestPage","resolvedState","dsChange","emit","fitPageSize","resolvedFitPageSize","ariaLabel","previousPageIndex","previousPageSize","previousPageSizeMode","reason","requestPageSize","nextMode","handleKeyDown","event","defaultPrevented","altKey","ctrlKey","metaKey","shiftKey","fromChoiceControl","composedPath","some","node","tagName","includes","key","preventDefault","render","atStart","atEnd","visibleItems","total","page","announcedRange","announcedPage","pageSizeAriaLabel","String","push","isInactive","h","Host","class","pagination","onKeyDown","as","variant","color","id","size","inputId","ariaLabelledby","triggerLabel","indicator","allowClear","activeFill","hasBorder","onDsChange","stopPropagation","detail","fontFeature","orientation","icon","onDsClick","role"],"sources":["src/wc/components/Pagination/pagination-model.ts","src/wc/components/Pagination/Pagination.css?tag=ds-pagination&encapsulation=scoped","src/wc/components/Pagination/Pagination.tsx"],"sourcesContent":["import type { PaginationPageSizeMode, PaginationState } from './pagination-types';\n\nexport const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 200] as const;\n\nexport interface ResolvedPaginationState {\n pageIndex: number;\n pageSize: number;\n pageSizeMode: PaginationPageSizeMode;\n totalItems: number;\n totalPages: number;\n firstItem: number;\n lastItem: number;\n pageSizeOptions: number[];\n}\n\nfunction nonNegativeInteger(value: number): number {\n return Number.isFinite(value) ? Math.max(0, Math.trunc(value)) : 0;\n}\n\nfunction positiveInteger(value: number, fallback: number): number {\n return Number.isFinite(value) && value > 0 ? Math.trunc(value) : fallback;\n}\n\nexport function resolvePaginationState(\n state: Pick<\n PaginationState,\n 'pageIndex' | 'pageSize' | 'pageSizeMode' | 'totalItems' | 'pageSizeOptions'\n >,\n): ResolvedPaginationState {\n const pageSize = positiveInteger(state.pageSize, DEFAULT_PAGE_SIZE_OPTIONS[0]);\n const pageSizeMode = state.pageSizeMode === 'fit' ? 'fit' : 'fixed';\n const totalItems = nonNegativeInteger(state.totalItems);\n const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));\n const pageIndex = Math.min(nonNegativeInteger(state.pageIndex), totalPages - 1);\n const options = (state.pageSizeOptions?.length\n ? state.pageSizeOptions\n : DEFAULT_PAGE_SIZE_OPTIONS\n )\n .map(value => positiveInteger(value, 0))\n .filter(value => value > 0);\n const pageSizeOptions = [\n ...new Set(pageSizeMode === 'fixed' ? [...options, pageSize] : options),\n ].sort((left, right) => left - right);\n const firstItem = totalItems === 0 ? 0 : pageIndex * pageSize + 1;\n const lastItem = totalItems === 0 ? 0 : Math.min(totalItems, firstItem + pageSize - 1);\n\n return {\n pageIndex,\n pageSize,\n pageSizeMode,\n totalItems,\n totalPages,\n firstItem,\n lastItem,\n pageSizeOptions,\n };\n}\n","@import '../../utils/visually-hidden.css';\n\n:host {\n display: block;\n box-sizing: border-box;\n min-width: 0;\n max-width: 100%;\n overflow-x: auto;\n scrollbar-width: none;\n}\n\n:host::-webkit-scrollbar {\n display: none;\n}\n\n.pagination,\n.pagination__page-size,\n.pagination__navigation {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n}\n\n.pagination {\n width: max-content;\n min-width: 100%;\n gap: var(--dimension-space-200);\n}\n\n.pagination__page-size,\n.pagination__navigation {\n flex: 0 0 auto;\n}\n\n.pagination__page-size {\n gap: 0;\n padding-inline-end: var(--dimension-space-100);\n}\n\n.pagination__navigation {\n gap: var(--dimension-space-050);\n}\n\n.pagination__total,\n.pagination__page,\n.pagination__label {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n white-space: nowrap;\n}\n\n.pagination__total {\n margin-inline-start: var(--dimension-space-100);\n}\n\n.pagination .pagination__page-size-select {\n --ds-select-fg-active: var(--color-foreground-secondary);\n}\n\n.pagination__page {\n justify-content: center;\n min-inline-size: 0;\n padding-inline: var(--dimension-space-100);\n}\n\n.pagination--table-compact .pagination__total,\n.pagination--table-compact .pagination__boundary {\n display: none;\n}\n\n.pagination--table-compact {\n gap: var(--dimension-space-100);\n}\n\n.pagination--table-compact .pagination__page-size {\n padding-inline-end: 0;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\nimport { resolvePaginationState } from './pagination-model';\nimport type {\n PaginationChangeDetail,\n PaginationPageSizeMode,\n} from './pagination-types';\n\nlet paginationId = 0;\n\n@Component({\n tag: 'ds-pagination',\n styleUrl: 'Pagination.css',\n scoped: true,\n})\nexport class Pagination {\n @Element() el!: HTMLElement;\n\n /** Controlled zero-based page index. */\n @Prop() pageIndex: number = 0;\n /** Controlled number of top-level items on a full page. */\n @Prop() pageSize: number = 25;\n /** Whether pageSize is a fixed choice or a measured Fit snapshot. */\n @Prop() pageSizeMode: PaginationPageSizeMode = 'fixed';\n /** Controlled total number of top-level items across every page. */\n @Prop() totalItems: number = 0;\n /** Available page sizes. Assign arrays through JavaScript. */\n @Prop() pageSizeOptions: number[] = [25, 50, 100, 200];\n /** Include the Fit to page choice. */\n @Prop() fitToPage: boolean = false;\n /** Keep the Fit to page choice visible but unavailable. */\n @Prop() fitToPageInactive: boolean = false;\n /** Effective whole-item capacity to request when Fit is selected. */\n @Prop() fitPageSize: number | undefined;\n /** Full choice-list label for Fit. */\n @Prop() fitPageSizeLabel: string = 'Fit to page';\n /** Compact closed-trigger label while Fit is selected. */\n @Prop() fitPageSizeTriggerLabel: string = 'Fit';\n /** Localized plural noun used by assistive range announcements. */\n @Prop() itemLabel: string = 'items';\n /** Visible page-size control label. */\n @Prop() pageSizeLabel: string = 'Items';\n /** Accessible page-size control label. Defaults to “{pageSizeLabel} per page”. */\n @Prop() pageSizeAriaLabel: string | undefined;\n /** Accessible name for the pagination navigation region. */\n @Prop() label: string = 'Pagination';\n /** Include direct first-page and last-page controls. */\n @Prop() showFirstLastButtons: boolean = false;\n /** Prevent interaction while the owner replaces the current data page. */\n @Prop() loading: boolean = false;\n\n /** Emits the complete next controlled state after a page or page-size request. */\n @Event() dsChange!: EventEmitter<PaginationChangeDetail>;\n\n @State() private tableCompact = false;\n\n private readonly pageSizeControlId = `ds-pagination-${++paginationId}-page-size`;\n private tableCompactDisconnect: (() => void) | undefined;\n private hasLoaded = false;\n\n componentDidLoad(): void {\n this.hasLoaded = true;\n this.syncTableCompactObserver();\n }\n\n connectedCallback(): void {\n if (this.hasLoaded) this.syncTableCompactObserver();\n }\n\n disconnectedCallback(): void {\n this.tableCompactDisconnect?.();\n this.tableCompactDisconnect = undefined;\n }\n\n private syncTableCompactObserver(): void {\n this.tableCompactDisconnect?.();\n this.tableCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n if (this.tableCompact !== compact) this.tableCompact = compact;\n });\n }\n\n private requestPage(pageIndex: number): void {\n const state = this.resolvedState;\n if (this.loading || pageIndex === state.pageIndex || pageIndex < 0 || pageIndex >= state.totalPages) {\n return;\n }\n this.dsChange.emit({\n pageIndex,\n pageSize: state.pageSize,\n pageSizeMode: state.pageSizeMode,\n totalItems: state.totalItems,\n pageSizeOptions: state.pageSizeOptions,\n fitToPage: this.fitToPage,\n fitToPageInactive: this.fitToPageInactive,\n fitPageSize: this.resolvedFitPageSize,\n fitPageSizeLabel: this.fitPageSizeLabel,\n fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n itemLabel: this.itemLabel,\n pageSizeLabel: this.pageSizeLabel,\n ariaLabel: this.label,\n showFirstLastButtons: this.showFirstLastButtons,\n previousPageIndex: state.pageIndex,\n previousPageSize: state.pageSize,\n previousPageSizeMode: state.pageSizeMode,\n reason: 'page',\n });\n }\n\n private requestPageSize(value: string | string[]): void {\n if (\n this.loading ||\n typeof value !== 'string' ||\n (value === 'fit' && this.fitToPageInactive)\n ) return;\n const state = this.resolvedState;\n const nextMode: PaginationPageSizeMode = value === 'fit' ? 'fit' : 'fixed';\n const pageSize = nextMode === 'fit' ? this.resolvedFitPageSize : Number(value);\n if (!pageSize || (pageSize === state.pageSize && nextMode === state.pageSizeMode)) return;\n this.dsChange.emit({\n pageIndex: 0,\n pageSize: Math.trunc(pageSize),\n pageSizeMode: nextMode,\n totalItems: state.totalItems,\n pageSizeOptions: state.pageSizeOptions,\n fitToPage: this.fitToPage,\n fitToPageInactive: this.fitToPageInactive,\n fitPageSize: this.resolvedFitPageSize,\n fitPageSizeLabel: this.fitPageSizeLabel,\n fitPageSizeTriggerLabel: this.fitPageSizeTriggerLabel,\n itemLabel: this.itemLabel,\n pageSizeLabel: this.pageSizeLabel,\n ariaLabel: this.label,\n showFirstLastButtons: this.showFirstLastButtons,\n previousPageIndex: state.pageIndex,\n previousPageSize: state.pageSize,\n previousPageSizeMode: state.pageSizeMode,\n reason: 'page-size',\n });\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {\n return;\n }\n const fromChoiceControl = event.composedPath().some(node =>\n node instanceof HTMLElement &&\n (node.tagName === 'DS-SELECT' || ['INPUT', 'SELECT', 'TEXTAREA'].includes(node.tagName)),\n );\n if (fromChoiceControl || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) return;\n const state = this.resolvedState;\n const pageIndex = event.key === 'ArrowLeft' ? state.pageIndex - 1 : state.pageIndex + 1;\n if (this.loading || pageIndex < 0 || pageIndex >= state.totalPages) return;\n event.preventDefault();\n this.requestPage(pageIndex);\n }\n\n private get resolvedFitPageSize(): number | undefined {\n return Number.isFinite(this.fitPageSize) && Number(this.fitPageSize) > 0\n ? Math.trunc(Number(this.fitPageSize))\n : undefined;\n }\n\n private get resolvedState() {\n return resolvePaginationState({\n pageIndex: this.pageIndex,\n pageSize: this.pageSize,\n pageSizeMode: this.pageSizeMode,\n totalItems: this.totalItems,\n pageSizeOptions: this.pageSizeOptions,\n });\n }\n\n render() {\n const state = this.resolvedState;\n const atStart = state.pageIndex === 0;\n const atEnd = state.pageIndex === state.totalPages - 1;\n const visibleItems = state.totalItems === 0 ? 0 : state.lastItem - state.firstItem + 1;\n const total = `${visibleItems} of ${state.totalItems}`;\n const page = `${state.pageIndex + 1} of ${state.totalPages}`;\n const announcedRange = `${state.firstItem}–${state.lastItem} of ${state.totalItems}`;\n const announcedPage = `Page ${state.pageIndex + 1} of ${state.totalPages}`;\n const pageSizeAriaLabel = this.pageSizeAriaLabel ?? `${this.pageSizeLabel} per page`;\n const options: Array<{ label: string; value: string; isInactive?: boolean }> =\n state.pageSizeOptions.map(value => ({ label: String(value), value: String(value) }));\n if (this.fitToPage) {\n options.push({\n label: this.fitPageSizeLabel,\n value: 'fit',\n isInactive: this.fitToPageInactive || this.resolvedFitPageSize === undefined,\n });\n }\n\n return (\n <Host>\n <nav\n class={{\n pagination: true,\n 'pagination--table-compact': this.tableCompact,\n }}\n aria-label={this.label}\n aria-busy={this.loading ? 'true' : undefined}\n onKeyDown={event => this.handleKeyDown(event)}\n >\n <div class=\"pagination__page-size\">\n <ds-text\n class=\"pagination__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n aria-hidden=\"true\"\n >\n {this.pageSizeLabel}:\n </ds-text>\n <span id={`${this.pageSizeControlId}-label`} class=\"ds-visually-hidden\">\n {pageSizeAriaLabel}\n </span>\n <ds-select\n class=\"pagination__page-size-select\"\n size=\"md\"\n inputId={this.pageSizeControlId}\n ariaLabelledby={`${this.pageSizeControlId}-label`}\n options={options}\n value={state.pageSizeMode === 'fit' ? 'fit' : String(state.pageSize)}\n triggerLabel={state.pageSizeMode === 'fit' ? this.fitPageSizeTriggerLabel : undefined}\n indicator=\"up-down\"\n allowClear={false}\n activeFill={false}\n hasBorder={false}\n isInactive={this.loading}\n onDsChange={event => {\n event.stopPropagation();\n this.requestPageSize(event.detail);\n }}\n />\n <ds-text\n class=\"pagination__total\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n fontFeature=\"tabular-nums\"\n >\n {total}\n </ds-text>\n </div>\n <ds-divider\n class=\"pagination__divider\"\n orientation=\"vertical\"\n length=\"var(--dimension-size-250)\"\n />\n <div class=\"pagination__navigation\">\n {this.showFirstLastButtons ? (\n <ds-button-unfilled\n class=\"pagination__boundary\"\n variant=\"icon\"\n size=\"md\"\n icon=\"ChevronLeftDouble\"\n ariaLabel=\"First page\"\n hasBorder={false}\n isInactive={this.loading || atStart}\n onDsClick={() => this.requestPage(0)}\n />\n ) : null}\n <ds-button-unfilled\n variant=\"icon\"\n size=\"md\"\n icon=\"ChevronLeft\"\n ariaLabel=\"Previous page\"\n hasBorder={false}\n isInactive={this.loading || atStart}\n onDsClick={() => this.requestPage(state.pageIndex - 1)}\n />\n <ds-text\n class=\"pagination__page\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n fontFeature=\"tabular-nums\"\n >\n {page}\n </ds-text>\n <ds-button-unfilled\n variant=\"icon\"\n size=\"md\"\n icon=\"ChevronRight\"\n ariaLabel=\"Next page\"\n hasBorder={false}\n isInactive={this.loading || atEnd}\n onDsClick={() => this.requestPage(state.pageIndex + 1)}\n />\n {this.showFirstLastButtons ? (\n <ds-button-unfilled\n class=\"pagination__boundary\"\n variant=\"icon\"\n size=\"md\"\n icon=\"ChevronRightDouble\"\n ariaLabel=\"Last page\"\n hasBorder={false}\n isInactive={this.loading || atEnd}\n onDsClick={() => this.requestPage(state.totalPages - 1)}\n />\n ) : null}\n </div>\n <span class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {announcedRange} {this.itemLabel}. {announcedPage}.\n </span>\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as t,H as i,c as s,h as e,a as n,t as o}from"./index.js";import{d as r}from"./p-BUDAwJVV.js";import{d}from"./p-ag6Io-kL.js";import{d as a}from"./p-BFfLvMZd.js";import{d as c}from"./p-JPTkZ3Ji.js";import{d as l}from"./p-CAnnQL1F.js";import{d as u}from"./p-iMuFgSoM.js";import{D as p,s as h}from"./p-DOUk4KoT.js";import{s as f,r as v}from"./p-B8q-6a03.js";import{C as g}from"./p-CuwopElg.js";import{c as m}from"./p-DuFm-ieS.js";const b=()=>`@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--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-input-h,.ds-interaction-fill.sc-ds-input{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-input-h::before,.ds-interaction-fill.sc-ds-input::before,.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before{z-index:1}.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::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-input-h,.ds-interaction-fill--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-input-h,.ds-interaction-fill--selected.sc-ds-input{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-input-h::after,.ds-interaction-fill--grouped.sc-ds-input::after,.ds-interaction-fill--grouped.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-input-h,.ds-interaction-fill--grouped.sc-ds-input{--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-input-h>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill.sc-ds-input>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill__content.sc-ds-input{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-input-h,.ds-interaction-fill--on-faint.sc-ds-input{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-input-h,.ds-interaction-fill--on-medium.sc-ds-input{--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-input-h,.ds-interaction-fill--on-bold.sc-ds-input{--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-input-h,.ds-interaction-fill--on-strong.sc-ds-input{--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-input-h,.ds-interaction-fill--on-translucent.sc-ds-input{--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-input-h,.ds-interaction-fill--on-inverted.sc-ds-input{--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-input-h,.ds-interaction-fill--on-media.sc-ds-input{--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-input-h,.ds-interaction-fill--on-always-dark.sc-ds-input{--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-input-h,.ds-interaction-fill--on-navigation.sc-ds-input{--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-input-h::after,.ds-interaction-fill.sc-ds-input::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-input-h::before,.ds-interaction-fill--selected.sc-ds-input::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-input-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-input: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-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--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-input-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-input-h,.ds-focus-ring.sc-ds-input,.ds-focus-ring-inset.sc-ds-input-h,.ds-focus-ring-inset.sc-ds-input{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-input-h:focus-visible,.ds-focus-ring.sc-ds-input: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-input-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-input{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-input-h:focus-visible,.ds-focus-ring-inset.sc-ds-input:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-input-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-input: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-input-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-input{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-input-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-input::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-input-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--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-input-h,.ds-control-inactive.sc-ds-input{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-input,.ds-control--lg.sc-ds-input-h,.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input,.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input,.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-input-h,.ds-control--lg.sc-ds-input{--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-input-h,.ds-control--md.sc-ds-input{--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-input-h,.ds-control--sm.sc-ds-input{--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-input-h,.ds-control--xs.sc-ds-input{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-input{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-input{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-control-icon-box.sc-ds-input{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-input{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-input{position:relative;padding-inline-end:calc( var(--ds-control-label-inset, var(--dimension-space-025)) + var(--ds-control-gap, var(--dimension-space-050)) )}.ds-control-label-dot__badge.sc-ds-input{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-input-h,.ds-control-width--hug.sc-ds-input{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-input-h,.ds-field-stack.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--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}}.input-host.sc-ds-input-h{display:inline-flex;--ds-input-fg:var(--color-foreground-primary);--ds-input-placeholder:var(--color-foreground-secondary);--ds-input-placeholder-active:var(--color-foreground-quaternary);--ds-input-adornment-fg:var(--color-foreground-secondary);--ds-input-border:var(--color-border-secondary);--ds-input-stepper-fg:var(--color-foreground-secondary)}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input-h .input-control.sc-ds-input{width:100%}.input-control.sc-ds-input{overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-fg)}.input-control--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-input-border)}.input-control--error.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.input-control--bordered.sc-ds-input:focus-within:not(.input-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-input-h .input-control.sc-ds-input::after{background:transparent}.native-input.sc-ds-input{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-input-fg);font-family:inherit;text-overflow:ellipsis;-webkit-appearance:none;appearance:none}.native-input--align-start.sc-ds-input{text-align:start}.native-input--align-end.sc-ds-input{text-align:end}.native-input[type='number'].sc-ds-input{-moz-appearance:textfield}.native-input[type='number'].sc-ds-input::-webkit-inner-spin-button,.native-input[type='number'].sc-ds-input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.input-control--number.input-control--align-start.sc-ds-input{padding-inline-end:var(--dimension-space-025)}.input-control--number.input-control--align-end.sc-ds-input{padding-inline-start:var(--dimension-space-025)}.input-control__number-stepper.sc-ds-input{position:relative;z-index:2;display:grid;grid-template-rows:repeat(2, minmax(0, 1fr));flex:0 0 var(--ds-control-icon);width:var(--ds-control-icon);height:calc(var(--ds-control-height) - var(--dimension-space-050));overflow:hidden;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-stepper-fg)}.input-control__number-step.sc-ds-input{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0;overflow:hidden;color:inherit;cursor:default}.input-control__number-step--increment.sc-ds-input{border-radius:var(--ds-control-radius, var(--dimension-radius-025)) var(--ds-control-radius, var(--dimension-radius-025)) 0 0}.input-control__number-step--decrement.sc-ds-input{border-radius:0 0 var(--ds-control-radius, var(--dimension-radius-025)) var(--ds-control-radius, var(--dimension-radius-025))}.input-control__number-step.sc-ds-input:disabled{color:var(--color-foreground-quaternary)}.input-control__number-step-icon.sc-ds-input{flex-shrink:0}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input:read-only:not(:disabled){cursor:default}.native-input.sc-ds-input::placeholder{color:var(--ds-input-placeholder)}.native-input.sc-ds-input:focus::placeholder{color:var(--ds-input-placeholder-active)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.input-control__prefix.sc-ds-input,.input-control__suffix.sc-ds-input{position:relative;z-index:2;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control.sc-ds-input>.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.input-control.ds-control--lg.sc-ds-input:has(.input-control__clear),.input-control.ds-control--md.sc-ds-input:has(.input-control__clear),.input-control.ds-control--sm.sc-ds-input:has(.input-control__clear){padding-right:var(--dimension-space-050)}.input-control.ds-control--xs.sc-ds-input:has(.input-control__clear){padding-right:0}.error-text.sc-ds-input{width:100%}@media (forced-colors: active){.input-control__number-step.sc-ds-input:disabled{color:var(--ds-forced-color-disabled)}.input-control--bordered.sc-ds-input:focus-within:not(.input-control--error)::after{outline-color:var(--ds-forced-color-selected)}.input-control--error.sc-ds-input::after{outline-style:dashed}}`;const x={lg:"lg",md:"md",sm:"sm",xs:"xs"};const y={lg:"md",md:"sm",sm:"xs",xs:"xs"};let w=0;const k=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=s(this,"dsChange",7);this.dsClear=s(this,"dsClear",7);this.internals=this.attachInternals();this.generatedId=`ds-input-${++w}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage=p;this.clearLabel="Clear";this.type="text";this.textAlign="start";this.inputMode="";this.enterKeyHint="";this.size="md";this.width="fill";this.hasBorder=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.hasSuffix=false;this.focused=false;this.touched=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.inputEl?.focus()};this.handleNumericStep=t=>{const i=this.inputEl;if(!i||i.disabled||i.readOnly||this.numericStepDisabled(t))return;const s=i.value;if(t>0)i.stepUp();else i.stepDown();i.focus({preventScroll:true});if(i.value===s)return;this.value=i.value;this.dsChange.emit(this.value)}}componentWillLoad(){this.initialValue=this.value;this.hasSuffix=Boolean(this.el.querySelector('[slot="suffix"]'));this.syncFormValue()}componentDidRender(){const t=Boolean(this.el.querySelector('[slot="suffix"]'));if(t!==this.hasSuffix)this.hasSuffix=t}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;f(this.internals,this.value,{inactive:t});const i=this.required&&!t&&this.value.length===0;h(this.internals,i,this.requiredMessage)}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=v(t)}async setFocus(){this.inputEl?.focus()}numericStepDisabled(t){if(this.value.trim()==="")return false;const i=Number(this.value);if(!Number.isFinite(i))return false;if(t>0&&this.max!==undefined)return i>=this.max;if(t<0&&this.min!==undefined)return i<=this.min;return false}renderNumericStepper(t){const i=t||this.readOnly||this.numericStepDisabled(1);const s=t||this.readOnly||this.numericStepDisabled(-1);return e("span",{class:"input-control__number-stepper"},e("button",{type:"button",class:"input-control__number-step input-control__number-step--increment ds-focus-ring-inset ds-interaction-fill",disabled:i,tabIndex:-1,"aria-hidden":"true",onClick:()=>this.handleNumericStep(1)},e("ds-icon",{class:"input-control__number-step-icon ds-interaction-fill__content",name:"ChevronUp",size:"xs",color:"inherit"})),e("button",{type:"button",class:"input-control__number-step input-control__number-step--decrement ds-focus-ring-inset ds-interaction-fill",disabled:s,tabIndex:-1,"aria-hidden":"true",onClick:()=>this.handleNumericStep(-1)},e("ds-icon",{class:"input-control__number-step-icon ds-interaction-fill__content",name:"ChevronDown",size:"xs",color:"inherit"})))}render(){const t=this.inputId??this.generatedId;const i=this.isInactive||this.disabled||this.formDisabled;const s=this.value.length>0;const o=this.value!==this.initialValue;const r=this.type==="search"&&s&&!i&&!this.readOnly;const d=this.error&&Boolean(this.errorMessage);const a=g[this.size];const c=x[this.size];const l=this.type==="number";const u=[this.ariaDescribedby,d?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return e(n,{key:"0bd7ebd74fbf1c7d99a80b2aa54b9d749702772a",class:{"input-host":true,"ds-field-stack":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...m(this.width)},"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":this.error?"":undefined,"data-filled":s?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":o?"":undefined,"data-touched":this.touched?"":undefined},e("div",{key:"c85a8f72e533a9f6fecc8594cff63f4a612d9114",class:{"input-control":true,"input-control--number":l,"input-control--align-start":this.textAlign==="start","input-control--align-end":this.textAlign==="end","ds-control-frame":true,"input-control--bordered":this.hasBorder,"input-control--error":this.hasBorder&&this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},l&&this.textAlign==="end"&&this.renderNumericStepper(i),this.icon&&e("span",{key:"5792954a6f6b82d9297c710c8f0c534f92957177",class:"input-control__prefix ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},e("ds-icon",{key:"74e888fbd331f6df37a2fd1aa46e892e60498367",name:this.icon,size:c,color:"inherit"})),e("input",{key:"f5ae68ee82793cf47ffe4eaddbcb99fb52845782",ref:t=>{this.inputEl=t},type:this.type,id:t,value:this.value,placeholder:this.placeholder,min:l?this.min:undefined,max:l?this.max:undefined,step:l?this.step:undefined,disabled:i,readOnly:this.readOnly,required:this.required,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,class:`native-input native-input--align-${this.textAlign} ds-control-label-box ds-text--${a.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":u,"aria-invalid":this.error?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),e("span",{key:"1941316e1a81b39cbd0fa1219b544880362d0a64",class:{"input-control__suffix":true,"ds-control-icon-box":true,"input-control__suffix--empty":!this.hasSuffix}},e("slot",{key:"bb1e347d4df384d4e670de9612914c1827242486",name:"suffix"})),r&&e("ds-button-unfilled",{key:"c0ca3e99545f81a7d9bea13ef342b438fbf74d3f",class:"input-control__clear",variant:"icon",size:y[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear}),l&&this.textAlign==="start"&&this.renderNumericStepper(i)),d&&e("ds-text",{key:"6a9c66468fb654cb27dce18258e45763a66c7c96",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return b()}},[326,"ds-input",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],min:[2],max:[2],step:[2],textAlign:[1,"text-align"],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],size:[1],width:[1],hasBorder:[4,"has-border"],icon:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],hasSuffix:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function _(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(o(t))){customElements.define(o(t),k)}break;case"ds-badge":if(!customElements.get(o(t))){r()}break;case"ds-button-unfilled":if(!customElements.get(o(t))){d()}break;case"ds-icon":if(!customElements.get(o(t))){a()}break;case"ds-loader":if(!customElements.get(o(t))){c()}break;case"ds-text":if(!customElements.get(o(t))){l()}break;case"ds-tooltip":if(!customElements.get(o(t))){u()}break}}))}_();export{k as I,_ as d};
|
|
2
|
-
//# sourceMappingURL=p-BPG0r_mC.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["inputCss","ICON_SIZE","lg","md","sm","xs","CLEAR_BUTTON_SIZE","idCounter","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","disabled","readOnly","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","clearLabel","type","textAlign","inputMode","enterKeyHint","size","width","hasBorder","isInactive","autoFocus","error","ariaLabel","initialValue","formDisabled","hasSuffix","focused","touched","handleInput","e","target","dsChange","emit","handleFocus","handleBlur","handleClear","dsClear","inputEl","focus","handleNumericStep","direction","input","numericStepDisabled","previous","stepUp","stepDown","preventScroll","componentWillLoad","Boolean","el","querySelector","syncFormValue","componentDidRender","inactive","setFormControlValue","internals","missing","length","setRequiredValidity","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","restoreStringFormState","setFocus","trim","Number","isFinite","max","undefined","min","renderNumericStepper","incrementDisabled","decrementDisabled","h","class","tabIndex","onClick","name","color","render","inputId","filled","dirty","showClear","showError","errorMessage","textVariant","CONTROL_TEXT_VARIANT","iconSize","numeric","describedBy","ariaDescribedby","filter","join","Host","key","controlWidthClass","icon","ref","element","id","placeholder","step","autoComplete","replace","ariaLabelledby","onInput","onFocus","onBlur","variant","rounded","onDsClick","as","textId","role"],"sources":["src/wc/components/Input/Input.css?tag=ds-input&encapsulation=scoped","src/wc/components/Input/Input.tsx"],"sourcesContent":["@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n@import '../../utils/forced-colors.css';\n\n:host(.input-host) {\n display: inline-flex;\n --ds-input-fg: var(--color-foreground-primary);\n --ds-input-placeholder: var(--color-foreground-secondary);\n --ds-input-placeholder-active: var(--color-foreground-quaternary);\n --ds-input-adornment-fg: var(--color-foreground-secondary);\n --ds-input-border: var(--color-border-secondary);\n --ds-input-stepper-fg: var(--color-foreground-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n width: 100%;\n}\n\n.input-control {\n overflow: hidden;\n background: transparent;\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n --ds-interaction-border-width: var(--dimension-stroke-width-018);\n --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control--bordered:focus-within:not(.input-control--error) {\n --ds-interaction-border-width: var(--dimension-stroke-width-018);\n --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n background: transparent;\n}\n\n.native-input {\n position: relative;\n z-index: 2;\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n background: transparent;\n border: none;\n border-radius: inherit;\n outline: none;\n color: var(--ds-input-fg);\n font-family: inherit;\n text-overflow: ellipsis;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.native-input--align-start {\n text-align: start;\n}\n\n.native-input--align-end {\n text-align: end;\n}\n\n/* Replace engine-specific number arrows with one density-aware inset stepper. */\n.native-input[type='number'] {\n -moz-appearance: textfield;\n}\n\n.native-input[type='number']::-webkit-inner-spin-button,\n.native-input[type='number']::-webkit-outer-spin-button {\n margin: 0;\n -webkit-appearance: none;\n}\n\n.input-control--number.input-control--align-start {\n padding-inline-end: var(--dimension-space-025);\n}\n\n.input-control--number.input-control--align-end {\n padding-inline-start: var(--dimension-space-025);\n}\n\n.input-control__number-stepper {\n position: relative;\n z-index: 2;\n display: grid;\n grid-template-rows: repeat(2, minmax(0, 1fr));\n flex: 0 0 var(--ds-control-icon);\n width: var(--ds-control-icon);\n height: calc(var(--ds-control-height) - var(--dimension-space-050));\n overflow: hidden;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n color: var(--ds-input-stepper-fg);\n}\n\n.input-control__number-step {\n all: unset;\n position: relative;\n z-index: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n color: inherit;\n cursor: default;\n}\n\n.input-control__number-step--increment {\n border-radius: var(--ds-control-radius, var(--dimension-radius-025))\n var(--ds-control-radius, var(--dimension-radius-025)) 0 0;\n}\n\n.input-control__number-step--decrement {\n border-radius: 0 0 var(--ds-control-radius, var(--dimension-radius-025))\n var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.input-control__number-step:disabled {\n color: var(--color-foreground-quaternary);\n}\n\n.input-control__number-step-icon {\n flex-shrink: 0;\n}\n\n.native-input:disabled {\n cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n cursor: default;\n}\n\n.native-input::placeholder {\n color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n display: none;\n}\n\n.input-control__prefix,\n.input-control__suffix {\n position: relative;\n z-index: 2;\n color: var(--ds-input-adornment-fg);\n}\n\n.input-control__suffix--empty {\n display: none;\n}\n\n/* Keep this more specific than ButtonUnfilled's host-level hug alignment so\n component stylesheet hydration order cannot move the nested action. */\n.input-control > .input-control__clear {\n position: relative;\n z-index: 2;\n flex-shrink: 0;\n align-self: center;\n}\n\n.input-control.ds-control--lg:has(.input-control__clear),\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n padding-right: 0;\n}\n\n.error-text {\n width: 100%;\n}\n\n@media (forced-colors: active) {\n .input-control__number-step:disabled {\n color: var(--ds-forced-color-disabled);\n }\n\n .input-control--bordered:focus-within:not(.input-control--error)::after {\n outline-color: var(--ds-forced-color-selected);\n }\n\n .input-control--error::after {\n outline-style: dashed;\n }\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Method, Watch, h, Host } from '@stencil/core';\nimport {\n controlWidthClass,\n CONTROL_TEXT_VARIANT,\n DEFAULT_REQUIRED_MESSAGE,\n restoreStringFormState,\n setFormControlValue,\n setRequiredValidity,\n type ControlWidth,\n} from '../../utils';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password' | 'number';\nexport type InputSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type InputWidth = ControlWidth;\nexport type InputTextAlign = 'start' | 'end';\n\nconst ICON_SIZE: Record<InputSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n lg: 'lg',\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\nconst CLEAR_BUTTON_SIZE: Record<InputSize, 'md' | 'sm' | 'xs'> = {\n lg: 'md',\n md: 'sm',\n sm: 'xs',\n xs: 'xs',\n};\n\nlet idCounter = 0;\n\n@Component({\n tag: 'ds-input',\n styleUrl: 'Input.css',\n scoped: true,\n formAssociated: true,\n})\nexport class Input {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private generatedId = `ds-input-${++idCounter}`;\n private errorId = `${this.generatedId}-error`;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Keeps the value focusable and submittable while preventing edits. */\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n @Prop() clearLabel: string = 'Clear';\n @Prop() placeholder: string | undefined;\n @Prop() type: InputType = 'text';\n /** Minimum accepted value when type is number. */\n @Prop() min: number | undefined;\n /** Maximum accepted value when type is number. */\n @Prop() max: number | undefined;\n /** Numeric increment used by native stepping and constraint validation. */\n @Prop() step: number | undefined;\n /** Align the editable value; number steppers follow the same inline edge. */\n @Prop() textAlign: InputTextAlign = 'start';\n /** Native browser autofill hint. */\n @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n /** Preferred virtual keyboard without changing the value semantics. */\n @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n /** Preferred virtual-keyboard action label. */\n @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n /** Control density. */\n @Prop() size: InputSize = 'md';\n /** Width fit — fill the parent (default) or hug the available content. */\n @Prop() width: InputWidth = 'fill';\n /** Show the standard inset border, including focused and invalid strokes. */\n @Prop() hasBorder: boolean = true;\n /** Optional leading icon name. */\n @Prop() icon: string | undefined;\n @Prop() isInactive: boolean = false;\n @Prop() autoFocus: boolean = false;\n @Prop() error: boolean = false;\n @Prop() errorMessage: string | undefined;\n /** Associates the internal input with an external <label>. */\n @Prop() inputId: string | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n @Event() dsClear!: EventEmitter<void>;\n\n private initialValue = '';\n private inputEl?: HTMLInputElement;\n @State() private formDisabled = false;\n @State() private hasSuffix = false;\n @State() private focused = false;\n @State() private touched = false;\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n this.syncFormValue();\n }\n\n componentDidRender() {\n const hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\n }\n\n @Watch('value')\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('required')\n syncFormValue() {\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n setFormControlValue(this.internals, this.value, { inactive });\n const missing = this.required && !inactive && this.value.length === 0;\n setRequiredValidity(this.internals, missing, this.requiredMessage);\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.value = restoreStringFormState(state);\n }\n\n @Method()\n async setFocus() {\n this.inputEl?.focus();\n }\n\n private handleInput = (e: Event) => {\n this.value = (e.target as HTMLInputElement).value;\n this.dsChange.emit(this.value);\n };\n\n private handleFocus = () => {\n this.focused = true;\n };\n\n private handleBlur = () => {\n this.focused = false;\n this.touched = true;\n };\n\n private handleClear = () => {\n this.value = '';\n this.dsChange.emit('');\n this.dsClear.emit();\n this.inputEl?.focus();\n };\n\n private numericStepDisabled(direction: 1 | -1): boolean {\n if (this.value.trim() === '') return false;\n const value = Number(this.value);\n if (!Number.isFinite(value)) return false;\n if (direction > 0 && this.max !== undefined) return value >= this.max;\n if (direction < 0 && this.min !== undefined) return value <= this.min;\n return false;\n }\n\n private handleNumericStep = (direction: 1 | -1) => {\n const input = this.inputEl;\n if (!input || input.disabled || input.readOnly || this.numericStepDisabled(direction)) return;\n\n const previous = input.value;\n if (direction > 0) input.stepUp();\n else input.stepDown();\n input.focus({ preventScroll: true });\n if (input.value === previous) return;\n\n this.value = input.value;\n this.dsChange.emit(this.value);\n };\n\n private renderNumericStepper(inactive: boolean) {\n const incrementDisabled = inactive || this.readOnly || this.numericStepDisabled(1);\n const decrementDisabled = inactive || this.readOnly || this.numericStepDisabled(-1);\n\n return (\n <span class=\"input-control__number-stepper\">\n <button\n type=\"button\"\n class=\"input-control__number-step input-control__number-step--increment ds-focus-ring-inset ds-interaction-fill\"\n disabled={incrementDisabled}\n tabIndex={-1}\n aria-hidden=\"true\"\n onClick={() => this.handleNumericStep(1)}\n >\n <ds-icon\n class=\"input-control__number-step-icon ds-interaction-fill__content\"\n name=\"ChevronUp\"\n size=\"xs\"\n color=\"inherit\"\n />\n </button>\n <button\n type=\"button\"\n class=\"input-control__number-step input-control__number-step--decrement ds-focus-ring-inset ds-interaction-fill\"\n disabled={decrementDisabled}\n tabIndex={-1}\n aria-hidden=\"true\"\n onClick={() => this.handleNumericStep(-1)}\n >\n <ds-icon\n class=\"input-control__number-step-icon ds-interaction-fill__content\"\n name=\"ChevronDown\"\n size=\"xs\"\n color=\"inherit\"\n />\n </button>\n </span>\n );\n }\n\n render() {\n const inputId = this.inputId ?? this.generatedId;\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n const filled = this.value.length > 0;\n const dirty = this.value !== this.initialValue;\n const showClear = this.type === 'search' && filled && !inactive && !this.readOnly;\n const showError = this.error && Boolean(this.errorMessage);\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n const numeric = this.type === 'number';\n\n const describedBy = [\n this.ariaDescribedby,\n showError ? this.errorId : undefined,\n ].filter(Boolean).join(' ') || undefined;\n\n return (\n <Host\n class={{\n 'input-host': true,\n 'ds-field-stack': true,\n 'ds-control-inactive': inactive,\n [`ds-control--${this.size}`]: true,\n ...controlWidthClass(this.width),\n }}\n data-disabled={inactive ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-required={this.required ? '' : undefined}\n data-invalid={this.error ? '' : undefined}\n data-filled={filled ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n >\n <div\n class={{\n 'input-control': true,\n 'input-control--number': numeric,\n 'input-control--align-start': this.textAlign === 'start',\n 'input-control--align-end': this.textAlign === 'end',\n 'ds-control-frame': true,\n 'input-control--bordered': this.hasBorder,\n 'input-control--error': this.hasBorder && this.error,\n 'ds-interaction-fill': true,\n [`ds-control--${this.size}`]: true,\n }}\n >\n {numeric && this.textAlign === 'end' && this.renderNumericStepper(inactive)}\n {this.icon && (\n <span class=\"input-control__prefix ds-control-icon-box ds-interaction-fill__content\" aria-hidden=\"true\">\n <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n </span>\n )}\n <input\n ref={element => {\n this.inputEl = element;\n }}\n type={this.type}\n id={inputId}\n value={this.value}\n placeholder={this.placeholder}\n min={numeric ? this.min : undefined}\n max={numeric ? this.max : undefined}\n step={numeric ? this.step : undefined}\n disabled={inactive}\n readOnly={this.readOnly}\n required={this.required}\n autoFocus={this.autoFocus}\n autoComplete={this.autoComplete}\n inputMode={this.inputMode || undefined}\n enterKeyHint={this.enterKeyHint || undefined}\n class={`native-input native-input--align-${this.textAlign} ds-control-label-box ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-describedby={describedBy}\n aria-invalid={this.error ? 'true' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n <span class={{ 'input-control__suffix': true, 'ds-control-icon-box': true, 'input-control__suffix--empty': !this.hasSuffix }}>\n <slot name=\"suffix\" />\n </span>\n {showClear && (\n <ds-button-unfilled\n class=\"input-control__clear\"\n variant=\"icon\"\n size={CLEAR_BUTTON_SIZE[this.size]}\n icon=\"CrossCircle\"\n hasBorder={false}\n rounded\n ariaLabel={this.clearLabel}\n onDsClick={this.handleClear}\n />\n )}\n {numeric && this.textAlign === 'start' && this.renderNumericStepper(inactive)}\n </div>\n {showError && (\n <ds-text\n class=\"error-text\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"negative\"\n textId={this.errorId}\n role=\"alert\"\n >\n {this.errorMessage}\n </ds-text>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["deriveBarNavValueFromUrl","path","basePath","tabs","value","hideTabs","startsWith","remainder","slice","length","seg","split","selectableTabs","getSelectableTabs","id","tab","find","t","shouldResyncBarNavProps","resolvedTabs","tabsToMenuSections","selectedId","sections","batch","item","isTabDivider","push","items","label","dot","isSelected","isInactive","tabsToOverflowMenuSections","trimLeadingDividers","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","visibleTabCountForWidth","itemWidths","availableWidth","overflowTriggerWidth","itemGap","listExtraWidth","fullWidth","widthForItemCount","availableForTabs","Math","max","count","i","width","trimTrailingDividers","end","start","itemsWidth","reduce","sum","CHROME_TRANSITION_START","CHROME_TRANSITION_END","ChromeTransitionDepth","constructor","this","depth","enter","exit","isActive","ChromeTransitionGate","active","createRafCoalescer","onFrame","rafId","schedule","requestAnimationFrame","cancel","cancelAnimationFrame","readChromeTransitionSource","event","detail","source","readChromeTransitionPhase","phase","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","registerHost","navStyle","currentUrl","moreTabsLabel","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","menuTriggerActive","tabLayoutCommitted","visibleTabs","overflowTabs","menuInitialFocusVisible","overflowRovingFocused","focusedTabId","headerEl","triggerEl","menuEl","visibleTabListEl","probeTabListEl","resizeObserver","intrinsicWidthRetryCount","tabLayoutPendingFrames","panelNavTransition","panelToolsTransition","overflowCoalescer","updateTabsCollapsed","chromeTransitionShell","committedSection","pendingSection","onChromeTransitionStart","onChromeTransitionEnd","scheduleOverflowCheck","handleOverflowFocus","handleOverflowBlur","effectiveValue","renderedSelectableTabs","hasOverflowTabs","syncFocusedTabId","preferred","some","first","digestTabsConfig","map","join","resetTabOverflowLayout","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","bindChromeTransitionListeners","componentDidRender","chromeOverflowPaused","syncMenuAnchor","disconnectedCallback","disconnect","unbindChromeTransitionListeners","shell","el","closest","addEventListener","removeEventListener","syncValueFromUrl","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","horizontalPadding","parseFloat","paddingLeft","paddingRight","clientWidth","getTabsIntrinsicWidth","scrollWidth","getHeaderGap","style","columnGap","gap","getOverflowTriggerReserveWidth","getBoundingClientRect","getProbeTabMetrics","tabList","children","Array","from","child","childrenWidth","gapWidth","setOverflowTabLayout","nextCollapsed","visibleChanged","overflowChanged","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","forceTabLayoutCommit","fallbackCollapsed","metrics","intrinsicWidth","TAB_LAYOUT_COMMIT_MAX_FRAMES","shouldCollapse","OVERFLOW_HYSTERESIS_PX","visibleCount","anchor","handleMenuSelect","e","selectTab","String","handleMenuClose","handleMenuAfterClose","incomingTabs","nextBasePath","sectionChanged","tabsConfigChanged","dsTabChange","emit","querySelector","focus","preventScroll","focusVisibleTab","focusLastVisibleTab","last","reverse","findEnabledVisibleTab","step","index","handleTabKeyDown","targetId","target","getAttribute","focusedId","key","focused","preventDefault","currentIndex","findIndex","nextIndex","setFocus","reversedIndex","toggleTabMenu","options","minWidth","focusVisible","handleTriggerKeyDown","renderTabList","probe","h","role","class","heading","ref","next","onKeyDown","onFocusin","type","panelId","disabled","tabIndex","onClick","onFocus","as","variant","emphasis","color","hasRing","render","sectionReady","hasTabs","tabGroupKey","renderedTabs","Host","inert","lineTruncation","wrap","icon","activeFill","hasBorder","focusTabIndex","haspopup","expanded","onDsClick","onFocusout","side","align","sideOffset","initialFocusVisible","onDsSelect","onDsClose","onDsAfterClose"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/shell/chrome-transition.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["import { getSelectableTabs } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\n\nexport interface BarNavUrlState {\n /** Tab id derived from the URL, or empty when none applies. */\n value: string;\n /** When true, tabs should be hidden (e.g. non-tab child routes like detail pages). */\n hideTabs: boolean;\n}\n\n/** Derive BarNav tab selection from `currentUrl` relative to `basePath`.\n * Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */\nexport function deriveBarNavValueFromUrl(\n path: string,\n basePath: string,\n tabs: BarNavTab[],\n): BarNavUrlState {\n if (!path || !basePath) {\n return { value: '', hideTabs: false };\n }\n\n if (path !== basePath && !path.startsWith(`${basePath}/`)) {\n return { value: '', hideTabs: false };\n }\n\n const remainder = path.slice(basePath.length);\n const seg = remainder.startsWith('/') ? remainder.slice(1).split('/')[0] : '';\n const selectableTabs = getSelectableTabs(tabs);\n\n if (!seg) {\n return { value: selectableTabs[0]?.id ?? '', hideTabs: false };\n }\n\n const tab = selectableTabs.find(t => t.id === seg);\n if (tab) {\n return { value: tab.id, hideTabs: false };\n }\n\n return { value: '', hideTabs: true };\n}\n\n/** True when host array props have data but resolved internal state is still empty. */\nexport function shouldResyncBarNavProps(\n resolvedTabs: BarNavTab[],\n tabs: BarNavTab[],\n): boolean {\n return resolvedTabs.length === 0 && (tabs?.length ?? 0) > 0;\n}\n","import type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n const sections: MenuSection[] = [];\n let batch: MenuItemData[] = [];\n\n for (const item of tabs) {\n if (isTabDivider(item)) {\n if (batch.length > 0) {\n sections.push({ items: batch });\n batch = [];\n }\n continue;\n }\n\n batch.push({\n label: item.label,\n value: item.id,\n dot: item.dot,\n isSelected: item.id === selectedId,\n isInactive: item.isInactive,\n });\n }\n\n if (batch.length > 0) {\n sections.push({ items: batch });\n }\n\n return sections;\n}\n\nexport function tabsToOverflowMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n return tabsToMenuSections(trimLeadingDividers(tabs), selectedId);\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n const selectable = getSelectableTabs(tabs);\n return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n tabListScrollWidth: number,\n containerClientWidth: number,\n collapsed: boolean,\n hysteresis = 2,\n): boolean {\n const diff = tabListScrollWidth - containerClientWidth;\n if (collapsed) {\n return diff > -hysteresis;\n }\n return diff > hysteresis;\n}\n\nexport function visibleTabCountForWidth(\n itemWidths: number[],\n availableWidth: number,\n overflowTriggerWidth: number,\n itemGap: number,\n listExtraWidth: number,\n): number {\n if (itemWidths.length === 0 || availableWidth <= 0) return 0;\n\n const fullWidth = widthForItemCount(itemWidths, itemWidths.length, itemGap, listExtraWidth);\n if (fullWidth <= availableWidth) return itemWidths.length;\n\n const availableForTabs = Math.max(0, availableWidth - overflowTriggerWidth);\n let count = 0;\n\n for (let i = 1; i <= itemWidths.length; i++) {\n const width = widthForItemCount(itemWidths, i, itemGap, listExtraWidth);\n if (width > availableForTabs) break;\n count = i;\n }\n\n return count;\n}\n\nexport function trimTrailingDividers(tabs: TabItem[]): TabItem[] {\n let end = tabs.length;\n while (end > 0 && isTabDivider(tabs[end - 1])) {\n end -= 1;\n }\n return tabs.slice(0, end);\n}\n\nfunction trimLeadingDividers(tabs: TabItem[]): TabItem[] {\n let start = 0;\n while (start < tabs.length && isTabDivider(tabs[start])) {\n start += 1;\n }\n return tabs.slice(start);\n}\n\nfunction widthForItemCount(\n itemWidths: number[],\n count: number,\n itemGap: number,\n listExtraWidth: number,\n): number {\n if (count <= 0) return 0;\n const itemsWidth = itemWidths.slice(0, count).reduce((sum, width) => sum + width, 0);\n return listExtraWidth + itemsWidth + itemGap * Math.max(0, count - 1);\n}\n","/** Bubbling/composed events — `ds-shell-app` and `ds-bar-nav` coordinate during width motion. */\n\nexport const CHROME_TRANSITION_START = 'dsChromeTransitionStart';\nexport const CHROME_TRANSITION_END = 'dsChromeTransitionEnd';\n\nexport type ChromeTransitionSource = 'panel-nav' | 'panel-tools';\n\nexport interface ChromeTransitionDetail {\n source: ChromeTransitionSource;\n /** Panel-tools drawer motion direction; omitted for panel-nav. */\n phase?: 'opening' | 'closing';\n}\n\n/** Reference-counted gate — used while panel-nav width is transitioning. */\nexport class ChromeTransitionDepth {\n private depth = 0;\n\n enter(): void {\n this.depth += 1;\n }\n\n exit(): void {\n this.depth = Math.max(0, this.depth - 1);\n }\n\n get isActive(): boolean {\n return this.depth > 0;\n }\n}\n\n/** Idempotent gate for one physical chrome surface.\n * Duplicate start notifications still require only one matching end. */\nexport class ChromeTransitionGate {\n private active = false;\n\n enter(): void {\n this.active = true;\n }\n\n exit(): void {\n this.active = false;\n }\n\n get isActive(): boolean {\n return this.active;\n }\n}\n\nexport interface RafCoalescer {\n schedule(): void;\n cancel(): void;\n}\n\n/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */\nexport function createRafCoalescer(onFrame: () => void): RafCoalescer {\n let rafId = 0;\n return {\n schedule() {\n if (rafId !== 0) return;\n rafId = requestAnimationFrame(() => {\n rafId = 0;\n onFrame();\n });\n },\n cancel() {\n if (rafId !== 0) {\n cancelAnimationFrame(rafId);\n rafId = 0;\n }\n },\n };\n}\n\nexport function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined {\n return (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n}\n\nexport function readChromeTransitionPhase(event: Event): ChromeTransitionDetail['phase'] {\n return (event as CustomEvent<ChromeTransitionDetail>).detail?.phase;\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n display: block;\n}\n\n.bar-nav {\n position: relative;\n height: var(--dimension-size-600);\n border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n background-color: var(--_bar-nav-bg);\n color: var(--_bar-nav-fg-primary);\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition:\n background-color var(--effect-motion-short-3),\n border-color var(--effect-motion-short-3),\n color var(--effect-motion-short-3);\n isolation: isolate;\n /* Default chrome — app surfaces */\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash) — bar is a transparent frame. */\n:host-context(ds-shell-app:not([gradient-preset='none'])) .bar-nav,\n:host-context(ds-shell-app.shell-app--paper-texture) .bar-nav {\n background-color: transparent;\n}\n\n.bar-nav > :not(.bar-nav__tabs-probe) {\n position: relative;\n z-index: 3;\n}\n\n/* Overflow — keep fitting tabs visible and pin the overflow trigger to the far edge. */\n.bar-nav--tabs-collapsed {\n display: flex;\n gap: var(--dimension-space-100);\n align-items: center;\n}\n\n/* Expanded tabs — consume full header width */\n.bar-nav__left {\n position: relative;\n flex: 1 1 0%;\n min-width: 0;\n width: 0;\n display: flex;\n align-items: center;\n}\n\n.bar-nav__tabs-visible {\n flex: 1;\n min-width: 0;\n width: 100%;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n position: absolute;\n left: 0;\n top: 0;\n visibility: hidden;\n pointer-events: none;\n overflow: visible;\n width: max-content;\n max-width: none;\n z-index: -1;\n}\n\n.bar-nav__tabs-probe > div {\n width: max-content;\n}\n\n.bar-nav__tab-list {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n position: relative;\n width: max-content;\n}\n\n.bar-nav__tab {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n height: var(--ds-control-height);\n min-width: var(--ds-control-height);\n padding: 0 var(--ds-control-padding-inline);\n box-sizing: border-box;\n border: none;\n border-radius: var(--ds-control-radius);\n background-color: transparent;\n color: var(--_bar-nav-fg-secondary);\n cursor: default;\n position: relative;\n flex-shrink: 0;\n -webkit-user-select: none;\n user-select: none;\n transition: color var(--effect-motion-short-2);\n}\n\n.bar-nav__tab::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--ds-control-radius);\n background: transparent;\n pointer-events: none;\n cursor: inherit;\n}\n\n@media (hover: hover) and (pointer: fine) {\n .bar-nav__tab:hover::after {\n background: var(--_bar-nav-hover);\n }\n}\n\n.bar-nav__tab:active::after {\n background: var(--_bar-nav-pressed);\n}\n\n.bar-nav__tab--selected {\n color: var(--_bar-nav-fg-primary);\n}\n\n.bar-nav__tab-label {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n}\n\n.bar-nav__tab-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--dimension-space-100);\n height: var(--ds-control-height);\n padding-block: var(--ds-control-padding-inline);\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.bar-nav__tab-divider-line {\n width: var(--dimension-stroke-width-012);\n align-self: stretch;\n background-color: var(--_bar-nav-border);\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n flex: 1;\n min-width: 0;\n height: var(--ds-control-height);\n visibility: hidden;\n pointer-events: none;\n}\n\n/* Overflow trigger — compact icon button aligned to the right edge. */\n.bar-nav__overflow-trigger {\n margin-left: auto;\n --ds-button-unfilled-fg: var(--_bar-nav-fg-secondary);\n --ds-button-unfilled-fg-active: var(--_bar-nav-fg-primary);\n --ds-interaction-hover: var(--_bar-nav-hover);\n --ds-interaction-pressed: var(--_bar-nav-pressed);\n --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n name shares the tab label's type token, color, height and horizontal inset.\n Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px).\n Color comes from ds-text color=\"primary\"; beat Text's inline-box display. */\nds-text.bar-nav__heading {\n display: inline-flex;\n align-items: center;\n height: var(--ds-control-height);\n padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n -webkit-user-select: none;\n user-select: none;\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n State,\n h,\n Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { getSelectableTabs, isTabDivider, type TabItemTab } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\nimport {\n deriveBarNavValueFromUrl,\n shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n tabsOverflowContainer,\n tabsToOverflowMenuSections,\n trimTrailingDividers,\n visibleTabCountForWidth,\n} from './bar-nav-tabs-menu-utils';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionGate,\n createRafCoalescer,\n readChromeTransitionSource,\n readChromeTransitionPhase,\n} from '../../shell/chrome-transition';\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /** Style slot: `dashboard` or `settings`. Colors match for now. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n @Element() el!: HTMLElement;\n\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n @Prop() basePath: string = '';\n\n /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n @Prop() currentUrl: string = '';\n @Prop() moreTabsLabel: string = 'More tabs';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n @State() private resolvedTabs: BarNavTab[] = [];\n @State() private urlDerivedValue: string = '';\n @State() private hideTabsForDetailRoute = false;\n @State() private tabsCollapsed = false;\n @State() private menuOpen = false;\n @State() private menuTriggerActive = false;\n /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n @State() private tabLayoutCommitted = false;\n @State() private visibleTabs: BarNavTab[] = [];\n @State() private overflowTabs: BarNavTab[] = [];\n @State() private menuInitialFocusVisible = false;\n @State() private overflowRovingFocused = false;\n @State() private focusedTabId = '';\n\n private static readonly HOST_PROP_SYNC_BUDGET = 8;\n private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;\n private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n private headerEl: HTMLElement | null = null;\n private triggerEl: (HTMLElement & { setFocus?: () => Promise<void> }) | null = null;\n private menuEl: HTMLDsMenuElement | null = null;\n private visibleTabListEl: HTMLElement | null = null;\n private probeTabListEl: HTMLElement | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private intrinsicWidthRetryCount = 0;\n private tabLayoutPendingFrames = 0;\n private readonly panelNavTransition = new ChromeTransitionGate();\n private readonly panelToolsTransition = new ChromeTransitionGate();\n private readonly overflowCoalescer = createRafCoalescer(() => {\n this.updateTabsCollapsed();\n });\n private chromeTransitionShell: HTMLElement | null = null;\n /** Matches `basePath` once tabs + URL are reconciled for the active section. */\n @State() private committedSection = '';\n /** Section waiting for URL + tabs to catch up after a cross-area navigation. */\n @State() private pendingSection = '';\n\n private get effectiveValue(): string {\n if (this.currentUrl && this.basePath) {\n return this.urlDerivedValue;\n }\n return this.value;\n }\n\n private get renderedSelectableTabs(): TabItemTab[] {\n const tabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n return getSelectableTabs(tabs);\n }\n\n private get hasOverflowTabs(): boolean {\n return this.tabLayoutCommitted && this.tabsCollapsed && this.overflowTabs.length > 0;\n }\n\n private syncFocusedTabId(preferred: string, tabs: TabItemTab[]) {\n if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {\n this.focusedTabId = preferred;\n return;\n }\n const first = tabs.find(tab => !tab.isInactive);\n this.focusedTabId = first?.id ?? '';\n }\n\n private digestTabsConfig(tabs: BarNavTab[]): string {\n return tabs.map(t => (isTabDivider(t) ? '|' : t.id)).join(',');\n }\n\n private resetTabOverflowLayout() {\n this.tabLayoutCommitted = false;\n this.tabsCollapsed = false;\n this.menuOpen = false;\n this.menuTriggerActive = false;\n this.menuInitialFocusVisible = false;\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.visibleTabs = [];\n this.overflowTabs = [];\n }\n\n @Watch('tabs')\n @Watch('currentUrl')\n @Watch('basePath')\n onHostPropsChange() {\n this.applyHostProps();\n }\n\n @Watch('value')\n @Watch('urlDerivedValue')\n onSelectionChange() {\n this.syncFocusedTabId(this.effectiveValue, this.renderedSelectableTabs);\n this.syncMenuSections();\n this.scheduleOverflowCheck();\n }\n\n @Watch('menuOpen')\n onMenuOpenChange(open: boolean) {\n if (this.menuEl) {\n this.menuEl.open = open;\n }\n }\n\n @Watch('tabsCollapsed')\n onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n if (!collapsed) {\n this.menuOpen = false;\n this.menuTriggerActive = false;\n this.menuInitialFocusVisible = false;\n this.menuEl = null;\n }\n this.scheduleOverflowCheck();\n if (collapsed) {\n requestAnimationFrame(() => {\n this.scheduleOverflowCheck();\n });\n }\n if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n queueMicrotask(() => this.focusVisibleSelectedTab());\n }\n\n componentWillLoad() {\n this.applyHostProps();\n this.syncFocusedTabId(this.effectiveValue, getSelectableTabs(this.resolvedTabs));\n }\n\n componentDidLoad() {\n this.syncHostPropsIfNeeded();\n this.scheduleDeferredHostPropSync();\n this.setupOverflowObserver();\n this.bindChromeTransitionListeners();\n this.scheduleOverflowCheck();\n }\n\n componentDidRender() {\n if (this.chromeOverflowPaused()) {\n this.syncMenuAnchor();\n return;\n }\n this.scheduleOverflowCheck();\n this.syncMenuAnchor();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.overflowCoalescer.cancel();\n this.unbindChromeTransitionListeners();\n }\n\n private bindChromeTransitionListeners() {\n const shell = this.el.closest<HTMLElement>('ds-shell-app');\n if (!shell) return;\n this.chromeTransitionShell = shell;\n shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n private unbindChromeTransitionListeners() {\n if (!this.chromeTransitionShell) return;\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_START,\n this.onChromeTransitionStart,\n );\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_END,\n this.onChromeTransitionEnd,\n );\n this.chromeTransitionShell = null;\n }\n\n private onChromeTransitionStart = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.enter();\n return;\n }\n if (source === 'panel-tools') {\n const phase = readChromeTransitionPhase(event) ?? 'opening';\n if (phase === 'closing') {\n this.panelToolsTransition.enter();\n }\n }\n };\n\n private chromeOverflowPaused(): boolean {\n return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;\n }\n\n private onChromeTransitionEnd = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.exit();\n if (!this.panelNavTransition.isActive) {\n this.scheduleOverflowCheck();\n }\n return;\n }\n if (source === 'panel-tools') {\n this.panelToolsTransition.exit();\n this.scheduleOverflowCheck();\n }\n };\n\n /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n private syncHostPropsIfNeeded() {\n if (shouldResyncBarNavProps(this.resolvedTabs, this.tabs)) {\n this.applyHostProps();\n } else if (this.currentUrl && this.basePath) {\n this.syncValueFromUrl();\n }\n }\n\n /** Poll across animation frames — host props may land without triggering @Watch. */\n private scheduleDeferredHostPropSync() {\n let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n const tick = () => {\n this.syncHostPropsIfNeeded();\n if (--remaining > 0) {\n requestAnimationFrame(tick);\n }\n };\n queueMicrotask(tick);\n }\n\n private setupOverflowObserver() {\n if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n this.resizeObserver?.disconnect();\n this.resizeObserver = new ResizeObserver(() => {\n if (this.chromeOverflowPaused()) return;\n this.scheduleOverflowCheck();\n });\n this.resizeObserver.observe(this.headerEl);\n }\n\n private scheduleOverflowCheck() {\n if (this.chromeOverflowPaused()) return;\n this.overflowCoalescer.schedule();\n }\n\n /** Width available for the tab row or collapsed trigger. */\n private getLeftZoneAvailableWidth(): number {\n if (!this.headerEl) return 0;\n\n const headerStyle = getComputedStyle(this.headerEl);\n const horizontalPadding =\n (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n\n return Math.max(0, this.headerEl.clientWidth - horizontalPadding);\n }\n\n private getTabsIntrinsicWidth(): number {\n return this.probeTabListEl?.scrollWidth ?? 0;\n }\n\n private getHeaderGap(): number {\n if (!this.headerEl) return 0;\n const style = getComputedStyle(this.headerEl);\n return parseFloat(style.columnGap || style.gap) || 0;\n }\n\n private getOverflowTriggerReserveWidth(): number {\n if (!this.triggerEl) {\n return 40;\n }\n return this.triggerEl.getBoundingClientRect().width + this.getHeaderGap();\n }\n\n private getProbeTabMetrics():\n | {\n itemWidths: number[];\n itemGap: number;\n listExtraWidth: number;\n }\n | null {\n const tabList = this.probeTabListEl;\n if (!tabList) return null;\n\n const children = Array.from(tabList.children) as HTMLElement[];\n const itemWidths = children.map(child => child.getBoundingClientRect().width);\n if (itemWidths.length === 0 || itemWidths.some(width => width === 0)) return null;\n\n const style = getComputedStyle(tabList);\n const itemGap = parseFloat(style.columnGap || style.gap) || 0;\n const childrenWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n const gapWidth = itemGap * Math.max(0, itemWidths.length - 1);\n const listExtraWidth = Math.max(0, tabList.scrollWidth - childrenWidth - gapWidth);\n\n return { itemWidths, itemGap, listExtraWidth };\n }\n\n private setOverflowTabLayout(visibleTabs: BarNavTab[], overflowTabs: BarNavTab[]) {\n const nextCollapsed = overflowTabs.length > 0;\n const visibleChanged =\n this.digestTabsConfig(visibleTabs) !== this.digestTabsConfig(this.visibleTabs);\n const overflowChanged =\n this.digestTabsConfig(overflowTabs) !== this.digestTabsConfig(this.overflowTabs);\n\n if (visibleChanged) {\n this.visibleTabs = visibleTabs;\n }\n if (overflowChanged) {\n this.overflowTabs = overflowTabs;\n }\n if (nextCollapsed !== this.tabsCollapsed) {\n this.tabsCollapsed = nextCollapsed;\n if (!nextCollapsed) {\n this.menuOpen = false;\n this.menuTriggerActive = false;\n }\n }\n this.syncFocusedTabId(\n this.effectiveValue,\n getSelectableTabs(nextCollapsed ? visibleTabs : this.resolvedTabs),\n );\n }\n\n private scheduleIntrinsicWidthRetry() {\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n this.intrinsicWidthRetryCount++;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n }\n\n private forceTabLayoutCommit(fallbackCollapsed: boolean) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.setOverflowTabLayout(\n fallbackCollapsed ? [] : this.resolvedTabs,\n fallbackCollapsed ? this.resolvedTabs : [],\n );\n this.tabLayoutCommitted = true;\n }\n\n private updateTabsCollapsed() {\n if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n if (this.tabsCollapsed) {\n this.setOverflowTabLayout([], []);\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.tabLayoutCommitted = true;\n return;\n }\n\n const metrics = this.getProbeTabMetrics();\n const intrinsicWidth = this.getTabsIntrinsicWidth();\n if (!metrics || intrinsicWidth === 0) {\n this.tabLayoutPendingFrames += 1;\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {\n this.forceTabLayoutCommit(false);\n } else if (this.tabLayoutPendingFrames >= BarNav.TAB_LAYOUT_COMMIT_MAX_FRAMES) {\n this.forceTabLayoutCommit(false);\n } else {\n this.scheduleIntrinsicWidthRetry();\n }\n return;\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n\n const shouldCollapse = tabsOverflowContainer(\n intrinsicWidth,\n this.getLeftZoneAvailableWidth(),\n this.tabsCollapsed,\n BarNav.OVERFLOW_HYSTERESIS_PX,\n );\n\n if (!shouldCollapse) {\n this.setOverflowTabLayout(this.resolvedTabs, []);\n this.tabLayoutCommitted = true;\n return;\n }\n\n const visibleCount = visibleTabCountForWidth(\n metrics.itemWidths,\n this.getLeftZoneAvailableWidth(),\n this.getOverflowTriggerReserveWidth(),\n metrics.itemGap,\n metrics.listExtraWidth,\n );\n const visibleTabs = trimTrailingDividers(this.resolvedTabs.slice(0, visibleCount));\n const overflowTabs = this.resolvedTabs.slice(visibleTabs.length);\n this.setOverflowTabLayout(visibleTabs, overflowTabs);\n this.tabLayoutCommitted = true;\n }\n\n private syncMenuAnchor() {\n if (!this.menuEl || !this.triggerEl || !this.hasOverflowTabs) return;\n this.menuEl.anchor = this.triggerEl;\n this.syncMenuSections();\n }\n\n private handleMenuSelect(e: Event) {\n const detail = (e as CustomEvent<MenuItemData>).detail;\n if (detail?.value !== undefined) {\n this.selectTab(String(detail.value));\n }\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n }\n\n private handleMenuClose() {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n }\n\n private handleMenuAfterClose() {\n if (!this.menuOpen) this.menuTriggerActive = false;\n }\n\n /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */\n private incomingTabs(): BarNavTab[] {\n return this.tabs ?? [];\n }\n\n private applyHostProps() {\n const nextBasePath = this.basePath;\n const sectionChanged =\n nextBasePath !== '' &&\n this.committedSection !== '' &&\n nextBasePath !== this.committedSection;\n\n if (sectionChanged) {\n this.urlDerivedValue = '';\n this.committedSection = '';\n this.pendingSection = nextBasePath;\n this.resolvedTabs = [];\n this.resetTabOverflowLayout();\n return;\n }\n\n if (this.pendingSection) {\n if (!nextBasePath || nextBasePath !== this.pendingSection) {\n return;\n }\n if (!this.currentUrl.startsWith(this.pendingSection)) {\n return;\n }\n const tabs = this.incomingTabs();\n if (tabs.length === 0) {\n return;\n }\n this.pendingSection = '';\n }\n\n const tabs = this.incomingTabs();\n const tabsConfigChanged =\n this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);\n\n this.resolvedTabs = tabs;\n this.syncValueFromUrl();\n this.committedSection = nextBasePath;\n if (tabsConfigChanged) {\n this.resetTabOverflowLayout();\n }\n this.scheduleOverflowCheck();\n }\n\n private syncMenuSections() {\n if (!this.menuEl) return;\n this.menuEl.sections = tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue);\n }\n\n private syncValueFromUrl() {\n const tabs = this.incomingTabs();\n\n if (!this.currentUrl || !this.basePath) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n if (!this.currentUrl.startsWith(this.basePath)) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n const { value, hideTabs } = deriveBarNavValueFromUrl(\n this.currentUrl,\n this.basePath,\n tabs,\n );\n this.urlDerivedValue = value;\n this.hideTabsForDetailRoute = hideTabs;\n }\n\n private selectTab(id: string) {\n this.value = id;\n this.dsTabChange.emit(id);\n }\n\n /** Move focus to the selected tab in the visible tab group (after expand). */\n private focusVisibleSelectedTab() {\n const tab = this.visibleTabListEl?.querySelector(\n `[data-tab-id=\"${this.effectiveValue}\"]`,\n ) as HTMLElement | null;\n tab?.focus({ preventScroll: true });\n }\n\n private focusVisibleTab(id: string) {\n this.focusedTabId = id;\n const tab = this.visibleTabListEl?.querySelector(\n `[data-tab-id=\"${id}\"]`,\n ) as HTMLElement | null;\n tab?.focus({ preventScroll: true });\n }\n\n private focusLastVisibleTab() {\n const last = [...this.renderedSelectableTabs].reverse().find(tab => !tab.isInactive);\n if (last) this.focusVisibleTab(last.id);\n }\n\n private findEnabledVisibleTab(from: number, step: 1 | -1): number | null {\n const tabs = this.renderedSelectableTabs;\n for (let index = from + step; index >= 0 && index < tabs.length; index += step) {\n if (!tabs[index]?.isInactive) return index;\n }\n return null;\n }\n\n private handleTabKeyDown(e: KeyboardEvent) {\n const tabs = this.renderedSelectableTabs;\n if (!tabs.length) return;\n const targetId = (e.target as HTMLElement | null)?.getAttribute('data-tab-id');\n const focusedId = targetId ?? this.focusedTabId;\n\n if (e.key === 'Enter' || e.key === ' ') {\n const focused = tabs.find(tab => tab.id === focusedId);\n if (!focused || focused.isInactive) return;\n e.preventDefault();\n this.selectTab(focused.id);\n return;\n }\n\n const currentIndex = tabs.findIndex(tab => tab.id === focusedId);\n if (currentIndex < 0) return;\n\n let nextIndex: number | null;\n if (e.key === 'ArrowRight') {\n nextIndex = this.findEnabledVisibleTab(currentIndex, 1);\n if (nextIndex === null && this.hasOverflowTabs) {\n e.preventDefault();\n this.overflowRovingFocused = true;\n void this.triggerEl?.setFocus?.();\n return;\n }\n } else if (e.key === 'ArrowLeft') {\n nextIndex = this.findEnabledVisibleTab(currentIndex, -1);\n } else if (e.key === 'Home') {\n nextIndex = tabs.findIndex(tab => !tab.isInactive);\n } else if (e.key === 'End') {\n const reversedIndex = [...tabs].reverse().findIndex(tab => !tab.isInactive);\n nextIndex = reversedIndex < 0 ? null : tabs.length - 1 - reversedIndex;\n } else {\n return;\n }\n\n if (nextIndex === null || nextIndex < 0 || nextIndex === currentIndex) return;\n e.preventDefault();\n this.focusVisibleTab(tabs[nextIndex].id);\n }\n\n private toggleTabMenu(options?: { focusVisible?: boolean }) {\n if (this.menuOpen) {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n return;\n }\n\n if (this.menuEl && this.triggerEl) {\n this.menuEl.anchor = this.triggerEl;\n this.menuEl.minWidth = '';\n this.syncMenuSections();\n }\n\n this.menuInitialFocusVisible = options?.focusVisible ?? false;\n this.menuTriggerActive = true;\n this.menuOpen = true;\n }\n\n private handleOverflowFocus = () => {\n this.overflowRovingFocused = true;\n };\n\n private handleOverflowBlur = () => {\n this.overflowRovingFocused = false;\n };\n\n private handleTriggerKeyDown(e: KeyboardEvent) {\n if (!this.hasOverflowTabs) return;\n\n if (!this.menuOpen) {\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this.overflowRovingFocused = false;\n this.focusLastVisibleTab();\n return;\n }\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggleTabMenu({ focusVisible: true });\n }\n return;\n }\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n void this.triggerEl?.setFocus?.();\n }\n }\n\n private renderTabList(tabs: BarNavTab[], probe: boolean) {\n return (\n <div\n role=\"tablist\"\n class=\"bar-nav__tab-list\"\n aria-label={this.heading}\n ref={el => {\n if (probe) {\n const next = (el as HTMLElement) ?? null;\n if (next === this.probeTabListEl) return;\n this.probeTabListEl = next;\n if (next) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.scheduleOverflowCheck();\n }\n } else {\n this.visibleTabListEl = (el as HTMLElement) ?? null;\n }\n }}\n onKeyDown={probe ? undefined : (e: KeyboardEvent) => this.handleTabKeyDown(e)}\n onFocusin={probe ? undefined : () => {\n this.overflowRovingFocused = false;\n }}\n >\n {tabs.map((tab, index) => {\n if (isTabDivider(tab)) {\n return (\n <div class=\"bar-nav__tab-divider\" key={`divider-${index}`} aria-hidden=\"true\">\n <div class=\"bar-nav__tab-divider-line\" />\n </div>\n );\n }\n\n const isSelected = tab.id === this.effectiveValue;\n return (\n <button\n key={tab.id}\n type=\"button\"\n role=\"tab\"\n data-tab-id={tab.id}\n class={{\n 'bar-nav__tab': true,\n 'bar-nav__tab--selected': isSelected,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-inactive': !!tab.isInactive,\n }}\n aria-selected={isSelected ? 'true' : 'false'}\n aria-disabled={tab.isInactive ? 'true' : undefined}\n aria-controls={tab.panelId ?? undefined}\n disabled={tab.isInactive}\n tabIndex={\n !probe && !this.overflowRovingFocused && tab.id === this.focusedTabId\n ? 0\n : -1\n }\n onClick={() => !probe && !tab.isInactive && this.selectTab(tab.id)}\n onFocus={() => {\n if (!probe) this.focusedTabId = tab.id;\n }}\n >\n <span\n class={{\n 'bar-nav__tab-label': true,\n 'ds-control-label-box': true,\n 'ds-control-label-dot': !!tab.dot,\n 'bar-nav__tab-label--dot': !!tab.dot,\n }}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" emphasis={isSelected} color=\"inherit\">\n {tab.label}\n </ds-text>\n {tab.dot && (\n <ds-badge\n class=\"bar-nav__tab-dot ds-control-label-dot__badge\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n </button>\n );\n })}\n </div>\n );\n }\n\n render() {\n // Section gating only applies when `basePath` is set (SPA section sync).\n // Tabs without a base path must still render — otherwise a single-tab bar\n // (or any non-routed tabs) silently falls through to an empty header.\n const sectionReady =\n this.basePath === '' || this.committedSection === this.basePath;\n const hasTabs =\n sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n const tabGroupKey = this.basePath || 'no-section';\n const renderedTabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n\n return (\n <Host>\n <header\n class={{\n 'bar-nav': true,\n 'ds-control--md': true,\n 'ds-chrome-row': true,\n 'ds-chrome-space--md': true,\n 'bar-nav--dashboard': this.navStyle === 'dashboard',\n 'bar-nav--settings': this.navStyle === 'settings',\n 'bar-nav--tabs-collapsed':\n hasTabs && this.hasOverflowTabs,\n }}\n ref={el => {\n this.headerEl = el as HTMLElement;\n if (el && !this.resizeObserver) {\n this.setupOverflowObserver();\n }\n }}\n >\n {hasTabs && (\n <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n <div key={`probe-${tabGroupKey}`}>\n {this.renderTabList(this.resolvedTabs, true)}\n </div>\n </div>\n )}\n\n {hasTabs && this.tabLayoutCommitted && renderedTabs.length > 0 && (\n <div class=\"bar-nav__left\">\n <div key={`visible-${tabGroupKey}`} class=\"bar-nav__tabs-visible\">\n {this.renderTabList(renderedTabs, false)}\n </div>\n </div>\n )}\n\n {hasTabs && !this.tabLayoutCommitted && (\n <div class=\"bar-nav__tabs-pending\" aria-hidden=\"true\" />\n )}\n\n {!hasTabs && this.heading && (\n <ds-text\n class=\"bar-nav__heading\"\n lineTruncation={1}\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"primary\"\n wrap=\"nowrap\"\n >\n {this.heading}\n </ds-text>\n )}\n\n {hasTabs && this.hasOverflowTabs && (\n <ds-button-unfilled variant=\"icon\"\n class={{\n 'bar-nav__overflow-trigger': true,\n }}\n icon=\"ChevronDown\"\n activeFill={false}\n hasBorder={false}\n focusTabIndex={this.overflowRovingFocused ? 0 : -1}\n ref={(el?: HTMLDsButtonUnfilledElement) => {\n this.triggerEl = (el as (HTMLElement & { setFocus?: () => Promise<void> })) ?? null;\n }}\n haspopup=\"menu\"\n expanded={this.menuTriggerActive}\n aria-label={this.moreTabsLabel}\n onDsClick={() => this.toggleTabMenu({ focusVisible: false })}\n onFocusin={this.handleOverflowFocus}\n onFocusout={this.handleOverflowBlur}\n onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n />\n )}\n\n </header>\n\n {hasTabs && this.hasOverflowTabs && (\n <ds-menu\n ref={el => {\n this.menuEl = (el as HTMLDsMenuElement) ?? null;\n }}\n open={this.menuOpen}\n sections={tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue)}\n side=\"bottom\"\n align=\"end\"\n sideOffset=\"calc(var(--dimension-space-100) + var(--dimension-space-050))\"\n initialFocusVisible={this.menuInitialFocusVisible}\n onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n onDsClose={() => this.handleMenuClose()}\n onDsAfterClose={() => this.handleMenuAfterClose()}\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["badgeCss","SURFACE_RING","primary","secondary","faint","medium","bold","strong","translucent","inverted","media","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","hasRing","render","isDot","h","Host","style","display","String","ring","background","class","badge","gradientBackground","as","emphasis","color","label"],"sources":["src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n container-name: ds-badge-gradient;\n pointer-events: none;\n vertical-align: middle;\n\n --_badge-bg: var(--color-background-bold-brand);\n --_badge-fg: var(--color-foreground-on-bold-background-primary);\n --_badge-ring: var(--color-background-secondary);\n --_badge-ring-width: var(--dimension-stroke-width-018);\n --_badge-gradient-context: var(--ds-shell-gradient-context, flat);\n}\n\n:host(.badge--force-gradient-background) {\n --_badge-gradient-context: gradient;\n}\n\n:host(.badge--force-flat-background) {\n --_badge-gradient-context: flat;\n}\n\n.badge__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n color: var(--_badge-fg);\n background: var(--_badge-bg);\n box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n --_badge-ring-width: 0;\n}\n\n\n:host(.badge--dot) .badge__mark {\n width: var(--dimension-size-075);\n height: var(--dimension-size-075);\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n width: auto;\n min-width: var(--dimension-size-150);\n height: var(--dimension-size-150);\n padding: 0 var(--dimension-space-025);\n border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n@container ds-badge-gradient style(--_badge-gradient-context: gradient) {\n /* Match the scoped base rule's specificity; Stencil does not yet scope style-query selectors. */\n .badge__mark.badge__mark {\n position: relative;\n z-index: 0;\n box-shadow: none;\n isolation: isolate;\n }\n\n .badge__mark::before,\n .badge__mark::after {\n content: '';\n position: absolute;\n inset: calc(-1 * var(--_badge-ring-width));\n border-radius: inherit;\n box-sizing: border-box;\n padding: var(--_badge-ring-width);\n pointer-events: none;\n /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* stylelint-enable color-no-hex */\n mask-composite: exclude;\n }\n\n .badge__mark::before {\n z-index: -2;\n background-color: var(--_badge-ring);\n }\n\n .badge__mark::after {\n z-index: -1;\n background-image: var(--ds-shell-gradient-image, none);\n background-size: var(--ds-shell-gradient-size, auto);\n background-position: 0 0;\n background-repeat: no-repeat;\n background-attachment: fixed;\n opacity: var(--ds-shell-gradient-opacity, 1);\n }\n}\n\n@media (forced-colors: active) {\n .badge__mark {\n color: var(--ds-forced-color-on-selected);\n background: var(--ds-forced-color-selected);\n box-shadow: none;\n outline: var(--_badge-ring-width) solid var(--ds-forced-color-surface);\n }\n\n .badge__mark::before,\n .badge__mark::after {\n display: none;\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n | 'primary'\n | 'secondary'\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'navigation'\n | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n primary: 'var(--color-background-primary)',\n secondary: 'var(--color-background-secondary)',\n faint: 'var(--color-background-faint-neutral)',\n medium: 'var(--color-background-medium-neutral)',\n bold: 'var(--color-background-bold-neutral)',\n strong: 'var(--color-background-strong-neutral)',\n translucent: 'var(--color-translucent-translucent)',\n inverted: 'var(--color-inverted-background)',\n media: 'var(--color-media-background)',\n navigation: 'var(--color-navigation-background)',\n 'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n tag: 'ds-badge',\n styleUrl: 'Badge.css',\n scoped: true,\n})\nexport class Badge {\n /** Render as a compact counter or notification dot. */\n @Prop() variant: BadgeVariant = 'counter';\n\n /** Count shown for counter badges. Count 0 hides the badge. */\n @Prop() count: number = 0;\n\n /** Highest count shown before compacting to \"{max}+\". */\n @Prop() max: number = 9;\n\n /** Immediate backing surface matched by the ring around either variant. */\n @Prop() surface: BadgeSurface = 'primary';\n\n /** Direct ring background override for component-local surfaces. */\n @Prop() background: string | undefined;\n\n /** Show the separation ring when the badge overlaps an icon or other content. */\n @Prop() hasRing: boolean = true;\n\n /**\n * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n * `box-shadow`. Omit to inherit ShellApp context; set true or false to override.\n *\n * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n * unknown `on*` member down the event-listener path during attribute\n * reflection, calling addEventListener with a non-listener and throwing.\n */\n @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground?: boolean;\n\n /** Contextual supplemental text. Omit when the owner hides the badge from assistive technology. */\n @Prop() label: string | undefined;\n\n render() {\n const isDot = this.variant === 'dot';\n\n if (!isDot && this.count <= 0) return <Host style={{ display: 'none' }} />;\n\n const display = this.count > this.max ? `${this.max}+` : String(this.count);\n const ring = this.background ?? SURFACE_RING[this.surface];\n\n return (\n <Host\n class={{\n badge: true,\n 'badge--counter': !isDot,\n 'badge--dot': isDot,\n 'badge--no-ring': !this.hasRing,\n 'badge--force-gradient-background': this.gradientBackground === true,\n 'badge--force-flat-background': this.gradientBackground === false,\n }}\n style={{ '--_badge-ring': ring }}\n >\n <span class=\"badge__mark\" aria-hidden=\"true\">\n {!isDot && (\n <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n {display}\n </ds-text>\n )}\n </span>\n {this.label && <span class=\"badge__a11y ds-visually-hidden\">{this.label}</span>}\n </Host>\n );\n }\n}\n"],"mappings":"+FAAA,MAAMA,EAAW,IAAM,k8FCgBvB,MAAMC,EAA6C,CACjDC,QAAS,kCACTC,UAAW,oCACXC,MAAO,wCACPC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,YAAa,uCACbC,SAAU,mCACVC,MAAO,gCACPC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAOUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAI,QAAwB,UAMxBJ,KAAAK,QAAmB,IA8C5B,CA/BC,MAAAC,GACE,MAAMC,EAAQP,KAAKC,UAAY,MAE/B,IAAKM,GAASP,KAAKE,OAAS,EAAG,OAAOM,EAACC,EAAI,CAACC,MAAO,CAAEC,QAAS,UAE9D,MAAMA,EAAUX,KAAKE,MAAQF,KAAKG,IAAM,GAAGH,KAAKG,OAASS,OAAOZ,KAAKE,OACrE,MAAMW,EAAOb,KAAKc,YAAc9B,EAAagB,KAAKI,SAElD,OACEI,EAACC,EAAI,CACHM,MAAO,CACLC,MAAO,KACP,kBAAmBT,EACnB,aAAcA,EACd,kBAAmBP,KAAKK,QACxB,mCAAoCL,KAAKiB,qBAAuB,KAChE,+BAAgCjB,KAAKiB,qBAAuB,OAE9DP,MAAO,CAAE,gBAAiBG,IAE1BL,EAAA,QAAMO,MAAM,cAAa,cAAa,SAClCR,GACAC,EAAA,WAASU,GAAG,OAAOjB,QAAQ,eAAekB,SAAQ,KAACC,MAAM,WACtDT,IAINX,KAAKqB,OAASb,EAAA,QAAMO,MAAM,kCAAkCf,KAAKqB,O","ignoreList":[]}
|