@ds-mo/ui 2.1.0 → 2.2.0

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

@@ -1 +1 @@
-{"version":3,"names":["PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","panelToolsDrawerResting","open","motion","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","activeTool","readyForMotion","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","id","selected","isRailSelected","dsToolChange","railItems","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","componentDidLoad","itemsChanged","isDrawerPresent","isViewActive","headerLabel","renderRailAction","item","h","key","class","icon","dot","inactive","ariaLabel","onDsChange","render","headerItem","find","bodyItems","filter","showDrawerChrome","drawerResting","Host","role","inert","hidden","name","map"],"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 = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n  'search',\n  'agents',\n  'messages',\n  'stacks',\n  'activity',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\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};\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  inactive?: boolean;\n  ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport type { PanelToolsItem } 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 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.inactive !== item.inactive ||\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",":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(--dimension-panel-width-sm);\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;\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 — stays 400px while the clip frame opens/closes. */\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 +/or grid) — drawer + rail are transparent frames. */\n:host-context(ds-app-shell[gradient]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[grid]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[gradient]) .panel-tools__rail,\n:host-context(ds-app-shell[grid]) .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.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.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.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, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_PRIMARY_TOOL_ID,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport { parsePanelToolsItems, panelToolsDrawerResting } 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`, or `activity`. */\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\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  private motionEnableGeneration = 0;\n\n  private get railItems(): PanelToolsItem[] {\n    return parsePanelToolsItems(this.items, this.itemsJson);\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  @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.deferMotionEnable();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n  }\n\n  @Watch('items')\n  @Watch('itemsJson')\n  itemsChanged() {\n    this.deferMotionEnable();\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 selected = !this.isRailSelected(id);\n    if (selected) {\n      this.open = true;\n      this.activeTool = id;\n    } else {\n      this.open = false;\n    }\n    this.dsToolChange.emit({ id, selected });\n  };\n\n  private renderRailAction(item: PanelToolsItem) {\n    return (\n      <ds-bar-nav-action\n        key={item.id}\n        class=\"panel-tools__rail-action\"\n        icon={item.icon}\n        selected={this.isRailSelected(item.id)}\n        dot={item.dot ?? false}\n        inactive={item.inactive}\n        aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}\n        onDsChange={() => this.handleToolChange(item.id)}\n      />\n    );\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const railItems = this.railItems;\n    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\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=\"Tools\"\n      >\n        <div class=\"panel-tools__layout\">\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                <span class=\"panel-tools__title text-body-medium-emphasis\">{headerLabel}</span>\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                    'text-body-medium': true,\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                    'text-body-medium': true,\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                    'text-body-medium': true,\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                    'text-body-medium': true,\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                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('agents')}\n                >\n                  <slot name=\"agents\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <nav class=\"panel-tools__rail\" aria-label=\"Tool shortcuts\">\n            {headerItem ? (\n              <div class=\"panel-tools__rail-header\">{this.renderRailAction(headerItem)}</div>\n            ) : null}\n            <div class=\"panel-tools__rail-body\">\n              {bodyItems.map(item => this.renderRailAction(item))}\n            </div>\n          </nav>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","panelToolsDrawerResting","open","motion","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","activeTool","readyForMotion","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","id","selected","isRailSelected","dsToolChange","railItems","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","componentDidLoad","itemsChanged","isDrawerPresent","isViewActive","headerLabel","renderRailAction","item","h","key","class","icon","isActive","activeFill","dot","inactive","ariaLabel","pressed","onDsChange","render","headerItem","find","bodyItems","filter","showDrawerChrome","drawerResting","Host","role","inert","hidden","name","map"],"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 = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n  'search',\n  'agents',\n  'messages',\n  'stacks',\n  'activity',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\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};\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  inactive?: boolean;\n  ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport type { PanelToolsItem } 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 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.inactive !== item.inactive ||\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",":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(--dimension-panel-width-sm);\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;\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 — stays 400px while the clip frame opens/closes. */\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 +/or grid) — drawer + rail are transparent frames. */\n:host-context(ds-app-shell[gradient]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[grid]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[gradient]) .panel-tools__rail,\n:host-context(ds-app-shell[grid]) .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.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.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.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, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_PRIMARY_TOOL_ID,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport { parsePanelToolsItems, panelToolsDrawerResting } 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`, or `activity`. */\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\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  private motionEnableGeneration = 0;\n\n  private get railItems(): PanelToolsItem[] {\n    return parsePanelToolsItems(this.items, this.itemsJson);\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  @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.deferMotionEnable();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n  }\n\n  @Watch('items')\n  @Watch('itemsJson')\n  itemsChanged() {\n    this.deferMotionEnable();\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 selected = !this.isRailSelected(id);\n    if (selected) {\n      this.open = true;\n      this.activeTool = id;\n    } else {\n      this.open = false;\n    }\n    this.dsToolChange.emit({ id, selected });\n  };\n\n  private renderRailAction(item: PanelToolsItem) {\n    return (\n      <ds-button-unfilled-icon\n        key={item.id}\n        class=\"panel-tools__rail-action\"\n        icon={item.icon}\n        isActive={this.isRailSelected(item.id)}\n        activeFill={false}\n        dot={item.dot ?? false}\n        inactive={item.inactive}\n        aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}\n        pressed={this.isRailSelected(item.id)}\n        onDsChange={() => this.handleToolChange(item.id)}\n      />\n    );\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const railItems = this.railItems;\n    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\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=\"Tools\"\n      >\n        <div class=\"panel-tools__layout\">\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                <span class=\"panel-tools__title text-body-medium-emphasis\">{headerLabel}</span>\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                    'text-body-medium': true,\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                    'text-body-medium': true,\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                    'text-body-medium': true,\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                    'text-body-medium': true,\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                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('agents')}\n                >\n                  <slot name=\"agents\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <nav class=\"panel-tools__rail\" aria-label=\"Tool shortcuts\">\n            {headerItem ? (\n              <div class=\"panel-tools__rail-header\">{this.renderRailAction(headerItem)}</div>\n            ) : null}\n            <div class=\"panel-tools__rail-body\">\n              {bodyItems.map(item => this.renderRailAction(item))}\n            </div>\n          </nav>\n        </div>\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 e,H as s,c as t,h as i,a as r,t as o}from"./index.js";import{d as n}from"./p-CuuuDjJJ.js";const a=()=>`.select-host.sc-ds-select-h{display:inline-block;width:100%;position:relative}.inactive.sc-ds-select-h{opacity:0.5;pointer-events:none}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-075) 0 var(--dimension-space-100);border:none;border-radius:var(--dimension-radius-050);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);cursor:pointer;box-sizing:border-box;gap:var(--dimension-space-050);font-family:inherit;outline:none;--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.trigger.sc-ds-select:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.trigger.sc-ds-select:hover:not(:disabled){background-color:var(--_hover-bg)}.trigger.sc-ds-select:active:not(:disabled){background-color:var(--_pressed-bg)}.trigger--open.sc-ds-select{background-color:var(--_pressed-bg)}.trigger__label.sc-ds-select{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);color:var(--color-foreground-primary)}.trigger__label--placeholder.sc-ds-select{color:var(--color-foreground-secondary)}.trigger__chevron.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary);transition:transform var(--effect-motion-short-2)}.trigger--open.sc-ds-select .trigger__chevron.sc-ds-select{transform:rotate(180deg)}`;const l=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select option";this.inactive=false;this.isOpen=false;this.triggerEl=null;this.menuEl=null}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",(e=>{const s=e.detail;if(s?.value!==undefined){this.value=String(s.value);this.dsChange.emit(this.value)}this.isOpen=false}));this.menuEl?.addEventListener("dsClose",(()=>{this.isOpen=false}))}onIsOpenChange(e){if(this.menuEl){this.menuEl.open=e}}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((e=>({label:e.label,value:e.value,isSelected:e.value===this.value})))}open(){if(this.inactive||!this.options.length)return;if(this.menuEl&&this.triggerEl){this.menuEl.menuWidth=`${this.triggerEl.offsetWidth}px`;this.menuEl.anchor=this.triggerEl}this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false}toggle(){if(this.isOpen){this.close()}else{this.open()}}handleKeyDown(e){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":e.preventDefault();this.open();break}}else{if(e.key==="Escape"){e.preventDefault();this.close();this.triggerEl?.focus()}}}get selectedLabel(){const e=this.options.find((e=>e.value===this.value));return e?.label??""}get hasSelection(){return!!this.options.find((e=>e.value===this.value))}render(){const e=this.hasSelection?this.selectedLabel:this.placeholder;const s=!this.hasSelection;return i(r,{key:"47854c5a69705adc07ca601f31e262d3d8d74771",class:{"select-host":true,inactive:this.inactive}},i("button",{key:"2fa71b2e7bb4f890a37a130c6af50cb0cb05df81",ref:e=>{this.triggerEl=e??null},type:"button",class:{trigger:true,"trigger--open":this.isOpen},disabled:this.inactive,role:"combobox","aria-haspopup":"listbox","aria-expanded":this.isOpen,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle()},i("span",{key:"4ce5d30c16af2dd2188d19dfc13d96b3d3bfbe6e",class:{trigger__label:true,"trigger__label--placeholder":s}},e),i("svg",{key:"8a942bde794824fb5b79565d4d297c7b3a42bed4",class:"trigger__chevron",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},i("path",{key:"b937494cd4d3bdf9924541d8f77db13fef11b8b6",d:"M4 6L8 10L12 6",stroke:"currentColor","stroke-width":"1.25","stroke-linecap":"round","stroke-linejoin":"round"}))),i("ds-menu",{key:"d8f76d473fea216bac4db040441288b1da9cd87b",ref:e=>{this.menuEl=e??null},side:"bottom",align:"start"}))}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return a()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-menu"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(o(e))){customElements.define(o(e),l)}break;case"ds-menu":if(!customElements.get(o(e))){n()}break}}))}c();const d=l;const h=c;export{d as DsSelect,h as defineCustomElement};
+import{p as e,H as s,c as t,h as i,a as r,t as o}from"./index.js";import{d as n}from"./p-YzIqPOqL.js";const a=()=>`.select-host.sc-ds-select-h{display:inline-block;width:100%;position:relative}.inactive.sc-ds-select-h{opacity:0.5;pointer-events:none}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-075) 0 var(--dimension-space-100);border:none;border-radius:var(--dimension-radius-050);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);cursor:pointer;box-sizing:border-box;gap:var(--dimension-space-050);font-family:inherit;outline:none;--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.trigger.sc-ds-select:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.trigger.sc-ds-select:hover:not(:disabled){background-color:var(--_hover-bg)}.trigger.sc-ds-select:active:not(:disabled){background-color:var(--_pressed-bg)}.trigger--open.sc-ds-select{background-color:var(--_pressed-bg)}.trigger__label.sc-ds-select{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);color:var(--color-foreground-primary)}.trigger__label--placeholder.sc-ds-select{color:var(--color-foreground-secondary)}.trigger__chevron.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary);transition:transform var(--effect-motion-short-2)}.trigger--open.sc-ds-select .trigger__chevron.sc-ds-select{transform:rotate(180deg)}`;const l=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select option";this.inactive=false;this.isOpen=false;this.triggerEl=null;this.menuEl=null}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",(e=>{const s=e.detail;if(s?.value!==undefined){this.value=String(s.value);this.dsChange.emit(this.value)}this.isOpen=false}));this.menuEl?.addEventListener("dsClose",(()=>{this.isOpen=false}))}onIsOpenChange(e){if(this.menuEl){this.menuEl.open=e}}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((e=>({label:e.label,value:e.value,isSelected:e.value===this.value})))}open(){if(this.inactive||!this.options.length)return;if(this.menuEl&&this.triggerEl){this.menuEl.menuWidth=`${this.triggerEl.offsetWidth}px`;this.menuEl.anchor=this.triggerEl}this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false}toggle(){if(this.isOpen){this.close()}else{this.open()}}handleKeyDown(e){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":e.preventDefault();this.open();break}}else{if(e.key==="Escape"){e.preventDefault();this.close();this.triggerEl?.focus()}}}get selectedLabel(){const e=this.options.find((e=>e.value===this.value));return e?.label??""}get hasSelection(){return!!this.options.find((e=>e.value===this.value))}render(){const e=this.hasSelection?this.selectedLabel:this.placeholder;const s=!this.hasSelection;return i(r,{key:"47854c5a69705adc07ca601f31e262d3d8d74771",class:{"select-host":true,inactive:this.inactive}},i("button",{key:"2fa71b2e7bb4f890a37a130c6af50cb0cb05df81",ref:e=>{this.triggerEl=e??null},type:"button",class:{trigger:true,"trigger--open":this.isOpen},disabled:this.inactive,role:"combobox","aria-haspopup":"listbox","aria-expanded":this.isOpen,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle()},i("span",{key:"4ce5d30c16af2dd2188d19dfc13d96b3d3bfbe6e",class:{trigger__label:true,"trigger__label--placeholder":s}},e),i("svg",{key:"8a942bde794824fb5b79565d4d297c7b3a42bed4",class:"trigger__chevron",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},i("path",{key:"b937494cd4d3bdf9924541d8f77db13fef11b8b6",d:"M4 6L8 10L12 6",stroke:"currentColor","stroke-width":"1.25","stroke-linecap":"round","stroke-linejoin":"round"}))),i("ds-menu",{key:"d8f76d473fea216bac4db040441288b1da9cd87b",ref:e=>{this.menuEl=e??null},side:"bottom",align:"start"}))}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return a()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-menu"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(o(e))){customElements.define(o(e),l)}break;case"ds-menu":if(!customElements.get(o(e))){n()}break}}))}c();const d=l;const h=c;export{d as DsSelect,h as defineCustomElement};
 //# sourceMappingURL=ds-select.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,t as r}from"./index.js";const n=()=>`.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 100ms ease}.track.sc-ds-slider:hover:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.track--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--inactive.sc-ds-slider{cursor:not-allowed;opacity:0.5}.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 o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.inactive=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(a,{key:"b7147eb06d8859e3ea03073d333d63a63036add4",class:"field"},t("div",{key:"0589ac26bd05288a044485f19120397b78829e03",class:"label-row"},t("label",{key:"bd75405a27b95edc41bcaca9425c04f15819e5c2",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"901b006fb1ce96b3f7ba99ff0e22bfdbe75d28e4",class:"text-body-small-emphasis"},this.value)),t("div",{key:"bea458e318e0e49c24ed71583d8907bfeea76232",class:{track:true,"track--inactive":this.inactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"3052ee819db6afa6c64419d523bd715e56fe9962",class:"track-inner"},t("div",{key:"b21f54daa9dc732b660f30d36422a5335b4ec1bf",class:"fill-track"},t("div",{key:"80e5450d9e68a5cd81544d70e8fb8c3c134f0642",class:"fill"})),t("div",{key:"0622efb3f3e7473ad69cce52cfe917dd959d02b6",class:"thumb"})),t("input",{key:"07429f1ea6ec9885b162c0dfa755e9129a9a3250",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.inactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],inactive:[4],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
