@ds-mo/ui 11.1.0 → 12.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/.build-stamp +1 -1
- package/dist/agent-patterns.json +150 -9
- package/dist/agent.json +481 -174
- package/dist/angular/ds-bar-title.d.ts +28 -0
- package/dist/angular/ds-bar-title.js +48 -0
- package/dist/angular/ds-panel-nav.d.ts +1 -1
- package/dist/angular/{ds-app-shell.d.ts → ds-shell-app.d.ts} +5 -5
- package/dist/angular/{ds-app-shell.js → ds-shell-app.js} +10 -10
- package/dist/angular/ds-shell-page.d.ts +12 -0
- package/dist/angular/ds-shell-page.js +38 -0
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +3 -1
- package/dist/angular/proxies.d.ts +3 -1
- package/dist/angular/proxies.js +3 -1
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-response.js.map +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-avatar.js +1 -1
- package/dist/components/ds-avatar.js.map +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/{ds-app-shell.d.ts → ds-bar-title.d.ts} +4 -4
- package/dist/components/ds-bar-title.js +2 -0
- package/dist/components/ds-bar-title.js.map +1 -0
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-shell-data-viz.js +1 -1
- package/dist/components/ds-chart-bar.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-line.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-conversation-list.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.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-composer.js +1 -1
- package/dist/components/ds-message-composer.js.map +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message-scroller.js.map +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-modal.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +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-panel-tools.js.map +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-select-multi.js +1 -1
- package/dist/components/ds-select-multi.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-app.d.ts +11 -0
- package/dist/components/ds-shell-app.js +2 -0
- package/dist/components/ds-shell-app.js.map +1 -0
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-picker.js.map +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-shell-page.d.ts +11 -0
- package/dist/components/ds-shell-page.js +2 -0
- package/dist/components/ds-shell-page.js.map +1 -0
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/{p-DJ78wdNv.js → p-6vj4kh70.js} +2 -2
- package/dist/components/{p-bNpFhP5L.js → p-B3YvoGjS.js} +2 -2
- package/dist/components/{p-BEWtqFX7.js → p-BH3es4p7.js} +2 -2
- package/dist/components/{p-BaZRP4Oo.js → p-BUmDHPr3.js} +2 -2
- package/dist/components/p-BYHKdFzV.js +2 -0
- package/dist/components/p-BYHKdFzV.js.map +1 -0
- package/dist/components/p-BZZwQfmN.js +2 -0
- package/dist/components/{p-B_qVPsEU.js.map → p-BZZwQfmN.js.map} +1 -1
- package/dist/components/{p-Dh4q5TSS.js → p-BhKhX1er.js} +2 -2
- package/dist/components/{p-CZZYGqKz.js → p-Bs6SS34m.js} +2 -2
- package/dist/components/p-CUik7PCi.js +2 -0
- package/dist/components/p-CUik7PCi.js.map +1 -0
- package/dist/components/{p-CyoHRqy6.js → p-Cf-i-6aE.js} +2 -2
- package/dist/components/p-Cf2J9MEo.js +2 -0
- package/dist/components/{p-Bet_UjML.js.map → p-Cf2J9MEo.js.map} +1 -1
- package/dist/components/{p-P_4vE1ub.js → p-CwTVEAl2.js} +2 -2
- package/dist/components/p-Cy04lXlc.js +2 -0
- package/dist/components/p-Cy04lXlc.js.map +1 -0
- package/dist/components/{p-BKhG2xrW.js → p-D2x17ei-.js} +1 -1
- package/dist/components/{p-BKhG2xrW.js.map → p-D2x17ei-.js.map} +1 -1
- package/dist/components/{p-CjP8sYlo.js → p-DABj3qTX.js} +2 -2
- package/dist/components/{p-DTqCBjUj.js → p-DUHcJWTQ.js} +2 -2
- package/dist/components/{p-CPPAndX2.js → p-DVk0wxxX.js} +2 -2
- package/dist/components/p-DfIch2Dk.js +2 -0
- package/dist/components/{p-BCCt2eT_.js.map → p-DfIch2Dk.js.map} +1 -1
- package/dist/components/{p-CrwU83-g.js → p-Dg3xLna0.js} +2 -2
- package/dist/components/{p-DrDHC7V6.js → p-DxeHimqk.js} +2 -2
- package/dist/components/{p-DrDHC7V6.js.map → p-DxeHimqk.js.map} +1 -1
- package/dist/components/{p-CLn7QnE0.js → p-Dy_sZ-dI.js} +2 -2
- package/dist/components/{p-0kEg-Z4f.js → p-liMPkhUP.js} +2 -2
- package/dist/components/p-xFbUt9Tc.js +2 -0
- package/dist/components/p-xFbUt9Tc.js.map +1 -0
- package/dist/docs/components.json +1082 -336
- package/dist/lib/shell/chrome-transition.d.ts +1 -1
- package/dist/lib/shell/index.js +1 -1
- package/dist/lib/shell/index.js.map +1 -1
- package/dist/lib/shell/shell-gradient.d.ts +2 -2
- package/dist/mcp-data/registry/avatar.json +1 -1
- package/dist/mcp-data/registry/badge.json +4 -4
- package/dist/mcp-data/registry/bar-nav.json +8 -8
- package/dist/mcp-data/registry/bar-title.json +431 -0
- package/dist/mcp-data/registry/code-block.json +4 -3
- package/dist/mcp-data/registry/menu.json +1 -1
- package/dist/mcp-data/registry/message-composer.json +7 -5
- package/dist/mcp-data/registry/message-scroller.json +4 -3
- package/dist/mcp-data/registry/modal.json +5 -4
- package/dist/mcp-data/registry/panel-nav.json +8 -8
- package/dist/mcp-data/registry/panel-sub-nav.json +1 -1
- package/dist/mcp-data/registry/panel-tool-header.json +4 -3
- package/dist/mcp-data/registry/panel-tool-search.json +6 -5
- package/dist/mcp-data/registry/panel-tools.json +13 -13
- package/dist/mcp-data/registry/registry.json +489 -176
- package/dist/mcp-data/registry/select-multi.json +2 -1
- package/dist/mcp-data/registry/select.json +2 -1
- package/dist/mcp-data/registry/shell-app.json +213 -0
- package/dist/mcp-data/registry/shell-gradient-picker.json +8 -8
- package/dist/mcp-data/registry/shell-gradient-swatch.json +2 -2
- package/dist/mcp-data/registry/shell-page.json +199 -0
- package/dist/mcp-data/registry/swatch-picker.json +1 -1
- package/dist/react/components.d.ts +3 -1
- package/dist/react/components.js +3 -1
- package/dist/react/ds-bar-title.d.ts +14 -0
- package/dist/react/ds-bar-title.js +16 -0
- package/dist/react/{ds-app-shell.d.ts → ds-shell-app.d.ts} +3 -3
- package/dist/react/ds-shell-app.js +12 -0
- package/dist/react/ds-shell-page.d.ts +9 -0
- package/dist/react/ds-shell-page.js +12 -0
- package/dist/types/components/Badge/Badge.d.ts +1 -1
- package/dist/types/components/BarTitle/BarTitle.d.ts +71 -0
- package/dist/types/components/BarTitle/bar-title-types.d.ts +29 -0
- package/dist/types/components/BarTitle/index.d.ts +2 -0
- package/dist/types/components/Menu/Menu.d.ts +5 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +1 -1
- package/dist/types/components/{AppShell/AppShell.d.ts → ShellApp/ShellApp.d.ts} +3 -3
- package/dist/types/components/ShellPage/ShellPage.d.ts +37 -0
- package/dist/types/components/ShellPage/index.d.ts +3 -0
- package/dist/types/components/ShellPage/shell-page-responsive.d.ts +12 -0
- package/dist/types/components/ShellPage/shell-page-types.d.ts +5 -0
- package/dist/types/components.d.ts +267 -55
- package/dist/types/shell/chrome-transition.d.ts +1 -1
- package/dist/types/shell/shell-gradient.d.ts +2 -2
- package/dist/types/shell/shell-shortcuts.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/ds-app-shell.js +0 -2
- package/dist/components/ds-app-shell.js.map +0 -1
- package/dist/components/p-BCCt2eT_.js +0 -2
- package/dist/components/p-B_qVPsEU.js +0 -2
- package/dist/components/p-Bet_UjML.js +0 -2
- package/dist/components/p-BsnezUUC.js +0 -2
- package/dist/components/p-BsnezUUC.js.map +0 -1
- package/dist/components/p-C1K5QGUZ.js +0 -2
- package/dist/components/p-C1K5QGUZ.js.map +0 -1
- package/dist/components/p-CKaJx0IX.js +0 -2
- package/dist/components/p-CKaJx0IX.js.map +0 -1
- package/dist/components/p-ZTugT4as.js +0 -2
- package/dist/components/p-ZTugT4as.js.map +0 -1
- package/dist/mcp-data/registry/app-shell.json +0 -210
- package/dist/react/ds-app-shell.js +0 -12
- /package/dist/components/{p-DJ78wdNv.js.map → p-6vj4kh70.js.map} +0 -0
- /package/dist/components/{p-bNpFhP5L.js.map → p-B3YvoGjS.js.map} +0 -0
- /package/dist/components/{p-BEWtqFX7.js.map → p-BH3es4p7.js.map} +0 -0
- /package/dist/components/{p-BaZRP4Oo.js.map → p-BUmDHPr3.js.map} +0 -0
- /package/dist/components/{p-Dh4q5TSS.js.map → p-BhKhX1er.js.map} +0 -0
- /package/dist/components/{p-CZZYGqKz.js.map → p-Bs6SS34m.js.map} +0 -0
- /package/dist/components/{p-CyoHRqy6.js.map → p-Cf-i-6aE.js.map} +0 -0
- /package/dist/components/{p-P_4vE1ub.js.map → p-CwTVEAl2.js.map} +0 -0
- /package/dist/components/{p-CjP8sYlo.js.map → p-DABj3qTX.js.map} +0 -0
- /package/dist/components/{p-DTqCBjUj.js.map → p-DUHcJWTQ.js.map} +0 -0
- /package/dist/components/{p-CPPAndX2.js.map → p-DVk0wxxX.js.map} +0 -0
- /package/dist/components/{p-CrwU83-g.js.map → p-Dg3xLna0.js.map} +0 -0
- /package/dist/components/{p-CLn7QnE0.js.map → p-Dy_sZ-dI.js.map} +0 -0
- /package/dist/components/{p-0kEg-Z4f.js.map → p-liMPkhUP.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as n,H as t,c as i,h as o,a as e,t as s}from"./index.js";import{d}from"./p-DrDHC7V6.js";import{d as r}from"./p-DuNZGFkV.js";import{d as l}from"./p-Cpr3K41-.js";import{d as a}from"./p-CZZYGqKz.js";import{C as c}from"./p-Cx-ywr1e.js";import{c as u}from"./p-DuFm-ieS.js";const f=()=>`.sc-ds-button-unfilled-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-unfilled-h:focus-visible,.ds-focus-ring.sc-ds-button-unfilled: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-unfilled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{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-unfilled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-unfilled: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-unfilled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:relative;z-index:0;--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-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-button-unfilled-h,.ds-interaction-fill--on-faint.sc-ds-button-unfilled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--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-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--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-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--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-unfilled-h,.ds-interaction-fill--on-translucent.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-button-unfilled-h,.ds-interaction-fill--on-inverted.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-button-unfilled-h,.ds-interaction-fill--on-media.sc-ds-button-unfilled{--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-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--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);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--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-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled,.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled,.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--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-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--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-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--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-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none;--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary)}.button-unfilled-host--icon.ds-control-width--hug.sc-ds-button-unfilled-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))}.button-unfilled-host--icon.ds-control-width--fill.sc-ds-button-unfilled-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-unfilled-h .button-unfilled.sc-ds-button-unfilled{width:100%}.button-unfilled.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-button-unfilled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-unfilled--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.button-unfilled--rounded.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-half)}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled.button-unfilled--expanded.sc-ds-button-unfilled::after,.button-unfilled.button-unfilled--expanded.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-pressed)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.button-unfilled--background-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--background-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--background-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--background-translucent.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-translucent-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-translucent-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-translucent-translucent);--ds-button-unfilled-border:var(--color-translucent-border-secondary)}.button-unfilled--background-inverted.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-inverted-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-inverted-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-inverted-background);--ds-button-unfilled-border:var(--color-inverted-border-secondary)}.button-unfilled--background-media.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-media-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-media-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-media-background);--ds-button-unfilled-border:var(--color-media-border-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}.button-unfilled__icon-wrap.sc-ds-button-unfilled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-unfilled__label.sc-ds-button-unfilled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-unfilled__label--loading.sc-ds-button-unfilled{visibility:hidden}.button-unfilled.sc-ds-button-unfilled>.button-unfilled__loader-overlay.sc-ds-button-unfilled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.button-unfilled__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}`;const b={md:"md",sm:"sm",xs:"xs"};const h=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=i(this,"dsClick");this.dsChange=i(this,"dsChange");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.rounded=false;this.dot=false;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=n=>{if(this.isInactive||this.isLoading){n.preventDefault();n.stopPropagation();return}this.dsClick.emit(n);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get showDot(){return this.variant==="icon"&&this.dot&&!this.isLoading}get visuallyActive(){return this.isActive||this.expanded===true}get dotRing(){if(this.isActive&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}render(){const n=this.background;const t=c[this.size];const i=b[this.size];const s={"button-unfilled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.isActive&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-faint":n==="faint","ds-interaction-fill--on-medium":n==="medium","ds-interaction-fill--on-bold":n==="bold","ds-interaction-fill--on-strong":n==="strong","ds-interaction-fill--on-translucent":n==="translucent","ds-interaction-fill--on-inverted":n==="inverted","ds-interaction-fill--on-media":n==="media","ds-interaction-fill--on-always-dark":n==="always-dark","button-unfilled--active":this.visuallyActive,"button-unfilled--expanded":this.expanded===true&&!this.isInactive,"button-unfilled--bordered":this.hasBorder,"button-unfilled--rounded":this.rounded,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-unfilled--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--background-faint":n==="faint","button-unfilled--background-medium":n==="medium","button-unfilled--background-bold":n==="bold","button-unfilled--background-strong":n==="strong","button-unfilled--background-translucent":n==="translucent","button-unfilled--background-inverted":n==="inverted","button-unfilled--background-media":n==="media","button-unfilled--on-always-dark":n==="always-dark"};return o(e,{key:"11c05ff1300fc4aeaa2065d2cf17ff4096069179",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...u(this.width)},tabIndex:-1},o("button",{key:"1a2b2668496bd14230888522398f09545753823e",ref:n=>{this.buttonEl=n??null},type:this.type,class:s,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},this.showIcon&&o("span",{key:"54880f13012596b28135a4e18edf14c368145f5d",class:"button-unfilled__icon-wrap ds-interaction-fill__content"},this.isLoading?o("ds-loader",{size:i,color:"inherit"}):o("ds-icon",{name:this.icon,size:i,color:"inherit"}),this.showDot&&o("ds-badge",{key:"314415e5199ca5beb4f6d728cb86b32dcb79eaa0",class:"button-unfilled__dot",variant:"dot",background:this.dotRing,label:"","aria-hidden":"true"})),this.showLabel&&o("ds-text",{key:"0cc64914ec525457ccb644e9453eb51f8a32ebc7",class:{"button-unfilled__label":true,"button-unfilled__label--loading":this.isLoading&&this.variant==="label","ds-interaction-fill__content":true},as:"span",variant:t,emphasis:true,color:"inherit"},this.label),this.isLoading&&this.variant==="label"&&o("span",{key:"de74bf5b87505552627c0db1889e505a1af1cd76",class:"button-unfilled__loader-overlay ds-interaction-fill__content"},o("ds-loader",{key:"53202ceb6ef0b6f67c150bd7e0714aa1bce6fc12",size:i,color:"inherit"}))))}get el(){return this}static get style(){return f()}},[2,"ds-button-unfilled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],rounded:[4],dot:[4],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function v(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-loader","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(s(n))){customElements.define(s(n),h)}break;case"ds-badge":if(!customElements.get(s(n))){d()}break;case"ds-icon":if(!customElements.get(s(n))){r()}break;case"ds-loader":if(!customElements.get(s(n))){l()}break;case"ds-text":if(!customElements.get(s(n))){a()}break}}))}v();export{h as B,v as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as n,H as t,c as i,h as o,a as e,t as s}from"./index.js";import{d}from"./p-DxeHimqk.js";import{d as r}from"./p-DuNZGFkV.js";import{d as l}from"./p-Cpr3K41-.js";import{d as a}from"./p-Bs6SS34m.js";import{C as c}from"./p-Cx-ywr1e.js";import{c as u}from"./p-DuFm-ieS.js";const f=()=>`.sc-ds-button-unfilled-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-unfilled-h:focus-visible,.ds-focus-ring.sc-ds-button-unfilled: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-unfilled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{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-unfilled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-unfilled: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-unfilled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:relative;z-index:0;--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-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-button-unfilled-h,.ds-interaction-fill--on-faint.sc-ds-button-unfilled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--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-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--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-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--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-unfilled-h,.ds-interaction-fill--on-translucent.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-button-unfilled-h,.ds-interaction-fill--on-inverted.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-button-unfilled-h,.ds-interaction-fill--on-media.sc-ds-button-unfilled{--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-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--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);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--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-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled,.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled,.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--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-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--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-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--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-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none;--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary)}.button-unfilled-host--icon.ds-control-width--hug.sc-ds-button-unfilled-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))}.button-unfilled-host--icon.ds-control-width--fill.sc-ds-button-unfilled-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-unfilled-h .button-unfilled.sc-ds-button-unfilled{width:100%}.button-unfilled.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-button-unfilled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-unfilled--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.button-unfilled--rounded.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-half)}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled.button-unfilled--expanded.sc-ds-button-unfilled::after,.button-unfilled.button-unfilled--expanded.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-pressed)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.button-unfilled--background-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--background-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--background-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--background-translucent.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-translucent-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-translucent-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-translucent-translucent);--ds-button-unfilled-border:var(--color-translucent-border-secondary)}.button-unfilled--background-inverted.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-inverted-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-inverted-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-inverted-background);--ds-button-unfilled-border:var(--color-inverted-border-secondary)}.button-unfilled--background-media.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-media-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-media-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-media-background);--ds-button-unfilled-border:var(--color-media-border-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}.button-unfilled__icon-wrap.sc-ds-button-unfilled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-unfilled__label.sc-ds-button-unfilled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-unfilled__label--loading.sc-ds-button-unfilled{visibility:hidden}.button-unfilled.sc-ds-button-unfilled>.button-unfilled__loader-overlay.sc-ds-button-unfilled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.button-unfilled__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}`;const b={md:"md",sm:"sm",xs:"xs"};const h=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=i(this,"dsClick");this.dsChange=i(this,"dsChange");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.rounded=false;this.dot=false;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=n=>{if(this.isInactive||this.isLoading){n.preventDefault();n.stopPropagation();return}this.dsClick.emit(n);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get showDot(){return this.variant==="icon"&&this.dot&&!this.isLoading}get visuallyActive(){return this.isActive||this.expanded===true}get dotRing(){if(this.isActive&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}render(){const n=this.background;const t=c[this.size];const i=b[this.size];const s={"button-unfilled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.isActive&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-faint":n==="faint","ds-interaction-fill--on-medium":n==="medium","ds-interaction-fill--on-bold":n==="bold","ds-interaction-fill--on-strong":n==="strong","ds-interaction-fill--on-translucent":n==="translucent","ds-interaction-fill--on-inverted":n==="inverted","ds-interaction-fill--on-media":n==="media","ds-interaction-fill--on-always-dark":n==="always-dark","button-unfilled--active":this.visuallyActive,"button-unfilled--expanded":this.expanded===true&&!this.isInactive,"button-unfilled--bordered":this.hasBorder,"button-unfilled--rounded":this.rounded,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-unfilled--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--background-faint":n==="faint","button-unfilled--background-medium":n==="medium","button-unfilled--background-bold":n==="bold","button-unfilled--background-strong":n==="strong","button-unfilled--background-translucent":n==="translucent","button-unfilled--background-inverted":n==="inverted","button-unfilled--background-media":n==="media","button-unfilled--on-always-dark":n==="always-dark"};return o(e,{key:"11c05ff1300fc4aeaa2065d2cf17ff4096069179",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...u(this.width)},tabIndex:-1},o("button",{key:"1a2b2668496bd14230888522398f09545753823e",ref:n=>{this.buttonEl=n??null},type:this.type,class:s,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},this.showIcon&&o("span",{key:"54880f13012596b28135a4e18edf14c368145f5d",class:"button-unfilled__icon-wrap ds-interaction-fill__content"},this.isLoading?o("ds-loader",{size:i,color:"inherit"}):o("ds-icon",{name:this.icon,size:i,color:"inherit"}),this.showDot&&o("ds-badge",{key:"314415e5199ca5beb4f6d728cb86b32dcb79eaa0",class:"button-unfilled__dot",variant:"dot",background:this.dotRing,label:"","aria-hidden":"true"})),this.showLabel&&o("ds-text",{key:"0cc64914ec525457ccb644e9453eb51f8a32ebc7",class:{"button-unfilled__label":true,"button-unfilled__label--loading":this.isLoading&&this.variant==="label","ds-interaction-fill__content":true},as:"span",variant:t,emphasis:true,color:"inherit"},this.label),this.isLoading&&this.variant==="label"&&o("span",{key:"de74bf5b87505552627c0db1889e505a1af1cd76",class:"button-unfilled__loader-overlay ds-interaction-fill__content"},o("ds-loader",{key:"53202ceb6ef0b6f67c150bd7e0714aa1bce6fc12",size:i,color:"inherit"}))))}get el(){return this}static get style(){return f()}},[2,"ds-button-unfilled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],rounded:[4],dot:[4],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function v(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-loader","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(s(n))){customElements.define(s(n),h)}break;case"ds-badge":if(!customElements.get(s(n))){d()}break;case"ds-icon":if(!customElements.get(s(n))){r()}break;case"ds-loader":if(!customElements.get(s(n))){l()}break;case"ds-text":if(!customElements.get(s(n))){a()}break}}))}v();export{h as B,v as d};
|
|
2
|
+
//# sourceMappingURL=p-DUHcJWTQ.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,t as e,H as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as t,t as e,H as a,h as i,a as s}from"./index.js";import{d as n}from"./p-DuNZGFkV.js";import{d as r}from"./p-Cpr3K41-.js";import{d as c}from"./p-Bs6SS34m.js";const d=()=>`.sc-ds-agent-activity-h{display:block}.agent-activity.sc-ds-agent-activity{margin:0}summary.sc-ds-agent-activity{align-items:center;color:var(--color-foreground-secondary);cursor:pointer;display:flex;gap:var(--dimension-space-050);list-style:none;padding:var(--dimension-space-025) 0}summary.sc-ds-agent-activity::-webkit-details-marker{display:none}details[open].sc-ds-agent-activity summary.sc-ds-agent-activity ds-icon.sc-ds-agent-activity{transform:rotate(90deg)}ds-text.agent-activity__summary-label.sc-ds-agent-activity{min-width:0}ol.sc-ds-agent-activity{display:grid;gap:var(--dimension-space-075);list-style:none;margin:0;padding:var(--dimension-space-100) 0 0 var(--dimension-space-200)}.agent-activity__item.sc-ds-agent-activity{align-items:start;display:grid;gap:var(--dimension-space-050);grid-template-columns:auto minmax(0, 1fr)}.agent-activity__marker.sc-ds-agent-activity{align-items:center;color:var(--color-foreground-faint-neutral);display:flex;padding-block-start:var(--dimension-space-025)}.agent-activity__item--active.sc-ds-agent-activity .agent-activity__marker.sc-ds-agent-activity{color:var(--color-foreground-faint-brand)}.agent-activity__item--error.sc-ds-agent-activity .agent-activity__marker.sc-ds-agent-activity{color:var(--color-foreground-bold-negative)}.agent-activity__item.sc-ds-agent-activity span.sc-ds-agent-activity:last-child{display:grid;gap:var(--dimension-space-025)}.agent-activity__pending-dot.sc-ds-agent-activity{width:var(--dimension-size-050);height:var(--dimension-size-050);border-radius:var(--dimension-radius-half);background:currentColor}.agent-activity__state.sc-ds-agent-activity{position:absolute;width:var(--dimension-size-050);height:var(--dimension-size-050);overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (prefers-reduced-motion: no-preference){summary.sc-ds-agent-activity ds-icon.sc-ds-agent-activity{transition:transform var(--effect-motion-short-2)}}`;const o=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.items=[];this.heading="Activity";this.open=false;this.expanded=false;this.handleToggle=t=>{this.expanded=t.currentTarget.open}}componentWillLoad(){this.expanded=this.open}handleOpenChange(t){this.expanded=t}get currentItem(){return this.items.find((t=>t.state==="active"))??this.items.find((t=>t.state==="error"))??[...this.items].reverse().find((t=>t.state==="complete"))??this.items.find((t=>t.state==="pending"))}stateLabel(t){if(t.state==="active")return"In progress";if(t.state==="complete")return"Complete";if(t.state==="error")return"Error";return"Pending"}render(){return i(s,{key:"d27c88efee119a09fff39552c3c2f4e1848a48f2"},i("details",{key:"3c79aaabdba558ee847b9836c7138ef6a7e8acd5",class:"agent-activity",open:this.open,onToggle:this.handleToggle},i("summary",{key:"c79e6ff8f599b0efffb095db423b9f6bc11602af"},i("ds-icon",{key:"f36d050ac9f69ae571ad6b51227c4d0fe940de55",name:"ChevronRight",size:"xs",color:"inherit"}),i("ds-text",{key:"f23f190434d74ac875168b08d5c8e61a7516caef",class:"agent-activity__summary-label",variant:"text-body-small",shimmer:!this.expanded&&this.currentItem?.state==="active"},this.expanded?this.heading:this.currentItem?.label??this.heading)),i("ol",{key:"0b61dea2f9ad8ae1228a7c5ad2bab5b89c5503ed"},this.items.map((t=>i("li",{class:`agent-activity__item agent-activity__item--${t.state}`},i("span",{class:"agent-activity__marker","aria-hidden":"true"},t.state==="active"?i("ds-loader",{size:"xs",color:"inherit"}):t.state==="pending"?i("span",{class:"agent-activity__pending-dot"}):i("ds-icon",{name:t.state==="error"?"ErrorTriangle":"Check",size:"xs",color:"inherit"})),i("span",null,i("ds-text",{variant:"text-body-small",shimmer:t.state==="active"},t.label),t.detail?i("ds-text",{variant:"text-caption",color:"secondary"},t.detail):null,i("span",{class:"agent-activity__state"},this.stateLabel(t)))))))))}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return d()}},[2,"ds-agent-activity",{items:[16],heading:[1],open:[4],expanded:[32]},undefined,{open:[{handleOpenChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["ds-agent-activity","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-agent-activity":if(!customElements.get(e(t))){customElements.define(e(t),o)}break;case"ds-icon":if(!customElements.get(e(t))){n()}break;case"ds-loader":if(!customElements.get(e(t))){r()}break;case"ds-text":if(!customElements.get(e(t))){c()}break}}))}l();export{o as A,l as d};
|
|
2
|
+
//# sourceMappingURL=p-DVk0wxxX.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{c as e}from"./p-B8C_yfLQ.js";import{d as r}from"./p-Bs6SS34m.js";import{a,T as d,r as h,b as l}from"./p-Dg3xLna0.js";import{r as c}from"./p-BWUTr_XN.js";import{C as p}from"./p-Cx-ywr1e.js";const u=new Set(["⌘","⇧","⌥","⌃"]);const m={alt:"⌥",cmd:"⌘",command:"⌘",control:"⌃",ctrl:"⌃",option:"⌥",shift:"⇧"};function f(t){return m[t.toLowerCase()]??t}function g(t){const i=t.trim();if(!i)return[];if(i.includes("+")){return i.split("+").map((t=>t.trim())).filter(Boolean).map(f)}if(/\s/.test(i)){return i.split(/\s+/).filter(Boolean).map(f)}const s=Array.from(i);const o=[];while(s.length>1&&u.has(s[0])){o.push(s.shift())}o.push(s.join(""));return o}const v=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--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-h,.ds-control--sm.sc-ds-tooltip{--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-h,.ds-control--xs.sc-ds-tooltip{--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--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--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-h,.ds-control--sm.sc-ds-tooltip{--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-h,.ds-control--xs.sc-ds-tooltip{--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}.key-hint-group.sc-ds-tooltip{display:inline-flex;align-items:center;gap:var(--dimension-stroke-width-012);width:max-content;flex-shrink:0}.key-hint.sc-ds-tooltip{box-sizing:border-box;min-width:var(--ds-control-icon, var(--dimension-iconography-md));width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));padding-inline:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-secondary)}.key-hint--wide.sc-ds-tooltip{width:calc(var(--ds-control-icon, var(--dimension-iconography-md)) * 1.5)}.key-hint__label.sc-ds-tooltip{display:inline-flex;width:max-content;min-width:max-content;font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);line-height:1;font-weight:var(--typography-weight-regular);letter-spacing:0;text-transform:uppercase;color:inherit}.ds-control--xs.sc-ds-tooltip .key-hint__label.sc-ds-tooltip{font-size:calc(var(--typography-fontsize-xs) * 0.78)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-inner.sc-ds-tooltip>ds-text.sc-ds-tooltip{flex-shrink:0;min-width:max-content;max-width:none;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.tooltip-popup.sc-ds-tooltip,.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:none;opacity:0}}`;const y={md:d.size400,sm:d.size300,xs:d.size200};let b=0;let x=0;let w=null;function C(t){const i=document.createElement("ds-text");i.as="span";i.variant=t.variant;i.emphasis=t.emphasis??false;i.color=t.color??"inherit";if(t.wrap)i.wrap=t.wrap;i.textContent=t.text;return i}function k(t){t.style.flexShrink="0";t.style.minWidth="max-content";t.style.maxWidth="none";t.style.padding="0 var(--ds-control-label-inset, var(--dimension-space-025))";t.style.color="var(--color-foreground-primary)"}const O=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=a.space050;this.alignOffset=0;this.delay=d.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++x}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.positionObserver=null;this.anchorObserver=null;this.positionFrame=null;this.skipEnterAnimation=false;this.isOpen=false;this.lastInteractionWasKeyboard=false;this.pointerEnterHandler=t=>{if(t.pointerType==="touch")return;this.show()};this.pointerLeaveHandler=t=>{if(t.pointerType==="touch")return;this.hide()};this.pointerDownHandler=t=>{this.lastInteractionWasKeyboard=false;if(t.pointerType==="touch"&&(this.isOpen||this.popupEl))this.hideInstant()};this.keyDownHandler=()=>{this.lastInteractionWasKeyboard=true};this.focusHandler=()=>{if(this.lastInteractionWasKeyboard||this.anchor?.matches(":focus-visible"))this.show()};this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()};this.scrollResizeHandler=()=>{if(this.positionFrame!==null)return;this.positionFrame=requestAnimationFrame((()=>{this.positionFrame=null;this.calculatePosition()}))};this.escapeHandler=t=>{if(t.key!=="Escape"||!this.isOpen)return;t.preventDefault();this.hide()};this.handleSlotChange=()=>{const t=this.el.querySelector("slot");const i=t?.assignedElements?.()[0]??this.el.firstElementChild;if(i===this.anchor)return;if(this.isOpen||this.popupEl)this.hideInstant();this.unbindAnchor();this.bindAnchor()}}componentDidLoad(){this.bindAnchor();this.anchorObserver=new MutationObserver((()=>this.handleSlotChange()));this.anchorObserver.observe(this.el,{childList:true})}disconnectedCallback(){if(w===this)w=null;this.anchorObserver?.disconnect();this.anchorObserver=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.schedulePosition()}get viewportPadPx(){return c(d.space050,d.space050)}get sideOffsetPx(){return c(this.sideOffset,d.space050)}get alignOffsetPx(){return c(this.alignOffset,0)}get hoverDelayMs(){return h(this.delay,d.animationDelayMedium3)}get instantReopenMs(){return h(d.animationDurationMedium1,d.animationDurationMedium1)}get fadeOutMs(){return l(d.motionShort3,d.animationDurationShort3)}get tooltipFallbackWidthPx(){return c(d.tooltipFallbackWidth,d.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=y[this.size];return c(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s||s===this.anchor)return;this.anchor=s;s.addEventListener("pointerenter",this.pointerEnterHandler);s.addEventListener("pointerleave",this.pointerLeaveHandler);s.addEventListener("pointerdown",this.pointerDownHandler);s.addEventListener("keydown",this.keyDownHandler);s.addEventListener("focusin",this.focusHandler);s.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.unlinkDescribedBy();this.anchor.removeEventListener("pointerenter",this.pointerEnterHandler);this.anchor.removeEventListener("pointerleave",this.pointerLeaveHandler);this.anchor.removeEventListener("pointerdown",this.pointerDownHandler);this.anchor.removeEventListener("keydown",this.keyDownHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}linkDescribedBy(){if(!this.anchor||!this.popupEl)return;const t=new Set((this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter(Boolean));t.add(this.tooltipId);this.anchor.setAttribute("aria-describedby",Array.from(t).join(" "))}unlinkDescribedBy(){if(!this.anchor)return;const t=(this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter((t=>t&&t!==this.tooltipId));if(t.length)this.anchor.setAttribute("aria-describedby",t.join(" "));else this.anchor.removeAttribute("aria-describedby")}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}setupOpenListeners(){window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler);document.addEventListener("keydown",this.escapeHandler)}teardownOpenListeners(){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);document.removeEventListener("keydown",this.escapeHandler);if(this.positionFrame!==null){cancelAnimationFrame(this.positionFrame);this.positionFrame=null}}destroyPopup(){this.teardownOpenListeners();this.positionObserver?.disconnect();this.positionObserver=null;this.unlinkDescribedBy();if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}schedulePosition(){if(!this.popupEl)return;const t=()=>{const t=this.popupEl?.querySelector(":scope > .tooltip-inner > ds-text");if(t instanceof i)k(t)};requestAnimationFrame((()=>{t();this.calculatePosition();requestAnimationFrame((()=>{t();this.calculatePosition()}))}));this.positionObserver?.disconnect();this.positionObserver=new ResizeObserver((()=>this.calculatePosition()));this.positionObserver.observe(this.popupEl);if(this.anchor)this.positionObserver.observe(this.anchor)}hideInstant(){this.clearTimers();b=Date.now();if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-b<this.instantReopenMs;if(w&&w!==this){w.hideInstant();t=true}w=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;b=Date.now();if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");if(this.fadeOutMs===0){if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false;return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.setupOpenListeners();this.linkDescribedBy();this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.schedulePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=p[this.size];const i=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const s="sc-ds-tooltip";const o=document.createElement("div");o.className=`tooltip-inner ${i} ${s}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const i=document.createElement("span");i.className=`key-hint-group ${s}`;i.setAttribute("aria-hidden","true");for(const t of g(this.shortcutKey)){const o=document.createElement("span");const n=Array.from(t).length>1?" key-hint--wide":"";o.className=`key-hint${n} ${s}`;const e=document.createElement("span");e.className=`key-hint__label ${s}`;e.textContent=t;o.appendChild(e);i.appendChild(o)}o.appendChild(i)};n("start");const e=C({variant:t,wrap:"nowrap",text:this.label});k(e);o.appendChild(e);n("end");this.popupEl.replaceChildren(o)}calculatePosition(){if(!this.anchor||!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth||this.tooltipFallbackWidthPx;const o=t.offsetHeight||this.tooltipFallbackHeightPx;const{x:n,y:r,resolvedSide:a}=e({anchorRect:i,popupWidth:s,popupHeight:o,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});t.dataset.side=a;t.style.transform=`translate(${Math.round(n)}px, ${Math.round(r)}px)`}render(){return s(o,{key:"ab60bfcc4d4afdbb639a4d06d041c78a2e460b60",style:{display:"contents"}},s("slot",{key:"c128c7592cbf0026235618e5bcaa9534071a6e59",onSlotchange:this.handleSlotChange}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return v()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function P(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),O)}break;case"ds-text":if(!customElements.get(n(t))){r()}break}}))}P();export{O as T,P as d};
|
|
2
|
+
//# sourceMappingURL=p-DfIch2Dk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["MODIFIER_GLYPHS","Set","MODIFIER_LABELS","alt","cmd","command","control","ctrl","option","shift","canonicalKeyLabel","label","toLowerCase","shortcutKeyLabels","shortcut","normalized","trim","includes","split","map","part","filter","Boolean","test","characters","Array","from","labels","length","has","push","join","tooltipCss","FALLBACK_HEIGHT","md","TOKEN_DEFAULTS","size400","sm","size300","xs","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","createDsText","opts","el","document","createElement","as","variant","emphasis","color","wrap","textContent","text","styleTooltipLabel","style","flexShrink","minWidth","maxWidth","padding","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","positionObserver","anchorObserver","positionFrame","skipEnterAnimation","isOpen","lastInteractionWasKeyboard","pointerEnterHandler","event","pointerType","show","pointerLeaveHandler","hide","pointerDownHandler","hideInstant","keyDownHandler","focusHandler","matches","blurHandler","e","next","relatedTarget","contains","scrollResizeHandler","requestAnimationFrame","calculatePosition","escapeHandler","key","preventDefault","handleSlotChange","slot","querySelector","assignedElements","firstElementChild","unbindAnchor","bindAnchor","componentDidLoad","MutationObserver","observe","childList","disconnectedCallback","disconnect","clearTimers","destroyPopup","onContentOrPositionChange","renderPopupContent","schedulePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","resolveMotionTimeMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slotted","child","addEventListener","unlinkDescribedBy","removeEventListener","linkDescribedBy","ids","getAttribute","add","setAttribute","id","removeAttribute","clearTimeout","setupOpenListeners","window","teardownOpenListeners","cancelAnimationFrame","remove","reapplyLabelStyles","ResizeObserver","Date","now","instant","mountPopup","setTimeout","classList","tip","className","Object","assign","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","CONTROL_TEXT_VARIANT","density","sc","inner","appendShortcut","shortcutKey","group","hint","wide","replaceChildren","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","x","y","resolvedSide","computeTooltipPosition","anchorRect","popupWidth","popupHeight","viewportWidth","innerWidth","viewportHeight","innerHeight","dataset","transform","Math","round","render","h","Host","display","onSlotchange"],"sources":["src/wc/utils/shortcut-key.ts","src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["const MODIFIER_GLYPHS = new Set(['⌘', '⇧', '⌥', '⌃']);\nconst MODIFIER_LABELS: Readonly<Record<string, string>> = {\n alt: '⌥',\n cmd: '⌘',\n command: '⌘',\n control: '⌃',\n ctrl: '⌃',\n option: '⌥',\n shift: '⇧',\n};\n\nfunction canonicalKeyLabel(label: string): string {\n return MODIFIER_LABELS[label.toLowerCase()] ?? label;\n}\n\n/** Split a shortcut chord into the labels rendered on individual keycaps. */\nexport function shortcutKeyLabels(shortcut: string): string[] {\n const normalized = shortcut.trim();\n if (!normalized) return [];\n\n if (normalized.includes('+')) {\n return normalized.split('+').map(part => part.trim()).filter(Boolean).map(canonicalKeyLabel);\n }\n\n if (/\\s/.test(normalized)) {\n return normalized.split(/\\s+/).filter(Boolean).map(canonicalKeyLabel);\n }\n\n const characters = Array.from(normalized);\n const labels: string[] = [];\n while (characters.length > 1 && MODIFIER_GLYPHS.has(characters[0])) {\n labels.push(characters.shift()!);\n }\n labels.push(characters.join(''));\n return labels;\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/key-hint.css';\n\n.tooltip-popup {\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n animation: none;\n opacity: 1;\n}\n\n.tooltip-popup--closing {\n animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap, var(--dimension-space-050));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/*\n * Label layout lives on ds-text (metric-box + control label-inset).\n * NOTE: Stencil scopes this to `ds-text.sc-ds-tooltip`, but portaled\n * createElement ds-text loses that class when Text's <Host class> renders.\n * `renderPopupContent` therefore also sets these as inline styles.\n */\n.tooltip-inner > ds-text {\n flex-shrink: 0;\n min-width: max-content;\n max-width: none;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .tooltip-popup,\n .tooltip-popup--instant {\n animation: none;\n opacity: 1;\n }\n\n .tooltip-popup--closing {\n animation: none;\n opacity: 0;\n }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n CONTROL_TEXT_VARIANT,\n resolveCssLengthPx,\n resolveCssTimeMs,\n resolveMotionTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n} from '../../utils';\nimport type { TextVariant } from '../Text/text-types';\nimport { shortcutKeyLabels } from '../../utils/shortcut-key';\nimport { computeTooltipPosition } from './tooltip-position';\n// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.\nimport '../Text/Text';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n md: TOKEN_DEFAULTS.size400,\n sm: TOKEN_DEFAULTS.size300,\n xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\ntype DsTextEl = HTMLElement & {\n as: string;\n variant: TextVariant;\n emphasis: boolean;\n color: string;\n wrap: string;\n};\n\nfunction createDsText(opts: {\n variant: TextVariant;\n emphasis?: boolean;\n color?: string;\n wrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';\n text: string;\n}): DsTextEl {\n const el = document.createElement('ds-text') as DsTextEl;\n el.as = 'span';\n el.variant = opts.variant;\n el.emphasis = opts.emphasis ?? false;\n el.color = opts.color ?? 'inherit';\n if (opts.wrap) el.wrap = opts.wrap;\n el.textContent = opts.text;\n return el;\n}\n\n/**\n * Control-density label styles for portaled ds-text.\n * Scoped CSS requires `sc-ds-tooltip` on the host, but Text's `<Host class>`\n * overwrites imperative className — so these must be inline to stick.\n */\nfunction styleTooltipLabel(el: HTMLElement) {\n el.style.flexShrink = '0';\n el.style.minWidth = 'max-content';\n el.style.maxWidth = 'none';\n el.style.padding = '0 var(--ds-control-label-inset, var(--dimension-space-025))';\n el.style.color = 'var(--color-foreground-primary)';\n}\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n tag: 'ds-tooltip',\n styleUrl: 'Tooltip.css',\n scoped: true,\n})\nexport class Tooltip {\n @Element() el!: HTMLElement;\n\n /**\n * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n */\n @Prop() label!: string;\n\n /** Control density (height, padding, type). */\n @Prop() size: TooltipSize = 'md';\n\n @Prop() side: TooltipSide = 'top';\n @Prop() align: TooltipAlign = 'center';\n /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n /**\n * Hover show delay before the tooltip appears.\n * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n * initial hover/focus show only — after a recent dismiss, reopen is instant.\n * Prefer the default; override only for denser chrome or rare/destructive actions.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n @Prop() shortcutKey: string | undefined;\n @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private anchor: HTMLElement | null = null;\n private popupEl: HTMLElement | null = null;\n private positionObserver: ResizeObserver | null = null;\n private anchorObserver: MutationObserver | null = null;\n private positionFrame: number | null = null;\n private skipEnterAnimation = false;\n private isOpen = false;\n private lastInteractionWasKeyboard = false;\n private pointerEnterHandler = (event: PointerEvent) => {\n if (event.pointerType === 'touch') return;\n this.show();\n };\n private pointerLeaveHandler = (event: PointerEvent) => {\n if (event.pointerType === 'touch') return;\n this.hide();\n };\n private pointerDownHandler = (event: PointerEvent) => {\n this.lastInteractionWasKeyboard = false;\n if (event.pointerType === 'touch' && (this.isOpen || this.popupEl)) this.hideInstant();\n };\n private keyDownHandler = () => {\n this.lastInteractionWasKeyboard = true;\n };\n /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n private focusHandler = () => {\n if (this.lastInteractionWasKeyboard || this.anchor?.matches(':focus-visible')) this.show();\n };\n private blurHandler: (e: FocusEvent) => void = (e) => {\n const next = e.relatedTarget as Node | null;\n if (next && this.anchor?.contains(next)) return;\n this.hide();\n };\n private scrollResizeHandler = () => {\n if (this.positionFrame !== null) return;\n this.positionFrame = requestAnimationFrame(() => {\n this.positionFrame = null;\n this.calculatePosition();\n });\n };\n private escapeHandler = (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !this.isOpen) return;\n event.preventDefault();\n this.hide();\n };\n\n componentDidLoad() {\n this.bindAnchor();\n this.anchorObserver = new MutationObserver(() => this.handleSlotChange());\n this.anchorObserver.observe(this.el, { childList: true });\n }\n\n disconnectedCallback() {\n if (activeTooltip === this) activeTooltip = null;\n this.anchorObserver?.disconnect();\n this.anchorObserver = null;\n this.unbindAnchor();\n this.clearTimers();\n this.destroyPopup();\n }\n\n @Watch('label')\n @Watch('size')\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n @Watch('shortcutKey')\n @Watch('shortcutKeyPosition')\n onContentOrPositionChange() {\n if (!this.label?.trim()) {\n if (this.isOpen || this.popupEl) this.hideInstant();\n return;\n }\n if (!this.popupEl || !this.isOpen) return;\n this.renderPopupContent();\n this.schedulePosition();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get hoverDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n }\n\n private get instantReopenMs(): number {\n return resolveCssTimeMs(\n TOKEN_DEFAULTS.animationDurationMedium1,\n TOKEN_DEFAULTS.animationDurationMedium1,\n );\n }\n\n private get fadeOutMs(): number {\n return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get tooltipFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n }\n\n private get tooltipFallbackHeightPx(): number {\n const token = FALLBACK_HEIGHT[this.size];\n return resolveCssLengthPx(token, token);\n }\n\n private bindAnchor() {\n const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n const slotted = slot?.assignedElements?.() ?? [];\n const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n if (!child || child === this.anchor) return;\n this.anchor = child;\n child.addEventListener('pointerenter', this.pointerEnterHandler);\n child.addEventListener('pointerleave', this.pointerLeaveHandler);\n child.addEventListener('pointerdown', this.pointerDownHandler);\n child.addEventListener('keydown', this.keyDownHandler);\n child.addEventListener('focusin', this.focusHandler);\n child.addEventListener('focusout', this.blurHandler);\n }\n\n private unbindAnchor() {\n if (!this.anchor) return;\n this.unlinkDescribedBy();\n this.anchor.removeEventListener('pointerenter', this.pointerEnterHandler);\n this.anchor.removeEventListener('pointerleave', this.pointerLeaveHandler);\n this.anchor.removeEventListener('pointerdown', this.pointerDownHandler);\n this.anchor.removeEventListener('keydown', this.keyDownHandler);\n this.anchor.removeEventListener('focusin', this.focusHandler);\n this.anchor.removeEventListener('focusout', this.blurHandler);\n this.anchor = null;\n }\n\n private linkDescribedBy() {\n if (!this.anchor || !this.popupEl) return;\n const ids = new Set((this.anchor.getAttribute('aria-describedby') ?? '').split(/\\s+/).filter(Boolean));\n ids.add(this.tooltipId);\n this.anchor.setAttribute('aria-describedby', Array.from(ids).join(' '));\n }\n\n private unlinkDescribedBy() {\n if (!this.anchor) return;\n const ids = (this.anchor.getAttribute('aria-describedby') ?? '')\n .split(/\\s+/)\n .filter(id => id && id !== this.tooltipId);\n if (ids.length) this.anchor.setAttribute('aria-describedby', ids.join(' '));\n else this.anchor.removeAttribute('aria-describedby');\n }\n\n private handleSlotChange = () => {\n const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n const next = (slot?.assignedElements?.()[0] ?? this.el.firstElementChild) as HTMLElement | null;\n if (next === this.anchor) return;\n if (this.isOpen || this.popupEl) this.hideInstant();\n this.unbindAnchor();\n this.bindAnchor();\n };\n\n private clearTimers() {\n if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private setupOpenListeners() {\n window.addEventListener('scroll', this.scrollResizeHandler, true);\n window.addEventListener('resize', this.scrollResizeHandler);\n document.addEventListener('keydown', this.escapeHandler);\n }\n\n private teardownOpenListeners() {\n window.removeEventListener('scroll', this.scrollResizeHandler, true);\n window.removeEventListener('resize', this.scrollResizeHandler);\n document.removeEventListener('keydown', this.escapeHandler);\n if (this.positionFrame !== null) {\n cancelAnimationFrame(this.positionFrame);\n this.positionFrame = null;\n }\n }\n\n private destroyPopup() {\n this.teardownOpenListeners();\n this.positionObserver?.disconnect();\n this.positionObserver = null;\n this.unlinkDescribedBy();\n if (!this.popupEl) return;\n this.popupEl.remove();\n this.popupEl = null;\n }\n\n /**\n * Position after `ds-text` upgrades and lays out. Measuring synchronously in\n * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.\n */\n private schedulePosition() {\n if (!this.popupEl) return;\n\n const reapplyLabelStyles = () => {\n const label = this.popupEl?.querySelector(':scope > .tooltip-inner > ds-text');\n if (label instanceof HTMLElement) styleTooltipLabel(label);\n };\n\n requestAnimationFrame(() => {\n reapplyLabelStyles();\n this.calculatePosition();\n requestAnimationFrame(() => {\n reapplyLabelStyles();\n this.calculatePosition();\n });\n });\n\n this.positionObserver?.disconnect();\n this.positionObserver = new ResizeObserver(() => this.calculatePosition());\n this.positionObserver.observe(this.popupEl);\n if (this.anchor) this.positionObserver.observe(this.anchor);\n }\n\n /** Drop the open tip immediately (warm handoff to another tooltip). */\n private hideInstant() {\n this.clearTimers();\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }\n\n private show() {\n // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n // but no tip should appear.\n if (!this.label?.trim()) return;\n this.clearTimers();\n let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n if (activeTooltip && activeTooltip !== this) {\n activeTooltip.hideInstant();\n instant = true;\n }\n // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance\n activeTooltip = this;\n this.skipEnterAnimation = instant;\n if (instant) {\n this.mountPopup();\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n if (!this.label?.trim()) return;\n this.mountPopup();\n }, this.hoverDelayMs);\n }\n\n private hide() {\n this.clearTimers();\n if (!this.popupEl && !this.isOpen) return;\n lastDismissedAt = Date.now();\n if (!this.popupEl) {\n this.isOpen = false;\n return;\n }\n this.popupEl.classList.remove('tooltip-popup--instant');\n this.popupEl.classList.add('tooltip-popup--closing');\n if (this.fadeOutMs === 0) {\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n return;\n }\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }, this.fadeOutMs);\n }\n\n private mountPopup() {\n if (!this.popupEl) {\n const tip = document.createElement('div');\n tip.id = this.tooltipId;\n tip.setAttribute('role', 'tooltip');\n // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n tip.className = 'tooltip-popup sc-ds-tooltip';\n Object.assign(tip.style, {\n position: 'fixed',\n left: '0',\n top: '0',\n zIndex: 'var(--dimension-z-index-tooltip)',\n pointerEvents: 'none',\n });\n document.body.appendChild(tip);\n this.popupEl = tip;\n }\n\n this.setupOpenListeners();\n this.linkDescribedBy();\n this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n this.popupEl.classList.remove('tooltip-popup--closing');\n this.renderPopupContent();\n this.schedulePosition();\n this.isOpen = true;\n }\n\n private renderPopupContent() {\n if (!this.popupEl) return;\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const density =\n this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n const sc = 'sc-ds-tooltip';\n\n const inner = document.createElement('div');\n inner.className = `tooltip-inner ${density} ${sc}`;\n\n const appendShortcut = (position: 'start' | 'end') => {\n if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;\n const group = document.createElement('span');\n group.className = `key-hint-group ${sc}`;\n group.setAttribute('aria-hidden', 'true');\n\n for (const label of shortcutKeyLabels(this.shortcutKey)) {\n const hint = document.createElement('span');\n const wide = Array.from(label).length > 1 ? ' key-hint--wide' : '';\n hint.className = `key-hint${wide} ${sc}`;\n const text = document.createElement('span');\n text.className = `key-hint__label ${sc}`;\n text.textContent = label;\n hint.appendChild(text);\n group.appendChild(hint);\n }\n inner.appendChild(group);\n };\n\n appendShortcut('start');\n\n // ds-text is the layout box (metric-box + 2px control label-inset).\n // Inline styles required — see styleTooltipLabel.\n const label = createDsText({ variant: textVariant, wrap: 'nowrap', text: this.label });\n styleTooltipLabel(label);\n inner.appendChild(label);\n\n appendShortcut('end');\n\n this.popupEl.replaceChildren(inner);\n }\n\n private calculatePosition() {\n if (!this.anchor || !this.popupEl) return;\n const tip = this.popupEl;\n const a = this.anchor.getBoundingClientRect();\n const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n const { x, y, resolvedSide } = computeTooltipPosition({\n anchorRect: a,\n popupWidth: tw,\n popupHeight: th,\n side: this.side,\n align: this.align,\n sideOffsetPx: this.sideOffsetPx,\n alignOffsetPx: this.alignOffsetPx,\n viewportPadPx: this.viewportPadPx,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n });\n tip.dataset.side = resolvedSide;\n tip.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <slot onSlotchange={this.handleSlotChange} />\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["MODIFIER_GLYPHS","Set","MODIFIER_LABELS","alt","cmd","command","control","ctrl","option","shift","canonicalKeyLabel","label","toLowerCase","shortcutKeyLabels","shortcut","normalized","trim","includes","split","map","part","filter","Boolean","test","characters","Array","from","labels","length","has","push","join","tooltipCss","FALLBACK_HEIGHT","md","TOKEN_DEFAULTS","size400","sm","size300","xs","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","createDsText","opts","el","document","createElement","as","variant","emphasis","color","wrap","textContent","text","styleTooltipLabel","style","flexShrink","minWidth","maxWidth","padding","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","positionObserver","anchorObserver","positionFrame","skipEnterAnimation","isOpen","lastInteractionWasKeyboard","pointerEnterHandler","event","pointerType","show","pointerLeaveHandler","hide","pointerDownHandler","hideInstant","keyDownHandler","focusHandler","matches","blurHandler","e","next","relatedTarget","contains","scrollResizeHandler","requestAnimationFrame","calculatePosition","escapeHandler","key","preventDefault","handleSlotChange","slot","querySelector","assignedElements","firstElementChild","unbindAnchor","bindAnchor","componentDidLoad","MutationObserver","observe","childList","disconnectedCallback","disconnect","clearTimers","destroyPopup","onContentOrPositionChange","renderPopupContent","schedulePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","resolveMotionTimeMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slotted","child","addEventListener","unlinkDescribedBy","removeEventListener","linkDescribedBy","ids","getAttribute","add","setAttribute","id","removeAttribute","clearTimeout","setupOpenListeners","window","teardownOpenListeners","cancelAnimationFrame","remove","reapplyLabelStyles","ResizeObserver","Date","now","instant","mountPopup","setTimeout","classList","tip","className","Object","assign","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","CONTROL_TEXT_VARIANT","density","sc","inner","appendShortcut","shortcutKey","group","hint","wide","replaceChildren","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","x","y","resolvedSide","computeTooltipPosition","anchorRect","popupWidth","popupHeight","viewportWidth","innerWidth","viewportHeight","innerHeight","dataset","transform","Math","round","render","h","Host","display","onSlotchange"],"sources":["src/wc/utils/shortcut-key.ts","src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["const MODIFIER_GLYPHS = new Set(['⌘', '⇧', '⌥', '⌃']);\nconst MODIFIER_LABELS: Readonly<Record<string, string>> = {\n alt: '⌥',\n cmd: '⌘',\n command: '⌘',\n control: '⌃',\n ctrl: '⌃',\n option: '⌥',\n shift: '⇧',\n};\n\nfunction canonicalKeyLabel(label: string): string {\n return MODIFIER_LABELS[label.toLowerCase()] ?? label;\n}\n\n/** Split a shortcut chord into the labels rendered on individual keycaps. */\nexport function shortcutKeyLabels(shortcut: string): string[] {\n const normalized = shortcut.trim();\n if (!normalized) return [];\n\n if (normalized.includes('+')) {\n return normalized.split('+').map(part => part.trim()).filter(Boolean).map(canonicalKeyLabel);\n }\n\n if (/\\s/.test(normalized)) {\n return normalized.split(/\\s+/).filter(Boolean).map(canonicalKeyLabel);\n }\n\n const characters = Array.from(normalized);\n const labels: string[] = [];\n while (characters.length > 1 && MODIFIER_GLYPHS.has(characters[0])) {\n labels.push(characters.shift()!);\n }\n labels.push(characters.join(''));\n return labels;\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/key-hint.css';\n\n.tooltip-popup {\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n animation: none;\n opacity: 1;\n}\n\n.tooltip-popup--closing {\n animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap, var(--dimension-space-050));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/*\n * Label layout lives on ds-text (metric-box + control label-inset).\n * NOTE: Stencil scopes this to `ds-text.sc-ds-tooltip`, but portaled\n * createElement ds-text loses that class when Text's <Host class> renders.\n * `renderPopupContent` therefore also sets these as inline styles.\n */\n.tooltip-inner > ds-text {\n flex-shrink: 0;\n min-width: max-content;\n max-width: none;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .tooltip-popup,\n .tooltip-popup--instant {\n animation: none;\n opacity: 1;\n }\n\n .tooltip-popup--closing {\n animation: none;\n opacity: 0;\n }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n CONTROL_TEXT_VARIANT,\n resolveCssLengthPx,\n resolveCssTimeMs,\n resolveMotionTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n} from '../../utils';\nimport type { TextVariant } from '../Text/text-types';\nimport { shortcutKeyLabels } from '../../utils/shortcut-key';\nimport { computeTooltipPosition } from './tooltip-position';\n// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.\nimport '../Text/Text';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n md: TOKEN_DEFAULTS.size400,\n sm: TOKEN_DEFAULTS.size300,\n xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\ntype DsTextEl = HTMLElement & {\n as: string;\n variant: TextVariant;\n emphasis: boolean;\n color: string;\n wrap: string;\n};\n\nfunction createDsText(opts: {\n variant: TextVariant;\n emphasis?: boolean;\n color?: string;\n wrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';\n text: string;\n}): DsTextEl {\n const el = document.createElement('ds-text') as DsTextEl;\n el.as = 'span';\n el.variant = opts.variant;\n el.emphasis = opts.emphasis ?? false;\n el.color = opts.color ?? 'inherit';\n if (opts.wrap) el.wrap = opts.wrap;\n el.textContent = opts.text;\n return el;\n}\n\n/**\n * Control-density label styles for portaled ds-text.\n * Scoped CSS requires `sc-ds-tooltip` on the host, but Text's `<Host class>`\n * overwrites imperative className — so these must be inline to stick.\n */\nfunction styleTooltipLabel(el: HTMLElement) {\n el.style.flexShrink = '0';\n el.style.minWidth = 'max-content';\n el.style.maxWidth = 'none';\n el.style.padding = '0 var(--ds-control-label-inset, var(--dimension-space-025))';\n el.style.color = 'var(--color-foreground-primary)';\n}\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n tag: 'ds-tooltip',\n styleUrl: 'Tooltip.css',\n scoped: true,\n})\nexport class Tooltip {\n @Element() el!: HTMLElement;\n\n /**\n * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n */\n @Prop() label!: string;\n\n /** Control density (height, padding, type). */\n @Prop() size: TooltipSize = 'md';\n\n @Prop() side: TooltipSide = 'top';\n @Prop() align: TooltipAlign = 'center';\n /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n /**\n * Hover show delay before the tooltip appears.\n * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n * initial hover/focus show only — after a recent dismiss, reopen is instant.\n * Prefer the default; override only for denser chrome or rare/destructive actions.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n @Prop() shortcutKey: string | undefined;\n @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private anchor: HTMLElement | null = null;\n private popupEl: HTMLElement | null = null;\n private positionObserver: ResizeObserver | null = null;\n private anchorObserver: MutationObserver | null = null;\n private positionFrame: number | null = null;\n private skipEnterAnimation = false;\n private isOpen = false;\n private lastInteractionWasKeyboard = false;\n private pointerEnterHandler = (event: PointerEvent) => {\n if (event.pointerType === 'touch') return;\n this.show();\n };\n private pointerLeaveHandler = (event: PointerEvent) => {\n if (event.pointerType === 'touch') return;\n this.hide();\n };\n private pointerDownHandler = (event: PointerEvent) => {\n this.lastInteractionWasKeyboard = false;\n if (event.pointerType === 'touch' && (this.isOpen || this.popupEl)) this.hideInstant();\n };\n private keyDownHandler = () => {\n this.lastInteractionWasKeyboard = true;\n };\n /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n private focusHandler = () => {\n if (this.lastInteractionWasKeyboard || this.anchor?.matches(':focus-visible')) this.show();\n };\n private blurHandler: (e: FocusEvent) => void = (e) => {\n const next = e.relatedTarget as Node | null;\n if (next && this.anchor?.contains(next)) return;\n this.hide();\n };\n private scrollResizeHandler = () => {\n if (this.positionFrame !== null) return;\n this.positionFrame = requestAnimationFrame(() => {\n this.positionFrame = null;\n this.calculatePosition();\n });\n };\n private escapeHandler = (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !this.isOpen) return;\n event.preventDefault();\n this.hide();\n };\n\n componentDidLoad() {\n this.bindAnchor();\n this.anchorObserver = new MutationObserver(() => this.handleSlotChange());\n this.anchorObserver.observe(this.el, { childList: true });\n }\n\n disconnectedCallback() {\n if (activeTooltip === this) activeTooltip = null;\n this.anchorObserver?.disconnect();\n this.anchorObserver = null;\n this.unbindAnchor();\n this.clearTimers();\n this.destroyPopup();\n }\n\n @Watch('label')\n @Watch('size')\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n @Watch('shortcutKey')\n @Watch('shortcutKeyPosition')\n onContentOrPositionChange() {\n if (!this.label?.trim()) {\n if (this.isOpen || this.popupEl) this.hideInstant();\n return;\n }\n if (!this.popupEl || !this.isOpen) return;\n this.renderPopupContent();\n this.schedulePosition();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get hoverDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n }\n\n private get instantReopenMs(): number {\n return resolveCssTimeMs(\n TOKEN_DEFAULTS.animationDurationMedium1,\n TOKEN_DEFAULTS.animationDurationMedium1,\n );\n }\n\n private get fadeOutMs(): number {\n return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get tooltipFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n }\n\n private get tooltipFallbackHeightPx(): number {\n const token = FALLBACK_HEIGHT[this.size];\n return resolveCssLengthPx(token, token);\n }\n\n private bindAnchor() {\n const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n const slotted = slot?.assignedElements?.() ?? [];\n const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n if (!child || child === this.anchor) return;\n this.anchor = child;\n child.addEventListener('pointerenter', this.pointerEnterHandler);\n child.addEventListener('pointerleave', this.pointerLeaveHandler);\n child.addEventListener('pointerdown', this.pointerDownHandler);\n child.addEventListener('keydown', this.keyDownHandler);\n child.addEventListener('focusin', this.focusHandler);\n child.addEventListener('focusout', this.blurHandler);\n }\n\n private unbindAnchor() {\n if (!this.anchor) return;\n this.unlinkDescribedBy();\n this.anchor.removeEventListener('pointerenter', this.pointerEnterHandler);\n this.anchor.removeEventListener('pointerleave', this.pointerLeaveHandler);\n this.anchor.removeEventListener('pointerdown', this.pointerDownHandler);\n this.anchor.removeEventListener('keydown', this.keyDownHandler);\n this.anchor.removeEventListener('focusin', this.focusHandler);\n this.anchor.removeEventListener('focusout', this.blurHandler);\n this.anchor = null;\n }\n\n private linkDescribedBy() {\n if (!this.anchor || !this.popupEl) return;\n const ids = new Set((this.anchor.getAttribute('aria-describedby') ?? '').split(/\\s+/).filter(Boolean));\n ids.add(this.tooltipId);\n this.anchor.setAttribute('aria-describedby', Array.from(ids).join(' '));\n }\n\n private unlinkDescribedBy() {\n if (!this.anchor) return;\n const ids = (this.anchor.getAttribute('aria-describedby') ?? '')\n .split(/\\s+/)\n .filter(id => id && id !== this.tooltipId);\n if (ids.length) this.anchor.setAttribute('aria-describedby', ids.join(' '));\n else this.anchor.removeAttribute('aria-describedby');\n }\n\n private handleSlotChange = () => {\n const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n const next = (slot?.assignedElements?.()[0] ?? this.el.firstElementChild) as HTMLElement | null;\n if (next === this.anchor) return;\n if (this.isOpen || this.popupEl) this.hideInstant();\n this.unbindAnchor();\n this.bindAnchor();\n };\n\n private clearTimers() {\n if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private setupOpenListeners() {\n window.addEventListener('scroll', this.scrollResizeHandler, true);\n window.addEventListener('resize', this.scrollResizeHandler);\n document.addEventListener('keydown', this.escapeHandler);\n }\n\n private teardownOpenListeners() {\n window.removeEventListener('scroll', this.scrollResizeHandler, true);\n window.removeEventListener('resize', this.scrollResizeHandler);\n document.removeEventListener('keydown', this.escapeHandler);\n if (this.positionFrame !== null) {\n cancelAnimationFrame(this.positionFrame);\n this.positionFrame = null;\n }\n }\n\n private destroyPopup() {\n this.teardownOpenListeners();\n this.positionObserver?.disconnect();\n this.positionObserver = null;\n this.unlinkDescribedBy();\n if (!this.popupEl) return;\n this.popupEl.remove();\n this.popupEl = null;\n }\n\n /**\n * Position after `ds-text` upgrades and lays out. Measuring synchronously in\n * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.\n */\n private schedulePosition() {\n if (!this.popupEl) return;\n\n const reapplyLabelStyles = () => {\n const label = this.popupEl?.querySelector(':scope > .tooltip-inner > ds-text');\n if (label instanceof HTMLElement) styleTooltipLabel(label);\n };\n\n requestAnimationFrame(() => {\n reapplyLabelStyles();\n this.calculatePosition();\n requestAnimationFrame(() => {\n reapplyLabelStyles();\n this.calculatePosition();\n });\n });\n\n this.positionObserver?.disconnect();\n this.positionObserver = new ResizeObserver(() => this.calculatePosition());\n this.positionObserver.observe(this.popupEl);\n if (this.anchor) this.positionObserver.observe(this.anchor);\n }\n\n /** Drop the open tip immediately (warm handoff to another tooltip). */\n private hideInstant() {\n this.clearTimers();\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }\n\n private show() {\n // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n // but no tip should appear.\n if (!this.label?.trim()) return;\n this.clearTimers();\n let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n if (activeTooltip && activeTooltip !== this) {\n activeTooltip.hideInstant();\n instant = true;\n }\n // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance\n activeTooltip = this;\n this.skipEnterAnimation = instant;\n if (instant) {\n this.mountPopup();\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n if (!this.label?.trim()) return;\n this.mountPopup();\n }, this.hoverDelayMs);\n }\n\n private hide() {\n this.clearTimers();\n if (!this.popupEl && !this.isOpen) return;\n lastDismissedAt = Date.now();\n if (!this.popupEl) {\n this.isOpen = false;\n return;\n }\n this.popupEl.classList.remove('tooltip-popup--instant');\n this.popupEl.classList.add('tooltip-popup--closing');\n if (this.fadeOutMs === 0) {\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n return;\n }\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }, this.fadeOutMs);\n }\n\n private mountPopup() {\n if (!this.popupEl) {\n const tip = document.createElement('div');\n tip.id = this.tooltipId;\n tip.setAttribute('role', 'tooltip');\n // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n tip.className = 'tooltip-popup sc-ds-tooltip';\n Object.assign(tip.style, {\n position: 'fixed',\n left: '0',\n top: '0',\n zIndex: 'var(--dimension-z-index-tooltip)',\n pointerEvents: 'none',\n });\n document.body.appendChild(tip);\n this.popupEl = tip;\n }\n\n this.setupOpenListeners();\n this.linkDescribedBy();\n this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n this.popupEl.classList.remove('tooltip-popup--closing');\n this.renderPopupContent();\n this.schedulePosition();\n this.isOpen = true;\n }\n\n private renderPopupContent() {\n if (!this.popupEl) return;\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const density =\n this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n const sc = 'sc-ds-tooltip';\n\n const inner = document.createElement('div');\n inner.className = `tooltip-inner ${density} ${sc}`;\n\n const appendShortcut = (position: 'start' | 'end') => {\n if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;\n const group = document.createElement('span');\n group.className = `key-hint-group ${sc}`;\n group.setAttribute('aria-hidden', 'true');\n\n for (const label of shortcutKeyLabels(this.shortcutKey)) {\n const hint = document.createElement('span');\n const wide = Array.from(label).length > 1 ? ' key-hint--wide' : '';\n hint.className = `key-hint${wide} ${sc}`;\n const text = document.createElement('span');\n text.className = `key-hint__label ${sc}`;\n text.textContent = label;\n hint.appendChild(text);\n group.appendChild(hint);\n }\n inner.appendChild(group);\n };\n\n appendShortcut('start');\n\n // ds-text is the layout box (metric-box + 2px control label-inset).\n // Inline styles required — see styleTooltipLabel.\n const label = createDsText({ variant: textVariant, wrap: 'nowrap', text: this.label });\n styleTooltipLabel(label);\n inner.appendChild(label);\n\n appendShortcut('end');\n\n this.popupEl.replaceChildren(inner);\n }\n\n private calculatePosition() {\n if (!this.anchor || !this.popupEl) return;\n const tip = this.popupEl;\n const a = this.anchor.getBoundingClientRect();\n const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n const { x, y, resolvedSide } = computeTooltipPosition({\n anchorRect: a,\n popupWidth: tw,\n popupHeight: th,\n side: this.side,\n align: this.align,\n sideOffsetPx: this.sideOffsetPx,\n alignOffsetPx: this.alignOffsetPx,\n viewportPadPx: this.viewportPadPx,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n });\n tip.dataset.side = resolvedSide;\n tip.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <slot onSlotchange={this.handleSlotChange} />\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function n(n,t){const i=n.trim().split(/\s+/)[0]??"";const e=parseFloat(i);if(Number.isNaN(e))return t;if(/ms\s*$/.test(i))return e;if(/s\s*$/.test(i))return e*1e3;return e}function t(n){const t=n.match(/^var\(\s*(--[^),]+)/);if(t)return t[1].trim();if(n.startsWith("--"))return n.trim();return null}function i(i,e){if(typeof document==="undefined")return e;const o=t(i);if(!o)return n(i,e);const s=getComputedStyle(document.documentElement).getPropertyValue(o).trim();return n(s,e)}function e(e,o){if(typeof e==="number")return e;const s=typeof e==="string"&&e.trim()?e.trim():o;const a=t(s);if(a){return i(s,i(o,200))}return n(s,i(o,200))}function o(){return typeof window!=="undefined"&&typeof window.matchMedia==="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}function s(n,t){return o()?0:e(n,t)}const a="--dimension-menu-width-xs";const r="--dimension-radius-025";const c="--dimension-size-200";const u="--dimension-size-300";const d="--dimension-size-400";const m="--dimension-space-050";const f="--dimension-space-200";const l="--effect-animation-delay-instant";const h="--effect-animation-delay-long-2";const p="--effect-animation-delay-medium-3";const y="--effect-animation-duration-medium-1";const g="--effect-animation-duration-short-3";const z="--effect-motion-short-2";const b="--effect-motion-short-3";const v="--typography-lineheight-md";const w="--typography-lineheight-xl";const D={space050:m,space200:f,radius025:r,size200:c,size300:u,size400:d,menuWidthXs:a,lineheightMd:v,lineheightXl:w,motionShort2:z,motionShort3:b,animationDurationShort3:g,animationDurationMedium1:y,animationDelayInstant:l,animationDelayMedium3:p,animationDelayLong2:h,menuFallbackHeight:"calc(var(--dimension-size-base) * 20)",tooltipFallbackWidth:"calc(var(--dimension-size-800) + var(--dimension-size-200))",donutFillMin:"calc(var(--dimension-size-base) * 16)",donutFillMax:"calc(var(--dimension-size-base) * 24)"};const F={space050:`var(${m})`};export{D as T,
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
function n(n,t){const i=n.trim().split(/\s+/)[0]??"";const e=parseFloat(i);if(Number.isNaN(e))return t;if(/ms\s*$/.test(i))return e;if(/s\s*$/.test(i))return e*1e3;return e}function t(n){const t=n.match(/^var\(\s*(--[^),]+)/);if(t)return t[1].trim();if(n.startsWith("--"))return n.trim();return null}function i(i,e){if(typeof document==="undefined")return e;const o=t(i);if(!o)return n(i,e);const s=getComputedStyle(document.documentElement).getPropertyValue(o).trim();return n(s,e)}function e(e,o){if(typeof e==="number")return e;const s=typeof e==="string"&&e.trim()?e.trim():o;const a=t(s);if(a){return i(s,i(o,200))}return n(s,i(o,200))}function o(){return typeof window!=="undefined"&&typeof window.matchMedia==="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}function s(n,t){return o()?0:e(n,t)}const a="--dimension-menu-width-xs";const r="--dimension-radius-025";const c="--dimension-size-200";const u="--dimension-size-300";const d="--dimension-size-400";const m="--dimension-space-050";const f="--dimension-space-200";const l="--effect-animation-delay-instant";const h="--effect-animation-delay-long-2";const p="--effect-animation-delay-medium-3";const y="--effect-animation-duration-medium-1";const g="--effect-animation-duration-short-3";const z="--effect-motion-short-2";const b="--effect-motion-short-3";const v="--typography-lineheight-md";const w="--typography-lineheight-xl";const D={space050:m,space200:f,radius025:r,size200:c,size300:u,size400:d,menuWidthXs:a,lineheightMd:v,lineheightXl:w,motionShort2:z,motionShort3:b,animationDurationShort3:g,animationDurationMedium1:y,animationDelayInstant:l,animationDelayMedium3:p,animationDelayLong2:h,menuFallbackHeight:"calc(var(--dimension-size-base) * 20)",tooltipFallbackWidth:"calc(var(--dimension-size-800) + var(--dimension-size-200))",donutFillMin:"calc(var(--dimension-size-base) * 16)",donutFillMax:"calc(var(--dimension-size-base) * 24)"};const F={space050:`var(${m})`};export{D as T,F as a,s as b,o as c,n as p,e as r};
|
|
2
|
+
//# sourceMappingURL=p-Dg3xLna0.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as a,h as n,a as i,t as r}from"./index.js";import{d as t}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as a,h as n,a as i,t as r}from"./index.js";import{d as t}from"./p-Bs6SS34m.js";const d="--_badge-gradient-position";function s(e){const a=e.closest("ds-shell-app");return a!==null&&a.getAttribute("gradient-preset")!=="none"}const o=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--no-ring.sc-ds-badge-h{--_badge-ring-width:0}.badge__a11y.sc-ds-badge{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:auto;min-width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-half)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}`;const g={primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",faint:"var(--color-background-faint-neutral)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",translucent:"var(--color-translucent-translucent)",inverted:"var(--color-inverted-background)",media:"var(--color-media-background)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="primary";this.hasRing=true;this.gradientBackground=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){if(!this.hasRing){this.unbindGradientRingSync();return}if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true;return}this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.hasRing)return;if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const a=this.el.closest("ds-shell-app");if(a)this.gradientObserver.observe(a);const n=this.el.closest("ds-bar-nav");if(n)this.gradientObserver.observe(n);const i=this.el.closest("ds-panel-nav");if(i)this.gradientObserver.observe(i)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const a={"--_badge-ring":e};if(!this.gradientBackground||!s(this.el))return a;a[d]="0 0";return a}render(){const e=this.variant==="dot";if(!e&&this.count<=0)return n(i,{style:{display:"none"}});const a=this.count>this.max?`${this.max}+`:String(this.count);const r=this.background??g[this.surface];return n(i,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--no-ring":!this.hasRing,"badge--on-gradient-background":this.hasRing&&this.gradientBackground},style:this.ringHostStyle(r)},n("span",{class:"badge__mark","aria-hidden":"true"},!e&&n("ds-text",{as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a)),this.label&&n("span",{class:"badge__a11y"},this.label))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}],hasRing:[{gradientBackgroundChanged:0}]}}static get style(){return o()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],hasRing:[4,"has-ring"],gradientBackground:[516,"gradient-background"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}],hasRing:[{gradientBackgroundChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-badge","ds-text"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){t()}break}}))}b();export{c as B,b as d};
|
|
2
|
+
//# sourceMappingURL=p-DxeHimqk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","getAttribute","badgeCss","SURFACE_RING","primary","secondary","faint","medium","bold","strong","translucent","inverted","media","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","hasRing","gradientBackground","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","el","bindGradientRingSync","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","render","isDot","h","Host","display","String","background","class","badge","as","emphasis","color","label"],"sources":["src/wc/shell/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n SHELL_GRADIENT_POSITION_BAR_VAR,\n SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n element: HTMLElement;\n chromeHost: HTMLElement;\n positionVar: string;\n}\n\n/** Whether the badge sits under a shell with an active wash preset. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n // Explicit <HTMLElement>: the inferred HTMLDsAppShellElement type only\n // resolves where @stencil/core types are installed — consumers importing\n // `@ds-mo/ui/shell` (raw TS) compile this without them.\n const shell = from.closest<HTMLElement>('ds-app-shell');\n return shell !== null && shell.getAttribute('gradient-preset') !== 'none';\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n if (barHost) {\n const root = barHost.shadowRoot ?? barHost;\n const element = root.querySelector('.bar-nav');\n if (element) {\n return {\n element: element as HTMLElement,\n chromeHost: barHost,\n positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n };\n }\n }\n\n const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n if (panelHost) {\n const root = panelHost.shadowRoot ?? panelHost;\n const element = root.querySelector('.panel-nav');\n if (element) {\n return {\n element: element as HTMLElement,\n chromeHost: panelHost,\n positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n };\n }\n }\n\n return null;\n}\n\ninterface ParsedPosition {\n x: number;\n y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n const trimmed = value.trim();\n if (!trimmed) return { x: 0, y: 0 };\n\n const parts = trimmed.split(/\\s+/);\n const x = parseLength(parts[0] ?? '0');\n const y = parseLength(parts[1] ?? '0');\n return { x, y };\n}\n\nfunction parseLength(token: string): number {\n const px = token.match(/^(-?[\\d.]+)px$/);\n if (px) return Number(px[1]);\n return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n badgeHost: HTMLElement,\n surface: GradientSurface,\n shellPosition: string,\n): string {\n const badgeRect = badgeHost.getBoundingClientRect();\n const surfaceRect = surface.element.getBoundingClientRect();\n const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n const styles = getComputedStyle(surface.chromeHost);\n return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n if (!isShellGradientActive(badgeHost)) {\n badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n return;\n }\n\n badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n",":host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n vertical-align: middle;\n\n --_badge-bg: var(--color-background-bold-brand);\n --_badge-fg: var(--color-foreground-on-bold-background-primary);\n --_badge-ring: var(--color-background-secondary);\n --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n color: var(--_badge-fg);\n background: var(--_badge-bg);\n box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n --_badge-ring-width: 0;\n}\n\n.badge__a11y {\n position: absolute;\n /* stylelint-disable declaration-property-value-disallowed-list -- classic visually-hidden clip pattern */\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n /* stylelint-enable declaration-property-value-disallowed-list */\n}\n\n:host(.badge--dot) .badge__mark {\n width: var(--dimension-size-075);\n height: var(--dimension-size-075);\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n width: auto;\n min-width: var(--dimension-size-150);\n height: var(--dimension-size-150);\n padding: 0 var(--dimension-space-025);\n border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n position: relative;\n z-index: 0;\n box-shadow: none;\n isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n content: '';\n position: absolute;\n inset: calc(-1 * var(--_badge-ring-width));\n border-radius: inherit;\n box-sizing: border-box;\n padding: var(--_badge-ring-width);\n pointer-events: none;\n /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* stylelint-enable color-no-hex */\n mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n z-index: -2;\n background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n z-index: -1;\n background-image: var(--ds-shell-gradient-image, none);\n background-size: var(--ds-shell-gradient-size, auto);\n background-position: 0 0;\n background-repeat: no-repeat;\n background-attachment: fixed;\n opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n BADGE_GRADIENT_POSITION_VAR,\n isShellGradientActive,\n} from '../../shell/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n | 'primary'\n | 'secondary'\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'navigation'\n | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n primary: 'var(--color-background-primary)',\n secondary: 'var(--color-background-secondary)',\n faint: 'var(--color-background-faint-neutral)',\n medium: 'var(--color-background-medium-neutral)',\n bold: 'var(--color-background-bold-neutral)',\n strong: 'var(--color-background-strong-neutral)',\n translucent: 'var(--color-translucent-translucent)',\n inverted: 'var(--color-inverted-background)',\n media: 'var(--color-media-background)',\n navigation: 'var(--color-navigation-background)',\n 'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n tag: 'ds-badge',\n styleUrl: 'Badge.css',\n scoped: true,\n})\nexport class Badge {\n @Element() el!: HTMLElement;\n\n /** Render as a compact counter or notification dot. */\n @Prop() variant: BadgeVariant = 'counter';\n\n /** Count shown for counter badges. Count 0 hides the badge. */\n @Prop() count: number = 0;\n\n /** Highest count shown before compacting to \"{max}+\". */\n @Prop() max: number = 9;\n\n /** Immediate backing surface matched by the ring around either variant. */\n @Prop() surface: BadgeSurface = 'primary';\n\n /** Direct ring background override for component-local surfaces. */\n @Prop() background: string | undefined;\n\n /** Show the separation ring when the badge overlaps an icon or other content. */\n @Prop() hasRing: boolean = true;\n\n /**\n * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n * `box-shadow`. Auto-enabled under an AppShell with an active gradient preset;\n * set `gradient-background` to opt in/out explicitly.\n *\n * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n * unknown `on*` member down the event-listener path during attribute\n * reflection, calling addEventListener with a non-listener and throwing.\n */\n @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n /** Contextual supplemental text. Omit when the owner hides the badge from assistive technology. */\n @Prop() label: string | undefined;\n\n /** Bumps on resize/layout so render recomputes gradient ring position. */\n @State() private gradientLayoutVersion = 0;\n\n private gradientObserver: ResizeObserver | null = null;\n private gradientWindowListener: (() => void) | null = null;\n\n componentDidLoad() {\n this.enableShellGradientRingIfNeeded();\n }\n\n disconnectedCallback() {\n this.unbindGradientRingSync();\n }\n\n @Watch('gradientBackground')\n @Watch('hasRing')\n gradientBackgroundChanged() {\n if (!this.hasRing) {\n this.unbindGradientRingSync();\n return;\n }\n if (!this.gradientBackground && isShellGradientActive(this.el)) {\n this.gradientBackground = true;\n return;\n }\n this.bindGradientRingSync();\n }\n\n /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n private enableShellGradientRingIfNeeded() {\n if (!this.hasRing) return;\n\n if (!this.gradientBackground && isShellGradientActive(this.el)) {\n this.gradientBackground = true;\n }\n\n if (this.gradientBackground) {\n this.bindGradientRingSync();\n }\n }\n\n private bindGradientRingSync() {\n this.unbindGradientRingSync();\n\n if (!this.gradientBackground) return;\n\n const update = () => {\n this.gradientLayoutVersion += 1;\n };\n update();\n\n this.gradientWindowListener = update;\n window.addEventListener('resize', update);\n\n if (typeof ResizeObserver !== 'undefined') {\n this.gradientObserver = new ResizeObserver(update);\n this.gradientObserver.observe(this.el);\n\n const shell = this.el.closest('ds-app-shell');\n if (shell) this.gradientObserver.observe(shell);\n\n const bar = this.el.closest('ds-bar-nav');\n if (bar) this.gradientObserver.observe(bar);\n\n const panel = this.el.closest('ds-panel-nav');\n if (panel) this.gradientObserver.observe(panel);\n }\n }\n\n private unbindGradientRingSync() {\n if (this.gradientWindowListener) {\n window.removeEventListener('resize', this.gradientWindowListener);\n this.gradientWindowListener = null;\n }\n\n this.gradientObserver?.disconnect();\n this.gradientObserver = null;\n }\n\n private ringHostStyle(ring: string): Record<string, string> {\n void this.gradientLayoutVersion;\n\n const style: Record<string, string> = { '--_badge-ring': ring };\n if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n return style;\n }\n\n render() {\n const isDot = this.variant === 'dot';\n\n if (!isDot && this.count <= 0) return <Host style={{ display: 'none' }} />;\n\n const display = this.count > this.max ? `${this.max}+` : String(this.count);\n const ring = this.background ?? SURFACE_RING[this.surface];\n\n return (\n <Host\n class={{\n badge: true,\n 'badge--counter': !isDot,\n 'badge--dot': isDot,\n 'badge--no-ring': !this.hasRing,\n 'badge--on-gradient-background': this.hasRing && this.gradientBackground,\n }}\n style={this.ringHostStyle(ring)}\n >\n <span class=\"badge__mark\" aria-hidden=\"true\">\n {!isDot && (\n <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n {display}\n </ds-text>\n )}\n </span>\n {this.label && <span class=\"badge__a11y\">{this.label}</span>}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","getAttribute","badgeCss","SURFACE_RING","primary","secondary","faint","medium","bold","strong","translucent","inverted","media","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","hasRing","gradientBackground","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","el","bindGradientRingSync","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","render","isDot","h","Host","display","String","background","class","badge","as","emphasis","color","label"],"sources":["src/wc/shell/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n SHELL_GRADIENT_POSITION_BAR_VAR,\n SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n element: HTMLElement;\n chromeHost: HTMLElement;\n positionVar: string;\n}\n\n/** Whether the badge sits under a shell with an active wash preset. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n // Explicit <HTMLElement>: the inferred HTMLDsShellAppElement type only\n // resolves where @stencil/core types are installed — consumers importing\n // `@ds-mo/ui/shell` (raw TS) compile this without them.\n const shell = from.closest<HTMLElement>('ds-shell-app');\n return shell !== null && shell.getAttribute('gradient-preset') !== 'none';\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n if (barHost) {\n const root = barHost.shadowRoot ?? barHost;\n const element = root.querySelector('.bar-nav');\n if (element) {\n return {\n element: element as HTMLElement,\n chromeHost: barHost,\n positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n };\n }\n }\n\n const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n if (panelHost) {\n const root = panelHost.shadowRoot ?? panelHost;\n const element = root.querySelector('.panel-nav');\n if (element) {\n return {\n element: element as HTMLElement,\n chromeHost: panelHost,\n positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n };\n }\n }\n\n return null;\n}\n\ninterface ParsedPosition {\n x: number;\n y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n const trimmed = value.trim();\n if (!trimmed) return { x: 0, y: 0 };\n\n const parts = trimmed.split(/\\s+/);\n const x = parseLength(parts[0] ?? '0');\n const y = parseLength(parts[1] ?? '0');\n return { x, y };\n}\n\nfunction parseLength(token: string): number {\n const px = token.match(/^(-?[\\d.]+)px$/);\n if (px) return Number(px[1]);\n return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n badgeHost: HTMLElement,\n surface: GradientSurface,\n shellPosition: string,\n): string {\n const badgeRect = badgeHost.getBoundingClientRect();\n const surfaceRect = surface.element.getBoundingClientRect();\n const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n const styles = getComputedStyle(surface.chromeHost);\n return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n if (!isShellGradientActive(badgeHost)) {\n badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n return;\n }\n\n badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n",":host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n vertical-align: middle;\n\n --_badge-bg: var(--color-background-bold-brand);\n --_badge-fg: var(--color-foreground-on-bold-background-primary);\n --_badge-ring: var(--color-background-secondary);\n --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n color: var(--_badge-fg);\n background: var(--_badge-bg);\n box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n --_badge-ring-width: 0;\n}\n\n.badge__a11y {\n position: absolute;\n /* stylelint-disable declaration-property-value-disallowed-list -- classic visually-hidden clip pattern */\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n /* stylelint-enable declaration-property-value-disallowed-list */\n}\n\n:host(.badge--dot) .badge__mark {\n width: var(--dimension-size-075);\n height: var(--dimension-size-075);\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n width: auto;\n min-width: var(--dimension-size-150);\n height: var(--dimension-size-150);\n padding: 0 var(--dimension-space-025);\n border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n position: relative;\n z-index: 0;\n box-shadow: none;\n isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n content: '';\n position: absolute;\n inset: calc(-1 * var(--_badge-ring-width));\n border-radius: inherit;\n box-sizing: border-box;\n padding: var(--_badge-ring-width);\n pointer-events: none;\n /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* stylelint-enable color-no-hex */\n mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n z-index: -2;\n background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n z-index: -1;\n background-image: var(--ds-shell-gradient-image, none);\n background-size: var(--ds-shell-gradient-size, auto);\n background-position: 0 0;\n background-repeat: no-repeat;\n background-attachment: fixed;\n opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n BADGE_GRADIENT_POSITION_VAR,\n isShellGradientActive,\n} from '../../shell/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n | 'primary'\n | 'secondary'\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'navigation'\n | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n primary: 'var(--color-background-primary)',\n secondary: 'var(--color-background-secondary)',\n faint: 'var(--color-background-faint-neutral)',\n medium: 'var(--color-background-medium-neutral)',\n bold: 'var(--color-background-bold-neutral)',\n strong: 'var(--color-background-strong-neutral)',\n translucent: 'var(--color-translucent-translucent)',\n inverted: 'var(--color-inverted-background)',\n media: 'var(--color-media-background)',\n navigation: 'var(--color-navigation-background)',\n 'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n tag: 'ds-badge',\n styleUrl: 'Badge.css',\n scoped: true,\n})\nexport class Badge {\n @Element() el!: HTMLElement;\n\n /** Render as a compact counter or notification dot. */\n @Prop() variant: BadgeVariant = 'counter';\n\n /** Count shown for counter badges. Count 0 hides the badge. */\n @Prop() count: number = 0;\n\n /** Highest count shown before compacting to \"{max}+\". */\n @Prop() max: number = 9;\n\n /** Immediate backing surface matched by the ring around either variant. */\n @Prop() surface: BadgeSurface = 'primary';\n\n /** Direct ring background override for component-local surfaces. */\n @Prop() background: string | undefined;\n\n /** Show the separation ring when the badge overlaps an icon or other content. */\n @Prop() hasRing: boolean = true;\n\n /**\n * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n * `box-shadow`. Auto-enabled under an ShellApp with an active gradient preset;\n * set `gradient-background` to opt in/out explicitly.\n *\n * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n * unknown `on*` member down the event-listener path during attribute\n * reflection, calling addEventListener with a non-listener and throwing.\n */\n @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n /** Contextual supplemental text. Omit when the owner hides the badge from assistive technology. */\n @Prop() label: string | undefined;\n\n /** Bumps on resize/layout so render recomputes gradient ring position. */\n @State() private gradientLayoutVersion = 0;\n\n private gradientObserver: ResizeObserver | null = null;\n private gradientWindowListener: (() => void) | null = null;\n\n componentDidLoad() {\n this.enableShellGradientRingIfNeeded();\n }\n\n disconnectedCallback() {\n this.unbindGradientRingSync();\n }\n\n @Watch('gradientBackground')\n @Watch('hasRing')\n gradientBackgroundChanged() {\n if (!this.hasRing) {\n this.unbindGradientRingSync();\n return;\n }\n if (!this.gradientBackground && isShellGradientActive(this.el)) {\n this.gradientBackground = true;\n return;\n }\n this.bindGradientRingSync();\n }\n\n /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n private enableShellGradientRingIfNeeded() {\n if (!this.hasRing) return;\n\n if (!this.gradientBackground && isShellGradientActive(this.el)) {\n this.gradientBackground = true;\n }\n\n if (this.gradientBackground) {\n this.bindGradientRingSync();\n }\n }\n\n private bindGradientRingSync() {\n this.unbindGradientRingSync();\n\n if (!this.gradientBackground) return;\n\n const update = () => {\n this.gradientLayoutVersion += 1;\n };\n update();\n\n this.gradientWindowListener = update;\n window.addEventListener('resize', update);\n\n if (typeof ResizeObserver !== 'undefined') {\n this.gradientObserver = new ResizeObserver(update);\n this.gradientObserver.observe(this.el);\n\n const shell = this.el.closest('ds-shell-app');\n if (shell) this.gradientObserver.observe(shell);\n\n const bar = this.el.closest('ds-bar-nav');\n if (bar) this.gradientObserver.observe(bar);\n\n const panel = this.el.closest('ds-panel-nav');\n if (panel) this.gradientObserver.observe(panel);\n }\n }\n\n private unbindGradientRingSync() {\n if (this.gradientWindowListener) {\n window.removeEventListener('resize', this.gradientWindowListener);\n this.gradientWindowListener = null;\n }\n\n this.gradientObserver?.disconnect();\n this.gradientObserver = null;\n }\n\n private ringHostStyle(ring: string): Record<string, string> {\n void this.gradientLayoutVersion;\n\n const style: Record<string, string> = { '--_badge-ring': ring };\n if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n return style;\n }\n\n render() {\n const isDot = this.variant === 'dot';\n\n if (!isDot && this.count <= 0) return <Host style={{ display: 'none' }} />;\n\n const display = this.count > this.max ? `${this.max}+` : String(this.count);\n const ring = this.background ?? SURFACE_RING[this.surface];\n\n return (\n <Host\n class={{\n badge: true,\n 'badge--counter': !isDot,\n 'badge--dot': isDot,\n 'badge--no-ring': !this.hasRing,\n 'badge--on-gradient-background': this.hasRing && this.gradientBackground,\n }}\n style={this.ringHostStyle(ring)}\n >\n <span class=\"badge__mark\" aria-hidden=\"true\">\n {!isDot && (\n <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n {display}\n </ds-text>\n )}\n </span>\n {this.label && <span class=\"badge__a11y\">{this.label}</span>}\n </Host>\n );\n }\n}\n"],"mappings":"+FAMO,MAAMA,EAA8B,6BASrC,SAAUC,EAAsBC,GAIpC,MAAMC,EAAQD,EAAKE,QAAqB,gBACxC,OAAOD,IAAU,MAAQA,EAAME,aAAa,qBAAuB,MACrE,CCrBA,MAAMC,EAAW,IAAM,8tECoBvB,MAAMC,EAA6C,CACjDC,QAAS,kCACTC,UAAW,oCACXC,MAAO,wCACPC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,YAAa,uCACbC,SAAU,mCACVC,MAAO,gCACPC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAI,QAAwB,UAMxBJ,KAAAK,QAAmB,KAWgCL,KAAAM,mBAA8B,MAMxEN,KAAAO,sBAAwB,EAEjCP,KAAAQ,iBAA0C,KAC1CR,KAAAS,uBAA8C,IAoHvD,CAlHC,gBAAAC,GACEV,KAAKW,iC,CAGP,oBAAAC,GACEZ,KAAKa,wB,CAKP,yBAAAC,GACE,IAAKd,KAAKK,QAAS,CACjBL,KAAKa,yBACL,M,CAEF,IAAKb,KAAKM,oBAAsB5B,EAAsBsB,KAAKe,IAAK,CAC9Df,KAAKM,mBAAqB,KAC1B,M,CAEFN,KAAKgB,sB,CAIC,+BAAAL,GACN,IAAKX,KAAKK,QAAS,OAEnB,IAAKL,KAAKM,oBAAsB5B,EAAsBsB,KAAKe,IAAK,CAC9Df,KAAKM,mBAAqB,I,CAG5B,GAAIN,KAAKM,mBAAoB,CAC3BN,KAAKgB,sB,EAID,oBAAAA,GACNhB,KAAKa,yBAEL,IAAKb,KAAKM,mBAAoB,OAE9B,MAAMW,EAAS,KACbjB,KAAKO,uBAAyB,CAAC,EAEjCU,IAEAjB,KAAKS,uBAAyBQ,EAC9BC,OAAOC,iBAAiB,SAAUF,GAElC,UAAWG,iBAAmB,YAAa,CACzCpB,KAAKQ,iBAAmB,IAAIY,eAAeH,GAC3CjB,KAAKQ,iBAAiBa,QAAQrB,KAAKe,IAEnC,MAAMnC,EAAQoB,KAAKe,GAAGlC,QAAQ,gBAC9B,GAAID,EAAOoB,KAAKQ,iBAAiBa,QAAQzC,GAEzC,MAAM0C,EAAMtB,KAAKe,GAAGlC,QAAQ,cAC5B,GAAIyC,EAAKtB,KAAKQ,iBAAiBa,QAAQC,GAEvC,MAAMC,EAAQvB,KAAKe,GAAGlC,QAAQ,gBAC9B,GAAI0C,EAAOvB,KAAKQ,iBAAiBa,QAAQE,E,EAIrC,sBAAAV,GACN,GAAIb,KAAKS,uBAAwB,CAC/BS,OAAOM,oBAAoB,SAAUxB,KAAKS,wBAC1CT,KAAKS,uBAAyB,I,CAGhCT,KAAKQ,kBAAkBiB,aACvBzB,KAAKQ,iBAAmB,I,CAGlB,aAAAkB,CAAcC,GAGpB,MAAMC,EAAgC,CAAE,gBAAiBD,GACzD,IAAK3B,KAAKM,qBAAuB5B,EAAsBsB,KAAKe,IAAK,OAAOa,EAGxEA,EAAMnD,GAA+B,MACrC,OAAOmD,C,CAGT,MAAAC,GACE,MAAMC,EAAQ9B,KAAKC,UAAY,MAE/B,IAAK6B,GAAS9B,KAAKE,OAAS,EAAG,OAAO6B,EAACC,EAAI,CAACJ,MAAO,CAAEK,QAAS,UAE9D,MAAMA,EAAUjC,KAAKE,MAAQF,KAAKG,IAAM,GAAGH,KAAKG,OAAS+B,OAAOlC,KAAKE,OACrE,MAAMyB,EAAO3B,KAAKmC,YAAcnD,EAAagB,KAAKI,SAElD,OACE2B,EAACC,EAAI,CACHI,MAAO,CACLC,MAAO,KACP,kBAAmBP,EACnB,aAAcA,EACd,kBAAmB9B,KAAKK,QACxB,gCAAiCL,KAAKK,SAAWL,KAAKM,oBAExDsB,MAAO5B,KAAK0B,cAAcC,IAE1BI,EAAA,QAAMK,MAAM,cAAa,cAAa,SAClCN,GACAC,EAAA,WAASO,GAAG,OAAOrC,QAAQ,eAAesC,SAAQ,KAACC,MAAM,WACtDP,IAINjC,KAAKyC,OAASV,EAAA,QAAMK,MAAM,eAAepC,KAAKyC,O","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as i,c as t,h as e,a as n,t as o}from"./index.js";const r=()=>`:host{--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)}:host(.ds-focus-ring:focus-visible),.ds-focus-ring:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring.ds-focus-ring--visible),.ds-focus-ring.ds-focus-ring--visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring-inset:focus-visible),.ds-focus-ring-inset:focus-visible{outline:none}:host(.ds-focus-ring-inset:focus-visible)::after,.ds-focus-ring-inset:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-focus-ring-inset.ds-focus-ring--visible),.ds-focus-ring-inset.ds-focus-ring--visible{outline:none}:host(.ds-focus-ring-inset.ds-focus-ring--visible)::after,.ds-focus-ring-inset.ds-focus-ring--visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-control-inactive),.ds-control-inactive{opacity:0.25;pointer-events:none;cursor:not-allowed}:host{--ds-switch-width:var(--dimension-size-400);--ds-switch-height:var(--dimension-size-250);--ds-switch-thumb-size:var(--dimension-size-150);--ds-switch-gap:var(--dimension-space-050);--ds-switch-stroke:var(--dimension-stroke-width-012);--ds-switch-inset:var(--ds-switch-gap);--ds-switch-thumb-hover:var(--color-interaction-hover);--ds-switch-thumb-pressed:var(--color-interaction-pressed);--ds-switch-travel:calc( var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) - var(--ds-switch-inset) );position:relative;display:inline-flex;width:var(--ds-switch-width);height:var(--ds-switch-height);padding:0;border:none;border-radius:var(--dimension-radius-half);box-sizing:border-box;flex-shrink:0;overflow:visible;cursor:pointer;user-select:none;outline:none;background-color:transparent;box-shadow:inset 0 0 0 var(--ds-switch-stroke) var(--color-border-secondary);transition:background-color var(--effect-motion-short-3), box-shadow var(--effect-motion-short-3)}:host(.switch--sm){--ds-switch-width:var(--dimension-size-300);--ds-switch-height:var(--dimension-size-200);--ds-switch-thumb-size:calc(var(--dimension-size-base) * 5 / 4);--ds-switch-gap:calc(var(--dimension-space-025) + var(--dimension-space-012))}:host(.switch--xs){--ds-switch-width:var(--dimension-size-250);--ds-switch-height:var(--dimension-size-150);--ds-switch-thumb-size:var(--dimension-size-100);--ds-switch-gap:var(--dimension-space-025)}:host(.checked){background-color:var(--color-background-bold-brand);box-shadow:none}:host(.switch--readonly),:host(.switch--presentation){cursor:default}:host(.switch--presentation){pointer-events:none}.thumb{position:absolute;top:50%;left:var(--ds-switch-inset);width:var(--ds-switch-thumb-size);height:var(--ds-switch-thumb-size);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-tertiary);box-shadow:none;transform:translateY(-50%);transition:background-color var(--effect-motion-short-3), transform var(--effect-motion-short-3);pointer-events:none}.thumb::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none}:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation)) .thumb::after{background:var(--ds-switch-thumb-hover)}:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation)) .thumb::after{background:var(--ds-switch-thumb-pressed)}:host(.checked) .thumb{background-color:var(--color-background-primary);box-shadow:none;transform:translate3d(var(--ds-switch-travel), -50%, 0)}@media (prefers-reduced-motion: reduce){:host{transition:none}.thumb{transition:none}}`;let a=0;const d=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.dsChange=t(this,"dsChange");this.internals=this.attachInternals();this.checked=false;this.value="on";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";this.isInactive=false;this.size="md";this.presentation=false;this.initialChecked=false;this.formDisabled=false;this.focused=false;this.touched=false;this.handleClick=()=>{if(this.presentation||this.readOnly||this.isInactive||this.disabled||this.formDisabled)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=s=>{if(this.presentation||this.readOnly||this.isInactive||this.disabled||this.formDisabled)return;if(s.key===" "||s.key==="Enter"){s.preventDefault();this.handleClick()}};this.handleFocus=()=>{if(!this.presentation)this.focused=true};this.handleBlur=()=>{if(this.presentation)return;this.focused=false;this.touched=true}}componentWillLoad(){this.initialChecked=this.checked;this.syncFormValue()}componentDidLoad(){this.syncNativeLabels()}syncFormValue(){const s=this.presentation||this.isInactive||this.disabled||this.formDisabled;const i=this.checked?this.value:this.uncheckedValue??null;const t=this.checked?"checked":"unchecked";this.internals.setFormValue(s?null:i,t);const e=this.required&&!s&&!this.checked;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked;this.focused=false;this.touched=false}formStateRestoreCallback(s){this.checked=s==="checked"}syncNativeLabels(){if(this.presentation)return;if(this.el.hasAttribute("aria-label")||this.el.hasAttribute("aria-labelledby"))return;const s=Array.from(this.internals.labels).map((s=>{if(!s.id)s.id=`ds-switch-label-${++a}`;return s.id}));if(s.length)this.el.setAttribute("aria-labelledby",s.join(" "))}render(){const s=this.isInactive||this.disabled||this.formDisabled;const i=this.required&&!s&&!this.checked;const t=this.checked!==this.initialChecked;return e(n,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as s,H as i,c as t,h as e,a as n,t as o}from"./index.js";const r=()=>`:host{--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)}:host(.ds-focus-ring:focus-visible),.ds-focus-ring:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring.ds-focus-ring--visible),.ds-focus-ring.ds-focus-ring--visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring-inset:focus-visible),.ds-focus-ring-inset:focus-visible{outline:none}:host(.ds-focus-ring-inset:focus-visible)::after,.ds-focus-ring-inset:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-focus-ring-inset.ds-focus-ring--visible),.ds-focus-ring-inset.ds-focus-ring--visible{outline:none}:host(.ds-focus-ring-inset.ds-focus-ring--visible)::after,.ds-focus-ring-inset.ds-focus-ring--visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-control-inactive),.ds-control-inactive{opacity:0.25;pointer-events:none;cursor:not-allowed}:host{--ds-switch-width:var(--dimension-size-400);--ds-switch-height:var(--dimension-size-250);--ds-switch-thumb-size:var(--dimension-size-150);--ds-switch-gap:var(--dimension-space-050);--ds-switch-stroke:var(--dimension-stroke-width-012);--ds-switch-inset:var(--ds-switch-gap);--ds-switch-thumb-hover:var(--color-interaction-hover);--ds-switch-thumb-pressed:var(--color-interaction-pressed);--ds-switch-travel:calc( var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) - var(--ds-switch-inset) );position:relative;display:inline-flex;width:var(--ds-switch-width);height:var(--ds-switch-height);padding:0;border:none;border-radius:var(--dimension-radius-half);box-sizing:border-box;flex-shrink:0;overflow:visible;cursor:pointer;user-select:none;outline:none;background-color:transparent;box-shadow:inset 0 0 0 var(--ds-switch-stroke) var(--color-border-secondary);transition:background-color var(--effect-motion-short-3), box-shadow var(--effect-motion-short-3)}:host(.switch--sm){--ds-switch-width:var(--dimension-size-300);--ds-switch-height:var(--dimension-size-200);--ds-switch-thumb-size:calc(var(--dimension-size-base) * 5 / 4);--ds-switch-gap:calc(var(--dimension-space-025) + var(--dimension-space-012))}:host(.switch--xs){--ds-switch-width:var(--dimension-size-250);--ds-switch-height:var(--dimension-size-150);--ds-switch-thumb-size:var(--dimension-size-100);--ds-switch-gap:var(--dimension-space-025)}:host(.checked){background-color:var(--color-background-bold-brand);box-shadow:none}:host(.switch--readonly),:host(.switch--presentation){cursor:default}:host(.switch--presentation){pointer-events:none}.thumb{position:absolute;top:50%;left:var(--ds-switch-inset);width:var(--ds-switch-thumb-size);height:var(--ds-switch-thumb-size);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-tertiary);box-shadow:none;transform:translateY(-50%);transition:background-color var(--effect-motion-short-3), transform var(--effect-motion-short-3);pointer-events:none}.thumb::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none}:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation)) .thumb::after{background:var(--ds-switch-thumb-hover)}:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation)) .thumb::after{background:var(--ds-switch-thumb-pressed)}:host(.checked) .thumb{background-color:var(--color-background-primary);box-shadow:none;transform:translate3d(var(--ds-switch-travel), -50%, 0)}@media (prefers-reduced-motion: reduce){:host{transition:none}.thumb{transition:none}}`;let a=0;const d=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.dsChange=t(this,"dsChange");this.internals=this.attachInternals();this.checked=false;this.value="on";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";this.isInactive=false;this.size="md";this.presentation=false;this.initialChecked=false;this.formDisabled=false;this.focused=false;this.touched=false;this.handleClick=()=>{if(this.presentation||this.readOnly||this.isInactive||this.disabled||this.formDisabled)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=s=>{if(this.presentation||this.readOnly||this.isInactive||this.disabled||this.formDisabled)return;if(s.key===" "||s.key==="Enter"){s.preventDefault();this.handleClick()}};this.handleFocus=()=>{if(!this.presentation)this.focused=true};this.handleBlur=()=>{if(this.presentation)return;this.focused=false;this.touched=true}}componentWillLoad(){this.initialChecked=this.checked;this.syncFormValue()}componentDidLoad(){this.syncNativeLabels()}syncFormValue(){const s=this.presentation||this.isInactive||this.disabled||this.formDisabled;const i=this.checked?this.value:this.uncheckedValue??null;const t=this.checked?"checked":"unchecked";this.internals.setFormValue(s?null:i,t);const e=this.required&&!s&&!this.checked;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked;this.focused=false;this.touched=false}formStateRestoreCallback(s){this.checked=s==="checked"}syncNativeLabels(){if(this.presentation)return;if(this.el.hasAttribute("aria-label")||this.el.hasAttribute("aria-labelledby"))return;const s=Array.from(this.internals.labels).map((s=>{if(!s.id)s.id=`ds-switch-label-${++a}`;return s.id}));if(s.length)this.el.setAttribute("aria-labelledby",s.join(" "))}render(){const s=this.isInactive||this.disabled||this.formDisabled;const i=this.required&&!s&&!this.checked;const t=this.checked!==this.initialChecked;return e(n,{key:"f729ec1c0b6f5ac0417194286acbc59f323251b5",role:this.presentation?undefined:"switch","aria-checked":this.presentation?undefined:String(this.checked),"aria-disabled":!this.presentation&&s?"true":undefined,"aria-readonly":!this.presentation&&this.readOnly?"true":undefined,"aria-required":!this.presentation&&this.required?"true":undefined,"aria-invalid":!this.presentation&&i?"true":undefined,"aria-hidden":this.presentation?"true":undefined,"data-checked":this.checked?"":undefined,"data-unchecked":!this.checked?"":undefined,"data-disabled":s?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-focused":!this.presentation&&this.focused?"":undefined,"data-filled":!this.presentation&&this.checked?"":undefined,"data-dirty":!this.presentation&&t?"":undefined,"data-touched":!this.presentation&&this.touched?"":undefined,"data-valid":!this.presentation&&!s&&!i?"":undefined,"data-invalid":!this.presentation&&i?"":undefined,tabIndex:this.presentation||s?-1:0,class:{switch:true,checked:this.checked,"switch--md":this.size==="md","switch--sm":this.size==="sm","switch--xs":this.size==="xs","switch--readonly":this.readOnly,"switch--presentation":this.presentation,"ds-focus-ring":true,"ds-control-inactive":s},onClick:this.handleClick,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur},e("span",{key:"9cb13aa63ff4dbcd1b4f6b4b0aa426b8148fa1d2",class:"thumb"}))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],uncheckedValue:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],presentation:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return r()}},[65,"ds-switch",{checked:[1028],name:[513],value:[1],uncheckedValue:[1,"unchecked-value"],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],isInactive:[4,"is-inactive"],size:[1],presentation:[4],formDisabled:[32],focused:[32],touched:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],uncheckedValue:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],presentation:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function h(){if(typeof customElements==="undefined"){return}const s=["ds-switch"];s.forEach((s=>{switch(s){case"ds-switch":if(!customElements.get(o(s))){customElements.define(o(s),d)}break}}))}h();export{d as S,h as d};
|
|
2
|
+
//# sourceMappingURL=p-Dy_sZ-dI.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as a,H as e,h as d,a as s,t as i}from"./index.js";import{d as r}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as a,H as e,h as d,a as s,t as i}from"./index.js";import{d as r}from"./p-Bs6SS34m.js";const t=()=>`.sc-ds-card-shell-data-viz-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-shell-data-viz-width);min-height:var(--_card-shell-data-viz-min-height);max-width:100%;overflow:hidden;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-shell-data-viz__header.sc-ds-card-shell-data-viz{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);background-color:var(--color-background-secondary)}ds-text.card-shell-data-viz__title.sc-ds-card-shell-data-viz{display:flex;flex:1 1 auto;align-items:center;box-sizing:border-box;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));-webkit-user-select:none;user-select:none}.card-shell-data-viz__actions.sc-ds-card-shell-data-viz{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-shell-data-viz__actions.sc-ds-card-shell-data-viz:empty{display:none}.card-shell-data-viz__body.sc-ds-card-shell-data-viz{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;min-height:0;border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary)}`;const c={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const l={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const o=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.cardWidth="md"}render(){return d(s,{key:"35033fee66abb0f944e351623676df51b3eeabab",class:"card-shell-data-viz",style:{"--_card-shell-data-viz-width":c[this.cardWidth],"--_card-shell-data-viz-min-height":l[this.cardWidth]}},d("header",{key:"22b7c0756fb6c2008c53b001bfe5b3e811aa99e3",class:"card-shell-data-viz__header"},d("ds-text",{key:"cc12d07428fe6969b10c1525432a9c645691a2a3",class:"card-shell-data-viz__title",variant:"text-title-small",emphasis:true,color:"primary",as:"h2"},this.heading),d("div",{key:"730e4e355f88b509c78f1826dcdb0eceaf8b7981",class:"card-shell-data-viz__actions"},d("slot",{key:"83c34add5e547524f2734ba306e257751023d469",name:"actions"}))),d("div",{key:"3006e8aeaaf5a308ee2147f33a9e62fec62fa50c",class:"card-shell-data-viz__body"},d("slot",{key:"f7c28a38e4afa018d338e3e150082a0637a07699"})))}static get style(){return t()}},[262,"ds-card-shell-data-viz",{heading:[1],cardWidth:[1,"card-width"]}]);function n(){if(typeof customElements==="undefined"){return}const a=["ds-card-shell-data-viz","ds-text"];a.forEach((a=>{switch(a){case"ds-card-shell-data-viz":if(!customElements.get(i(a))){customElements.define(i(a),o)}break;case"ds-text":if(!customElements.get(i(a))){r()}break}}))}n();export{o as C,n as d};
|
|
2
|
+
//# sourceMappingURL=p-liMPkhUP.js.map
|