@ds-mo/ui 14.31.3 → 14.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +15 -5
- package/dist/agent.json +228 -23
- package/dist/angular/ds-bar-page-title.d.ts +28 -0
- package/dist/angular/ds-bar-page-title.js +48 -0
- package/dist/angular/ds-card-settings-scope.d.ts +1 -1
- package/dist/angular/ds-card-settings-scope.js +3 -3
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +1 -0
- package/dist/angular/proxies.d.ts +1 -0
- package/dist/angular/proxies.js +1 -0
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-avatar.js +1 -1
- package/dist/components/ds-avatar.js.map +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-page-title.d.ts +11 -0
- package/dist/components/ds-bar-page-title.js +2 -0
- package/dist/components/ds-bar-page-title.js.map +1 -0
- 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-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-navigation.js +1 -1
- package/dist/components/ds-card-navigation.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-card-settings-scope.js +1 -1
- package/dist/components/ds-card-settings-scope.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-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js.map +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tool-search.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-paper-texture.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-score.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-app.js.map +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table-filter.js +1 -1
- package/dist/components/ds-table-group.js +1 -1
- package/dist/components/ds-table-group.js.map +1 -1
- package/dist/components/ds-table-saved-views.js +1 -1
- package/dist/components/ds-table-search.js +1 -1
- package/dist/components/ds-table-search.js.map +1 -1
- package/dist/components/ds-table-sort.js +1 -1
- package/dist/components/ds-table-toolbar.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-textarea.js +1 -1
- package/dist/components/ds-textarea.js.map +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--VKxPUoV.js +2 -0
- package/dist/components/p--VKxPUoV.js.map +1 -0
- package/dist/components/p-14sMoeTr.js +2 -0
- package/dist/components/p-14sMoeTr.js.map +1 -0
- package/dist/components/p-9rzbZP-F.js +2 -0
- package/dist/components/p-9rzbZP-F.js.map +1 -0
- package/dist/components/p-B5W_r4vV.js +2 -0
- package/dist/components/p-B5W_r4vV.js.map +1 -0
- package/dist/components/{p-DjF2m7bf.js → p-B8ZonS3S.js} +2 -2
- package/dist/components/{p-BrW77sNB.js → p-B9WwU5vu.js} +2 -2
- package/dist/components/p-BCRPg1Xs.js +2 -0
- package/dist/components/p-BCRPg1Xs.js.map +1 -0
- package/dist/components/{p-KV3_5Cgo.js → p-BFd18avA.js} +2 -2
- package/dist/components/{p-DLDFPn9F.js → p-BGGIEmQj.js} +2 -2
- package/dist/components/p-BG_n-zQT.js +2 -0
- package/dist/components/p-BG_n-zQT.js.map +1 -0
- package/dist/components/p-BINlT3xz.js +2 -0
- package/dist/components/p-BINlT3xz.js.map +1 -0
- package/dist/components/p-BPTqn5zL.js +2 -0
- package/dist/components/p-BPTqn5zL.js.map +1 -0
- package/dist/components/p-BnWxbhFP.js +2 -0
- package/dist/components/p-BnWxbhFP.js.map +1 -0
- package/dist/components/{p-DhibZEq-.js → p-BonnrRtE.js} +2 -2
- package/dist/components/p-BxduVc5g.js +2 -0
- package/dist/components/p-BxduVc5g.js.map +1 -0
- package/dist/components/p-CD9AbaHQ.js +2 -0
- package/dist/components/p-CD9AbaHQ.js.map +1 -0
- package/dist/components/p-CN3roaMg.js +2 -0
- package/dist/components/p-CN3roaMg.js.map +1 -0
- package/dist/components/p-CR7G2BI6.js +2 -0
- package/dist/components/p-CR7G2BI6.js.map +1 -0
- package/dist/components/p-CakRq92x.js +2 -0
- package/dist/components/p-CakRq92x.js.map +1 -0
- package/dist/components/p-CumGY3uN.js +2 -0
- package/dist/components/p-CumGY3uN.js.map +1 -0
- package/dist/components/p-D59xX7JN.js +2 -0
- package/dist/components/p-D59xX7JN.js.map +1 -0
- package/dist/components/p-DFWJmuaR.js +2 -0
- package/dist/components/p-DFWJmuaR.js.map +1 -0
- package/dist/components/p-DGQUm3WL.js +2 -0
- package/dist/components/p-DGQUm3WL.js.map +1 -0
- package/dist/components/{p-DmTnBu5r.js → p-DJHshyyC.js} +2 -2
- package/dist/components/{p-BtUYEMwA.js → p-DPPM5T7q.js} +2 -2
- package/dist/components/p-DVRL3oem.js +2 -0
- package/dist/components/p-DVRL3oem.js.map +1 -0
- package/dist/components/p-DceM6xWR.js +2 -0
- package/dist/components/p-DceM6xWR.js.map +1 -0
- package/dist/components/p-Dhw_W8nk.js +2 -0
- package/dist/components/p-Dhw_W8nk.js.map +1 -0
- package/dist/components/{p-pkGqqLm-.js → p-DwxKwC5i.js} +2 -2
- package/dist/components/{p-DnhDgPJv.js → p-DzHXk0IG.js} +2 -2
- package/dist/components/p-OHT7lQVt.js +2 -0
- package/dist/components/p-OHT7lQVt.js.map +1 -0
- package/dist/components/{p-ln3dJxQT.js → p-P60MGUqZ.js} +2 -2
- package/dist/components/{p-Bu-gu0mN.js → p-UxIgD24y.js} +2 -2
- package/dist/components/{p-BiIDQ5RW.js → p-YFrD62Ml.js} +2 -2
- package/dist/components/p-gR6G5azA.js +2 -0
- package/dist/components/p-gR6G5azA.js.map +1 -0
- package/dist/components/{p-ehZFKett.js → p-oFbI_M5B.js} +2 -2
- package/dist/components/p-r5td84fg.js +2 -0
- package/dist/components/p-r5td84fg.js.map +1 -0
- package/dist/components/p-skVhQk9d.js +2 -0
- package/dist/components/p-skVhQk9d.js.map +1 -0
- package/dist/components/p-z7Zj26BA.js +2 -0
- package/dist/components/p-z7Zj26BA.js.map +1 -0
- package/dist/components/{p-YDUM8xDg.js → p-zunBF381.js} +2 -2
- package/dist/docs/components.json +584 -38
- package/dist/mcp-data/registry/avatar.json +1 -1
- package/dist/mcp-data/registry/banner.json +1 -1
- package/dist/mcp-data/registry/bar-action.json +5 -5
- package/dist/mcp-data/registry/bar-nav.json +1 -1
- package/dist/mcp-data/registry/bar-page-title.json +433 -0
- package/dist/mcp-data/registry/bar-title.json +21 -5
- package/dist/mcp-data/registry/bar-workflow.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 +1 -1
- package/dist/mcp-data/registry/card-navigation.json +1 -1
- package/dist/mcp-data/registry/card-overview.json +1 -1
- package/dist/mcp-data/registry/card-setting.json +1 -1
- package/dist/mcp-data/registry/card-settings-scope.json +23 -5
- package/dist/mcp-data/registry/chart-legend.json +1 -1
- package/dist/mcp-data/registry/checkbox.json +1 -1
- package/dist/mcp-data/registry/chip.json +3 -2
- package/dist/mcp-data/registry/conversation-list-item.json +1 -1
- package/dist/mcp-data/registry/filter-menu.json +1 -1
- package/dist/mcp-data/registry/input.json +1 -1
- package/dist/mcp-data/registry/menu.json +1 -1
- package/dist/mcp-data/registry/mobile-section-switcher.json +1 -1
- package/dist/mcp-data/registry/mobile-sheet-nav.json +1 -1
- package/dist/mcp-data/registry/modal.json +1 -1
- package/dist/mcp-data/registry/pagination.json +10 -10
- package/dist/mcp-data/registry/panel-nav.json +1 -1
- 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 +4 -2
- package/dist/mcp-data/registry/radio.json +1 -1
- package/dist/mcp-data/registry/registry.json +230 -22
- package/dist/mcp-data/registry/select.json +1 -1
- package/dist/mcp-data/registry/shell-app.json +9 -7
- package/dist/mcp-data/registry/skeleton.json +1 -1
- package/dist/mcp-data/registry/tab-group.json +1 -1
- package/dist/mcp-data/registry/table-group.json +1 -1
- package/dist/mcp-data/registry/table-search.json +1 -1
- package/dist/mcp-data/registry/table.json +2 -2
- package/dist/mcp-data/registry/tag.json +1 -1
- package/dist/mcp-data/registry/textarea.json +1 -1
- package/dist/mcp-data/registry/toast.json +1 -1
- package/dist/mcp-data/registry/tooltip-chart.json +1 -1
- package/dist/mcp-data/registry/tooltip.json +1 -1
- package/dist/react/components.d.ts +1 -0
- package/dist/react/components.js +1 -0
- package/dist/react/ds-bar-page-title.d.ts +14 -0
- package/dist/react/ds-bar-page-title.js +16 -0
- package/dist/styles/table.css +1 -1
- package/dist/types/components/BarPageTitle/BarPageTitle.d.ts +124 -0
- package/dist/types/components/BarPageTitle/index.d.ts +2 -0
- package/dist/types/components/BarTitle/BarTitle.d.ts +1 -7
- package/dist/types/components/BarTitle/bar-title-action-chrome.d.ts +76 -0
- package/dist/types/components/BarTitle/bar-title-actions.d.ts +1 -0
- package/dist/types/components/BarTitle/bar-title-sections.d.ts +11 -0
- package/dist/types/components/CardSettingsScope/CardSettingsScope.d.ts +3 -1
- package/dist/types/components/ShellApp/ShellApp.d.ts +1 -0
- package/dist/types/components.d.ts +181 -4
- package/dist/vue/components.d.ts +1 -0
- package/dist/vue/components.js +1 -0
- package/dist/vue/ds-bar-page-title.d.ts +3 -0
- package/dist/vue/ds-bar-page-title.js +26 -0
- package/dist/vue/ds-card-settings-scope.js +1 -0
- package/package.json +1 -1
- package/dist/components/p-B4ZrhWSH.js +0 -2
- package/dist/components/p-B4ZrhWSH.js.map +0 -1
- package/dist/components/p-BTsFFzfR.js +0 -2
- package/dist/components/p-BTsFFzfR.js.map +0 -1
- package/dist/components/p-BpSPAlOx.js +0 -2
- package/dist/components/p-BpSPAlOx.js.map +0 -1
- package/dist/components/p-C-MaZPyA.js +0 -2
- package/dist/components/p-C-MaZPyA.js.map +0 -1
- package/dist/components/p-CB5-uIY2.js +0 -2
- package/dist/components/p-CB5-uIY2.js.map +0 -1
- package/dist/components/p-CG4Fp3SY.js +0 -2
- package/dist/components/p-CG4Fp3SY.js.map +0 -1
- package/dist/components/p-CHCsDvJK.js +0 -2
- package/dist/components/p-CHCsDvJK.js.map +0 -1
- package/dist/components/p-CImwNex7.js +0 -2
- package/dist/components/p-CImwNex7.js.map +0 -1
- package/dist/components/p-CNZwk176.js +0 -2
- package/dist/components/p-CNZwk176.js.map +0 -1
- package/dist/components/p-CSZlbQ8_.js +0 -2
- package/dist/components/p-CSZlbQ8_.js.map +0 -1
- package/dist/components/p-CVNYRTEH.js +0 -2
- package/dist/components/p-CVNYRTEH.js.map +0 -1
- package/dist/components/p-D3sJXjcg.js +0 -2
- package/dist/components/p-D3sJXjcg.js.map +0 -1
- package/dist/components/p-DFOhxUQP.js +0 -2
- package/dist/components/p-DFOhxUQP.js.map +0 -1
- package/dist/components/p-DI7qbahC.js +0 -2
- package/dist/components/p-DI7qbahC.js.map +0 -1
- package/dist/components/p-DP75OhfU.js +0 -2
- package/dist/components/p-DP75OhfU.js.map +0 -1
- package/dist/components/p-DR1jV6Q5.js +0 -2
- package/dist/components/p-DR1jV6Q5.js.map +0 -1
- package/dist/components/p-DuJuqbcg.js +0 -2
- package/dist/components/p-DuJuqbcg.js.map +0 -1
- package/dist/components/p-E3RCUE7a.js +0 -2
- package/dist/components/p-E3RCUE7a.js.map +0 -1
- package/dist/components/p-JuKGR7Ay.js +0 -2
- package/dist/components/p-JuKGR7Ay.js.map +0 -1
- package/dist/components/p-MuZ6B9gu.js +0 -2
- package/dist/components/p-MuZ6B9gu.js.map +0 -1
- package/dist/components/p-Ui0Ir5li.js +0 -2
- package/dist/components/p-Ui0Ir5li.js.map +0 -1
- package/dist/components/p-eAX_M_QY.js +0 -2
- package/dist/components/p-eAX_M_QY.js.map +0 -1
- package/dist/components/p-eaCtnww1.js +0 -2
- package/dist/components/p-eaCtnww1.js.map +0 -1
- /package/dist/components/{p-DjF2m7bf.js.map → p-B8ZonS3S.js.map} +0 -0
- /package/dist/components/{p-BrW77sNB.js.map → p-B9WwU5vu.js.map} +0 -0
- /package/dist/components/{p-KV3_5Cgo.js.map → p-BFd18avA.js.map} +0 -0
- /package/dist/components/{p-DLDFPn9F.js.map → p-BGGIEmQj.js.map} +0 -0
- /package/dist/components/{p-DhibZEq-.js.map → p-BonnrRtE.js.map} +0 -0
- /package/dist/components/{p-DmTnBu5r.js.map → p-DJHshyyC.js.map} +0 -0
- /package/dist/components/{p-BtUYEMwA.js.map → p-DPPM5T7q.js.map} +0 -0
- /package/dist/components/{p-pkGqqLm-.js.map → p-DwxKwC5i.js.map} +0 -0
- /package/dist/components/{p-DnhDgPJv.js.map → p-DzHXk0IG.js.map} +0 -0
- /package/dist/components/{p-ln3dJxQT.js.map → p-P60MGUqZ.js.map} +0 -0
- /package/dist/components/{p-Bu-gu0mN.js.map → p-UxIgD24y.js.map} +0 -0
- /package/dist/components/{p-BiIDQ5RW.js.map → p-YFrD62Ml.js.map} +0 -0
- /package/dist/components/{p-ehZFKett.js.map → p-oFbI_M5B.js.map} +0 -0
- /package/dist/components/{p-YDUM8xDg.js.map → p-zunBF381.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["deriveBarNavValueFromUrl","path","basePath","tabs","value","hideTabs","startsWith","remainder","slice","length","seg","split","selectableTabs","getSelectableTabs","id","tab","find","t","shouldResyncBarNavProps","resolvedTabs","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","currentUrl","moreTabsLabel","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","menuTriggerActive","tabLayoutCommitted","visibleTabs","overflowTabs","menuInitialFocusVisible","overflowRovingFocused","focusedTabId","headerEl","triggerEl","menuEl","visibleTabListEl","probeTabListEl","resizeObserver","intrinsicWidthRetryCount","tabLayoutPendingFrames","panelNavTransition","ChromeTransitionGate","panelToolsTransition","overflowCoalescer","createRafCoalescer","updateTabsCollapsed","chromeTransitionShell","committedSection","pendingSection","onChromeTransitionStart","event","source","readChromeTransitionSource","enter","phase","readChromeTransitionPhase","onChromeTransitionEnd","exit","isActive","scheduleOverflowCheck","handleOverflowFocus","handleOverflowBlur","effectiveValue","renderedSelectableTabs","hasOverflowTabs","syncFocusedTabId","preferred","some","isInactive","first","digestTabsConfig","map","isTabDivider","join","resetTabOverflowLayout","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","collapsed","prevCollapsed","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","bindChromeTransitionListeners","componentDidRender","chromeOverflowPaused","syncMenuAnchor","disconnectedCallback","disconnect","cancel","unbindChromeTransitionListeners","shell","el","closest","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","removeEventListener","syncValueFromUrl","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","schedule","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","horizontalPadding","parseFloat","paddingLeft","paddingRight","Math","max","clientWidth","getTabsIntrinsicWidth","scrollWidth","getHeaderGap","style","columnGap","gap","getOverflowTriggerReserveWidth","getBoundingClientRect","width","getProbeTabMetrics","tabList","children","Array","from","itemWidths","child","itemGap","childrenWidth","reduce","sum","gapWidth","listExtraWidth","setOverflowTabLayout","nextCollapsed","visibleChanged","overflowChanged","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","forceTabLayoutCommit","fallbackCollapsed","metrics","intrinsicWidth","TAB_LAYOUT_COMMIT_MAX_FRAMES","shouldCollapse","tabsOverflowContainer","OVERFLOW_HYSTERESIS_PX","visibleCount","visibleTabCountForWidth","trimTrailingDividers","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","handleMenuAfterClose","incomingTabs","nextBasePath","sectionChanged","tabsConfigChanged","sections","tabsToOverflowMenuSections","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","isSelected","type","panelId","disabled","tabIndex","onClick","onFocus","dot","as","variant","emphasis","color","label","hasRing","render","sectionReady","hasTabs","tabGroupKey","renderedTabs","Host","inert","lineTruncation","wrap","icon","activeFill","hasBorder","focusTabIndex","haspopup","expanded","surfaceOpen","onDsClick","onFocusout","side","align","sideOffset","initialFocusVisible","onDsSelect","onDsClose","onDsAfterClose"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["import { getSelectableTabs } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\n\nexport interface BarNavUrlState {\n /** Tab id derived from the URL, or empty when none applies. */\n value: string;\n /** When true, tabs should be hidden (e.g. non-tab child routes like detail pages). */\n hideTabs: boolean;\n}\n\n/** Derive BarNav tab selection from `currentUrl` relative to `basePath`.\n * Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */\nexport function deriveBarNavValueFromUrl(\n path: string,\n basePath: string,\n tabs: BarNavTab[]\n): BarNavUrlState {\n if (!path || !basePath) {\n return { value: '', hideTabs: false };\n }\n\n if (path !== basePath && !path.startsWith(`${basePath}/`)) {\n return { value: '', hideTabs: false };\n }\n\n const remainder = path.slice(basePath.length);\n const seg = remainder.startsWith('/') ? remainder.slice(1).split('/')[0] : '';\n const selectableTabs = getSelectableTabs(tabs);\n\n if (!seg) {\n return { value: selectableTabs[0]?.id ?? '', hideTabs: false };\n }\n\n const tab = selectableTabs.find(t => t.id === seg);\n if (tab) {\n return { value: tab.id, hideTabs: false };\n }\n\n return { value: '', hideTabs: true };\n}\n\n/** True when host array props have data but resolved internal state is still empty. */\nexport function shouldResyncBarNavProps(resolvedTabs: BarNavTab[], tabs: BarNavTab[]): boolean {\n return resolvedTabs.length === 0 && (tabs?.length ?? 0) > 0;\n}\n","@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n display: block;\n}\n\n.bar-nav {\n position: relative;\n height: var(--dimension-size-600);\n border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n background-color: var(--_bar-nav-bg);\n color: var(--_bar-nav-fg-primary);\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition:\n background-color var(--effect-motion-short-3),\n border-color var(--effect-motion-short-3),\n color var(--effect-motion-short-3);\n isolation: isolate;\n /* Default chrome — app surfaces */\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash) — bar is a transparent frame. */\n:host-context(ds-shell-app:not([gradient-preset='none'])) .bar-nav,\n:host-context(ds-shell-app.shell-app--paper-texture) .bar-nav {\n background-color: transparent;\n}\n\n.bar-nav > :not(.bar-nav__tabs-probe) {\n position: relative;\n z-index: 3;\n}\n\n/* Overflow — keep fitting tabs visible and pin the overflow trigger to the far edge. */\n.bar-nav--tabs-collapsed {\n display: flex;\n gap: var(--dimension-space-100);\n align-items: center;\n}\n\n/* Expanded tabs — consume full header width */\n.bar-nav__left {\n position: relative;\n flex: 1 1 0%;\n min-width: 0;\n width: 0;\n display: flex;\n align-items: center;\n}\n\n.bar-nav__tabs-visible {\n flex: 1;\n min-width: 0;\n width: 100%;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n position: absolute;\n left: 0;\n top: 0;\n visibility: hidden;\n pointer-events: none;\n overflow: visible;\n width: max-content;\n max-width: none;\n z-index: -1;\n}\n\n.bar-nav__tabs-probe > div {\n width: max-content;\n}\n\n.bar-nav__tab-list {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n position: relative;\n width: max-content;\n}\n\n.bar-nav__tab {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ds-control-gap);\n height: var(--ds-control-height);\n min-width: var(--ds-control-height);\n padding: 0 var(--ds-control-padding-inline);\n box-sizing: border-box;\n border: none;\n border-radius: var(--ds-control-radius);\n background-color: transparent;\n color: var(--_bar-nav-fg-secondary);\n cursor: default;\n position: relative;\n flex-shrink: 0;\n -webkit-user-select: none;\n user-select: none;\n transition: color var(--effect-motion-short-2);\n}\n\n.bar-nav__tab::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--ds-control-radius);\n background: transparent;\n pointer-events: none;\n cursor: inherit;\n}\n\n@media (hover: hover) and (pointer: fine) {\n .bar-nav__tab:hover::after {\n background: var(--_bar-nav-hover);\n }\n}\n\n.bar-nav__tab:active::after {\n background: var(--_bar-nav-pressed);\n}\n\n.bar-nav__tab--selected {\n color: var(--_bar-nav-fg-primary);\n}\n\n.bar-nav__tab-label {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n}\n\n.bar-nav__tab-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--dimension-space-100);\n height: var(--ds-control-height);\n padding-block: var(--ds-control-padding-inline);\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.bar-nav__tab-divider-line {\n width: var(--dimension-stroke-width-012);\n align-self: stretch;\n background-color: var(--_bar-nav-border);\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n flex: 1;\n min-width: 0;\n height: var(--ds-control-height);\n visibility: hidden;\n pointer-events: none;\n}\n\n/* Overflow trigger — compact icon button aligned to the right edge. */\n.bar-nav__overflow-trigger {\n margin-left: auto;\n --ds-button-unfilled-fg: var(--_bar-nav-fg-secondary);\n --ds-button-unfilled-fg-active: var(--_bar-nav-fg-primary);\n --ds-interaction-hover: var(--_bar-nav-hover);\n --ds-interaction-pressed: var(--_bar-nav-pressed);\n --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n name shares the tab label's type token, color, height and horizontal inset.\n Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px).\n Color comes from ds-text color=\"primary\"; beat Text's inline-box display. */\nds-text.bar-nav__heading {\n display: inline-flex;\n align-items: center;\n height: var(--ds-control-height);\n padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n -webkit-user-select: none;\n user-select: none;\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n State,\n h,\n Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { getSelectableTabs, isTabDivider, type TabItemTab } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\nimport { deriveBarNavValueFromUrl, shouldResyncBarNavProps } from './bar-nav-utils';\nimport {\n tabsOverflowContainer,\n tabsToOverflowMenuSections,\n trimTrailingDividers,\n visibleTabCountForWidth,\n} from './bar-nav-tabs-menu-utils';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionGate,\n createRafCoalescer,\n readChromeTransitionSource,\n readChromeTransitionPhase,\n} from '../../shell/chrome-transition';\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /** Style slot: `dashboard` or `settings`. Colors match for now. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n @Element() el!: HTMLElement;\n\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n @Prop() basePath: string = '';\n\n /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n @Prop() currentUrl: string = '';\n @Prop() moreTabsLabel: string = 'More tabs';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n @State() private resolvedTabs: BarNavTab[] = [];\n @State() private urlDerivedValue: string = '';\n @State() private hideTabsForDetailRoute = false;\n @State() private tabsCollapsed = false;\n @State() private menuOpen = false;\n @State() private menuTriggerActive = false;\n /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n @State() private tabLayoutCommitted = false;\n @State() private visibleTabs: BarNavTab[] = [];\n @State() private overflowTabs: BarNavTab[] = [];\n @State() private menuInitialFocusVisible = false;\n @State() private overflowRovingFocused = false;\n @State() private focusedTabId = '';\n\n private static readonly HOST_PROP_SYNC_BUDGET = 8;\n private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;\n private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n private headerEl: HTMLElement | null = null;\n private triggerEl: (HTMLElement & { setFocus?: () => Promise<void> }) | null = null;\n private menuEl: HTMLDsMenuElement | null = null;\n private visibleTabListEl: HTMLElement | null = null;\n private probeTabListEl: HTMLElement | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private intrinsicWidthRetryCount = 0;\n private tabLayoutPendingFrames = 0;\n private readonly panelNavTransition = new ChromeTransitionGate();\n private readonly panelToolsTransition = new ChromeTransitionGate();\n private readonly overflowCoalescer = createRafCoalescer(() => {\n this.updateTabsCollapsed();\n });\n private chromeTransitionShell: HTMLElement | null = null;\n /** Matches `basePath` once tabs + URL are reconciled for the active section. */\n @State() private committedSection = '';\n /** Section waiting for URL + tabs to catch up after a cross-area navigation. */\n @State() private pendingSection = '';\n\n private get effectiveValue(): string {\n if (this.currentUrl && this.basePath) {\n return this.urlDerivedValue;\n }\n return this.value;\n }\n\n private get renderedSelectableTabs(): TabItemTab[] {\n const tabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n return getSelectableTabs(tabs);\n }\n\n private get hasOverflowTabs(): boolean {\n return this.tabLayoutCommitted && this.tabsCollapsed && this.overflowTabs.length > 0;\n }\n\n private syncFocusedTabId(preferred: string, tabs: TabItemTab[]) {\n if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {\n this.focusedTabId = preferred;\n return;\n }\n const first = tabs.find(tab => !tab.isInactive);\n this.focusedTabId = first?.id ?? '';\n }\n\n private digestTabsConfig(tabs: BarNavTab[]): string {\n return tabs.map(t => (isTabDivider(t) ? '|' : t.id)).join(',');\n }\n\n private resetTabOverflowLayout() {\n this.tabLayoutCommitted = false;\n this.tabsCollapsed = false;\n this.menuOpen = false;\n this.menuTriggerActive = false;\n this.menuInitialFocusVisible = false;\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.visibleTabs = [];\n this.overflowTabs = [];\n }\n\n @Watch('tabs')\n @Watch('currentUrl')\n @Watch('basePath')\n onHostPropsChange() {\n this.applyHostProps();\n }\n\n @Watch('value')\n @Watch('urlDerivedValue')\n onSelectionChange() {\n this.syncFocusedTabId(this.effectiveValue, this.renderedSelectableTabs);\n this.syncMenuSections();\n this.scheduleOverflowCheck();\n }\n\n @Watch('menuOpen')\n onMenuOpenChange(open: boolean) {\n if (this.menuEl) {\n this.menuEl.open = open;\n }\n }\n\n @Watch('tabsCollapsed')\n onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n if (!collapsed) {\n this.menuOpen = false;\n this.menuTriggerActive = false;\n this.menuInitialFocusVisible = false;\n this.menuEl = null;\n }\n this.scheduleOverflowCheck();\n if (collapsed) {\n requestAnimationFrame(() => {\n this.scheduleOverflowCheck();\n });\n }\n if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n queueMicrotask(() => this.focusVisibleSelectedTab());\n }\n\n componentWillLoad() {\n this.applyHostProps();\n this.syncFocusedTabId(this.effectiveValue, getSelectableTabs(this.resolvedTabs));\n }\n\n componentDidLoad() {\n this.syncHostPropsIfNeeded();\n this.scheduleDeferredHostPropSync();\n this.setupOverflowObserver();\n this.bindChromeTransitionListeners();\n this.scheduleOverflowCheck();\n }\n\n componentDidRender() {\n if (this.chromeOverflowPaused()) {\n this.syncMenuAnchor();\n return;\n }\n this.scheduleOverflowCheck();\n this.syncMenuAnchor();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.overflowCoalescer.cancel();\n this.unbindChromeTransitionListeners();\n }\n\n private bindChromeTransitionListeners() {\n const shell = this.el.closest<HTMLElement>('ds-shell-app');\n if (!shell) return;\n this.chromeTransitionShell = shell;\n shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n private unbindChromeTransitionListeners() {\n if (!this.chromeTransitionShell) return;\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_START,\n this.onChromeTransitionStart\n );\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_END,\n this.onChromeTransitionEnd\n );\n this.chromeTransitionShell = null;\n }\n\n private onChromeTransitionStart = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.enter();\n return;\n }\n if (source === 'panel-tools') {\n const phase = readChromeTransitionPhase(event) ?? 'opening';\n if (phase === 'closing') {\n this.panelToolsTransition.enter();\n }\n }\n };\n\n private chromeOverflowPaused(): boolean {\n return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;\n }\n\n private onChromeTransitionEnd = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.exit();\n if (!this.panelNavTransition.isActive) {\n this.scheduleOverflowCheck();\n }\n return;\n }\n if (source === 'panel-tools') {\n this.panelToolsTransition.exit();\n this.scheduleOverflowCheck();\n }\n };\n\n /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n private syncHostPropsIfNeeded() {\n if (shouldResyncBarNavProps(this.resolvedTabs, this.tabs)) {\n this.applyHostProps();\n } else if (this.currentUrl && this.basePath) {\n this.syncValueFromUrl();\n }\n }\n\n /** Poll across animation frames — host props may land without triggering @Watch. */\n private scheduleDeferredHostPropSync() {\n let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n const tick = () => {\n this.syncHostPropsIfNeeded();\n if (--remaining > 0) {\n requestAnimationFrame(tick);\n }\n };\n queueMicrotask(tick);\n }\n\n private setupOverflowObserver() {\n if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n this.resizeObserver?.disconnect();\n this.resizeObserver = new ResizeObserver(() => {\n if (this.chromeOverflowPaused()) return;\n this.scheduleOverflowCheck();\n });\n this.resizeObserver.observe(this.headerEl);\n }\n\n private scheduleOverflowCheck() {\n if (this.chromeOverflowPaused()) return;\n this.overflowCoalescer.schedule();\n }\n\n /** Width available for the tab row or collapsed trigger. */\n private getLeftZoneAvailableWidth(): number {\n if (!this.headerEl) return 0;\n\n const headerStyle = getComputedStyle(this.headerEl);\n const horizontalPadding =\n (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n\n return Math.max(0, this.headerEl.clientWidth - horizontalPadding);\n }\n\n private getTabsIntrinsicWidth(): number {\n return this.probeTabListEl?.scrollWidth ?? 0;\n }\n\n private getHeaderGap(): number {\n if (!this.headerEl) return 0;\n const style = getComputedStyle(this.headerEl);\n return parseFloat(style.columnGap || style.gap) || 0;\n }\n\n private getOverflowTriggerReserveWidth(): number {\n if (!this.triggerEl) {\n return 40;\n }\n return this.triggerEl.getBoundingClientRect().width + this.getHeaderGap();\n }\n\n private getProbeTabMetrics(): {\n itemWidths: number[];\n itemGap: number;\n listExtraWidth: number;\n } | null {\n const tabList = this.probeTabListEl;\n if (!tabList) return null;\n\n const children = Array.from(tabList.children) as HTMLElement[];\n const itemWidths = children.map(child => child.getBoundingClientRect().width);\n if (itemWidths.length === 0 || itemWidths.some(width => width === 0)) return null;\n\n const style = getComputedStyle(tabList);\n const itemGap = parseFloat(style.columnGap || style.gap) || 0;\n const childrenWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n const gapWidth = itemGap * Math.max(0, itemWidths.length - 1);\n const listExtraWidth = Math.max(0, tabList.scrollWidth - childrenWidth - gapWidth);\n\n return { itemWidths, itemGap, listExtraWidth };\n }\n\n private setOverflowTabLayout(visibleTabs: BarNavTab[], overflowTabs: BarNavTab[]) {\n const nextCollapsed = overflowTabs.length > 0;\n const visibleChanged =\n this.digestTabsConfig(visibleTabs) !== this.digestTabsConfig(this.visibleTabs);\n const overflowChanged =\n this.digestTabsConfig(overflowTabs) !== this.digestTabsConfig(this.overflowTabs);\n\n if (visibleChanged) {\n this.visibleTabs = visibleTabs;\n }\n if (overflowChanged) {\n this.overflowTabs = overflowTabs;\n }\n if (nextCollapsed !== this.tabsCollapsed) {\n this.tabsCollapsed = nextCollapsed;\n if (!nextCollapsed) {\n this.menuOpen = false;\n this.menuTriggerActive = false;\n }\n }\n this.syncFocusedTabId(\n this.effectiveValue,\n getSelectableTabs(nextCollapsed ? visibleTabs : this.resolvedTabs)\n );\n }\n\n private scheduleIntrinsicWidthRetry() {\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n this.intrinsicWidthRetryCount++;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n }\n\n private forceTabLayoutCommit(fallbackCollapsed: boolean) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.setOverflowTabLayout(\n fallbackCollapsed ? [] : this.resolvedTabs,\n fallbackCollapsed ? this.resolvedTabs : []\n );\n this.tabLayoutCommitted = true;\n }\n\n private updateTabsCollapsed() {\n if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n if (this.tabsCollapsed) {\n this.setOverflowTabLayout([], []);\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.tabLayoutCommitted = true;\n return;\n }\n\n const metrics = this.getProbeTabMetrics();\n const intrinsicWidth = this.getTabsIntrinsicWidth();\n if (!metrics || intrinsicWidth === 0) {\n this.tabLayoutPendingFrames += 1;\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {\n this.forceTabLayoutCommit(false);\n } else if (this.tabLayoutPendingFrames >= BarNav.TAB_LAYOUT_COMMIT_MAX_FRAMES) {\n this.forceTabLayoutCommit(false);\n } else {\n this.scheduleIntrinsicWidthRetry();\n }\n return;\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n\n const shouldCollapse = tabsOverflowContainer(\n intrinsicWidth,\n this.getLeftZoneAvailableWidth(),\n this.tabsCollapsed,\n BarNav.OVERFLOW_HYSTERESIS_PX\n );\n\n if (!shouldCollapse) {\n this.setOverflowTabLayout(this.resolvedTabs, []);\n this.tabLayoutCommitted = true;\n return;\n }\n\n const visibleCount = visibleTabCountForWidth(\n metrics.itemWidths,\n this.getLeftZoneAvailableWidth(),\n this.getOverflowTriggerReserveWidth(),\n metrics.itemGap,\n metrics.listExtraWidth\n );\n const visibleTabs = trimTrailingDividers(this.resolvedTabs.slice(0, visibleCount));\n const overflowTabs = this.resolvedTabs.slice(visibleTabs.length);\n this.setOverflowTabLayout(visibleTabs, overflowTabs);\n this.tabLayoutCommitted = true;\n }\n\n private syncMenuAnchor() {\n if (!this.menuEl || !this.triggerEl || !this.hasOverflowTabs) return;\n this.menuEl.anchor = this.triggerEl;\n this.syncMenuSections();\n }\n\n private handleMenuSelect(e: Event) {\n const detail = (e as CustomEvent<MenuItemData>).detail;\n if (detail?.value !== undefined) {\n this.selectTab(String(detail.value));\n }\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n }\n\n private handleMenuClose() {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n }\n\n private handleMenuAfterClose() {\n if (!this.menuOpen) this.menuTriggerActive = false;\n }\n\n /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */\n private incomingTabs(): BarNavTab[] {\n return this.tabs ?? [];\n }\n\n private applyHostProps() {\n const nextBasePath = this.basePath;\n const sectionChanged =\n nextBasePath !== '' && this.committedSection !== '' && nextBasePath !== this.committedSection;\n\n if (sectionChanged) {\n this.urlDerivedValue = '';\n this.committedSection = '';\n this.pendingSection = nextBasePath;\n this.resolvedTabs = [];\n this.resetTabOverflowLayout();\n return;\n }\n\n if (this.pendingSection) {\n if (!nextBasePath || nextBasePath !== this.pendingSection) {\n return;\n }\n if (!this.currentUrl.startsWith(this.pendingSection)) {\n return;\n }\n const tabs = this.incomingTabs();\n if (tabs.length === 0) {\n return;\n }\n this.pendingSection = '';\n }\n\n const tabs = this.incomingTabs();\n const tabsConfigChanged =\n this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);\n\n this.resolvedTabs = tabs;\n this.syncValueFromUrl();\n this.committedSection = nextBasePath;\n if (tabsConfigChanged) {\n this.resetTabOverflowLayout();\n }\n this.scheduleOverflowCheck();\n }\n\n private syncMenuSections() {\n if (!this.menuEl) return;\n this.menuEl.sections = tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue);\n }\n\n private syncValueFromUrl() {\n const tabs = this.incomingTabs();\n\n if (!this.currentUrl || !this.basePath) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n if (!this.currentUrl.startsWith(this.basePath)) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n const { value, hideTabs } = deriveBarNavValueFromUrl(this.currentUrl, this.basePath, tabs);\n this.urlDerivedValue = value;\n this.hideTabsForDetailRoute = hideTabs;\n }\n\n private selectTab(id: string) {\n this.value = id;\n this.dsTabChange.emit(id);\n }\n\n /** Move focus to the selected tab in the visible tab group (after expand). */\n private focusVisibleSelectedTab() {\n const tab = this.visibleTabListEl?.querySelector(\n `[data-tab-id=\"${this.effectiveValue}\"]`\n ) as HTMLElement | null;\n tab?.focus({ preventScroll: true });\n }\n\n private focusVisibleTab(id: string) {\n this.focusedTabId = id;\n const tab = this.visibleTabListEl?.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n tab?.focus({ preventScroll: true });\n }\n\n private focusLastVisibleTab() {\n const last = [...this.renderedSelectableTabs].reverse().find(tab => !tab.isInactive);\n if (last) this.focusVisibleTab(last.id);\n }\n\n private findEnabledVisibleTab(from: number, step: 1 | -1): number | null {\n const tabs = this.renderedSelectableTabs;\n for (let index = from + step; index >= 0 && index < tabs.length; index += step) {\n if (!tabs[index]?.isInactive) return index;\n }\n return null;\n }\n\n private handleTabKeyDown(e: KeyboardEvent) {\n const tabs = this.renderedSelectableTabs;\n if (!tabs.length) return;\n const targetId = (e.target as HTMLElement | null)?.getAttribute('data-tab-id');\n const focusedId = targetId ?? this.focusedTabId;\n\n if (e.key === 'Enter' || e.key === ' ') {\n const focused = tabs.find(tab => tab.id === focusedId);\n if (!focused || focused.isInactive) return;\n e.preventDefault();\n this.selectTab(focused.id);\n return;\n }\n\n const currentIndex = tabs.findIndex(tab => tab.id === focusedId);\n if (currentIndex < 0) return;\n\n let nextIndex: number | null;\n if (e.key === 'ArrowRight') {\n nextIndex = this.findEnabledVisibleTab(currentIndex, 1);\n if (nextIndex === null && this.hasOverflowTabs) {\n e.preventDefault();\n this.overflowRovingFocused = true;\n void this.triggerEl?.setFocus?.();\n return;\n }\n } else if (e.key === 'ArrowLeft') {\n nextIndex = this.findEnabledVisibleTab(currentIndex, -1);\n } else if (e.key === 'Home') {\n nextIndex = tabs.findIndex(tab => !tab.isInactive);\n } else if (e.key === 'End') {\n const reversedIndex = [...tabs].reverse().findIndex(tab => !tab.isInactive);\n nextIndex = reversedIndex < 0 ? null : tabs.length - 1 - reversedIndex;\n } else {\n return;\n }\n\n if (nextIndex === null || nextIndex < 0 || nextIndex === currentIndex) return;\n e.preventDefault();\n this.focusVisibleTab(tabs[nextIndex].id);\n }\n\n private toggleTabMenu(options?: { focusVisible?: boolean }) {\n if (this.menuOpen) {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n return;\n }\n\n if (this.menuEl && this.triggerEl) {\n this.menuEl.anchor = this.triggerEl;\n this.menuEl.minWidth = '';\n this.syncMenuSections();\n }\n\n this.menuInitialFocusVisible = options?.focusVisible ?? false;\n this.menuTriggerActive = true;\n this.menuOpen = true;\n }\n\n private handleOverflowFocus = () => {\n this.overflowRovingFocused = true;\n };\n\n private handleOverflowBlur = () => {\n this.overflowRovingFocused = false;\n };\n\n private handleTriggerKeyDown(e: KeyboardEvent) {\n if (!this.hasOverflowTabs) return;\n\n if (!this.menuOpen) {\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this.overflowRovingFocused = false;\n this.focusLastVisibleTab();\n return;\n }\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggleTabMenu({ focusVisible: true });\n }\n return;\n }\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n void this.triggerEl?.setFocus?.();\n }\n }\n\n private renderTabList(tabs: BarNavTab[], probe: boolean) {\n return (\n <div\n role=\"tablist\"\n class=\"bar-nav__tab-list\"\n aria-label={this.heading}\n ref={el => {\n if (probe) {\n const next = (el as HTMLElement) ?? null;\n if (next === this.probeTabListEl) return;\n this.probeTabListEl = next;\n if (next) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.scheduleOverflowCheck();\n }\n } else {\n this.visibleTabListEl = (el as HTMLElement) ?? null;\n }\n }}\n onKeyDown={probe ? undefined : (e: KeyboardEvent) => this.handleTabKeyDown(e)}\n onFocusin={\n probe\n ? undefined\n : () => {\n this.overflowRovingFocused = false;\n }\n }\n >\n {tabs.map((tab, index) => {\n if (isTabDivider(tab)) {\n return (\n <div class=\"bar-nav__tab-divider\" key={`divider-${index}`} aria-hidden=\"true\">\n <div class=\"bar-nav__tab-divider-line\" />\n </div>\n );\n }\n\n const isSelected = tab.id === this.effectiveValue;\n return (\n <button\n key={tab.id}\n type=\"button\"\n role=\"tab\"\n data-tab-id={tab.id}\n class={{\n 'bar-nav__tab': true,\n 'bar-nav__tab--selected': isSelected,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-inactive': !!tab.isInactive,\n }}\n aria-selected={isSelected ? 'true' : 'false'}\n aria-disabled={tab.isInactive ? 'true' : undefined}\n aria-controls={tab.panelId ?? undefined}\n disabled={tab.isInactive}\n tabIndex={\n !probe && !this.overflowRovingFocused && tab.id === this.focusedTabId ? 0 : -1\n }\n onClick={() => !probe && !tab.isInactive && this.selectTab(tab.id)}\n onFocus={() => {\n if (!probe) this.focusedTabId = tab.id;\n }}\n >\n <span\n class={{\n 'bar-nav__tab-label': true,\n 'ds-control-label-box': true,\n 'ds-control-label-dot': !!tab.dot,\n 'bar-nav__tab-label--dot': !!tab.dot,\n }}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" emphasis={isSelected} color=\"inherit\">\n {tab.label}\n </ds-text>\n {tab.dot && (\n <ds-badge\n class=\"bar-nav__tab-dot ds-control-label-dot__badge\"\n variant=\"dot\"\n hasRing={false}\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n </button>\n );\n })}\n </div>\n );\n }\n\n render() {\n // Section gating only applies when `basePath` is set (SPA section sync).\n // Tabs without a base path must still render — otherwise a single-tab bar\n // (or any non-routed tabs) silently falls through to an empty header.\n const sectionReady = this.basePath === '' || this.committedSection === this.basePath;\n const hasTabs = sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n const tabGroupKey = this.basePath || 'no-section';\n const renderedTabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n\n return (\n <Host>\n <header\n class={{\n 'bar-nav': true,\n 'ds-control--md': true,\n 'ds-chrome-row': true,\n 'ds-chrome-space--md': true,\n 'bar-nav--dashboard': this.navStyle === 'dashboard',\n 'bar-nav--settings': this.navStyle === 'settings',\n 'bar-nav--tabs-collapsed': hasTabs && this.hasOverflowTabs,\n }}\n ref={el => {\n this.headerEl = el as HTMLElement;\n if (el && !this.resizeObserver) {\n this.setupOverflowObserver();\n }\n }}\n >\n {hasTabs && (\n <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n <div key={`probe-${tabGroupKey}`}>{this.renderTabList(this.resolvedTabs, true)}</div>\n </div>\n )}\n\n {hasTabs && this.tabLayoutCommitted && renderedTabs.length > 0 && (\n <div class=\"bar-nav__left\">\n <div key={`visible-${tabGroupKey}`} class=\"bar-nav__tabs-visible\">\n {this.renderTabList(renderedTabs, false)}\n </div>\n </div>\n )}\n\n {hasTabs && !this.tabLayoutCommitted && (\n <div class=\"bar-nav__tabs-pending\" aria-hidden=\"true\" />\n )}\n\n {!hasTabs && this.heading && (\n <ds-text\n class=\"bar-nav__heading\"\n lineTruncation={1}\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"primary\"\n wrap=\"nowrap\"\n >\n {this.heading}\n </ds-text>\n )}\n\n {hasTabs && this.hasOverflowTabs && (\n <ds-button-unfilled\n variant=\"icon\"\n class={{\n 'bar-nav__overflow-trigger': true,\n }}\n icon=\"ChevronDown\"\n activeFill={false}\n hasBorder={false}\n focusTabIndex={this.overflowRovingFocused ? 0 : -1}\n ref={(el?: HTMLDsButtonUnfilledElement) => {\n this.triggerEl = (el as HTMLElement & { setFocus?: () => Promise<void> }) ?? null;\n }}\n haspopup=\"menu\"\n expanded={this.menuOpen}\n surfaceOpen={this.menuTriggerActive}\n aria-label={this.moreTabsLabel}\n onDsClick={() => this.toggleTabMenu({ focusVisible: false })}\n onFocusin={this.handleOverflowFocus}\n onFocusout={this.handleOverflowBlur}\n onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n />\n )}\n </header>\n\n {hasTabs && this.hasOverflowTabs && (\n <ds-menu\n ref={el => {\n this.menuEl = (el as HTMLDsMenuElement) ?? null;\n }}\n open={this.menuOpen}\n sections={tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue)}\n side=\"bottom\"\n align=\"end\"\n sideOffset=\"calc(var(--dimension-space-100) + var(--dimension-space-050))\"\n initialFocusVisible={this.menuInitialFocusVisible}\n onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n onDsClose={() => this.handleMenuClose()}\n onDsAfterClose={() => this.handleMenuAfterClose()}\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as o,H as t,h as s,a as i,t as r}from"./index.js";import{d as a}from"./p-B9oadFSC.js";import{T as e,r as c}from"./p-CUL5_8JM.js";import{C as n,a as d}from"./p-CuwopElg.js";const l=()=>`.sc-ds-tooltip-chart-h,.sc-ds-tooltip-chart:where(.ds-table),.sc-ds-tooltip-chart:where(.tooltip-popup),.sc-ds-tooltip-chart:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-tooltip-chart,.ds-control--lg.sc-ds-tooltip-chart-h,.ds-control--md.sc-ds-tooltip-chart-h,.ds-control--md.sc-ds-tooltip-chart,.ds-control--sm.sc-ds-tooltip-chart-h,.ds-control--sm.sc-ds-tooltip-chart,.ds-control--xs.sc-ds-tooltip-chart-h,.ds-control--xs.sc-ds-tooltip-chart{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-tooltip-chart-h,.ds-control--lg.sc-ds-tooltip-chart{--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-tooltip-chart-h,.ds-control--md.sc-ds-tooltip-chart{--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-tooltip-chart-h,.ds-control--sm.sc-ds-tooltip-chart{--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-tooltip-chart-h,.ds-control--xs.sc-ds-tooltip-chart{--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-tooltip-chart{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-tooltip-chart{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-tooltip-chart{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-tooltip-chart{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-tooltip-chart{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-tooltip-chart{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-chrome-space--sm.sc-ds-tooltip-chart-h,.ds-chrome-space--sm.sc-ds-tooltip-chart{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-tooltip-chart-h,.ds-chrome-space--md.sc-ds-tooltip-chart{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-tooltip-chart-h,.ds-chrome-space--lg.sc-ds-tooltip-chart{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-tooltip-chart-h,.ds-chrome-row.sc-ds-tooltip-chart,.ds-chrome-column.sc-ds-tooltip-chart-h,.ds-chrome-column.sc-ds-tooltip-chart,.ds-chrome-grid.sc-ds-tooltip-chart-h,.ds-chrome-grid.sc-ds-tooltip-chart{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-tooltip-chart-h,.ds-chrome-row.sc-ds-tooltip-chart{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-tooltip-chart-h,.ds-chrome-column.sc-ds-tooltip-chart{flex-direction:column}.ds-chrome-grid.sc-ds-tooltip-chart-h,.ds-chrome-grid.sc-ds-tooltip-chart{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-tooltip-chart:root,.sc-ds-tooltip-chart-h,.ds-forced-colors-scope.sc-ds-tooltip-chart{--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-tooltip-chart-h{position:absolute;z-index:var(--dimension-z-index-tooltip);background-color:var(--color-translucent-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md));border-radius:var(--ds-radius-tooltip-menu);box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;opacity:0}.tooltip-chart--visible.sc-ds-tooltip-chart-h{animation:tooltip-chart-fade-in var(--effect-motion-short-2) forwards}.tooltip-chart__item.sc-ds-tooltip-chart{width:100%;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.tooltip-chart__items.sc-ds-tooltip-chart{display:contents}.tooltip-chart__swatch-box.sc-ds-tooltip-chart{pointer-events:none}.tooltip-chart__swatch.sc-ds-tooltip-chart{width:var(--dimension-size-100);height:var(--dimension-size-100);flex:none;border-radius:var(--dimension-radius-half);background:var(--ds-tooltip-chart-swatch)}.tooltip-chart__value.sc-ds-tooltip-chart{margin-inline-start:auto;text-align:end}.tooltip-chart__label.sc-ds-tooltip-chart,.tooltip-chart__value.sc-ds-tooltip-chart{flex:none}@keyframes tooltip-chart-fade-in{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tooltip-chart--visible.sc-ds-tooltip-chart-h{animation:none;opacity:1}}@media (forced-colors: active){.sc-ds-tooltip-chart-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const h=12;const p=8;const m=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.value="";this.label="";this.x=0;this.y=0;this.delay=e.animationDelayInstant;this.side="right";this.align="bottom";this.visible=false;this.delayTimer=null}componentDidLoad(){this.scheduleShow();this.calculatePlacement()}disconnectedCallback(){this.clearDelayTimer()}onAnchorChange(){requestAnimationFrame((()=>this.calculatePlacement()))}onDelayChange(){if(!this.visible)this.scheduleShow()}get showDelayMs(){return c(this.delay,e.animationDelayInstant)}clearDelayTimer(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}}scheduleShow(){this.clearDelayTimer();this.visible=false;const o=this.showDelayMs;if(o<=0){this.visible=true;return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.visible=true;requestAnimationFrame((()=>this.calculatePlacement()))}),o)}calculatePlacement(){const o=this.el.getBoundingClientRect();if(!o.width||!o.height)return;const t=o.right>window.innerWidth-p?"left":"right";const s=o.bottom>window.innerHeight-p?"top":"bottom";if(t!==this.side)this.side=t;if(s!==this.align)this.align=s}render(){const o=this.side==="right"?`${h}px`:`calc(-100% - ${h}px)`;const t=this.align==="bottom"?`${h}px`:`calc(-100% - ${h}px)`;const r=this.items??[{label:this.label,value:this.value}];const a=r.some((o=>Boolean(o.color)));return s(i,{key:"eced7af582a03de086c09a4c40322890c73175a2",class:{"tooltip-chart":true,"tooltip-chart--visible":this.visible,"ds-chrome-column":true,"ds-chrome-space--sm":true},style:{left:`${this.x}px`,top:`${this.y}px`,transform:`translate(${o}, ${t})`}},this.heading&&s("ds-text",{key:"ce1d8d97faa8df595dff3e39f190ee614f6c3c28",class:"tooltip-chart__heading ds-control-section-heading ds-control--md",as:"span",variant:d.md,emphasis:true,color:"var(--color-foreground-primary)"},this.heading),s("div",{key:"ea4ff7f2d5b5daad8486fdc47734db961b2c1916",class:"tooltip-chart__items"},r.map(((o,t)=>s("div",{class:"tooltip-chart__item ds-control-frame ds-control--md",key:`${o.label}-${t}`},a&&s("span",{class:"tooltip-chart__swatch-box ds-control-icon-box","aria-hidden":"true"},o.color&&s("span",{class:"tooltip-chart__swatch",style:{"--ds-tooltip-chart-swatch":o.color}})),s("ds-text",{class:"tooltip-chart__label ds-control-label-box",as:"span",variant:n.md,color:"var(--color-foreground-secondary)"},o.label),s("ds-text",{class:"tooltip-chart__value ds-control-label-box",as:"span",variant:n.md,emphasis:true,color:"var(--color-foreground-primary)"},o.value))))))}get el(){return this}static get watchers(){return{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}}static get style(){return l()}},[2,"ds-tooltip-chart",{value:[8],label:[1],heading:[1],items:[16],x:[2],y:[2],delay:[8],side:[32],align:[32],visible:[32]},undefined,{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const o=["ds-tooltip-chart","ds-text"];o.forEach((o=>{switch(o){case"ds-tooltip-chart":if(!customElements.get(r(o))){customElements.define(r(o),m)}break;case"ds-text":if(!customElements.get(r(o))){a()}break}}))}v();export{m as T,v as d};
|
|
2
|
+
//# sourceMappingURL=p-CR7G2BI6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["tooltipChartCss","CURSOR_OFFSET_PX","VIEWPORT_PAD_PX","TooltipChart","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","label","x","y","delay","TOKEN_DEFAULTS","animationDelayInstant","side","align","visible","delayTimer","componentDidLoad","scheduleShow","calculatePlacement","disconnectedCallback","clearDelayTimer","onAnchorChange","requestAnimationFrame","onDelayChange","showDelayMs","resolveCssTimeMs","clearTimeout","ms","setTimeout","rect","el","getBoundingClientRect","width","height","nextSide","right","window","innerWidth","nextAlign","bottom","innerHeight","render","translateX","translateY","rows","items","usesSwatches","some","item","Boolean","color","h","Host","key","class","style","left","top","transform","heading","as","variant","CONTROL_SUPPORTING_TEXT_VARIANT","md","emphasis","map","index","CONTROL_TEXT_VARIANT"],"sources":["src/wc/components/TooltipChart/TooltipChart.css?tag=ds-tooltip-chart&encapsulation=scoped","src/wc/components/TooltipChart/TooltipChart.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n position: absolute;\n z-index: var(--dimension-z-index-tooltip);\n background-color: var(--color-translucent-translucent);\n backdrop-filter: blur(var(--effect-blur-md));\n -webkit-backdrop-filter: blur(var(--effect-blur-md));\n border-radius: var(--ds-radius-tooltip-menu);\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n}\n\n:host(.tooltip-chart--visible) {\n animation: tooltip-chart-fade-in var(--effect-motion-short-2) forwards;\n}\n\n.tooltip-chart__item {\n width: 100%;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.tooltip-chart__items {\n display: contents;\n}\n\n.tooltip-chart__swatch-box {\n pointer-events: none;\n}\n\n.tooltip-chart__swatch {\n width: var(--dimension-size-100);\n height: var(--dimension-size-100);\n flex: none;\n border-radius: var(--dimension-radius-half);\n background: var(--ds-tooltip-chart-swatch);\n}\n\n.tooltip-chart__value {\n margin-inline-start: auto;\n text-align: end;\n}\n\n.tooltip-chart__label,\n.tooltip-chart__value {\n flex: none;\n}\n\n@keyframes tooltip-chart-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host(.tooltip-chart--visible) {\n animation: none;\n opacity: 1;\n }\n}\n\n@media (forced-colors: active) {\n :host {\n box-shadow: none;\n outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n }\n}\n","import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport {\n CONTROL_SUPPORTING_TEXT_VARIANT,\n CONTROL_TEXT_VARIANT,\n resolveCssTimeMs,\n TOKEN_DEFAULTS,\n} from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipChartSide = 'left' | 'right';\nexport type TooltipChartAlign = 'top' | 'bottom';\n\nexport interface TooltipChartItem {\n label: string;\n value: string | number;\n color?: string;\n}\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * polar arc, …). A composition may suppress it when a visible legend already\n * surfaces the same value.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n tag: 'ds-tooltip-chart',\n styleUrl: 'TooltipChart.css',\n scoped: true,\n})\nexport class TooltipChart {\n @Element() el!: HTMLElement;\n\n @Prop() value: string | number = '';\n @Prop() label: string = '';\n /** Optional heading for grouped chart focus. */\n @Prop() heading?: string;\n /** Multi-row content. When supplied, this replaces the legacy label/value row. */\n @Prop() items?: TooltipChartItem[];\n /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n @Prop() x: number = 0;\n @Prop() y: number = 0;\n\n /**\n * Show delay after mount before the callout appears.\n * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n * immediate feedback while scrubbing; prefer the default. Mount once per\n * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n @State() private side: TooltipChartSide = 'right';\n @State() private align: TooltipChartAlign = 'bottom';\n @State() private visible: boolean = false;\n\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n this.scheduleShow();\n this.calculatePlacement();\n }\n\n disconnectedCallback() {\n this.clearDelayTimer();\n }\n\n @Watch('x')\n @Watch('y')\n onAnchorChange() {\n requestAnimationFrame(() => this.calculatePlacement());\n }\n\n @Watch('delay')\n onDelayChange() {\n if (!this.visible) this.scheduleShow();\n }\n\n private get showDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n }\n\n private clearDelayTimer() {\n if (this.delayTimer) {\n clearTimeout(this.delayTimer);\n this.delayTimer = null;\n }\n }\n\n private scheduleShow() {\n this.clearDelayTimer();\n this.visible = false;\n const ms = this.showDelayMs;\n if (ms <= 0) {\n this.visible = true;\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n this.visible = true;\n requestAnimationFrame(() => this.calculatePlacement());\n }, ms);\n }\n\n private calculatePlacement() {\n const rect = this.el.getBoundingClientRect();\n if (!rect.width || !rect.height) return;\n\n const nextSide: TooltipChartSide =\n rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n const nextAlign: TooltipChartAlign =\n rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n if (nextSide !== this.side) this.side = nextSide;\n if (nextAlign !== this.align) this.align = nextAlign;\n }\n\n render() {\n const translateX =\n this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n const translateY =\n this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n const rows = this.items ?? [{ label: this.label, value: this.value }];\n const usesSwatches = rows.some(item => Boolean(item.color));\n\n return (\n <Host\n class={{\n 'tooltip-chart': true,\n 'tooltip-chart--visible': this.visible,\n 'ds-chrome-column': true,\n 'ds-chrome-space--sm': true,\n }}\n style={{\n left: `${this.x}px`,\n top: `${this.y}px`,\n transform: `translate(${translateX}, ${translateY})`,\n }}\n >\n {this.heading && (\n <ds-text\n class=\"tooltip-chart__heading ds-control-section-heading ds-control--md\"\n as=\"span\"\n variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n emphasis\n color=\"var(--color-foreground-primary)\"\n >\n {this.heading}\n </ds-text>\n )}\n <div class=\"tooltip-chart__items\">\n {rows.map((item, index) => (\n <div\n class=\"tooltip-chart__item ds-control-frame ds-control--md\"\n key={`${item.label}-${index}`}\n >\n {usesSwatches && (\n <span class=\"tooltip-chart__swatch-box ds-control-icon-box\" aria-hidden=\"true\">\n {item.color && (\n <span\n class=\"tooltip-chart__swatch\"\n style={{ '--ds-tooltip-chart-swatch': item.color }}\n />\n )}\n </span>\n )}\n <ds-text\n class=\"tooltip-chart__label ds-control-label-box\"\n as=\"span\"\n variant={CONTROL_TEXT_VARIANT.md}\n color=\"var(--color-foreground-secondary)\"\n >\n {item.label}\n </ds-text>\n <ds-text\n class=\"tooltip-chart__value ds-control-label-box\"\n as=\"span\"\n variant={CONTROL_TEXT_VARIANT.md}\n emphasis\n color=\"var(--color-foreground-primary)\"\n >\n {item.value}\n </ds-text>\n </div>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as s,H as o,c as d,h as e,a,t as i}from"./index.js";import{d as r}from"./p-DQpw21HO.js";import{d as t}from"./p-CD9AbaHQ.js";import{d as n}from"./p-Cea7rROU.js";import{d as l}from"./p-0XTyQNRG.js";import{d as c}from"./p-B9oadFSC.js";import{d as m}from"./p-14sMoeTr.js";import{a as h,T as p}from"./p-CUL5_8JM.js";const f=()=>`.sc-ds-modal-h,.sc-ds-modal:where(.ds-table),.sc-ds-modal:where(.tooltip-popup),.sc-ds-modal:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-modal,.ds-control--lg.sc-ds-modal-h,.ds-control--md.sc-ds-modal-h,.ds-control--md.sc-ds-modal,.ds-control--sm.sc-ds-modal-h,.ds-control--sm.sc-ds-modal,.ds-control--xs.sc-ds-modal-h,.ds-control--xs.sc-ds-modal{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-modal-h,.ds-control--lg.sc-ds-modal{--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-modal-h,.ds-control--md.sc-ds-modal{--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-modal-h,.ds-control--sm.sc-ds-modal{--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-modal-h,.ds-control--xs.sc-ds-modal{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-modal{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-modal{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-modal{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-modal,.ds-chrome-header__trailing.sc-ds-modal{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-modal{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-modal{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-modal{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-modal{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-modal,.ds-chrome-header__description.sc-ds-modal{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-modal{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-modal .ds-chrome-header__description.sc-ds-modal{flex:1 1 var(--dimension-card-width-xs)}.ds-chrome-space--sm.sc-ds-modal-h,.ds-chrome-space--sm.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-modal-h,.ds-chrome-space--md.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-modal-h,.ds-chrome-space--lg.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-modal-h,.ds-chrome-row.sc-ds-modal,.ds-chrome-column.sc-ds-modal-h,.ds-chrome-column.sc-ds-modal,.ds-chrome-grid.sc-ds-modal-h,.ds-chrome-grid.sc-ds-modal{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-modal-h,.ds-chrome-row.sc-ds-modal{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-modal-h,.ds-chrome-column.sc-ds-modal{flex-direction:column}.ds-chrome-grid.sc-ds-modal-h,.ds-chrome-grid.sc-ds-modal{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-modal:root,.sc-ds-modal-h,.ds-forced-colors-scope.sc-ds-modal{--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-modal-h{display:contents}.modal-dialog.sc-ds-modal{display:none;flex-direction:column;max-width:none;max-height:calc(100vh - 2 * var(--dimension-space-200));margin:auto;padding:0;overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border:0;border-radius:var(--ds-radius-modal);box-shadow:var(--effect-elevation-elevated-floating);outline:none;box-sizing:border-box;animation:modalDialogIn var(--effect-motion-short-2) forwards}.modal-dialog[open].sc-ds-modal{display:flex}.modal-dialog.sc-ds-modal::backdrop{background-color:var(--color-background-shade);animation:modalBackdropIn var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal::backdrop{animation:modalBackdropOut var(--effect-motion-short-2) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}@media (prefers-reduced-motion: reduce){.modal-dialog[open].sc-ds-modal,.modal-dialog--closing.sc-ds-modal{animation:none;transform:none}.modal-dialog.sc-ds-modal::backdrop{animation:none;opacity:1}.modal-dialog--closing.sc-ds-modal,.modal-dialog--closing.sc-ds-modal::backdrop{opacity:0}}.modal-header.sc-ds-modal{align-items:flex-start;flex:0 0 auto;color:var(--color-foreground-primary)}.modal-copy.sc-ds-modal,ds-text.modal-heading.sc-ds-modal,ds-text.modal-description.sc-ds-modal{width:auto;text-align:left}ds-text.modal-heading.sc-ds-modal{-webkit-user-select:none;user-select:none}.modal-close-tooltip.sc-ds-modal{flex:0 0 auto}.modal-content.sc-ds-modal{min-height:0;padding:var(--dimension-space-200);overflow-y:auto;flex:1 1 auto;box-sizing:border-box}.modal-footer.sc-ds-modal{justify-content:flex-start;height:var(--dimension-size-800);flex:0 0 auto;border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.modal-footer__actions.sc-ds-modal{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0}.modal-footer--empty.sc-ds-modal{display:none}.modal-footer__actions.sc-ds-modal slot.sc-ds-modal{display:contents}@media (forced-colors: active){.modal-dialog.sc-ds-modal{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const g={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const u=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let b=0;const v=s(class s extends o{constructor(s){super();if(s!==false){this.__registerHost()}this.dsClose=d(this,"dsClose",7);this.dsAfterClose=d(this,"dsAfterClose",7);this.open=false;this.description="";this.closeAriaLabel="Close";this.modalWidth="md";this.closing=false;this.hasFooter=false;this.titleId=`ds-modal-title-${++b}`;this.descriptionId=`${this.titleId}-description`;this.dialogEl=null;this.previousFocus=null;this.closeTimer=null}componentDidLoad(){this.updateFooterPresence();if(this.open)this.onOpenChange(true)}componentDidRender(){if(!this.closing||!this.dialogEl?.open||this.closeTimer)return;const s=this.closeAnimationMs;if(s<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),s)}disconnectedCallback(){this.clearCloseTimer();if(this.dialogEl?.open)this.dialogEl.close()}onOpenChange(s){if(s){this.clearCloseTimer();const s=!!this.dialogEl?.open;this.closing=false;if(!this.dialogEl||s)return;this.previousFocus=document.activeElement;this.dialogEl.showModal();requestAnimationFrame((()=>{if(this.open&&this.dialogEl?.open)this.focusClose()}))}else if(this.dialogEl?.open){this.closing=true}}focusClose(){const s=this.el.querySelector("ds-button-unfilled.modal-close");void s?.setFocus?.()}clearCloseTimer(){if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}requestClose(s,o){if(!this.open||this.closing||!this.dialogEl?.open)return;this.dsClose.emit({reason:s,originalEvent:o});this.open=false}updateFooterPresence(s){const o=s?.assignedNodes()??[];this.hasFooter=o.some((s=>s.nodeType!==Node.TEXT_NODE||!!s.textContent?.trim()))||this.el.querySelector('[slot="footer"]')!==null}handleCancel(s){s.preventDefault();this.requestClose("escape",s)}handleBackdropPointerDown(s){if(s.target===this.dialogEl)this.requestClose("backdrop",s)}handleKeyDown(s){if(s.key==="Escape"){s.preventDefault();this.requestClose("escape",s);return}if(s.key!=="Tab"||!this.dialogEl)return;const o=Array.from(this.dialogEl.querySelectorAll(u)).filter((s=>!s.hasAttribute("disabled")&&s.getAttribute("aria-hidden")!=="true"));if(!o.length){s.preventDefault();this.dialogEl.focus();return}const d=o[0];const e=o[o.length-1];const a=document.activeElement;if(s.shiftKey&&(a===d||a===this.dialogEl)){s.preventDefault();e.focus()}else if(!s.shiftKey&&a===e){s.preventDefault();d.focus()}}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return g[this.modalWidth]}return this.modalWidth}get describedBy(){const s=[this.description?this.descriptionId:"",this.ariaDescribedby??""].filter(Boolean);return s.length>0?s.join(" "):undefined}get closeAnimationMs(){return h(p.motionShort2,p.animationDurationShort3)}finishClose(){if(!this.dialogEl?.open)return;this.dialogEl.close();this.closing=false;this.clearCloseTimer();this.previousFocus?.focus?.();this.previousFocus=null;this.dsAfterClose.emit()}render(){return e(a,{key:"ba28d6368acd5ea9e14ee4b63868c2cddd90aa52"},e("dialog",{key:"13ca0e3fde5a3ba797ea12ab7db28c96240ec4a8",ref:s=>{this.dialogEl=s??null},class:{"modal-dialog":true,"modal-dialog--closing":this.closing},"aria-labelledby":this.titleId,"aria-describedby":this.describedBy,onCancel:s=>this.handleCancel(s),onPointerDown:s=>this.handleBackdropPointerDown(s),onKeyDown:s=>this.handleKeyDown(s),style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},e("div",{key:"a93231cc9bae3a3260499a9fd93b13fd5d553345",class:"modal-header ds-chrome-header ds-chrome-header--bounded"},e("div",{key:"c9ef1e928019514347a9069dd579709f3de6fcae",class:"modal-copy ds-chrome-header__copy ds-chrome-header__copy--stacked ds-control--md"},e("ds-text",{key:"b7160087be9de28f95eff191a809521ffcbb12c4",class:"modal-heading ds-chrome-header__heading",as:"h2",variant:"text-title-small",emphasis:true,color:"primary",lineTruncation:1,textId:this.titleId},this.heading),this.description?e("ds-text",{class:"modal-description ds-chrome-header__description",as:"p",variant:"text-body-medium",color:"secondary",wrap:"wrap",textId:this.descriptionId},this.description):null),e("ds-tooltip",{key:"7eb379139114d18046ae30567e611be077b53966",class:"modal-close-tooltip ds-chrome-header__trailing",label:this.closeAriaLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{key:"ce2fb50ff9b2555d3795544a34b894f70a24ead1",class:"modal-close",variant:"icon",icon:"Cross",size:"md","aria-label":this.closeAriaLabel,activeFill:false,hasBorder:false,onDsClick:s=>this.requestClose("close-button",s.detail)}))),e("div",{key:"4c36c8ef7b16838b83a57048d7a1f41b691fd485",class:"modal-content"},e("slot",{key:"9aa663efc1c792c6313ea610b767461a803dc5d8"})),e("div",{key:"4f96bf0e9ec463e122154be5d6254d79abb30d14",class:{"modal-footer":true,"ds-chrome-row":true,"ds-chrome-space--lg":true,"modal-footer--empty":!this.hasFooter}},e("div",{key:"830c722f8e9a6979534baa407ebeb6c519660209",class:"modal-footer__actions"},e("slot",{key:"51ffdf44b5d8f21e61b83769415d447b42b9031a",name:"footer",onSlotchange:s=>this.updateFooterPresence(s.currentTarget)})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return f()}},[262,"ds-modal",{open:[1028],heading:[1],description:[1],closeAriaLabel:[1,"close-aria-label"],modalWidth:[1,"modal-width"],ariaDescribedby:[1,"aria-describedby"],closing:[32],hasFooter:[32]},undefined,{open:[{onOpenChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const s=["ds-modal","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-modal":if(!customElements.get(i(s))){customElements.define(i(s),v)}break;case"ds-badge":if(!customElements.get(i(s))){r()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){t()}break;case"ds-icon":if(!customElements.get(i(s))){n()}break;case"ds-loader":if(!customElements.get(i(s))){l()}break;case"ds-text":if(!customElements.get(i(s))){c()}break;case"ds-tooltip":if(!customElements.get(i(s))){m()}break}}))}y();export{v as M,y as d};
|
|
2
|
+
//# sourceMappingURL=p-CakRq92x.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","FOCUSABLE_SEL","join","modalIdCounter","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","description","closeAriaLabel","modalWidth","closing","hasFooter","titleId","descriptionId","dialogEl","previousFocus","closeTimer","componentDidLoad","updateFooterPresence","onOpenChange","componentDidRender","closeAnimationMs","finishClose","setTimeout","disconnectedCallback","clearCloseTimer","close","isOpen","alreadyOpen","document","activeElement","showModal","requestAnimationFrame","focusClose","el","querySelector","setFocus","clearTimeout","requestClose","reason","originalEvent","dsClose","emit","slot","assignedNodes","some","node","nodeType","Node","TEXT_NODE","textContent","trim","handleCancel","event","preventDefault","handleBackdropPointerDown","target","handleKeyDown","key","focusables","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","length","focus","first","last","active","shiftKey","resolvedWidth","describedBy","ids","ariaDescribedby","Boolean","undefined","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort2","animationDurationShort3","dsAfterClose","render","h","Host","ref","class","onCancel","onPointerDown","onKeyDown","style","width","as","variant","emphasis","color","lineTruncation","textId","heading","wrap","label","side","size","icon","activeFill","hasBorder","onDsClick","detail","name","onSlotchange","currentTarget"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n display: contents;\n}\n\n.modal-dialog {\n display: none;\n flex-direction: column;\n max-width: none;\n max-height: calc(100vh - 2 * var(--dimension-space-200));\n margin: auto;\n padding: 0;\n overflow: hidden;\n color: var(--color-foreground-primary);\n background-color: var(--color-background-primary);\n border: 0;\n border-radius: var(--ds-radius-modal);\n box-shadow: var(--effect-elevation-elevated-floating);\n outline: none;\n box-sizing: border-box;\n animation: modalDialogIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog[open] {\n display: flex;\n}\n\n.modal-dialog::backdrop {\n background-color: var(--color-background-shade);\n animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing {\n animation: modalDialogOut var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing::backdrop {\n animation: modalBackdropOut var(--effect-motion-short-2) forwards;\n}\n\n@keyframes modalBackdropIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes modalBackdropOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n@keyframes modalDialogIn {\n from {\n opacity: 0;\n transform: scale(0.97) translateY(4px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n@keyframes modalDialogOut {\n from {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n to {\n opacity: 0;\n transform: scale(0.97) translateY(4px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .modal-dialog[open],\n .modal-dialog--closing {\n animation: none;\n transform: none;\n }\n\n .modal-dialog::backdrop {\n animation: none;\n opacity: 1;\n }\n\n .modal-dialog--closing,\n .modal-dialog--closing::backdrop {\n opacity: 0;\n }\n}\n\n.modal-header {\n align-items: flex-start;\n flex: 0 0 auto;\n color: var(--color-foreground-primary);\n}\n\n.modal-copy,\nds-text.modal-heading,\nds-text.modal-description {\n width: auto;\n text-align: left;\n}\n\nds-text.modal-heading {\n -webkit-user-select: none;\n user-select: none;\n}\n\n.modal-close-tooltip {\n flex: 0 0 auto;\n}\n\n.modal-content {\n min-height: 0;\n padding: var(--dimension-space-200);\n overflow-y: auto;\n flex: 1 1 auto;\n box-sizing: border-box;\n}\n\n.modal-footer {\n justify-content: flex-start;\n height: var(--dimension-size-800);\n flex: 0 0 auto;\n border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.modal-footer__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-100);\n min-width: 0;\n}\n\n.modal-footer--empty {\n display: none;\n}\n\n.modal-footer__actions slot {\n display: contents;\n}\n\n@media (forced-colors: active) {\n .modal-dialog {\n box-shadow: none;\n outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n }\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Element,\n Watch,\n h,\n Host,\n} from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\nexport type ModalCloseReason = 'close-button' | 'escape' | 'backdrop';\n\nexport interface ModalCloseDetail {\n reason: ModalCloseReason;\n originalEvent: Event;\n}\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n sm: 'var(--dimension-modal-width-sm)',\n md: 'var(--dimension-modal-width-md)',\n lg: 'var(--dimension-modal-width-lg)',\n};\n\nconst FOCUSABLE_SEL = [\n 'a[href]',\n 'area[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n 'iframe',\n '[contenteditable=\"true\"]',\n '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\n\n@Component({\n tag: 'ds-modal',\n styleUrl: 'Modal.css',\n scoped: true,\n})\nexport class Modal {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() heading!: string;\n /** Optional supporting copy shown below the heading. */\n @Prop() description: string = '';\n @Prop() closeAriaLabel: string = 'Close';\n @Prop() modalWidth: ModalWidth | string = 'md';\n /** Optional id reference for explanatory content in the default slot. */\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n @State() private closing: boolean = false;\n @State() private hasFooter: boolean = false;\n\n /** Emitted when an internal dismissal control requests that the modal close. */\n @Event() dsClose!: EventEmitter<ModalCloseDetail>;\n /** Emitted after exit motion completes, the top layer closes, and focus is restored. */\n @Event() dsAfterClose!: EventEmitter<void>;\n\n private titleId = `ds-modal-title-${++modalIdCounter}`;\n private descriptionId = `${this.titleId}-description`;\n private dialogEl: HTMLDialogElement | null = null;\n private previousFocus: HTMLElement | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n this.updateFooterPresence();\n if (this.open) this.onOpenChange(true);\n }\n\n componentDidRender() {\n if (!this.closing || !this.dialogEl?.open || this.closeTimer) return;\n const closeAnimationMs = this.closeAnimationMs;\n if (closeAnimationMs <= 0) {\n this.finishClose();\n return;\n }\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.finishClose();\n }, closeAnimationMs);\n }\n\n disconnectedCallback() {\n this.clearCloseTimer();\n if (this.dialogEl?.open) this.dialogEl.close();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.clearCloseTimer();\n const alreadyOpen = !!this.dialogEl?.open;\n this.closing = false;\n if (!this.dialogEl || alreadyOpen) return;\n this.previousFocus = document.activeElement as HTMLElement | null;\n this.dialogEl.showModal();\n requestAnimationFrame(() => {\n if (this.open && this.dialogEl?.open) this.focusClose();\n });\n } else if (this.dialogEl?.open) {\n this.closing = true;\n }\n }\n\n private focusClose() {\n const close = this.el.querySelector('ds-button-unfilled.modal-close') as\n | (HTMLElement & { setFocus?: () => Promise<void> })\n | null;\n void close?.setFocus?.();\n }\n\n private clearCloseTimer() {\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private requestClose(reason: ModalCloseReason, originalEvent: Event) {\n if (!this.open || this.closing || !this.dialogEl?.open) return;\n this.dsClose.emit({ reason, originalEvent });\n this.open = false;\n }\n\n private updateFooterPresence(slot?: HTMLSlotElement) {\n const assignedNodes = slot?.assignedNodes() ?? [];\n this.hasFooter =\n assignedNodes.some(node => node.nodeType !== Node.TEXT_NODE || !!node.textContent?.trim()) ||\n this.el.querySelector('[slot=\"footer\"]') !== null;\n }\n\n private handleCancel(event: Event) {\n event.preventDefault();\n this.requestClose('escape', event);\n }\n\n private handleBackdropPointerDown(event: PointerEvent) {\n if (event.target === this.dialogEl) this.requestClose('backdrop', event);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n event.preventDefault();\n this.requestClose('escape', event);\n return;\n }\n if (event.key !== 'Tab' || !this.dialogEl) return;\n const focusables = Array.from(\n this.dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)\n ).filter(\n element => !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true'\n );\n if (!focusables.length) {\n event.preventDefault();\n this.dialogEl.focus();\n return;\n }\n const first = focusables[0];\n const last = focusables[focusables.length - 1];\n const active = document.activeElement;\n if (event.shiftKey && (active === first || active === this.dialogEl)) {\n event.preventDefault();\n last.focus();\n } else if (!event.shiftKey && active === last) {\n event.preventDefault();\n first.focus();\n }\n }\n\n private get resolvedWidth(): string {\n if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n return WIDTH_MAP[this.modalWidth];\n }\n return this.modalWidth as string;\n }\n\n private get describedBy(): string | undefined {\n const ids = [this.description ? this.descriptionId : '', this.ariaDescribedby ?? ''].filter(\n Boolean\n );\n return ids.length > 0 ? ids.join(' ') : undefined;\n }\n\n private get closeAnimationMs(): number {\n return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private finishClose() {\n if (!this.dialogEl?.open) return;\n this.dialogEl.close();\n this.closing = false;\n this.clearCloseTimer();\n this.previousFocus?.focus?.();\n this.previousFocus = null;\n this.dsAfterClose.emit();\n }\n\n render() {\n return (\n <Host>\n <dialog\n ref={(element?: HTMLDialogElement) => {\n this.dialogEl = element ?? null;\n }}\n class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n aria-labelledby={this.titleId}\n aria-describedby={this.describedBy}\n onCancel={(event: Event) => this.handleCancel(event)}\n onPointerDown={(event: PointerEvent) => this.handleBackdropPointerDown(event)}\n onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}\n style={{\n width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`,\n }}\n >\n <div class=\"modal-header ds-chrome-header ds-chrome-header--bounded\">\n <div class=\"modal-copy ds-chrome-header__copy ds-chrome-header__copy--stacked ds-control--md\">\n <ds-text\n class=\"modal-heading ds-chrome-header__heading\"\n as=\"h2\"\n variant=\"text-title-small\"\n emphasis\n color=\"primary\"\n lineTruncation={1}\n textId={this.titleId}\n >\n {this.heading}\n </ds-text>\n {this.description ? (\n <ds-text\n class=\"modal-description ds-chrome-header__description\"\n as=\"p\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n wrap=\"wrap\"\n textId={this.descriptionId}\n >\n {this.description}\n </ds-text>\n ) : null}\n </div>\n <ds-tooltip\n class=\"modal-close-tooltip ds-chrome-header__trailing\"\n label={this.closeAriaLabel}\n side=\"bottom\"\n size=\"sm\"\n >\n <ds-button-unfilled\n class=\"modal-close\"\n variant=\"icon\"\n icon=\"Cross\"\n size=\"md\"\n aria-label={this.closeAriaLabel}\n activeFill={false}\n hasBorder={false}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.requestClose('close-button', event.detail)\n }\n />\n </ds-tooltip>\n </div>\n <div class=\"modal-content\">\n <slot />\n </div>\n <div\n class={{\n 'modal-footer': true,\n 'ds-chrome-row': true,\n 'ds-chrome-space--lg': true,\n 'modal-footer--empty': !this.hasFooter,\n }}\n >\n <div class=\"modal-footer__actions\">\n <slot\n name=\"footer\"\n onSlotchange={(event: Event) =>\n this.updateFooterPresence(event.currentTarget as HTMLSlotElement)\n }\n />\n </div>\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as t,H as o,c as n,h as i,t as d,a as s}from"./index.js";import{r as e,b as r}from"./p-DZ58Sg5a.js";import{d as l}from"./p-DQpw21HO.js";import{d as a}from"./p-Cea7rROU.js";import{d as c}from"./p-0XTyQNRG.js";import{d as u}from"./p-B9oadFSC.js";import{c as b}from"./p-DuFm-ieS.js";const f=()=>`.sc-ds-button-filled-h,.sc-ds-button-filled:where(.ds-table),.sc-ds-button-filled:where(.tooltip-popup),.sc-ds-button-filled:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--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-button-filled-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-button-filled-h,.ds-focus-ring.sc-ds-button-filled,.ds-focus-ring-inset.sc-ds-button-filled-h,.ds-focus-ring-inset.sc-ds-button-filled{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-button-filled-h:focus-visible,.ds-focus-ring.sc-ds-button-filled: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-button-filled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-filled{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-button-filled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-filled: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-button-filled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::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-button-filled-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{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-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::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-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-button-filled-h::after,.ds-interaction-fill--grouped.sc-ds-button-filled::after,.ds-interaction-fill--grouped.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-button-filled-h,.ds-interaction-fill--grouped.sc-ds-button-filled{--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-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-button-filled-h,.ds-interaction-fill--on-faint.sc-ds-button-filled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-translucent.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-inverted.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-media.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--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)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-button-filled-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-button-filled:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::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--surface-open.sc-ds-button-filled-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-button-filled:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::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-button-filled-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-button-filled: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)}}.ds-control-press-scale.sc-ds-button-filled{transition:scale var(--effect-motion-short-2)}.ds-control-press-scale.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:var(--ds-control-press-active-scale, var(--dimension-scale-subtle))}@media (prefers-reduced-motion: reduce){.ds-control-press-scale.sc-ds-button-filled,.ds-control-press-scale.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:none;transition:none}}@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--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-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-button-filled,.ds-control--lg.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled,.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled,.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-button-filled-h,.ds-control--lg.sc-ds-button-filled{--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-button-filled-h,.ds-control--md.sc-ds-button-filled{--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-button-filled-h,.ds-control--sm.sc-ds-button-filled{--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-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control--lg.ds-control--inset.sc-ds-button-filled-h,.ds-control--lg.ds-control--inset.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-025))}.ds-control--md.ds-control--inset.sc-ds-button-filled-h,.ds-control--md.ds-control--inset.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-025))}.ds-control--sm.ds-control--inset.sc-ds-button-filled-h,.ds-control--sm.ds-control--inset.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-025))}.ds-control--xs.ds-control--inset.sc-ds-button-filled-h,.ds-control--xs.ds-control--inset.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-025) - var(--dimension-space-025))}.ds-control--lg.ds-control--inset-double.sc-ds-button-filled-h,.ds-control--lg.ds-control--inset-double.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-050))}.ds-control--md.ds-control--inset-double.sc-ds-button-filled-h,.ds-control--md.ds-control--inset-double.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-050))}.ds-control--sm.ds-control--inset-double.sc-ds-button-filled-h,.ds-control--sm.ds-control--inset-double.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-050))}.ds-control-frame.sc-ds-button-filled{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-button-filled{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-button-filled{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-button-filled{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-button-filled{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-button-filled{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none}.ds-button-host--icon.ds-control-width--hug.sc-ds-button-filled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-button-host--icon.ds-control-width--fill.sc-ds-button-filled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-filled-h .ds-button.sc-ds-button-filled{width:100%}.ds-button.sc-ds-button-filled{justify-content:center;overflow:hidden;min-inline-size:var(--ds-control-height);border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));border-start-start-radius:var( --ds-button-radius-start-start, var(--ds-control-radius, var(--dimension-radius-025)) );border-start-end-radius:var( --ds-button-radius-start-end, var(--ds-control-radius, var(--dimension-radius-025)) );border-end-start-radius:var( --ds-button-radius-end-start, var(--ds-control-radius, var(--dimension-radius-025)) );border-end-end-radius:var( --ds-button-radius-end-end, var(--ds-control-radius, var(--dimension-radius-025)) );cursor:default;-webkit-user-select:none;user-select:none}.ds-button--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.ds-button--rounded.sc-ds-button-filled{--ds-control-radius:var(--dimension-radius-half)}.ds-button--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012)}.ds-button--bordered.sc-ds-button-filled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-button__icon-wrap.sc-ds-button-filled,.ds-button__label.sc-ds-button-filled,.ds-button__chevron.sc-ds-button-filled{position:relative;z-index:2}.ds-button__label.sc-ds-button-filled{flex-shrink:0;min-width:0;white-space:nowrap}.ds-button__label--loading.sc-ds-button-filled,.ds-button__chevron--loading.sc-ds-button-filled{visibility:hidden}.ds-button.sc-ds-button-filled>.ds-button__loader-overlay.sc-ds-button-filled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.ds-button__dot.sc-ds-button-filled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}@media (forced-colors: active){.ds-button.sc-ds-button-filled{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}.ds-button-split.sc-ds-button-filled{position:relative;display:inline-flex;align-items:stretch;min-width:0;overflow:hidden;gap:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent}.ds-control-width--fill.sc-ds-button-filled-h .ds-button-split.sc-ds-button-filled{width:100%}.ds-button-split.sc-ds-button-filled>.ds-button-split__primary.sc-ds-button-filled{flex:1 1 auto;width:auto;min-width:0;border-start-end-radius:var(--dimension-radius-000);border-end-end-radius:var(--dimension-radius-000)}.ds-button-split.sc-ds-button-filled>.ds-button-split__menu.sc-ds-button-filled{flex:0 0 var(--ds-control-height);width:var(--ds-control-height);min-width:var(--ds-control-height);border-start-start-radius:var(--dimension-radius-000);border-end-start-radius:var(--dimension-radius-000)}.ds-button-split__divider.sc-ds-button-filled{position:relative;z-index:3;align-self:stretch;flex:0 0 0;margin-inline-start:calc(-1 * var(--dimension-stroke-width-012));border-inline-start:var(--dimension-stroke-width-012) solid var(--ds-button-split-divider);pointer-events:none}.ds-button-split__divider--content-height.sc-ds-button-filled{align-self:center;block-size:var(--ds-button-split-divider-content-height)}.ds-button-split__outline.sc-ds-button-filled{position:absolute;z-index:3;inset:0;border:var(--dimension-stroke-width-012) solid var(--ds-button-split-border);border-radius:inherit;pointer-events:none}.ds-control--lg.sc-ds-button-filled-h{--ds-button-split-divider-content-height:var(--dimension-size-300)}.ds-control--md.sc-ds-button-filled-h{--ds-button-split-divider-content-height:var(--dimension-size-250)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled-h{--ds-button-split-divider-content-height:var(--dimension-size-200)}.ds-button-split-host--primary-icon.ds-control-width--hug.sc-ds-button-filled-h .ds-button-split.sc-ds-button-filled>.ds-button-split__primary.sc-ds-button-filled{flex:0 0 var(--ds-control-height);width:var(--ds-control-height);min-width:var(--ds-control-height);height:var(--ds-control-height)}.ds-button-split--rounded.sc-ds-button-filled{border-radius:var(--dimension-radius-half)}.sc-ds-button-filled-h{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand);--ds-button-filled-border:var(--color-border-secondary);--ds-button-split-border:var(--color-border-secondary);--ds-button-split-divider:var(--color-border-on-bold-background-tertiary)}.button-filled-host--contrast-strong.sc-ds-button-filled-h{--ds-button-split-divider:var(--color-border-on-strong-background-tertiary)}.button-filled-host--contrast-medium.sc-ds-button-filled-h{--ds-button-split-divider:var(--color-border-on-medium-background-tertiary)}.button-filled-host--contrast-faint.sc-ds-button-filled-h{--ds-button-split-divider:var(--color-border-tertiary)}.button-filled-host--background-medium.sc-ds-button-filled-h{--ds-button-split-border:var(--color-border-on-medium-background-secondary)}.button-filled-host--background-bold.sc-ds-button-filled-h{--ds-button-split-border:var(--color-border-on-bold-background-secondary)}.button-filled-host--background-strong.sc-ds-button-filled-h{--ds-button-split-border:var(--color-border-on-strong-background-secondary)}.button-filled-host--background-translucent.sc-ds-button-filled-h{--ds-button-split-border:var(--color-translucent-border-secondary)}.button-filled-host--background-inverted.sc-ds-button-filled-h{--ds-button-split-border:var(--color-inverted-border-secondary)}.button-filled-host--background-media.sc-ds-button-filled-h{--ds-button-split-border:var(--color-media-border-secondary)}.button-filled-host--background-always-dark.sc-ds-button-filled-h{--ds-button-split-border:var(--color-always-dark-border-secondary)}.button-filled.sc-ds-button-filled{background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.button-filled--bordered.sc-ds-button-filled{--ds-interaction-border-color:var(--ds-button-filled-border)}.button-filled--background-medium.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-medium-background-secondary)}.button-filled--background-bold.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-bold-background-secondary)}.button-filled--background-strong.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-strong-background-secondary)}.button-filled--background-translucent.sc-ds-button-filled{--ds-button-filled-border:var(--color-translucent-border-secondary)}.button-filled--background-inverted.sc-ds-button-filled{--ds-button-filled-border:var(--color-inverted-border-secondary)}.button-filled--background-media.sc-ds-button-filled{--ds-button-filled-border:var(--color-media-border-secondary)}.button-filled--background-always-dark.sc-ds-button-filled{--ds-button-filled-border:var(--color-always-dark-border-secondary)}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}.button-filled--contrast-bold.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-bold-background-primary)}.button-filled--contrast-strong.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-strong-background-primary)}.button-filled--contrast-medium.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-medium-background-primary)}`;const v=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick",7);this.dsMenuClick=n(this,"dsMenuClick",7);this.variant="label";this.size="md";this.isInset=false;this.insetDepth="single";this.width="hug";this.label="";this.labelEmphasis=true;this.icon="";this.intent="brand";this.contrast="bold";this.hasBorder=false;this.rounded=false;this.pressScale=true;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.split=false;this.menuAriaLabel="More options";this.hasMenu=false;this.buttonEl=null;this.menuButtonEl=null;this.handleClick=t=>{if(this.isInactive||this.isLoading){t.preventDefault();t.stopPropagation();return}this.dsClick.emit(t)};this.handleMenuClick=t=>{if(this.isInactive||this.isLoading){t.preventDefault();t.stopPropagation();return}this.dsMenuClick.emit(t)}}async setFocus(t="primary"){(t==="menu"?this.menuButtonEl:this.buttonEl)?.focus()}get resolvedHaspopup(){return this.haspopup??(this.hasMenu?"menu":undefined)}get resolvedSurfaceOpen(){return(this.surfaceOpen??this.expanded===true)&&!this.isInactive}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}get doubleInset(){return this.isInset&&this.insetDepth==="double"&&this.size!=="xs"}buttonClass(t,o,n){const i={"button-filled":true,"ds-button":true,"ds-focus-ring-inset":true,"ds-control-press-scale":this.pressScale&&!this.split,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","button-filled--bordered":n,"ds-button--bordered":n,"button-filled--expanded":o&&!this.isInactive,"ds-interaction-fill--surface-open":o,"ds-button--expanded":o&&!this.isInactive,"ds-control-inactive":this.isInactive,"ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,"ds-control-frame":true,"button-filled--icon":t==="icon","ds-button--icon":t==="icon","button-filled--label":t==="label","button-filled--icon-label":t==="icon-label","button-filled--rounded":this.rounded,"ds-button--rounded":this.rounded,[`button-filled--background-${this.background}`]:this.background!==undefined,[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:true};return i}render(){const t=i("button",{key:"e64dbe8351034366a0cc5a657748b2ff8eeb9d2d",ref:t=>{this.buttonEl=t??null},type:this.type,class:{...this.buttonClass(this.variant,!this.split&&this.resolvedSurfaceOpen,this.hasBorder&&!this.split),"ds-button-split__primary":this.split},disabled:this.isInactive,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,"aria-controls":this.split?undefined:this.controls,"aria-expanded":this.split||this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.split?undefined:this.resolvedHaspopup,onPointerDown:t=>r(t,this.pressScale&&!this.split&&!this.isInactive&&!this.isLoading),onClick:this.handleClick},e({namespace:"button-filled",variant:this.variant,size:this.size,label:this.label,labelEmphasis:this.labelEmphasis,icon:this.icon,hasMenu:!this.split&&this.hasMenu,isLoading:this.isLoading}));const o=this.split?i("div",{class:{"ds-button-split":true,"ds-button-split--rounded":this.rounded}},t,i("span",{class:"ds-button-split__divider","aria-hidden":"true"}),i("button",{ref:t=>{this.menuButtonEl=t??null},class:{...this.buttonClass("icon",this.resolvedSurfaceOpen,false),"ds-button-split__menu":true},type:"button",disabled:this.isInactive||this.isLoading,"aria-label":this.menuAriaLabel,"aria-controls":this.controls,"aria-expanded":String(this.expanded===true),"aria-haspopup":"menu",onClick:this.handleMenuClick},e({namespace:"button-filled",variant:"icon",size:this.size,label:"",labelEmphasis:true,icon:"ChevronDown",hasMenu:false,isLoading:false})),this.hasBorder?i("span",{class:"ds-button-split__outline","aria-hidden":"true"}):null):t;return i(s,{key:"41a8d5cad2cd6e0ae639357559c71e3310e1eb94",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon"&&!this.split,"ds-button-host--icon":this.variant==="icon"&&!this.split,"ds-button-split-host":this.split,"ds-button-split-host--primary-icon":this.split&&this.variant==="icon",[`button-filled-host--contrast-${this.contrast}`]:this.split,[`button-filled-host--background-${this.background}`]:this.split&&this.background!==undefined,"ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,...b(this.width)},tabIndex:-1},o)}get el(){return this}static get style(){return f()}},[2,"ds-button-filled",{variant:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],width:[1],label:[1],labelEmphasis:[4,"label-emphasis"],icon:[1],intent:[1],contrast:[1],hasBorder:[4,"has-border"],background:[1],rounded:[4],pressScale:[4,"press-scale"],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],surfaceOpen:[4,"surface-open"],haspopup:[1],split:[4],menuAriaLabel:[1,"menu-aria-label"],hasMenu:[4,"has-menu"],setFocus:[64]}]);function h(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-badge","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(d(t))){customElements.define(d(t),v)}break;case"ds-badge":if(!customElements.get(d(t))){l()}break;case"ds-icon":if(!customElements.get(d(t))){a()}break;case"ds-loader":if(!customElements.get(d(t))){c()}break;case"ds-text":if(!customElements.get(d(t))){u()}break}}))}h();export{v as B,h as d};
|
|
2
|
+
//# sourceMappingURL=p-CumGY3uN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["buttonFilledCss","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","isInset","insetDepth","width","label","labelEmphasis","icon","intent","contrast","hasBorder","rounded","pressScale","isInactive","isLoading","type","ariaLabel","split","menuAriaLabel","hasMenu","buttonEl","menuButtonEl","handleClick","event","preventDefault","stopPropagation","dsClick","emit","handleMenuClick","dsMenuClick","setFocus","segment","focus","resolvedHaspopup","haspopup","undefined","resolvedSurfaceOpen","surfaceOpen","expanded","accessibleName","doubleInset","buttonClass","bordered","cls","background","render","primaryButton","h","key","ref","el","class","disabled","controls","String","onPointerDown","beginElevatedControlPress","onClick","renderButtonContent","namespace","control","Host","controlWidthClass","tabIndex"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/button-base.css';\n@import '../../utils/button-split.css';\n\n:host {\n --ds-button-filled-bg: var(--color-background-bold-brand);\n --ds-button-filled-fg: var(--color-foreground-faint-brand);\n --ds-button-filled-border: var(--color-border-secondary);\n --ds-button-split-border: var(--color-border-secondary);\n --ds-button-split-divider: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.button-filled-host--contrast-strong) {\n --ds-button-split-divider: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.button-filled-host--contrast-medium) {\n --ds-button-split-divider: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.button-filled-host--contrast-faint) {\n --ds-button-split-divider: var(--color-border-tertiary);\n}\n\n:host(.button-filled-host--background-medium) {\n --ds-button-split-border: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.button-filled-host--background-bold) {\n --ds-button-split-border: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.button-filled-host--background-strong) {\n --ds-button-split-border: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.button-filled-host--background-translucent) {\n --ds-button-split-border: var(--color-translucent-border-secondary);\n}\n\n:host(.button-filled-host--background-inverted) {\n --ds-button-split-border: var(--color-inverted-border-secondary);\n}\n\n:host(.button-filled-host--background-media) {\n --ds-button-split-border: var(--color-media-border-secondary);\n}\n\n:host(.button-filled-host--background-always-dark) {\n --ds-button-split-border: var(--color-always-dark-border-secondary);\n}\n\n.button-filled {\n background-color: var(--ds-button-filled-bg);\n color: var(--ds-button-filled-fg);\n transition:\n background-color var(--effect-motion-short-2),\n color var(--effect-motion-short-2);\n /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. ButtonFilled\n * deliberately has no active state, so hold the pressed wash for the popup's\n * complete rendered lifecycle instead of promoting any selected treatment.\n */\n/* Inset stroke via interaction-fill ::after (above hover and pressed washes). */\n.button-filled--bordered {\n --ds-interaction-border-color: var(--ds-button-filled-border);\n}\n\n/*\n * Parent-surface context affects only the optional inset border.\n * Intent + contrast continue to own fill, foreground, and interaction overlays.\n */\n.button-filled--background-medium {\n --ds-button-filled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-filled--background-bold {\n --ds-button-filled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-filled--background-strong {\n --ds-button-filled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-filled--background-translucent {\n --ds-button-filled-border: var(--color-translucent-border-secondary);\n}\n\n.button-filled--background-inverted {\n --ds-button-filled-border: var(--color-inverted-border-secondary);\n}\n\n.button-filled--background-media {\n --ds-button-filled-border: var(--color-media-border-secondary);\n}\n\n.button-filled--background-always-dark {\n --ds-button-filled-border: var(--color-always-dark-border-secondary);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-bold-neutral);\n --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-bold-brand);\n --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-bold-ai);\n --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-bold-negative);\n --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-bold-warning);\n --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-bold-caution);\n --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-bold-positive);\n --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-bold-guide);\n --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-strong-neutral);\n --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-strong-brand);\n --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-strong-ai);\n --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-strong-negative);\n --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-strong-warning);\n --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-strong-caution);\n --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-strong-positive);\n --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-strong-guide);\n --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-medium-neutral);\n --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-medium-brand);\n --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-medium-ai);\n --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-medium-negative);\n --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-medium-warning);\n --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-medium-caution);\n --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-medium-positive);\n --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-medium-guide);\n --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-faint-neutral);\n --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-faint-brand);\n --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-faint-ai);\n --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-faint-negative);\n --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-faint-warning);\n --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-faint-caution);\n --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-faint-positive);\n --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-faint-guide);\n --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n\n/*\n * Bold, strong, and medium fills already communicate semantic intent. Their\n * on-background foreground tokens preserve AA text contrast across themes,\n * including brand pairs whose chromatic counterparts sit on the 4.5:1 edge.\n */\n.button-filled--contrast-bold.button-filled {\n --ds-button-filled-fg: var(--color-foreground-on-bold-background-primary);\n}\n\n.button-filled--contrast-strong.button-filled {\n --ds-button-filled-fg: var(--color-foreground-on-strong-background-primary);\n}\n\n.button-filled--contrast-medium.button-filled {\n --ds-button-filled-fg: var(--color-foreground-on-medium-background-primary);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport type { ChoiceBackground } from '../../utils/choice-list';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type { ControlInsetDepth } from '../../utils/control-text';\nimport type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';\n\nexport type ButtonFilledIntent =\n | 'neutral'\n | 'brand'\n | 'ai'\n | 'negative'\n | 'warning'\n | 'caution'\n | 'positive'\n | 'guide'\n | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledBackground = ChoiceBackground;\n\nexport type ButtonFilledVariant = ButtonVariant;\nexport type ButtonFilledSize = ButtonSize;\nexport type ButtonFilledWidth = ButtonWidth;\nexport type ButtonFilledPopup = ButtonPopup;\n\n@Component({\n tag: 'ds-button-filled',\n styleUrl: 'ButtonFilled.css',\n scoped: true,\n})\nexport class ButtonFilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonFilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonFilledSize = 'md';\n\n /** Use reduced outer geometry when nested inside a control of the same size. */\n @Prop() isInset: boolean = false;\n\n /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n @Prop() insetDepth: ControlInsetDepth = 'single';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonFilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Whether the visible label uses the emphasized weight. */\n @Prop() labelEmphasis: boolean = true;\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /** Semantic colour intent. */\n @Prop() intent: ButtonFilledIntent = 'brand';\n\n /**\n * Background fill weight. Foreground uses the paired contrast token:\n * bold → faint, strong → medium, medium → strong, faint → bold.\n */\n @Prop() contrast: ButtonFilledContrast = 'bold';\n\n /** Show a 1px secondary inset border. */\n @Prop() hasBorder: boolean = false;\n\n /**\n * Actual parent surface context for the optional inset border color only.\n * Omit on primary and secondary surfaces.\n */\n @Prop() background: ButtonFilledBackground | undefined;\n\n /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\n\n /**\n * Scale down during a physical pointer press.\n * Disable when an owning composite requires fixed child or background geometry.\n */\n @Prop() pressScale: boolean = true;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n /** ID of the popup this button controls. */\n @Prop() controls: string | undefined;\n\n /**\n * Controlled disclosure state forwarded to aria-expanded.\n * Using expanded alone for surface-open styling is deprecated; set surfaceOpen\n * explicitly to separate the rendered surface lifecycle from disclosure state.\n */\n @Prop() expanded: boolean | undefined;\n\n /**\n * The associated menu, picker, or panel is visible, including its exit motion.\n * Holds only the pressed wash; does not set ARIA, selection, or press scaling.\n * In split mode this applies only to the menu segment. Explicit false disables\n * the legacy expanded-derived wash; omission preserves that compatibility path.\n */\n @Prop() surfaceOpen: boolean | undefined;\n\n /** Popup type exposed to assistive technology. */\n @Prop() haspopup: ButtonFilledPopup | undefined;\n\n /**\n * Append a separate ChevronDown menu segment while preserving this button's\n * variant, size, intent, contrast, loading, inactive, and width treatment.\n */\n @Prop() split: boolean = false;\n\n /** Accessible name for the appended menu segment in split mode. */\n @Prop() menuAriaLabel: string = 'More options';\n\n /**\n * This action *has* a menu: implies `aria-haspopup=\"menu\"` and adds the trailing\n * chevron that carries the affordance.\n *\n * Only `label` and `icon-label` are supported. A filled button is never the\n * overflow / more-options control — that role belongs to ButtonUnfilled with an\n * `Ellipses` glyph, which conveys the menu without a chevron.\n *\n * Use `haspopup` directly for non-menu popups.\n */\n @Prop() hasMenu: boolean = false;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n @Event() dsMenuClick!: EventEmitter<MouseEvent>;\n\n private buttonEl: HTMLButtonElement | null = null;\n private menuButtonEl: HTMLButtonElement | null = null;\n\n @Method()\n async setFocus(segment: 'primary' | 'menu' = 'primary') {\n (segment === 'menu' ? this.menuButtonEl : this.buttonEl)?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsClick.emit(event);\n };\n\n private handleMenuClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsMenuClick.emit(event);\n };\n\n private get resolvedHaspopup(): ButtonFilledPopup | undefined {\n return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n }\n\n private get resolvedSurfaceOpen(): boolean {\n return (this.surfaceOpen ?? this.expanded === true) && !this.isInactive;\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n private get doubleInset(): boolean {\n return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n }\n\n private buttonClass(\n variant: ButtonFilledVariant,\n expanded: boolean,\n bordered: boolean\n ): Record<string, boolean> {\n const cls: Record<string, boolean> = {\n 'button-filled': true,\n 'ds-button': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-press-scale': this.pressScale && !this.split,\n 'ds-interaction-fill': !this.isInactive,\n /* Bold is the default filled contrast — on-bold interaction tokens. */\n 'ds-interaction-fill--on-bold': this.contrast === 'bold',\n 'ds-interaction-fill--on-strong': this.contrast === 'strong',\n 'ds-interaction-fill--on-medium': this.contrast === 'medium',\n /* faint → default app interaction tokens (no --on-*). */\n 'button-filled--bordered': bordered,\n 'ds-button--bordered': bordered,\n 'button-filled--expanded': expanded && !this.isInactive,\n 'ds-interaction-fill--surface-open': expanded,\n 'ds-button--expanded': expanded && !this.isInactive,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n 'ds-control-frame': true,\n 'button-filled--icon': variant === 'icon',\n 'ds-button--icon': variant === 'icon',\n 'button-filled--label': variant === 'label',\n 'button-filled--icon-label': variant === 'icon-label',\n 'button-filled--rounded': this.rounded,\n 'ds-button--rounded': this.rounded,\n [`button-filled--background-${this.background}`]: this.background !== undefined,\n [`button-filled--intent-${this.intent}`]: true,\n [`button-filled--contrast-${this.contrast}`]: true,\n };\n return cls;\n }\n\n render() {\n const primaryButton = (\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={{\n ...this.buttonClass(\n this.variant,\n !this.split && this.resolvedSurfaceOpen,\n this.hasBorder && !this.split\n ),\n 'ds-button-split__primary': this.split,\n }}\n disabled={this.isInactive}\n aria-label={this.accessibleName}\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-disabled={this.isLoading ? 'true' : undefined}\n aria-controls={this.split ? undefined : this.controls}\n aria-expanded={\n this.split || this.expanded === undefined ? undefined : String(this.expanded)\n }\n aria-haspopup={this.split ? undefined : this.resolvedHaspopup}\n onPointerDown={event =>\n beginElevatedControlPress(\n event,\n this.pressScale && !this.split && !this.isInactive && !this.isLoading\n )\n }\n onClick={this.handleClick}\n >\n {renderButtonContent({\n namespace: 'button-filled',\n variant: this.variant,\n size: this.size,\n label: this.label,\n labelEmphasis: this.labelEmphasis,\n icon: this.icon,\n hasMenu: !this.split && this.hasMenu,\n isLoading: this.isLoading,\n })}\n </button>\n );\n\n const control = this.split ? (\n <div\n class={{\n 'ds-button-split': true,\n 'ds-button-split--rounded': this.rounded,\n }}\n >\n {primaryButton}\n <span class=\"ds-button-split__divider\" aria-hidden=\"true\" />\n <button\n ref={el => {\n this.menuButtonEl = el ?? null;\n }}\n class={{\n ...this.buttonClass('icon', this.resolvedSurfaceOpen, false),\n 'ds-button-split__menu': true,\n }}\n type=\"button\"\n disabled={this.isInactive || this.isLoading}\n aria-label={this.menuAriaLabel}\n aria-controls={this.controls}\n aria-expanded={String(this.expanded === true)}\n aria-haspopup=\"menu\"\n onClick={this.handleMenuClick}\n >\n {renderButtonContent({\n namespace: 'button-filled',\n variant: 'icon',\n size: this.size,\n label: '',\n labelEmphasis: true,\n icon: 'ChevronDown',\n hasMenu: false,\n isLoading: false,\n })}\n </button>\n {this.hasBorder ? <span class=\"ds-button-split__outline\" aria-hidden=\"true\" /> : null}\n </div>\n ) : (\n primaryButton\n );\n\n return (\n <Host\n class={{\n 'button-filled-host': true,\n 'button-filled-host--icon': this.variant === 'icon' && !this.split,\n 'ds-button-host--icon': this.variant === 'icon' && !this.split,\n 'ds-button-split-host': this.split,\n 'ds-button-split-host--primary-icon': this.split && this.variant === 'icon',\n [`button-filled-host--contrast-${this.contrast}`]: this.split,\n [`button-filled-host--background-${this.background}`]:\n this.split && this.background !== undefined,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n {control}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|