+import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";const n=()=>`.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 100ms ease}.track.sc-ds-slider:hover:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.track--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--inactive.sc-ds-slider{cursor:not-allowed;opacity:0.5}.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 o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.inactive=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(a,{key:"207494463c1817c22c94ba7fa46d823703670206",class:"field"},t("div",{key:"214b6b0d18751fccd7d86afb9547708217ab2720",class:"label-row"},t("label",{key:"a950f215ab845648e13dce035122645d581789cd",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"72ec769d4d9967eb1f4172ee547ed24a1d641509",class:"text-body-small-emphasis"},this.value)),t("div",{key:"52b32303cd3eb20ae599d5a0128eb0f7bdd930ed",class:{track:true,"track--inactive":this.inactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"1f2062c0c950542e44a7f47f1ef63f3b569d257b",class:"track-inner"},t("div",{key:"98acc98ea8f7a90c42603a45776e4612245a78a7",class:"fill-track"},t("div",{key:"ea5dea6a2128edb0b2595ce6bb99e6df9fac6966",class:"fill"})),t("div",{key:"e5b442ac37d9cb9da43e63caa7258b3153362083",class:"thumb"})),t("input",{key:"ac2e2be7e024ad207f9ed83916ffd6d159c3b989",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.inactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],inactive:[4],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
 //# sourceMappingURL=ds-slider.js.map

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

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

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

