@ds-mo/ui 15.2.0 → 15.4.0

package/dist/components/ds-panel-sub-nav.js.map

@@ -1 +1 @@
-{"version":3,"names":["panelSubNavCss","PanelSubNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","items","ariaLabel","enabledItems","filter","item","isInactive","focusableId","some","id","selectItem","dsChange","emit","focusItem","el","querySelector","focus","preventScroll","onValueChange","next","previous","undefined","requestAnimationFrame","active","document","activeElement","contains","findEnabled","from","step","length","offset","index","handleKeyDown","event","focusedId","target","closest","dataset","focusedIndex","findIndex","selectedIndex","currentIndex","key","nextIndex","reversedIndex","reverse","preventDefault","render","background","h","Host","class","role","ariaLabelledby","map","isSelected","type","panelId","disabled","tabIndex","onClick","as","variant","color","label"],"sources":["src/wc/components/PanelSubNav/PanelSubNav.css?tag=ds-panel-sub-nav&encapsulation=scoped","src/wc/components/PanelSubNav/PanelSubNav.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.panel-sub-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.panel-sub-nav__item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  width: 100%;\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: default;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.panel-sub-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.panel-sub-nav__item--on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-medium-background-primary);\n}\n\n.panel-sub-nav__item--on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.panel-sub-nav__item--on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-strong-background-primary);\n}\n\n.panel-sub-nav__item--on-translucent {\n  color: var(--color-translucent-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected {\n  color: var(--color-translucent-foreground-primary);\n}\n\n.panel-sub-nav__item--on-inverted {\n  color: var(--color-inverted-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected {\n  color: var(--color-inverted-foreground-primary);\n}\n\n.panel-sub-nav__item--on-media {\n  color: var(--color-media-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-media.panel-sub-nav__item--selected {\n  color: var(--color-media-foreground-primary);\n}\n\n.panel-sub-nav__item--on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected {\n  color: var(--color-always-dark-foreground-primary);\n}\n\nds-text.panel-sub-nav__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Listen,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { PanelSubNavItem } from './panel-sub-nav-types';\n\nexport type PanelSubNavBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\n@Component({\n  tag: 'ds-panel-sub-nav',\n  styleUrl: 'PanelSubNav.css',\n  scoped: true,\n})\nexport class PanelSubNav {\n  @Element() el!: HTMLElement;\n\n  /** Required selected item id when enabled items exist. Keep synchronized with the visible panel. */\n  @Prop({ mutable: true }) value: string = '';\n  /**\n   * Local panel tabs. Assign this array through the JavaScript property.\n   * Replace the array reference when items change.\n   */\n  @Prop() items: PanelSubNavItem[] = [];\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: PanelSubNavBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get enabledItems(): PanelSubNavItem[] {\n    return this.items.filter(item => !item.isInactive);\n  }\n\n  private get focusableId(): string {\n    return this.enabledItems.some(item => item.id === this.value)\n      ? this.value\n      : (this.enabledItems[0]?.id ?? '');\n  }\n\n  private selectItem(id: string) {\n    this.value = id;\n    this.dsChange.emit(id);\n    this.focusItem(id);\n  }\n\n  private focusItem(id: string) {\n    const item = this.el.querySelector(`[data-panel-sub-nav-id=\"${id}\"]`) as HTMLElement | null;\n    item?.focus({ preventScroll: true });\n  }\n\n  @Watch('value')\n  onValueChange(next: string, previous: string | undefined) {\n    if (previous === undefined || next === previous) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n      this.focusItem(this.enabledItems.some(item => item.id === next) ? next : this.focusableId);\n    });\n  }\n\n  private findEnabled(from: number, step: 1 | -1): number {\n    const length = this.items.length;\n    for (let offset = 1; offset <= length; offset++) {\n      const index = (from + step * offset + length * offset) % length;\n      if (!this.items[index]?.isInactive) return index;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.enabledItems.length) return;\n\n    const focusedId = (event.target as Element | null)?.closest<HTMLElement>(\n      '[data-panel-sub-nav-id]'\n    )?.dataset['panelSubNavId'];\n    const focusedIndex = this.items.findIndex(item => item.id === focusedId);\n    const selectedIndex = this.items.findIndex(item => item.id === this.value && !item.isInactive);\n    const currentIndex =\n      focusedIndex >= 0\n        ? focusedIndex\n        : selectedIndex >= 0\n          ? selectedIndex\n          : event.key === 'ArrowUp'\n            ? 0\n            : -1;\n    let nextIndex: number | null = null;\n\n    if (event.key === 'ArrowDown') {\n      nextIndex = this.findEnabled(currentIndex, 1);\n    } else if (event.key === 'ArrowUp') {\n      nextIndex = this.findEnabled(currentIndex, -1);\n    } else if (event.key === 'Home') {\n      nextIndex = this.items.findIndex(item => !item.isInactive);\n    } else if (event.key === 'End') {\n      const reversedIndex = [...this.items].reverse().findIndex(item => !item.isInactive);\n      nextIndex = reversedIndex < 0 ? null : this.items.length - 1 - reversedIndex;\n    }\n\n    if (nextIndex === null || nextIndex < 0) return;\n    const next = this.items[nextIndex];\n    if (!next || next.isInactive) return;\n\n    event.preventDefault();\n    this.selectItem(next.id);\n  }\n\n  render() {\n    const focusableId = this.focusableId;\n    const background = this.background;\n\n    return (\n      <Host>\n        <div\n          class=\"panel-sub-nav\"\n          role=\"tablist\"\n          aria-orientation=\"vertical\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.items.map(item => {\n            const isSelected = item.id === this.value;\n            return (\n              <button\n                id={item.id}\n                type=\"button\"\n                role=\"tab\"\n                data-panel-sub-nav-id={item.id}\n                class={{\n                  'panel-sub-nav__item': true,\n                  'panel-sub-nav__item--selected': isSelected,\n                  'ds-control--md': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': !item.isInactive,\n                  'ds-interaction-fill--selected': isSelected && !item.isInactive,\n                  'ds-interaction-fill--on-faint': background === 'faint',\n                  'ds-interaction-fill--on-medium': background === 'medium',\n                  'ds-interaction-fill--on-bold': background === 'bold',\n                  'ds-interaction-fill--on-strong': background === 'strong',\n                  'ds-interaction-fill--on-translucent': background === 'translucent',\n                  'ds-interaction-fill--on-inverted': background === 'inverted',\n                  'ds-interaction-fill--on-media': background === 'media',\n                  'ds-interaction-fill--on-always-dark': background === 'always-dark',\n                  [`panel-sub-nav__item--on-${background}`]: !!background,\n                  'ds-control-inactive': !!item.isInactive,\n                }}\n                aria-selected={isSelected ? 'true' : 'false'}\n                aria-controls={item.panelId}\n                aria-disabled={item.isInactive ? 'true' : undefined}\n                disabled={item.isInactive}\n                tabIndex={item.id === focusableId ? 0 : -1}\n                onClick={() => !item.isInactive && this.selectItem(item.id)}\n              >\n                <ds-text\n                  class=\"panel-sub-nav__label ds-interaction-fill__content\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  color=\"inherit\"\n                >\n                  {item.label}\n                </ds-text>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["panelSubNavCss","PanelSubNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","items","ariaLabel","enabledItems","filter","item","isInactive","focusableId","some","id","selectItem","dsChange","emit","focusItem","el","querySelector","focus","preventScroll","onValueChange","next","previous","undefined","requestAnimationFrame","active","document","activeElement","contains","findEnabled","from","step","length","offset","index","handleKeyDown","event","focusedId","target","closest","dataset","focusedIndex","findIndex","selectedIndex","currentIndex","key","nextIndex","reversedIndex","reverse","preventDefault","render","background","h","Host","class","role","ariaLabelledby","map","isSelected","type","panelId","disabled","tabIndex","onClick","as","variant","color","label"],"sources":["src/wc/components/PanelSubNav/PanelSubNav.css?tag=ds-panel-sub-nav&encapsulation=scoped","src/wc/components/PanelSubNav/PanelSubNav.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.panel-sub-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.panel-sub-nav__item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  width: 100%;\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: default;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.panel-sub-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.panel-sub-nav__item--on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-medium-background-primary);\n}\n\n.panel-sub-nav__item--on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.panel-sub-nav__item--on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-strong-background-primary);\n}\n\n.panel-sub-nav__item--on-translucent {\n  color: var(--color-translucent-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected {\n  color: var(--color-translucent-foreground-primary);\n}\n\n.panel-sub-nav__item--on-inverted {\n  color: var(--color-inverted-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected {\n  color: var(--color-inverted-foreground-primary);\n}\n\n.panel-sub-nav__item--on-media {\n  color: var(--color-media-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-media.panel-sub-nav__item--selected {\n  color: var(--color-media-foreground-primary);\n}\n\n.panel-sub-nav__item--on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected {\n  color: var(--color-always-dark-foreground-primary);\n}\n\nds-text.panel-sub-nav__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Listen,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { PanelSubNavItem } from './panel-sub-nav-types';\n\nexport type PanelSubNavBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\n@Component({\n  tag: 'ds-panel-sub-nav',\n  styleUrl: 'PanelSubNav.css',\n  scoped: true,\n})\nexport class PanelSubNav {\n  @Element() el!: HTMLElement;\n\n  /** Required selected item id when enabled items exist. Keep synchronized with the visible panel. */\n  @Prop({ mutable: true }) value: string = '';\n  /**\n   * Local panel tabs. Assign this array through the JavaScript property.\n   * Replace the array reference when items change.\n   */\n  @Prop() items: PanelSubNavItem[] = [];\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: PanelSubNavBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get enabledItems(): PanelSubNavItem[] {\n    return this.items.filter(item => !item.isInactive);\n  }\n\n  private get focusableId(): string {\n    return this.enabledItems.some(item => item.id === this.value)\n      ? this.value\n      : (this.enabledItems[0]?.id ?? '');\n  }\n\n  private selectItem(id: string) {\n    this.value = id;\n    this.dsChange.emit(id);\n    this.focusItem(id);\n  }\n\n  private focusItem(id: string) {\n    const item = this.el.querySelector(`[data-panel-sub-nav-id=\"${id}\"]`) as HTMLElement | null;\n    item?.focus({ preventScroll: true });\n  }\n\n  @Watch('value')\n  onValueChange(next: string, previous: string | undefined) {\n    if (previous === undefined || next === previous) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n      this.focusItem(this.enabledItems.some(item => item.id === next) ? next : this.focusableId);\n    });\n  }\n\n  private findEnabled(from: number, step: 1 | -1): number {\n    const length = this.items.length;\n    for (let offset = 1; offset <= length; offset++) {\n      const index = (from + step * offset + length * offset) % length;\n      if (!this.items[index]?.isInactive) return index;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.enabledItems.length) return;\n\n    const focusedId = (event.target as Element | null)?.closest<HTMLElement>(\n      '[data-panel-sub-nav-id]'\n    )?.dataset['panelSubNavId'];\n    const focusedIndex = this.items.findIndex(item => item.id === focusedId);\n    const selectedIndex = this.items.findIndex(item => item.id === this.value && !item.isInactive);\n    const currentIndex =\n      focusedIndex >= 0\n        ? focusedIndex\n        : selectedIndex >= 0\n          ? selectedIndex\n          : event.key === 'ArrowUp'\n            ? 0\n            : -1;\n    let nextIndex: number | null = null;\n\n    if (event.key === 'ArrowDown') {\n      nextIndex = this.findEnabled(currentIndex, 1);\n    } else if (event.key === 'ArrowUp') {\n      nextIndex = this.findEnabled(currentIndex, -1);\n    } else if (event.key === 'Home') {\n      nextIndex = this.items.findIndex(item => !item.isInactive);\n    } else if (event.key === 'End') {\n      const reversedIndex = [...this.items].reverse().findIndex(item => !item.isInactive);\n      nextIndex = reversedIndex < 0 ? null : this.items.length - 1 - reversedIndex;\n    }\n\n    if (nextIndex === null || nextIndex < 0) return;\n    const next = this.items[nextIndex];\n    if (!next || next.isInactive) return;\n\n    event.preventDefault();\n    this.selectItem(next.id);\n  }\n\n  render() {\n    const focusableId = this.focusableId;\n    const background = this.background;\n\n    return (\n      <Host>\n        <div\n          class=\"panel-sub-nav\"\n          role=\"tablist\"\n          aria-orientation=\"vertical\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.items.map(item => {\n            const isSelected = item.id === this.value;\n            return (\n              <button\n                id={item.id}\n                type=\"button\"\n                role=\"tab\"\n                data-panel-sub-nav-id={item.id}\n                class={{\n                  'panel-sub-nav__item': true,\n                  'panel-sub-nav__item--selected': isSelected,\n                  'ds-control--md': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': !item.isInactive,\n                  'ds-interaction-fill--selected': isSelected && !item.isInactive,\n                  'ds-interaction-fill--on-faint': background === 'faint',\n                  'ds-interaction-fill--on-medium': background === 'medium',\n                  'ds-interaction-fill--on-bold': background === 'bold',\n                  'ds-interaction-fill--on-strong': background === 'strong',\n                  'ds-interaction-fill--on-translucent': background === 'translucent',\n                  'ds-interaction-fill--on-inverted': background === 'inverted',\n                  'ds-interaction-fill--on-media': background === 'media',\n                  'ds-interaction-fill--on-always-dark': background === 'always-dark',\n                  [`panel-sub-nav__item--on-${background}`]: !!background,\n                  'ds-control-inactive': !!item.isInactive,\n                }}\n                aria-selected={isSelected ? 'true' : 'false'}\n                aria-controls={item.panelId}\n                aria-disabled={item.isInactive ? 'true' : undefined}\n                disabled={item.isInactive}\n                tabIndex={item.id === focusableId ? 0 : -1}\n                onClick={() => !item.isInactive && this.selectItem(item.id)}\n              >\n                <ds-text\n                  class=\"panel-sub-nav__label ds-interaction-fill__content\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  color=\"inherit\"\n                >\n                  {item.label}\n                </ds-text>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-panel-tool-header.js

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-p0FVyEFa.js";const p=o;const t=s;export{p as DsPanelToolHeader,t as defineCustomElement};
+import{P as o,d as s}from"./p-DYQa1DVF.js";const t=o;const a=s;export{t as DsPanelToolHeader,a as defineCustomElement};
 //# sourceMappingURL=ds-panel-tool-header.js.map

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

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as o,h as a,a as r,t as i}from"./index.js";import{a as n}from"./p-xtGGIZmU.js";import{d as t}from"./p-Cn6AfzeF.js";import{d}from"./p-D7K1ZHML.js";import{d as c}from"./p-7V1AhetH.js";import{d as l}from"./p-DjkUFlDW.js";import{d as h}from"./p-Bv9rSkp0.js";import{d as p}from"./p-0XTyQNRG.js";import{d as m}from"./p-ZwRLjD5M.js";import{d as u}from"./p-C_Ma6Xa-.js";const f=()=>`.sc-ds-panel-tool-search-h,.sc-ds-panel-tool-search:where(.ds-table),.sc-ds-panel-tool-search:where(.tooltip-popup),.sc-ds-panel-tool-search: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-panel-tool-search,.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search,.ds-control--sm.sc-ds-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search,.ds-control--xs.sc-ds-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--lg.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-tool-search-h,.ds-chrome-space--sm.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-search-h,.ds-chrome-space--md.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-search-h,.ds-chrome-space--lg.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search,.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search,.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:grid;align-items:center}.select-search.sc-ds-panel-tool-search{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search--without-focus-boundary.sc-ds-panel-tool-search::after{display:none}.select-search__control.sc-ds-panel-tool-search{display:flex;width:100%;min-width:0}.sc-ds-panel-tool-search-h{display:block;flex:0 0 var(--dimension-size-600);width:100%;min-width:0;height:var(--dimension-size-600);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search{position:relative;width:100%;height:100%;background:transparent}.panel-tool-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search{flex:1 1 auto;width:auto;min-width:0;height:var(--dimension-size-400);padding:0}.panel-tool-search__filter-group.sc-ds-panel-tool-search{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}.panel-tool-search__divider.sc-ds-panel-tool-search,.panel-tool-search__filter.sc-ds-panel-tool-search{flex:0 0 auto}`;const g=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=o(this,"dsChange",7);this.dsClear=o(this,"dsClear",7);this.dsFilterToggle=o(this,"dsFilterToggle",7);this.value="";this.placeholder="Search";this.ariaLabel="Search";this.isInactive=false;this.showFilter=false;this.filterAriaLabel="Filter";this.filterTriggerId="";this.filterExpanded=false;this.filterActive=false;this.handleChange=s=>{this.value=s;this.dsChange.emit(s)}}componentDidRender(){const s=this.el.querySelector("input");if(s&&s.value!==this.value)s.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const s=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(s?.setFocus?.())}render(){return a(r,{key:"23b9f9db9f8c5822a338544501d8367b6fbce84f"},a("div",{key:"854f437107eb7cc37f9f8c195f83b1829d88a48b",class:"panel-tool-search ds-chrome-row ds-chrome-space--md"},a(n,{key:"4c900963cf7979879fdffe8b56a33966049c4b1c",hasFocusBoundary:false,hasInteractionFill:false,value:this.value,placeholder:this.placeholder,ariaLabel:this.ariaLabel,controls:this.controls,disabled:this.isInactive,inputRef:()=>undefined,clearLabel:"Clear",onValueChange:this.handleChange,onClear:()=>this.dsClear.emit(),onKeyDown:()=>undefined}),this.showFilter?a("div",{class:"panel-tool-search__filter-group"},a("ds-divider",{class:"panel-tool-search__divider",orientation:"vertical",length:"var(--dimension-size-200)"}),a("ds-tooltip",{label:this.filterAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:this.filterTriggerId||undefined,class:"panel-tool-search__filter",variant:"icon",icon:"Filters",size:"md","aria-label":this.filterAriaLabel,haspopup:"menu",controls:this.filterControls,expanded:this.filterExpanded,surfaceOpen:this.filterSurfaceOpen,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:s=>{s.stopPropagation()},onDsClick:s=>{s.stopPropagation();this.dsFilterToggle.emit(s.detail)}}))):null))}get el(){return this}static get style(){return f()}},[2,"ds-panel-tool-search",{value:[1025],placeholder:[1],ariaLabel:[1,"aria-label"],controls:[1],isInactive:[4,"is-inactive"],showFilter:[4,"show-filter"],filterAriaLabel:[1,"filter-aria-label"],filterTriggerId:[1,"filter-trigger-id"],filterControls:[1,"filter-controls"],filterExpanded:[4,"filter-expanded"],filterSurfaceOpen:[4,"filter-surface-open"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function v(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-input","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tool-search":if(!customElements.get(i(s))){customElements.define(i(s),g)}break;case"ds-badge":if(!customElements.get(i(s))){t()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){d()}break;case"ds-divider":if(!customElements.get(i(s))){c()}break;case"ds-icon":if(!customElements.get(i(s))){l()}break;case"ds-input":if(!customElements.get(i(s))){h()}break;case"ds-loader":if(!customElements.get(i(s))){p()}break;case"ds-text":if(!customElements.get(i(s))){m()}break;case"ds-tooltip":if(!customElements.get(i(s))){u()}break}}))}v();const b=g;const x=v;export{b as DsPanelToolSearch,x as defineCustomElement};
+import{p as s,H as e,c as o,h as a,a as r,t as i}from"./index.js";import{a as n,d as t}from"./p-BwdnVqAY.js";import{d}from"./p-CwdRaJER.js";import{d as l}from"./p-D6FRqNhN.js";import{d as c}from"./p-JBki_jyY.js";import{d as h}from"./p-B0BQCVkq.js";import{d as p}from"./p-DjkUFlDW.js";import{d as m}from"./p-0XTyQNRG.js";import{d as u}from"./p-D8OWhnID.js";import{d as f}from"./p-DIQiHX0q.js";const v=()=>`.sc-ds-panel-tool-search-h,.sc-ds-panel-tool-search:where(.ds-table),.sc-ds-panel-tool-search:where(.tooltip-popup),.sc-ds-panel-tool-search: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-panel-tool-search,.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search,.ds-control--sm.sc-ds-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search,.ds-control--xs.sc-ds-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--lg.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-tool-search-h,.ds-chrome-space--sm.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-search-h,.ds-chrome-space--md.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-search-h,.ds-chrome-space--lg.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search,.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search,.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:grid;align-items:center}.select-search.sc-ds-panel-tool-search{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search--without-focus-boundary.sc-ds-panel-tool-search::after{display:none}.select-search__control.sc-ds-panel-tool-search{display:flex;width:100%;min-width:0}.sc-ds-panel-tool-search-h{display:block;flex:0 0 var(--dimension-size-600);width:100%;min-width:0;height:var(--dimension-size-600);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search{position:relative;width:100%;height:100%;background:transparent}.panel-tool-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--_shell-tools-divider, var(--color-border-tertiary));pointer-events:none}.select-search.sc-ds-panel-tool-search{flex:1 1 auto;width:auto;min-width:0;height:var(--dimension-size-400);padding:0}.panel-tool-search__filter-group.sc-ds-panel-tool-search{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}.panel-tool-search__divider.sc-ds-panel-tool-search,.panel-tool-search__filter.sc-ds-panel-tool-search{flex:0 0 auto}.panel-tool-search__divider.sc-ds-panel-tool-search{--_divider-color:var(--_shell-tools-divider, var(--color-divider-divider))}`;const g=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=o(this,"dsChange",7);this.dsClear=o(this,"dsClear",7);this.dsFilterToggle=o(this,"dsFilterToggle",7);this.value="";this.placeholder="Search";this.ariaLabel="Search";this.isInactive=false;this.showFilter=false;this.filterAriaLabel="Filter";this.filterTriggerId="";this.filterExpanded=false;this.filterActive=false;this.handleChange=s=>{this.value=s;this.dsChange.emit(s)}}componentDidRender(){const s=this.el.querySelector("input");if(s&&s.value!==this.value)s.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const s=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(s?.setFocus?.())}render(){return a(r,{key:"5a6e5bfda02c47034288902a7f3f4d982fd7c85c"},a("div",{key:"62e28c87eb57c26c3ce17c741060b5b5249c5a4b",class:"panel-tool-search ds-chrome-row ds-chrome-space--md"},a(n,{key:"bfa559d6204d1d8e98873aede3468e131bb7a745",hasFocusBoundary:false,hasInteractionFill:false,value:this.value,placeholder:this.placeholder,ariaLabel:this.ariaLabel,controls:this.controls,disabled:this.isInactive,inputRef:()=>undefined,clearLabel:"Clear",onValueChange:this.handleChange,onClear:()=>this.dsClear.emit(),onKeyDown:()=>undefined}),this.showFilter?a("div",{class:"panel-tool-search__filter-group"},a("ds-divider",{class:"panel-tool-search__divider",orientation:"vertical",length:"var(--dimension-size-200)"}),a("ds-tooltip",{label:this.filterAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:this.filterTriggerId||undefined,class:"panel-tool-search__filter",variant:"icon",icon:"Filters",size:"md","aria-label":this.filterAriaLabel,haspopup:"menu",controls:this.filterControls,expanded:this.filterExpanded,surfaceOpen:this.filterSurfaceOpen,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:s=>{s.stopPropagation()},onDsClick:s=>{s.stopPropagation();this.dsFilterToggle.emit(s.detail)}}))):null))}get el(){return this}static get style(){return v()}},[2,"ds-panel-tool-search",{value:[1025],placeholder:[1],ariaLabel:[1,"aria-label"],controls:[1],isInactive:[4,"is-inactive"],showFilter:[4,"show-filter"],filterAriaLabel:[1,"filter-aria-label"],filterTriggerId:[1,"filter-trigger-id"],filterControls:[1,"filter-controls"],filterExpanded:[4,"filter-expanded"],filterSurfaceOpen:[4,"filter-surface-open"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function b(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-chip","ds-divider","ds-icon","ds-input","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tool-search":if(!customElements.get(i(s))){customElements.define(i(s),g)}break;case"ds-badge":if(!customElements.get(i(s))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){l()}break;case"ds-chip":if(!customElements.get(i(s))){c()}break;case"ds-divider":if(!customElements.get(i(s))){h()}break;case"ds-icon":if(!customElements.get(i(s))){p()}break;case"ds-input":if(!customElements.get(i(s))){t()}break;case"ds-loader":if(!customElements.get(i(s))){m()}break;case"ds-text":if(!customElements.get(i(s))){u()}break;case"ds-tooltip":if(!customElements.get(i(s))){f()}break}}))}b();const w=g;const x=b;export{w as DsPanelToolSearch,x as defineCustomElement};
 //# sourceMappingURL=ds-panel-tool-search.js.map

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(--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","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":"iYAAA,MAAMA,EAAqB,IAAM,w1J,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,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":[]}

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

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

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

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

package/dist/components/ds-radio-tile.d.ts

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

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

@@ -0,0 +1,2 @@
+import{p as i,H as e,c as o,h as r,a as t,t as n}from"./index.js";import{d}from"./p-D8OWhnID.js";import{D as s,s as a}from"./p-DOUk4KoT.js";import{s as c,r as l}from"./p-C0qN3PSb.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});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:"25608a07fefe0caec3b803967135100328511be8",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(n(i))){customElements.define(n(i),h)}break;case"ds-text":if(!customElements.get(n(i))){d()}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-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["radioTileCss","tileId","RadioTile","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","disabled","isInactive","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","direction","error","ariaLabel","formDisabled","generatedId","initialValue","inactive","componentWillLoad","syncFormValue","selected","some","option","setFormControlValue","internals","setRequiredValidity","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","restoreStringFormState","setFocus","el","querySelector","focus","select","dsChange","emit","render","h","Host","key","role","ariaLabelledby","ariaDescribedby","undefined","class","map","index","Boolean","type","id","inputId","name","form","checked","description","onChange","as","variant","color","emphasis","textId","label"],"sources":["src/wc/components/RadioTile/RadioTile.css?tag=ds-radio-tile&encapsulation=scoped","src/wc/components/RadioTile/RadioTile.tsx"],"sourcesContent":["@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/forced-colors.css';\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n}\n:host(.radio-tiles--horizontal) {\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n:host(.radio-tiles--horizontal) .radio-tile {\n  flex-basis: var(--dimension-menu-width-xs);\n}\n.radio-tile {\n  display: flex;\n  position: relative;\n  align-items: flex-start;\n  flex: 1;\n  box-sizing: border-box;\n  gap: var(--dimension-space-150);\n  padding: var(--dimension-space-200);\n  min-width: 0;\n  border-radius: var(--dimension-radius-025);\n  background: var(--color-background-primary);\n  cursor: pointer;\n  user-select: none;\n}\n.radio-tile__outline {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n  pointer-events: none;\n}\n:host([aria-invalid='true']) .radio-tile__outline {\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative);\n}\n.radio-tile__input {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  cursor: inherit;\n  z-index: 3;\n}\n.radio-tile__input:disabled {\n  cursor: not-allowed;\n}\n.radio-tile__input:focus-visible + .radio-tile__outline {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n.radio-tile__placement {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n}\n\n.radio-tile__indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-iconography-sm);\n  height: var(--dimension-iconography-sm);\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-015) var(--color-foreground-tertiary);\n}\n.radio-tile--selected .radio-tile__indicator {\n  background: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n.radio-tile__indicator > span {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-foreground-on-bold-background-primary);\n}\n.radio-tile__copy {\n  display: grid;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n@media (forced-colors: active) {\n  .radio-tile__outline,\n  .radio-tile__indicator {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n  .radio-tile--selected .radio-tile__indicator {\n    background: var(--ds-forced-color-selected);\n  }\n  .radio-tile__indicator > span {\n    background: var(--ds-forced-color-on-selected);\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  setFormControlValue,\n  setRequiredValidity,\n} from '../../utils';\n\nexport interface RadioTileOption {\n  value: string;\n  label: string;\n  description?: string;\n  isInactive?: boolean;\n}\nlet tileId = 0;\n\n@Component({ tag: 'ds-radio-tile', styleUrl: 'RadioTile.css', scoped: true, formAssociated: true })\nexport class RadioTile {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n  /** One-of-many choices displayed as fully clickable tiles. */\n  @Prop() options: RadioTileOption[] = [];\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop() isInactive: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() inputId: string | undefined;\n  @Prop() error: boolean = false;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  @Event() dsChange!: EventEmitter<string>;\n  @State() private formDisabled = false;\n  private readonly generatedId = `ds-radio-tile-${++tileId}`;\n  private initialValue = '';\n  private get inactive() {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n  @Watch('value')\n  @Watch('options')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('requiredMessage')\n  syncFormValue() {\n    const selected = this.options.some(option => option.value === this.value && !option.isInactive);\n    setFormControlValue(this.internals, selected ? this.value : '', { inactive: this.inactive });\n    setRequiredValidity(\n      this.internals,\n      this.required && !this.inactive && !selected,\n      this.requiredMessage\n    );\n  }\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n  @Method()\n  async setFocus() {\n    (\n      this.el.querySelector<HTMLInputElement>('input:checked:not(:disabled)') ??\n      this.el.querySelector<HTMLInputElement>('input:not(:disabled)')\n    )?.focus();\n  }\n  private select(value: string) {\n    if (this.inactive || value === this.value) return;\n    this.value = value;\n    this.dsChange.emit(value);\n  }\n  render() {\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        aria-describedby={this.ariaDescribedby}\n        aria-required={this.required ? 'true' : undefined}\n        aria-invalid={this.error ? 'true' : undefined}\n        class={{ 'radio-tiles': true, 'radio-tiles--horizontal': this.direction === 'horizontal' }}\n      >\n        {this.options.map((option, index) => {\n          const selected = option.value === this.value;\n          const inactive = this.inactive || Boolean(option.isInactive);\n          return (\n            <label\n              class={{\n                'radio-tile': true,\n                'radio-tile--selected': selected,\n                'ds-interaction-fill': !inactive,\n                'ds-control-inactive': inactive,\n              }}\n              key={option.value}\n            >\n              <input\n                type=\"radio\"\n                class=\"radio-tile__input\"\n                id={index === 0 ? this.inputId : undefined}\n                name={this.generatedId}\n                form=\"\"\n                value={option.value}\n                checked={selected}\n                disabled={inactive}\n                aria-labelledby={`${this.generatedId}-label-${index}`}\n                aria-describedby={\n                  option.description ? `${this.generatedId}-description-${index}` : undefined\n                }\n                onChange={() => this.select(option.value)}\n              />\n              <span class=\"radio-tile__outline\" aria-hidden=\"true\" />\n              <span class=\"radio-tile__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n                <span class=\"radio-tile__indicator\">{selected && <span />}</span>\n              </span>\n              <span class=\"radio-tile__copy ds-interaction-fill__content\">\n                <ds-text\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  color={option.description ? 'primary' : 'secondary'}\n                  emphasis={Boolean(option.description)}\n                  textId={`${this.generatedId}-label-${index}`}\n                >\n                  {option.label}\n                </ds-text>\n                {option.description && (\n                  <ds-text\n                    as=\"span\"\n                    variant=\"text-body-medium\"\n                    color=\"secondary\"\n                    textId={`${this.generatedId}-description-${index}`}\n                  >\n                    {option.description}\n                  </ds-text>\n                )}\n              </span>\n            </label>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-radio.js

@@ -1,2 +1,2 @@
-import{R as o,d as s}from"./p-D5HxZrMA.js";const r=o;const t=s;export{r as DsRadio,t as defineCustomElement};
+import{R as o,d as s}from"./p-DzvTC27M.js";const t=o;const p=s;export{t as DsRadio,p 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-ER5M085B.js";const t=o;const p=s;export{t as DsScore,p as defineCustomElement};
+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};
 //# sourceMappingURL=ds-score.js.map

package/dist/components/ds-scroll-overlay.js

@@ -1,2 +1,2 @@
-import{p as e,H as l,c as s,h as r,a as o,t as a}from"./index.js";import{S as d}from"./p-Ck1hgD6g.js";const t=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-scroll-overlay{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient(     to bottom,     transparent 0,     #000 var(--ds-scroll-edge-fade-top),     #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),     transparent 100%   );--ds-scroll-edge-fade-inline-mask:linear-gradient(     to right,     transparent 0,     #000 var(--ds-scroll-edge-fade-left),     #000 calc(100% - var(--ds-scroll-edge-fade-right)),     transparent 100%   );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-scroll-overlay{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom,       ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,       0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-scroll-overlay{animation:none}}}.scroll-edge-fade--at-end.sc-ds-scroll-overlay,.scroll-edge-fade--hidden.sc-ds-scroll-overlay{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-scroll-overlay{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const c=()=>`.sc-ds-scroll-overlay-h{display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box}.scroll-overlay.sc-ds-scroll-overlay{position:relative;width:100%;height:100%;min-width:0;min-height:0}.scroll-overlay__viewport.sc-ds-scroll-overlay{width:100%;height:100%;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.scroll-overlay__viewport.sc-ds-scroll-overlay:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.scroll-overlay__content.sc-ds-scroll-overlay{display:flex;flex-direction:column;min-height:100%;padding-block-end:var(--ds-scroll-overlay-block-size, 0);box-sizing:border-box}.scroll-overlay__body.sc-ds-scroll-overlay{display:grid;grid-template-columns:minmax(0, 1fr);flex:1 0 auto;min-height:0}.scroll-overlay__overlay.sc-ds-scroll-overlay{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}`;const i=e(class e extends l{constructor(e){super();if(e!==false){this.__registerHost()}this.dsScroll=s(this,"dsScroll",7);this.handleScroll=()=>{if(!this.viewport)return;this.controller?.sync();this.dsScroll.emit({scrollTop:this.viewport.scrollTop,scrollHeight:this.viewport.scrollHeight,clientHeight:this.viewport.clientHeight})}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.controller=new d({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay});this.controller.connect()}disconnectedCallback(){this.controller?.disconnect()}async scrollToStart(){this.viewport?.scrollTo({top:0,behavior:"auto"});this.controller?.sync()}async scrollToEnd(){this.viewport?.scrollTo({top:this.viewport.scrollHeight,behavior:"auto"});this.controller?.sync()}async refreshOverlay(){this.controller?.sync()}render(){const e=Boolean(this.scrollLabel?.trim());return r(o,{key:"6bf1e3fcbb172c10440d03ac74035de6292483c2"},r("div",{key:"f187e9bba03826786c83468d9e45dde2138a853e",class:"scroll-overlay"},r("div",{key:"d2caa48d02c236328e53a63d313259244324819b",class:"scroll-overlay__viewport",ref:e=>{this.viewport=e},role:e?"region":undefined,"aria-label":e?this.scrollLabel:undefined,tabIndex:e?0:undefined,onScroll:this.handleScroll},r("div",{key:"b5d056992ed6c086e676b4389f2acd1496a99885",class:"scroll-overlay__content scroll-edge-fade--block-window",ref:e=>{this.content=e}},r("div",{key:"1e927cc7cd39147d81b0af56e619d287f3cfb94b",class:"scroll-overlay__body"},r("slot",{key:"5b715f9c74ce47f26f784b8fde9b1663bb89919c"})))),r("div",{key:"59bcce5c162401e3ee50c2c8bbbac1bfc72a5641",class:"scroll-overlay__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"0fc9eecf9581b116f4c0a931162f8391f07e8752",name:"overlay"}))))}get el(){return this}static get style(){return t()+c()}},[262,"ds-scroll-overlay",{scrollLabel:[1,"scroll-label"],scrollToStart:[64],scrollToEnd:[64],refreshOverlay:[64]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-scroll-overlay"];e.forEach((e=>{switch(e){case"ds-scroll-overlay":if(!customElements.get(a(e))){customElements.define(a(e),i)}break}}))}n();const g=i;const f=n;export{g as DsScrollOverlay,f as defineCustomElement};
+import{p as e,H as l,c as s,h as r,a as o,t as a}from"./index.js";import{S as d}from"./p-Ck1hgD6g.js";const t=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-scroll-overlay{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient(     to bottom,     transparent 0,     #000 var(--ds-scroll-edge-fade-top),     #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),     transparent 100%   );--ds-scroll-edge-fade-inline-mask:linear-gradient(     to right,     transparent 0,     #000 var(--ds-scroll-edge-fade-left),     #000 calc(100% - var(--ds-scroll-edge-fade-right)),     transparent 100%   );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-scroll-overlay{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom,       ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,       0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-scroll-overlay{animation:none}}}.scroll-edge-fade--at-end.sc-ds-scroll-overlay,.scroll-edge-fade--hidden.sc-ds-scroll-overlay{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-scroll-overlay{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const c=()=>`.sc-ds-scroll-overlay-h{display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box}.scroll-overlay.sc-ds-scroll-overlay{position:relative;width:100%;height:100%;min-width:0;min-height:0}.scroll-overlay__viewport.sc-ds-scroll-overlay{width:100%;height:100%;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.scroll-overlay__viewport.sc-ds-scroll-overlay:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.scroll-overlay__content.sc-ds-scroll-overlay{display:flex;flex-direction:column;min-height:100%;padding-block-end:var(--ds-scroll-overlay-block-size, 0);box-sizing:border-box}.scroll-overlay__body.sc-ds-scroll-overlay{display:grid;grid-template-columns:minmax(0, 1fr);flex:1 0 auto;min-height:0}.scroll-overlay__overlay.sc-ds-scroll-overlay{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}`;const i=e(class e extends l{constructor(e){super();if(e!==false){this.__registerHost()}this.dsScroll=s(this,"dsScroll",7);this.handleScroll=()=>{if(!this.viewport)return;this.controller?.sync();this.dsScroll.emit({scrollTop:this.viewport.scrollTop,scrollHeight:this.viewport.scrollHeight,clientHeight:this.viewport.clientHeight})}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.controller=new d({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay});this.controller.connect()}disconnectedCallback(){this.controller?.disconnect()}async scrollToStart(){this.viewport?.scrollTo({top:0,behavior:"auto"});this.controller?.sync()}async scrollToEnd(){this.viewport?.scrollTo({top:this.viewport.scrollHeight,behavior:"auto"});this.controller?.sync()}async refreshOverlay(){this.controller?.sync()}render(){const e=Boolean(this.scrollLabel?.trim());return r(o,{key:"de8684b319dcbfc59278e3901d0468f8d3bee2d7"},r("div",{key:"570d75c29a93cec0e13146d3efbbbe3c4bfcb7f3",class:"scroll-overlay"},r("div",{key:"c198020ec71c44eddf020a13726f48f04245d581",class:"scroll-overlay__viewport",ref:e=>{this.viewport=e},role:e?"region":undefined,"aria-label":e?this.scrollLabel:undefined,tabIndex:e?0:undefined,onScroll:this.handleScroll},r("div",{key:"ea2da51880032855f010343cf0d5d5889222e068",class:"scroll-overlay__content scroll-edge-fade--block-window",ref:e=>{this.content=e}},r("div",{key:"b78e445f9e121ab05ac66f1cb82fb330cce975eb",class:"scroll-overlay__body"},r("slot",{key:"9f0c3aba53b84e43b81e7c3e4be49f82f0201885"})))),r("div",{key:"5997d4090539db146afed9cfb6143d87f2cf8d7d",class:"scroll-overlay__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"433b5b6f4b571cb2758d69c600e9eca49c1fcb35",name:"overlay"}))))}get el(){return this}static get style(){return t()+c()}},[262,"ds-scroll-overlay",{scrollLabel:[1,"scroll-label"],scrollToStart:[64],scrollToEnd:[64],refreshOverlay:[64]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-scroll-overlay"];e.forEach((e=>{switch(e){case"ds-scroll-overlay":if(!customElements.get(a(e))){customElements.define(a(e),i)}break}}))}n();const f=i;const g=n;export{f as DsScrollOverlay,g as defineCustomElement};
 //# sourceMappingURL=ds-scroll-overlay.js.map

package/dist/components/ds-select.js

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

package/dist/components/ds-setting-row-checkbox.d.ts

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

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

@@ -0,0 +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};
+//# sourceMappingURL=ds-setting-row-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["settingRowCheckboxCss","settingRowCheckboxHeadingId","SettingRowCheckbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","presentation","headingId","syncSlottedCheckboxGroup","group","el","querySelectorAll","label","ariaLabelledby","ariaLabel","componentWillLoad","componentDidLoad","render","h","Host","key","class","as","variant","CONTROL_TEXT_VARIANT","md","emphasis","textId","undefined","valueLabel","description","trim","CONTROL_SUPPORTING_TEXT_VARIANT","color","onSlotchange"],"sources":["src/wc/components/SettingRowCheckbox/SettingRowCheckbox.css?tag=ds-setting-row-checkbox&encapsulation=scoped","src/wc/components/SettingRowCheckbox/SettingRowCheckbox.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 checkbox options already own block padding. */\n  padding-block: 0;\n}\n\n/* Light-DOM slotted groups do not receive this component's scoped child class.\n   Target them with ::slotted so view/edit visibility actually applies. */\n:host ::slotted(ds-checkbox-group) {\n  min-width: 0;\n  width: 100%;\n}\n\n:host([presentation='view']) ::slotted(ds-checkbox-group) {\n  display: none !important;\n}\n\n:host([presentation='edit']) .setting-row-checkbox__choice {\n  display: none;\n}\n\nds-text.setting-row-checkbox__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-checkbox__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 SettingRowCheckboxPresentation = 'edit' | 'view';\n\ntype SettingsCheckboxGroup = HTMLElement & {\n  label: string;\n  ariaLabel: string | null;\n  ariaLabelledby?: string;\n};\n\nlet settingRowCheckboxHeadingId = 0;\n\n/** Padded settings-row composition for a Checkbox group. */\n@Component({\n  tag: 'ds-setting-row-checkbox',\n  styleUrl: 'SettingRowCheckbox.css',\n  scoped: true,\n})\nexport class SettingRowCheckbox {\n  @Element() el!: HTMLElement;\n\n  /** Interactive Checkbox group or non-interactive saved-value readout. */\n  @Prop({ reflect: true }) presentation: SettingRowCheckboxPresentation = 'edit';\n  /** Settings heading shown in both presentations. Not CheckboxGroup's form label. */\n  @Prop() label?: string;\n  /** Saved selected-value labels shown in view presentation. */\n  @Prop() valueLabel?: string;\n  /** Optional consequence or supporting copy for the saved selection. */\n  @Prop() description?: string;\n\n  private readonly headingId = `ds-setting-row-checkbox-heading-${++settingRowCheckboxHeadingId}`;\n\n  componentWillLoad() {\n    this.syncSlottedCheckboxGroup();\n  }\n\n  componentDidLoad() {\n    this.syncSlottedCheckboxGroup();\n  }\n\n  private syncSlottedCheckboxGroup = () => {\n    for (const group of this.el.querySelectorAll<SettingsCheckboxGroup>('ds-checkbox-group')) {\n      group.label = '';\n      if (this.label) {\n        group.ariaLabelledby = this.headingId;\n        group.ariaLabel = null;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <ds-text\n          key=\"setting-row-checkbox-heading\"\n          class=\"setting-row-checkbox__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-checkbox-choice\" class=\"setting-row-checkbox__choice\">\n          {this.valueLabel ? (\n            <ds-text key=\"setting-row-checkbox-value\" as=\"span\" variant={CONTROL_TEXT_VARIANT.md}>\n              {this.valueLabel}\n            </ds-text>\n          ) : null}\n          {this.description?.trim() ? (\n            <ds-text\n              key=\"setting-row-checkbox-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.syncSlottedCheckboxGroup} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAwB,IAAM,sqCCWpC,IAAIC,EAA8B,E,MAQrBC,EAAkBC,EAAA,MAAAD,UAAAE,EAL/B,WAAAC,CAAAC,G,4CAS2BC,KAAAC,aAA+C,OAQvDD,KAAAE,UAAY,qCAAqCR,IAU1DM,KAAAG,yBAA2B,KACjC,IAAK,MAAMC,KAASJ,KAAKK,GAAGC,iBAAwC,qBAAsB,CACxFF,EAAMG,MAAQ,GACd,GAAIP,KAAKO,MAAO,CACdH,EAAMI,eAAiBR,KAAKE,UAC5BE,EAAMK,UAAY,I,GAuCzB,CApDC,iBAAAC,GACEV,KAAKG,0B,CAGP,gBAAAQ,GACEX,KAAKG,0B,CAaP,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,WACEE,IAAI,+BACJC,MAAM,gCACNC,GAAG,OACHC,QAASC,EAAqBC,GAC9BC,SAAQ,KACRC,OAAQtB,KAAKO,MAAQP,KAAKE,UAAYqB,WAErCvB,KAAKO,OAERM,EAAA,OAAKE,IAAI,8BAA8BC,MAAM,gCAC1ChB,KAAKwB,WACJX,EAAA,WAASE,IAAI,6BAA6BE,GAAG,OAAOC,QAASC,EAAqBC,IAC/EpB,KAAKwB,YAEN,KACHxB,KAAKyB,aAAaC,OACjBb,EAAA,WACEE,IAAI,mCACJE,GAAG,OACHC,QAASS,EAAgCP,GACzCQ,MAAM,aAEL5B,KAAKyB,aAEN,MAENZ,EAAA,QAAAE,IAAA,2CAAMc,aAAc7B,KAAKG,2B","ignoreList":[]}

package/dist/components/ds-setting-row-radio.d.ts

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

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

@@ -0,0 +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};
+//# sourceMappingURL=ds-setting-row-radio.js.map

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

@@ -0,0 +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":[]}

package/dist/components/ds-setting-row-toggle.d.ts

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

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

@@ -0,0 +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-Cgn-BORA.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};
+//# sourceMappingURL=ds-setting-row-toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["settingRowToggleCss","settingRowToggleSequence","SettingRowToggle","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","checked","disabled","variant","rowId","handleChange","event","stopPropagation","target","dsChange","emit","detail","render","hasDescription","Boolean","description","trim","titleColor","h","Host","key","class","textId","color","emphasis","label","CONTROL_SUPPORTING_TEXT_VARIANT","md","undefined","onDsChange"],"sources":["src/wc/components/SettingRowToggle/SettingRowToggle.css?tag=ds-setting-row-toggle&encapsulation=scoped","src/wc/components/SettingRowToggle/SettingRowToggle.tsx"],"sourcesContent":["@import '../../utils/settings-row.css';\n\n:host {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: start;\n  gap: var(--dimension-space-200);\n}\n\n.setting-row-toggle__copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  -webkit-user-select: none;\n  user-select: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT } from '../../utils';\n\nlet settingRowToggleSequence = 0;\n\nexport type SettingRowToggleVariant = 'emphasis' | 'non-emphasis';\n\n/** A labeled binary setting that applies immediately through its application owner. */\n@Component({\n  tag: 'ds-setting-row-toggle',\n  styleUrl: 'SettingRowToggle.css',\n  scoped: true,\n})\nexport class SettingRowToggle {\n  /** Name of the enabled setting. */\n  @Prop() label!: string;\n  /** Supporting copy explaining the setting and its alternative. */\n  @Prop() description?: string;\n  /** Controlled enabled state. */\n  @Prop() checked = false;\n  /** Prevent changes while the setting is unavailable. */\n  @Prop() disabled = false;\n  /** Typography recipe for the setting copy. */\n  @Prop() variant: SettingRowToggleVariant = 'emphasis';\n\n  /** Requests the next value; the application owns acceptance and persistence. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private readonly rowId = `ds-setting-row-toggle-${++settingRowToggleSequence}`;\n\n  private handleChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    // Keep the composed switch controlled until the owner accepts this request.\n    (event.target as HTMLDsSwitchElement).checked = this.checked;\n    this.dsChange.emit(event.detail);\n  };\n\n  render() {\n    const hasDescription = Boolean(this.description?.trim());\n    const titleColor = this.variant === 'non-emphasis' && !hasDescription ? 'secondary' : 'primary';\n\n    return (\n      <Host>\n        <div class=\"setting-row-toggle__copy\">\n          <ds-text\n            textId={`${this.rowId}-label`}\n            variant=\"text-body-medium\"\n            color={titleColor}\n            emphasis={this.variant === 'emphasis'}\n          >\n            {this.label}\n          </ds-text>\n          {hasDescription && (\n            <ds-text\n              textId={`${this.rowId}-description`}\n              variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n              color=\"secondary\"\n            >\n              {this.description}\n            </ds-text>\n          )}\n        </div>\n        <ds-switch\n          checked={this.checked}\n          disabled={this.disabled}\n          aria-labelledby={`${this.rowId}-label`}\n          aria-describedby={hasDescription ? `${this.rowId}-description` : undefined}\n          onDsChange={this.handleChange}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"oKAAA,MAAMA,EAAsB,IAAM,ugBCGlC,IAAIC,EAA2B,E,MAUlBC,EAAgBC,EAAA,MAAAD,UAAAE,EAL7B,WAAAC,CAAAC,G,+EAWUC,KAAAC,QAAU,MAEVD,KAAAE,SAAW,MAEXF,KAAAG,QAAmC,WAK1BH,KAAAI,MAAQ,2BAA2BV,IAE5CM,KAAAK,aAAgBC,IACtBA,EAAMC,kBAELD,EAAME,OAA+BP,QAAUD,KAAKC,QACrDD,KAAKS,SAASC,KAAKJ,EAAMK,OAAO,CAsCnC,CAnCC,MAAAC,GACE,MAAMC,EAAiBC,QAAQd,KAAKe,aAAaC,QACjD,MAAMC,EAAajB,KAAKG,UAAY,iBAAmBU,EAAiB,YAAc,UAEtF,OACEK,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACTH,EAAA,WAAAE,IAAA,2CACEE,OAAQ,GAAGtB,KAAKI,cAChBD,QAAQ,mBACRoB,MAAON,EACPO,SAAUxB,KAAKG,UAAY,YAE1BH,KAAKyB,OAEPZ,GACCK,EAAA,WAAAE,IAAA,2CACEE,OAAQ,GAAGtB,KAAKI,oBAChBD,QAASuB,EAAgCC,GACzCJ,MAAM,aAELvB,KAAKe,cAIZG,EAAA,aAAAE,IAAA,2CACEnB,QAASD,KAAKC,QACdC,SAAUF,KAAKE,SAAQ,kBACN,GAAGF,KAAKI,cAAa,mBACpBS,EAAiB,GAAGb,KAAKI,oBAAsBwB,UACjEC,WAAY7B,KAAKK,e","ignoreList":[]}