@ds-mo/ui 13.6.0 → 13.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +2 -2
- package/dist/agent.json +109 -371
- package/dist/angular/ds-card-chart.d.ts +18 -0
- package/dist/angular/{ds-card-data-viz.js → ds-card-chart.js} +10 -10
- package/dist/angular/ds-chart.d.ts +19 -0
- package/dist/angular/{ds-chart-donut.js → ds-chart.js} +15 -15
- package/dist/angular/ds-tooltip-chart.d.ts +12 -0
- package/dist/angular/{ds-chart-line.js → ds-tooltip-chart.js} +12 -12
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +3 -5
- package/dist/angular/proxies.d.ts +3 -5
- package/dist/angular/proxies.js +3 -5
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-banner.js.map +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-breadcrumb.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/{ds-chart-line.d.ts → ds-card-chart.d.ts} +4 -4
- package/dist/components/ds-card-chart.js +2 -0
- package/dist/components/ds-card-chart.js.map +1 -0
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-setting.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/{ds-chart-bar.d.ts → ds-chart.d.ts} +4 -4
- package/dist/components/ds-chart.js +2 -0
- package/dist/components/ds-chart.js.map +1 -0
- 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-section.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-bubble.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.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-modal.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-scroll-overlay.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-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-toast.js.map +1 -1
- package/dist/components/{ds-card-data-viz.d.ts → ds-tooltip-chart.d.ts} +4 -4
- package/dist/components/ds-tooltip-chart.js +2 -0
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/{p-IYy-jODg.js → p-1Zbh1MRy.js} +2 -2
- package/dist/components/{p-wOOAzVMC.js → p-BVsLc3t5.js} +2 -2
- package/dist/components/p-BZCUFHYa.js +2 -0
- package/dist/components/{p-D0bM3cKj.js.map → p-BZCUFHYa.js.map} +1 -1
- package/dist/components/{p-BBtjABBS.js → p-BjiRqLtB.js} +2 -2
- package/dist/components/p-Bk1A9jLm.js +2 -0
- package/dist/components/p-Bk1A9jLm.js.map +1 -0
- package/dist/components/{p-Bsfpxto1.js → p-BsBw-w1q.js} +2 -2
- package/dist/components/p-ByfXC1wu.js +2 -0
- package/dist/components/{p-1S9AW2MA.js.map → p-ByfXC1wu.js.map} +1 -1
- package/dist/components/{p-B6RrZQqw.js → p-C-ENnZzq.js} +2 -2
- package/dist/components/{p-BPyymeuR.js → p-C2U48kDH.js} +2 -2
- package/dist/components/{p-CKRJX0Y0.js → p-C7mCjS2t.js} +2 -2
- package/dist/components/{p-6B411hQA.js → p-CL8XL1eh.js} +2 -2
- package/dist/components/{p-DfvDNcoq.js → p-CMZVPEZ_.js} +2 -2
- package/dist/components/{p-BtuYufL3.js → p-CWL61nKt.js} +2 -2
- package/dist/components/p-CWL61nKt.js.map +1 -0
- package/dist/components/p-CWLrXsDQ.js +2 -0
- package/dist/components/{p-D2cjoj2r.js.map → p-CWLrXsDQ.js.map} +1 -1
- package/dist/components/{p-Di81y9Q2.js → p-CX7QIytv.js} +2 -2
- package/dist/components/p-CXduurfd.js +2 -0
- package/dist/components/p-CXduurfd.js.map +1 -0
- package/dist/components/p-CbAfTqlb.js +2 -0
- package/dist/components/{p-CuJ3J6OJ.js.map → p-CbAfTqlb.js.map} +1 -1
- package/dist/components/{p-DVuxzrCC.js → p-CfTThRNX.js} +2 -2
- package/dist/components/{p-BmNpPyzf.js → p-CkLffZGn.js} +2 -2
- package/dist/components/{p-B4_0Ys4w.js → p-CkyXU1YX.js} +2 -2
- package/dist/components/{p-iCjUWcp7.js → p-CywKWfgD.js} +2 -2
- package/dist/components/{p-BR_oMaas.js → p-D3UKwTEo.js} +2 -2
- package/dist/components/{p-Bl6A5AJq.js → p-D7z9bJ6n.js} +2 -2
- package/dist/components/{p-DaqFuVKZ.js → p-DAftUxvL.js} +2 -2
- package/dist/components/{p-BFfHIu6y.js → p-DQ94PkZA.js} +2 -2
- package/dist/components/{p-B-kRByho.js → p-DSpq7xQF.js} +2 -2
- package/dist/components/{p-og48Kh2i.js → p-DzM3TcyQ.js} +2 -2
- package/dist/components/p-GbTasczF.js +2 -0
- package/dist/components/{p-Ca6s5fLR.js → p-Mmr9b1bB.js} +2 -2
- package/dist/components/p-UH2AGfR0.js +2 -0
- package/dist/components/{p-DX4c3kZ1.js.map → p-UH2AGfR0.js.map} +1 -1
- package/dist/components/{p-CxgMUvqg.js → p-Z2zfShlF.js} +2 -2
- package/dist/components/{p-Bmo4T96l.js → p-_mClULFL.js} +2 -2
- package/dist/components/{p-Bb4f5SuF.js → p-jf1zCsuw.js} +2 -2
- package/dist/components/{p-Eep5mxtv.js → p-oiR4IoH1.js} +2 -2
- package/dist/components/{p-DHF5cLzr.js → p-u2OZHaLY.js} +2 -2
- package/dist/docs/components.json +180 -662
- package/dist/lib/utils/chart-grammar.d.ts +359 -0
- package/dist/lib/utils/index.d.ts +2 -0
- package/dist/lib/utils/index.js +504 -0
- package/dist/lib/utils/index.js.map +4 -4
- package/dist/lib/utils/token-defaults.d.ts +3 -0
- package/dist/mcp-data/registry/banner.json +2 -2
- package/dist/mcp-data/registry/card-chart.json +238 -0
- package/dist/mcp-data/registry/card-overview.json +2 -2
- package/dist/mcp-data/registry/card-setting.json +2 -2
- package/dist/mcp-data/registry/chart-legend.json +11 -18
- package/dist/mcp-data/registry/chart.json +258 -0
- package/dist/mcp-data/registry/mobile-bar-nav.json +3 -3
- package/dist/mcp-data/registry/registry.json +108 -376
- package/dist/mcp-data/registry/tooltip-chart.json +253 -0
- package/dist/mcp-data/registry/tooltip.json +2 -2
- package/dist/react/components.d.ts +3 -5
- package/dist/react/components.js +3 -5
- package/dist/react/ds-card-chart.d.ts +12 -0
- package/dist/react/ds-card-chart.js +12 -0
- package/dist/react/ds-chart.d.ts +12 -0
- package/dist/react/ds-chart.js +12 -0
- package/dist/react/{ds-chart-bar.d.ts → ds-tooltip-chart.d.ts} +3 -3
- package/dist/react/ds-tooltip-chart.js +12 -0
- package/dist/types/components/{CardDataViz/CardDataViz.d.ts → CardChart/CardChart.d.ts} +9 -13
- package/dist/types/components/CardChart/index.d.ts +2 -0
- package/dist/types/components/Chart/Chart.d.ts +66 -0
- package/dist/types/components/Chart/index.d.ts +2 -0
- package/dist/types/components/ChartLegend/ChartLegend.d.ts +1 -1
- package/dist/types/components/{TooltipDataViz/TooltipDataViz.d.ts → TooltipChart/TooltipChart.d.ts} +15 -6
- package/dist/types/components/TooltipChart/index.d.ts +2 -0
- package/dist/types/components.d.ts +129 -294
- package/dist/types/utils/chart-grammar.d.ts +360 -0
- package/dist/types/utils/chart-scene.d.ts +128 -0
- package/dist/types/utils/chart-theme.d.ts +27 -0
- package/dist/types/utils/chart-types.d.ts +0 -13
- package/dist/types/utils/index.d.ts +2 -0
- package/dist/types/utils/token-defaults.d.ts +3 -0
- package/package.json +1 -1
- package/dist/angular/ds-card-data-viz.d.ts +0 -18
- package/dist/angular/ds-chart-bar.d.ts +0 -12
- package/dist/angular/ds-chart-bar.js +0 -38
- package/dist/angular/ds-chart-donut.d.ts +0 -19
- package/dist/angular/ds-chart-line.d.ts +0 -12
- package/dist/angular/ds-tooltip-data-viz.d.ts +0 -12
- package/dist/angular/ds-tooltip-data-viz.js +0 -38
- package/dist/components/ds-card-data-viz.js +0 -2
- package/dist/components/ds-card-data-viz.js.map +0 -1
- package/dist/components/ds-chart-bar.js +0 -2
- package/dist/components/ds-chart-bar.js.map +0 -1
- package/dist/components/ds-chart-donut.d.ts +0 -11
- package/dist/components/ds-chart-donut.js +0 -2
- package/dist/components/ds-chart-donut.js.map +0 -1
- package/dist/components/ds-chart-line.js +0 -2
- package/dist/components/ds-chart-line.js.map +0 -1
- package/dist/components/ds-tooltip-data-viz.d.ts +0 -11
- package/dist/components/ds-tooltip-data-viz.js +0 -2
- package/dist/components/p-1S9AW2MA.js +0 -2
- package/dist/components/p-B6Vuayt6.js +0 -2
- package/dist/components/p-B6Vuayt6.js.map +0 -1
- package/dist/components/p-BBpASejH.js +0 -2
- package/dist/components/p-BBpASejH.js.map +0 -1
- package/dist/components/p-BtuYufL3.js.map +0 -1
- package/dist/components/p-BybqPD8K.js +0 -2
- package/dist/components/p-BybqPD8K.js.map +0 -1
- package/dist/components/p-C4uYvyq6.js +0 -2
- package/dist/components/p-C4uYvyq6.js.map +0 -1
- package/dist/components/p-CbjFUpOj.js +0 -2
- package/dist/components/p-CbjFUpOj.js.map +0 -1
- package/dist/components/p-CrCGIx8s.js +0 -2
- package/dist/components/p-CrCGIx8s.js.map +0 -1
- package/dist/components/p-CuJ3J6OJ.js +0 -2
- package/dist/components/p-D0bM3cKj.js +0 -2
- package/dist/components/p-D2cjoj2r.js +0 -2
- package/dist/components/p-DX4c3kZ1.js +0 -2
- package/dist/components/p-DXewjzkM.js +0 -2
- package/dist/components/p-DXewjzkM.js.map +0 -1
- package/dist/components/p-yhj1lIPx.js +0 -2
- package/dist/mcp-data/registry/card-data-viz.json +0 -241
- package/dist/mcp-data/registry/chart-bar.json +0 -245
- package/dist/mcp-data/registry/chart-donut.json +0 -344
- package/dist/mcp-data/registry/chart-line.json +0 -223
- package/dist/mcp-data/registry/tooltip-data-viz.json +0 -224
- package/dist/react/ds-card-data-viz.d.ts +0 -12
- package/dist/react/ds-card-data-viz.js +0 -12
- package/dist/react/ds-chart-bar.js +0 -12
- package/dist/react/ds-chart-donut.d.ts +0 -12
- package/dist/react/ds-chart-donut.js +0 -12
- package/dist/react/ds-chart-line.d.ts +0 -9
- package/dist/react/ds-chart-line.js +0 -12
- package/dist/react/ds-tooltip-data-viz.d.ts +0 -9
- package/dist/react/ds-tooltip-data-viz.js +0 -12
- package/dist/types/components/CardDataViz/index.d.ts +0 -2
- package/dist/types/components/ChartBar/ChartBar.d.ts +0 -31
- package/dist/types/components/ChartBar/index.d.ts +0 -3
- package/dist/types/components/ChartDonut/ChartDonut.d.ts +0 -72
- package/dist/types/components/ChartDonut/index.d.ts +0 -2
- package/dist/types/components/ChartLine/ChartLine.d.ts +0 -23
- package/dist/types/components/ChartLine/index.d.ts +0 -2
- package/dist/types/components/TooltipDataViz/index.d.ts +0 -2
- /package/dist/components/{ds-tooltip-data-viz.js.map → ds-tooltip-chart.js.map} +0 -0
- /package/dist/components/{p-IYy-jODg.js.map → p-1Zbh1MRy.js.map} +0 -0
- /package/dist/components/{p-wOOAzVMC.js.map → p-BVsLc3t5.js.map} +0 -0
- /package/dist/components/{p-BBtjABBS.js.map → p-BjiRqLtB.js.map} +0 -0
- /package/dist/components/{p-Bsfpxto1.js.map → p-BsBw-w1q.js.map} +0 -0
- /package/dist/components/{p-B6RrZQqw.js.map → p-C-ENnZzq.js.map} +0 -0
- /package/dist/components/{p-BPyymeuR.js.map → p-C2U48kDH.js.map} +0 -0
- /package/dist/components/{p-CKRJX0Y0.js.map → p-C7mCjS2t.js.map} +0 -0
- /package/dist/components/{p-6B411hQA.js.map → p-CL8XL1eh.js.map} +0 -0
- /package/dist/components/{p-DfvDNcoq.js.map → p-CMZVPEZ_.js.map} +0 -0
- /package/dist/components/{p-Di81y9Q2.js.map → p-CX7QIytv.js.map} +0 -0
- /package/dist/components/{p-DVuxzrCC.js.map → p-CfTThRNX.js.map} +0 -0
- /package/dist/components/{p-BmNpPyzf.js.map → p-CkLffZGn.js.map} +0 -0
- /package/dist/components/{p-B4_0Ys4w.js.map → p-CkyXU1YX.js.map} +0 -0
- /package/dist/components/{p-iCjUWcp7.js.map → p-CywKWfgD.js.map} +0 -0
- /package/dist/components/{p-BR_oMaas.js.map → p-D3UKwTEo.js.map} +0 -0
- /package/dist/components/{p-Bl6A5AJq.js.map → p-D7z9bJ6n.js.map} +0 -0
- /package/dist/components/{p-DaqFuVKZ.js.map → p-DAftUxvL.js.map} +0 -0
- /package/dist/components/{p-BFfHIu6y.js.map → p-DQ94PkZA.js.map} +0 -0
- /package/dist/components/{p-B-kRByho.js.map → p-DSpq7xQF.js.map} +0 -0
- /package/dist/components/{p-og48Kh2i.js.map → p-DzM3TcyQ.js.map} +0 -0
- /package/dist/components/{p-yhj1lIPx.js.map → p-GbTasczF.js.map} +0 -0
- /package/dist/components/{p-Ca6s5fLR.js.map → p-Mmr9b1bB.js.map} +0 -0
- /package/dist/components/{p-CxgMUvqg.js.map → p-Z2zfShlF.js.map} +0 -0
- /package/dist/components/{p-Bmo4T96l.js.map → p-_mClULFL.js.map} +0 -0
- /package/dist/components/{p-Bb4f5SuF.js.map → p-jf1zCsuw.js.map} +0 -0
- /package/dist/components/{p-Eep5mxtv.js.map → p-oiR4IoH1.js.map} +0 -0
- /package/dist/components/{p-DHF5cLzr.js.map → p-u2OZHaLY.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as i,c as r,h as s,a as e,t as d}from"./index.js";import{d as n}from"./p-Bb4f5SuF.js";import{D as t,s as a}from"./p-DOUk4KoT.js";import{s as c,r as l}from"./p-D2xWcVv6.js";import{C as f}from"./p-CuwopElg.js";const v=()=>`@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-radio,.ds-control--lg.sc-ds-radio-h,.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio,.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio,.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-radio-h,.ds-control--lg.sc-ds-radio{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--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-radio-h,.ds-control--sm.sc-ds-radio{--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-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-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-radio-h,.ds-focus-ring.sc-ds-radio,.ds-focus-ring-inset.sc-ds-radio-h,.ds-focus-ring-inset.sc-ds-radio{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio: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-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{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-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio: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-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-radio-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-radio-h,.ds-interaction-fill.sc-ds-radio{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::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-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--lg.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-md);--_radio-dot:calc(var(--dimension-size-base) * 5 / 4);--_radio-stroke:var(--dimension-stroke-width-018)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:default;user-select:none}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2), box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__label.sc-ds-radio{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}@media (forced-colors: active){.radio__circle.sc-ds-radio{border:var(--_radio-stroke) solid var(--ds-forced-color-content);box-shadow:none}.radio__circle--checked.sc-ds-radio{background-color:var(--ds-forced-color-selected);border-color:var(--ds-forced-color-selected)}.radio__dot.sc-ds-radio{background-color:var(--ds-forced-color-on-selected)}}`;const h=o(class o extends i{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage=t;this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const o=this.isInactive||this.disabled||this.formDisabled;c(this.internals,this.value,{inactive:o});const i=this.required&&!o&&this.value.length===0;a(this.internals,i,this.requiredMessage)}formDisabledCallback(o){this.formDisabled=o;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(o){this.value=l(o)}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(o){const i=this.activeItems;if(!i.length)return;const r=i.find((o=>o===document.activeElement));if(!r)return;const s=i.indexOf(r);let e=-1;switch(o.key){case"ArrowDown":case"ArrowRight":o.preventDefault();e=(s+1)%i.length;break;case"ArrowUp":case"ArrowLeft":o.preventDefault();e=(s-1+i.length)%i.length;break;case"Home":o.preventDefault();e=0;break;case"End":o.preventDefault();e=i.length-1;break}if(e>=0){i[e].focus();const o=i[e].dataset["value"];if(o&&o!==this.value){this.value=o;this.dsChange.emit(o)}}}selectItem(o){if(this.isInactive||this.disabled||this.formDisabled)return;if(o!==this.value){this.value=o;this.dsChange.emit(o)}}render(){const o=this.isInactive||this.disabled||this.formDisabled;const i=this.required&&!o&&this.value.length===0;const r=this.options.findIndex((o=>o.value===this.value));const d=this.options.findIndex((i=>!o&&!i.isInactive));const n=r>=0&&!o&&!this.options[r]?.isInactive?r:d;return s(e,{key:"e272b29f653ccba1f919e275624bc2183ff02529",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":i?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((i,r)=>{const e=o||!!i.isInactive;const d=i.value===this.value;const t=e?-1:r===n?0:-1;return s("div",{key:i.value,role:"radio","aria-checked":String(d),"aria-disabled":e?"true":undefined,tabIndex:t,"data-radio-item":true,"data-value":i.value,"data-inactive":e||undefined,class:{radio__item:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":e,"ds-focus-ring-inset":!e,"ds-interaction-fill":!e},onClick:()=>!e&&this.selectItem(i.value),onKeyDown:o=>{if((o.key===" "||o.key==="Enter")&&!e){o.preventDefault();this.selectItem(i.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":d}},d&&s("span",{class:"radio__dot"}))),s("ds-text",{class:"radio__label ds-interaction-fill__content",as:"span",variant:f[this.size]},i.label))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return v()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-radio","ds-text"];o.forEach((o=>{switch(o){case"ds-radio":if(!customElements.get(d(o))){customElements.define(d(o),h)}break;case"ds-text":if(!customElements.get(d(o))){n()}break}}))}u();const g=h;const b=u;export{g as DsRadio,b as defineCustomElement};
|
|
1
|
+
import{p as o,H as i,c as r,h as s,a as e,t as d}from"./index.js";import{d as n}from"./p-jf1zCsuw.js";import{D as t,s as a}from"./p-DOUk4KoT.js";import{s as c,r as l}from"./p-D2xWcVv6.js";import{C as f}from"./p-CuwopElg.js";const v=()=>`@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-radio,.ds-control--lg.sc-ds-radio-h,.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio,.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio,.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-radio-h,.ds-control--lg.sc-ds-radio{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--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-radio-h,.ds-control--sm.sc-ds-radio{--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-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-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-radio-h,.ds-focus-ring.sc-ds-radio,.ds-focus-ring-inset.sc-ds-radio-h,.ds-focus-ring-inset.sc-ds-radio{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio: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-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{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-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio: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-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-radio-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-radio-h,.ds-interaction-fill.sc-ds-radio{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::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-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--lg.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-md);--_radio-dot:calc(var(--dimension-size-base) * 5 / 4);--_radio-stroke:var(--dimension-stroke-width-018)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:default;user-select:none}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2), box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__label.sc-ds-radio{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}@media (forced-colors: active){.radio__circle.sc-ds-radio{border:var(--_radio-stroke) solid var(--ds-forced-color-content);box-shadow:none}.radio__circle--checked.sc-ds-radio{background-color:var(--ds-forced-color-selected);border-color:var(--ds-forced-color-selected)}.radio__dot.sc-ds-radio{background-color:var(--ds-forced-color-on-selected)}}`;const h=o(class o extends i{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage=t;this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const o=this.isInactive||this.disabled||this.formDisabled;c(this.internals,this.value,{inactive:o});const i=this.required&&!o&&this.value.length===0;a(this.internals,i,this.requiredMessage)}formDisabledCallback(o){this.formDisabled=o;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(o){this.value=l(o)}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(o){const i=this.activeItems;if(!i.length)return;const r=i.find((o=>o===document.activeElement));if(!r)return;const s=i.indexOf(r);let e=-1;switch(o.key){case"ArrowDown":case"ArrowRight":o.preventDefault();e=(s+1)%i.length;break;case"ArrowUp":case"ArrowLeft":o.preventDefault();e=(s-1+i.length)%i.length;break;case"Home":o.preventDefault();e=0;break;case"End":o.preventDefault();e=i.length-1;break}if(e>=0){i[e].focus();const o=i[e].dataset["value"];if(o&&o!==this.value){this.value=o;this.dsChange.emit(o)}}}selectItem(o){if(this.isInactive||this.disabled||this.formDisabled)return;if(o!==this.value){this.value=o;this.dsChange.emit(o)}}render(){const o=this.isInactive||this.disabled||this.formDisabled;const i=this.required&&!o&&this.value.length===0;const r=this.options.findIndex((o=>o.value===this.value));const d=this.options.findIndex((i=>!o&&!i.isInactive));const n=r>=0&&!o&&!this.options[r]?.isInactive?r:d;return s(e,{key:"9b70a30cf8955f714d41e2a6d016dd8beb191624",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":i?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((i,r)=>{const e=o||!!i.isInactive;const d=i.value===this.value;const t=e?-1:r===n?0:-1;return s("div",{key:i.value,role:"radio","aria-checked":String(d),"aria-disabled":e?"true":undefined,tabIndex:t,"data-radio-item":true,"data-value":i.value,"data-inactive":e||undefined,class:{radio__item:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":e,"ds-focus-ring-inset":!e,"ds-interaction-fill":!e},onClick:()=>!e&&this.selectItem(i.value),onKeyDown:o=>{if((o.key===" "||o.key==="Enter")&&!e){o.preventDefault();this.selectItem(i.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":d}},d&&s("span",{class:"radio__dot"}))),s("ds-text",{class:"radio__label ds-interaction-fill__content",as:"span",variant:f[this.size]},i.label))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return v()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-radio","ds-text"];o.forEach((o=>{switch(o){case"ds-radio":if(!customElements.get(d(o))){customElements.define(d(o),h)}break;case"ds-text":if(!customElements.get(d(o))){n()}break}}))}u();const g=h;const b=u;export{g as DsRadio,b as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-radio.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as l,c as s,h as r,a
|
|
1
|
+
import{p as e,H as l,c as s,h as r,a,t as o}from"./index.js";import{S as d}from"./p-CY19gMiz.js";const t=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-scroll-overlay{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-scroll-overlay{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-scroll-overlay{animation:none}}}.scroll-edge-fade--at-end.sc-ds-scroll-overlay,.scroll-edge-fade--hidden.sc-ds-scroll-overlay{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-scroll-overlay{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const c=()=>`.sc-ds-scroll-overlay-h{display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box}.scroll-overlay.sc-ds-scroll-overlay{position:relative;width:100%;height:100%;min-width:0;min-height:0}.scroll-overlay__viewport.sc-ds-scroll-overlay{width:100%;height:100%;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.scroll-overlay__viewport.sc-ds-scroll-overlay:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.scroll-overlay__content.sc-ds-scroll-overlay{display:flex;flex-direction:column;min-height:100%;padding-block-end:var(--ds-scroll-overlay-block-size, 0);box-sizing:border-box}.scroll-overlay__body.sc-ds-scroll-overlay{display:grid;grid-template-columns:minmax(0, 1fr);flex:1 0 auto;min-height:0}.scroll-overlay__overlay.sc-ds-scroll-overlay{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}`;const i=e(class e extends l{constructor(e){super();if(e!==false){this.__registerHost()}this.dsScroll=s(this,"dsScroll");this.handleScroll=()=>{if(!this.viewport)return;this.controller?.sync();this.dsScroll.emit({scrollTop:this.viewport.scrollTop,scrollHeight:this.viewport.scrollHeight,clientHeight:this.viewport.clientHeight})}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.controller=new d({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay});this.controller.connect()}disconnectedCallback(){this.controller?.disconnect()}async scrollToStart(){this.viewport?.scrollTo({top:0,behavior:"auto"});this.controller?.sync()}async scrollToEnd(){this.viewport?.scrollTo({top:this.viewport.scrollHeight,behavior:"auto"});this.controller?.sync()}async refreshOverlay(){this.controller?.sync()}render(){const e=Boolean(this.scrollLabel?.trim());return r(a,{key:"7e967ed3cb9b9779c2cad4b833a3f5a6c3802893"},r("div",{key:"d27a4ec626330e05203ea2896a1a32212f9956be",class:"scroll-overlay"},r("div",{key:"bf03dc3fb38a53947a5edcc59ee360dd87b40793",class:"scroll-overlay__viewport",ref:e=>{this.viewport=e},role:e?"region":undefined,"aria-label":e?this.scrollLabel:undefined,tabIndex:e?0:undefined,onScroll:this.handleScroll},r("div",{key:"976c80fe3f5276dbad47cf399973a55127dd94c4",class:"scroll-overlay__content scroll-edge-fade--block-window",ref:e=>{this.content=e}},r("div",{key:"c111539dbd09bb2cb5008da33b8d263befcdd992",class:"scroll-overlay__body"},r("slot",{key:"faafa4481a00f1b7be91f10f3552892707a3fdbf"})))),r("div",{key:"7857870b049e5f49ea3bb81810812f4180366169",class:"scroll-overlay__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"bea06dba7c616fa4a894eebd079bc7063f7b4654",name:"overlay"}))))}get el(){return this}static get style(){return t()+c()}},[262,"ds-scroll-overlay",{scrollLabel:[1,"scroll-label"],scrollToStart:[64],scrollToEnd:[64],refreshOverlay:[64]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-scroll-overlay"];e.forEach((e=>{switch(e){case"ds-scroll-overlay":if(!customElements.get(o(e))){customElements.define(o(e),i)}break}}))}n();const f=i;const g=n;export{f as DsScrollOverlay,g as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-scroll-overlay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["scrollEdgeFadeCss","scrollOverlayCss","ScrollOverlay","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","handleScroll","viewport","controller","sync","dsScroll","emit","scrollTop","scrollHeight","clientHeight","componentDidLoad","content","overlay","ScrollOverlayController","host","el","connect","disconnectedCallback","disconnect","scrollToStart","scrollTo","top","behavior","scrollToEnd","refreshOverlay","render","labelled","Boolean","scrollLabel","trim","h","Host","key","class","ref","element","role","undefined","tabIndex","onScroll","name"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.tsx"],"sourcesContent":["/**\n * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n *\n * Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n *\n * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n */\n\n@property --ds-scroll-edge-fade-top {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n from { --ds-scroll-edge-fade-top: 0px; }\n to { --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n from { --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom); }\n to { --ds-scroll-edge-fade-bottom: 0px; }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n from { --ds-scroll-edge-fade-left: 0px; }\n to { --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n from { --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right); }\n to { --ds-scroll-edge-fade-right: 0px; }\n}\n\n/* Mask gradients use #000 / transparent as alpha stops — not theme colors. */\n/* stylelint-disable color-no-hex */\n\n.scroll-edge-fade {\n --ds-scroll-edge-fade-size: var(--dimension-size-600);\n --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n --ds-scroll-edge-fade-target-top: 0px;\n --ds-scroll-edge-fade-target-bottom: 0px;\n --ds-scroll-edge-fade-target-left: 0px;\n --ds-scroll-edge-fade-target-right: 0px;\n --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n --ds-scroll-edge-fade-block-mask: linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-top),\n #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n transparent 100%\n );\n --ds-scroll-edge-fade-inline-mask: linear-gradient(\n to right,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-left),\n #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n transparent 100%\n );\n\n /* Intersecting the block and inline masks lets every edge compose correctly. */\n -webkit-mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n -webkit-mask-composite: source-in;\n mask-composite: intersect;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/* Manual per-edge state remains available when scroll state already lives in JS. */\n.scroll-edge-fade--top-at-edge {\n --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n .scroll-edge-fade--scroll-aware {\n animation-name:\n ds-scroll-edge-fade-reveal-top,\n ds-scroll-edge-fade-reveal-bottom,\n ds-scroll-edge-fade-reveal-left,\n ds-scroll-edge-fade-reveal-right;\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. */\n animation-duration: 1ms;\n animation-timing-function: ease-in-out;\n animation-fill-mode: both;\n animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n animation-range:\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .scroll-edge-fade--scroll-aware {\n animation: none;\n }\n }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n -webkit-mask-image: none;\n mask-image: none;\n}\n\n/**\n * Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n */\n.scroll-edge-fade--block-window {\n --ds-scroll-edge-fade-window-start: 100%;\n --ds-scroll-edge-fade-window-end: 100%;\n\n -webkit-mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\n\n/* stylelint-enable color-no-hex */\n",":host {\n display: block;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.scroll-overlay {\n position: relative;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n}\n\n.scroll-overlay__viewport {\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n box-sizing: border-box;\n}\n\n.scroll-overlay__viewport:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n}\n\n.scroll-overlay__content {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n padding-block-end: var(--ds-scroll-overlay-block-size, 0);\n box-sizing: border-box;\n}\n\n.scroll-overlay__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n flex: 1 0 auto;\n min-height: 0;\n}\n\n.scroll-overlay__overlay {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--dimension-z-index-floating);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nexport interface ScrollOverlayScrollDetail {\n scrollTop: number;\n scrollHeight: number;\n clientHeight: number;\n}\n\n@Component({\n tag: 'ds-scroll-overlay',\n styleUrl: 'ScrollOverlay.css',\n styleUrls: ['../../utils/scroll-edge-fade.css'],\n scoped: true,\n})\nexport class ScrollOverlay {\n @Element() el!: HTMLElement;\n\n /** Optional accessible name. When provided, the scrollport is a focusable region. */\n @Prop() scrollLabel: string | undefined;\n\n /** Reports scroll position without exposing the internal scrollport element. */\n @Event() dsScroll!: EventEmitter<ScrollOverlayScrollDetail>;\n\n private viewport?: HTMLElement;\n private content?: HTMLElement;\n private overlay?: HTMLElement;\n private controller?: ScrollOverlayController;\n\n componentDidLoad(): void {\n if (!this.viewport || !this.content || !this.overlay) return;\n this.controller = new ScrollOverlayController({\n host: this.el,\n viewport: this.viewport,\n content: this.content,\n overlay: this.overlay,\n });\n this.controller.connect();\n }\n\n disconnectedCallback(): void {\n this.controller?.disconnect();\n }\n\n /** Move the owned scrollport to its beginning. */\n @Method()\n async scrollToStart(): Promise<void> {\n this.viewport?.scrollTo({ top: 0, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Move the owned scrollport to its live end. */\n @Method()\n async scrollToEnd(): Promise<void> {\n this.viewport?.scrollTo({ top: this.viewport.scrollHeight, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Re-measure footer geometry after an imperative slotted-content update. */\n @Method()\n async refreshOverlay(): Promise<void> {\n this.controller?.sync();\n }\n\n private handleScroll = (): void => {\n if (!this.viewport) return;\n this.controller?.sync();\n this.dsScroll.emit({\n scrollTop: this.viewport.scrollTop,\n scrollHeight: this.viewport.scrollHeight,\n clientHeight: this.viewport.clientHeight,\n });\n };\n\n render() {\n const labelled = Boolean(this.scrollLabel?.trim());\n return (\n <Host>\n <div class=\"scroll-overlay\">\n <div\n class=\"scroll-overlay__viewport\"\n ref={element => {\n this.viewport = element;\n }}\n role={labelled ? 'region' : undefined}\n aria-label={labelled ? this.scrollLabel : undefined}\n tabIndex={labelled ? 0 : undefined}\n onScroll={this.handleScroll}\n >\n <div\n class=\"scroll-overlay__content scroll-edge-fade--block-window\"\n ref={element => {\n this.content = element;\n }}\n >\n <div class=\"scroll-overlay__body\">\n <slot />\n </div>\n </div>\n </div>\n <div\n class=\"scroll-overlay__overlay\"\n ref={element => {\n this.overlay = element;\n }}\n >\n <slot name=\"overlay\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"sGAAA,MAAMA,EAAoB,IAAM,2/ICAhC,MAAMC,EAAmB,IAAM,u+B,MCelBC,EAAaC,EAAA,MAAAD,UAAAE,EAN1B,WAAAC,CAAAC,G,6EAuDUC,KAAAC,aAAe,KACrB,IAAKD,KAAKE,SAAU,OACpBF,KAAKG,YAAYC,OACjBJ,KAAKK,SAASC,KAAK,CACjBC,UAAWP,KAAKE,SAASK,UACzBC,aAAcR,KAAKE,SAASM,aAC5BC,aAAcT,KAAKE,SAASO,cAC5B,CAyCL,CAnFC,gBAAAC,GACE,IAAKV,KAAKE,WAAaF,KAAKW,UAAYX,KAAKY,QAAS,OACtDZ,KAAKG,WAAa,IAAIU,EAAwB,CAC5CC,KAAMd,KAAKe,GACXb,SAAUF,KAAKE,SACfS,QAASX,KAAKW,QACdC,QAASZ,KAAKY,UAEhBZ,KAAKG,WAAWa,S,CAGlB,oBAAAC,GACEjB,KAAKG,YAAYe,Y,CAKnB,mBAAMC,GACJnB,KAAKE,UAAUkB,SAAS,CAAEC,IAAK,EAAGC,SAAU,SAC5CtB,KAAKG,YAAYC,M,CAKnB,iBAAMmB,GACJvB,KAAKE,UAAUkB,SAAS,CAAEC,IAAKrB,KAAKE,SAASM,aAAcc,SAAU,SACrEtB,KAAKG,YAAYC,M,CAKnB,oBAAMoB,GACJxB,KAAKG,YAAYC,M,CAanB,MAAAqB,GACE,MAAMC,EAAWC,QAAQ3B,KAAK4B,aAAaC,QAC3C,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,2BACNC,IAAKC,IACHnC,KAAKE,SAAWiC,CAAO,EAEzBC,KAAMV,EAAW,SAAWW,UAAS,aACzBX,EAAW1B,KAAK4B,YAAcS,UAC1CC,SAAUZ,EAAW,EAAIW,UACzBE,SAAUvC,KAAKC,cAEf6B,EAAA,OAAAE,IAAA,2CACEC,MAAM,yDACNC,IAAKC,IACHnC,KAAKW,QAAUwB,CAAO,GAGxBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACTH,EAAA,QAAAE,IAAA,gDAINF,EAAA,OAAAE,IAAA,2CACEC,MAAM,0BACNC,IAAKC,IACHnC,KAAKY,QAAUuB,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["scrollEdgeFadeCss","scrollOverlayCss","ScrollOverlay","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","handleScroll","viewport","controller","sync","dsScroll","emit","scrollTop","scrollHeight","clientHeight","componentDidLoad","content","overlay","ScrollOverlayController","host","el","connect","disconnectedCallback","disconnect","scrollToStart","scrollTo","top","behavior","scrollToEnd","refreshOverlay","render","labelled","Boolean","scrollLabel","trim","h","Host","key","class","ref","element","role","undefined","tabIndex","onScroll","name"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.tsx"],"sourcesContent":["/**\n * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n *\n * Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n *\n * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n */\n\n@property --ds-scroll-edge-fade-top {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n from { --ds-scroll-edge-fade-top: 0px; }\n to { --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n from { --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom); }\n to { --ds-scroll-edge-fade-bottom: 0px; }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n from { --ds-scroll-edge-fade-left: 0px; }\n to { --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n from { --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right); }\n to { --ds-scroll-edge-fade-right: 0px; }\n}\n\n/* Mask gradients use #000 / transparent as alpha stops — not theme colors. */\n/* stylelint-disable color-no-hex */\n\n.scroll-edge-fade {\n --ds-scroll-edge-fade-size: var(--dimension-size-600);\n --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n --ds-scroll-edge-fade-target-top: 0px;\n --ds-scroll-edge-fade-target-bottom: 0px;\n --ds-scroll-edge-fade-target-left: 0px;\n --ds-scroll-edge-fade-target-right: 0px;\n --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n --ds-scroll-edge-fade-block-mask: linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-top),\n #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n transparent 100%\n );\n --ds-scroll-edge-fade-inline-mask: linear-gradient(\n to right,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-left),\n #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n transparent 100%\n );\n\n /* Intersecting the block and inline masks lets every edge compose correctly. */\n -webkit-mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n -webkit-mask-composite: source-in;\n mask-composite: intersect;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/* Manual per-edge state remains available when scroll state already lives in JS. */\n.scroll-edge-fade--top-at-edge {\n --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n .scroll-edge-fade--scroll-aware {\n animation-name:\n ds-scroll-edge-fade-reveal-top,\n ds-scroll-edge-fade-reveal-bottom,\n ds-scroll-edge-fade-reveal-left,\n ds-scroll-edge-fade-reveal-right;\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. */\n animation-duration: 1ms;\n animation-timing-function: ease-in-out;\n animation-fill-mode: both;\n animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n animation-range:\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .scroll-edge-fade--scroll-aware {\n animation: none;\n }\n }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n -webkit-mask-image: none;\n mask-image: none;\n}\n\n/**\n * Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n */\n.scroll-edge-fade--block-window {\n --ds-scroll-edge-fade-window-start: 100%;\n --ds-scroll-edge-fade-window-end: 100%;\n\n -webkit-mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\n\n/* stylelint-enable color-no-hex */\n",":host {\n display: block;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.scroll-overlay {\n position: relative;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n}\n\n.scroll-overlay__viewport {\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n box-sizing: border-box;\n}\n\n.scroll-overlay__viewport:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n}\n\n.scroll-overlay__content {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n padding-block-end: var(--ds-scroll-overlay-block-size, 0);\n box-sizing: border-box;\n}\n\n.scroll-overlay__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n flex: 1 0 auto;\n min-height: 0;\n}\n\n.scroll-overlay__overlay {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--dimension-z-index-floating);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nexport interface ScrollOverlayScrollDetail {\n scrollTop: number;\n scrollHeight: number;\n clientHeight: number;\n}\n\n@Component({\n tag: 'ds-scroll-overlay',\n styleUrl: 'ScrollOverlay.css',\n styleUrls: ['../../utils/scroll-edge-fade.css'],\n scoped: true,\n})\nexport class ScrollOverlay {\n @Element() el!: HTMLElement;\n\n /** Optional accessible name. When provided, the scrollport is a focusable region. */\n @Prop() scrollLabel: string | undefined;\n\n /** Reports scroll position without exposing the internal scrollport element. */\n @Event() dsScroll!: EventEmitter<ScrollOverlayScrollDetail>;\n\n private viewport?: HTMLElement;\n private content?: HTMLElement;\n private overlay?: HTMLElement;\n private controller?: ScrollOverlayController;\n\n componentDidLoad(): void {\n if (!this.viewport || !this.content || !this.overlay) return;\n this.controller = new ScrollOverlayController({\n host: this.el,\n viewport: this.viewport,\n content: this.content,\n overlay: this.overlay,\n });\n this.controller.connect();\n }\n\n disconnectedCallback(): void {\n this.controller?.disconnect();\n }\n\n /** Move the owned scrollport to its beginning. */\n @Method()\n async scrollToStart(): Promise<void> {\n this.viewport?.scrollTo({ top: 0, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Move the owned scrollport to its live end. */\n @Method()\n async scrollToEnd(): Promise<void> {\n this.viewport?.scrollTo({ top: this.viewport.scrollHeight, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Re-measure footer geometry after an imperative slotted-content update. */\n @Method()\n async refreshOverlay(): Promise<void> {\n this.controller?.sync();\n }\n\n private handleScroll = (): void => {\n if (!this.viewport) return;\n this.controller?.sync();\n this.dsScroll.emit({\n scrollTop: this.viewport.scrollTop,\n scrollHeight: this.viewport.scrollHeight,\n clientHeight: this.viewport.clientHeight,\n });\n };\n\n render() {\n const labelled = Boolean(this.scrollLabel?.trim());\n return (\n <Host>\n <div class=\"scroll-overlay\">\n <div\n class=\"scroll-overlay__viewport\"\n ref={element => {\n this.viewport = element;\n }}\n role={labelled ? 'region' : undefined}\n aria-label={labelled ? this.scrollLabel : undefined}\n tabIndex={labelled ? 0 : undefined}\n onScroll={this.handleScroll}\n >\n <div\n class=\"scroll-overlay__content scroll-edge-fade--block-window\"\n ref={element => {\n this.content = element;\n }}\n >\n <div class=\"scroll-overlay__body\">\n <slot />\n </div>\n </div>\n </div>\n <div\n class=\"scroll-overlay__overlay\"\n ref={element => {\n this.overlay = element;\n }}\n >\n <slot name=\"overlay\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"iGAAA,MAAMA,EAAoB,IAAM,2/ICAhC,MAAMC,EAAmB,IAAM,u+B,MCelBC,EAAaC,EAAA,MAAAD,UAAAE,EAN1B,WAAAC,CAAAC,G,6EAuDUC,KAAAC,aAAe,KACrB,IAAKD,KAAKE,SAAU,OACpBF,KAAKG,YAAYC,OACjBJ,KAAKK,SAASC,KAAK,CACjBC,UAAWP,KAAKE,SAASK,UACzBC,aAAcR,KAAKE,SAASM,aAC5BC,aAAcT,KAAKE,SAASO,cAC5B,CAyCL,CAnFC,gBAAAC,GACE,IAAKV,KAAKE,WAAaF,KAAKW,UAAYX,KAAKY,QAAS,OACtDZ,KAAKG,WAAa,IAAIU,EAAwB,CAC5CC,KAAMd,KAAKe,GACXb,SAAUF,KAAKE,SACfS,QAASX,KAAKW,QACdC,QAASZ,KAAKY,UAEhBZ,KAAKG,WAAWa,S,CAGlB,oBAAAC,GACEjB,KAAKG,YAAYe,Y,CAKnB,mBAAMC,GACJnB,KAAKE,UAAUkB,SAAS,CAAEC,IAAK,EAAGC,SAAU,SAC5CtB,KAAKG,YAAYC,M,CAKnB,iBAAMmB,GACJvB,KAAKE,UAAUkB,SAAS,CAAEC,IAAKrB,KAAKE,SAASM,aAAcc,SAAU,SACrEtB,KAAKG,YAAYC,M,CAKnB,oBAAMoB,GACJxB,KAAKG,YAAYC,M,CAanB,MAAAqB,GACE,MAAMC,EAAWC,QAAQ3B,KAAK4B,aAAaC,QAC3C,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,2BACNC,IAAKC,IACHnC,KAAKE,SAAWiC,CAAO,EAEzBC,KAAMV,EAAW,SAAWW,UAAS,aACzBX,EAAW1B,KAAK4B,YAAcS,UAC1CC,SAAUZ,EAAW,EAAIW,UACzBE,SAAUvC,KAAKC,cAEf6B,EAAA,OAAAE,IAAA,2CACEC,MAAM,yDACNC,IAAKC,IACHnC,KAAKW,QAAUwB,CAAO,GAGxBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACTH,EAAA,QAAAE,IAAA,gDAINF,EAAA,OAAAE,IAAA,2CACEC,MAAM,0BACNC,IAAKC,IACHnC,KAAKY,QAAUuB,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as t,h as i,a as o,t as r}from"./index.js";import{a as c,C as n,b as d}from"./p-ymtdhOU5.js";import{A as a}from"./p-BBxcMVqk.js";import{c as l,r as h}from"./p-DhKvqh5G.js";import{r as f}from"./p-BJMRBHKW.js";import{r as g}from"./p-B6Vuayt6.js";import{T as u}from"./p-C4uYvyq6.js";import{d as p}from"./p-IYy-jODg.js";import{d as m}from"./p-BR_oMaas.js";import{d as v}from"./p-B6RrZQqw.js";import{d as b}from"./p-Di81y9Q2.js";import{d as y}from"./p-BAfG3M8z.js";import{d as x}from"./p-Ca-I2UnB.js";import{d as w}from"./p-Bb4f5SuF.js";import{d as k}from"./p-D2cjoj2r.js";import{D as _,s as z}from"./p-DOUk4KoT.js";import{a as C,s as T,r as F,c as V}from"./p-D2xWcVv6.js";import{a as j,C as A}from"./p-CuwopElg.js";import{c as I}from"./p-DAW6G8Sl.js";function $(e,s){return s.length>0?s:[{options:e}]}function O(e){return e.flatMap((e=>e.options))}function B(e){return e.length>0&&e.every((e=>Boolean(e.icon)))}function D(e){return e.some((e=>Boolean(e.subtext?.trim())))}function L(e,s){const t=s.trim().toLocaleLowerCase();if(!t)return e;return e.map((e=>{const s=e.header?.toLocaleLowerCase().includes(t);return{...e,options:s?e.options:e.options.filter((e=>`${e.label} ${e.subtext??""}`.toLocaleLowerCase().includes(t)))}})).filter((e=>e.options.length>0))}function q(e){return e.map(((e,s)=>({option:e,index:s}))).filter((({option:e})=>!e.isInactive)).map((({index:e})=>e))}function P(e,s,t){const i=q(e);if(!i.length)return-1;const o=i.indexOf(s);const r=o>=0?o:t===1?-1:0;return i[(r+t+i.length)%i.length]}function S(e,s,t){const i=s.toLocaleLowerCase();if(!i)return-1;for(let s=1;s<=e.length;s+=1){const o=(Math.max(t,-1)+s)%e.length;const r=e[o];if(!r.isInactive&&r.label.toLocaleLowerCase().startsWith(i))return o}return-1}function E(e){return{"ds-interaction-fill--on-faint":e==="faint","ds-interaction-fill--on-medium":e==="medium","ds-interaction-fill--on-bold":e==="bold","ds-interaction-fill--on-strong":e==="strong","ds-interaction-fill--on-translucent":e==="translucent","ds-interaction-fill--on-inverted":e==="inverted","ds-interaction-fill--on-media":e==="media","ds-interaction-fill--on-always-dark":e==="always-dark"}}class R{constructor(e){this.state=e;this.triggerEl=null;this.popupEl=null;this.searchEl=null;this.typeahead="";this.typeaheadTimer=null;this.outsideHandler=null;this.setTriggerElement=e=>{this.triggerEl=e};this.setPopupElement=e=>{this.popupEl=e};this.setSearchElement=e=>{this.searchEl=e};this.handleTriggerKeyDown=e=>{if(!this.state.open){if(["ArrowDown","ArrowUp","Enter"," "].includes(e.key)){e.preventDefault();this.openPopup(true,e.key==="ArrowUp"?"last":"first")}else if(this.isTypeaheadKey(e)){e.preventDefault();this.openPopup(true);if(this.state.searchable)this.state.searchTerm=e.key;else this.handleTypeahead(e.key)}return}this.handleListKeyDown(e)};this.handleListKeyDown=e=>{switch(e.key){case"ArrowDown":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=P(this.state.options,this.state.activeIndex,1);break;case"ArrowUp":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=P(this.state.options,this.state.activeIndex,-1);break;case"Home":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=q(this.state.options)[0]??-1;break;case"End":{e.preventDefault();this.state.focusRingVisible=true;const s=q(this.state.options);this.state.activeIndex=s[s.length-1]??-1;break}case"Enter":case" ":{if(e.key===" "&&this.state.searchable&&e.target===this.searchEl)break;e.preventDefault();const s=this.state.options[this.state.activeIndex];if(s)this.state.selectOption(s);break}case"Escape":e.preventDefault();this.closePopup(true);break;case"Tab":this.closePopup();break;default:if(!this.state.searchable&&this.isTypeaheadKey(e)){this.handleTypeahead(e.key)}}};this.position=new a({getAnchor:()=>this.triggerEl,getPopup:()=>this.popupEl,measure:(e,s)=>{if(!this.state.open||!s.isConnected||!this.state.host.contains(s))return null;const t=f(u.space050,u.space050);s.style.minWidth=`${l(e.offsetWidth,t)}px`;return{anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth,popupHeight:s.offsetHeight,side:"bottom",align:"start",sideOffsetPx:t,alignOffsetPx:h({align:"start",alignOffsetPx:0,sectionInsetPx:t}),viewportPadPx:t,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}},apply:({x:e,y:s})=>{this.state.position={x:e,y:s};this.state.positionReady=true},topLayer:true})}get activeOptionId(){return!this.state.isLoading&&this.state.activeIndex>=0?`${this.state.generatedId}-option-${this.state.activeIndex}`:undefined}connect(){if(this.state.open)this.openChanged(true)}disconnect(){this.cancelPositionRetry();this.unbindPopupListeners();if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer)}setFocus(){this.triggerEl?.focus()}optionsChanged(){if(!this.state.open)return;const e=q(this.state.options);if(!e.includes(this.state.activeIndex))this.state.activeIndex=e[0]??-1;requestAnimationFrame((()=>this.updatePosition()))}loadingChanged(){if(this.state.open)requestAnimationFrame((()=>this.updatePosition()))}openChanged(e){if(e){this.bindPopupListeners();this.schedulePositionUpdate((()=>{this.scrollActiveOptionIntoView();if(this.state.searchable)this.searchEl?.focus()}));return}this.cancelPositionRetry();this.unbindPopupListeners();this.state.searchTerm="";this.state.positionReady=false}searchChanged(){this.state.activeIndex=q(this.state.options)[0]??-1;requestAnimationFrame((()=>{this.updatePosition();this.scrollActiveOptionIntoView()}))}activeIndexChanged(){requestAnimationFrame((()=>this.scrollActiveOptionIntoView()))}openPopup(e,s){if(this.state.isDisabled||!this.state.options.length&&!this.state.isLoading)return;const t=q(this.state.options);this.state.activeIndex=s==="last"?t[t.length-1]??-1:this.state.preferredIndex>=0?this.state.preferredIndex:t[0]??-1;this.state.focusRingVisible=e;this.state.open=true}closePopup(e=false){if(!this.state.open)return;this.state.open=false;if(e)requestAnimationFrame((()=>this.triggerEl?.focus()))}focusSearchOrTrigger(){requestAnimationFrame((()=>this.state.searchable?this.searchEl?.focus():this.triggerEl?.focus()))}isTypeaheadKey(e){return e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey}handleTypeahead(e){if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.state.focusRingVisible=true;const s=e.toLocaleLowerCase();const t=this.typeahead.length>0&&[...this.typeahead].every((e=>e===s));this.typeahead=t?s:`${this.typeahead}${s}`;const i=S(this.state.options,this.typeahead,this.state.activeIndex);if(i>=0)this.state.activeIndex=i;const o=g(u.animationDurationMedium1,u.animationDurationMedium1);this.typeaheadTimer=setTimeout((()=>{this.typeahead="";this.typeaheadTimer=null}),o)}scrollActiveOptionIntoView(){if(!this.state.open||!this.activeOptionId)return;this.state.host.querySelector(`#${this.activeOptionId}`)?.scrollIntoView({block:"nearest",inline:"nearest"})}bindPopupListeners(){this.unbindPopupListeners();this.outsideHandler=e=>{if(this.state.host.contains(e.target))return;this.closePopup()};document.addEventListener("mousedown",this.outsideHandler,true);this.position.observe()}unbindPopupListeners(){if(this.outsideHandler){document.removeEventListener("mousedown",this.outsideHandler,true);this.outsideHandler=null}this.position.unobserve()}cancelPositionRetry(){this.position.cancel()}schedulePositionUpdate(e){if(!this.state.open)return;this.state.positionReady=false;this.position.schedule(e)}updatePosition(){return this.position.update()}}const H=()=>`@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-select-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-select-h,.ds-focus-ring.sc-ds-select,.ds-focus-ring-inset.sc-ds-select-h,.ds-focus-ring-inset.sc-ds-select{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-select-h:focus-visible,.ds-focus-ring.sc-ds-select: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-select-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-select{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-select-h:focus-visible,.ds-focus-ring-inset.sc-ds-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-select: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-select-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-select-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-select-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::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-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-select-h,.ds-interaction-fill--on-faint.sc-ds-select{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--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-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--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-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--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-select-h,.ds-interaction-fill--on-translucent.sc-ds-select{--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-select-h,.ds-interaction-fill--on-inverted.sc-ds-select{--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-select-h,.ds-interaction-fill--on-media.sc-ds-select{--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-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--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-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-select,.ds-control--lg.sc-ds-select-h,.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select,.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select,.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-select-h,.ds-control--lg.sc-ds-select{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--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-select-h,.ds-control--sm.sc-ds-select{--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-select-h,.ds-control--xs.sc-ds-select{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-select-h,.ds-chrome-space--sm.sc-ds-select{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-select-h,.ds-chrome-space--md.sc-ds-select{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-select-h,.ds-chrome-space--lg.sc-ds-select{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-select-h,.ds-chrome-row.sc-ds-select,.ds-chrome-column.sc-ds-select-h,.ds-chrome-column.sc-ds-select,.ds-chrome-grid.sc-ds-select-h,.ds-chrome-grid.sc-ds-select{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-select-h,.ds-chrome-row.sc-ds-select{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-select-h,.ds-chrome-column.sc-ds-select{flex-direction:column}.ds-chrome-grid.sc-ds-select-h,.ds-chrome-grid.sc-ds-select{display:grid;align-items:center}.ds-control-frame.sc-ds-select{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-empty-region.sc-ds-select{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-select{padding:var(--dimension-space-200)}.ds-choice-popup.sc-ds-select{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-select{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-select{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-select{opacity:0}}.ds-choice-list.sc-ds-select{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-select{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-select{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-select{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-select:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-select{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-select{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-select,.ds-choice-item__suffix.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-select,.ds-choice-loading.sc-ds-select{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-select{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-select::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-select{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-select,.ds-choice-footer__clear.sc-ds-select ds-text.sc-ds-select{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__clear.sc-ds-select{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:default}.ds-choice-footer__clear.sc-ds-select:hover{text-decoration:underline;text-decoration-color:var(--color-foreground-tertiary)}@media (forced-colors: active){.ds-choice-popup.sc-ds-select{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.ds-choice-popup.sc-ds-select::after{box-shadow:none}.ds-choice-section--divided.sc-ds-select{border-bottom-color:var(--ds-forced-color-content)}.ds-choice-footer.sc-ds-select::before{background-color:var(--ds-forced-color-content)}}.ds-control-frame.sc-ds-select{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-select-h,.ds-field-stack.sc-ds-select{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.select-search.sc-ds-select{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-select::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-select:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-select{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-select:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-select>ds-icon.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-select .select-search__control.sc-ds-select .select-search__clear.sc-ds-select{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-select input.sc-ds-select{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-select input.sc-ds-select::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-select input.sc-ds-select:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-cancel-button,.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-select-h,.ds-text--display-medium.sc-ds-select{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-select-h,.ds-text--display-small.sc-ds-select{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-select-h,.ds-text--title-large.sc-ds-select{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-select-h,.ds-text--title-medium.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-select-h,.ds-text--title-small.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-select-h,.ds-text--body-large.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-select-h,.ds-text--body-medium.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-select-h,.ds-text--body-small.sc-ds-select{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-select-h,.ds-text--caption.sc-ds-select{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--display-small.ds-text--emphasis.sc-ds-select-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-select,.ds-text--display-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-select-h,.ds-text--display-small.ds-text--regular.sc-ds-select-h,.ds-text--display-medium.ds-text--regular.sc-ds-select,.ds-text--display-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-select-h,.ds-text--title-large.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-select-h,.ds-text--title-large.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--title-small.ds-text--emphasis.sc-ds-select-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-select,.ds-text--title-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-select-h,.ds-text--title-small.ds-text--regular.sc-ds-select-h,.ds-text--title-medium.ds-text--regular.sc-ds-select,.ds-text--title-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-select-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--body-large.ds-text--emphasis.sc-ds-select,.ds-text--body-medium.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-select-h,.ds-text--body-medium.ds-text--regular.sc-ds-select-h,.ds-text--body-large.ds-text--regular.sc-ds-select,.ds-text--body-medium.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-select-h,.ds-text--body-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-select-h,.ds-text--body-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-select-h,.ds-text--caption.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-select-h,.ds-text--caption.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.select-host.sc-ds-select-h{display:inline-flex;position:relative;outline:none;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-prefix-fg:var(--ds-select-fg);--ds-select-chevron-fg:var(--ds-select-fg);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.trigger.sc-ds-select{justify-content:flex-start;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:default;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.wrapper--error.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.trigger__prefix.sc-ds-select,.trigger__chevron.sc-ds-select{position:relative;z-index:2}.trigger__prefix.sc-ds-select{color:var(--ds-select-prefix-fg)}.trigger__chevron.sc-ds-select{color:var(--ds-select-chevron-fg)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.select-popup.sc-ds-select{color:var(--color-foreground-secondary)}.select-option[aria-selected='true'].sc-ds-select .ds-choice-item__icon.sc-ds-select{color:var(--color-foreground-primary)}.error-text.sc-ds-select{width:100%}.select-host--background-medium.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-medium-background-secondary);--ds-select-fg-active:var(--color-foreground-on-medium-background-primary);--ds-select-border:var(--color-border-on-medium-background-secondary)}.select-host--background-bold.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-bold-background-secondary);--ds-select-fg-active:var(--color-foreground-on-bold-background-primary);--ds-select-border:var(--color-border-on-bold-background-secondary)}.select-host--background-strong.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-strong-background-secondary);--ds-select-fg-active:var(--color-foreground-on-strong-background-primary);--ds-select-border:var(--color-border-on-strong-background-secondary)}.select-host--background-translucent.sc-ds-select-h{--ds-select-fg:var(--color-translucent-foreground-secondary);--ds-select-fg-active:var(--color-translucent-foreground-primary);--ds-select-border:var(--color-translucent-border-secondary)}.select-host--background-inverted.sc-ds-select-h{--ds-select-fg:var(--color-inverted-foreground-secondary);--ds-select-fg-active:var(--color-inverted-foreground-primary);--ds-select-border:var(--color-inverted-border-secondary)}.select-host--background-media.sc-ds-select-h{--ds-select-fg:var(--color-media-foreground-secondary);--ds-select-fg-active:var(--color-media-foreground-primary);--ds-select-border:var(--color-media-border-secondary)}.select-host--background-always-dark.sc-ds-select-h{--ds-select-fg:var(--color-always-dark-foreground-secondary);--ds-select-fg-active:var(--color-always-dark-foreground-primary);--ds-select-border:var(--color-always-dark-border-secondary)}`;const M={lg:"lg",md:"md",sm:"sm",xs:"xs"};let G=0;const U=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsClear=t(this,"dsClear");this.dsOpenChange=t(this,"dsOpenChange");this.internals=this.attachInternals();this.options=[];this.sections=[];this.multiple=false;this.value="";this.open=false;this.disabled=false;this.required=false;this.requiredMessage=_;this.placeholder="Select";this.size="md";this.width="hug";this.isInactive=false;this.isLoading=false;this.activeFill=true;this.hasBorder=true;this.allowClear=true;this.clearLabel="Clear";this.selectedLabel="selected";this.searchable=false;this.searchPlaceholder="Search";this.noResultsText="No results found";this.loadingLabel="Loading";this.error=false;this.ariaLabel=null;this.activeIndex=-1;this.searchTerm="";this.formDisabled=false;this.position={x:0,y:0};this.positionReady=false;this.focusRingVisible=false;this.generatedId=`ds-select-${++G}`;this.listboxId=`${this.generatedId}-listbox`;this.errorId=`${this.generatedId}-error`;this.initialValue="";this.controller=this.createController();this.clearSelection=e=>{e.preventDefault();e.stopPropagation();this.value=this.multiple?[]:"";this.dsChange.emit(this.multiple?[]:"");this.dsClear.emit();if(!this.multiple){const e=q(this.visibleOptions);this.activeIndex=e[0]??-1}this.controller.focusSearchOrTrigger()};this.handleListKeyDown=this.controller.handleListKeyDown;this.handleTriggerKeyDown=this.controller.handleTriggerKeyDown}createController(){const e=this;return new R({get host(){return e.el},generatedId:e.generatedId,get options(){return e.visibleOptions},get searchable(){return e.searchable},get isLoading(){return e.isLoading},get isDisabled(){return e.isDisabled},get preferredIndex(){if(e.multiple)return-1;return e.visibleOptions.findIndex((s=>s.value===e.scalarValue&&!s.isInactive))},get open(){return e.open},set open(s){e.open=s},get activeIndex(){return e.activeIndex},set activeIndex(s){e.activeIndex=s},get searchTerm(){return e.searchTerm},set searchTerm(s){e.searchTerm=s},get focusRingVisible(){return e.focusRingVisible},set focusRingVisible(s){e.focusRingVisible=s},get position(){return e.position},set position(s){e.position=s},get positionReady(){return e.positionReady},set positionReady(s){e.positionReady=s},selectOption:s=>e.selectOption(s)})}componentWillLoad(){this.value=this.normalizeValueForMode(this.value);this.initialValue=Array.isArray(this.value)?[...this.value]:this.value;this.syncFormValue()}componentDidLoad(){this.controller.connect()}disconnectedCallback(){this.controller.disconnect()}syncFormValue(){if(this.multiple&&!Array.isArray(this.value)||!this.multiple&&Array.isArray(this.value)){this.value=this.normalizeValueForMode(this.value)}const e=this.isDisabled;if(this.multiple){const s=this.resolvedValues;C(this.internals,this.name,s,{inactive:e})}else{const s=this.hasSelection?this.scalarValue:"";T(this.internals,s,{inactive:e})}const s=this.required&&!e&&!this.hasSelection;z(this.internals,s,this.requiredMessage);this.controller.optionsChanged()}onLoadingChange(){this.controller.loadingChanged()}onOpenChange(e){this.dsOpenChange.emit(e);this.controller.openChanged(e)}onSearchTermChange(){this.controller.searchChanged()}onActiveIndexChange(){this.controller.activeIndexChanged()}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.value=this.normalizeValueForMode(this.initialValue);this.closePopup()}formStateRestoreCallback(e){if(!this.multiple){this.value=F(e);return}this.value=V(e)}async setFocus(){this.controller.setFocus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}normalizeValueForMode(e){if(this.multiple){return Array.isArray(e)?[...e]:e?[e]:[]}return Array.isArray(e)?e[0]??"":e}get allSections(){return $(this.options,this.sections)}get allOptions(){return O(this.allSections)}get visibleSections(){return this.searchable?L(this.allSections,this.searchTerm):this.allSections}get visibleOptions(){return O(this.visibleSections)}get scalarValue(){return typeof this.value==="string"?this.value:""}get resolvedValues(){if(!this.multiple||!Array.isArray(this.value))return[];const e=new Set(this.allOptions.map((e=>e.value)));return[...new Set(this.value.filter((s=>e.has(s))))]}get selectedOption(){if(this.multiple)return undefined;return this.allOptions.find((e=>e.value===this.scalarValue))}get hasSelection(){return this.multiple?this.resolvedValues.length>0:Boolean(this.selectedOption)}get activeOptionId(){return this.controller.activeOptionId}closePopup(e=false){this.controller.closePopup(e)}openPopup(e,s){this.controller.openPopup(e,s)}selectOption(e){if(e.isInactive||this.isLoading)return;if(this.multiple){const s=this.resolvedValues;const t=s.includes(e.value)?s.filter((s=>s!==e.value)):[...s,e.value];this.value=t;this.dsChange.emit([...t]);return}this.value=e.value;this.dsChange.emit(e.value);this.controller.closePopup(true)}renderOption(e,s,t,o){const r=this.multiple?this.resolvedValues.includes(e.value):e.value===this.scalarValue;const n=s===this.activeIndex;return i(c,{size:this.size,id:`${this.generatedId}-option-${s}`,option:e,selected:r,active:n,focusRingVisible:this.focusRingVisible,usesSubtext:o,leading:this.multiple?i("span",{class:"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-checkbox",{class:"select-option__checkbox",label:"",size:this.size,checked:r,presentation:true})):t&&e.icon?i("span",{class:"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{name:e.icon,size:this.size,color:"inherit"})):undefined,onHover:()=>{this.focusRingVisible=false;this.activeIndex=s},onSelect:()=>this.selectOption(e)})}render(){const e=this.isDisabled;const s=!this.hasSelection;const t=this.resolvedValues.length;const r=this.multiple?`${this.placeholder}${t>0?` · ${t}`:""}`:s?this.placeholder:this.selectedOption?.label;const c=A[this.size];const a=M[this.size];const l=!this.multiple&&B(this.allOptions);const h=D(this.allOptions);const f=this.error&&Boolean(this.errorMessage);const g=[this.ariaDescribedby,f?this.errorId:undefined].filter(Boolean).join(" ")||undefined;const u={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,zIndex:"var(--dimension-z-index-floating)",visibility:this.positionReady?"visible":"hidden"};let p=0;return i(o,{key:"afb93ed196e628baa387979aaa26294404787420",class:{"select-host":true,"select-host--multiple":this.multiple,"ds-field-stack":true,"ds-control-inactive":e,[`ds-control--${this.size}`]:true,...I(this.width),[`select-host--background-${this.background}`]:!!this.background}},i("button",{key:"587e18c1611a0b41cf66f8205120d29c935af9b4",ref:e=>{this.controller.setTriggerElement(e??null)},id:this.inputId??this.generatedId,type:"button",class:{trigger:true,"ds-control-frame":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":!e&&this.activeFill&&this.hasSelection,"trigger--bordered":this.hasBorder,"trigger--placeholder":s&&!this.multiple,"trigger--has-value":this.hasSelection,"wrapper--error":this.hasBorder&&this.error,[`ds-control--${this.size}`]:true,...E(this.background)},disabled:e,role:"combobox","aria-haspopup":"listbox","aria-expanded":String(this.open),"aria-controls":this.open?this.listboxId:undefined,"aria-activedescendant":this.open&&!this.searchable?this.activeOptionId:undefined,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":g,"aria-invalid":this.error?"true":undefined,"aria-required":this.required||undefined,"aria-busy":this.isLoading?"true":undefined,onClick:()=>this.open?this.closePopup():this.openPopup(false),onKeyDown:this.handleTriggerKeyDown},(this.icon||this.isLoading)&&i("span",{key:"153a4929f67cb4a83b83066c3dde19d0f1dda4da",class:"trigger__prefix ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},this.isLoading?i("ds-loader",{size:a,color:"inherit"}):i("ds-icon",{name:this.icon,size:a,color:"inherit"})),i("ds-text",{key:"89aca9fb5f72d5a6819236f56fe8550281f5f494",class:"trigger__label ds-control-label-box ds-interaction-fill__content",as:"span",variant:c,color:"inherit",lineTruncation:1},r),i("span",{key:"aa1cec1fbf56cb079185ba2d33dbb854df5a642f",class:"trigger__chevron ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"7da17d318f4c907310c842564336e2b98bd6fc45",name:"ChevronDown",size:a,color:"inherit"}))),this.open&&i("div",{key:"a6b4840dd8f77a52d51176435754ac2daa0e8106",popover:"manual",ref:e=>{this.controller.setPopupElement(e??null)},class:"select-popup ds-choice-popup",style:u},this.searchable&&i(n,{key:"c64d3a0f443d6801e7cce8bc387c15bb09bbec98",size:this.size,value:this.searchTerm,placeholder:this.searchPlaceholder,controls:this.listboxId,activeDescendant:this.activeOptionId,inputRef:this.controller.setSearchElement,clearLabel:this.clearLabel,onValueChange:e=>{this.searchTerm=e},onKeyDown:e=>this.handleListKeyDown(e)}),i("div",{key:"047e91041996ea77e8ba44abbed957790748ecdf",id:this.listboxId,class:"ds-choice-list",role:"listbox","aria-multiselectable":this.multiple?"true":undefined,"aria-label":this.ariaLabel??this.placeholder,"aria-busy":this.isLoading?"true":undefined},this.isLoading?i("div",{class:"ds-choice-loading ds-empty-region",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.loadingLabel,"aria-live":"polite"},i("ds-loader",{size:this.size,color:"inherit"})):this.visibleOptions.length===0?i("div",{class:"ds-choice-empty ds-empty-region",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.noResultsText,"aria-live":"polite"},i("ds-empty-state",{body:this.noResultsText})):this.visibleSections.map((e=>i("div",{class:{"ds-choice-section":true,"ds-chrome-column":true,"ds-chrome-space--sm":true,"ds-choice-section--divided":!!e.divider},role:e.header?"group":undefined,"aria-label":e.header},e.header&&i("ds-text",{class:`ds-choice-section__header ds-control--${this.size}`,as:"span",variant:j[this.size],emphasis:true,color:"primary","aria-hidden":"true"},e.header),e.options.map((e=>this.renderOption(e,p++,l,h))))))),this.allowClear&&this.hasSelection&&!this.isLoading&&i(d,{key:"0eba0af8013f2a01d6dd3b5d49d6aadd5516b72e",size:this.size,summary:this.multiple?`${t} ${this.selectedLabel}`:undefined,clearLabel:this.clearLabel,onClear:this.clearSelection})),f&&i("ds-text",{key:"ca2986ebe6348aa9288a4af2676d0e9d684bda24",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],multiple:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}}static get style(){return H()}},[66,"ds-select",{options:[16],sections:[16],multiple:[516],value:[1025],open:[1540],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],icon:[1],allowClear:[4,"allow-clear"],clearLabel:[1,"clear-label"],selectedLabel:[1,"selected-label"],searchable:[4],searchPlaceholder:[1,"search-placeholder"],noResultsText:[1,"no-results-text"],loadingLabel:[1,"loading-label"],background:[1],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],activeIndex:[32],searchTerm:[32],formDisabled:[32],position:[32],positionReady:[32],focusRingVisible:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],multiple:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}]);function K(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-badge","ds-button-unfilled","ds-checkbox","ds-empty-state","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(r(e))){customElements.define(r(e),U)}break;case"ds-badge":if(!customElements.get(r(e))){p()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){m()}break;case"ds-checkbox":if(!customElements.get(r(e))){v()}break;case"ds-empty-state":if(!customElements.get(r(e))){b()}break;case"ds-icon":if(!customElements.get(r(e))){y()}break;case"ds-loader":if(!customElements.get(r(e))){x()}break;case"ds-text":if(!customElements.get(r(e))){w()}break;case"ds-tooltip":if(!customElements.get(r(e))){k()}break}}))}K();const W=U;const Q=K;export{W as DsSelect,Q as defineCustomElement};
|
|
1
|
+
import{p as e,H as s,c as t,h as i,a as o,t as r}from"./index.js";import{a as c,C as n,b as d}from"./p-ymtdhOU5.js";import{A as a}from"./p-BBxcMVqk.js";import{c as l,r as h}from"./p-DhKvqh5G.js";import{r as f}from"./p-BJMRBHKW.js";import{T as g,r as u}from"./p-CXduurfd.js";import{d as p}from"./p-1Zbh1MRy.js";import{d as m}from"./p-D3UKwTEo.js";import{d as v}from"./p-C-ENnZzq.js";import{d as b}from"./p-CX7QIytv.js";import{d as y}from"./p-BAfG3M8z.js";import{d as x}from"./p-Ca-I2UnB.js";import{d as w}from"./p-jf1zCsuw.js";import{d as k}from"./p-CWLrXsDQ.js";import{D as _,s as z}from"./p-DOUk4KoT.js";import{a as C,s as T,r as F,c as V}from"./p-D2xWcVv6.js";import{a as A,C as j}from"./p-CuwopElg.js";import{c as I}from"./p-DAW6G8Sl.js";function $(e,s){return s.length>0?s:[{options:e}]}function L(e){return e.flatMap((e=>e.options))}function O(e){return e.length>0&&e.every((e=>Boolean(e.icon)))}function D(e){return e.some((e=>Boolean(e.subtext?.trim())))}function E(e,s){const t=s.trim().toLocaleLowerCase();if(!t)return e;return e.map((e=>{const s=e.header?.toLocaleLowerCase().includes(t);return{...e,options:s?e.options:e.options.filter((e=>`${e.label} ${e.subtext??""}`.toLocaleLowerCase().includes(t)))}})).filter((e=>e.options.length>0))}function P(e){return e.map(((e,s)=>({option:e,index:s}))).filter((({option:e})=>!e.isInactive)).map((({index:e})=>e))}function q(e,s,t){const i=P(e);if(!i.length)return-1;const o=i.indexOf(s);const r=o>=0?o:t===1?-1:0;return i[(r+t+i.length)%i.length]}function B(e,s,t){const i=s.toLocaleLowerCase();if(!i)return-1;for(let s=1;s<=e.length;s+=1){const o=(Math.max(t,-1)+s)%e.length;const r=e[o];if(!r.isInactive&&r.label.toLocaleLowerCase().startsWith(i))return o}return-1}function S(e){return{"ds-interaction-fill--on-faint":e==="faint","ds-interaction-fill--on-medium":e==="medium","ds-interaction-fill--on-bold":e==="bold","ds-interaction-fill--on-strong":e==="strong","ds-interaction-fill--on-translucent":e==="translucent","ds-interaction-fill--on-inverted":e==="inverted","ds-interaction-fill--on-media":e==="media","ds-interaction-fill--on-always-dark":e==="always-dark"}}class R{constructor(e){this.state=e;this.triggerEl=null;this.popupEl=null;this.searchEl=null;this.typeahead="";this.typeaheadTimer=null;this.outsideHandler=null;this.setTriggerElement=e=>{this.triggerEl=e};this.setPopupElement=e=>{this.popupEl=e};this.setSearchElement=e=>{this.searchEl=e};this.handleTriggerKeyDown=e=>{if(!this.state.open){if(["ArrowDown","ArrowUp","Enter"," "].includes(e.key)){e.preventDefault();this.openPopup(true,e.key==="ArrowUp"?"last":"first")}else if(this.isTypeaheadKey(e)){e.preventDefault();this.openPopup(true);if(this.state.searchable)this.state.searchTerm=e.key;else this.handleTypeahead(e.key)}return}this.handleListKeyDown(e)};this.handleListKeyDown=e=>{switch(e.key){case"ArrowDown":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=q(this.state.options,this.state.activeIndex,1);break;case"ArrowUp":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=q(this.state.options,this.state.activeIndex,-1);break;case"Home":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=P(this.state.options)[0]??-1;break;case"End":{e.preventDefault();this.state.focusRingVisible=true;const s=P(this.state.options);this.state.activeIndex=s[s.length-1]??-1;break}case"Enter":case" ":{if(e.key===" "&&this.state.searchable&&e.target===this.searchEl)break;e.preventDefault();const s=this.state.options[this.state.activeIndex];if(s)this.state.selectOption(s);break}case"Escape":e.preventDefault();this.closePopup(true);break;case"Tab":this.closePopup();break;default:if(!this.state.searchable&&this.isTypeaheadKey(e)){this.handleTypeahead(e.key)}}};this.position=new a({getAnchor:()=>this.triggerEl,getPopup:()=>this.popupEl,measure:(e,s)=>{if(!this.state.open||!s.isConnected||!this.state.host.contains(s))return null;const t=f(g.space050,g.space050);s.style.minWidth=`${l(e.offsetWidth,t)}px`;return{anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth,popupHeight:s.offsetHeight,side:"bottom",align:"start",sideOffsetPx:t,alignOffsetPx:h({align:"start",alignOffsetPx:0,sectionInsetPx:t}),viewportPadPx:t,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}},apply:({x:e,y:s})=>{this.state.position={x:e,y:s};this.state.positionReady=true},topLayer:true})}get activeOptionId(){return!this.state.isLoading&&this.state.activeIndex>=0?`${this.state.generatedId}-option-${this.state.activeIndex}`:undefined}connect(){if(this.state.open)this.openChanged(true)}disconnect(){this.cancelPositionRetry();this.unbindPopupListeners();if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer)}setFocus(){this.triggerEl?.focus()}optionsChanged(){if(!this.state.open)return;const e=P(this.state.options);if(!e.includes(this.state.activeIndex))this.state.activeIndex=e[0]??-1;requestAnimationFrame((()=>this.updatePosition()))}loadingChanged(){if(this.state.open)requestAnimationFrame((()=>this.updatePosition()))}openChanged(e){if(e){this.bindPopupListeners();this.schedulePositionUpdate((()=>{this.scrollActiveOptionIntoView();if(this.state.searchable)this.searchEl?.focus()}));return}this.cancelPositionRetry();this.unbindPopupListeners();this.state.searchTerm="";this.state.positionReady=false}searchChanged(){this.state.activeIndex=P(this.state.options)[0]??-1;requestAnimationFrame((()=>{this.updatePosition();this.scrollActiveOptionIntoView()}))}activeIndexChanged(){requestAnimationFrame((()=>this.scrollActiveOptionIntoView()))}openPopup(e,s){if(this.state.isDisabled||!this.state.options.length&&!this.state.isLoading)return;const t=P(this.state.options);this.state.activeIndex=s==="last"?t[t.length-1]??-1:this.state.preferredIndex>=0?this.state.preferredIndex:t[0]??-1;this.state.focusRingVisible=e;this.state.open=true}closePopup(e=false){if(!this.state.open)return;this.state.open=false;if(e)requestAnimationFrame((()=>this.triggerEl?.focus()))}focusSearchOrTrigger(){requestAnimationFrame((()=>this.state.searchable?this.searchEl?.focus():this.triggerEl?.focus()))}isTypeaheadKey(e){return e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey}handleTypeahead(e){if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.state.focusRingVisible=true;const s=e.toLocaleLowerCase();const t=this.typeahead.length>0&&[...this.typeahead].every((e=>e===s));this.typeahead=t?s:`${this.typeahead}${s}`;const i=B(this.state.options,this.typeahead,this.state.activeIndex);if(i>=0)this.state.activeIndex=i;const o=u(g.animationDurationMedium1,g.animationDurationMedium1);this.typeaheadTimer=setTimeout((()=>{this.typeahead="";this.typeaheadTimer=null}),o)}scrollActiveOptionIntoView(){if(!this.state.open||!this.activeOptionId)return;this.state.host.querySelector(`#${this.activeOptionId}`)?.scrollIntoView({block:"nearest",inline:"nearest"})}bindPopupListeners(){this.unbindPopupListeners();this.outsideHandler=e=>{if(this.state.host.contains(e.target))return;this.closePopup()};document.addEventListener("mousedown",this.outsideHandler,true);this.position.observe()}unbindPopupListeners(){if(this.outsideHandler){document.removeEventListener("mousedown",this.outsideHandler,true);this.outsideHandler=null}this.position.unobserve()}cancelPositionRetry(){this.position.cancel()}schedulePositionUpdate(e){if(!this.state.open)return;this.state.positionReady=false;this.position.schedule(e)}updatePosition(){return this.position.update()}}const H=()=>`@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-select-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-select-h,.ds-focus-ring.sc-ds-select,.ds-focus-ring-inset.sc-ds-select-h,.ds-focus-ring-inset.sc-ds-select{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-select-h:focus-visible,.ds-focus-ring.sc-ds-select: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-select-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-select{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-select-h:focus-visible,.ds-focus-ring-inset.sc-ds-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-select: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-select-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-select-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-select-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::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-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-select-h,.ds-interaction-fill--on-faint.sc-ds-select{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--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-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--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-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--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-select-h,.ds-interaction-fill--on-translucent.sc-ds-select{--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-select-h,.ds-interaction-fill--on-inverted.sc-ds-select{--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-select-h,.ds-interaction-fill--on-media.sc-ds-select{--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-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--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-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-select,.ds-control--lg.sc-ds-select-h,.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select,.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select,.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-select-h,.ds-control--lg.sc-ds-select{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--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-select-h,.ds-control--sm.sc-ds-select{--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-select-h,.ds-control--xs.sc-ds-select{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-select-h,.ds-chrome-space--sm.sc-ds-select{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-select-h,.ds-chrome-space--md.sc-ds-select{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-select-h,.ds-chrome-space--lg.sc-ds-select{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-select-h,.ds-chrome-row.sc-ds-select,.ds-chrome-column.sc-ds-select-h,.ds-chrome-column.sc-ds-select,.ds-chrome-grid.sc-ds-select-h,.ds-chrome-grid.sc-ds-select{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-select-h,.ds-chrome-row.sc-ds-select{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-select-h,.ds-chrome-column.sc-ds-select{flex-direction:column}.ds-chrome-grid.sc-ds-select-h,.ds-chrome-grid.sc-ds-select{display:grid;align-items:center}.ds-control-frame.sc-ds-select{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-empty-region.sc-ds-select{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-select{padding:var(--dimension-space-200)}.ds-choice-popup.sc-ds-select{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-select{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-select{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-select{opacity:0}}.ds-choice-list.sc-ds-select{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-select{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-select{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-select{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-select:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-select{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-select{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-select,.ds-choice-item__suffix.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-select,.ds-choice-loading.sc-ds-select{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-select{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-select::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-select{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-select,.ds-choice-footer__clear.sc-ds-select ds-text.sc-ds-select{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__clear.sc-ds-select{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:default}.ds-choice-footer__clear.sc-ds-select:hover{text-decoration:underline;text-decoration-color:var(--color-foreground-tertiary)}@media (forced-colors: active){.ds-choice-popup.sc-ds-select{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.ds-choice-popup.sc-ds-select::after{box-shadow:none}.ds-choice-section--divided.sc-ds-select{border-bottom-color:var(--ds-forced-color-content)}.ds-choice-footer.sc-ds-select::before{background-color:var(--ds-forced-color-content)}}.ds-control-frame.sc-ds-select{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-select-h,.ds-field-stack.sc-ds-select{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.select-search.sc-ds-select{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-select::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-select:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-select{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-select:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-select>ds-icon.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-select .select-search__control.sc-ds-select .select-search__clear.sc-ds-select{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-select input.sc-ds-select{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-select input.sc-ds-select::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-select input.sc-ds-select:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-cancel-button,.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-select-h,.ds-text--display-medium.sc-ds-select{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-select-h,.ds-text--display-small.sc-ds-select{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-select-h,.ds-text--title-large.sc-ds-select{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-select-h,.ds-text--title-medium.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-select-h,.ds-text--title-small.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-select-h,.ds-text--body-large.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-select-h,.ds-text--body-medium.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-select-h,.ds-text--body-small.sc-ds-select{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-select-h,.ds-text--caption.sc-ds-select{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--display-small.ds-text--emphasis.sc-ds-select-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-select,.ds-text--display-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-select-h,.ds-text--display-small.ds-text--regular.sc-ds-select-h,.ds-text--display-medium.ds-text--regular.sc-ds-select,.ds-text--display-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-select-h,.ds-text--title-large.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-select-h,.ds-text--title-large.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--title-small.ds-text--emphasis.sc-ds-select-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-select,.ds-text--title-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-select-h,.ds-text--title-small.ds-text--regular.sc-ds-select-h,.ds-text--title-medium.ds-text--regular.sc-ds-select,.ds-text--title-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-select-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--body-large.ds-text--emphasis.sc-ds-select,.ds-text--body-medium.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-select-h,.ds-text--body-medium.ds-text--regular.sc-ds-select-h,.ds-text--body-large.ds-text--regular.sc-ds-select,.ds-text--body-medium.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-select-h,.ds-text--body-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-select-h,.ds-text--body-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-select-h,.ds-text--caption.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-select-h,.ds-text--caption.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.select-host.sc-ds-select-h{display:inline-flex;position:relative;outline:none;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-prefix-fg:var(--ds-select-fg);--ds-select-chevron-fg:var(--ds-select-fg);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.trigger.sc-ds-select{justify-content:flex-start;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:default;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.wrapper--error.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.trigger__prefix.sc-ds-select,.trigger__chevron.sc-ds-select{position:relative;z-index:2}.trigger__prefix.sc-ds-select{color:var(--ds-select-prefix-fg)}.trigger__chevron.sc-ds-select{color:var(--ds-select-chevron-fg)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.select-popup.sc-ds-select{color:var(--color-foreground-secondary)}.select-option[aria-selected='true'].sc-ds-select .ds-choice-item__icon.sc-ds-select{color:var(--color-foreground-primary)}.error-text.sc-ds-select{width:100%}.select-host--background-medium.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-medium-background-secondary);--ds-select-fg-active:var(--color-foreground-on-medium-background-primary);--ds-select-border:var(--color-border-on-medium-background-secondary)}.select-host--background-bold.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-bold-background-secondary);--ds-select-fg-active:var(--color-foreground-on-bold-background-primary);--ds-select-border:var(--color-border-on-bold-background-secondary)}.select-host--background-strong.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-strong-background-secondary);--ds-select-fg-active:var(--color-foreground-on-strong-background-primary);--ds-select-border:var(--color-border-on-strong-background-secondary)}.select-host--background-translucent.sc-ds-select-h{--ds-select-fg:var(--color-translucent-foreground-secondary);--ds-select-fg-active:var(--color-translucent-foreground-primary);--ds-select-border:var(--color-translucent-border-secondary)}.select-host--background-inverted.sc-ds-select-h{--ds-select-fg:var(--color-inverted-foreground-secondary);--ds-select-fg-active:var(--color-inverted-foreground-primary);--ds-select-border:var(--color-inverted-border-secondary)}.select-host--background-media.sc-ds-select-h{--ds-select-fg:var(--color-media-foreground-secondary);--ds-select-fg-active:var(--color-media-foreground-primary);--ds-select-border:var(--color-media-border-secondary)}.select-host--background-always-dark.sc-ds-select-h{--ds-select-fg:var(--color-always-dark-foreground-secondary);--ds-select-fg-active:var(--color-always-dark-foreground-primary);--ds-select-border:var(--color-always-dark-border-secondary)}`;const M={lg:"lg",md:"md",sm:"sm",xs:"xs"};let U=0;const G=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsClear=t(this,"dsClear");this.dsOpenChange=t(this,"dsOpenChange");this.internals=this.attachInternals();this.options=[];this.sections=[];this.multiple=false;this.value="";this.open=false;this.disabled=false;this.required=false;this.requiredMessage=_;this.placeholder="Select";this.size="md";this.width="hug";this.isInactive=false;this.isLoading=false;this.activeFill=true;this.hasBorder=true;this.allowClear=true;this.clearLabel="Clear";this.selectedLabel="selected";this.searchable=false;this.searchPlaceholder="Search";this.noResultsText="No results found";this.loadingLabel="Loading";this.error=false;this.ariaLabel=null;this.activeIndex=-1;this.searchTerm="";this.formDisabled=false;this.position={x:0,y:0};this.positionReady=false;this.focusRingVisible=false;this.generatedId=`ds-select-${++U}`;this.listboxId=`${this.generatedId}-listbox`;this.errorId=`${this.generatedId}-error`;this.initialValue="";this.controller=this.createController();this.clearSelection=e=>{e.preventDefault();e.stopPropagation();this.value=this.multiple?[]:"";this.dsChange.emit(this.multiple?[]:"");this.dsClear.emit();if(!this.multiple){const e=P(this.visibleOptions);this.activeIndex=e[0]??-1}this.controller.focusSearchOrTrigger()};this.handleListKeyDown=this.controller.handleListKeyDown;this.handleTriggerKeyDown=this.controller.handleTriggerKeyDown}createController(){const e=this;return new R({get host(){return e.el},generatedId:e.generatedId,get options(){return e.visibleOptions},get searchable(){return e.searchable},get isLoading(){return e.isLoading},get isDisabled(){return e.isDisabled},get preferredIndex(){if(e.multiple)return-1;return e.visibleOptions.findIndex((s=>s.value===e.scalarValue&&!s.isInactive))},get open(){return e.open},set open(s){e.open=s},get activeIndex(){return e.activeIndex},set activeIndex(s){e.activeIndex=s},get searchTerm(){return e.searchTerm},set searchTerm(s){e.searchTerm=s},get focusRingVisible(){return e.focusRingVisible},set focusRingVisible(s){e.focusRingVisible=s},get position(){return e.position},set position(s){e.position=s},get positionReady(){return e.positionReady},set positionReady(s){e.positionReady=s},selectOption:s=>e.selectOption(s)})}componentWillLoad(){this.value=this.normalizeValueForMode(this.value);this.initialValue=Array.isArray(this.value)?[...this.value]:this.value;this.syncFormValue()}componentDidLoad(){this.controller.connect()}disconnectedCallback(){this.controller.disconnect()}syncFormValue(){if(this.multiple&&!Array.isArray(this.value)||!this.multiple&&Array.isArray(this.value)){this.value=this.normalizeValueForMode(this.value)}const e=this.isDisabled;if(this.multiple){const s=this.resolvedValues;C(this.internals,this.name,s,{inactive:e})}else{const s=this.hasSelection?this.scalarValue:"";T(this.internals,s,{inactive:e})}const s=this.required&&!e&&!this.hasSelection;z(this.internals,s,this.requiredMessage);this.controller.optionsChanged()}onLoadingChange(){this.controller.loadingChanged()}onOpenChange(e){this.dsOpenChange.emit(e);this.controller.openChanged(e)}onSearchTermChange(){this.controller.searchChanged()}onActiveIndexChange(){this.controller.activeIndexChanged()}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.value=this.normalizeValueForMode(this.initialValue);this.closePopup()}formStateRestoreCallback(e){if(!this.multiple){this.value=F(e);return}this.value=V(e)}async setFocus(){this.controller.setFocus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}normalizeValueForMode(e){if(this.multiple){return Array.isArray(e)?[...e]:e?[e]:[]}return Array.isArray(e)?e[0]??"":e}get allSections(){return $(this.options,this.sections)}get allOptions(){return L(this.allSections)}get visibleSections(){return this.searchable?E(this.allSections,this.searchTerm):this.allSections}get visibleOptions(){return L(this.visibleSections)}get scalarValue(){return typeof this.value==="string"?this.value:""}get resolvedValues(){if(!this.multiple||!Array.isArray(this.value))return[];const e=new Set(this.allOptions.map((e=>e.value)));return[...new Set(this.value.filter((s=>e.has(s))))]}get selectedOption(){if(this.multiple)return undefined;return this.allOptions.find((e=>e.value===this.scalarValue))}get hasSelection(){return this.multiple?this.resolvedValues.length>0:Boolean(this.selectedOption)}get activeOptionId(){return this.controller.activeOptionId}closePopup(e=false){this.controller.closePopup(e)}openPopup(e,s){this.controller.openPopup(e,s)}selectOption(e){if(e.isInactive||this.isLoading)return;if(this.multiple){const s=this.resolvedValues;const t=s.includes(e.value)?s.filter((s=>s!==e.value)):[...s,e.value];this.value=t;this.dsChange.emit([...t]);return}this.value=e.value;this.dsChange.emit(e.value);this.controller.closePopup(true)}renderOption(e,s,t,o){const r=this.multiple?this.resolvedValues.includes(e.value):e.value===this.scalarValue;const n=s===this.activeIndex;return i(c,{size:this.size,id:`${this.generatedId}-option-${s}`,option:e,selected:r,active:n,focusRingVisible:this.focusRingVisible,usesSubtext:o,leading:this.multiple?i("span",{class:"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-checkbox",{class:"select-option__checkbox",label:"",size:this.size,checked:r,presentation:true})):t&&e.icon?i("span",{class:"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{name:e.icon,size:this.size,color:"inherit"})):undefined,onHover:()=>{this.focusRingVisible=false;this.activeIndex=s},onSelect:()=>this.selectOption(e)})}render(){const e=this.isDisabled;const s=!this.hasSelection;const t=this.resolvedValues.length;const r=this.multiple?`${this.placeholder}${t>0?` · ${t}`:""}`:s?this.placeholder:this.selectedOption?.label;const c=j[this.size];const a=M[this.size];const l=!this.multiple&&O(this.allOptions);const h=D(this.allOptions);const f=this.error&&Boolean(this.errorMessage);const g=[this.ariaDescribedby,f?this.errorId:undefined].filter(Boolean).join(" ")||undefined;const u={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,zIndex:"var(--dimension-z-index-floating)",visibility:this.positionReady?"visible":"hidden"};let p=0;return i(o,{key:"856acc3c831698f61f2dae995cb5bc0cd4217ead",class:{"select-host":true,"select-host--multiple":this.multiple,"ds-field-stack":true,"ds-control-inactive":e,[`ds-control--${this.size}`]:true,...I(this.width),[`select-host--background-${this.background}`]:!!this.background}},i("button",{key:"45ef0484ffb85fcf6697ec411d478696547c8761",ref:e=>{this.controller.setTriggerElement(e??null)},id:this.inputId??this.generatedId,type:"button",class:{trigger:true,"ds-control-frame":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":!e&&this.activeFill&&this.hasSelection,"trigger--bordered":this.hasBorder,"trigger--placeholder":s&&!this.multiple,"trigger--has-value":this.hasSelection,"wrapper--error":this.hasBorder&&this.error,[`ds-control--${this.size}`]:true,...S(this.background)},disabled:e,role:"combobox","aria-haspopup":"listbox","aria-expanded":String(this.open),"aria-controls":this.open?this.listboxId:undefined,"aria-activedescendant":this.open&&!this.searchable?this.activeOptionId:undefined,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":g,"aria-invalid":this.error?"true":undefined,"aria-required":this.required||undefined,"aria-busy":this.isLoading?"true":undefined,onClick:()=>this.open?this.closePopup():this.openPopup(false),onKeyDown:this.handleTriggerKeyDown},(this.icon||this.isLoading)&&i("span",{key:"4e78a72f35c72ca725d19cb53bfd73d67a2403ca",class:"trigger__prefix ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},this.isLoading?i("ds-loader",{size:a,color:"inherit"}):i("ds-icon",{name:this.icon,size:a,color:"inherit"})),i("ds-text",{key:"9786a03f122ca00c95c73edde36bb620987e91f4",class:"trigger__label ds-control-label-box ds-interaction-fill__content",as:"span",variant:c,color:"inherit",lineTruncation:1},r),i("span",{key:"8f6d319cc93e2f30d4aafb92b5742ed4209cc452",class:"trigger__chevron ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"fcb5ae7b99ebfe491a014f91c122f39aa163e8ed",name:"ChevronDown",size:a,color:"inherit"}))),this.open&&i("div",{key:"33b5a754b3a13151ecb977905f5daffee12815e8",popover:"manual",ref:e=>{this.controller.setPopupElement(e??null)},class:"select-popup ds-choice-popup",style:u},this.searchable&&i(n,{key:"2860dd1e69ccd90ef8005c0afbf2518464412aa8",size:this.size,value:this.searchTerm,placeholder:this.searchPlaceholder,controls:this.listboxId,activeDescendant:this.activeOptionId,inputRef:this.controller.setSearchElement,clearLabel:this.clearLabel,onValueChange:e=>{this.searchTerm=e},onKeyDown:e=>this.handleListKeyDown(e)}),i("div",{key:"9f70242b9506fde5155e53472dae114e895426cc",id:this.listboxId,class:"ds-choice-list",role:"listbox","aria-multiselectable":this.multiple?"true":undefined,"aria-label":this.ariaLabel??this.placeholder,"aria-busy":this.isLoading?"true":undefined},this.isLoading?i("div",{class:"ds-choice-loading ds-empty-region",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.loadingLabel,"aria-live":"polite"},i("ds-loader",{size:this.size,color:"inherit"})):this.visibleOptions.length===0?i("div",{class:"ds-choice-empty ds-empty-region",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.noResultsText,"aria-live":"polite"},i("ds-empty-state",{body:this.noResultsText})):this.visibleSections.map((e=>i("div",{class:{"ds-choice-section":true,"ds-chrome-column":true,"ds-chrome-space--sm":true,"ds-choice-section--divided":!!e.divider},role:e.header?"group":undefined,"aria-label":e.header},e.header&&i("ds-text",{class:`ds-choice-section__header ds-control--${this.size}`,as:"span",variant:A[this.size],emphasis:true,color:"primary","aria-hidden":"true"},e.header),e.options.map((e=>this.renderOption(e,p++,l,h))))))),this.allowClear&&this.hasSelection&&!this.isLoading&&i(d,{key:"00fc3b5640b8a40566d67f1ef9db157b3aac59c5",size:this.size,summary:this.multiple?`${t} ${this.selectedLabel}`:undefined,clearLabel:this.clearLabel,onClear:this.clearSelection})),f&&i("ds-text",{key:"745b042fc7d66cfaafd2a2036c47c9a894693d9d",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],multiple:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}}static get style(){return H()}},[66,"ds-select",{options:[16],sections:[16],multiple:[516],value:[1025],open:[1540],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],icon:[1],allowClear:[4,"allow-clear"],clearLabel:[1,"clear-label"],selectedLabel:[1,"selected-label"],searchable:[4],searchPlaceholder:[1,"search-placeholder"],noResultsText:[1,"no-results-text"],loadingLabel:[1,"loading-label"],background:[1],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],activeIndex:[32],searchTerm:[32],formDisabled:[32],position:[32],positionReady:[32],focusRingVisible:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],multiple:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}]);function K(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-badge","ds-button-unfilled","ds-checkbox","ds-empty-state","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(r(e))){customElements.define(r(e),G)}break;case"ds-badge":if(!customElements.get(r(e))){p()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){m()}break;case"ds-checkbox":if(!customElements.get(r(e))){v()}break;case"ds-empty-state":if(!customElements.get(r(e))){b()}break;case"ds-icon":if(!customElements.get(r(e))){y()}break;case"ds-loader":if(!customElements.get(r(e))){x()}break;case"ds-text":if(!customElements.get(r(e))){w()}break;case"ds-tooltip":if(!customElements.get(r(e))){k()}break}}))}K();const W=G;const X=K;export{W as DsSelect,X as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-select.js.map
|