@ds-mo/ui 15.6.0 → 15.8.0

package/dist/components/ds-panel-tool-search.js.map

@@ -1 +1 @@
-{"version":3,"names":["panelToolSearchCss","PanelToolSearch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","placeholder","ariaLabel","isInactive","showFilter","filterAriaLabel","filterTriggerId","filterExpanded","filterActive","handleChange","dsChange","emit","componentDidRender","input","el","querySelector","setFocus","focus","focusFilterTrigger","trigger","render","h","Host","key","class","ChoiceSearch","hasFocusBoundary","hasInteractionFill","controls","disabled","inputRef","undefined","clearLabel","onValueChange","onClear","dsClear","onKeyDown","orientation","length","label","side","size","id","variant","icon","haspopup","filterControls","expanded","surfaceOpen","filterSurfaceOpen","isActive","activeFill","hasBorder","onDsChange","event","stopPropagation","onDsClick","dsFilterToggle","detail"],"sources":["src/wc/components/PanelToolSearch/PanelToolSearch.css?tag=ds-panel-tool-search&encapsulation=scoped","src/wc/components/PanelToolSearch/PanelToolSearch.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/search-control.css';\n\n:host {\n  display: block;\n  flex: 0 0 var(--dimension-size-600);\n  width: 100%;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  box-sizing: border-box;\n  background: transparent;\n}\n\n.panel-tool-search {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n}\n\n.panel-tool-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--_shell-tools-divider, var(--color-border-tertiary));\n  pointer-events: none;\n}\n\n.select-search {\n  flex: 1 1 auto;\n  width: auto;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  padding: 0;\n}\n\n.panel-tool-search__filter-group {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.panel-tool-search__divider,\n.panel-tool-search__filter {\n  flex: 0 0 auto;\n}\n\n.panel-tool-search__divider {\n  --_divider-color: var(--_shell-tools-divider, var(--color-divider-divider));\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { ChoiceSearch } from '../../utils/choice-list-parts';\n\n@Component({\n  tag: 'ds-panel-tool-search',\n  styleUrl: 'PanelToolSearch.css',\n  scoped: true,\n})\nexport class PanelToolSearch {\n  @Element() el!: HTMLElement;\n\n  /** Current search query. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Search guidance shown while the query is empty. */\n  @Prop() placeholder: string = 'Search';\n  /** Accessible name for the search field. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'Search';\n  /** Optional ID of the results region filtered by this search. */\n  @Prop() controls: string | undefined;\n  /** Prevents search interaction while keeping the row visible. */\n  @Prop() isInactive: boolean = false;\n  /** Show the optional trailing filter-menu trigger. */\n  @Prop() showFilter: boolean = false;\n  /** Accessible name for the filter-menu trigger. */\n  @Prop() filterAriaLabel: string = 'Filter';\n  /** Stable id placed on the filter trigger for ds-menu anchoring. */\n  @Prop() filterTriggerId: string = '';\n  /** Id of the menu controlled by the filter trigger. */\n  @Prop() filterControls: string | undefined;\n  /** Whether the controlled filter menu is open. */\n  @Prop() filterExpanded: boolean = false;\n  /** Associated filter surface is visible, including exit motion. */\n  @Prop() filterSurfaceOpen: boolean | undefined;\n  /** Promote the trigger foreground when one or more filters are applied. */\n  @Prop() filterActive: boolean = false;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n  @Event() dsFilterToggle!: EventEmitter<MouseEvent>;\n\n  componentDidRender() {\n    const input = this.el.querySelector('input');\n    if (input && input.value !== this.value) input.value = this.value;\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  @Method()\n  async focusFilterTrigger() {\n    const trigger = this.el.querySelector('ds-button-unfilled.panel-tool-search__filter') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await trigger?.setFocus?.();\n  }\n\n  private handleChange = (value: string) => {\n    this.value = value;\n    this.dsChange.emit(value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-tool-search ds-chrome-row ds-chrome-space--md\">\n          <ChoiceSearch\n            hasFocusBoundary={false}\n            hasInteractionFill={false}\n            value={this.value}\n            placeholder={this.placeholder}\n            ariaLabel={this.ariaLabel}\n            controls={this.controls}\n            disabled={this.isInactive}\n            inputRef={() => undefined}\n            clearLabel=\"Clear\"\n            onValueChange={this.handleChange}\n            onClear={() => this.dsClear.emit()}\n            onKeyDown={() => undefined}\n          />\n          {this.showFilter ? (\n            <div class=\"panel-tool-search__filter-group\">\n              <ds-divider\n                class=\"panel-tool-search__divider\"\n                orientation=\"vertical\"\n                length=\"var(--dimension-size-200)\"\n              />\n              <ds-tooltip label={this.filterAriaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  id={this.filterTriggerId || undefined}\n                  class=\"panel-tool-search__filter\"\n                  variant=\"icon\"\n                  icon=\"Filters\"\n                  size=\"md\"\n                  aria-label={this.filterAriaLabel}\n                  haspopup=\"menu\"\n                  controls={this.filterControls}\n                  expanded={this.filterExpanded}\n                  surfaceOpen={this.filterSurfaceOpen}\n                  isActive={this.filterActive}\n                  isInactive={this.isInactive}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsChange={(event: CustomEvent<boolean>) => {\n                    event.stopPropagation();\n                  }}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => {\n                    event.stopPropagation();\n                    this.dsFilterToggle.emit(event.detail);\n                  }}\n                />\n              </ds-tooltip>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wYAAA,MAAMA,EAAqB,IAAM,o/J,MCQpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,+JAS2BC,KAAAC,MAAgB,GAEjCD,KAAAE,YAAsB,SAEKF,KAAAG,UAAoB,SAI/CH,KAAAI,WAAsB,MAEtBJ,KAAAK,WAAsB,MAEtBL,KAAAM,gBAA0B,SAE1BN,KAAAO,gBAA0B,GAI1BP,KAAAQ,eAA0B,MAI1BR,KAAAS,aAAwB,MAwBxBT,KAAAU,aAAgBT,IACtBD,KAAKC,MAAQA,EACbD,KAAKW,SAASC,KAAKX,EAAM,CA2D5B,CA/EC,kBAAAY,GACE,MAAMC,EAAQd,KAAKe,GAAGC,cAAc,SACpC,GAAIF,GAASA,EAAMb,QAAUD,KAAKC,MAAOa,EAAMb,MAAQD,KAAKC,K,CAI9D,cAAMgB,GACJjB,KAAKe,GAAGC,cAAc,UAAUE,O,CAIlC,wBAAMC,GACJ,MAAMC,EAAUpB,KAAKe,GAAGC,cAAc,sDAGhCI,GAASH,a,CAQjB,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uDACTH,EAACI,EAAY,CAAAF,IAAA,2CACXG,iBAAkB,MAClBC,mBAAoB,MACpB3B,MAAOD,KAAKC,MACZC,YAAaF,KAAKE,YAClBC,UAAWH,KAAKG,UAChB0B,SAAU7B,KAAK6B,SACfC,SAAU9B,KAAKI,WACf2B,SAAU,IAAMC,UAChBC,WAAW,QACXC,cAAelC,KAAKU,aACpByB,QAAS,IAAMnC,KAAKoC,QAAQxB,OAC5ByB,UAAW,IAAML,YAElBhC,KAAKK,WACJiB,EAAA,OAAKG,MAAM,mCACTH,EAAA,cACEG,MAAM,6BACNa,YAAY,WACZC,OAAO,8BAETjB,EAAA,cAAYkB,MAAOxC,KAAKM,gBAAiBmC,KAAK,SAASC,KAAK,MAC1DpB,EAAA,sBACEqB,GAAI3C,KAAKO,iBAAmByB,UAC5BP,MAAM,4BACNmB,QAAQ,OACRC,KAAK,UACLH,KAAK,KAAI,aACG1C,KAAKM,gBACjBwC,SAAS,OACTjB,SAAU7B,KAAK+C,eACfC,SAAUhD,KAAKQ,eACfyC,YAAajD,KAAKkD,kBAClBC,SAAUnD,KAAKS,aACfL,WAAYJ,KAAKI,WACjBgD,WAAY,MACZC,UAAW,MACXC,WAAaC,IACXA,EAAMC,iBAAiB,EAEzBC,UAAYF,IACVA,EAAMC,kBACNxD,KAAK0D,eAAe9C,KAAK2C,EAAMI,OAAO,MAK5C,M","ignoreList":[]}
+{"version":3,"names":["panelToolSearchCss","PanelToolSearch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","placeholder","ariaLabel","isInactive","showFilter","filterAriaLabel","filterTriggerId","filterExpanded","filterActive","handleChange","dsChange","emit","componentDidRender","input","el","querySelector","setFocus","focus","focusFilterTrigger","trigger","render","h","Host","key","class","ChoiceSearch","hasFocusBoundary","hasInteractionFill","controls","disabled","inputRef","undefined","clearLabel","onValueChange","onClear","dsClear","onKeyDown","orientation","length","label","side","size","id","variant","icon","haspopup","filterControls","expanded","surfaceOpen","filterSurfaceOpen","isActive","activeFill","hasBorder","onDsChange","event","stopPropagation","onDsClick","dsFilterToggle","detail"],"sources":["src/wc/components/PanelToolSearch/PanelToolSearch.css?tag=ds-panel-tool-search&encapsulation=scoped","src/wc/components/PanelToolSearch/PanelToolSearch.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/search-control.css';\n\n:host {\n  display: block;\n  flex: 0 0 var(--dimension-size-600);\n  width: 100%;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  box-sizing: border-box;\n  background: transparent;\n}\n\n.panel-tool-search {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n}\n\n.panel-tool-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--_shell-tools-divider, var(--color-border-tertiary));\n  pointer-events: none;\n}\n\n.select-search {\n  flex: 1 1 auto;\n  width: auto;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  padding: 0;\n}\n\n.panel-tool-search__filter-group {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.panel-tool-search__divider,\n.panel-tool-search__filter {\n  flex: 0 0 auto;\n}\n\n.panel-tool-search__divider {\n  --_divider-color: var(--_shell-tools-divider, var(--color-divider-divider));\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { ChoiceSearch } from '../../utils/choice-list-parts';\n\n@Component({\n  tag: 'ds-panel-tool-search',\n  styleUrl: 'PanelToolSearch.css',\n  scoped: true,\n})\nexport class PanelToolSearch {\n  @Element() el!: HTMLElement;\n\n  /** Current search query. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Search guidance shown while the query is empty. */\n  @Prop() placeholder: string = 'Search';\n  /** Accessible name for the search field. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'Search';\n  /** Optional ID of the results region filtered by this search. */\n  @Prop() controls: string | undefined;\n  /** Prevents search interaction while keeping the row visible. */\n  @Prop() isInactive: boolean = false;\n  /** Show the optional trailing filter-menu trigger. */\n  @Prop() showFilter: boolean = false;\n  /** Accessible name for the filter-menu trigger. */\n  @Prop() filterAriaLabel: string = 'Filter';\n  /** Stable id placed on the filter trigger for ds-menu anchoring. */\n  @Prop() filterTriggerId: string = '';\n  /** Id of the menu controlled by the filter trigger. */\n  @Prop() filterControls: string | undefined;\n  /** Whether the controlled filter menu is open. */\n  @Prop() filterExpanded: boolean = false;\n  /** Associated filter surface is visible, including exit motion. */\n  @Prop() filterSurfaceOpen: boolean | undefined;\n  /** Promote the trigger foreground when one or more filters are applied. */\n  @Prop() filterActive: boolean = false;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n  @Event() dsFilterToggle!: EventEmitter<MouseEvent>;\n\n  componentDidRender() {\n    const input = this.el.querySelector('input');\n    if (input && input.value !== this.value) input.value = this.value;\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  @Method()\n  async focusFilterTrigger() {\n    const trigger = this.el.querySelector('ds-button-unfilled.panel-tool-search__filter') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await trigger?.setFocus?.();\n  }\n\n  private handleChange = (value: string) => {\n    this.value = value;\n    this.dsChange.emit(value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-tool-search ds-chrome-row ds-chrome-space--md\">\n          <ChoiceSearch\n            hasFocusBoundary={false}\n            hasInteractionFill={false}\n            value={this.value}\n            placeholder={this.placeholder}\n            ariaLabel={this.ariaLabel}\n            controls={this.controls}\n            disabled={this.isInactive}\n            inputRef={() => undefined}\n            clearLabel=\"Clear\"\n            onValueChange={this.handleChange}\n            onClear={() => this.dsClear.emit()}\n            onKeyDown={() => undefined}\n          />\n          {this.showFilter ? (\n            <div class=\"panel-tool-search__filter-group\">\n              <ds-divider\n                class=\"panel-tool-search__divider\"\n                orientation=\"vertical\"\n                length=\"var(--dimension-size-200)\"\n              />\n              <ds-tooltip label={this.filterAriaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  id={this.filterTriggerId || undefined}\n                  class=\"panel-tool-search__filter\"\n                  variant=\"icon\"\n                  icon=\"Filters\"\n                  size=\"md\"\n                  aria-label={this.filterAriaLabel}\n                  haspopup=\"menu\"\n                  controls={this.filterControls}\n                  expanded={this.filterExpanded}\n                  surfaceOpen={this.filterSurfaceOpen}\n                  isActive={this.filterActive}\n                  isInactive={this.isInactive}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsChange={(event: CustomEvent<boolean>) => {\n                    event.stopPropagation();\n                  }}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => {\n                    event.stopPropagation();\n                    this.dsFilterToggle.emit(event.detail);\n                  }}\n                />\n              </ds-tooltip>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wYAAA,MAAMA,EAAqB,IAAM,uhK,MCQpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,+JAS2BC,KAAAC,MAAgB,GAEjCD,KAAAE,YAAsB,SAEKF,KAAAG,UAAoB,SAI/CH,KAAAI,WAAsB,MAEtBJ,KAAAK,WAAsB,MAEtBL,KAAAM,gBAA0B,SAE1BN,KAAAO,gBAA0B,GAI1BP,KAAAQ,eAA0B,MAI1BR,KAAAS,aAAwB,MAwBxBT,KAAAU,aAAgBT,IACtBD,KAAKC,MAAQA,EACbD,KAAKW,SAASC,KAAKX,EAAM,CA2D5B,CA/EC,kBAAAY,GACE,MAAMC,EAAQd,KAAKe,GAAGC,cAAc,SACpC,GAAIF,GAASA,EAAMb,QAAUD,KAAKC,MAAOa,EAAMb,MAAQD,KAAKC,K,CAI9D,cAAMgB,GACJjB,KAAKe,GAAGC,cAAc,UAAUE,O,CAIlC,wBAAMC,GACJ,MAAMC,EAAUpB,KAAKe,GAAGC,cAAc,sDAGhCI,GAASH,a,CAQjB,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uDACTH,EAACI,EAAY,CAAAF,IAAA,2CACXG,iBAAkB,MAClBC,mBAAoB,MACpB3B,MAAOD,KAAKC,MACZC,YAAaF,KAAKE,YAClBC,UAAWH,KAAKG,UAChB0B,SAAU7B,KAAK6B,SACfC,SAAU9B,KAAKI,WACf2B,SAAU,IAAMC,UAChBC,WAAW,QACXC,cAAelC,KAAKU,aACpByB,QAAS,IAAMnC,KAAKoC,QAAQxB,OAC5ByB,UAAW,IAAML,YAElBhC,KAAKK,WACJiB,EAAA,OAAKG,MAAM,mCACTH,EAAA,cACEG,MAAM,6BACNa,YAAY,WACZC,OAAO,8BAETjB,EAAA,cAAYkB,MAAOxC,KAAKM,gBAAiBmC,KAAK,SAASC,KAAK,MAC1DpB,EAAA,sBACEqB,GAAI3C,KAAKO,iBAAmByB,UAC5BP,MAAM,4BACNmB,QAAQ,OACRC,KAAK,UACLH,KAAK,KAAI,aACG1C,KAAKM,gBACjBwC,SAAS,OACTjB,SAAU7B,KAAK+C,eACfC,SAAUhD,KAAKQ,eACfyC,YAAajD,KAAKkD,kBAClBC,SAAUnD,KAAKS,aACfL,WAAYJ,KAAKI,WACjBgD,WAAY,MACZC,UAAW,MACXC,WAAaC,IACXA,EAAMC,iBAAiB,EAEzBC,UAAYF,IACVA,EAAMC,kBACNxD,KAAK0D,eAAe9C,KAAK2C,EAAMI,OAAO,MAK5C,M","ignoreList":[]}

package/dist/components/ds-panel-tools.js

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-DcxY_pdJ.js";const p=o;const t=s;export{p as DsPanelTools,t as defineCustomElement};
+import{P as o,d as s}from"./p-D-TeAVxE.js";const t=o;const p=s;export{t as DsPanelTools,p as defineCustomElement};
 //# sourceMappingURL=ds-panel-tools.js.map

package/dist/components/ds-paper-texture.js

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-BnuNaXR2.js";const t=o;const a=s;export{t as DsPaperTexture,a as defineCustomElement};
+import{P as o,d as s}from"./p-C4t7HnfZ.js";const t=o;const n=s;export{t as DsPaperTexture,n as defineCustomElement};
 //# sourceMappingURL=ds-paper-texture.js.map

package/dist/components/ds-radio-tile.js

@@ -1,2 +1,2 @@
-import{p as i,H as e,c as o,h as r,a as t,t as d}from"./index.js";import{d as n}from"./p-D8OWhnID.js";import{D as s,s as a}from"./p-DOUk4KoT.js";import{s as c,r as l}from"./p-DGVZhrMd.js";const v=()=>`@media (forced-colors: active){.sc-ds-radio-tile:root,.sc-ds-radio-tile-h,.ds-forced-colors-scope.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill.sc-ds-radio-tile{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-radio-tile-h::before,.ds-interaction-fill.sc-ds-radio-tile::before,.ds-interaction-fill.sc-ds-radio-tile-h::after,.ds-interaction-fill.sc-ds-radio-tile::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-tile-h::before,.ds-interaction-fill.sc-ds-radio-tile::before{z-index:1}.ds-interaction-fill.sc-ds-radio-tile-h::after,.ds-interaction-fill.sc-ds-radio-tile::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-radio-tile-h,.ds-interaction-fill--bordered.sc-ds-radio-tile{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-tile-h::before,.ds-interaction-fill--selected.sc-ds-radio-tile::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-tile-h,.ds-interaction-fill--selected.sc-ds-radio-tile{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-tile-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio-tile:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-tile-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio-tile:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-radio-tile-h::after,.ds-interaction-fill--grouped.sc-ds-radio-tile::after,.ds-interaction-fill--grouped.sc-ds-radio-tile-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio-tile:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-radio-tile-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio-tile:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-radio-tile-h,.ds-interaction-fill--grouped.sc-ds-radio-tile{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-radio-tile-h>.ds-interaction-fill__content.sc-ds-radio-tile,.ds-interaction-fill.sc-ds-radio-tile>.ds-interaction-fill__content.sc-ds-radio-tile,.ds-interaction-fill__content.sc-ds-radio-tile{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-tile-h,.ds-interaction-fill--on-faint.sc-ds-radio-tile{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-tile-h,.ds-interaction-fill--on-medium.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-bold.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-strong.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-translucent.sc-ds-radio-tile{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-radio-tile-h,.ds-interaction-fill--on-inverted.sc-ds-radio-tile{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-radio-tile-h,.ds-interaction-fill--on-media.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-always-dark.sc-ds-radio-tile{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-radio-tile-h,.ds-interaction-fill--on-chrome.sc-ds-radio-tile{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-radio-tile-h,.ds-interaction-fill--on-navigation.sc-ds-radio-tile{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-radio-tile-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-radio-tile:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-radio-tile-h::after,.ds-interaction-fill.sc-ds-radio-tile::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-radio-tile-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-radio-tile:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-radio-tile-h::before,.ds-interaction-fill--selected.sc-ds-radio-tile::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-tile-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-radio-tile: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-tile:root,.sc-ds-radio-tile-h,.ds-forced-colors-scope.sc-ds-radio-tile{--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-tile-h,.ds-control-inactive.sc-ds-radio-tile{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-radio-tile-h,.ds-control-inactive.sc-ds-radio-tile{color:var(--ds-forced-color-disabled);opacity:1}}@media (forced-colors: active){.sc-ds-radio-tile:root,.sc-ds-radio-tile-h,.ds-forced-colors-scope.sc-ds-radio-tile{--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-tile-h{display:flex;flex-direction:column;gap:var(--dimension-space-100)}.radio-tiles--horizontal.sc-ds-radio-tile-h{flex-direction:row;flex-wrap:wrap}.radio-tiles--horizontal.sc-ds-radio-tile-h .radio-tile.sc-ds-radio-tile{flex-basis:var(--dimension-menu-width-xs)}.radio-tile.sc-ds-radio-tile{display:flex;position:relative;align-items:flex-start;flex:1;box-sizing:border-box;gap:var(--dimension-space-150);padding:var(--dimension-space-200);min-width:0;border-radius:var(--dimension-radius-025);background:var(--color-background-primary);cursor:pointer;user-select:none}.radio-tile__outline.sc-ds-radio-tile{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);pointer-events:none}[aria-invalid='true'].sc-ds-radio-tile-h .radio-tile__outline.sc-ds-radio-tile{box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative)}.radio-tile__input.sc-ds-radio-tile{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:inherit;z-index:3}.radio-tile__input.sc-ds-radio-tile:disabled{cursor:not-allowed}.radio-tile__input.sc-ds-radio-tile:focus-visible+.radio-tile__outline.sc-ds-radio-tile{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.radio-tile__placement.sc-ds-radio-tile{display:flex;align-items:center;justify-content:center;flex:none;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md)}.radio-tile__indicator.sc-ds-radio-tile{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-iconography-sm);height:var(--dimension-iconography-sm);border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--dimension-stroke-width-015) var(--color-foreground-tertiary)}.radio-tile--selected.sc-ds-radio-tile .radio-tile__indicator.sc-ds-radio-tile{background:var(--color-background-bold-brand);box-shadow:none}.radio-tile__indicator.sc-ds-radio-tile>span.sc-ds-radio-tile{width:var(--dimension-size-100);height:var(--dimension-size-100);border-radius:var(--dimension-radius-half);background:var(--color-foreground-on-bold-background-primary)}.radio-tile__copy.sc-ds-radio-tile{display:grid;gap:var(--dimension-space-050);min-width:0}@media (forced-colors: active){.radio-tile__outline.sc-ds-radio-tile,.radio-tile__indicator.sc-ds-radio-tile{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);box-shadow:none}.radio-tile--selected.sc-ds-radio-tile .radio-tile__indicator.sc-ds-radio-tile{background:var(--ds-forced-color-selected)}.radio-tile__indicator.sc-ds-radio-tile>span.sc-ds-radio-tile{background:var(--ds-forced-color-on-selected)}}`;let f=0;const h=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=o(this,"dsChange",7);this.internals=this.attachInternals();this.options=[];this.value="";this.disabled=false;this.isInactive=false;this.required=false;this.requiredMessage=s;this.direction="vertical";this.error=false;this.ariaLabel=null;this.formDisabled=false;this.generatedId=`ds-radio-tile-${++f}`;this.initialValue=""}get inactive(){return this.disabled||this.isInactive||this.formDisabled}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.options.some((i=>i.value===this.value&&!i.isInactive));c(this.internals,i?this.value:"",{inactive:this.inactive,state:this.value});a(this.internals,this.required&&!this.inactive&&!i,this.requiredMessage)}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=l(i)}async setFocus(){(this.el.querySelector("input:checked:not(:disabled)")??this.el.querySelector("input:not(:disabled)"))?.focus()}select(i){if(this.inactive||i===this.value)return;this.value=i;this.dsChange.emit(i)}render(){return r(t,{key:"db44b1a5bf41ad02cf1b775b1d089787ab61ed42",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":this.ariaDescribedby,"aria-required":this.required?"true":undefined,"aria-invalid":this.error?"true":undefined,class:{"radio-tiles":true,"radio-tiles--horizontal":this.direction==="horizontal"}},this.options.map(((i,e)=>{const o=i.value===this.value;const t=this.inactive||Boolean(i.isInactive);return r("label",{class:{"radio-tile":true,"radio-tile--selected":o,"ds-interaction-fill":!t,"ds-control-inactive":t},key:i.value},r("input",{type:"radio",class:"radio-tile__input",id:e===0?this.inputId:undefined,name:this.generatedId,form:"",value:i.value,checked:o,disabled:t,"aria-labelledby":`${this.generatedId}-label-${e}`,"aria-describedby":i.description?`${this.generatedId}-description-${e}`:undefined,onChange:()=>this.select(i.value)}),r("span",{class:"radio-tile__outline","aria-hidden":"true"}),r("span",{class:"radio-tile__placement ds-interaction-fill__content","aria-hidden":"true"},r("span",{class:"radio-tile__indicator"},o&&r("span",null))),r("span",{class:"radio-tile__copy ds-interaction-fill__content"},r("ds-text",{as:"span",variant:"text-body-medium",color:i.description?"primary":"secondary",emphasis:Boolean(i.description),textId:`${this.generatedId}-label-${e}`},i.label),i.description&&r("ds-text",{as:"span",variant:"text-body-medium",color:"secondary",textId:`${this.generatedId}-description-${e}`},i.description)))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],options:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],requiredMessage:[{syncFormValue:0}]}}static get style(){return v()}},[66,"ds-radio-tile",{options:[16],value:[1025],name:[513],form:[513],disabled:[516],isInactive:[4,"is-inactive"],required:[516],requiredMessage:[1,"required-message"],direction:[1],inputId:[1,"input-id"],error:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],options:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],requiredMessage:[{syncFormValue:0}]}]);function u(){if(typeof customElements==="undefined"){return}const i=["ds-radio-tile","ds-text"];i.forEach((i=>{switch(i){case"ds-radio-tile":if(!customElements.get(d(i))){customElements.define(d(i),h)}break;case"ds-text":if(!customElements.get(d(i))){n()}break}}))}u();const b=h;const p=u;export{b as DsRadioTile,p as defineCustomElement};
+import{p as i,H as e,c as o,h as r,a as t,t as d}from"./index.js";import{d as n}from"./p-BbvAWFJA.js";import{D as s,s as a}from"./p-DOUk4KoT.js";import{s as c,r as l}from"./p-DGVZhrMd.js";const v=()=>`@media (forced-colors: active){.sc-ds-radio-tile:root,.sc-ds-radio-tile-h,.ds-forced-colors-scope.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill.sc-ds-radio-tile{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-radio-tile-h::before,.ds-interaction-fill.sc-ds-radio-tile::before,.ds-interaction-fill.sc-ds-radio-tile-h::after,.ds-interaction-fill.sc-ds-radio-tile::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-tile-h::before,.ds-interaction-fill.sc-ds-radio-tile::before{z-index:1}.ds-interaction-fill.sc-ds-radio-tile-h::after,.ds-interaction-fill.sc-ds-radio-tile::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-radio-tile-h,.ds-interaction-fill--bordered.sc-ds-radio-tile{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-tile-h::before,.ds-interaction-fill--selected.sc-ds-radio-tile::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-tile-h,.ds-interaction-fill--selected.sc-ds-radio-tile{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-tile-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio-tile:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-tile-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio-tile:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-radio-tile-h::after,.ds-interaction-fill--grouped.sc-ds-radio-tile::after,.ds-interaction-fill--grouped.sc-ds-radio-tile-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio-tile:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-radio-tile-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio-tile:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-radio-tile-h,.ds-interaction-fill--grouped.sc-ds-radio-tile{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-radio-tile-h>.ds-interaction-fill__content.sc-ds-radio-tile,.ds-interaction-fill.sc-ds-radio-tile>.ds-interaction-fill__content.sc-ds-radio-tile,.ds-interaction-fill__content.sc-ds-radio-tile{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-tile-h,.ds-interaction-fill--on-faint.sc-ds-radio-tile{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-tile-h,.ds-interaction-fill--on-medium.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-bold.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-strong.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-translucent.sc-ds-radio-tile{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-radio-tile-h,.ds-interaction-fill--on-inverted.sc-ds-radio-tile{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-radio-tile-h,.ds-interaction-fill--on-media.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-always-dark.sc-ds-radio-tile{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-radio-tile-h,.ds-interaction-fill--on-chrome.sc-ds-radio-tile{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-radio-tile-h,.ds-interaction-fill--on-navigation.sc-ds-radio-tile{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-radio-tile-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-radio-tile:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-radio-tile-h::after,.ds-interaction-fill.sc-ds-radio-tile::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-radio-tile-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-radio-tile:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-radio-tile-h::before,.ds-interaction-fill--selected.sc-ds-radio-tile::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-tile-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-radio-tile: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-tile:root,.sc-ds-radio-tile-h,.ds-forced-colors-scope.sc-ds-radio-tile{--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-tile-h,.ds-control-inactive.sc-ds-radio-tile{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-radio-tile-h,.ds-control-inactive.sc-ds-radio-tile{color:var(--ds-forced-color-disabled);opacity:1}}@media (forced-colors: active){.sc-ds-radio-tile:root,.sc-ds-radio-tile-h,.ds-forced-colors-scope.sc-ds-radio-tile{--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-tile-h{display:flex;flex-direction:column;gap:var(--dimension-space-100)}.radio-tiles--horizontal.sc-ds-radio-tile-h{flex-direction:row;flex-wrap:wrap}.radio-tiles--horizontal.sc-ds-radio-tile-h .radio-tile.sc-ds-radio-tile{flex-basis:var(--dimension-menu-width-xs)}.radio-tile.sc-ds-radio-tile{display:flex;position:relative;align-items:flex-start;flex:1;box-sizing:border-box;gap:var(--dimension-space-150);padding:var(--dimension-space-200);min-width:0;border-radius:var(--dimension-radius-025);background:var(--color-background-primary);cursor:pointer;user-select:none}.radio-tile__outline.sc-ds-radio-tile{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);pointer-events:none}[aria-invalid='true'].sc-ds-radio-tile-h .radio-tile__outline.sc-ds-radio-tile{box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative)}.radio-tile__input.sc-ds-radio-tile{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:inherit;z-index:3}.radio-tile__input.sc-ds-radio-tile:disabled{cursor:not-allowed}.radio-tile__input.sc-ds-radio-tile:focus-visible+.radio-tile__outline.sc-ds-radio-tile{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.radio-tile__placement.sc-ds-radio-tile{display:flex;align-items:center;justify-content:center;flex:none;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md)}.radio-tile__indicator.sc-ds-radio-tile{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-iconography-sm);height:var(--dimension-iconography-sm);border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--dimension-stroke-width-015) var(--color-foreground-tertiary)}.radio-tile--selected.sc-ds-radio-tile .radio-tile__indicator.sc-ds-radio-tile{background:var(--color-background-bold-brand);box-shadow:none}.radio-tile__indicator.sc-ds-radio-tile>span.sc-ds-radio-tile{width:var(--dimension-size-100);height:var(--dimension-size-100);border-radius:var(--dimension-radius-half);background:var(--color-foreground-on-bold-background-primary)}.radio-tile__copy.sc-ds-radio-tile{display:grid;gap:var(--dimension-space-050);min-width:0}@media (forced-colors: active){.radio-tile__outline.sc-ds-radio-tile,.radio-tile__indicator.sc-ds-radio-tile{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);box-shadow:none}.radio-tile--selected.sc-ds-radio-tile .radio-tile__indicator.sc-ds-radio-tile{background:var(--ds-forced-color-selected)}.radio-tile__indicator.sc-ds-radio-tile>span.sc-ds-radio-tile{background:var(--ds-forced-color-on-selected)}}`;let f=0;const h=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=o(this,"dsChange",7);this.internals=this.attachInternals();this.options=[];this.value="";this.disabled=false;this.isInactive=false;this.required=false;this.requiredMessage=s;this.direction="vertical";this.error=false;this.ariaLabel=null;this.formDisabled=false;this.generatedId=`ds-radio-tile-${++f}`;this.initialValue=""}get inactive(){return this.disabled||this.isInactive||this.formDisabled}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.options.some((i=>i.value===this.value&&!i.isInactive));c(this.internals,i?this.value:"",{inactive:this.inactive,state:this.value});a(this.internals,this.required&&!this.inactive&&!i,this.requiredMessage)}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=l(i)}async setFocus(){(this.el.querySelector("input:checked:not(:disabled)")??this.el.querySelector("input:not(:disabled)"))?.focus()}select(i){if(this.inactive||i===this.value)return;this.value=i;this.dsChange.emit(i)}render(){return r(t,{key:"db44b1a5bf41ad02cf1b775b1d089787ab61ed42",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":this.ariaDescribedby,"aria-required":this.required?"true":undefined,"aria-invalid":this.error?"true":undefined,class:{"radio-tiles":true,"radio-tiles--horizontal":this.direction==="horizontal"}},this.options.map(((i,e)=>{const o=i.value===this.value;const t=this.inactive||Boolean(i.isInactive);return r("label",{class:{"radio-tile":true,"radio-tile--selected":o,"ds-interaction-fill":!t,"ds-control-inactive":t},key:i.value},r("input",{type:"radio",class:"radio-tile__input",id:e===0?this.inputId:undefined,name:this.generatedId,form:"",value:i.value,checked:o,disabled:t,"aria-labelledby":`${this.generatedId}-label-${e}`,"aria-describedby":i.description?`${this.generatedId}-description-${e}`:undefined,onChange:()=>this.select(i.value)}),r("span",{class:"radio-tile__outline","aria-hidden":"true"}),r("span",{class:"radio-tile__placement ds-interaction-fill__content","aria-hidden":"true"},r("span",{class:"radio-tile__indicator"},o&&r("span",null))),r("span",{class:"radio-tile__copy ds-interaction-fill__content"},r("ds-text",{as:"span",variant:"text-body-medium",color:i.description?"primary":"secondary",emphasis:Boolean(i.description),textId:`${this.generatedId}-label-${e}`},i.label),i.description&&r("ds-text",{as:"span",variant:"text-body-medium",color:"secondary",textId:`${this.generatedId}-description-${e}`},i.description)))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],options:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],requiredMessage:[{syncFormValue:0}]}}static get style(){return v()}},[66,"ds-radio-tile",{options:[16],value:[1025],name:[513],form:[513],disabled:[516],isInactive:[4,"is-inactive"],required:[516],requiredMessage:[1,"required-message"],direction:[1],inputId:[1,"input-id"],error:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],options:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],requiredMessage:[{syncFormValue:0}]}]);function u(){if(typeof customElements==="undefined"){return}const i=["ds-radio-tile","ds-text"];i.forEach((i=>{switch(i){case"ds-radio-tile":if(!customElements.get(d(i))){customElements.define(d(i),h)}break;case"ds-text":if(!customElements.get(d(i))){n()}break}}))}u();const b=h;const p=u;export{b as DsRadioTile,p as defineCustomElement};
 //# sourceMappingURL=ds-radio-tile.js.map

package/dist/components/ds-radio.js

@@ -1,2 +1,2 @@
-import{R as o,d as s}from"./p-C1ZfBbJ_.js";const t=o;const p=s;export{t as DsRadio,p as defineCustomElement};
+import{R as o,d as s}from"./p-C7_awFtr.js";const t=o;const r=s;export{t as DsRadio,r as defineCustomElement};
 //# sourceMappingURL=ds-radio.js.map

package/dist/components/ds-score.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-UJMEz8_O.js";const t=o;const p=s;export{t as DsScore,p as defineCustomElement};
+import{S as o,d as s}from"./p-3SCy1PHa.js";const t=o;const a=s;export{t as DsScore,a as defineCustomElement};
 //# sourceMappingURL=ds-score.js.map

package/dist/components/ds-select-toggle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsSelectToggle extends Components.DsSelectToggle, HTMLElement {}
+export const DsSelectToggle: {
+    prototype: DsSelectToggle;
+    new (): DsSelectToggle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-select-toggle.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,c as o,h as s,a as i,t as n}from"./index.js";import{o as r}from"./p-Dkh_40bl.js";import{d as c}from"./p-BVsVUnAw.js";import{d}from"./p-BbvAWFJA.js";import{C as l}from"./p-CuwopElg.js";import{c as a}from"./p-DuFm-ieS.js";const g=()=>`.sc-ds-select-toggle-h,.sc-ds-select-toggle:where(.ds-table),.sc-ds-select-toggle:where(.tooltip-popup),.sc-ds-select-toggle:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-select-toggle,.ds-control--lg.sc-ds-select-toggle-h,.ds-control--md.sc-ds-select-toggle-h,.ds-control--md.sc-ds-select-toggle,.ds-control--sm.sc-ds-select-toggle-h,.ds-control--sm.sc-ds-select-toggle,.ds-control--xs.sc-ds-select-toggle-h,.ds-control--xs.sc-ds-select-toggle{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-select-toggle-h,.ds-control--lg.sc-ds-select-toggle{--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-toggle-h,.ds-control--md.sc-ds-select-toggle{--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-toggle-h,.ds-control--sm.sc-ds-select-toggle{--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-toggle-h,.ds-control--xs.sc-ds-select-toggle{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-select-toggle{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-select-toggle{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-select-toggle{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-toggle{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-select-toggle{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-select-toggle{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-select-toggle-h,.ds-control-width--hug.sc-ds-select-toggle{width:fit-content;max-width:100%;flex:0 0 auto}.ds-control-width--fill.sc-ds-select-toggle-h,.ds-control-width--fill.sc-ds-select-toggle{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}@media (forced-colors: active){.sc-ds-select-toggle:root,.sc-ds-select-toggle-h,.ds-forced-colors-scope.sc-ds-select-toggle{--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-toggle-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-toggle-h,.ds-focus-ring.sc-ds-select-toggle,.ds-focus-ring-inset.sc-ds-select-toggle-h,.ds-focus-ring-inset.sc-ds-select-toggle{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-select-toggle-h:focus-visible,.ds-focus-ring.sc-ds-select-toggle: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-toggle-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-select-toggle{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-toggle-h:focus-visible,.ds-focus-ring-inset.sc-ds-select-toggle:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select-toggle-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-select-toggle: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-toggle-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-toggle{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-toggle-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-toggle::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-toggle-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-select-toggle:root,.sc-ds-select-toggle-h,.ds-forced-colors-scope.sc-ds-select-toggle{--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-toggle-h,.ds-interaction-fill.sc-ds-select-toggle{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-select-toggle-h::before,.ds-interaction-fill.sc-ds-select-toggle::before,.ds-interaction-fill.sc-ds-select-toggle-h::after,.ds-interaction-fill.sc-ds-select-toggle::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-select-toggle-h::before,.ds-interaction-fill.sc-ds-select-toggle::before{z-index:1}.ds-interaction-fill.sc-ds-select-toggle-h::after,.ds-interaction-fill.sc-ds-select-toggle::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-toggle-h,.ds-interaction-fill--bordered.sc-ds-select-toggle{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-toggle-h::before,.ds-interaction-fill--selected.sc-ds-select-toggle::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-toggle-h,.ds-interaction-fill--selected.sc-ds-select-toggle{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-select-toggle-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select-toggle:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-select-toggle-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select-toggle:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-select-toggle-h::after,.ds-interaction-fill--grouped.sc-ds-select-toggle::after,.ds-interaction-fill--grouped.sc-ds-select-toggle-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-select-toggle:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-select-toggle-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-select-toggle:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-select-toggle-h,.ds-interaction-fill--grouped.sc-ds-select-toggle{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-select-toggle-h>.ds-interaction-fill__content.sc-ds-select-toggle,.ds-interaction-fill.sc-ds-select-toggle>.ds-interaction-fill__content.sc-ds-select-toggle,.ds-interaction-fill__content.sc-ds-select-toggle{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-select-toggle-h,.ds-interaction-fill--on-faint.sc-ds-select-toggle{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-select-toggle-h,.ds-interaction-fill--on-medium.sc-ds-select-toggle{--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-toggle-h,.ds-interaction-fill--on-bold.sc-ds-select-toggle{--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-toggle-h,.ds-interaction-fill--on-strong.sc-ds-select-toggle{--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-toggle-h,.ds-interaction-fill--on-translucent.sc-ds-select-toggle{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-select-toggle-h,.ds-interaction-fill--on-inverted.sc-ds-select-toggle{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-select-toggle-h,.ds-interaction-fill--on-media.sc-ds-select-toggle{--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-toggle-h,.ds-interaction-fill--on-always-dark.sc-ds-select-toggle{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-select-toggle-h,.ds-interaction-fill--on-chrome.sc-ds-select-toggle{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-toggle-h,.ds-interaction-fill--on-navigation.sc-ds-select-toggle{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-select-toggle-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-select-toggle:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-select-toggle-h::after,.ds-interaction-fill.sc-ds-select-toggle::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-select-toggle-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-select-toggle:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-select-toggle-h::before,.ds-interaction-fill--selected.sc-ds-select-toggle::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-toggle-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-select-toggle: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-toggle:root,.sc-ds-select-toggle-h,.ds-forced-colors-scope.sc-ds-select-toggle{--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-toggle-h,.ds-control-inactive.sc-ds-select-toggle{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-select-toggle-h,.ds-control-inactive.sc-ds-select-toggle{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-select-toggle-h{display:inline-flex;min-inline-size:0;--_select-toggle-dot-position:var(--dimension-size-050);--_select-toggle-dot-idle:var(--dimension-space-025);--_select-toggle-dot-active:var(--_select-toggle-dot-idle);--_select-toggle-dot-gap:var(--dimension-space-012)}.ds-control--sm.sc-ds-select-toggle-h{--_select-toggle-dot-position:calc(var(--dimension-size-050) * 3 / 4);--_select-toggle-dot-idle:var(--dimension-space-012)}.ds-control--lg.sc-ds-select-toggle-h{--_select-toggle-dot-position:calc(var(--dimension-size-050) * 5 / 4);--_select-toggle-dot-idle:calc(var(--dimension-size-050) * 3 / 4);--_select-toggle-dot-gap:var(--dimension-space-025)}.ds-control-width--fill.sc-ds-select-toggle-h{display:flex;width:100%}.trigger.sc-ds-select-toggle{appearance:none;min-inline-size:0;max-inline-size:100%;justify-content:space-between;background:var(--color-background-transparent);border:0;color:var(--color-foreground-secondary);font-family:inherit;-webkit-user-select:none;user-select:none}.trigger--bordered.sc-ds-select-toggle{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-control-width--fill.sc-ds-select-toggle-h .trigger.sc-ds-select-toggle{width:100%}.trigger__content.sc-ds-select-toggle{display:inline-flex;align-items:center;flex:1 1 auto;gap:var(--ds-control-gap);min-width:0;overflow:hidden}.trigger__label.sc-ds-select-toggle{min-width:0;overflow:hidden;text-align:left}.trigger__indicator.sc-ds-select-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 calc(var(--ds-control-icon) - var(--dimension-size-100));width:calc(var(--ds-control-icon) - var(--dimension-size-100));height:var(--ds-control-icon);gap:var(--_select-toggle-dot-gap)}.trigger__dot-position.sc-ds-select-toggle{display:grid;place-items:center;flex:0 0 var(--_select-toggle-dot-position);width:var(--_select-toggle-dot-position);height:var(--_select-toggle-dot-position)}.trigger__dot.sc-ds-select-toggle{width:var(--_select-toggle-dot-idle);height:var(--_select-toggle-dot-idle);border-radius:var(--dimension-radius-half);background:var(--color-foreground-quaternary)}.trigger__dot--active.sc-ds-select-toggle{width:var(--_select-toggle-dot-active);height:var(--_select-toggle-dot-active);background:var(--color-foreground-secondary)}@media (forced-colors: active){.trigger.sc-ds-select-toggle{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.trigger__dot.sc-ds-select-toggle{background:var(--ds-forced-color-content)}.trigger__dot--active.sc-ds-select-toggle{background:var(--ds-forced-color-selected)}}`;const f=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange",7);this.options=[];this.value="";this.variant="label";this.collapseLabel=false;this.size="md";this.width="hug";this.hasBorder=true;this.isInactive=false;this.ariaLabel=null;this.captionCompact=false;this.hasLoaded=false;this.advance=()=>{const e=this.validOptions;if(this.isInactive||!e.length)return;const t=Math.max(0,e.findIndex((e=>e.value===this.value)));const o=e[(t+1)%e.length];this.value=o.value;this.dsChange.emit(o.value)}}componentWillLoad(){this.reconcileValue()}componentDidLoad(){this.hasLoaded=true;this.syncCaptionCompactObserver()}connectedCallback(){if(this.hasLoaded)this.syncCaptionCompactObserver()}disconnectedCallback(){this.disconnectCaptionCompactObserver()}onCollapseLabelChange(){this.syncCaptionCompactObserver()}reconcileValue(){const e=this.validOptions;if(e.length&&!e.some((e=>e.value===this.value))){this.value=e[0].value}}get validOptions(){if(this.options.length<2||this.options.length>3)return[];if(this.options.some((e=>!e.value||!e.label))||new Set(this.options.map((e=>e.value))).size!==this.options.length){return[]}return this.options}syncCaptionCompactObserver(){this.disconnectCaptionCompactObserver();if(!this.collapseLabel){if(this.captionCompact)this.captionCompact=false;return}this.captionCompactDisconnect=r(this.el,(e=>{if(this.captionCompact!==e)this.captionCompact=e}))}disconnectCaptionCompactObserver(){this.captionCompactDisconnect?.();this.captionCompactDisconnect=undefined}render(){const e=this.validOptions;const t=Math.max(0,e.findIndex((e=>e.value===this.value)));const o=e[t];const n=e[(t+1)%e.length];const r=this.variant!=="label";const c=this.variant!=="icon"&&!(this.collapseLabel&&this.captionCompact&&this.variant==="icon-label"&&o?.icon);const d=o?`${this.ariaLabel?`${this.ariaLabel}: `:""}${o.label}, ${t+1} of ${e.length}. Next: ${n.label}`:undefined;return s(i,{key:"755d3fe95713a3ea4cc8f2fe5116bbeff596f8bc",class:{[`ds-control--${this.size}`]:true,...a(this.width)}},o&&s("button",{key:"848bf79e37b91387a0e1d0229bcc8b578c7e3a4d",type:"button",class:{trigger:true,"ds-control-frame":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-control-inactive":this.isInactive,"trigger--bordered":this.hasBorder},"aria-label":d,disabled:this.isInactive,onClick:this.advance},s("span",{key:"085c1c5ca34a9d548a9d329f41847bc1a5303f48",class:"trigger__content ds-interaction-fill__content"},r&&o.icon&&s("span",{key:"fbedda6f065d47d6593072a378901b9bc9823375",class:"trigger__icon ds-control-icon-box","aria-hidden":"true"},s("ds-icon",{key:"f644ce871e2a9fa12fed6d4329f0d0b6be081101",name:o.icon,size:this.size,color:"inherit"})),c&&s("ds-text",{key:"7df459fce692cc75a6182a799727bbeaac9631a3",class:"trigger__label ds-control-label-box",as:"span",variant:l[this.size],color:"inherit",lineTruncation:1},o.label)),s("span",{key:"57c0d17cf64fa2c3e984623c2f96cf33ac50c69d",class:"trigger__indicator ds-interaction-fill__content","aria-hidden":"true"},e.map(((e,o)=>s("span",{key:e.value,class:"trigger__dot-position"},s("span",{class:{trigger__dot:true,"trigger__dot--active":o===t}})))))))}get el(){return this}static get watchers(){return{collapseLabel:[{onCollapseLabelChange:0}],options:[{reconcileValue:0}],value:[{reconcileValue:0}]}}static get style(){return g()}},[2,"ds-select-toggle",{options:[16],value:[1025],variant:[1],collapseLabel:[516,"collapse-label"],size:[1],width:[1],hasBorder:[4,"has-border"],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],captionCompact:[32]},undefined,{collapseLabel:[{onCollapseLabelChange:0}],options:[{reconcileValue:0}],value:[{reconcileValue:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-select-toggle","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-select-toggle":if(!customElements.get(n(e))){customElements.define(n(e),f)}break;case"ds-icon":if(!customElements.get(n(e))){c()}break;case"ds-text":if(!customElements.get(n(e))){d()}break}}))}v();const h=f;const u=v;export{h as DsSelectToggle,u as defineCustomElement};
+//# sourceMappingURL=ds-select-toggle.js.map

package/dist/components/ds-select-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["selectToggleCss","SelectToggle","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","variant","collapseLabel","size","width","hasBorder","isInactive","ariaLabel","captionCompact","hasLoaded","advance","choices","validOptions","length","current","Math","max","findIndex","option","next","dsChange","emit","componentWillLoad","reconcileValue","componentDidLoad","syncCaptionCompactObserver","connectedCallback","disconnectedCallback","disconnectCaptionCompactObserver","onCollapseLabelChange","some","label","Set","map","captionCompactDisconnect","observeTableCaptionCompact","el","compact","undefined","render","activeIndex","active","showIcon","showLabel","icon","accessibleName","h","Host","key","class","controlWidthClass","type","trigger","disabled","onClick","name","color","as","CONTROL_TEXT_VARIANT","lineTruncation","index","trigger__dot"],"sources":["src/wc/components/SelectToggle/SelectToggle.css?tag=ds-select-toggle&encapsulation=scoped","src/wc/components/SelectToggle/SelectToggle.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: inline-flex;\n  min-inline-size: 0;\n  --_select-toggle-dot-position: var(--dimension-size-050);\n  --_select-toggle-dot-idle: var(--dimension-space-025);\n  --_select-toggle-dot-active: var(--_select-toggle-dot-idle);\n  --_select-toggle-dot-gap: var(--dimension-space-012);\n}\n\n:host(.ds-control--sm) {\n  --_select-toggle-dot-position: calc(var(--dimension-size-050) * 3 / 4);\n  --_select-toggle-dot-idle: var(--dimension-space-012);\n}\n\n:host(.ds-control--lg) {\n  --_select-toggle-dot-position: calc(var(--dimension-size-050) * 5 / 4);\n  --_select-toggle-dot-idle: calc(var(--dimension-size-050) * 3 / 4);\n  --_select-toggle-dot-gap: var(--dimension-space-025);\n}\n\n:host(.ds-control-width--fill) {\n  display: flex;\n  width: 100%;\n}\n\n.trigger {\n  appearance: none;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  justify-content: space-between;\n  background: var(--color-background-transparent);\n  border: 0;\n  color: var(--color-foreground-secondary);\n  font-family: inherit;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.trigger--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n:host(.ds-control-width--fill) .trigger {\n  width: 100%;\n}\n\n.trigger__content {\n  display: inline-flex;\n  align-items: center;\n  flex: 1 1 auto;\n  gap: var(--ds-control-gap);\n  min-width: 0;\n  overflow: hidden;\n}\n\n.trigger__label {\n  min-width: 0;\n  overflow: hidden;\n  text-align: left;\n}\n\n.trigger__indicator {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 calc(var(--ds-control-icon) - var(--dimension-size-100));\n  width: calc(var(--ds-control-icon) - var(--dimension-size-100));\n  height: var(--ds-control-icon);\n  gap: var(--_select-toggle-dot-gap);\n}\n\n.trigger__dot-position {\n  display: grid;\n  place-items: center;\n  flex: 0 0 var(--_select-toggle-dot-position);\n  width: var(--_select-toggle-dot-position);\n  height: var(--_select-toggle-dot-position);\n}\n\n.trigger__dot {\n  width: var(--_select-toggle-dot-idle);\n  height: var(--_select-toggle-dot-idle);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-foreground-quaternary);\n}\n\n.trigger__dot--active {\n  width: var(--_select-toggle-dot-active);\n  height: var(--_select-toggle-dot-active);\n  background: var(--color-foreground-secondary);\n}\n\n@media (forced-colors: active) {\n  .trigger {\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  .trigger__dot {\n    background: var(--ds-forced-color-content);\n  }\n\n  .trigger__dot--active {\n    background: var(--ds-forced-color-selected);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\n\nexport interface SelectToggleOption {\n  value: string;\n  label: string;\n  icon?: string;\n}\n\nexport type SelectToggleVariant = 'label' | 'icon' | 'icon-label';\nexport type SelectToggleSize = 'sm' | 'md' | 'lg';\n\n@Component({ tag: 'ds-select-toggle', styleUrl: 'SelectToggle.css', scoped: true })\nexport class SelectToggle {\n  @Element() el!: HTMLElement;\n\n  /** Exactly two or three choices, each with a unique value and accessible label. */\n  @Prop() options: SelectToggleOption[] = [];\n\n  /** Current choice. User activation updates this value and emits dsChange. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /** Show the current label, icon, or both. Icon variants require an icon on each choice. */\n  @Prop() variant: SelectToggleVariant = 'label';\n\n  /** Collapse an icon-label choice to its icon in a narrow table caption or data toolbar. */\n  @Prop({ reflect: true }) collapseLabel: boolean = false;\n\n  /** Control density: small, medium, or large; the trailing indicator scales with it. */\n  @Prop() size: SelectToggleSize = 'md';\n\n  /** Hug the content or fill the parent. */\n  @Prop() width: ControlWidth = 'hug';\n\n  /** Show an inset border; both treatments keep the transparent unfilled surface. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Prevent interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Optional stable context prepended to the changing accessible choice name. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private captionCompact = false;\n\n  private captionCompactDisconnect: (() => void) | undefined;\n  private hasLoaded = false;\n\n  componentWillLoad() {\n    this.reconcileValue();\n  }\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.syncCaptionCompactObserver();\n  }\n\n  connectedCallback(): void {\n    if (this.hasLoaded) this.syncCaptionCompactObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.disconnectCaptionCompactObserver();\n  }\n\n  @Watch('collapseLabel')\n  onCollapseLabelChange(): void {\n    this.syncCaptionCompactObserver();\n  }\n\n  @Watch('options')\n  @Watch('value')\n  reconcileValue() {\n    const choices = this.validOptions;\n    if (choices.length && !choices.some(option => option.value === this.value)) {\n      this.value = choices[0].value;\n    }\n  }\n\n  private get validOptions(): SelectToggleOption[] {\n    if (this.options.length < 2 || this.options.length > 3) return [];\n    if (\n      this.options.some(option => !option.value || !option.label) ||\n      new Set(this.options.map(option => option.value)).size !== this.options.length\n    ) {\n      return [];\n    }\n    return this.options;\n  }\n\n  private advance = () => {\n    const choices = this.validOptions;\n    if (this.isInactive || !choices.length) return;\n    const current = Math.max(\n      0,\n      choices.findIndex(option => option.value === this.value)\n    );\n    const next = choices[(current + 1) % choices.length];\n    this.value = next.value;\n    this.dsChange.emit(next.value);\n  };\n\n  private syncCaptionCompactObserver(): void {\n    this.disconnectCaptionCompactObserver();\n    if (!this.collapseLabel) {\n      if (this.captionCompact) this.captionCompact = false;\n      return;\n    }\n    this.captionCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n      if (this.captionCompact !== compact) this.captionCompact = compact;\n    });\n  }\n\n  private disconnectCaptionCompactObserver(): void {\n    this.captionCompactDisconnect?.();\n    this.captionCompactDisconnect = undefined;\n  }\n\n  render() {\n    const choices = this.validOptions;\n    const activeIndex = Math.max(\n      0,\n      choices.findIndex(option => option.value === this.value)\n    );\n    const active = choices[activeIndex];\n    const next = choices[(activeIndex + 1) % choices.length];\n    const showIcon = this.variant !== 'label';\n    const showLabel =\n      this.variant !== 'icon' &&\n      !(this.collapseLabel && this.captionCompact && this.variant === 'icon-label' && active?.icon);\n    const accessibleName = active\n      ? `${this.ariaLabel ? `${this.ariaLabel}: ` : ''}${active.label}, ${activeIndex + 1} of ${choices.length}. Next: ${next.label}`\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n      >\n        {active && (\n          <button\n            type=\"button\"\n            class={{\n              trigger: true,\n              'ds-control-frame': true,\n              'ds-focus-ring-inset': true,\n              'ds-interaction-fill': true,\n              'ds-control-inactive': this.isInactive,\n              'trigger--bordered': this.hasBorder,\n            }}\n            aria-label={accessibleName}\n            disabled={this.isInactive}\n            onClick={this.advance}\n          >\n            <span class=\"trigger__content ds-interaction-fill__content\">\n              {showIcon && active.icon && (\n                <span class=\"trigger__icon ds-control-icon-box\" aria-hidden=\"true\">\n                  <ds-icon name={active.icon} size={this.size} color=\"inherit\" />\n                </span>\n              )}\n              {showLabel && (\n                <ds-text\n                  class=\"trigger__label ds-control-label-box\"\n                  as=\"span\"\n                  variant={CONTROL_TEXT_VARIANT[this.size]}\n                  color=\"inherit\"\n                  lineTruncation={1}\n                >\n                  {active.label}\n                </ds-text>\n              )}\n            </span>\n            <span class=\"trigger__indicator ds-interaction-fill__content\" aria-hidden=\"true\">\n              {choices.map((option, index) => (\n                <span key={option.value} class=\"trigger__dot-position\">\n                  <span\n                    class={{\n                      trigger__dot: true,\n                      'trigger__dot--active': index === activeIndex,\n                    }}\n                  />\n                </span>\n              ))}\n            </span>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"iPAAA,MAAMA,EAAkB,IAAM,wwlB,MCwBjBC,EAAYC,EAAA,MAAAD,UAAAE,EADzB,WAAAC,CAAAC,G,+EAKUC,KAAAC,QAAgC,GAGfD,KAAAE,MAAgB,GAGjCF,KAAAG,QAA+B,QAGdH,KAAAI,cAAyB,MAG1CJ,KAAAK,KAAyB,KAGzBL,KAAAM,MAAsB,MAGtBN,KAAAO,UAAqB,KAGrBP,KAAAQ,WAAsB,MAGKR,KAAAS,UAA2B,KAI7CT,KAAAU,eAAiB,MAG1BV,KAAAW,UAAY,MA4CZX,KAAAY,QAAU,KAChB,MAAMC,EAAUb,KAAKc,aACrB,GAAId,KAAKQ,aAAeK,EAAQE,OAAQ,OACxC,MAAMC,EAAUC,KAAKC,IACnB,EACAL,EAAQM,WAAUC,GAAUA,EAAOlB,QAAUF,KAAKE,SAEpD,MAAMmB,EAAOR,GAASG,EAAU,GAAKH,EAAQE,QAC7Cf,KAAKE,MAAQmB,EAAKnB,MAClBF,KAAKsB,SAASC,KAAKF,EAAKnB,MAAM,CA4FjC,CA/IC,iBAAAsB,GACExB,KAAKyB,gB,CAGP,gBAAAC,GACE1B,KAAKW,UAAY,KACjBX,KAAK2B,4B,CAGP,iBAAAC,GACE,GAAI5B,KAAKW,UAAWX,KAAK2B,4B,CAG3B,oBAAAE,GACE7B,KAAK8B,kC,CAIP,qBAAAC,GACE/B,KAAK2B,4B,CAKP,cAAAF,GACE,MAAMZ,EAAUb,KAAKc,aACrB,GAAID,EAAQE,SAAWF,EAAQmB,MAAKZ,GAAUA,EAAOlB,QAAUF,KAAKE,QAAQ,CAC1EF,KAAKE,MAAQW,EAAQ,GAAGX,K,EAI5B,gBAAYY,GACV,GAAId,KAAKC,QAAQc,OAAS,GAAKf,KAAKC,QAAQc,OAAS,EAAG,MAAO,GAC/D,GACEf,KAAKC,QAAQ+B,MAAKZ,IAAWA,EAAOlB,QAAUkB,EAAOa,SACrD,IAAIC,IAAIlC,KAAKC,QAAQkC,KAAIf,GAAUA,EAAOlB,SAAQG,OAASL,KAAKC,QAAQc,OACxE,CACA,MAAO,E,CAET,OAAOf,KAAKC,O,CAeN,0BAAA0B,GACN3B,KAAK8B,mCACL,IAAK9B,KAAKI,cAAe,CACvB,GAAIJ,KAAKU,eAAgBV,KAAKU,eAAiB,MAC/C,M,CAEFV,KAAKoC,yBAA2BC,EAA2BrC,KAAKsC,IAAIC,IAClE,GAAIvC,KAAKU,iBAAmB6B,EAASvC,KAAKU,eAAiB6B,CAAO,G,CAI9D,gCAAAT,GACN9B,KAAKoC,6BACLpC,KAAKoC,yBAA2BI,S,CAGlC,MAAAC,GACE,MAAM5B,EAAUb,KAAKc,aACrB,MAAM4B,EAAczB,KAAKC,IACvB,EACAL,EAAQM,WAAUC,GAAUA,EAAOlB,QAAUF,KAAKE,SAEpD,MAAMyC,EAAS9B,EAAQ6B,GACvB,MAAMrB,EAAOR,GAAS6B,EAAc,GAAK7B,EAAQE,QACjD,MAAM6B,EAAW5C,KAAKG,UAAY,QAClC,MAAM0C,EACJ7C,KAAKG,UAAY,UACfH,KAAKI,eAAiBJ,KAAKU,gBAAkBV,KAAKG,UAAY,cAAgBwC,GAAQG,MAC1F,MAAMC,EAAiBJ,EACnB,GAAG3C,KAAKS,UAAY,GAAGT,KAAKS,cAAgB,KAAKkC,EAAOV,UAAUS,EAAc,QAAQ7B,EAAQE,iBAAiBM,EAAKY,QACtHO,UAEJ,OACEQ,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,CAAC,eAAenD,KAAKK,QAAS,QAC3B+C,EAAkBpD,KAAKM,SAG3BqC,GACCK,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLF,MAAO,CACLG,QAAS,KACT,mBAAoB,KACpB,sBAAuB,KACvB,sBAAuB,KACvB,sBAAuBtD,KAAKQ,WAC5B,oBAAqBR,KAAKO,WAC3B,aACWwC,EACZQ,SAAUvD,KAAKQ,WACfgD,QAASxD,KAAKY,SAEdoC,EAAA,QAAAE,IAAA,2CAAMC,MAAM,iDACTP,GAAYD,EAAOG,MAClBE,EAAA,QAAAE,IAAA,2CAAMC,MAAM,oCAAmC,cAAa,QAC1DH,EAAA,WAAAE,IAAA,2CAASO,KAAMd,EAAOG,KAAMzC,KAAML,KAAKK,KAAMqD,MAAM,aAGtDb,GACCG,EAAA,WAAAE,IAAA,2CACEC,MAAM,sCACNQ,GAAG,OACHxD,QAASyD,EAAqB5D,KAAKK,MACnCqD,MAAM,UACNG,eAAgB,GAEflB,EAAOV,QAIde,EAAA,QAAAE,IAAA,2CAAMC,MAAM,kDAAiD,cAAa,QACvEtC,EAAQsB,KAAI,CAACf,EAAQ0C,IACpBd,EAAA,QAAME,IAAK9B,EAAOlB,MAAOiD,MAAM,yBAC7BH,EAAA,QACEG,MAAO,CACLY,aAAc,KACd,uBAAwBD,IAAUpB,U","ignoreList":[]}

package/dist/components/ds-select.js

@@ -1,2 +1,2 @@
-import{S as s,d as o}from"./p-CElsKlxj.js";const t=s;const p=o;export{t as DsSelect,p as defineCustomElement};
+import{S as o,d as s}from"./p-CJSIvfpo.js";const p=o;const t=s;export{p as DsSelect,t as defineCustomElement};
 //# sourceMappingURL=ds-select.js.map

package/dist/components/ds-setting-row-checkbox.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as t,a as i,t as o}from"./index.js";import{d as c}from"./p-D8OWhnID.js";import{C as n,a as d}from"./p-CuwopElg.js";const r=()=>`.sc-ds-setting-row-checkbox-h{box-sizing:border-box;min-width:0;padding-block:var(--dimension-space-100);padding-inline:var(--dimension-space-200);--ds-settings-row-control-padding-inline:0px}.sc-ds-setting-row-checkbox-h{display:flex;flex-direction:column;min-width:0;gap:var(--dimension-space-050);overflow-wrap:anywhere;padding-block:0}.sc-ds-setting-row-checkbox-h.sc-ds-setting-row-checkbox-s>ds-checkbox-group,.sc-ds-setting-row-checkbox-h .sc-ds-setting-row-checkbox-s>ds-checkbox-group{min-width:0;width:100%}.sc-ds-setting-row-checkbox-h[presentation='view'].sc-ds-setting-row-checkbox-s>ds-checkbox-group,.sc-ds-setting-row-checkbox-h[presentation='view'] .sc-ds-setting-row-checkbox-s>ds-checkbox-group{display:none !important}[presentation='edit'].sc-ds-setting-row-checkbox-h .setting-row-checkbox__choice.sc-ds-setting-row-checkbox{display:none}ds-text.setting-row-checkbox__heading.sc-ds-setting-row-checkbox{display:flex;align-items:center;box-sizing:border-box;height:var(--dimension-size-400);min-width:0;padding:0}.setting-row-checkbox__choice.sc-ds-setting-row-checkbox{display:grid;gap:var(--dimension-space-025);min-width:0;padding-block:var(--dimension-space-075)}`;let a=0;const h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.presentation="edit";this.headingId=`ds-setting-row-checkbox-heading-${++a}`;this.syncSlottedCheckboxGroup=()=>{for(const e of this.el.querySelectorAll("ds-checkbox-group")){e.label="";if(this.label){e.ariaLabelledby=this.headingId;e.ariaLabel=null}}}}componentWillLoad(){this.syncSlottedCheckboxGroup()}componentDidLoad(){this.syncSlottedCheckboxGroup()}render(){return t(i,{key:"df42f02c943a45f88c52b74dc2c573a9a35248c3"},t("ds-text",{key:"setting-row-checkbox-heading",class:"setting-row-checkbox__heading",as:"span",variant:n.md,emphasis:true,textId:this.label?this.headingId:undefined},this.label),t("div",{key:"setting-row-checkbox-choice",class:"setting-row-checkbox__choice"},this.valueLabel?t("ds-text",{key:"setting-row-checkbox-value",as:"span",variant:n.md},this.valueLabel):null,this.description?.trim()?t("ds-text",{key:"setting-row-checkbox-description",as:"span",variant:d.md,color:"secondary"},this.description):null),t("slot",{key:"7db43063c77f7ca253f9ed623c9edf16bfc41918",onSlotchange:this.syncSlottedCheckboxGroup}))}get el(){return this}static get style(){return r()}},[262,"ds-setting-row-checkbox",{presentation:[513],label:[1],valueLabel:[1,"value-label"],description:[1]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-setting-row-checkbox","ds-text"];e.forEach((e=>{switch(e){case"ds-setting-row-checkbox":if(!customElements.get(o(e))){customElements.define(o(e),h)}break;case"ds-text":if(!customElements.get(o(e))){c()}break}}))}g();const x=h;const b=g;export{x as DsSettingRowCheckbox,b as defineCustomElement};
+import{p as e,H as s,h as t,a as i,t as o}from"./index.js";import{d as c}from"./p-BbvAWFJA.js";import{C as n,a as d}from"./p-CuwopElg.js";const r=()=>`.sc-ds-setting-row-checkbox-h{box-sizing:border-box;min-width:0;padding-block:var(--dimension-space-100);padding-inline:var(--dimension-space-200);--ds-settings-row-control-padding-inline:0px}.sc-ds-setting-row-checkbox-h{display:flex;flex-direction:column;min-width:0;gap:var(--dimension-space-050);overflow-wrap:anywhere;padding-block:0}.sc-ds-setting-row-checkbox-h.sc-ds-setting-row-checkbox-s>ds-checkbox-group,.sc-ds-setting-row-checkbox-h .sc-ds-setting-row-checkbox-s>ds-checkbox-group{min-width:0;width:100%}.sc-ds-setting-row-checkbox-h[presentation='view'].sc-ds-setting-row-checkbox-s>ds-checkbox-group,.sc-ds-setting-row-checkbox-h[presentation='view'] .sc-ds-setting-row-checkbox-s>ds-checkbox-group{display:none !important}[presentation='edit'].sc-ds-setting-row-checkbox-h .setting-row-checkbox__choice.sc-ds-setting-row-checkbox{display:none}ds-text.setting-row-checkbox__heading.sc-ds-setting-row-checkbox{display:flex;align-items:center;box-sizing:border-box;height:var(--dimension-size-400);min-width:0;padding:0}.setting-row-checkbox__choice.sc-ds-setting-row-checkbox{display:grid;gap:var(--dimension-space-025);min-width:0;padding-block:var(--dimension-space-075)}`;let a=0;const h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.presentation="edit";this.headingId=`ds-setting-row-checkbox-heading-${++a}`;this.syncSlottedCheckboxGroup=()=>{for(const e of this.el.querySelectorAll("ds-checkbox-group")){e.label="";if(this.label){e.ariaLabelledby=this.headingId;e.ariaLabel=null}}}}componentWillLoad(){this.syncSlottedCheckboxGroup()}componentDidLoad(){this.syncSlottedCheckboxGroup()}render(){return t(i,{key:"5c16e9e608f31df3e2370ab3f021b267fb30a03c"},t("ds-text",{key:"setting-row-checkbox-heading",class:"setting-row-checkbox__heading",as:"span",variant:n.md,emphasis:true,textId:this.label?this.headingId:undefined},this.label),t("div",{key:"setting-row-checkbox-choice",class:"setting-row-checkbox__choice"},this.valueLabel?t("ds-text",{key:"setting-row-checkbox-value",as:"span",variant:n.md},this.valueLabel):null,this.description?.trim()?t("ds-text",{key:"setting-row-checkbox-description",as:"span",variant:d.md,color:"secondary"},this.description):null),t("slot",{key:"b7583d0a055381ec7cc9913508f0c34a87bb557a",onSlotchange:this.syncSlottedCheckboxGroup}))}get el(){return this}static get style(){return r()}},[262,"ds-setting-row-checkbox",{presentation:[513],label:[1],valueLabel:[1,"value-label"],description:[1]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-setting-row-checkbox","ds-text"];e.forEach((e=>{switch(e){case"ds-setting-row-checkbox":if(!customElements.get(o(e))){customElements.define(o(e),h)}break;case"ds-text":if(!customElements.get(o(e))){c()}break}}))}g();const b=h;const x=g;export{b as DsSettingRowCheckbox,x as defineCustomElement};
 //# sourceMappingURL=ds-setting-row-checkbox.js.map

package/dist/components/ds-setting-row-radio.js

@@ -1,2 +1,2 @@
-import{p as i,H as s,h as t,a as e,t as o}from"./index.js";import{d as n}from"./p-D8OWhnID.js";import{C as d,a}from"./p-CuwopElg.js";const r=()=>`.sc-ds-setting-row-radio-h{box-sizing:border-box;min-width:0;padding-block:var(--dimension-space-100);padding-inline:var(--dimension-space-200);--ds-settings-row-control-padding-inline:0px}.sc-ds-setting-row-radio-h{display:flex;flex-direction:column;min-width:0;gap:var(--dimension-space-050);overflow-wrap:anywhere;padding-block:0}.sc-ds-setting-row-radio-h.sc-ds-setting-row-radio-s>ds-radio,.sc-ds-setting-row-radio-h .sc-ds-setting-row-radio-s>ds-radio{min-width:0;width:100%}.sc-ds-setting-row-radio-h[presentation='view'].sc-ds-setting-row-radio-s>ds-radio,.sc-ds-setting-row-radio-h[presentation='view'] .sc-ds-setting-row-radio-s>ds-radio{display:none !important}[presentation='edit'].sc-ds-setting-row-radio-h .setting-row-radio__choice.sc-ds-setting-row-radio{display:none}ds-text.setting-row-radio__heading.sc-ds-setting-row-radio{display:flex;align-items:center;box-sizing:border-box;height:var(--dimension-size-400);min-width:0;padding:0}.setting-row-radio__choice.sc-ds-setting-row-radio{display:grid;gap:var(--dimension-space-025);min-width:0;padding-block:var(--dimension-space-075)}`;let c=0;const g=i(class i extends s{constructor(i){super();if(i!==false){this.__registerHost()}this.presentation="edit";this.headingId=`ds-setting-row-radio-heading-${++c}`;this.syncSlottedRadio=()=>{for(const i of this.el.querySelectorAll("ds-radio")){i.groupLabel="";if(this.label){i.ariaLabelledby=this.headingId;i.ariaLabel=null}}}}componentWillLoad(){this.syncSlottedRadio()}componentDidLoad(){this.syncSlottedRadio()}render(){return t(e,{key:"fea64545e1636b57b4bfbac6c091ed92b2863a48"},t("ds-text",{key:"setting-row-radio-heading",class:"setting-row-radio__heading",as:"span",variant:d.md,emphasis:true,textId:this.label?this.headingId:undefined},this.label),t("div",{key:"setting-row-radio-choice",class:"setting-row-radio__choice"},this.valueLabel?t("ds-text",{key:"setting-row-radio-value",as:"span",variant:d.md},this.valueLabel):null,this.description?t("ds-text",{key:"setting-row-radio-description",as:"span",variant:a.md,color:"secondary"},this.description):null),t("slot",{key:"f5c48a9c56653e7802359cc69643fb1a94857ab0",onSlotchange:this.syncSlottedRadio}))}get el(){return this}static get style(){return r()}},[262,"ds-setting-row-radio",{presentation:[513],label:[1],valueLabel:[1,"value-label"],description:[1]}]);function l(){if(typeof customElements==="undefined"){return}const i=["ds-setting-row-radio","ds-text"];i.forEach((i=>{switch(i){case"ds-setting-row-radio":if(!customElements.get(o(i))){customElements.define(o(i),g)}break;case"ds-text":if(!customElements.get(o(i))){n()}break}}))}l();const h=g;const p=l;export{h as DsSettingRowRadio,p as defineCustomElement};
+import{p as i,H as s,h as t,a as e,t as o}from"./index.js";import{d}from"./p-BbvAWFJA.js";import{C as n,a}from"./p-CuwopElg.js";const r=()=>`.sc-ds-setting-row-radio-h{box-sizing:border-box;min-width:0;padding-block:var(--dimension-space-100);padding-inline:var(--dimension-space-200);--ds-settings-row-control-padding-inline:0px}.sc-ds-setting-row-radio-h{display:flex;flex-direction:column;min-width:0;gap:var(--dimension-space-050);overflow-wrap:anywhere;padding-block:0}.sc-ds-setting-row-radio-h.sc-ds-setting-row-radio-s>ds-radio,.sc-ds-setting-row-radio-h .sc-ds-setting-row-radio-s>ds-radio{min-width:0;width:100%}.sc-ds-setting-row-radio-h[presentation='view'].sc-ds-setting-row-radio-s>ds-radio,.sc-ds-setting-row-radio-h[presentation='view'] .sc-ds-setting-row-radio-s>ds-radio{display:none !important}[presentation='edit'].sc-ds-setting-row-radio-h .setting-row-radio__choice.sc-ds-setting-row-radio{display:none}ds-text.setting-row-radio__heading.sc-ds-setting-row-radio{display:flex;align-items:center;box-sizing:border-box;height:var(--dimension-size-400);min-width:0;padding:0}.setting-row-radio__choice.sc-ds-setting-row-radio{display:grid;gap:var(--dimension-space-025);min-width:0;padding-block:var(--dimension-space-075)}`;let c=0;const g=i(class i extends s{constructor(i){super();if(i!==false){this.__registerHost()}this.presentation="edit";this.headingId=`ds-setting-row-radio-heading-${++c}`;this.syncSlottedRadio=()=>{for(const i of this.el.querySelectorAll("ds-radio")){i.groupLabel="";if(this.label){i.ariaLabelledby=this.headingId;i.ariaLabel=null}}}}componentWillLoad(){this.syncSlottedRadio()}componentDidLoad(){this.syncSlottedRadio()}render(){return t(e,{key:"5e84f7543c5a36350f64afcef6bb266abe22a7a4"},t("ds-text",{key:"setting-row-radio-heading",class:"setting-row-radio__heading",as:"span",variant:n.md,emphasis:true,textId:this.label?this.headingId:undefined},this.label),t("div",{key:"setting-row-radio-choice",class:"setting-row-radio__choice"},this.valueLabel?t("ds-text",{key:"setting-row-radio-value",as:"span",variant:n.md},this.valueLabel):null,this.description?t("ds-text",{key:"setting-row-radio-description",as:"span",variant:a.md,color:"secondary"},this.description):null),t("slot",{key:"2bdd70182af37d8844bd4a9ce110b1215bdf5f57",onSlotchange:this.syncSlottedRadio}))}get el(){return this}static get style(){return r()}},[262,"ds-setting-row-radio",{presentation:[513],label:[1],valueLabel:[1,"value-label"],description:[1]}]);function l(){if(typeof customElements==="undefined"){return}const i=["ds-setting-row-radio","ds-text"];i.forEach((i=>{switch(i){case"ds-setting-row-radio":if(!customElements.get(o(i))){customElements.define(o(i),g)}break;case"ds-text":if(!customElements.get(o(i))){d()}break}}))}l();const h=g;const p=l;export{h as DsSettingRowRadio,p as defineCustomElement};
 //# sourceMappingURL=ds-setting-row-radio.js.map

package/dist/components/ds-setting-row-radio.js.map

@@ -1 +1 @@
-{"version":3,"names":["settingRowRadioCss","settingRowRadioHeadingId","SettingRowRadio","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","presentation","headingId","syncSlottedRadio","radio","el","querySelectorAll","groupLabel","label","ariaLabelledby","ariaLabel","componentWillLoad","componentDidLoad","render","h","Host","key","class","as","variant","CONTROL_TEXT_VARIANT","md","emphasis","textId","undefined","valueLabel","description","CONTROL_SUPPORTING_TEXT_VARIANT","color","onSlotchange"],"sources":["src/wc/components/SettingRowRadio/SettingRowRadio.css?tag=ds-setting-row-radio&encapsulation=scoped","src/wc/components/SettingRowRadio/SettingRowRadio.tsx"],"sourcesContent":["@import '../../utils/settings-row.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  /* Heading, choice, and radio options already own block padding. */\n  padding-block: 0;\n}\n\n/* Light-DOM slotted radios do not receive this component's scoped child class.\n   Target them with ::slotted so view/edit visibility actually applies. */\n:host ::slotted(ds-radio) {\n  min-width: 0;\n  width: 100%;\n}\n\n:host([presentation='view']) ::slotted(ds-radio) {\n  display: none !important;\n}\n\n:host([presentation='edit']) .setting-row-radio__choice {\n  display: none;\n}\n\nds-text.setting-row-radio__heading {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: var(--dimension-size-400);\n  min-width: 0;\n  padding: 0;\n}\n\n.setting-row-radio__choice {\n  display: grid;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n  padding-block: var(--dimension-space-075);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT, CONTROL_TEXT_VARIANT } from '../../utils';\n\nexport type SettingRowRadioPresentation = 'edit' | 'view';\n\ntype SettingsRadio = HTMLElement & {\n  groupLabel: string;\n  ariaLabel: string | null;\n  ariaLabelledby?: string;\n};\n\nlet settingRowRadioHeadingId = 0;\n\n/** Padded settings-row composition for a Radio group. */\n@Component({\n  tag: 'ds-setting-row-radio',\n  styleUrl: 'SettingRowRadio.css',\n  scoped: true,\n})\nexport class SettingRowRadio {\n  @Element() el!: HTMLElement;\n\n  /** Interactive Radio group or non-interactive saved-value readout. */\n  @Prop({ reflect: true }) presentation: SettingRowRadioPresentation = 'edit';\n  /** Settings heading shown in both presentations. Not Radio's form groupLabel. */\n  @Prop() label?: string;\n  /** Saved option label shown in view presentation. */\n  @Prop() valueLabel?: string;\n  /** Optional consequence or supporting copy for the saved option. */\n  @Prop() description?: string;\n\n  private readonly headingId = `ds-setting-row-radio-heading-${++settingRowRadioHeadingId}`;\n\n  componentWillLoad() {\n    this.syncSlottedRadio();\n  }\n\n  componentDidLoad() {\n    this.syncSlottedRadio();\n  }\n\n  private syncSlottedRadio = () => {\n    for (const radio of this.el.querySelectorAll<SettingsRadio>('ds-radio')) {\n      radio.groupLabel = '';\n      if (this.label) {\n        radio.ariaLabelledby = this.headingId;\n        radio.ariaLabel = null;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <ds-text\n          key=\"setting-row-radio-heading\"\n          class=\"setting-row-radio__heading\"\n          as=\"span\"\n          variant={CONTROL_TEXT_VARIANT.md}\n          emphasis\n          textId={this.label ? this.headingId : undefined}\n        >\n          {this.label}\n        </ds-text>\n        <div key=\"setting-row-radio-choice\" class=\"setting-row-radio__choice\">\n          {this.valueLabel ? (\n            <ds-text key=\"setting-row-radio-value\" as=\"span\" variant={CONTROL_TEXT_VARIANT.md}>\n              {this.valueLabel}\n            </ds-text>\n          ) : null}\n          {this.description ? (\n            <ds-text\n              key=\"setting-row-radio-description\"\n              as=\"span\"\n              variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n              color=\"secondary\"\n            >\n              {this.description}\n            </ds-text>\n          ) : null}\n        </div>\n        <slot onSlotchange={this.syncSlottedRadio} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"qIAAA,MAAMA,EAAqB,IAAM,+kCCWjC,IAAIC,EAA2B,E,MAQlBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,4CAS2BC,KAAAC,aAA4C,OAQpDD,KAAAE,UAAY,kCAAkCR,IAUvDM,KAAAG,iBAAmB,KACzB,IAAK,MAAMC,KAASJ,KAAKK,GAAGC,iBAAgC,YAAa,CACvEF,EAAMG,WAAa,GACnB,GAAIP,KAAKQ,MAAO,CACdJ,EAAMK,eAAiBT,KAAKE,UAC5BE,EAAMM,UAAY,I,GAuCzB,CApDC,iBAAAC,GACEX,KAAKG,kB,CAGP,gBAAAS,GACEZ,KAAKG,kB,CAaP,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,WACEE,IAAI,4BACJC,MAAM,6BACNC,GAAG,OACHC,QAASC,EAAqBC,GAC9BC,SAAQ,KACRC,OAAQvB,KAAKQ,MAAQR,KAAKE,UAAYsB,WAErCxB,KAAKQ,OAERM,EAAA,OAAKE,IAAI,2BAA2BC,MAAM,6BACvCjB,KAAKyB,WACJX,EAAA,WAASE,IAAI,0BAA0BE,GAAG,OAAOC,QAASC,EAAqBC,IAC5ErB,KAAKyB,YAEN,KACHzB,KAAK0B,YACJZ,EAAA,WACEE,IAAI,gCACJE,GAAG,OACHC,QAASQ,EAAgCN,GACzCO,MAAM,aAEL5B,KAAK0B,aAEN,MAENZ,EAAA,QAAAE,IAAA,2CAAMa,aAAc7B,KAAKG,mB","ignoreList":[]}
+{"version":3,"names":["settingRowRadioCss","settingRowRadioHeadingId","SettingRowRadio","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","presentation","headingId","syncSlottedRadio","radio","el","querySelectorAll","groupLabel","label","ariaLabelledby","ariaLabel","componentWillLoad","componentDidLoad","render","h","Host","key","class","as","variant","CONTROL_TEXT_VARIANT","md","emphasis","textId","undefined","valueLabel","description","CONTROL_SUPPORTING_TEXT_VARIANT","color","onSlotchange"],"sources":["src/wc/components/SettingRowRadio/SettingRowRadio.css?tag=ds-setting-row-radio&encapsulation=scoped","src/wc/components/SettingRowRadio/SettingRowRadio.tsx"],"sourcesContent":["@import '../../utils/settings-row.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  /* Heading, choice, and radio options already own block padding. */\n  padding-block: 0;\n}\n\n/* Light-DOM slotted radios do not receive this component's scoped child class.\n   Target them with ::slotted so view/edit visibility actually applies. */\n:host ::slotted(ds-radio) {\n  min-width: 0;\n  width: 100%;\n}\n\n:host([presentation='view']) ::slotted(ds-radio) {\n  display: none !important;\n}\n\n:host([presentation='edit']) .setting-row-radio__choice {\n  display: none;\n}\n\nds-text.setting-row-radio__heading {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: var(--dimension-size-400);\n  min-width: 0;\n  padding: 0;\n}\n\n.setting-row-radio__choice {\n  display: grid;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n  padding-block: var(--dimension-space-075);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT, CONTROL_TEXT_VARIANT } from '../../utils';\n\nexport type SettingRowRadioPresentation = 'edit' | 'view';\n\ntype SettingsRadio = HTMLElement & {\n  groupLabel: string;\n  ariaLabel: string | null;\n  ariaLabelledby?: string;\n};\n\nlet settingRowRadioHeadingId = 0;\n\n/** Padded settings-row composition for a Radio group. */\n@Component({\n  tag: 'ds-setting-row-radio',\n  styleUrl: 'SettingRowRadio.css',\n  scoped: true,\n})\nexport class SettingRowRadio {\n  @Element() el!: HTMLElement;\n\n  /** Interactive Radio group or non-interactive saved-value readout. */\n  @Prop({ reflect: true }) presentation: SettingRowRadioPresentation = 'edit';\n  /** Settings heading shown in both presentations. Not Radio's form groupLabel. */\n  @Prop() label?: string;\n  /** Saved option label shown in view presentation. */\n  @Prop() valueLabel?: string;\n  /** Optional consequence or supporting copy for the saved option. */\n  @Prop() description?: string;\n\n  private readonly headingId = `ds-setting-row-radio-heading-${++settingRowRadioHeadingId}`;\n\n  componentWillLoad() {\n    this.syncSlottedRadio();\n  }\n\n  componentDidLoad() {\n    this.syncSlottedRadio();\n  }\n\n  private syncSlottedRadio = () => {\n    for (const radio of this.el.querySelectorAll<SettingsRadio>('ds-radio')) {\n      radio.groupLabel = '';\n      if (this.label) {\n        radio.ariaLabelledby = this.headingId;\n        radio.ariaLabel = null;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <ds-text\n          key=\"setting-row-radio-heading\"\n          class=\"setting-row-radio__heading\"\n          as=\"span\"\n          variant={CONTROL_TEXT_VARIANT.md}\n          emphasis\n          textId={this.label ? this.headingId : undefined}\n        >\n          {this.label}\n        </ds-text>\n        <div key=\"setting-row-radio-choice\" class=\"setting-row-radio__choice\">\n          {this.valueLabel ? (\n            <ds-text key=\"setting-row-radio-value\" as=\"span\" variant={CONTROL_TEXT_VARIANT.md}>\n              {this.valueLabel}\n            </ds-text>\n          ) : null}\n          {this.description ? (\n            <ds-text\n              key=\"setting-row-radio-description\"\n              as=\"span\"\n              variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n              color=\"secondary\"\n            >\n              {this.description}\n            </ds-text>\n          ) : null}\n        </div>\n        <slot onSlotchange={this.syncSlottedRadio} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"gIAAA,MAAMA,EAAqB,IAAM,+kCCWjC,IAAIC,EAA2B,E,MAQlBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,4CAS2BC,KAAAC,aAA4C,OAQpDD,KAAAE,UAAY,kCAAkCR,IAUvDM,KAAAG,iBAAmB,KACzB,IAAK,MAAMC,KAASJ,KAAKK,GAAGC,iBAAgC,YAAa,CACvEF,EAAMG,WAAa,GACnB,GAAIP,KAAKQ,MAAO,CACdJ,EAAMK,eAAiBT,KAAKE,UAC5BE,EAAMM,UAAY,I,GAuCzB,CApDC,iBAAAC,GACEX,KAAKG,kB,CAGP,gBAAAS,GACEZ,KAAKG,kB,CAaP,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,WACEE,IAAI,4BACJC,MAAM,6BACNC,GAAG,OACHC,QAASC,EAAqBC,GAC9BC,SAAQ,KACRC,OAAQvB,KAAKQ,MAAQR,KAAKE,UAAYsB,WAErCxB,KAAKQ,OAERM,EAAA,OAAKE,IAAI,2BAA2BC,MAAM,6BACvCjB,KAAKyB,WACJX,EAAA,WAASE,IAAI,0BAA0BE,GAAG,OAAOC,QAASC,EAAqBC,IAC5ErB,KAAKyB,YAEN,KACHzB,KAAK0B,YACJZ,EAAA,WACEE,IAAI,gCACJE,GAAG,OACHC,QAASQ,EAAgCN,GACzCO,MAAM,aAEL5B,KAAK0B,aAEN,MAENZ,EAAA,QAAAE,IAAA,2CAAMa,aAAc7B,KAAKG,mB","ignoreList":[]}

package/dist/components/ds-setting-row-toggle.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as i,a,t as n}from"./index.js";import{d as o}from"./p-Bf-BphXP.js";import{d}from"./p-D8OWhnID.js";import{a as c}from"./p-CuwopElg.js";const r=()=>`.sc-ds-setting-row-toggle-h{box-sizing:border-box;min-width:0;padding-block:var(--dimension-space-100);padding-inline:var(--dimension-space-200);--ds-settings-row-control-padding-inline:0px}.sc-ds-setting-row-toggle-h{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:start;gap:var(--dimension-space-200)}.setting-row-toggle__copy.sc-ds-setting-row-toggle{display:flex;flex-direction:column;min-width:0;gap:var(--dimension-space-050);overflow-wrap:anywhere;-webkit-user-select:none;user-select:none}`;let l=0;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange",7);this.checked=false;this.disabled=false;this.variant="emphasis";this.rowId=`ds-setting-row-toggle-${++l}`;this.handleChange=e=>{e.stopPropagation();e.target.checked=this.checked;this.dsChange.emit(e.detail)}}render(){const e=Boolean(this.description?.trim());const s=this.variant==="non-emphasis"&&!e?"secondary":"primary";return i(a,{key:"c197c6cb6ffe5eac9840dbe1dbb1aa2c38939160"},i("div",{key:"138d53d6dab10e550631ba3deb9d7d75600a36fa",class:"setting-row-toggle__copy"},i("ds-text",{key:"3fe2915ece834679fe07e674c8e01c4e3ca499ee",textId:`${this.rowId}-label`,variant:"text-body-medium",color:s,emphasis:this.variant==="emphasis"},this.label),e&&i("ds-text",{key:"faacc5057171213f401f4eb6d551b1b4d03c2a99",textId:`${this.rowId}-description`,variant:c.md,color:"secondary"},this.description)),i("ds-switch",{key:"6235733cfb31ffce631cf89cf920f54b23e13689",checked:this.checked,disabled:this.disabled,"aria-labelledby":`${this.rowId}-label`,"aria-describedby":e?`${this.rowId}-description`:undefined,onDsChange:this.handleChange}))}static get style(){return r()}},[2,"ds-setting-row-toggle",{label:[1],description:[1],checked:[4],disabled:[4],variant:[1]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-setting-row-toggle","ds-switch","ds-text"];e.forEach((e=>{switch(e){case"ds-setting-row-toggle":if(!customElements.get(n(e))){customElements.define(n(e),g)}break;case"ds-switch":if(!customElements.get(n(e))){o()}break;case"ds-text":if(!customElements.get(n(e))){d()}break}}))}h();const m=g;const p=h;export{m as DsSettingRowToggle,p as defineCustomElement};
+import{p as e,H as s,c as t,h as i,a,t as n}from"./index.js";import{d as o}from"./p-C2e7BkNn.js";import{d}from"./p-BbvAWFJA.js";import{a as c}from"./p-CuwopElg.js";const r=()=>`.sc-ds-setting-row-toggle-h{box-sizing:border-box;min-width:0;padding-block:var(--dimension-space-100);padding-inline:var(--dimension-space-200);--ds-settings-row-control-padding-inline:0px}.sc-ds-setting-row-toggle-h{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:start;gap:var(--dimension-space-200)}.setting-row-toggle__copy.sc-ds-setting-row-toggle{display:flex;flex-direction:column;min-width:0;gap:var(--dimension-space-050);overflow-wrap:anywhere;-webkit-user-select:none;user-select:none}`;let l=0;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange",7);this.checked=false;this.disabled=false;this.variant="emphasis";this.rowId=`ds-setting-row-toggle-${++l}`;this.handleChange=e=>{e.stopPropagation();e.target.checked=this.checked;this.dsChange.emit(e.detail)}}render(){const e=Boolean(this.description?.trim());const s=this.variant==="non-emphasis"&&!e?"secondary":"primary";return i(a,{key:"f3a5a22d73f532fb873f301d4bae9c8e0e1a0ea4"},i("div",{key:"d5422f3e0541d25638647b82e33108f2dba37d2e",class:"setting-row-toggle__copy"},i("ds-text",{key:"e47420c9a3e69ddc6257857a02bcb57949a1bc84",textId:`${this.rowId}-label`,variant:"text-body-medium",color:s,emphasis:this.variant==="emphasis"},this.label),e&&i("ds-text",{key:"1e2a7258bd5cc27b3c0e88523abdf910b346dfc2",textId:`${this.rowId}-description`,variant:c.md,color:"secondary"},this.description)),i("ds-switch",{key:"8d2c448526cbc8c709acf05b55f283ff2e6556ab",checked:this.checked,disabled:this.disabled,"aria-labelledby":`${this.rowId}-label`,"aria-describedby":e?`${this.rowId}-description`:undefined,onDsChange:this.handleChange}))}static get style(){return r()}},[2,"ds-setting-row-toggle",{label:[1],description:[1],checked:[4],disabled:[4],variant:[1]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-setting-row-toggle","ds-switch","ds-text"];e.forEach((e=>{switch(e){case"ds-setting-row-toggle":if(!customElements.get(n(e))){customElements.define(n(e),g)}break;case"ds-switch":if(!customElements.get(n(e))){o()}break;case"ds-text":if(!customElements.get(n(e))){d()}break}}))}h();const m=g;const p=h;export{m as DsSettingRowToggle,p as defineCustomElement};
 //# sourceMappingURL=ds-setting-row-toggle.js.map