@@ -1,2 +1,2 @@
-import{p as r,H as e,c as o,h as a,a as t,t as s}from"./index.js";import{g as i,i as n}from"./p-BQq26pt9.js";import{d}from"./p-CiEc8Nwx.js";const c=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-050);background-color:transparent;border:var(--dimension-stroke-width-012) solid transparent;border-radius:var(--dimension-radius-half);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-300);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group::after{content:'';position:absolute;inset:calc(var(--dimension-stroke-width-012) * -1);border-radius:inherit;background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group:active::after{background:var(--_pressed-bg);transition:none}.tab.sc-ds-tab-group:focus-visible:not(:hover):not(:active)::after{background:transparent}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-color:var(--color-border-tertiary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group .tab.sc-ds-tab-group{justify-content:flex-start}.tab__label.sc-ds-tab-group{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group .tab-divider__line.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=r(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return i(this.tabs)}selectTab(r,e){this.value=r;this.dsChange.emit(r);if(e?.focus!==false){this.focusTab(r)}}focusTab(r){const e=this.el.querySelector(`[data-tab-id="${r}"]`);e?.focus({preventScroll:true})}onValueChange(r,e){if(e===undefined||r===e)return;requestAnimationFrame((()=>{const e=document.activeElement;if(!e||!this.el.contains(e))return;const o=e.getAttribute("data-tab-id");if(o===r)return;const a=this.el.querySelector(`[data-tab-id="${r}"]`);if(a){a.focus({preventScroll:true})}else{e.blur()}}))}findEnabled(r,e){const o=this.selectableTabs;const a=o.length;for(let t=0;t<a;t++){const s=(r+e*(t+1)+a*(t+1))%a;if(!o[s]?.disabled)return s}return r}handleKeyDown(r){const e=this.selectableTabs;if(!e.length)return;const o=e.findIndex((r=>r.id===this.value));const a=this.orientation==="vertical";let t=null;if(!a){if(r.key==="ArrowRight"){t=this.findEnabled(o,1)}else if(r.key==="ArrowLeft"){t=this.findEnabled(o,-1)}}else{if(r.key==="ArrowDown"){t=this.findEnabled(o,1)}else if(r.key==="ArrowUp"){t=this.findEnabled(o,-1)}}if(r.key==="Home"){const r=e.findIndex((r=>!r.disabled));t=r===-1?null:r}else if(r.key==="End"){const r=[...e].reverse().findIndex((r=>!r.disabled));t=r===-1?null:e.length-1-r}if(t!==null){r.preventDefault();const o=e[t];this.selectTab(o.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const r=this.getBgClass();const e=this.orientation==="vertical";return a(t,{key:"3169bbef555225fc37eebbc55efac726b2def9c6",class:"tab-group-host"},a("div",{key:"18770a26e5ebfd75e95dda95548a67b2d32e61b6",role:"tablist",class:{"tab-list":true,"tab-list--vertical":e},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":e?"vertical":undefined},this.tabs.map(((o,t)=>{if(n(o)){return a("div",{key:`divider-${t}`,class:{"tab-divider":true,"tab-divider--vertical":e},"aria-hidden":"true"},a("div",{class:"tab-divider__line"}))}const s=o.id===this.value;return a("button",{key:o.id,type:"button",role:"tab","data-tab-id":o.id,class:{tab:true,"tab--selected":s,[r]:!!r},"aria-selected":s,"aria-disabled":o.disabled||undefined,"aria-controls":o.panelId??undefined,disabled:o.disabled,tabIndex:s?0:-1,onClick:()=>!o.disabled&&this.selectTab(o.id)},a("span",{class:{tab__label:true,"tab__label--dot":!!o.dot,[s?"text-body-small-emphasis":"text-body-small"]:true}},o.label,o.dot&&a("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const r=["ds-tab-group","ds-badge"];r.forEach((r=>{switch(r){case"ds-tab-group":if(!customElements.get(s(r))){customElements.define(s(r),l)}break;case"ds-badge":if(!customElements.get(s(r))){d()}break}}))}b();const u=l;const g=b;export{u as DsTabGroup,g as defineCustomElement};
+import{p as r,H as o,c as e,h as t,a as s,t as a}from"./index.js";import{g as i,i as n}from"./p-BQq26pt9.js";import{d}from"./p-CiEc8Nwx.js";const c=()=>`.sc-ds-tab-group-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-tab-group: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-tab-group{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-tab-group:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group: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-tab-group{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-050);background-color:transparent;border:var(--dimension-stroke-width-012) solid transparent;border-radius:var(--dimension-radius-half);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-300);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group::after{content:'';position:absolute;inset:calc(var(--dimension-stroke-width-012) * -1);border-radius:inherit;background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-color:var(--color-border-tertiary)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group .tab.sc-ds-tab-group{justify-content:flex-start}.tab__label.sc-ds-tab-group{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-stroke-width-012);align-self:center;padding:0;flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);height:var(--typography-lineheight-sm);flex-shrink:0;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch;padding:0}.tab-divider--vertical.sc-ds-tab-group .tab-divider__line.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=r(class r extends o{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return i(this.tabs)}selectTab(r,o){this.value=r;this.dsChange.emit(r);if(o?.focus!==false){this.focusTab(r)}}focusTab(r){const o=this.el.querySelector(`[data-tab-id="${r}"]`);o?.focus({preventScroll:true})}onValueChange(r,o){if(o===undefined||r===o)return;requestAnimationFrame((()=>{const o=document.activeElement;if(!o||!this.el.contains(o))return;const e=o.getAttribute("data-tab-id");if(e===r)return;const t=this.el.querySelector(`[data-tab-id="${r}"]`);if(t){t.focus({preventScroll:true})}else{o.blur()}}))}findEnabled(r,o){const e=this.selectableTabs;const t=e.length;for(let s=0;s<t;s++){const a=(r+o*(s+1)+t*(s+1))%t;if(!e[a]?.disabled)return a}return r}handleKeyDown(r){const o=this.selectableTabs;if(!o.length)return;const e=o.findIndex((r=>r.id===this.value));const t=this.orientation==="vertical";let s=null;if(!t){if(r.key==="ArrowRight"){s=this.findEnabled(e,1)}else if(r.key==="ArrowLeft"){s=this.findEnabled(e,-1)}}else{if(r.key==="ArrowDown"){s=this.findEnabled(e,1)}else if(r.key==="ArrowUp"){s=this.findEnabled(e,-1)}}if(r.key==="Home"){const r=o.findIndex((r=>!r.disabled));s=r===-1?null:r}else if(r.key==="End"){const r=[...o].reverse().findIndex((r=>!r.disabled));s=r===-1?null:o.length-1-r}if(s!==null){r.preventDefault();const e=o[s];this.selectTab(e.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const r=this.getBgClass();const o=this.orientation==="vertical";return t(s,{key:"3169bbef555225fc37eebbc55efac726b2def9c6",class:"tab-group-host"},t("div",{key:"18770a26e5ebfd75e95dda95548a67b2d32e61b6",role:"tablist",class:{"tab-list":true,"tab-list--vertical":o},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":o?"vertical":undefined},this.tabs.map(((e,s)=>{if(n(e)){return t("div",{key:`divider-${s}`,class:{"tab-divider":true,"tab-divider--vertical":o},"aria-hidden":"true"},t("div",{class:"tab-divider__line"}))}const a=e.id===this.value;return t("button",{key:e.id,type:"button",role:"tab","data-tab-id":e.id,class:{tab:true,"tab--selected":a,"ds-focus-ring-inset":true,[r]:!!r},"aria-selected":a,"aria-disabled":e.disabled||undefined,"aria-controls":e.panelId??undefined,disabled:e.disabled,tabIndex:a?0:-1,onClick:()=>!e.disabled&&this.selectTab(e.id)},t("span",{class:{tab__label:true,"tab__label--dot":!!e.dot,[a?"text-body-small-emphasis":"text-body-small"]:true}},e.label,e.dot&&t("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const r=["ds-tab-group","ds-badge"];r.forEach((r=>{switch(r){case"ds-tab-group":if(!customElements.get(a(r))){customElements.define(a(r),l)}break;case"ds-badge":if(!customElements.get(a(r))){d()}break}}))}u();const b=l;const g=u;export{b as DsTabGroup,g as defineCustomElement};
 //# sourceMappingURL=ds-tab-group.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectableTabs","getSelectableTabs","selectTab","id","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","nextTab","blur","findEnabled","from","step","len","length","n","i","disabled","handleKeyDown","e","currentIdx","findIndex","t","isVertical","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabel","ariaLabelledby","map","tab","index","isTabDivider","isSelected","type","panelId","tabIndex","onClick","tab__label","dot","label","variant"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n  width: max-content;\n  max-width: 100%;\n  height: var(--dimension-size-400);\n  padding: calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));\n  background-color: var(--color-background-secondary);\n  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-050);\n  background-color: transparent;\n  border: var(--dimension-stroke-width-012) solid transparent;\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  position: relative;\n  /* Only transition color — hover bg is instant (see ::after below) */\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--dimension-size-300);\n  min-width: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::after {\n  content: '';\n  position: absolute;\n  inset: calc(var(--dimension-stroke-width-012) * -1);\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.tab:hover::after  { background: var(--_hover-bg);   transition: none; }\n.tab:active::after { background: var(--_pressed-bg);  transition: none; }\n\n/* Focus ring only — no persistent hover fill from keyboard focus */\n.tab:focus-visible:not(:hover):not(:active)::after {\n  background: transparent;\n}\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border-color: var(--color-border-tertiary);\n}\n\n.tab:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.tab:disabled,\n.tab[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_dot-ring: var(--color-background-medium-neutral);\n}\n\n.on-bold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_dot-ring: var(--color-background-bold-neutral);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_dot-ring: var(--color-background-strong-neutral);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_dot-ring: var(--color-always-dark-background);\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav */\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-space-100);\n  height: var(--dimension-size-400);\n  padding-block: var(--dimension-space-075);\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  align-self: stretch;\n  background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n  width: auto;\n  height: var(--dimension-space-100);\n  align-self: stretch;\n  padding-block: 0;\n  padding-inline: var(--dimension-space-075);\n}\n\n.tab-divider--vertical .tab-divider__line {\n  width: auto;\n  height: var(--dimension-stroke-width-012);\n  align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\n@Component({\n  tag: 'ds-tab-group',\n  styleUrl: 'TabGroup.css',\n  scoped: true,\n})\nexport class TabGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabItem[] = [];\n  @Prop() background: TabBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  /**\n   * Find the next non-disabled tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.disabled) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const currentIdx = tabs.findIndex(t => t.id === this.value);\n    const isVertical = this.orientation === 'vertical';\n\n    let nextIdx: number | null = null;\n\n    if (!isVertical) {\n      if (e.key === 'ArrowRight') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowLeft') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    } else {\n      if (e.key === 'ArrowDown') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowUp') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.disabled);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background || this.background === 'faint') return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const isVertical = this.orientation === 'vertical';\n\n    return (\n      <Host class=\"tab-group-host\">\n        <div\n          role=\"tablist\"\n          class={{ 'tab-list': true, 'tab-list--vertical': isVertical }}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-orientation={isVertical ? 'vertical' : undefined}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class={{\n                    'tab-divider': true,\n                    'tab-divider--vertical': isVertical,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.disabled || undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.disabled}\n                tabIndex={isSelected ? 0 : -1}\n                onClick={() => !tab.disabled && this.selectTab(tab.id)}\n              >\n                <span class={{\n                  tab__label: true,\n                  'tab__label--dot': !!tab.dot,\n                  [isSelected ? 'text-body-small-emphasis' : 'text-body-small']: true,\n                }}>\n                  {tab.label}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      background=\"var(--_dot-ring)\"\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectableTabs","getSelectableTabs","selectTab","id","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","nextTab","blur","findEnabled","from","step","len","length","n","i","disabled","handleKeyDown","e","currentIdx","findIndex","t","isVertical","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabel","ariaLabelledby","map","tab","index","isTabDivider","isSelected","type","panelId","tabIndex","onClick","tab__label","dot","label","variant"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n\n:host {\n  display: block;\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n  width: max-content;\n  max-width: 100%;\n  height: var(--dimension-size-400);\n  padding: calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));\n  background-color: var(--color-background-secondary);\n  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-050);\n  background-color: transparent;\n  border: var(--dimension-stroke-width-012) solid transparent;\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  position: relative;\n  /* Only transition color — hover bg is instant (see ::after below) */\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--dimension-size-300);\n  min-width: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::after {\n  content: '';\n  position: absolute;\n  inset: calc(var(--dimension-stroke-width-012) * -1);\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.tab:hover::after  { background: var(--_hover-bg);   transition: none; }\n.tab:active::after { background: var(--_pressed-bg);  transition: none; }\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border-color: var(--color-border-tertiary);\n}\n\n.tab:disabled,\n.tab[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_dot-ring: var(--color-background-medium-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);\n}\n\n.on-bold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_dot-ring: var(--color-background-bold-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_dot-ring: var(--color-background-strong-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_dot-ring: var(--color-always-dark-background);\n  --ds-focus-ring-color: var(--color-always-dark-interaction-focus);\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav.\n   Pill tabs use text-body-small (line-height sm / 16px). Width is only the line;\n   `.tab-list` gap supplies the same spacing as between tabs. */\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-stroke-width-012);\n  align-self: center;\n  padding: 0;\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  height: var(--typography-lineheight-sm);\n  flex-shrink: 0;\n  background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n  width: auto;\n  height: var(--dimension-stroke-width-012);\n  align-self: stretch;\n  padding: 0;\n}\n\n.tab-divider--vertical .tab-divider__line {\n  width: auto;\n  height: var(--dimension-stroke-width-012);\n  align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\n@Component({\n  tag: 'ds-tab-group',\n  styleUrl: 'TabGroup.css',\n  scoped: true,\n})\nexport class TabGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabItem[] = [];\n  @Prop() background: TabBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  /**\n   * Find the next non-disabled tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.disabled) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const currentIdx = tabs.findIndex(t => t.id === this.value);\n    const isVertical = this.orientation === 'vertical';\n\n    let nextIdx: number | null = null;\n\n    if (!isVertical) {\n      if (e.key === 'ArrowRight') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowLeft') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    } else {\n      if (e.key === 'ArrowDown') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowUp') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.disabled);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background || this.background === 'faint') return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const isVertical = this.orientation === 'vertical';\n\n    return (\n      <Host class=\"tab-group-host\">\n        <div\n          role=\"tablist\"\n          class={{ 'tab-list': true, 'tab-list--vertical': isVertical }}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-orientation={isVertical ? 'vertical' : undefined}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class={{\n                    'tab-divider': true,\n                    'tab-divider--vertical': isVertical,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  'ds-focus-ring-inset': true,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.disabled || undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.disabled}\n                tabIndex={isSelected ? 0 : -1}\n                onClick={() => !tab.disabled && this.selectTab(tab.id)}\n              >\n                <span class={{\n                  tab__label: true,\n                  'tab__label--dot': !!tab.dot,\n                  [isSelected ? 'text-body-small-emphasis' : 'text-body-small']: true,\n                }}>\n                  {tab.label}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      background=\"var(--_dot-ring)\"\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-toggle.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as o,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}:host(.inactive){cursor:not-allowed;opacity:0.5}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.inactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return i(s,{key:"a343baedfb36edf3eb39682b05d72a66fcca29d1",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.inactive||undefined,tabIndex:this.inactive?-1:0,class:{toggle:true,checked:this.checked,inactive:this.inactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("span",{key:"e92a69389de75fd134d748644ebc1f9550aa8292",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],inactive:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(n(t))){customElements.define(n(t),a)}break}}))}c();const d=a;const h=c;export{d as DsToggle,h as defineCustomElement};
+import{p as t,H as e,c as o,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}:host(.inactive){cursor:not-allowed;opacity:0.5}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.inactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return i(s,{key:"bebb824caa9cd13aff0cc4c6e745e69a1646af6c",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.inactive||undefined,tabIndex:this.inactive?-1:0,class:{toggle:true,checked:this.checked,inactive:this.inactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("span",{key:"e87cd1e9824c0f9a27182e0954f9dfd2028e21a3",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],inactive:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(n(t))){customElements.define(n(t),a)}break}}))}c();const d=a;const h=c;export{d as DsToggle,h as defineCustomElement};
 //# sourceMappingURL=ds-toggle.js.map

package/dist/components/{p-CsO880L-.js → p-CD3yg7ue.js}

@@ -1,2 +1,2 @@
-import{p as o,H as r,c as n,h as t,a,t as e}from"./index.js";import{d as i}from"./p-DTjpgYJV.js";const s=()=>`.btn-host.sc-ds-button{display:inline-block}.btn-host--full.sc-ds-button{display:block;width:100%}.btn.sc-ds-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--dimension-radius-050);cursor:pointer;position:relative;transition:transform var(--effect-motion-short-2);height:var(--dimension-size-400);font-family:inherit;color:var(--color-foreground-primary);background:transparent;box-sizing:border-box;text-decoration:none;user-select:none;outline:none;width:100%;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_border:var(--color-border-tertiary)}.btn.sc-ds-button:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.btn.sc-ds-button:hover:not(.inactive){background-color:var(--_hover-bg)}.btn.sc-ds-button:active:not(.inactive){background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.onMedium.sc-ds-button{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_border:var(--color-border-on-medium-background-tertiary)}.onBold.sc-ds-button{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_border:var(--color-border-on-bold-background-tertiary)}.onStrong.sc-ds-button{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_border:var(--color-border-on-strong-background-tertiary)}.onAlwaysDark.sc-ds-button{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_border:var(--color-always-dark-border-tertiary)}.primary.sc-ds-button{color:var(--color-foreground-on-bold-background-primary)}.primary.intentNone.sc-ds-button{background-color:var(--color-inverted-background);color:var(--color-inverted-foreground-primary);--_hover-bg:color-mix(in oklch, var(--color-inverted-background) 90%, var(--color-inverted-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-inverted-background) 85%, var(--color-inverted-foreground-primary));--_border:var(--color-inverted-border-tertiary)}.primary.sc-ds-button:not(.intentNone){background-color:var(--_bg);--_hover-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-on-bold-background-primary))}.primary.intentBrand.sc-ds-button{--_bg:var(--color-background-bold-brand);color:var(--color-foreground-faint-brand)}.primary.intentNeutral.sc-ds-button{--_bg:var(--color-background-bold-neutral);color:var(--color-foreground-faint-neutral)}.primary.intentPositive.sc-ds-button{--_bg:var(--color-background-bold-positive);color:var(--color-foreground-faint-positive)}.primary.intentNegative.sc-ds-button{--_bg:var(--color-background-bold-negative);color:var(--color-foreground-faint-negative)}.primary.intentWarning.sc-ds-button{--_bg:var(--color-background-bold-warning);color:var(--color-foreground-faint-warning)}.primary.intentCaution.sc-ds-button{--_bg:var(--color-background-bold-caution);color:var(--color-foreground-faint-caution)}.primary.intentAi.sc-ds-button{--_bg:var(--color-background-bold-ai);color:var(--color-foreground-faint-ai)}.primary.contrastMedium.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-primary))}.primary.contrastMedium.intentBrand.sc-ds-button{--_bg:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.primary.contrastMedium.intentNeutral.sc-ds-button{--_bg:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.primary.contrastMedium.intentPositive.sc-ds-button{--_bg:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.primary.contrastMedium.intentNegative.sc-ds-button{--_bg:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.primary.contrastMedium.intentWarning.sc-ds-button{--_bg:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.primary.contrastMedium.intentCaution.sc-ds-button{--_bg:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.primary.contrastMedium.intentAi.sc-ds-button{--_bg:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.primary.contrastStrong.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-on-bold-background-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary))}.primary.contrastStrong.intentBrand.sc-ds-button{--_bg:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.primary.contrastStrong.intentNeutral.sc-ds-button{--_bg:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.primary.contrastStrong.intentPositive.sc-ds-button{--_bg:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.primary.contrastStrong.intentNegative.sc-ds-button{--_bg:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.primary.contrastStrong.intentWarning.sc-ds-button{--_bg:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.primary.contrastStrong.intentCaution.sc-ds-button{--_bg:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.primary.contrastStrong.intentAi.sc-ds-button{--_bg:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.primary.contrastFaint.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary))}.primary.contrastFaint.intentBrand.sc-ds-button{--_bg:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.primary.contrastFaint.intentNeutral.sc-ds-button{--_bg:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.primary.contrastFaint.intentPositive.sc-ds-button{--_bg:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.primary.contrastFaint.intentNegative.sc-ds-button{--_bg:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.primary.contrastFaint.intentWarning.sc-ds-button{--_bg:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.primary.contrastFaint.intentCaution.sc-ds-button{--_bg:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.primary.contrastFaint.intentAi.sc-ds-button{--_bg:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.primary.intentNone.onStrong.sc-ds-button,.primary.intentNone.onAlwaysDark.sc-ds-button{background-color:var(--color-background-primary);color:var(--color-foreground-primary);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));--_border:var(--color-border-tertiary)}.secondary.sc-ds-button{background-color:transparent;color:var(--color-foreground-secondary)}.secondary.intentBrand.sc-ds-button{color:var(--color-foreground-bold-brand)}.secondary.intentNeutral.sc-ds-button{color:var(--color-foreground-bold-neutral)}.secondary.intentPositive.sc-ds-button{color:var(--color-foreground-bold-positive)}.secondary.intentNegative.sc-ds-button{color:var(--color-foreground-bold-negative)}.secondary.intentWarning.sc-ds-button{color:var(--color-foreground-bold-warning)}.secondary.intentCaution.sc-ds-button{color:var(--color-foreground-bold-caution)}.secondary.intentAi.sc-ds-button{color:var(--color-foreground-bold-ai)}.secondary.onMedium.sc-ds-button{color:var(--color-foreground-primary)}.secondary.onMedium.intentBrand.sc-ds-button{color:var(--color-foreground-strong-brand)}.secondary.onMedium.intentNeutral.sc-ds-button{color:var(--color-foreground-strong-neutral)}.secondary.onMedium.intentPositive.sc-ds-button{color:var(--color-foreground-strong-positive)}.secondary.onMedium.intentNegative.sc-ds-button{color:var(--color-foreground-strong-negative)}.secondary.onMedium.intentWarning.sc-ds-button{color:var(--color-foreground-strong-warning)}.secondary.onMedium.intentCaution.sc-ds-button{color:var(--color-foreground-strong-caution)}.secondary.onMedium.intentAi.sc-ds-button{color:var(--color-foreground-strong-ai)}.secondary.onBold.sc-ds-button{color:var(--color-foreground-on-bold-background-secondary)}.secondary.onBold.intentBrand.sc-ds-button{color:var(--color-foreground-faint-brand)}.secondary.onBold.intentNeutral.sc-ds-button{color:var(--color-foreground-faint-neutral)}.secondary.onBold.intentPositive.sc-ds-button{color:var(--color-foreground-faint-positive)}.secondary.onBold.intentNegative.sc-ds-button{color:var(--color-foreground-faint-negative)}.secondary.onBold.intentWarning.sc-ds-button{color:var(--color-foreground-faint-warning)}.secondary.onBold.intentCaution.sc-ds-button{color:var(--color-foreground-faint-caution)}.secondary.onBold.intentAi.sc-ds-button{color:var(--color-foreground-faint-ai)}.secondary.onAlwaysDark.sc-ds-button{color:var(--color-always-dark-foreground-secondary)}.secondary.onAlwaysDark.intentBrand.sc-ds-button{color:var(--color-always-dark-foreground-brand)}.secondary.onAlwaysDark.intentNeutral.sc-ds-button{color:var(--color-always-dark-foreground-neutral)}.secondary.onAlwaysDark.intentPositive.sc-ds-button{color:var(--color-always-dark-foreground-positive)}.secondary.onAlwaysDark.intentNegative.sc-ds-button{color:var(--color-always-dark-foreground-negative)}.secondary.onAlwaysDark.intentWarning.sc-ds-button{color:var(--color-always-dark-foreground-warning)}.secondary.onAlwaysDark.intentCaution.sc-ds-button{color:var(--color-always-dark-foreground-caution)}.secondary.onAlwaysDark.intentAi.sc-ds-button{color:var(--color-always-dark-foreground-ai)}.secondary.onStrong.sc-ds-button{color:var(--color-foreground-on-bold-background-secondary)}.secondary.onStrong.intentBrand.sc-ds-button{color:var(--color-foreground-faint-brand)}.secondary.onStrong.intentNeutral.sc-ds-button{color:var(--color-foreground-faint-neutral)}.secondary.onStrong.intentPositive.sc-ds-button{color:var(--color-foreground-faint-positive)}.secondary.onStrong.intentNegative.sc-ds-button{color:var(--color-foreground-faint-negative)}.secondary.onStrong.intentWarning.sc-ds-button{color:var(--color-foreground-faint-warning)}.secondary.onStrong.intentCaution.sc-ds-button{color:var(--color-foreground-faint-caution)}.secondary.onStrong.intentAi.sc-ds-button{color:var(--color-foreground-faint-ai)}.secondary.elevationFlat.sc-ds-button{box-shadow:inset 0 0 0 1px var(--_border)}.secondary.elevationElevated.sc-ds-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.secondary.elevationFloating.sc-ds-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-floating);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.primary.elevationElevated.sc-ds-button{box-shadow:var(--effect-elevation-elevated-sm)}.primary.elevationNone.sc-ds-button{box-shadow:none}.primary.elevationFlat.sc-ds-button{box-shadow:inset 0 0 0 1px var(--_border)}.primary.intentNone.elevationFlat.sc-ds-button{--_border:var(--color-border-tertiary)}.primary.elevationFloating.sc-ds-button{box-shadow:var(--effect-elevation-elevated-floating) !important}.iconOnly.sc-ds-button{padding:0;width:var(--dimension-size-400);min-width:var(--dimension-size-400)}.labelOnly.sc-ds-button{padding:0 var(--dimension-space-100)}.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-100) 0 var(--dimension-space-075);gap:var(--dimension-space-025)}.dropdown.sc-ds-button{gap:var(--dimension-space-050)}.sizeSM.sc-ds-button{height:var(--dimension-size-300)}.sizeSM.iconOnly.sc-ds-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.sizeSM.labelOnly.sc-ds-button{padding:0 var(--dimension-space-075)}.sizeSM.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-075) 0 var(--dimension-space-050);gap:1px}.sizeXS.sc-ds-button{height:var(--dimension-size-200)}.sizeXS.iconOnly.sc-ds-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.sizeXS.labelOnly.sc-ds-button,.sizeXS.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-025);gap:0}.sizeLG.sc-ds-button{height:var(--dimension-size-500)}.sizeLG.iconOnly.sc-ds-button{width:var(--dimension-size-500);min-width:var(--dimension-size-500)}.sizeLG.labelOnly.sc-ds-button{padding:0 var(--dimension-space-150)}.sizeLG.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-150) 0 var(--dimension-space-100);gap:var(--dimension-space-075)}.rounded.sc-ds-button{border-radius:var(--dimension-radius-half)}.rounded.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-100) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.sizeSM.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.sizeSM.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.sizeLG.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-150) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-150) + var(--dimension-space-050))}.rounded.sizeLG.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-100) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-150) + var(--dimension-space-050))}.inactive.sc-ds-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.fullWidth.sc-ds-button{display:flex;width:100%}.btn__icon.sc-ds-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.btn__label.sc-ds-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn__chevron.sc-ds-button{flex-shrink:0}.btn__badge.sc-ds-button{position:absolute;top:var(--dimension-space-025);right:var(--dimension-space-025);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-semibold);line-height:var(--typography-lineheight-xs);color:var(--color-foreground-secondary);pointer-events:none;z-index:10}`;const d={xs:12,sm:16,md:20,lg:24};const c={xs:"text-caption-emphasis",sm:"text-body-small-emphasis",md:"text-body-medium-emphasis",lg:"text-body-large-emphasis"};const l=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.dsMouseEnter=n(this,"dsMouseEnter");this.dsMouseLeave=n(this,"dsMouseLeave");this.variant="primary";this.intent="brand";this.size="md";this.rounded=false;this.fullWidth=false;this.contrast="bold";this.dropdown=false;this.loading=false;this.inactive=false;this.type="button";this.hasIcon=false;this.handleClick=o=>{if(this.inactive||this.loading)return;this.dsClick.emit(o)}}componentWillLoad(){this.hasIcon=!!this.el.querySelector('[slot="icon"]')}get effectiveElevation(){return this.elevation??(this.variant==="primary"?"none":"flat")}render(){const o=this.href?"a":"button";const r=this.size;const n=d[r];const e=c[r];const i=this.effectiveElevation;const s=!!this.label;const l=this.hasIcon||this.loading;const b=l&&!s;const g=s&&!l;const v=l&&s;const m=this.background;const p={btn:true,[this.variant]:true,[`intent${u(this.intent)}`]:true,[`size${r.toUpperCase()}`]:r!=="md",rounded:this.rounded,inactive:this.inactive||this.loading,iconOnly:b,labelOnly:g,iconAndLabel:v,dropdown:this.dropdown,[`contrast${u(this.contrast)}`]:this.variant==="primary"&&this.intent!=="none"&&this.contrast!=="bold",[`elevation${u(i)}`]:true,onMedium:m==="medium",onBold:m==="bold",onStrong:m==="strong",onAlwaysDark:m==="always-dark",fullWidth:this.fullWidth};const f={};if(o==="button"){f.type=this.type;f.disabled=this.inactive||this.loading}if(this.href)f.href=this.href;if(this.target)f.target=this.target;return t(a,{key:"25946719f92cd6ab248a1476b069c69cc6d9543a",class:{"btn-host":true,"btn-host--full":this.fullWidth}},t(o,{key:"45fd0a95c28b762c3b2f1efc7064eb04de6a1ae8",class:p,style:this.width?{width:this.width}:undefined,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-disabled":this.inactive||this.loading||undefined,"aria-busy":this.loading||undefined,onClick:this.handleClick,onMouseEnter:o=>!this.inactive&&!this.loading&&this.dsMouseEnter.emit(o),onMouseLeave:o=>!this.inactive&&!this.loading&&this.dsMouseLeave.emit(o),...f},t("span",{key:"42b19206da99c2f4f307fda73f06f23c7c7714ef",class:"btn__icon",style:{fontSize:`${n}px`,display:l?undefined:"none"}},this.loading?t("ds-loader",{size:n}):t("slot",{name:"icon"})),s&&t("span",{key:"80a796e7ba3083206d3456262db9f931715d4f81",class:`btn__label ${e}`},this.label),this.dropdown&&t("svg",{key:"fbac0f718e17b8aafe91a72fde2271d8404855de",class:"btn__chevron",width:n,height:n,viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},t("path",{key:"b10b8a3ac3b99d3e20c53d4270dff387fef30fc8",d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),this.badgeCount!=null&&this.badgeCount>0&&t("span",{key:"13cc06cf71d98442ef9137c3867bdb7a615cb9d2",class:"btn__badge"},this.badgeCount>9?"+":this.badgeCount)))}get el(){return this}static get style(){return s()}},[262,"ds-button",{variant:[1],intent:[1],size:[1],label:[1],rounded:[4],fullWidth:[4,"full-width"],width:[1],contrast:[1],background:[1],dropdown:[4],badgeCount:[2,"badge-count"],elevation:[1],loading:[4],inactive:[4],href:[1],target:[1],type:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],hasIcon:[32]}]);function u(o){return o.charAt(0).toUpperCase()+o.slice(1)}function b(){if(typeof customElements==="undefined"){return}const o=["ds-button","ds-loader"];o.forEach((o=>{switch(o){case"ds-button":if(!customElements.get(e(o))){customElements.define(e(o),l)}break;case"ds-loader":if(!customElements.get(e(o))){i()}break}}))}b();export{l as B,b as d};
-//# sourceMappingURL=p-CsO880L-.js.map
+import{p as o,H as r,c as n,h as t,a,t as e}from"./index.js";import{d as i}from"./p-DTjpgYJV.js";const s=()=>`.btn-host.sc-ds-button{display:inline-block}.btn-host--full.sc-ds-button{display:block;width:100%}.btn.sc-ds-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--dimension-radius-050);cursor:pointer;position:relative;transition:transform var(--effect-motion-short-2);height:var(--dimension-size-400);font-family:inherit;color:var(--color-foreground-primary);background:transparent;box-sizing:border-box;text-decoration:none;user-select:none;outline:none;width:100%;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_border:var(--color-border-tertiary)}.btn.sc-ds-button:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.btn.sc-ds-button:hover:not(.inactive){background-color:var(--_hover-bg)}.btn.sc-ds-button:active:not(.inactive){background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.onMedium.sc-ds-button{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_border:var(--color-border-on-medium-background-tertiary)}.onBold.sc-ds-button{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_border:var(--color-border-on-bold-background-tertiary)}.onStrong.sc-ds-button{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_border:var(--color-border-on-strong-background-tertiary)}.onAlwaysDark.sc-ds-button{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_border:var(--color-always-dark-border-tertiary)}.primary.sc-ds-button{color:var(--color-foreground-on-bold-background-primary)}.primary.intentNone.sc-ds-button{background-color:var(--color-inverted-background);color:var(--color-inverted-foreground-primary);--_hover-bg:color-mix(in oklch, var(--color-inverted-background) 90%, var(--color-inverted-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-inverted-background) 85%, var(--color-inverted-foreground-primary));--_border:var(--color-inverted-border-tertiary)}.primary.sc-ds-button:not(.intentNone){background-color:var(--_bg);--_hover-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-on-bold-background-primary))}.primary.intentBrand.sc-ds-button{--_bg:var(--color-background-bold-brand);color:var(--color-foreground-faint-brand)}.primary.intentNeutral.sc-ds-button{--_bg:var(--color-background-bold-neutral);color:var(--color-foreground-faint-neutral)}.primary.intentPositive.sc-ds-button{--_bg:var(--color-background-bold-positive);color:var(--color-foreground-faint-positive)}.primary.intentNegative.sc-ds-button{--_bg:var(--color-background-bold-negative);color:var(--color-foreground-faint-negative)}.primary.intentWarning.sc-ds-button{--_bg:var(--color-background-bold-warning);color:var(--color-foreground-faint-warning)}.primary.intentCaution.sc-ds-button{--_bg:var(--color-background-bold-caution);color:var(--color-foreground-faint-caution)}.primary.intentAi.sc-ds-button{--_bg:var(--color-background-bold-ai);color:var(--color-foreground-faint-ai)}.primary.contrastMedium.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-primary))}.primary.contrastMedium.intentBrand.sc-ds-button{--_bg:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.primary.contrastMedium.intentNeutral.sc-ds-button{--_bg:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.primary.contrastMedium.intentPositive.sc-ds-button{--_bg:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.primary.contrastMedium.intentNegative.sc-ds-button{--_bg:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.primary.contrastMedium.intentWarning.sc-ds-button{--_bg:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.primary.contrastMedium.intentCaution.sc-ds-button{--_bg:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.primary.contrastMedium.intentAi.sc-ds-button{--_bg:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.primary.contrastStrong.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-on-bold-background-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary))}.primary.contrastStrong.intentBrand.sc-ds-button{--_bg:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.primary.contrastStrong.intentNeutral.sc-ds-button{--_bg:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.primary.contrastStrong.intentPositive.sc-ds-button{--_bg:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.primary.contrastStrong.intentNegative.sc-ds-button{--_bg:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.primary.contrastStrong.intentWarning.sc-ds-button{--_bg:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.primary.contrastStrong.intentCaution.sc-ds-button{--_bg:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.primary.contrastStrong.intentAi.sc-ds-button{--_bg:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.primary.contrastFaint.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary))}.primary.contrastFaint.intentBrand.sc-ds-button{--_bg:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.primary.contrastFaint.intentNeutral.sc-ds-button{--_bg:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.primary.contrastFaint.intentPositive.sc-ds-button{--_bg:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.primary.contrastFaint.intentNegative.sc-ds-button{--_bg:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.primary.contrastFaint.intentWarning.sc-ds-button{--_bg:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.primary.contrastFaint.intentCaution.sc-ds-button{--_bg:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.primary.contrastFaint.intentAi.sc-ds-button{--_bg:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.primary.intentNone.onStrong.sc-ds-button,.primary.intentNone.onAlwaysDark.sc-ds-button{background-color:var(--color-background-primary);color:var(--color-foreground-primary);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));--_border:var(--color-border-tertiary)}.secondary.sc-ds-button{background-color:transparent;color:var(--color-foreground-secondary)}.secondary.intentBrand.sc-ds-button{color:var(--color-foreground-bold-brand)}.secondary.intentNeutral.sc-ds-button{color:var(--color-foreground-bold-neutral)}.secondary.intentPositive.sc-ds-button{color:var(--color-foreground-bold-positive)}.secondary.intentNegative.sc-ds-button{color:var(--color-foreground-bold-negative)}.secondary.intentWarning.sc-ds-button{color:var(--color-foreground-bold-warning)}.secondary.intentCaution.sc-ds-button{color:var(--color-foreground-bold-caution)}.secondary.intentAi.sc-ds-button{color:var(--color-foreground-bold-ai)}.secondary.onMedium.sc-ds-button{color:var(--color-foreground-primary)}.secondary.onMedium.intentBrand.sc-ds-button{color:var(--color-foreground-strong-brand)}.secondary.onMedium.intentNeutral.sc-ds-button{color:var(--color-foreground-strong-neutral)}.secondary.onMedium.intentPositive.sc-ds-button{color:var(--color-foreground-strong-positive)}.secondary.onMedium.intentNegative.sc-ds-button{color:var(--color-foreground-strong-negative)}.secondary.onMedium.intentWarning.sc-ds-button{color:var(--color-foreground-strong-warning)}.secondary.onMedium.intentCaution.sc-ds-button{color:var(--color-foreground-strong-caution)}.secondary.onMedium.intentAi.sc-ds-button{color:var(--color-foreground-strong-ai)}.secondary.onBold.sc-ds-button{color:var(--color-foreground-on-bold-background-secondary)}.secondary.onBold.intentBrand.sc-ds-button{color:var(--color-foreground-faint-brand)}.secondary.onBold.intentNeutral.sc-ds-button{color:var(--color-foreground-faint-neutral)}.secondary.onBold.intentPositive.sc-ds-button{color:var(--color-foreground-faint-positive)}.secondary.onBold.intentNegative.sc-ds-button{color:var(--color-foreground-faint-negative)}.secondary.onBold.intentWarning.sc-ds-button{color:var(--color-foreground-faint-warning)}.secondary.onBold.intentCaution.sc-ds-button{color:var(--color-foreground-faint-caution)}.secondary.onBold.intentAi.sc-ds-button{color:var(--color-foreground-faint-ai)}.secondary.onAlwaysDark.sc-ds-button{color:var(--color-always-dark-foreground-secondary)}.secondary.onAlwaysDark.intentBrand.sc-ds-button{color:var(--color-always-dark-foreground-brand)}.secondary.onAlwaysDark.intentNeutral.sc-ds-button{color:var(--color-always-dark-foreground-neutral)}.secondary.onAlwaysDark.intentPositive.sc-ds-button{color:var(--color-always-dark-foreground-positive)}.secondary.onAlwaysDark.intentNegative.sc-ds-button{color:var(--color-always-dark-foreground-negative)}.secondary.onAlwaysDark.intentWarning.sc-ds-button{color:var(--color-always-dark-foreground-warning)}.secondary.onAlwaysDark.intentCaution.sc-ds-button{color:var(--color-always-dark-foreground-caution)}.secondary.onAlwaysDark.intentAi.sc-ds-button{color:var(--color-always-dark-foreground-ai)}.secondary.onStrong.sc-ds-button{color:var(--color-foreground-on-bold-background-secondary)}.secondary.onStrong.intentBrand.sc-ds-button{color:var(--color-foreground-faint-brand)}.secondary.onStrong.intentNeutral.sc-ds-button{color:var(--color-foreground-faint-neutral)}.secondary.onStrong.intentPositive.sc-ds-button{color:var(--color-foreground-faint-positive)}.secondary.onStrong.intentNegative.sc-ds-button{color:var(--color-foreground-faint-negative)}.secondary.onStrong.intentWarning.sc-ds-button{color:var(--color-foreground-faint-warning)}.secondary.onStrong.intentCaution.sc-ds-button{color:var(--color-foreground-faint-caution)}.secondary.onStrong.intentAi.sc-ds-button{color:var(--color-foreground-faint-ai)}.secondary.elevationFlat.sc-ds-button{box-shadow:inset 0 0 0 1px var(--_border)}.secondary.elevationElevated.sc-ds-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.secondary.elevationFloating.sc-ds-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-floating);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.primary.elevationElevated.sc-ds-button{box-shadow:var(--effect-elevation-elevated-sm)}.primary.elevationNone.sc-ds-button{box-shadow:none}.primary.elevationFlat.sc-ds-button{box-shadow:inset 0 0 0 1px var(--_border)}.primary.intentNone.elevationFlat.sc-ds-button{--_border:var(--color-border-tertiary)}.primary.elevationFloating.sc-ds-button{box-shadow:var(--effect-elevation-elevated-floating) !important}.iconOnly.sc-ds-button{padding:0;width:var(--dimension-size-400);min-width:var(--dimension-size-400)}.labelOnly.sc-ds-button{padding:0 var(--dimension-space-100)}.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-100) 0 var(--dimension-space-075);gap:var(--dimension-space-025)}.dropdown.sc-ds-button{gap:var(--dimension-space-050)}.sizeSM.sc-ds-button{height:var(--dimension-size-300)}.sizeSM.iconOnly.sc-ds-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.sizeSM.labelOnly.sc-ds-button{padding:0 var(--dimension-space-075)}.sizeSM.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-075) 0 var(--dimension-space-050);gap:1px}.sizeXS.sc-ds-button{height:var(--dimension-size-200)}.sizeXS.iconOnly.sc-ds-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.sizeXS.labelOnly.sc-ds-button,.sizeXS.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-025);gap:0}.sizeLG.sc-ds-button{height:var(--dimension-size-500)}.sizeLG.iconOnly.sc-ds-button{width:var(--dimension-size-500);min-width:var(--dimension-size-500)}.sizeLG.labelOnly.sc-ds-button{padding:0 var(--dimension-space-150)}.sizeLG.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-150) 0 var(--dimension-space-100);gap:var(--dimension-space-075)}.rounded.sc-ds-button{border-radius:var(--dimension-radius-half)}.rounded.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-100) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.sizeSM.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.sizeSM.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.sizeLG.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-150) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-150) + var(--dimension-space-050))}.rounded.sizeLG.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-100) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-150) + var(--dimension-space-050))}.inactive.sc-ds-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.fullWidth.sc-ds-button{display:flex;width:100%}.btn__icon.sc-ds-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.btn__label.sc-ds-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn__chevron.sc-ds-button{flex-shrink:0}.btn__badge.sc-ds-button{position:absolute;top:var(--dimension-space-025);right:var(--dimension-space-025);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-semibold);line-height:var(--typography-lineheight-xs);color:var(--color-foreground-secondary);pointer-events:none;z-index:10}`;const d={xs:12,sm:16,md:20,lg:24};const c={xs:"text-caption-emphasis",sm:"text-body-small-emphasis",md:"text-body-medium-emphasis",lg:"text-body-large-emphasis"};const l=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.dsMouseEnter=n(this,"dsMouseEnter");this.dsMouseLeave=n(this,"dsMouseLeave");this.variant="primary";this.intent="brand";this.size="md";this.rounded=false;this.fullWidth=false;this.contrast="bold";this.dropdown=false;this.loading=false;this.inactive=false;this.type="button";this.hasIcon=false;this.handleClick=o=>{if(this.inactive||this.loading)return;this.dsClick.emit(o)}}componentWillLoad(){this.hasIcon=!!this.el.querySelector('[slot="icon"]')}get effectiveElevation(){return this.elevation??(this.variant==="primary"?"none":"flat")}render(){const o=this.href?"a":"button";const r=this.size;const n=d[r];const e=c[r];const i=this.effectiveElevation;const s=!!this.label;const l=this.hasIcon||this.loading;const b=l&&!s;const g=s&&!l;const v=l&&s;const m=this.background;const p={btn:true,[this.variant]:true,[`intent${u(this.intent)}`]:true,[`size${r.toUpperCase()}`]:r!=="md",rounded:this.rounded,inactive:this.inactive||this.loading,iconOnly:b,labelOnly:g,iconAndLabel:v,dropdown:this.dropdown,[`contrast${u(this.contrast)}`]:this.variant==="primary"&&this.intent!=="none"&&this.contrast!=="bold",[`elevation${u(i)}`]:true,onMedium:m==="medium",onBold:m==="bold",onStrong:m==="strong",onAlwaysDark:m==="always-dark",fullWidth:this.fullWidth};const f={};if(o==="button"){f.type=this.type;f.disabled=this.inactive||this.loading}if(this.href)f.href=this.href;if(this.target)f.target=this.target;return t(a,{key:"53bffbeb6ad785dd542e220a0479abce151b53bf",class:{"btn-host":true,"btn-host--full":this.fullWidth}},t(o,{key:"bc22e851706ab643a4ba3d19c0b9300cce1bb863",class:p,style:this.width?{width:this.width}:undefined,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-disabled":this.inactive||this.loading||undefined,"aria-busy":this.loading||undefined,onClick:this.handleClick,onMouseEnter:o=>!this.inactive&&!this.loading&&this.dsMouseEnter.emit(o),onMouseLeave:o=>!this.inactive&&!this.loading&&this.dsMouseLeave.emit(o),...f},t("span",{key:"38a68e4945a8e7517f67bbc3677d4d85878f767d",class:"btn__icon",style:{fontSize:`${n}px`,display:l?undefined:"none"}},this.loading?t("ds-loader",{size:n}):t("slot",{name:"icon"})),s&&t("span",{key:"9fdb9b30dbc61863f05960301f3c867a25634203",class:`btn__label ${e}`},this.label),this.dropdown&&t("svg",{key:"2687d9a0465f28cfc1f8927a2431ae1fd5acc540",class:"btn__chevron",width:n,height:n,viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},t("path",{key:"03253b27426d2805522167c9f32be8345b80eb1c",d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),this.badgeCount!=null&&this.badgeCount>0&&t("span",{key:"57824101f159d9b75bfefd999d1e3c9234072372",class:"btn__badge"},this.badgeCount>9?"+":this.badgeCount)))}get el(){return this}static get style(){return s()}},[262,"ds-button",{variant:[1],intent:[1],size:[1],label:[1],rounded:[4],fullWidth:[4,"full-width"],width:[1],contrast:[1],background:[1],dropdown:[4],badgeCount:[2,"badge-count"],elevation:[1],loading:[4],inactive:[4],href:[1],target:[1],type:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],hasIcon:[32]}]);function u(o){return o.charAt(0).toUpperCase()+o.slice(1)}function b(){if(typeof customElements==="undefined"){return}const o=["ds-button","ds-loader"];o.forEach((o=>{switch(o){case"ds-button":if(!customElements.get(e(o))){customElements.define(e(o),l)}break;case"ds-loader":if(!customElements.get(e(o))){i()}break}}))}b();export{l as B,b as d};
+//# sourceMappingURL=p-CD3yg7ue.js.map

package/dist/components/p-CSc44rQs.js

@@ -0,0 +1,2 @@
+import{p as o,H as n,c as i,h as t,a as e,t as r}from"./index.js";import{d as s}from"./p-CiEc8Nwx.js";import{d as c}from"./p-DqBCQRRd.js";const d=()=>`.sc-ds-button-unfilled-icon-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-unfilled-icon:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled-icon{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-unfilled-icon:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-icon:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-icon{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-icon::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-button-unfilled-icon-h{display:inline-flex;flex:0 0 auto;width:var(--dimension-size-400);height:var(--dimension-size-400);outline:none;--ds-button-unfilled-icon-fg:var(--color-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-secondary);--ds-button-unfilled-icon-border:var(--color-border-tertiary)}.button-icon.sc-ds-button-unfilled-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-400);height:var(--dimension-size-400);padding:var(--dimension-space-075);background:transparent;border:var(--dimension-stroke-width-012, 1px) solid transparent;border-radius:var(--dimension-radius-025);color:var(--ds-button-unfilled-icon-fg);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-icon.sc-ds-button-unfilled-icon::before,.button-icon.sc-ds-button-unfilled-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none;z-index:1}.button-icon.sc-ds-button-unfilled-icon::before{z-index:0}.button-icon--active-fill.sc-ds-button-unfilled-icon::before{background:var(--ds-button-unfilled-icon-active-bg)}.button-icon.sc-ds-button-unfilled-icon:hover:not(.button-icon--inactive)::after{background:var(--ds-button-unfilled-icon-hover-bg);transition:none}.button-icon.sc-ds-button-unfilled-icon:active:not(.button-icon--inactive)::after{background:var(--ds-button-unfilled-icon-pressed-bg);transition:none}.button-icon--active.sc-ds-button-unfilled-icon{color:var(--ds-button-unfilled-icon-fg-active)}.button-icon--bordered.sc-ds-button-unfilled-icon{border-color:var(--ds-button-unfilled-icon-border)}.button-icon--bordered.sc-ds-button-unfilled-icon::after{inset:var(--dimension-stroke-width-012, 1px)}.button-icon--bordered.sc-ds-button-unfilled-icon::before{inset:var(--dimension-stroke-width-012, 1px)}.button-icon--inactive.sc-ds-button-unfilled-icon{opacity:0.5;cursor:not-allowed;pointer-events:none}.button-icon--on-medium.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-medium-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-medium-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-medium-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.button-icon--on-bold.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-bold-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-bold-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-bold-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.button-icon--on-strong.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-strong-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-strong-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-strong-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.button-icon--on-always-dark.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-always-dark-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-always-dark-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-always-dark-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.button-icon--on-navigation.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-navigation-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-navigation-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-navigation-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-navigation-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-navigation-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.button-icon__icon-wrap.sc-ds-button-unfilled-icon{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-icon__dot.sc-ds-button-unfilled-icon{position:absolute;top:0;right:0;pointer-events:none}`;const a=o(class o extends n{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=i(this,"dsClick");this.dsChange=i(this,"dsChange");this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=false;this.dot=false;this.inactive=false;this.type="button";this.ariaLabel="action";this.buttonEl=null;this.handleClick=o=>{if(this.inactive)return;this.dsClick.emit(o);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}render(){const o=this.background;const n={"button-icon":true,"button-icon--active":this.isActive,"button-icon--active-fill":this.isActive&&this.activeFill,"button-icon--bordered":this.hasBorder,"button-icon--inactive":this.inactive,"button-icon--on-medium":o==="medium","button-icon--on-bold":o==="bold","button-icon--on-strong":o==="strong","button-icon--on-always-dark":o==="always-dark","button-icon--on-navigation":o==="navigation"};return t(e,{key:"6abdc966f8bc8f651bbfa533faa71850a4f44dc4",tabIndex:-1},t("button",{key:"d3b3c1759f9fabb7f0e94611c6c3cb3a0e0d9e77",ref:o=>{this.buttonEl=o??null},type:this.type,class:n,disabled:this.inactive,"aria-label":this.ariaLabel,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},t("span",{key:"731bc71690891edb9386a2c4a62afae34fa5fb17",class:"button-icon__icon-wrap"},t("ds-icon",{key:"8af219906a6e5ffacce764d725a0e783c4361f10",name:this.icon,size:"md",color:"inherit"}),this.dot&&t("ds-badge",{key:"3d19f7b87b208fe9f2619e34ff8cc114f27745c8",class:"button-icon__dot",variant:"dot",background:"var(--ds-button-unfilled-icon-dot-ring)",label:"","aria-hidden":"true"}))))}get el(){return this}static get style(){return d()}},[2,"ds-button-unfilled-icon",{icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],dot:[4],inactive:[4],type:[1],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],setFocus:[64]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-button-unfilled-icon","ds-badge","ds-icon"];o.forEach((o=>{switch(o){case"ds-button-unfilled-icon":if(!customElements.get(r(o))){customElements.define(r(o),a)}break;case"ds-badge":if(!customElements.get(r(o))){s()}break;case"ds-icon":if(!customElements.get(r(o))){c()}break}}))}u();export{a as B,u as d};
+//# sourceMappingURL=p-CSc44rQs.js.map

package/dist/components/p-CSc44rQs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["buttonUnfilledIconCss","ButtonUnfilledIcon","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","icon","isActive","activeFill","hasBorder","dot","inactive","type","ariaLabel","buttonEl","handleClick","event","dsClick","emit","dsChange","setFocus","focus","render","bg","background","cls","h","Host","key","tabIndex","ref","el","class","disabled","controls","expanded","undefined","String","haspopup","pressed","onClick","name","size","color","variant","label"],"sources":["src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.css?tag=ds-button-unfilled-icon&encapsulation=scoped","src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n\n:host {\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  outline: none;\n  --ds-button-unfilled-icon-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-icon-border: var(--color-border-tertiary);\n}\n\n.button-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  padding: var(--dimension-space-075);\n  background: transparent;\n  border: var(--dimension-stroke-width-012, 1px) solid transparent;\n  border-radius: var(--dimension-radius-025);\n  color: var(--ds-button-unfilled-icon-fg);\n  cursor: pointer;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n}\n\n.button-icon::before,\n.button-icon::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n  z-index: 1;\n}\n\n.button-icon::before {\n  z-index: 0;\n}\n\n.button-icon--active-fill::before {\n  background: var(--ds-button-unfilled-icon-active-bg);\n}\n\n.button-icon:hover:not(.button-icon--inactive)::after {\n  background: var(--ds-button-unfilled-icon-hover-bg);\n  transition: none;\n}\n\n.button-icon:active:not(.button-icon--inactive)::after {\n  background: var(--ds-button-unfilled-icon-pressed-bg);\n  transition: none;\n}\n\n.button-icon--active {\n  color: var(--ds-button-unfilled-icon-fg-active);\n}\n\n.button-icon--bordered {\n  border-color: var(--ds-button-unfilled-icon-border);\n}\n\n.button-icon--bordered::after {\n  inset: var(--dimension-stroke-width-012, 1px);\n}\n\n.button-icon--bordered::before {\n  inset: var(--dimension-stroke-width-012, 1px);\n}\n\n.button-icon--inactive {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.button-icon--on-medium {\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-medium-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-medium-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-medium-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);\n}\n\n.button-icon--on-bold {\n  --ds-button-unfilled-icon-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-bold-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-bold-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-bold-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n}\n\n.button-icon--on-strong {\n  --ds-button-unfilled-icon-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-strong-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-strong-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-strong-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);\n}\n\n.button-icon--on-always-dark {\n  --ds-button-unfilled-icon-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-always-dark-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-always-dark-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-always-dark-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-always-dark-background);\n  --ds-focus-ring-color: var(--color-always-dark-interaction-focus);\n}\n\n.button-icon--on-navigation {\n  --ds-button-unfilled-icon-fg: var(--color-navigation-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-navigation-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-navigation-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-navigation-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-navigation-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-navigation-background);\n  --ds-focus-ring-color: var(--color-navigation-interaction-focus);\n}\n\n.button-icon__icon-wrap {\n  position: relative;\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-icon__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\n\nexport type ButtonUnfilledIconBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'always-dark'\n  | 'navigation';\n\n@Component({\n  tag: 'ds-button-unfilled-icon',\n  styleUrl: 'ButtonUnfilledIcon.css',\n  scoped: true,\n})\nexport class ButtonUnfilledIcon {\n  @Element() el!: HTMLElement;\n\n  /** Icon name passed to <ds-icon>. */\n  @Prop() icon: string = '';\n\n  /** Active/selected visual state. */\n  @Prop() isActive: boolean = false;\n\n  /** When active, render the active interaction fill. Shell chrome can disable this while keeping active icon colour. */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px tertiary border without changing the interaction model. */\n  @Prop() hasBorder: boolean = false;\n\n  /** Show a notification dot at the top-right of the icon zone. */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Parent surface context — adjusts hover/press/focus colours for coloured backgrounds. */\n  @Prop() background: ButtonUnfilledIconBackground | undefined;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: string | undefined;\n  @Prop() pressed: boolean | undefined;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.inactive) return;\n    this.dsClick.emit(event);\n    this.dsChange.emit(!this.isActive);\n  };\n\n  render() {\n    const bg = this.background;\n\n    const cls: Record<string, boolean> = {\n      'button-icon': true,\n      'button-icon--active': this.isActive,\n      'button-icon--active-fill': this.isActive && this.activeFill,\n      'button-icon--bordered': this.hasBorder,\n      'button-icon--inactive': this.inactive,\n      'button-icon--on-medium': bg === 'medium',\n      'button-icon--on-bold': bg === 'bold',\n      'button-icon--on-strong': bg === 'strong',\n      'button-icon--on-always-dark': bg === 'always-dark',\n      'button-icon--on-navigation': bg === 'navigation',\n    };\n\n    return (\n      <Host tabIndex={-1}>\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.inactive}\n          aria-label={this.ariaLabel}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.haspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onClick={this.handleClick}\n        >\n          <span class=\"button-icon__icon-wrap\">\n            <ds-icon name={this.icon} size=\"md\" color=\"inherit\" />\n            {this.dot && (\n              <ds-badge\n                class=\"button-icon__dot\"\n                variant=\"dot\"\n                background=\"var(--ds-button-unfilled-icon-dot-ring)\"\n                label=\"\"\n                aria-hidden=\"true\"\n              />\n            )}\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAwB,IAAM,q/M,MCevBC,EAAkBC,EAAA,MAAAD,UAAAE,EAL/B,WAAAC,CAAAC,G,4GASUC,KAAAC,KAAe,GAGfD,KAAAE,SAAoB,MAGpBF,KAAAG,WAAsB,KAGtBH,KAAAI,UAAqB,MAGrBJ,KAAAK,IAAe,MAGfL,KAAAM,SAAoB,MAGpBN,KAAAO,KAAsC,SAKXP,KAAAQ,UAAoB,SAS/CR,KAAAS,SAAqC,KAOrCT,KAAAU,YAAeC,IACrB,GAAIX,KAAKM,SAAU,OACnBN,KAAKY,QAAQC,KAAKF,GAClBX,KAAKc,SAASD,MAAMb,KAAKE,SAAS,CAmDrC,CA1DC,cAAMa,GACJf,KAAKS,UAAUO,O,CASjB,MAAAC,GACE,MAAMC,EAAKlB,KAAKmB,WAEhB,MAAMC,EAA+B,CACnC,cAAe,KACf,sBAAuBpB,KAAKE,SAC5B,2BAA4BF,KAAKE,UAAYF,KAAKG,WAClD,wBAAyBH,KAAKI,UAC9B,wBAAyBJ,KAAKM,SAC9B,yBAA0BY,IAAO,SACjC,uBAAwBA,IAAO,OAC/B,yBAA0BA,IAAO,SACjC,8BAA+BA,IAAO,cACtC,6BAA8BA,IAAO,cAGvC,OACEG,EAACC,EAAI,CAAAC,IAAA,2CAACC,UAAU,GACdH,EAAA,UAAAE,IAAA,2CACEE,IAAKC,IACH1B,KAAKS,SAAWiB,GAAM,IAAI,EAE5BnB,KAAMP,KAAKO,KACXoB,MAAOP,EACPQ,SAAU5B,KAAKM,SAAQ,aACXN,KAAKQ,UAAS,gBACXR,KAAK6B,SAAQ,gBACb7B,KAAK8B,WAAaC,UAAYA,UAAYC,OAAOhC,KAAK8B,UAAS,gBAC/D9B,KAAKiC,SAAQ,eACdjC,KAAKkC,UAAYH,UAAYA,UAAYC,OAAOhC,KAAKkC,SACnEC,QAASnC,KAAKU,aAEdW,EAAA,QAAAE,IAAA,2CAAMI,MAAM,0BACVN,EAAA,WAAAE,IAAA,2CAASa,KAAMpC,KAAKC,KAAMoC,KAAK,KAAKC,MAAM,YACzCtC,KAAKK,KACJgB,EAAA,YAAAE,IAAA,2CACEI,MAAM,mBACNY,QAAQ,MACRpB,WAAW,0CACXqB,MAAM,GAAE,cACI,W","ignoreList":[]}

package/dist/components/p-CZpCmCiq.js

@@ -0,0 +1,2 @@
+import{p as o,H as r,c as a,h as n,a as t,t as s}from"./index.js";import{g as e,i}from"./p-BQq26pt9.js";import{d}from"./p-CiEc8Nwx.js";const c=()=>`.sc-ds-tab-group-nav-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-tab-group-nav: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-tab-group-nav{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-tab-group-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-nav: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-tab-group-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group-nav:disabled,.tab[aria-disabled="true"].sc-ds-tab-group-nav{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=a(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return e(this.tabs)}selectTab(o,r){this.value=o;this.dsChange.emit(o);if(r?.focus!==false){this.focusTab(o)}}focusTab(o){const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}onValueChange(o,r){if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const a=r.getAttribute("data-tab-id");if(a===o)return;const n=this.el.querySelector(`[data-tab-id="${o}"]`);if(n){n.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(o,r){const a=this.selectableTabs;const n=a.length;for(let t=0;t<n;t++){const s=(o+r*(t+1)+n*(t+1))%n;if(!a[s]?.disabled)return s}return o}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;const a=r.findIndex((o=>o.id===this.value));const n=this.orientation==="vertical";let t=null;if(!n){if(o.key==="ArrowRight"){t=this.findEnabled(a,1)}else if(o.key==="ArrowLeft"){t=this.findEnabled(a,-1)}}else{if(o.key==="ArrowDown"){t=this.findEnabled(a,1)}else if(o.key==="ArrowUp"){t=this.findEnabled(a,-1)}}if(o.key==="Home"){const o=r.findIndex((o=>!o.disabled));t=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.disabled));t=o===-1?null:r.length-1-o}if(t!==null){o.preventDefault();const a=r[t];this.selectTab(a.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}render(){const o=this.getBgClass();const r=this.orientation==="vertical";const a=this.background==="navigation";return n(t,{key:"c68d7a69a3c05c7e85e6ab4cf2be6d54351c55c1",class:"tab-group-nav-host"},n("div",{key:"4bf5c4ebc83ca93c0d7da6783f446de04a74854d",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r,"tab-list--on-navigation":a},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((a,t)=>{if(i(a)){return n("div",{key:`divider-${t}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},n("div",{class:"tab-divider__line"}))}const s=a.id===this.value;return n("button",{key:a.id,type:"button",role:"tab","data-tab-id":a.id,class:{tab:true,"tab--selected":s,"ds-focus-ring-inset":true,[o]:!!o},"aria-selected":s,"aria-disabled":a.disabled||undefined,"aria-controls":a.panelId??undefined,disabled:a.disabled,tabIndex:s?0:-1,onClick:()=>!a.disabled&&this.selectTab(a.id)},n("span",{class:{tab__label:true,"tab__label--dot":!!a.dot,[s?"text-body-medium-emphasis":"text-body-medium"]:true}},a.label,a.dot&&n("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group-nav","ds-badge"];o.forEach((o=>{switch(o){case"ds-tab-group-nav":if(!customElements.get(s(o))){customElements.define(s(o),l)}break;case"ds-badge":if(!customElements.get(s(o))){d()}break}}))}u();export{l as T,u as d};
+//# sourceMappingURL=p-CZpCmCiq.js.map

package/dist/components/p-CZpCmCiq.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabGroupNavCss","TabGroupNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectableTabs","getSelectableTabs","selectTab","id","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","nextTab","blur","findEnabled","from","step","len","length","n","i","disabled","handleKeyDown","e","currentIdx","findIndex","t","isVertical","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","isNavigation","h","Host","class","role","ariaLabel","ariaLabelledby","map","tab","index","isTabDivider","isSelected","type","panelId","tabIndex","onClick","tab__label","dot","label","variant"],"sources":["src/wc/components/TabGroupNav/TabGroupNav.css?tag=ds-tab-group-nav&encapsulation=scoped","src/wc/components/TabGroupNav/TabGroupNav.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n\n:host {\n  display: block;\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  position: relative;\n  /* Only transition color — hover bg is instant (see ::after below) */\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--dimension-size-400);\n  min-width: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.tab:hover::after  { background: var(--_hover-bg);   transition: none; }\n.tab:active::after { background: var(--_pressed-bg);  transition: none; }\n\n.tab--selected { color: var(--color-foreground-primary); }\n\n.tab:disabled,\n.tab[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_dot-ring: var(--color-background-medium-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);\n}\n\n.on-bold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_dot-ring: var(--color-background-bold-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_dot-ring: var(--color-background-strong-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_dot-ring: var(--color-always-dark-background);\n  --ds-focus-ring-color: var(--color-always-dark-interaction-focus);\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.on-navigation {\n  color: var(--color-navigation-foreground-secondary);\n  --_hover-bg: var(--color-navigation-interaction-hover);\n  --_pressed-bg: var(--color-navigation-interaction-pressed);\n  --_dot: var(--color-navigation-foreground-brand);\n  --_dot-ring: var(--color-navigation-background);\n  --ds-focus-ring-color: var(--color-navigation-interaction-focus);\n}\n\n.on-navigation.tab--selected { color: var(--color-navigation-foreground-primary); }\n\n.tab-list--on-navigation .tab-divider__line {\n  background-color: var(--color-navigation-border-tertiary);\n}\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav */\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-space-100);\n  height: var(--dimension-size-400);\n  padding-block: var(--dimension-space-075);\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  align-self: stretch;\n  background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n  width: auto;\n  height: var(--dimension-space-100);\n  align-self: stretch;\n  padding-block: 0;\n  padding-inline: var(--dimension-space-075);\n}\n\n.tab-divider--vertical .tab-divider__line {\n  width: auto;\n  height: var(--dimension-stroke-width-012);\n  align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\nexport type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';\n\n@Component({\n  tag: 'ds-tab-group-nav',\n  styleUrl: 'TabGroupNav.css',\n  scoped: true,\n})\nexport class TabGroupNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabItem[] = [];\n  @Prop() background: TabGroupNavBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  /**\n   * Find the next non-disabled tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.disabled) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const currentIdx = tabs.findIndex(t => t.id === this.value);\n    const isVertical = this.orientation === 'vertical';\n\n    let nextIdx: number | null = null;\n\n    if (!isVertical) {\n      if (e.key === 'ArrowRight') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowLeft') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    } else {\n      if (e.key === 'ArrowDown') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowUp') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.disabled);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background || this.background === 'faint') return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    if (this.background === 'navigation') return 'on-navigation';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const isVertical = this.orientation === 'vertical';\n    const isNavigation = this.background === 'navigation';\n\n    return (\n      <Host class=\"tab-group-nav-host\">\n        <div\n          role=\"tablist\"\n          class={{\n            'tab-list': true,\n            'tab-list--vertical': isVertical,\n            'tab-list--on-navigation': isNavigation,\n          }}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-orientation={isVertical ? 'vertical' : undefined}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class={{\n                    'tab-divider': true,\n                    'tab-divider--vertical': isVertical,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  'ds-focus-ring-inset': true,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.disabled || undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.disabled}\n                tabIndex={isSelected ? 0 : -1}\n                onClick={() => !tab.disabled && this.selectTab(tab.id)}\n              >\n                <span class={{\n                  tab__label: true,\n                  'tab__label--dot': !!tab.dot,\n                  [isSelected ? 'text-body-medium-emphasis' : 'text-body-medium']: true,\n                }}>\n                  {tab.label}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      background=\"var(--_dot-ring)\"\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}