@ds-mo/ui 5.0.0 → 6.0.1

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

@@ -1 +1 @@
-{"version":3,"names":["PANEL_TOOLS_TOOL_IDS","PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_FOOTER_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","help","PANEL_TOOLS_SHORTCUTS","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","orderPanelToolsItems","firstById","Map","item","has","id","set","flatMap","get","isPanelToolsToolId","value","includes","reconcilePanelToolsAvailability","open","activeTool","some","removedTool","panelToolsDrawerResting","motion","resolvePanelToolActivation","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","toolsLabel","toolShortcutsLabel","storageKey","readyForMotion","rovingIndex","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","next","dsToolChange","handleRailKeyDown","e","index","orderedRailItems","length","key","preventDefault","focusRailAt","railItems","headerItem","find","footerItem","bodyItems","filter","ordered","push","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","componentWillLoad","restoreLastActiveTool","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","persistLastActiveTool","storageKeyChanged","componentDidLoad","itemsChanged","reconcileActiveTool","stored","localStorage","getItem","setItem","clearPersistedTool","removeItem","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","isInactive","closeDrawer","bounded","Math","max","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","label","ariaLabel","h","shortcutKey","side","size","variant","class","icon","isActive","activeFill","hasBorder","dot","focusTabIndex","pressed","onFocusin","onKeyDown","onDsClick","render","footerIndex","showDrawerChrome","drawerResting","Host","role","map","bodyIdx","inert","as","emphasis","color","wrap","hidden","name"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=scoped","src/wc/components/PanelTools/PanelTools.tsx"],"sourcesContent":["/** Tool ids for the `ds-panel-tools` rail and drawer views. */\nexport type PanelToolsToolId =\n  | 'search'\n  | 'agents'\n  | 'messages'\n  | 'stacks'\n  | 'activity'\n  | 'help';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n  'search',\n  'agents',\n  'messages',\n  'stacks',\n  'activity',\n  'help',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\n/** Rail footer slot — flush to the bottom of the tools column. */\nexport const PANEL_TOOLS_FOOTER_TOOL_ID: PanelToolsToolId = 'help';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n  search: 'Search',\n  messages: 'Messages',\n  stacks: 'Stacks',\n  activity: 'Activity',\n  agents: 'Agents',\n  help: 'Help & Support',\n};\n\nexport const PANEL_TOOLS_SHORTCUTS: Partial<Record<PanelToolsToolId, string>> = {\n  search: 'K',\n  agents: 'A',\n  messages: 'M',\n  stacks: 'S',\n  activity: 'N',\n  help: '?',\n};\n\nexport interface PanelToolsItem {\n  id: PanelToolsToolId;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Whether this rail button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  isInactive?: boolean;\n  ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport {\n  PANEL_TOOLS_TOOL_IDS,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\n\nexport function parsePanelToolsItems(\n  items: PanelToolsItem[],\n  itemsJson: string,\n): PanelToolsItem[] {\n  if (itemsJson) {\n    return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);\n  }\n  return items ?? [];\n}\n\nexport function orderPanelToolsItems(items: PanelToolsItem[]): PanelToolsItem[] {\n  const firstById = new Map<PanelToolsToolId, PanelToolsItem>();\n  for (const item of items) {\n    if (!firstById.has(item.id)) firstById.set(item.id, item);\n  }\n  return PANEL_TOOLS_TOOL_IDS.flatMap(id => {\n    const item = firstById.get(id);\n    return item ? [item] : [];\n  });\n}\n\nexport function isPanelToolsToolId(value: string | null): value is PanelToolsToolId {\n  return value !== null && PANEL_TOOLS_TOOL_IDS.includes(value as PanelToolsToolId);\n}\n\nexport function reconcilePanelToolsAvailability(\n  items: PanelToolsItem[],\n  open: boolean,\n  activeTool: PanelToolsToolId | '',\n): { open: boolean; activeTool: PanelToolsToolId | ''; removedTool: PanelToolsToolId | '' } {\n  if (!activeTool || items.some(item => item.id === activeTool)) {\n    return { open, activeTool, removedTool: '' };\n  }\n  return { open: false, activeTool: '', removedTool: activeTool };\n}\n\nexport function shouldResyncPanelToolsItems(\n  prev: PanelToolsItem[],\n  next: PanelToolsItem[],\n): boolean {\n  if (prev.length !== next.length) return true;\n  return next.some((item, index) => {\n    const prior = prev[index];\n    if (!prior) return true;\n    return (\n      prior.id !== item.id ||\n      prior.icon !== item.icon ||\n      prior.selected !== item.selected ||\n      prior.dot !== item.dot ||\n      prior.isInactive !== item.isInactive ||\n      prior.ariaLabel !== item.ariaLabel\n    );\n  });\n}\n\nexport type PanelToolsMotion = 'opening' | 'closing' | 'idle';\n\n/** True when the drawer clip is fully closed — safe to skip painting slot content. */\nexport function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {\n  return !open && motion === 'idle';\n}\n\n/** Toggle or switch rail tool selection — repeat activation closes the active tool. */\nexport function resolvePanelToolActivation(\n  open: boolean,\n  activeTool: PanelToolsToolId | '',\n  id: PanelToolsToolId,\n): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {\n  if (open && activeTool === id) {\n    return { open: false, activeTool: id, selected: false };\n  }\n  return { open: true, activeTool: id, selected: true };\n}\n",":host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  --_panel-tools-rail-width: var(--dimension-size-600);\n  --_panel-tools-drawer-width: var(\n    --ds-shell-panel-tools-width,\n    var(--dimension-panel-width-sm)\n  );\n  --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\n  --_panel-tools-surface-bg: var(--color-background-secondary);\n  /* Match panel-nav expand timing (medium-1); easing differs by direction. */\n  --_panel-tools-expand-dur: var(--effect-animation-duration-medium-1, 300ms);\n}\n\n.panel-tools__layout {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: stretch;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n/* Clip frame — only max-width animates (slide reveal, same as pre-rail :host). */\n.panel-tools__drawer {\n  flex: 0 0 auto;\n  max-width: 0;\n  min-width: 0;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  box-sizing: border-box;\n  transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__drawer {\n  max-width: var(--_panel-tools-drawer-width);\n}\n\n.panel-tools__drawer--visible {\n  border-left: var(--_panel-tools-border);\n}\n\n/* Fixed-width surface — AppShell supplies 400px desktop / 300px tablet tokens. */\n.panel-tools__drawer-surface {\n  display: flex;\n  flex-direction: column;\n  width: var(--_panel-tools-drawer-width);\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--_panel-tools-surface-bg);\n}\n\n/* Shell-owned chrome (bg + wash) — drawer + rail are transparent frames. */\n:host-context(ds-app-shell:not([gradient-preset='none'])) .panel-tools__drawer-surface,\n:host-context(ds-app-shell:not([gradient-preset='none'])) .panel-tools__rail {\n  background-color: transparent;\n}\n\n/* Aligns with ds-bar-nav row — same height, inset, border, and title token. */\n.panel-tools__header {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  border-bottom: var(--_panel-tools-border);\n  color: var(--color-foreground-primary);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/*\n * Drawer title — match rail action height (size-400) and BarNav heading inset.\n * Use `ds-text.` so scoped specificity beats Text's `:host(.ds-text--inline-box)`\n * (class-only `.panel-tools__title` ties and loses when Text CSS loads later).\n */\nds-text.panel-tools__title {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/*\n * Fade title + slot body with the drawer slide (same dur/easing).\n * Header border stays opaque — only inner content opacity animates.\n */\nds-text.panel-tools__title,\n.panel-tools__body {\n  opacity: 0;\n  transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) ds-text.panel-tools__title,\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__body {\n  transition: opacity var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) ds-text.panel-tools__title,\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__body {\n  transition: opacity var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) ds-text.panel-tools__title,\n:host(.panel-tools--open) .panel-tools__body {\n  opacity: 1;\n}\n\n.panel-tools__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  position: relative;\n}\n\n/* Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. */\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n  display: none;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  padding: var(--dimension-space-200);\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted(*) {\n  margin: 0;\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n  display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. */\n.panel-tools__rail {\n  flex: 0 0 var(--_panel-tools-rail-width);\n  width: var(--_panel-tools-rail-width);\n  min-width: var(--_panel-tools-rail-width);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  border-left: var(--_panel-tools-border);\n  background-color: var(--_panel-tools-surface-bg);\n}\n\n.panel-tools__rail-header {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n  display: none;\n}\n\n/* Flush to the bottom of the rail — mirrors Search header pin. */\n.panel-tools__rail-footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: auto;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n.panel-tools__rail-action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: var(--dimension-size-400);\n  flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n  PANEL_TOOLS_FOOTER_TOOL_ID,\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_PRIMARY_TOOL_ID,\n  PANEL_TOOLS_SHORTCUTS,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport {\n  isPanelToolsToolId,\n  orderPanelToolsItems,\n  parsePanelToolsItems,\n  panelToolsDrawerResting,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from './panel-tools-utils';\n\n@Component({\n  tag: 'ds-panel-tools',\n  styleUrl: 'PanelTools.css',\n  scoped: true,\n})\nexport class PanelTools {\n  @Element() el!: HTMLElement;\n\n  /** When false, only the icon rail is shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n\n  /**\n   * Rail items rendered in the right column.\n   * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n   */\n  @Prop() items: PanelToolsItem[] = [];\n\n  /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n\n  /**\n   * Optional localStorage key for the last active tool. The drawer always starts\n   * closed; only the tool identity is restored for continuity within this browser.\n   */\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n\n  /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n\n  /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Arms open vs close easing for the in-flight width transition. */\n  @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n  /** Suppresses width transition until the host has painted its initial open state. */\n  @State() private readyForMotion = false;\n\n  @State() private rovingIndex = 0;\n\n  private motionEnableGeneration = 0;\n\n  private get railItems(): PanelToolsItem[] {\n    return parsePanelToolsItems(this.items, this.itemsJson);\n  }\n\n  private get orderedRailItems(): PanelToolsItem[] {\n    const railItems = orderPanelToolsItems(this.railItems);\n    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const footerItem = railItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n    const bodyItems = railItems.filter(\n      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,\n    );\n    const ordered: PanelToolsItem[] = [];\n    if (headerItem) ordered.push(headerItem);\n    ordered.push(...bodyItems);\n    if (footerItem) ordered.push(footerItem);\n    return ordered;\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.motionEnableGeneration += 1;\n  }\n\n  private deferMotionEnable() {\n    if (this.readyForMotion) return;\n    const generation = ++this.motionEnableGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.motionEnableGeneration) return;\n      requestAnimationFrame(() => {\n        if (generation !== this.motionEnableGeneration) return;\n        this.readyForMotion = true;\n      });\n    });\n  }\n\n  connectedCallback() {\n    this.el.addEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentWillLoad() {\n    this.restoreLastActiveTool();\n  }\n\n  @Watch('open')\n  openChanged(isOpen: boolean, wasOpen?: boolean) {\n    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n      this.motion = isOpen ? 'opening' : 'closing';\n      this.dsChromeTransitionStart.emit({\n        source: 'panel-tools',\n        phase: isOpen ? 'opening' : 'closing',\n      });\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.persistLastActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('storageKey')\n  storageKeyChanged() {\n    this.restoreLastActiveTool();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n  }\n\n  @Watch('items')\n  @Watch('itemsJson')\n  itemsChanged() {\n    this.rovingIndex = 0;\n    this.reconcileActiveTool();\n    this.deferMotionEnable();\n  }\n\n  private restoreLastActiveTool() {\n    if (!this.storageKey || this.activeTool) return;\n    try {\n      const stored = localStorage.getItem(this.storageKey);\n      if (isPanelToolsToolId(stored)) this.activeTool = stored;\n    } catch { /* localStorage unavailable */ }\n  }\n\n  private persistLastActiveTool() {\n    if (!this.storageKey || !this.activeTool) return;\n    try { localStorage.setItem(this.storageKey, this.activeTool); } catch { /* unavailable */ }\n  }\n\n  private clearPersistedTool() {\n    if (!this.storageKey) return;\n    try { localStorage.removeItem(this.storageKey); } catch { /* unavailable */ }\n  }\n\n  private reconcileActiveTool() {\n    const next = reconcilePanelToolsAvailability(this.railItems, this.open, this.activeTool);\n    if (!next.removedTool) return;\n    this.clearPersistedTool();\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id: next.removedTool, selected: false });\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n    if (event.propertyName !== 'max-width') return;\n    this.motion = 'idle';\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  };\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.motion === 'closing';\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private headerLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  private focusRailAt(index: number) {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n    const bounded = Math.max(0, Math.min(index, items.length - 1));\n    if (bounded === this.rovingIndex) return;\n    this.rovingIndex = bounded;\n    const actions = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n    );\n    actions[bounded]?.focus({ preventScroll: true });\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToolChange(items[index].id);\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= items.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];\n    return (\n      <ds-tooltip\n        key={item.id}\n        label={label}\n        shortcutKey={PANEL_TOOLS_SHORTCUTS[item.id]}\n        side=\"left\"\n        size=\"sm\"\n      >\n        <ds-button-unfilled variant=\"icon\"\n          class=\"panel-tools__rail-action\"\n          icon={item.icon}\n          isActive={this.isRailSelected(item.id)}\n          activeFill={false}\n          hasBorder={false}\n          dot={item.dot ?? false}\n          isInactive={item.isInactive}\n          focusTabIndex={index === this.rovingIndex ? 0 : -1}\n          aria-label={label}\n          pressed={this.isRailSelected(item.id)}\n          onFocusin={() => { this.rovingIndex = index; }}\n          onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n          onDsClick={() => this.handleToolChange(item.id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const orderedRailItems = this.orderedRailItems;\n    const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const footerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n    const bodyItems = orderedRailItems.filter(\n      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,\n    );\n    const footerIndex = footerItem\n      ? (headerItem ? 1 : 0) + bodyItems.length\n      : -1;\n    const showDrawerChrome = this.isDrawerPresent();\n    const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n\n    return (\n      <Host\n        class={{\n          'panel-tools': true,\n          'panel-tools--open': this.open,\n          'panel-tools--ready': this.readyForMotion,\n          'panel-tools--motion-opening': this.motion === 'opening',\n          'panel-tools--motion-closing': this.motion === 'closing',\n          'panel-tools--drawer-resting': drawerResting,\n        }}\n        role=\"complementary\"\n        aria-label={this.toolsLabel}\n      >\n        <div class=\"panel-tools__layout\">\n          <nav class=\"panel-tools__rail\" aria-label={this.toolShortcutsLabel}>\n            {headerItem ? (\n              <div class=\"panel-tools__rail-header\">\n                {this.renderRailAction(headerItem, 0)}\n              </div>\n            ) : null}\n            <div class=\"panel-tools__rail-body\">\n              {bodyItems.map((item, bodyIdx) =>\n                this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),\n              )}\n            </div>\n            {footerItem ? (\n              <div class=\"panel-tools__rail-footer\">\n                {this.renderRailAction(footerItem, footerIndex)}\n              </div>\n            ) : null}\n          </nav>\n\n          <div\n            class={{\n              'panel-tools__drawer': true,\n              'panel-tools__drawer--visible': showDrawerChrome,\n            }}\n            aria-hidden={showDrawerChrome ? null : 'true'}\n            inert={showDrawerChrome ? undefined : true}\n          >\n            <div class=\"panel-tools__drawer-surface\">\n              <header class=\"panel-tools__header\">\n                <ds-text\n                  class=\"panel-tools__title\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  emphasis\n                  color=\"primary\"\n                  wrap=\"nowrap\"\n                >\n                  {headerLabel}\n                </ds-text>\n              </header>\n              <div class=\"panel-tools__body\">\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('search'),\n                  }}\n                  hidden={!this.isViewActive('search')}\n                >\n                  <slot name=\"search\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('messages'),\n                  }}\n                  hidden={!this.isViewActive('messages')}\n                >\n                  <slot name=\"messages\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('stacks'),\n                  }}\n                  hidden={!this.isViewActive('stacks')}\n                >\n                  <slot name=\"stacks\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('activity'),\n                  }}\n                  hidden={!this.isViewActive('activity')}\n                >\n                  <slot name=\"activity\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('agents'),\n                  }}\n                  hidden={!this.isViewActive('agents')}\n                >\n                  <slot name=\"agents\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('help'),\n                  }}\n                  hidden={!this.isViewActive('help')}\n                >\n                  <slot name=\"help\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["PANEL_TOOLS_TOOL_IDS","PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_FOOTER_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","help","PANEL_TOOLS_SHORTCUTS","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","orderPanelToolsItems","firstById","Map","item","has","id","set","flatMap","get","isPanelToolsToolId","value","includes","reconcilePanelToolsAvailability","open","activeTool","some","removedTool","panelToolsDrawerTransitionMs","style","properties","transitionProperty","split","map","trim","durations","transitionDuration","parseCssTimeMs","delays","transitionDelay","reduce","max","property","index","duration","length","delay","Math","panelToolsDrawerResting","motion","resolvePanelToolActivation","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","toolsLabel","toolShortcutsLabel","storageKey","readyForMotion","rovingIndex","motionEnableGeneration","transitionGeneration","transitionFallbackTimer","ignoreReplacementTerminal","handleTransitionEnd","event","target","el","querySelector","propertyName","finishDrawerTransition","handleToolChange","next","dsToolChange","emit","handleRailKeyDown","e","orderedRailItems","key","preventDefault","focusRailAt","railItems","headerItem","find","footerItem","bodyItems","filter","ordered","push","disconnectedCallback","removeEventListener","clearTransitionCompletion","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","componentWillLoad","restoreLastActiveTool","openChanged","isOpen","wasOpen","undefined","startDrawerTransition","activeToolChanged","persistLastActiveTool","storageKeyChanged","componentDidLoad","itemsChanged","reconcileActiveTool","stored","localStorage","getItem","setItem","clearPersistedTool","removeItem","phase","drawer","widthBefore","getBoundingClientRect","width","dsChromeTransitionStart","source","widthAfter","abs","fallbackMs","getComputedStyle","window","setTimeout","wasTransitioning","dsChromeTransitionEnd","clearTimeout","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","isInactive","closeDrawer","bounded","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","label","ariaLabel","h","shortcutKey","side","size","variant","class","icon","isActive","activeFill","hasBorder","dot","focusTabIndex","pressed","onFocusin","onKeyDown","onDsClick","render","footerIndex","showDrawerChrome","drawerResting","Host","role","bodyIdx","inert","as","emphasis","color","wrap","hidden","name"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=scoped","src/wc/components/PanelTools/PanelTools.tsx"],"sourcesContent":["/** Tool ids for the `ds-panel-tools` rail and drawer views. */\nexport type PanelToolsToolId =\n  | 'search'\n  | 'agents'\n  | 'messages'\n  | 'stacks'\n  | 'activity'\n  | 'help';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n  'search',\n  'agents',\n  'messages',\n  'stacks',\n  'activity',\n  'help',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\n/** Rail footer slot — flush to the bottom of the tools column. */\nexport const PANEL_TOOLS_FOOTER_TOOL_ID: PanelToolsToolId = 'help';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n  search: 'Search',\n  messages: 'Messages',\n  stacks: 'Stacks',\n  activity: 'Activity',\n  agents: 'Agents',\n  help: 'Help & Support',\n};\n\nexport const PANEL_TOOLS_SHORTCUTS: Partial<Record<PanelToolsToolId, string>> = {\n  search: 'K',\n  agents: 'A',\n  messages: 'M',\n  stacks: 'S',\n  activity: 'N',\n  help: '?',\n};\n\nexport interface PanelToolsItem {\n  id: PanelToolsToolId;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Whether this rail button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  isInactive?: boolean;\n  ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport { parseCssTimeMs } from '../../utils/resolve-css-time-ms';\nimport {\n  PANEL_TOOLS_TOOL_IDS,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\n\nexport function parsePanelToolsItems(\n  items: PanelToolsItem[],\n  itemsJson: string,\n): PanelToolsItem[] {\n  if (itemsJson) {\n    return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);\n  }\n  return items ?? [];\n}\n\nexport function orderPanelToolsItems(items: PanelToolsItem[]): PanelToolsItem[] {\n  const firstById = new Map<PanelToolsToolId, PanelToolsItem>();\n  for (const item of items) {\n    if (!firstById.has(item.id)) firstById.set(item.id, item);\n  }\n  return PANEL_TOOLS_TOOL_IDS.flatMap(id => {\n    const item = firstById.get(id);\n    return item ? [item] : [];\n  });\n}\n\nexport function isPanelToolsToolId(value: string | null): value is PanelToolsToolId {\n  return value !== null && PANEL_TOOLS_TOOL_IDS.includes(value as PanelToolsToolId);\n}\n\nexport function reconcilePanelToolsAvailability(\n  items: PanelToolsItem[],\n  open: boolean,\n  activeTool: PanelToolsToolId | '',\n): { open: boolean; activeTool: PanelToolsToolId | ''; removedTool: PanelToolsToolId | '' } {\n  if (!activeTool || items.some(item => item.id === activeTool)) {\n    return { open, activeTool, removedTool: '' };\n  }\n  return { open: false, activeTool: '', removedTool: activeTool };\n}\n\nexport function shouldResyncPanelToolsItems(\n  prev: PanelToolsItem[],\n  next: PanelToolsItem[],\n): boolean {\n  if (prev.length !== next.length) return true;\n  return next.some((item, index) => {\n    const prior = prev[index];\n    if (!prior) return true;\n    return (\n      prior.id !== item.id ||\n      prior.icon !== item.icon ||\n      prior.selected !== item.selected ||\n      prior.dot !== item.dot ||\n      prior.isInactive !== item.isInactive ||\n      prior.ariaLabel !== item.ariaLabel\n    );\n  });\n}\n\nexport type PanelToolsMotion = 'opening' | 'closing' | 'idle';\n\nexport interface PanelToolsTransitionStyle {\n  transitionProperty: string;\n  transitionDuration: string;\n  transitionDelay: string;\n}\n\n/** Maximum computed time for the drawer's max-width transition, including delay. */\nexport function panelToolsDrawerTransitionMs(style: PanelToolsTransitionStyle): number {\n  const properties = style.transitionProperty.split(',').map(item => item.trim());\n  const durations = style.transitionDuration.split(',').map(item => parseCssTimeMs(item.trim(), 0));\n  const delays = style.transitionDelay.split(',').map(item => parseCssTimeMs(item.trim(), 0));\n\n  return properties.reduce((max, property, index) => {\n    if (property !== 'all' && property !== 'max-width') return max;\n    const duration = durations[index % durations.length] ?? 0;\n    const delay = delays[index % delays.length] ?? 0;\n    return Math.max(max, duration + delay, 0);\n  }, 0);\n}\n\n/** True when the drawer clip is fully closed — safe to skip painting slot content. */\nexport function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {\n  return !open && motion === 'idle';\n}\n\n/** Toggle or switch rail tool selection — repeat activation closes the active tool. */\nexport function resolvePanelToolActivation(\n  open: boolean,\n  activeTool: PanelToolsToolId | '',\n  id: PanelToolsToolId,\n): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {\n  if (open && activeTool === id) {\n    return { open: false, activeTool: id, selected: false };\n  }\n  return { open: true, activeTool: id, selected: true };\n}\n",":host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  --_panel-tools-rail-width: var(--dimension-size-600);\n  --_panel-tools-drawer-width: var(\n    --ds-shell-panel-tools-width,\n    var(--dimension-panel-width-sm)\n  );\n  --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\n  --_panel-tools-surface-bg: var(--color-background-secondary);\n  /* Match panel-nav expand timing (medium-1); easing differs by direction. */\n  --_panel-tools-expand-dur: var(--effect-animation-duration-medium-1, 300ms);\n}\n\n.panel-tools__layout {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: stretch;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n/* Clip frame — only max-width animates (slide reveal, same as pre-rail :host). */\n.panel-tools__drawer {\n  flex: 0 0 auto;\n  max-width: 0;\n  min-width: 0;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  box-sizing: border-box;\n  transition: none;\n}\n\n:host(.panel-tools--ready) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in-out, ease);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__drawer {\n  max-width: var(--_panel-tools-drawer-width);\n}\n\n.panel-tools__drawer--visible {\n  border-left: var(--_panel-tools-border);\n}\n\n/* Fixed-width surface — AppShell supplies 400px desktop / 300px tablet tokens. */\n.panel-tools__drawer-surface {\n  display: flex;\n  flex-direction: column;\n  width: var(--_panel-tools-drawer-width);\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--_panel-tools-surface-bg);\n}\n\n/* Shell-owned chrome (bg + wash) — drawer + rail are transparent frames. */\n:host-context(ds-app-shell:not([gradient-preset='none'])) .panel-tools__drawer-surface,\n:host-context(ds-app-shell:not([gradient-preset='none'])) .panel-tools__rail {\n  background-color: transparent;\n}\n\n/* Aligns with ds-bar-nav row — same height, inset, border, and title token. */\n.panel-tools__header {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  border-bottom: var(--_panel-tools-border);\n  color: var(--color-foreground-primary);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/*\n * Drawer title — match rail action height (size-400) and BarNav heading inset.\n * Use `ds-text.` so scoped specificity beats Text's `:host(.ds-text--inline-box)`\n * (class-only `.panel-tools__title` ties and loses when Text CSS loads later).\n */\nds-text.panel-tools__title {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/*\n * Fade title + slot body with the drawer slide (same dur/easing).\n * Header border stays opaque — only inner content opacity animates.\n */\nds-text.panel-tools__title,\n.panel-tools__body {\n  opacity: 0;\n  transition: none;\n}\n\n:host(.panel-tools--ready) ds-text.panel-tools__title,\n:host(.panel-tools--ready) .panel-tools__body {\n  transition: opacity var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in-out, ease);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) ds-text.panel-tools__title,\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__body {\n  transition: opacity var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) ds-text.panel-tools__title,\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__body {\n  transition: opacity var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) ds-text.panel-tools__title,\n:host(.panel-tools--open) .panel-tools__body {\n  opacity: 1;\n}\n\n.panel-tools__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  position: relative;\n}\n\n/* Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. */\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n  display: none;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  padding: var(--dimension-space-200);\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted(*) {\n  margin: 0;\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n  display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. */\n.panel-tools__rail {\n  flex: 0 0 var(--_panel-tools-rail-width);\n  width: var(--_panel-tools-rail-width);\n  min-width: var(--_panel-tools-rail-width);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  border-left: var(--_panel-tools-border);\n  background-color: var(--_panel-tools-surface-bg);\n}\n\n.panel-tools__rail-header {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n  display: none;\n}\n\n/* Flush to the bottom of the rail — mirrors Search header pin. */\n.panel-tools__rail-footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: auto;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n.panel-tools__rail-action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: var(--dimension-size-400);\n  flex-shrink: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer,\n  :host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer,\n  :host(.panel-tools--ready.panel-tools--motion-opening) ds-text.panel-tools__title,\n  :host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__body,\n  :host(.panel-tools--ready.panel-tools--motion-closing) ds-text.panel-tools__title,\n  :host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__body {\n    transition: none;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n  PANEL_TOOLS_FOOTER_TOOL_ID,\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_PRIMARY_TOOL_ID,\n  PANEL_TOOLS_SHORTCUTS,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport {\n  isPanelToolsToolId,\n  orderPanelToolsItems,\n  parsePanelToolsItems,\n  panelToolsDrawerResting,\n  panelToolsDrawerTransitionMs,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from './panel-tools-utils';\n\n@Component({\n  tag: 'ds-panel-tools',\n  styleUrl: 'PanelTools.css',\n  scoped: true,\n})\nexport class PanelTools {\n  @Element() el!: HTMLElement;\n\n  /** When false, only the icon rail is shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n\n  /**\n   * Rail items rendered in the right column.\n   * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n   */\n  @Prop() items: PanelToolsItem[] = [];\n\n  /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n\n  /**\n   * Optional localStorage key for the last active tool. The drawer always starts\n   * closed; only the tool identity is restored for continuity within this browser.\n   */\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n\n  /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n\n  /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Arms open vs close easing for the in-flight width transition. */\n  @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n  /** Suppresses width transition until the host has painted its initial open state. */\n  @State() private readyForMotion = false;\n\n  @State() private rovingIndex = 0;\n\n  private motionEnableGeneration = 0;\n  private transitionGeneration = 0;\n  private transitionFallbackTimer: number | null = null;\n  /** Ignores the old transition's terminal event when reversing direction. */\n  private ignoreReplacementTerminal = false;\n\n  private get railItems(): PanelToolsItem[] {\n    return parsePanelToolsItems(this.items, this.itemsJson);\n  }\n\n  private get orderedRailItems(): PanelToolsItem[] {\n    const railItems = orderPanelToolsItems(this.railItems);\n    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const footerItem = railItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n    const bodyItems = railItems.filter(\n      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,\n    );\n    const ordered: PanelToolsItem[] = [];\n    if (headerItem) ordered.push(headerItem);\n    ordered.push(...bodyItems);\n    if (footerItem) ordered.push(footerItem);\n    return ordered;\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.el.removeEventListener('transitioncancel', this.handleTransitionEnd);\n    this.clearTransitionCompletion();\n    this.motionEnableGeneration += 1;\n  }\n\n  private deferMotionEnable() {\n    if (this.readyForMotion) return;\n    const generation = ++this.motionEnableGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.motionEnableGeneration) return;\n      requestAnimationFrame(() => {\n        if (generation !== this.motionEnableGeneration) return;\n        this.readyForMotion = true;\n      });\n    });\n  }\n\n  connectedCallback() {\n    this.el.addEventListener('transitionend', this.handleTransitionEnd);\n    this.el.addEventListener('transitioncancel', this.handleTransitionEnd);\n  }\n\n  componentWillLoad() {\n    this.restoreLastActiveTool();\n  }\n\n  @Watch('open')\n  openChanged(isOpen: boolean, wasOpen?: boolean) {\n    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n      this.startDrawerTransition(isOpen ? 'opening' : 'closing');\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.persistLastActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('storageKey')\n  storageKeyChanged() {\n    this.restoreLastActiveTool();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n  }\n\n  @Watch('items')\n  @Watch('itemsJson')\n  itemsChanged() {\n    this.rovingIndex = 0;\n    this.reconcileActiveTool();\n    this.deferMotionEnable();\n  }\n\n  private restoreLastActiveTool() {\n    if (!this.storageKey || this.activeTool) return;\n    try {\n      const stored = localStorage.getItem(this.storageKey);\n      if (isPanelToolsToolId(stored)) this.activeTool = stored;\n    } catch { /* localStorage unavailable */ }\n  }\n\n  private persistLastActiveTool() {\n    if (!this.storageKey || !this.activeTool) return;\n    try { localStorage.setItem(this.storageKey, this.activeTool); } catch { /* unavailable */ }\n  }\n\n  private clearPersistedTool() {\n    if (!this.storageKey) return;\n    try { localStorage.removeItem(this.storageKey); } catch { /* unavailable */ }\n  }\n\n  private reconcileActiveTool() {\n    const next = reconcilePanelToolsAvailability(this.railItems, this.open, this.activeTool);\n    if (!next.removedTool) return;\n    this.clearPersistedTool();\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id: next.removedTool, selected: false });\n  }\n\n  private startDrawerTransition(phase: 'opening' | 'closing') {\n    const drawer = this.el.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    const widthBefore = drawer?.getBoundingClientRect().width ?? 0;\n    if (this.motion !== 'idle') {\n      this.finishDrawerTransition();\n      this.ignoreReplacementTerminal = true;\n    }\n    this.motion = phase;\n    this.dsChromeTransitionStart.emit({ source: 'panel-tools', phase });\n    const generation = ++this.transitionGeneration;\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (generation !== this.transitionGeneration || this.motion !== phase) return;\n        if (!drawer) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        const widthAfter = drawer.getBoundingClientRect().width;\n        if (Math.abs(widthAfter - widthBefore) < 1) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        const fallbackMs = panelToolsDrawerTransitionMs(getComputedStyle(drawer));\n        if (fallbackMs <= 0) {\n          this.finishDrawerTransition();\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishDrawerTransition();\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n    if (event.propertyName !== 'max-width') return;\n    if (this.ignoreReplacementTerminal) {\n      this.ignoreReplacementTerminal = false;\n      return;\n    }\n    this.finishDrawerTransition();\n  };\n\n  private finishDrawerTransition() {\n    const wasTransitioning = this.motion !== 'idle';\n    this.clearTransitionCompletion();\n    if (!wasTransitioning) return;\n    this.ignoreReplacementTerminal = false;\n    this.motion = 'idle';\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  }\n\n  private clearTransitionCompletion() {\n    this.transitionGeneration += 1;\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.motion === 'closing';\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private headerLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  private focusRailAt(index: number) {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n    const bounded = Math.max(0, Math.min(index, items.length - 1));\n    if (bounded === this.rovingIndex) return;\n    this.rovingIndex = bounded;\n    const actions = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n    );\n    actions[bounded]?.focus({ preventScroll: true });\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToolChange(items[index].id);\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= items.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];\n    return (\n      <ds-tooltip\n        key={item.id}\n        label={label}\n        shortcutKey={PANEL_TOOLS_SHORTCUTS[item.id]}\n        side=\"left\"\n        size=\"sm\"\n      >\n        <ds-button-unfilled variant=\"icon\"\n          class=\"panel-tools__rail-action\"\n          icon={item.icon}\n          isActive={this.isRailSelected(item.id)}\n          activeFill={false}\n          hasBorder={false}\n          dot={item.dot ?? false}\n          isInactive={item.isInactive}\n          focusTabIndex={index === this.rovingIndex ? 0 : -1}\n          aria-label={label}\n          pressed={this.isRailSelected(item.id)}\n          onFocusin={() => { this.rovingIndex = index; }}\n          onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n          onDsClick={() => this.handleToolChange(item.id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const orderedRailItems = this.orderedRailItems;\n    const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const footerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n    const bodyItems = orderedRailItems.filter(\n      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,\n    );\n    const footerIndex = footerItem\n      ? (headerItem ? 1 : 0) + bodyItems.length\n      : -1;\n    const showDrawerChrome = this.isDrawerPresent();\n    const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n\n    return (\n      <Host\n        class={{\n          'panel-tools': true,\n          'panel-tools--open': this.open,\n          'panel-tools--ready': this.readyForMotion,\n          'panel-tools--motion-opening': this.motion === 'opening',\n          'panel-tools--motion-closing': this.motion === 'closing',\n          'panel-tools--drawer-resting': drawerResting,\n        }}\n        role=\"complementary\"\n        aria-label={this.toolsLabel}\n      >\n        <div class=\"panel-tools__layout\">\n          <nav class=\"panel-tools__rail\" aria-label={this.toolShortcutsLabel}>\n            {headerItem ? (\n              <div class=\"panel-tools__rail-header\">\n                {this.renderRailAction(headerItem, 0)}\n              </div>\n            ) : null}\n            <div class=\"panel-tools__rail-body\">\n              {bodyItems.map((item, bodyIdx) =>\n                this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),\n              )}\n            </div>\n            {footerItem ? (\n              <div class=\"panel-tools__rail-footer\">\n                {this.renderRailAction(footerItem, footerIndex)}\n              </div>\n            ) : null}\n          </nav>\n\n          <div\n            class={{\n              'panel-tools__drawer': true,\n              'panel-tools__drawer--visible': showDrawerChrome,\n            }}\n            aria-hidden={showDrawerChrome ? null : 'true'}\n            inert={showDrawerChrome ? undefined : true}\n          >\n            <div class=\"panel-tools__drawer-surface\">\n              <header class=\"panel-tools__header\">\n                <ds-text\n                  class=\"panel-tools__title\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  emphasis\n                  color=\"primary\"\n                  wrap=\"nowrap\"\n                >\n                  {headerLabel}\n                </ds-text>\n              </header>\n              <div class=\"panel-tools__body\">\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('search'),\n                  }}\n                  hidden={!this.isViewActive('search')}\n                >\n                  <slot name=\"search\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('messages'),\n                  }}\n                  hidden={!this.isViewActive('messages')}\n                >\n                  <slot name=\"messages\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('stacks'),\n                  }}\n                  hidden={!this.isViewActive('stacks')}\n                >\n                  <slot name=\"stacks\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('activity'),\n                  }}\n                  hidden={!this.isViewActive('activity')}\n                >\n                  <slot name=\"activity\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('agents'),\n                  }}\n                  hidden={!this.isViewActive('agents')}\n                >\n                  <slot name=\"agents\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('help'),\n                  }}\n                  hidden={!this.isViewActive('help')}\n                >\n                  <slot name=\"help\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as i,H as e,c as s,h as r,a as t,t as o}from"./index.js";import{d as a}from"./p-CKjNw4Tl.js";const n=()=>`.ds-control-inactive.sc-ds-radio-group-h,.ds-control-inactive.sc-ds-radio-group{opacity:0.25;pointer-events:none;cursor:not-allowed}.group.sc-ds-radio-group{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.group--horizontal.sc-ds-radio-group{flex-direction:row;gap:var(--dimension-space-100)}.radio-item.sc-ds-radio-group{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2);outline:none}.radio-item.sc-ds-radio-group:hover{background-color:var(--color-interaction-hover)}.radio-item.sc-ds-radio-group:active{background-color:var(--color-interaction-pressed)}.radio-item.sc-ds-radio-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.circle.sc-ds-radio-group{width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);flex-shrink:0;border:var(--dimension-stroke-width-018) solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-half);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.circle--checked.sc-ds-radio-group{border-color:var(--color-foreground-primary)}.dot.sc-ds-radio-group{width:var(--dimension-size-150);height:var(--dimension-size-150);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-primary)}.radio-label.sc-ds-radio-group{flex:1;min-width:0}`;const d=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(i?null:this.value);const e=this.required&&!i&&this.value.length===0;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=typeof i==="string"?i:""}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){const e=this.activeItems;if(!e.length)return;const s=e.find((i=>i===document.activeElement));if(!s)return;const r=e.indexOf(s);let t=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();t=(r+1)%e.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();t=(r-1+e.length)%e.length;break;case"Home":i.preventDefault();t=0;break;case"End":i.preventDefault();t=e.length-1;break}if(t>=0){e[t].focus();const i=e[t].dataset["value"];if(i&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}render(){const i=this.isInactive||this.disabled||this.formDisabled;const e=this.options.findIndex((i=>i.value===this.value));const s=this.options.findIndex((e=>!i&&!e.isInactive));const o=e>=0&&!i&&!this.options[e]?.isInactive?e:s;return r(t,{key:"d75054286d25c18c4442549529b37e319e52d748",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,class:{group:true,"group--horizontal":this.direction==="horizontal"}},this.options.map(((e,s)=>{const t=i||!!e.isInactive;const a=e.value===this.value;const n=t?-1:s===o?0:-1;return r("div",{key:e.value,role:"radio","aria-checked":String(a),"aria-disabled":t?"true":undefined,tabIndex:n,"data-radio-item":true,"data-value":e.value,"data-inactive":t||undefined,class:{"radio-item":true,"ds-control-inactive":t},onClick:()=>!t&&this.selectItem(e.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!t){i.preventDefault();this.selectItem(e.value)}}},r("span",{class:{circle:true,"circle--checked":a}},a&&r("span",{class:"dot"})),r("ds-text",{class:"radio-label",as:"span",variant:"text-body-medium"},e.label))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return n()}},[66,"ds-radio-group",{options:[16],value:[1025],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function c(){if(typeof customElements==="undefined"){return}const i=["ds-radio-group","ds-text"];i.forEach((i=>{switch(i){case"ds-radio-group":if(!customElements.get(o(i))){customElements.define(o(i),d)}break;case"ds-text":if(!customElements.get(o(i))){a()}break}}))}c();const l=d;const u=c;export{l as DsRadioGroup,u as defineCustomElement};
+import{p as i,H as e,c as s,h as r,a as o,t}from"./index.js";import{d as a}from"./p-CWd8L7Fk.js";const n=()=>`.ds-control-inactive.sc-ds-radio-group-h,.ds-control-inactive.sc-ds-radio-group{opacity:0.25;pointer-events:none;cursor:not-allowed}.group.sc-ds-radio-group{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.group--horizontal.sc-ds-radio-group{flex-direction:row;gap:var(--dimension-space-100)}.radio-item.sc-ds-radio-group{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2);outline:none}.radio-item.sc-ds-radio-group:hover{background-color:var(--color-interaction-hover)}.radio-item.sc-ds-radio-group:active{background-color:var(--color-interaction-pressed)}.radio-item.sc-ds-radio-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.circle.sc-ds-radio-group{width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);flex-shrink:0;border:var(--dimension-stroke-width-018) solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-half);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:border-color var(--effect-motion-short-2)}.circle--checked.sc-ds-radio-group{border-color:var(--color-foreground-primary)}.dot.sc-ds-radio-group{width:var(--dimension-size-150);height:var(--dimension-size-150);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-primary)}.radio-label.sc-ds-radio-group{flex:1;min-width:0}`;const d=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(i?null:this.value);const e=this.required&&!i&&this.value.length===0;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=typeof i==="string"?i:""}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){const e=this.activeItems;if(!e.length)return;const s=e.find((i=>i===document.activeElement));if(!s)return;const r=e.indexOf(s);let o=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();o=(r+1)%e.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();o=(r-1+e.length)%e.length;break;case"Home":i.preventDefault();o=0;break;case"End":i.preventDefault();o=e.length-1;break}if(o>=0){e[o].focus();const i=e[o].dataset["value"];if(i&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}render(){const i=this.isInactive||this.disabled||this.formDisabled;const e=this.options.findIndex((i=>i.value===this.value));const s=this.options.findIndex((e=>!i&&!e.isInactive));const t=e>=0&&!i&&!this.options[e]?.isInactive?e:s;return r(o,{key:"d75054286d25c18c4442549529b37e319e52d748",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,class:{group:true,"group--horizontal":this.direction==="horizontal"}},this.options.map(((e,s)=>{const o=i||!!e.isInactive;const a=e.value===this.value;const n=o?-1:s===t?0:-1;return r("div",{key:e.value,role:"radio","aria-checked":String(a),"aria-disabled":o?"true":undefined,tabIndex:n,"data-radio-item":true,"data-value":e.value,"data-inactive":o||undefined,class:{"radio-item":true,"ds-control-inactive":o},onClick:()=>!o&&this.selectItem(e.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!o){i.preventDefault();this.selectItem(e.value)}}},r("span",{class:{circle:true,"circle--checked":a}},a&&r("span",{class:"dot"})),r("ds-text",{class:"radio-label",as:"span",variant:"text-body-medium"},e.label))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return n()}},[66,"ds-radio-group",{options:[16],value:[1025],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function c(){if(typeof customElements==="undefined"){return}const i=["ds-radio-group","ds-text"];i.forEach((i=>{switch(i){case"ds-radio-group":if(!customElements.get(t(i))){customElements.define(t(i),d)}break;case"ds-text":if(!customElements.get(t(i))){a()}break}}))}c();const l=d;const u=c;export{l as DsRadioGroup,u as defineCustomElement};
 //# sourceMappingURL=ds-radio-group.js.map

package/dist/components/ds-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["radioGroupCss","RadioGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","disabled","required","requiredMessage","direction","isInactive","ariaLabel","initialValue","formDisabled","componentWillLoad","syncFormValue","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","activeItems","Array","from","el","querySelectorAll","handleKeyDown","e","items","focused","find","item","document","activeElement","idx","indexOf","next","key","preventDefault","focus","nextValue","dataset","dsChange","emit","selectItem","optValue","render","selectedIdx","findIndex","o","firstActiveIdx","focusableIdx","h","Host","role","ariaLabelledby","class","group","map","opt","i","isItemInactive","isChecked","tabIdx","String","undefined","tabIndex","onClick","onKeyDown","circle","as","variant","label"],"sources":["src/wc/components/RadioGroup/RadioGroup.css?tag=ds-radio-group&encapsulation=scoped","src/wc/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n.group--horizontal {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n/* ── Radio item ──────────────────────────────────────────────────────────── */\n\n.radio-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  height: var(--dimension-size-400);\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--dimension-radius-075);\n  transition: background-color var(--effect-motion-short-2);\n  outline: none;\n}\n\n.radio-item:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.radio-item:active {\n  background-color: var(--color-interaction-pressed);\n}\n\n.radio-item:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* ── Circle indicator ────────────────────────────────────────────────────── */\n\n.circle {\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n  flex-shrink: 0;\n  border: var(--dimension-stroke-width-018) solid var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-half);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  transition: all var(--effect-motion-short-2);\n}\n\n.circle--checked {\n  border-color: var(--color-foreground-primary);\n}\n\n.dot {\n  width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-primary);\n}\n\n/* ── Label ───────────────────────────────────────────────────────────────── */\n\n.radio-label {\n  flex: 1;\n  min-width: 0;\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\n\nexport interface RadioOption {\n  label: string;\n  value: string;\n  isInactive?: boolean;\n}\n\n@Component({\n  tag: 'ds-radio-group',\n  styleUrl: 'RadioGroup.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class RadioGroup {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  @Prop() options: RadioOption[] = [];\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = 'This field is required.';\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n  @Prop() isInactive: boolean = false;\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 initialValue = '';\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(inactive ? null : this.value);\n    const missing = this.required && !inactive && this.value.length === 0;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  private get activeItems(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])'));\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const items = this.activeItems;\n    if (!items.length) return;\n\n    const focused = items.find(item => item === document.activeElement);\n    if (!focused) return;\n\n    const idx = items.indexOf(focused);\n    let next = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        e.preventDefault();\n        next = (idx + 1) % items.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        e.preventDefault();\n        next = (idx - 1 + items.length) % items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = items.length - 1;\n        break;\n    }\n\n    if (next >= 0) {\n      items[next].focus();\n      const nextValue = items[next].dataset['value'];\n      if (nextValue && nextValue !== this.value) {\n        this.value = nextValue;\n        this.dsChange.emit(nextValue);\n      }\n    }\n  }\n\n  private selectItem(optValue: string) {\n    if (this.isInactive || this.disabled || this.formDisabled) return;\n    if (optValue !== this.value) {\n      this.value = optValue;\n      this.dsChange.emit(optValue);\n    }\n  }\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const selectedIdx = this.options.findIndex(o => o.value === this.value);\n    const firstActiveIdx = this.options.findIndex(o => !inactive && !o.isInactive);\n    const focusableIdx = selectedIdx >= 0 && !inactive && !this.options[selectedIdx]?.isInactive\n      ? selectedIdx\n      : firstActiveIdx;\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        class={{ group: true, 'group--horizontal': this.direction === 'horizontal' }}\n      >\n        {this.options.map((opt, i) => {\n          const isItemInactive = inactive || !!opt.isInactive;\n          const isChecked = opt.value === this.value;\n          const tabIdx = isItemInactive ? -1 : (i === focusableIdx ? 0 : -1);\n\n          return (\n            <div\n              key={opt.value}\n              role=\"radio\"\n              aria-checked={String(isChecked)}\n              aria-disabled={isItemInactive ? 'true' : undefined}\n              tabIndex={tabIdx}\n              data-radio-item\n              data-value={opt.value}\n              data-inactive={isItemInactive || undefined}\n              class={{ 'radio-item': true, 'ds-control-inactive': isItemInactive }}\n              onClick={() => !isItemInactive && this.selectItem(opt.value)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n                  e.preventDefault();\n                  this.selectItem(opt.value);\n                }\n              }}\n            >\n              <span class={{ circle: true, 'circle--checked': isChecked }}>\n                {isChecked && <span class=\"dot\" />}\n              </span>\n              <ds-text class=\"radio-label\" as=\"span\" variant=\"text-body-medium\">\n                {opt.label}\n              </ds-text>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["radioGroupCss","RadioGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","disabled","required","requiredMessage","direction","isInactive","ariaLabel","initialValue","formDisabled","componentWillLoad","syncFormValue","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","activeItems","Array","from","el","querySelectorAll","handleKeyDown","e","items","focused","find","item","document","activeElement","idx","indexOf","next","key","preventDefault","focus","nextValue","dataset","dsChange","emit","selectItem","optValue","render","selectedIdx","findIndex","o","firstActiveIdx","focusableIdx","h","Host","role","ariaLabelledby","class","group","map","opt","i","isItemInactive","isChecked","tabIdx","String","undefined","tabIndex","onClick","onKeyDown","circle","as","variant","label"],"sources":["src/wc/components/RadioGroup/RadioGroup.css?tag=ds-radio-group&encapsulation=scoped","src/wc/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n.group--horizontal {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n/* ── Radio item ──────────────────────────────────────────────────────────── */\n\n.radio-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  height: var(--dimension-size-400);\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--dimension-radius-075);\n  transition: background-color var(--effect-motion-short-2);\n  outline: none;\n}\n\n.radio-item:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.radio-item:active {\n  background-color: var(--color-interaction-pressed);\n}\n\n.radio-item:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* ── Circle indicator ────────────────────────────────────────────────────── */\n\n.circle {\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n  flex-shrink: 0;\n  border: var(--dimension-stroke-width-018) solid var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-half);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  transition: border-color var(--effect-motion-short-2);\n}\n\n.circle--checked {\n  border-color: var(--color-foreground-primary);\n}\n\n.dot {\n  width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-primary);\n}\n\n/* ── Label ───────────────────────────────────────────────────────────────── */\n\n.radio-label {\n  flex: 1;\n  min-width: 0;\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\n\nexport interface RadioOption {\n  label: string;\n  value: string;\n  isInactive?: boolean;\n}\n\n@Component({\n  tag: 'ds-radio-group',\n  styleUrl: 'RadioGroup.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class RadioGroup {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  @Prop() options: RadioOption[] = [];\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = 'This field is required.';\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n  @Prop() isInactive: boolean = false;\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 initialValue = '';\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(inactive ? null : this.value);\n    const missing = this.required && !inactive && this.value.length === 0;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  private get activeItems(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])'));\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const items = this.activeItems;\n    if (!items.length) return;\n\n    const focused = items.find(item => item === document.activeElement);\n    if (!focused) return;\n\n    const idx = items.indexOf(focused);\n    let next = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        e.preventDefault();\n        next = (idx + 1) % items.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        e.preventDefault();\n        next = (idx - 1 + items.length) % items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = items.length - 1;\n        break;\n    }\n\n    if (next >= 0) {\n      items[next].focus();\n      const nextValue = items[next].dataset['value'];\n      if (nextValue && nextValue !== this.value) {\n        this.value = nextValue;\n        this.dsChange.emit(nextValue);\n      }\n    }\n  }\n\n  private selectItem(optValue: string) {\n    if (this.isInactive || this.disabled || this.formDisabled) return;\n    if (optValue !== this.value) {\n      this.value = optValue;\n      this.dsChange.emit(optValue);\n    }\n  }\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const selectedIdx = this.options.findIndex(o => o.value === this.value);\n    const firstActiveIdx = this.options.findIndex(o => !inactive && !o.isInactive);\n    const focusableIdx = selectedIdx >= 0 && !inactive && !this.options[selectedIdx]?.isInactive\n      ? selectedIdx\n      : firstActiveIdx;\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        class={{ group: true, 'group--horizontal': this.direction === 'horizontal' }}\n      >\n        {this.options.map((opt, i) => {\n          const isItemInactive = inactive || !!opt.isInactive;\n          const isChecked = opt.value === this.value;\n          const tabIdx = isItemInactive ? -1 : (i === focusableIdx ? 0 : -1);\n\n          return (\n            <div\n              key={opt.value}\n              role=\"radio\"\n              aria-checked={String(isChecked)}\n              aria-disabled={isItemInactive ? 'true' : undefined}\n              tabIndex={tabIdx}\n              data-radio-item\n              data-value={opt.value}\n              data-inactive={isItemInactive || undefined}\n              class={{ 'radio-item': true, 'ds-control-inactive': isItemInactive }}\n              onClick={() => !isItemInactive && this.selectItem(opt.value)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n                  e.preventDefault();\n                  this.selectItem(opt.value);\n                }\n              }}\n            >\n              <span class={{ circle: true, 'circle--checked': isChecked }}>\n                {isChecked && <span class=\"dot\" />}\n              </span>\n              <ds-text class=\"radio-label\" as=\"span\" variant=\"text-body-medium\">\n                {opt.label}\n              </ds-text>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-select.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as i,a as o,t as n}from"./index.js";import{d as r}from"./p-K6uLVQKX.js";import{d as c}from"./p-9Qu1ls2y.js";import{d as a}from"./p-BieM8MH5.js";import{d}from"./p-ZdSNIObv.js";import{d as l}from"./p-CRrGwSt7.js";import{d as h}from"./p-CKjNw4Tl.js";import{r as f}from"./p-BWUTr_XN.js";import{C as u}from"./p-Cx-ywr1e.js";import{T as g}from"./p-drBA73M_.js";import{c as v}from"./p-DuFm-ieS.js";const m=()=>`.sc-ds-select-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-select:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-select{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-select-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.select-host.sc-ds-select-h{display:inline-flex;position:relative;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.ds-control-width--hug.sc-ds-select-h .trigger__label.sc-ds-select{flex:0 1 auto}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--bordered.sc-ds-select:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select,.trigger--open.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.trigger__chevron.sc-ds-select{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-select-fg)}`;const b={md:"md",sm:"sm",xs:"xs"};const p=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.placeholder="Select";this.size="md";this.width="fill";this.isInactive=false;this.activeFill=true;this.hasBorder=true;this.ariaLabel=null;this.isOpen=false;this.triggerEl=null;this.menuEl=null;this.openWithFocusVisible=false;this.initialValue="";this.formDisabled=false;this.handleMenuSelect=s=>{const e=s.detail;if(e?.value!==undefined){this.value=String(e.value);this.dsChange.emit(this.value)}this.close()};this.handleMenuClose=()=>{this.close()}}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.addEventListener("dsClose",this.handleMenuClose);this.syncMenuItems()}disconnectedCallback(){this.menuEl?.removeEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.removeEventListener("dsClose",this.handleMenuClose)}onIsOpenChange(s){if(!this.menuEl)return;this.menuEl.initialFocusVisible=s&&this.openWithFocusVisible;this.menuEl.open=s}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncFormValue(){const s=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(s?null:this.value);const e=this.required&&!s&&this.value.length===0;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(s){this.value=typeof s==="string"?s:""}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((s=>({label:s.label,value:s.value,isSelected:s.value===this.value})))}syncMenuLayout(){if(!this.menuEl||!this.triggerEl)return;const s=f(g.space050,g.space050);const e=this.triggerEl.offsetWidth;this.menuEl.menuWidth="";this.menuEl.minWidth=`${e+s*2}px`;this.menuEl.alignOffset=-s;this.menuEl.anchor=this.triggerEl}open(s={focusVisible:false}){if(this.isInactive||this.disabled||this.formDisabled||!this.options.length)return;this.openWithFocusVisible=s.focusVisible;this.syncMenuLayout();this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false;this.openWithFocusVisible=false}toggle(s){if(this.isOpen){this.close()}else{this.open(s)}}handleKeyDown(s){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(s.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":s.preventDefault();this.open({focusVisible:true});break}}else if(s.key==="Escape"){s.preventDefault();this.close();this.triggerEl?.focus()}}get selectedLabel(){return this.options.find((s=>s.value===this.value))?.label??""}get hasSelection(){return this.options.some((s=>s.value===this.value))}render(){const s=this.isInactive||this.disabled||this.formDisabled;const e=!this.hasSelection;const t=!e;const n=e?this.placeholder:this.selectedLabel;const r=u[this.size];const c=b[this.size];const a=`ds-control--${this.size}`;const d=!s&&this.activeFill&&(t||this.isOpen);return i(o,{key:"d1bb8d87c222cf87f2167a23974f9638a29b9e7c",class:{"select-host":true,"ds-control-inactive":s,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...v(this.width)}},i("button",{key:"e136da41be27359ed1a897132b99f89d4245cadd",ref:s=>{this.triggerEl=s??null},type:"button",class:{trigger:true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":d,"trigger--open":this.isOpen,"trigger--bordered":this.hasBorder,"trigger--placeholder":e,"trigger--has-value":t,[a]:true},disabled:s,role:"combobox","aria-haspopup":"menu","aria-expanded":String(this.isOpen),"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle({focusVisible:false})},i("ds-text",{key:"f1fda66a9838dd4930b9587d31297a7e19159062",class:"trigger__label ds-interaction-fill__content",as:"span",variant:r,color:"inherit",lineTruncation:1},n),i("span",{key:"2e71a62b22e9f7bf53d7fba2957af83c90b7558c",class:"trigger__chevron ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"0ca4c47cc7c28fa655bd7c5ba42fbdecda3d4544",name:"ChevronDown",size:c,color:"inherit"}))),i("ds-menu",{key:"5f65cc822970abe74aa46754225e306af9a13aee",ref:s=>{this.menuEl=s??null},side:"bottom",align:"start"}))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0},{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return m()}},[66,"ds-select",{options:[16],value:[1025],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0},{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function w(){if(typeof customElements==="undefined"){return}const s=["ds-select","ds-badge","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-text"];s.forEach((s=>{switch(s){case"ds-select":if(!customElements.get(n(s))){customElements.define(n(s),p)}break;case"ds-badge":if(!customElements.get(n(s))){r()}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-menu":if(!customElements.get(n(s))){a()}break;case"ds-shell-gradient-picker":if(!customElements.get(n(s))){d()}break;case"ds-shell-gradient-swatch":if(!customElements.get(n(s))){l()}break;case"ds-text":if(!customElements.get(n(s))){h()}break}}))}w();const y=p;const k=w;export{y as DsSelect,k as defineCustomElement};
+import{p as s,H as e,c as i,h as t,a as o,t as n}from"./index.js";import{d as r}from"./p-cgo-rgl4.js";import{d as c}from"./p-9Qu1ls2y.js";import{d as a}from"./p-B5kfuVQz.js";import{d}from"./p-RBe9XqjU.js";import{d as l}from"./p-DHwtgzjP.js";import{d as h}from"./p-DhgDNluD.js";import{d as f}from"./p-CWd8L7Fk.js";import{r as u}from"./p-BWUTr_XN.js";import{C as v}from"./p-Cx-ywr1e.js";import{T as g}from"./p-drBA73M_.js";import{c as m}from"./p-DuFm-ieS.js";const b=()=>`.sc-ds-select-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-select-h:focus-visible,.ds-focus-ring.sc-ds-select:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-select-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-select{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-select-h:focus-visible,.ds-focus-ring-inset.sc-ds-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-select:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-select-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-select-h,.ds-interaction-fill--on-translucent.sc-ds-select{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-select-h,.ds-interaction-fill--on-inverted.sc-ds-select{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-select-h,.ds-interaction-fill--on-media.sc-ds-select{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.select-host.sc-ds-select-h{display:inline-flex;position:relative;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.ds-control-width--hug.sc-ds-select-h .trigger__label.sc-ds-select{flex:0 1 auto}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--bordered.sc-ds-select:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.trigger__chevron.sc-ds-select{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-select-fg)}`;const p={md:"md",sm:"sm",xs:"xs"};const w=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.placeholder="Select";this.size="md";this.width="fill";this.isInactive=false;this.activeFill=true;this.hasBorder=true;this.ariaLabel=null;this.isOpen=false;this.triggerEl=null;this.menuEl=null;this.openWithFocusVisible=false;this.initialValue="";this.formDisabled=false;this.handleMenuSelect=s=>{const e=s.detail;if(e?.value!==undefined){this.value=String(e.value);this.dsChange.emit(this.value)}this.close()};this.handleMenuClose=()=>{this.close()}}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.addEventListener("dsClose",this.handleMenuClose);this.syncMenuItems()}disconnectedCallback(){this.menuEl?.removeEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.removeEventListener("dsClose",this.handleMenuClose)}onIsOpenChange(s){if(!this.menuEl)return;this.menuEl.initialFocusVisible=s&&this.openWithFocusVisible;this.menuEl.open=s}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncFormValue(){const s=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(s?null:this.value);const e=this.required&&!s&&this.value.length===0;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(s){this.value=typeof s==="string"?s:""}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((s=>({label:s.label,value:s.value,isSelected:s.value===this.value})))}syncMenuLayout(){if(!this.menuEl||!this.triggerEl)return;const s=u(g.space050,g.space050);const e=this.triggerEl.offsetWidth;this.menuEl.menuWidth="";this.menuEl.minWidth=`${e+s*2}px`;this.menuEl.alignOffset=-s;this.menuEl.anchor=this.triggerEl}open(s={focusVisible:false}){if(this.isInactive||this.disabled||this.formDisabled||!this.options.length)return;this.openWithFocusVisible=s.focusVisible;this.syncMenuLayout();this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false;this.openWithFocusVisible=false}toggle(s){if(this.isOpen){this.close()}else{this.open(s)}}handleKeyDown(s){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(s.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":s.preventDefault();this.open({focusVisible:true});break}}else if(s.key==="Escape"){s.preventDefault();this.close();this.triggerEl?.focus()}}get selectedLabel(){return this.options.find((s=>s.value===this.value))?.label??""}get hasSelection(){return this.options.some((s=>s.value===this.value))}render(){const s=this.isInactive||this.disabled||this.formDisabled;const e=!this.hasSelection;const i=!e;const n=e?this.placeholder:this.selectedLabel;const r=v[this.size];const c=p[this.size];const a=`ds-control--${this.size}`;const d=!s&&this.activeFill&&i;return t(o,{key:"7a0ef82ee0b5d4c786a99b0dfa48897c74a4538d",class:{"select-host":true,"ds-control-inactive":s,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...m(this.width)}},t("button",{key:"98747536ae05a00dca7d2f031be4aff9b5609b04",ref:s=>{this.triggerEl=s??null},type:"button",class:{trigger:true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":d,"trigger--bordered":this.hasBorder,"trigger--placeholder":e,"trigger--has-value":i,[a]:true},disabled:s,role:"combobox","aria-haspopup":"menu","aria-expanded":String(this.isOpen),"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle({focusVisible:false})},t("ds-text",{key:"c8177c52fa72f1b6bb65201717ee08e851140659",class:"trigger__label ds-interaction-fill__content",as:"span",variant:r,color:"inherit",lineTruncation:1},n),t("span",{key:"d88ffc00ea76224ab7d2db19be013c696168ee20",class:"trigger__chevron ds-interaction-fill__content","aria-hidden":"true"},t("ds-icon",{key:"4cd2ae8c509e357098ccbb45c05665a0260711aa",name:"ChevronDown",size:c,color:"inherit"}))),t("ds-menu",{key:"232a28cc998bfa8312414d06e5444b3573b818e8",ref:s=>{this.menuEl=s??null},side:"bottom",align:"start"}))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0},{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return b()}},[66,"ds-select",{options:[16],value:[1025],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0},{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function k(){if(typeof customElements==="undefined"){return}const s=["ds-select","ds-badge","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-switch","ds-text"];s.forEach((s=>{switch(s){case"ds-select":if(!customElements.get(n(s))){customElements.define(n(s),w)}break;case"ds-badge":if(!customElements.get(n(s))){r()}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-menu":if(!customElements.get(n(s))){a()}break;case"ds-shell-gradient-picker":if(!customElements.get(n(s))){d()}break;case"ds-shell-gradient-swatch":if(!customElements.get(n(s))){l()}break;case"ds-switch":if(!customElements.get(n(s))){h()}break;case"ds-text":if(!customElements.get(n(s))){f()}break}}))}k();const y=w;const x=k;export{y as DsSelect,x as defineCustomElement};
 //# sourceMappingURL=ds-select.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["selectCss","ICON_SIZE","md","sm","xs","Select","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","disabled","required","requiredMessage","placeholder","size","width","isInactive","activeFill","hasBorder","ariaLabel","isOpen","triggerEl","menuEl","openWithFocusVisible","initialValue","formDisabled","handleMenuSelect","e","detail","undefined","String","dsChange","emit","close","handleMenuClose","componentWillLoad","syncFormValue","componentDidLoad","anchor","addEventListener","syncMenuItems","disconnectedCallback","removeEventListener","onIsOpenChange","open","initialFocusVisible","onOptionsChange","onValueChange","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","items","map","opt","label","isSelected","syncMenuLayout","sectionPadPx","resolveCssLengthPx","TOKEN_DEFAULTS","space050","triggerW","offsetWidth","menuWidth","minWidth","alignOffset","opts","focusVisible","toggle","handleKeyDown","document","activeElement","key","preventDefault","focus","selectedLabel","find","o","hasSelection","some","render","showPlaceholder","hasValue","textVariant","CONTROL_TEXT_VARIANT","iconSize","density","showSelectedFill","h","Host","class","controlWidthClass","ref","el","type","trigger","role","ariaLabelledby","onClick","as","variant","color","lineTruncation","name","side","align"],"sources":["src/wc/components/Select/Select.css?tag=ds-select&encapsulation=scoped","src/wc/components/Select/Select.tsx"],"sourcesContent":["/* ==========================================================================\n   Select — unfilled-button chrome trigger + ds-menu dropdown.\n   Density via `.ds-control--md|sm|xs` (control-density.css).\n   ========================================================================== */\n\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host(.select-host) {\n  display: inline-flex;\n  position: relative;\n  /* Idle = secondary. Selected/open: label → primary; chevron stays secondary. */\n  --ds-select-fg: var(--color-foreground-secondary);\n  --ds-select-fg-active: var(--color-foreground-primary);\n  --ds-select-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill) .trigger {\n  width: 100%;\n}\n\n:host(.ds-control-width--hug) .trigger__label {\n  flex: 0 1 auto;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-select-fg);\n  cursor: pointer;\n  font-family: inherit;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected`).\n     Selected/open: label → primary; chevron stays secondary. */\n}\n\n/* Inset stroke via interaction-fill ::after (same recipe as ButtonUnfilled). */\n.trigger--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-select-border);\n}\n\n.trigger--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n.trigger__label {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  color: inherit;\n  transition: color var(--effect-motion-short-2);\n}\n\n.trigger--has-value .trigger__label,\n.trigger--open .trigger__label {\n  color: var(--ds-select-fg-active);\n}\n\n.trigger__chevron {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Always secondary — only the label promotes on selected/open. */\n  color: var(--ds-select-fg);\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  resolveCssLengthPx,\n  TOKEN_DEFAULTS,\n  type ControlWidth,\n} from '../../utils';\nimport type { MenuItemData } from '../Menu/menu-types';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\nexport type SelectSize = 'md' | 'sm' | 'xs';\n\nexport type SelectWidth = ControlWidth;\n\n/** `ds-icon` size matching control-density icon metrics. */\nconst ICON_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in\n * control-density sizes, with `ds-menu` for the option list.\n */\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Array of options. Set via JS property.\n   * @example el.options = [{ label: 'Apple', value: 'apple' }];\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /** Currently selected value. */\n  @Prop({ mutable: true }) value: string = '';\n\n  @Prop({ reflect: true }) name: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) required: boolean = false;\n\n  @Prop() requiredMessage: string = 'This field is required.';\n\n  /** Placeholder shown when no value is selected. */\n  @Prop() placeholder: string = 'Select';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: SelectSize = 'md';\n\n  /** Width fit — fill the parent (default) or hug content. */\n  @Prop() width: SelectWidth = 'fill';\n\n  /** Disables interaction (25% opacity via ds-control-inactive). */\n  @Prop() isInactive: boolean = false;\n\n  /**\n   * When a value is selected, render the selected interaction fill (same recipe\n   * as unfilled-button `activeFill`). Default `true`. Pass `false` for\n   * foreground-only selection (primary label, no fill).\n   * Selected/open promotes the label to primary; chevron stays secondary.\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on (matches unfilled button). */\n  @Prop() hasBorder: boolean = true;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  /** Emits the selected value string. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private isOpen: boolean = false;\n\n  private triggerEl: HTMLButtonElement | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n  /** True when the open was keyboard-driven — menu shows initial focus ring. */\n  private openWithFocusVisible = false;\n  private initialValue = '';\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n    }\n    this.menuEl?.addEventListener('dsSelect', this.handleMenuSelect);\n    this.menuEl?.addEventListener('dsClose', this.handleMenuClose);\n    this.syncMenuItems();\n  }\n\n  disconnectedCallback() {\n    this.menuEl?.removeEventListener('dsSelect', this.handleMenuSelect);\n    this.menuEl?.removeEventListener('dsClose', this.handleMenuClose);\n  }\n\n  @Watch('isOpen')\n  onIsOpenChange(open: boolean) {\n    if (!this.menuEl) return;\n    this.menuEl.initialFocusVisible = open && this.openWithFocusVisible;\n    this.menuEl.open = open;\n  }\n\n  @Watch('options')\n  onOptionsChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(inactive ? null : this.value);\n    const missing = this.required && !inactive && this.value.length === 0;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  private handleMenuSelect = (e: Event) => {\n    const detail = (e as CustomEvent<MenuItemData>).detail;\n    if (detail?.value !== undefined) {\n      this.value = String(detail.value);\n      this.dsChange.emit(this.value);\n    }\n    this.close();\n  };\n\n  private handleMenuClose = () => {\n    this.close();\n  };\n\n  private syncMenuItems() {\n    if (!this.menuEl) return;\n    this.menuEl.items = this.options.map(opt => ({\n      label: opt.label,\n      value: opt.value,\n      isSelected: opt.value === this.value,\n    }));\n  }\n\n  /**\n   * Size/place the menu so option labels line up with the select label.\n   * Menu section padding insets items; we expand min-width by that chrome and\n   * shift left by the same amount (`alignOffset`). Menu can grow wider than\n   * the field (left-bottom / `align=\"start\"`) when labels need more room.\n   */\n  private syncMenuLayout() {\n    if (!this.menuEl || !this.triggerEl) return;\n    const sectionPadPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n    const triggerW = this.triggerEl.offsetWidth;\n    // Prefer min-width over fixed width so long options can grow the menu.\n    this.menuEl.menuWidth = '';\n    this.menuEl.minWidth = `${triggerW + sectionPadPx * 2}px`;\n    this.menuEl.alignOffset = -sectionPadPx;\n    this.menuEl.anchor = this.triggerEl;\n  }\n\n  private open(opts: { focusVisible: boolean } = { focusVisible: false }) {\n    if (this.isInactive || this.disabled || this.formDisabled || !this.options.length) return;\n    this.openWithFocusVisible = opts.focusVisible;\n    this.syncMenuLayout();\n    this.syncMenuItems();\n    this.isOpen = true;\n  }\n\n  private close() {\n    this.isOpen = false;\n    this.openWithFocusVisible = false;\n  }\n\n  private toggle(opts: { focusVisible: boolean }) {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open(opts);\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (document.activeElement !== this.triggerEl) return;\n\n    if (!this.isOpen) {\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          this.open({ focusVisible: true });\n          break;\n      }\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      this.triggerEl?.focus();\n    }\n  }\n\n  private get selectedLabel(): string {\n    return this.options.find(o => o.value === this.value)?.label ?? '';\n  }\n\n  private get hasSelection(): boolean {\n    return this.options.some(o => o.value === this.value);\n  }\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const showPlaceholder = !this.hasSelection;\n    const hasValue = !showPlaceholder;\n    const label = showPlaceholder ? this.placeholder : this.selectedLabel;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const density = `ds-control--${this.size}`;\n    // Selected fill when a value is set (or while open), gated by `activeFill`.\n    const showSelectedFill =\n      !inactive && this.activeFill && (hasValue || this.isOpen);\n\n    return (\n      <Host\n        class={{\n          'select-host': true,\n          'ds-control-inactive': inactive,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n      >\n        <button\n          ref={el => {\n            this.triggerEl = (el as HTMLButtonElement) ?? null;\n          }}\n          type=\"button\"\n          class={{\n            trigger: true,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--selected': showSelectedFill,\n            'trigger--open': this.isOpen,\n            'trigger--bordered': this.hasBorder,\n            'trigger--placeholder': showPlaceholder,\n            'trigger--has-value': hasValue,\n            [density]: true,\n          }}\n          disabled={inactive}\n          role=\"combobox\"\n          aria-haspopup=\"menu\"\n          aria-expanded={String(this.isOpen)}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          onClick={() => this.toggle({ focusVisible: false })}\n        >\n          <ds-text\n            class=\"trigger__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant={textVariant}\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {label}\n          </ds-text>\n          <span class=\"trigger__chevron ds-interaction-fill__content\" aria-hidden=\"true\">\n            <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n          </span>\n        </button>\n        {/* bottom + start: left-aligned under the field; wider menus grow right. */}\n        <ds-menu\n          ref={el => {\n            this.menuEl = (el as HTMLDsMenuElement) ?? null;\n          }}\n          side=\"bottom\"\n          align=\"start\"\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["selectCss","ICON_SIZE","md","sm","xs","Select","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","disabled","required","requiredMessage","placeholder","size","width","isInactive","activeFill","hasBorder","ariaLabel","isOpen","triggerEl","menuEl","openWithFocusVisible","initialValue","formDisabled","handleMenuSelect","e","detail","undefined","String","dsChange","emit","close","handleMenuClose","componentWillLoad","syncFormValue","componentDidLoad","anchor","addEventListener","syncMenuItems","disconnectedCallback","removeEventListener","onIsOpenChange","open","initialFocusVisible","onOptionsChange","onValueChange","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","items","map","opt","label","isSelected","syncMenuLayout","sectionPadPx","resolveCssLengthPx","TOKEN_DEFAULTS","space050","triggerW","offsetWidth","menuWidth","minWidth","alignOffset","opts","focusVisible","toggle","handleKeyDown","document","activeElement","key","preventDefault","focus","selectedLabel","find","o","hasSelection","some","render","showPlaceholder","hasValue","textVariant","CONTROL_TEXT_VARIANT","iconSize","density","showSelectedFill","h","Host","class","controlWidthClass","ref","el","type","trigger","role","ariaLabelledby","onClick","as","variant","color","lineTruncation","name","side","align"],"sources":["src/wc/components/Select/Select.css?tag=ds-select&encapsulation=scoped","src/wc/components/Select/Select.tsx"],"sourcesContent":["/* ==========================================================================\n   Select — unfilled-button chrome trigger + ds-menu dropdown.\n   Density via `.ds-control--md|sm|xs` (control-density.css).\n   ========================================================================== */\n\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host(.select-host) {\n  display: inline-flex;\n  position: relative;\n  /* Idle/open = secondary. A selected value promotes only the label. */\n  --ds-select-fg: var(--color-foreground-secondary);\n  --ds-select-fg-active: var(--color-foreground-primary);\n  --ds-select-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill) .trigger {\n  width: 100%;\n}\n\n:host(.ds-control-width--hug) .trigger__label {\n  flex: 0 1 auto;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-select-fg);\n  cursor: pointer;\n  font-family: inherit;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected`).\n     A selected value promotes the label; opening alone does not. */\n}\n\n/* Inset stroke via interaction-fill ::after (same recipe as ButtonUnfilled). */\n.trigger--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-select-border);\n}\n\n.trigger--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n.trigger__label {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  color: inherit;\n  transition: color var(--effect-motion-short-2);\n}\n\n.trigger--has-value .trigger__label {\n  color: var(--ds-select-fg-active);\n}\n\n.trigger__chevron {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Always secondary — only a selected label promotes. */\n  color: var(--ds-select-fg);\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  resolveCssLengthPx,\n  TOKEN_DEFAULTS,\n  type ControlWidth,\n} from '../../utils';\nimport type { MenuItemData } from '../Menu/menu-types';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\nexport type SelectSize = 'md' | 'sm' | 'xs';\n\nexport type SelectWidth = ControlWidth;\n\n/** `ds-icon` size matching control-density icon metrics. */\nconst ICON_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in\n * control-density sizes, with `ds-menu` for the option list.\n */\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Array of options. Set via JS property.\n   * @example el.options = [{ label: 'Apple', value: 'apple' }];\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /** Currently selected value. */\n  @Prop({ mutable: true }) value: string = '';\n\n  @Prop({ reflect: true }) name: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) required: boolean = false;\n\n  @Prop() requiredMessage: string = 'This field is required.';\n\n  /** Placeholder shown when no value is selected. */\n  @Prop() placeholder: string = 'Select';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: SelectSize = 'md';\n\n  /** Width fit — fill the parent (default) or hug content. */\n  @Prop() width: SelectWidth = 'fill';\n\n  /** Disables interaction (25% opacity via ds-control-inactive). */\n  @Prop() isInactive: boolean = false;\n\n  /**\n   * When a value is selected, render the selected interaction fill (same recipe\n   * as unfilled-button `activeFill`). Default `true`. Pass `false` for\n   * foreground-only selection (primary label, no fill).\n   * A selected value promotes the label to primary; chevron stays secondary.\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on (matches unfilled button). */\n  @Prop() hasBorder: boolean = true;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  /** Emits the selected value string. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private isOpen: boolean = false;\n\n  private triggerEl: HTMLButtonElement | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n  /** True when the open was keyboard-driven — menu shows initial focus ring. */\n  private openWithFocusVisible = false;\n  private initialValue = '';\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n    }\n    this.menuEl?.addEventListener('dsSelect', this.handleMenuSelect);\n    this.menuEl?.addEventListener('dsClose', this.handleMenuClose);\n    this.syncMenuItems();\n  }\n\n  disconnectedCallback() {\n    this.menuEl?.removeEventListener('dsSelect', this.handleMenuSelect);\n    this.menuEl?.removeEventListener('dsClose', this.handleMenuClose);\n  }\n\n  @Watch('isOpen')\n  onIsOpenChange(open: boolean) {\n    if (!this.menuEl) return;\n    this.menuEl.initialFocusVisible = open && this.openWithFocusVisible;\n    this.menuEl.open = open;\n  }\n\n  @Watch('options')\n  onOptionsChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(inactive ? null : this.value);\n    const missing = this.required && !inactive && this.value.length === 0;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  private handleMenuSelect = (e: Event) => {\n    const detail = (e as CustomEvent<MenuItemData>).detail;\n    if (detail?.value !== undefined) {\n      this.value = String(detail.value);\n      this.dsChange.emit(this.value);\n    }\n    this.close();\n  };\n\n  private handleMenuClose = () => {\n    this.close();\n  };\n\n  private syncMenuItems() {\n    if (!this.menuEl) return;\n    this.menuEl.items = this.options.map(opt => ({\n      label: opt.label,\n      value: opt.value,\n      isSelected: opt.value === this.value,\n    }));\n  }\n\n  /**\n   * Size/place the menu so option labels line up with the select label.\n   * Menu section padding insets items; we expand min-width by that chrome and\n   * shift left by the same amount (`alignOffset`). Menu can grow wider than\n   * the field (left-bottom / `align=\"start\"`) when labels need more room.\n   */\n  private syncMenuLayout() {\n    if (!this.menuEl || !this.triggerEl) return;\n    const sectionPadPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n    const triggerW = this.triggerEl.offsetWidth;\n    // Prefer min-width over fixed width so long options can grow the menu.\n    this.menuEl.menuWidth = '';\n    this.menuEl.minWidth = `${triggerW + sectionPadPx * 2}px`;\n    this.menuEl.alignOffset = -sectionPadPx;\n    this.menuEl.anchor = this.triggerEl;\n  }\n\n  private open(opts: { focusVisible: boolean } = { focusVisible: false }) {\n    if (this.isInactive || this.disabled || this.formDisabled || !this.options.length) return;\n    this.openWithFocusVisible = opts.focusVisible;\n    this.syncMenuLayout();\n    this.syncMenuItems();\n    this.isOpen = true;\n  }\n\n  private close() {\n    this.isOpen = false;\n    this.openWithFocusVisible = false;\n  }\n\n  private toggle(opts: { focusVisible: boolean }) {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open(opts);\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (document.activeElement !== this.triggerEl) return;\n\n    if (!this.isOpen) {\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          this.open({ focusVisible: true });\n          break;\n      }\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      this.triggerEl?.focus();\n    }\n  }\n\n  private get selectedLabel(): string {\n    return this.options.find(o => o.value === this.value)?.label ?? '';\n  }\n\n  private get hasSelection(): boolean {\n    return this.options.some(o => o.value === this.value);\n  }\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const showPlaceholder = !this.hasSelection;\n    const hasValue = !showPlaceholder;\n    const label = showPlaceholder ? this.placeholder : this.selectedLabel;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const density = `ds-control--${this.size}`;\n    // Opening the menu is transient interaction, not selected product state.\n    const showSelectedFill = !inactive && this.activeFill && hasValue;\n\n    return (\n      <Host\n        class={{\n          'select-host': true,\n          'ds-control-inactive': inactive,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n      >\n        <button\n          ref={el => {\n            this.triggerEl = (el as HTMLButtonElement) ?? null;\n          }}\n          type=\"button\"\n          class={{\n            trigger: true,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--selected': showSelectedFill,\n            'trigger--bordered': this.hasBorder,\n            'trigger--placeholder': showPlaceholder,\n            'trigger--has-value': hasValue,\n            [density]: true,\n          }}\n          disabled={inactive}\n          role=\"combobox\"\n          aria-haspopup=\"menu\"\n          aria-expanded={String(this.isOpen)}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          onClick={() => this.toggle({ focusVisible: false })}\n        >\n          <ds-text\n            class=\"trigger__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant={textVariant}\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {label}\n          </ds-text>\n          <span class=\"trigger__chevron ds-interaction-fill__content\" aria-hidden=\"true\">\n            <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n          </span>\n        </button>\n        {/* bottom + start: left-aligned under the field; wider menus grow right. */}\n        <ds-menu\n          ref={el => {\n            this.menuEl = (el as HTMLDsMenuElement) ?? null;\n          }}\n          side=\"bottom\"\n          align=\"start\"\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-shell-gradient-picker.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-ZdSNIObv.js";const t=o;const p=s;export{t as DsShellGradientPicker,p as defineCustomElement};
+import{S as o,d as s}from"./p-RBe9XqjU.js";const t=o;const p=s;export{t as DsShellGradientPicker,p as defineCustomElement};
 //# sourceMappingURL=ds-shell-gradient-picker.js.map

package/dist/components/ds-shell-gradient-swatch.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-CRrGwSt7.js";const t=o;const r=s;export{t as DsShellGradientSwatch,r as defineCustomElement};
+import{S as o,d as s}from"./p-DHwtgzjP.js";const t=o;const p=s;export{t as DsShellGradientSwatch,p as defineCustomElement};
 //# sourceMappingURL=ds-shell-gradient-swatch.js.map

package/dist/components/ds-slider.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as i,h as t,a as r,t as a}from"./index.js";import{d as n}from"./p-CKjNw4Tl.js";const o=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.25;pointer-events:none;cursor:not-allowed}.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2)}.track.sc-ds-slider:hover:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let d=0;const c=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++d}`;this.value=0;this.min=0;this.max=100;this.step=1;this.isInactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(r,{key:"8f328eace938a22011b21ba4be3984d5f60f7edd",class:"field"},t("div",{key:"c9c0be013cc10ec311986cbfbb16d34eb4d910ac",class:"label-row"},t("ds-text",{key:"c7375c9d0e00534e90fb52e6e7551eaf9b2706cb",as:"label",variant:"text-body-small",emphasis:true,for:e},this.label),t("ds-text",{key:"cb4f7c6f4569f4b5b9eb69988fcb25832e874e76",as:"span",variant:"text-body-small",emphasis:true},this.value)),t("div",{key:"32584cfe414e9d9520c03249ca9dcfd7d52f8d26",class:{track:true,"ds-control-inactive":this.isInactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"4c549c1480586d30b0b0385d62fc53a2fbdc4121",class:"track-inner"},t("div",{key:"1b1227fa51f96111651c8be3127e671f3984a419",class:"fill-track"},t("div",{key:"09ee0cccfb90d7ad171d815010bbb8dec8e55bf8",class:"fill"})),t("div",{key:"e2c6ec0dddc23d845a8a1416618959527032a9f7",class:"thumb"})),t("input",{key:"e96cf7c0a335a40250346637e6c806c67a4a6d2a",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.isInactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return o()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],isInactive:[4,"is-inactive"],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-slider","ds-text"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(a(e))){customElements.define(a(e),c)}break;case"ds-text":if(!customElements.get(a(e))){n()}break}}))}l();const b=c;const p=l;export{b as DsSlider,p as defineCustomElement};
+import{p as e,H as s,c as i,h as t,a as r,t as a}from"./index.js";import{d as n}from"./p-CWd8L7Fk.js";const o=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.25;pointer-events:none;cursor:not-allowed}.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}@media (prefers-reduced-motion: reduce){.fill.sc-ds-slider{transition:none}}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2)}.track.sc-ds-slider:hover:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let d=0;const c=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++d}`;this.value=0;this.min=0;this.max=100;this.step=1;this.isInactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(r,{key:"1c5fb2dbb69dfdad662138547dc14652f7cb19b8",class:"field"},t("div",{key:"52713b0bdf80bc5131824b79224e26c6ca907e90",class:"label-row"},t("ds-text",{key:"b9fc36d702fdfa666a698b60ed0fd5173880df2a",as:"label",variant:"text-body-small",emphasis:true,for:e},this.label),t("ds-text",{key:"cce0f7a4c66c5bef2c35581ad7eb7f3cb36b120a",as:"span",variant:"text-body-small",emphasis:true},this.value)),t("div",{key:"a276f74ce19b6abe13b5edbd014a5ca4e4dc58ff",class:{track:true,"ds-control-inactive":this.isInactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"1890c0cddf4aec114f119aa41bb9302e35586c1c",class:"track-inner"},t("div",{key:"c0e7f98e6e4fb3a811b36946c22c739e6d1ef332",class:"fill-track"},t("div",{key:"1d2cc69660d9fa8ccfaf980d6e32f48c85948dd2",class:"fill"})),t("div",{key:"9081b46aa402e942e54d5cc4c1666280bf922514",class:"thumb"})),t("input",{key:"bc8e27476e14c67f94c590dbc32324fb7767a5a7",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.isInactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return o()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],isInactive:[4,"is-inactive"],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-slider","ds-text"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(a(e))){customElements.define(a(e),c)}break;case"ds-text":if(!customElements.get(a(e))){n()}break}}))}l();const b=c;const p=l;export{b as DsSlider,p as defineCustomElement};
 //# sourceMappingURL=ds-slider.js.map

package/dist/components/ds-slider.js.map

@@ -1 +1 @@
-{"version":3,"names":["sliderCss","idCounter","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","value","min","max","step","isInactive","handleInput","e","dsChange","emit","Number","target","pct","range","Math","round","render","finalId","inputId","h","Host","key","class","as","variant","emphasis","for","label","track","style","String","type","id","disabled","valueText","onInput"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-050);\n}\n\n/* ── Track ───────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n}\n\n.track-inner {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-depressed-sm);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* ── Fill ────────────────────────────────────────────────────────────────── */\n\n.fill-track {\n  position: absolute;\n  top: var(--dimension-space-025);\n  right: 0;\n  bottom: var(--dimension-space-025);\n  left: 0;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.fill {\n  position: absolute;\n  left: var(--dimension-space-025);\n  top: 0;\n  bottom: 0;\n  width: max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));\n  background-color: var(--color-background-bold-brand);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n  transition: opacity var(--effect-motion-short-2);\n  pointer-events: none;\n}\n\n.track--at-min .fill {\n  opacity: 0;\n}\n\n/* ── Thumb ───────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));\n  width: var(--dimension-size-150);\n  padding: var(--dimension-space-025);\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.thumb::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: transparent;\n  border-radius: var(--dimension-radius-050);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.track:hover:not(.ds-control-inactive) .thumb::after {\n  background-color: var(--color-interaction-hover);\n}\n\n.track:active:not(.ds-control-inactive) .thumb::after {\n  background-color: var(--color-interaction-pressed);\n}\n\n/* ── Native range input (invisible overlay) ──────────────────────────────── */\n\n.range-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  outline: none;\n  z-index: 3;\n}\n\n.range-input:disabled {\n  cursor: not-allowed;\n}\n\n.range-input:hover {\n  cursor: grab;\n}\n\n.range-input:active {\n  cursor: grabbing;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity) on `.track`. */\n\n.track:focus-within .track-inner {\n  box-shadow: var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n})\nexport class Slider {\n  private generatedId = `ds-slider-${++idCounter}`;\n\n  @Prop() value: number = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() label!: string;\n  @Prop() isInactive: boolean = false;\n  @Prop() valueText: string | undefined;\n  /** Associates with an external <label>. Defaults to an auto-generated ID. */\n  @Prop() inputId: string | undefined;\n\n  @Event() dsChange!: EventEmitter<number>;\n\n  private handleInput = (e: Event) => {\n    this.dsChange.emit(Number((e.target as HTMLInputElement).value));\n  };\n\n  private get pct() {\n    const range = this.max - this.min;\n    return range === 0 ? 0 : Math.round(((this.value - this.min) / range) * 100);\n  }\n\n  render() {\n    const finalId = this.inputId ?? this.generatedId;\n    const pct = this.pct;\n\n    return (\n      <Host class=\"field\">\n        <div class=\"label-row\">\n          <ds-text as=\"label\" variant=\"text-body-small\" emphasis for={finalId}>\n            {this.label}\n          </ds-text>\n          <ds-text as=\"span\" variant=\"text-body-small\" emphasis>\n            {this.value}\n          </ds-text>\n        </div>\n        <div\n          class={{\n            track: true,\n            'ds-control-inactive': this.isInactive,\n            'track--at-min': pct === 0,\n          }}\n          style={{ '--slider-pct': String(pct) } as Record<string, string>}\n        >\n          <div class=\"track-inner\">\n            <div class=\"fill-track\"><div class=\"fill\" /></div>\n            <div class=\"thumb\" />\n          </div>\n          <input\n            type=\"range\"\n            id={finalId}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            disabled={this.isInactive}\n            class=\"range-input\"\n            aria-valuetext={this.valueText}\n            onInput={this.handleInput}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAY,IAAM,+vFCExB,IAAIC,EAAY,E,MAOHC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,6EAMUC,KAAAC,YAAc,eAAeP,IAE7BM,KAAAE,MAAgB,EAChBF,KAAAG,IAAc,EACdH,KAAAI,IAAc,IACdJ,KAAAK,KAAe,EAEfL,KAAAM,WAAsB,MAOtBN,KAAAO,YAAeC,IACrBR,KAAKS,SAASC,KAAKC,OAAQH,EAAEI,OAA4BV,OAAO,CAkDnE,CA/CC,OAAYW,GACV,MAAMC,EAAQd,KAAKI,IAAMJ,KAAKG,IAC9B,OAAOW,IAAU,EAAI,EAAIC,KAAKC,OAAQhB,KAAKE,MAAQF,KAAKG,KAAOW,EAAS,I,CAG1E,MAAAG,GACE,MAAMC,EAAUlB,KAAKmB,SAAWnB,KAAKC,YACrC,MAAMY,EAAMb,KAAKa,IAEjB,OACEO,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,SACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACTH,EAAA,WAAAE,IAAA,2CAASE,GAAG,QAAQC,QAAQ,kBAAkBC,SAAQ,KAACC,IAAKT,GACzDlB,KAAK4B,OAERR,EAAA,WAAAE,IAAA,2CAASE,GAAG,OAAOC,QAAQ,kBAAkBC,SAAQ,MAClD1B,KAAKE,QAGVkB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLM,MAAO,KACP,sBAAuB7B,KAAKM,WAC5B,gBAAiBO,IAAQ,GAE3BiB,MAAO,CAAE,eAAgBC,OAAOlB,KAEhCO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cAAaH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACnCH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WAEbH,EAAA,SAAAE,IAAA,2CACEU,KAAK,QACLC,GAAIf,EACJf,IAAKH,KAAKG,IACVC,IAAKJ,KAAKI,IACVC,KAAML,KAAKK,KACXH,MAAOF,KAAKE,MACZgC,SAAUlC,KAAKM,WACfiB,MAAM,cAAa,iBACHvB,KAAKmC,UACrBC,QAASpC,KAAKO,e","ignoreList":[]}
+{"version":3,"names":["sliderCss","idCounter","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","value","min","max","step","isInactive","handleInput","e","dsChange","emit","Number","target","pct","range","Math","round","render","finalId","inputId","h","Host","key","class","as","variant","emphasis","for","label","track","style","String","type","id","disabled","valueText","onInput"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-050);\n}\n\n/* ── Track ───────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n}\n\n.track-inner {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-depressed-sm);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* ── Fill ────────────────────────────────────────────────────────────────── */\n\n.fill-track {\n  position: absolute;\n  top: var(--dimension-space-025);\n  right: 0;\n  bottom: var(--dimension-space-025);\n  left: 0;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.fill {\n  position: absolute;\n  left: var(--dimension-space-025);\n  top: 0;\n  bottom: 0;\n  width: max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));\n  background-color: var(--color-background-bold-brand);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n  transition: opacity var(--effect-motion-short-2);\n  pointer-events: none;\n}\n\n.track--at-min .fill {\n  opacity: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fill {\n    transition: none;\n  }\n}\n\n/* ── Thumb ───────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));\n  width: var(--dimension-size-150);\n  padding: var(--dimension-space-025);\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.thumb::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: transparent;\n  border-radius: var(--dimension-radius-050);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.track:hover:not(.ds-control-inactive) .thumb::after {\n  background-color: var(--color-interaction-hover);\n}\n\n.track:active:not(.ds-control-inactive) .thumb::after {\n  background-color: var(--color-interaction-pressed);\n}\n\n/* ── Native range input (invisible overlay) ──────────────────────────────── */\n\n.range-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  outline: none;\n  z-index: 3;\n}\n\n.range-input:disabled {\n  cursor: not-allowed;\n}\n\n.range-input:hover {\n  cursor: grab;\n}\n\n.range-input:active {\n  cursor: grabbing;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity) on `.track`. */\n\n.track:focus-within .track-inner {\n  box-shadow: var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n})\nexport class Slider {\n  private generatedId = `ds-slider-${++idCounter}`;\n\n  @Prop() value: number = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() label!: string;\n  @Prop() isInactive: boolean = false;\n  @Prop() valueText: string | undefined;\n  /** Associates with an external <label>. Defaults to an auto-generated ID. */\n  @Prop() inputId: string | undefined;\n\n  @Event() dsChange!: EventEmitter<number>;\n\n  private handleInput = (e: Event) => {\n    this.dsChange.emit(Number((e.target as HTMLInputElement).value));\n  };\n\n  private get pct() {\n    const range = this.max - this.min;\n    return range === 0 ? 0 : Math.round(((this.value - this.min) / range) * 100);\n  }\n\n  render() {\n    const finalId = this.inputId ?? this.generatedId;\n    const pct = this.pct;\n\n    return (\n      <Host class=\"field\">\n        <div class=\"label-row\">\n          <ds-text as=\"label\" variant=\"text-body-small\" emphasis for={finalId}>\n            {this.label}\n          </ds-text>\n          <ds-text as=\"span\" variant=\"text-body-small\" emphasis>\n            {this.value}\n          </ds-text>\n        </div>\n        <div\n          class={{\n            track: true,\n            'ds-control-inactive': this.isInactive,\n            'track--at-min': pct === 0,\n          }}\n          style={{ '--slider-pct': String(pct) } as Record<string, string>}\n        >\n          <div class=\"track-inner\">\n            <div class=\"fill-track\"><div class=\"fill\" /></div>\n            <div class=\"thumb\" />\n          </div>\n          <input\n            type=\"range\"\n            id={finalId}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            disabled={this.isInactive}\n            class=\"range-input\"\n            aria-valuetext={this.valueText}\n            onInput={this.handleInput}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAY,IAAM,20FCExB,IAAIC,EAAY,E,MAOHC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,6EAMUC,KAAAC,YAAc,eAAeP,IAE7BM,KAAAE,MAAgB,EAChBF,KAAAG,IAAc,EACdH,KAAAI,IAAc,IACdJ,KAAAK,KAAe,EAEfL,KAAAM,WAAsB,MAOtBN,KAAAO,YAAeC,IACrBR,KAAKS,SAASC,KAAKC,OAAQH,EAAEI,OAA4BV,OAAO,CAkDnE,CA/CC,OAAYW,GACV,MAAMC,EAAQd,KAAKI,IAAMJ,KAAKG,IAC9B,OAAOW,IAAU,EAAI,EAAIC,KAAKC,OAAQhB,KAAKE,MAAQF,KAAKG,KAAOW,EAAS,I,CAG1E,MAAAG,GACE,MAAMC,EAAUlB,KAAKmB,SAAWnB,KAAKC,YACrC,MAAMY,EAAMb,KAAKa,IAEjB,OACEO,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,SACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACTH,EAAA,WAAAE,IAAA,2CAASE,GAAG,QAAQC,QAAQ,kBAAkBC,SAAQ,KAACC,IAAKT,GACzDlB,KAAK4B,OAERR,EAAA,WAAAE,IAAA,2CAASE,GAAG,OAAOC,QAAQ,kBAAkBC,SAAQ,MAClD1B,KAAKE,QAGVkB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLM,MAAO,KACP,sBAAuB7B,KAAKM,WAC5B,gBAAiBO,IAAQ,GAE3BiB,MAAO,CAAE,eAAgBC,OAAOlB,KAEhCO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cAAaH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACnCH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WAEbH,EAAA,SAAAE,IAAA,2CACEU,KAAK,QACLC,GAAIf,EACJf,IAAKH,KAAKG,IACVC,IAAKJ,KAAKI,IACVC,KAAML,KAAKK,KACXH,MAAOF,KAAKE,MACZgC,SAAUlC,KAAKM,WACfiB,MAAM,cAAa,iBACHvB,KAAKmC,UACrBC,QAASpC,KAAKO,e","ignoreList":[]}

package/dist/components/{ds-toggle.d.ts → ds-switch.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface DsToggle extends Components.DsToggle, HTMLElement {}
-export const DsToggle: {
-    prototype: DsToggle;
-    new (): DsToggle;
+interface DsSwitch extends Components.DsSwitch, HTMLElement {}
+export const DsSwitch: {
+    prototype: DsSwitch;
+    new (): DsSwitch;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/ds-switch.js

@@ -0,0 +1,2 @@
+import{S as o,d as s}from"./p-DhgDNluD.js";const t=o;const p=s;export{t as DsSwitch,p as defineCustomElement};
+//# sourceMappingURL=ds-switch.js.map

package/dist/components/ds-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/ds-tab-group-nav.js

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-DhO43V4c.js";const t=o;const c=s;export{t as DsTabGroupNav,c as defineCustomElement};
+import{T as o,d as s}from"./p-CxOQaZ4f.js";const t=o;const a=s;export{t as DsTabGroupNav,a as defineCustomElement};
 //# sourceMappingURL=ds-tab-group-nav.js.map