@ds-mo/ui 2.14.0 → 2.15.0

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","isInactive","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","disabled","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@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.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.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: none;\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  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  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\n  /* Hover/press: `.ds-interaction-fill` — fills cover full 24px box (no layout border). */\n}\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity) — applied via class in TSX. */\n\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n.tab__label {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n}\n\n.tab__label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.on-medium {\n  --_dot-ring: var(--color-background-medium-neutral);\n}\n\n.on-bold {\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  --_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  --_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.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-inactive 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]?.isInactive) 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.isInactive);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\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                  'ds-interaction-fill': !tab.isInactive,\n                  'ds-interaction-fill--on-medium': bgClass === 'on-medium',\n                  'ds-interaction-fill--on-bold': bgClass === 'on-bold',\n                  'ds-interaction-fill--on-strong': bgClass === 'on-strong',\n                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.isInactive || undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.isInactive}\n                tabIndex={isSelected ? 0 : -1}\n                onClick={() => !tab.isInactive && 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","isInactive","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","disabled","tabIndex","onClick","tab__label","dot","as","variant","emphasis","color","label"],"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@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.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.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: none;\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  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  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\n  /* Hover/press: `.ds-interaction-fill` — fills cover full 24px box (no layout border). */\n}\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity) — applied via class in TSX. */\n\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n.tab__label {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n  line-height: var(--typography-lineheight-sm);\n}\n\n.tab__label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.on-medium {\n  --_dot-ring: var(--color-background-medium-neutral);\n}\n\n.on-bold {\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  --_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  --_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.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-inactive 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]?.isInactive) 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.isInactive);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\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                  'ds-interaction-fill': !tab.isInactive,\n                  'ds-interaction-fill--on-medium': bgClass === 'on-medium',\n                  'ds-interaction-fill--on-bold': bgClass === 'on-bold',\n                  'ds-interaction-fill--on-strong': bgClass === 'on-strong',\n                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.isInactive || undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.isInactive}\n                tabIndex={isSelected ? 0 : -1}\n                onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n              >\n                <span class={{\n                  tab__label: true,\n                  'tab__label--dot': !!tab.dot,\n                }}>\n                  <ds-text as=\"span\" variant=\"text-body-small\" emphasis={isSelected} color=\"inherit\">\n                    {tab.label}\n                  </ds-text>\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-table.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as s,h as r,a as o,t as a}from"./index.js";const i=()=>`.sc-ds-table-h{display:block;width:100%}.table-wrapper.sc-ds-table{display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--dimension-radius-075)}.table-scroll.sc-ds-table{overflow-x:auto;width:100%}.table.sc-ds-table{display:grid;width:100%;min-width:max-content}.header-row.sc-ds-table{display:contents}.header-cell.sc-ds-table{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075) var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:2}.header-cell--sortable.sc-ds-table{cursor:pointer}.header-cell--sortable.sc-ds-table:hover{background-color:var(--color-background-translucent)}.header-cell--sortable.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.sort-indicator.sc-ds-table{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-secondary)}.row.sc-ds-table{display:contents}.row--clickable.sc-ds-table{cursor:pointer}.row.sc-ds-table:hover .cell.sc-ds-table{background-color:var(--color-interaction-hover)}.row--selected.sc-ds-table .cell.sc-ds-table{background-color:var(--color-background-faint-brand)}.row--clickable.sc-ds-table:focus-visible .cell.sc-ds-table{background-color:var(--color-interaction-hover);box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus)}.cell.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-075) var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);min-height:var(--dimension-size-500);background-color:var(--color-background-primary);transition:background-color var(--effect-motion-short-2)}.align-right.sc-ds-table{justify-content:flex-end;text-align:right}.align-center.sc-ds-table{justify-content:center;text-align:center}.cell-value.sc-ds-table{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.skeleton.sc-ds-table{height:var(--typography-fontsize-md);width:60%;background-color:var(--color-background-translucent);border-radius:var(--dimension-radius-050);animation:shimmer var(--effect-animation-duration-long-2) var(--effect-animation-easing-ease-in-out) infinite}@keyframes shimmer{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.table-pagination.sc-ds-table{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary);background-color:var(--color-background-primary)}.page-button.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-050) var(--dimension-space-100);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;transition:background-color var(--effect-motion-short-2)}.page-button.sc-ds-table:hover:not(:disabled){background-color:var(--color-interaction-hover)}.page-button.sc-ds-table:disabled{opacity:0.4;cursor:not-allowed}.page-button.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}`;function n(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function c(e,t,s){const r=s==="asc"?1:-1;if(e==null&&t==null)return 0;if(e==null)return r;if(t==null)return-r;if(typeof e==="number"&&typeof t==="number")return(e-t)*r;return String(e).localeCompare(String(t))*r}const d=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSort=s(this,"dsSort");this.dsRowClick=s(this,"dsRowClick");this.dsPageChange=s(this,"dsPageChange");this.columns=[];this.data=[];this.loading=false;this.emptyMessage="No results found.";this.selectedRows="";this.pageSize=20}get activeSort(){return this.sortState??this.internalSort}get visibleCols(){return this.columns.filter((e=>!e.hide))}get gridTemplate(){return this.visibleCols.map((e=>{if(e.width)return typeof e.width==="number"?`${e.width}px`:e.width;return"minmax(120px, 1fr)"})).join(" ")}get sortedData(){const e=this.activeSort;if(!e)return this.data;const t=this.columns.find((t=>t.id===e.columnId));if(!t)return this.data;return[...this.data].sort(((s,r)=>c(n(t,s),n(t,r),e.direction)))}get pagedData(){if(this.pageIndex===undefined)return this.sortedData;const e=this.pageIndex*this.pageSize;return this.sortedData.slice(e,e+this.pageSize)}get totalPages(){if(this.pageIndex===undefined)return 1;return Math.ceil(this.sortedData.length/this.pageSize)}get selectedSet(){if(!this.selectedRows)return new Set;return new Set(this.selectedRows.split(",").map(Number).filter((e=>!isNaN(e))))}handleSort(e){this.dsSort.emit({columnId:e});if(!this.sortState){const t=this.internalSort;this.internalSort=t?.columnId===e?{columnId:e,direction:t.direction==="asc"?"desc":"asc"}:{columnId:e,direction:"asc"}}}render(){const{visibleCols:e,pagedData:t,totalPages:s,loading:a}=this;const i=!a&&t.length===0;const c=this.selectedSet;const d=this.activeSort;const l=this.pageIndex!==undefined&&s>1;return r(o,{key:"f64431b9e29f4108928018ee2d0d3daeecb5258b"},r("div",{key:"1ce204e169cafeb1c1e08c9c7bef5f7b3fae7b52",class:"table-wrapper","aria-busy":a||undefined},r("div",{key:"5ec95d0f705e477bb20790d4685c74a65dd8e9b0",class:"table-scroll"},r("div",{key:"05e42dbbbef7ac30c041d0243e344863d905c0b9",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},r("div",{key:"1b73a029da9c53132e488fd7de7ccbedc1fea9e4",class:"header-row",role:"row"},e.map((e=>{const t=d?.columnId===e.id;const s=e.sortable?t?d.direction==="asc"?"ascending":"descending":"none":undefined;return r("div",{key:e.id,class:{"header-cell":true,"header-cell--sortable":!!e.sortable,"align-right":e.align==="right","align-center":e.align==="center"},role:"columnheader","aria-sort":s,tabIndex:e.sortable?0:undefined,onClick:()=>e.sortable&&this.handleSort(e.id),onKeyDown:t=>{if(e.sortable&&(t.key==="Enter"||t.key===" ")){t.preventDefault();this.handleSort(e.id)}},style:e.minWidth?{minWidth:typeof e.minWidth==="number"?`${e.minWidth}px`:e.minWidth}:undefined},r("span",{class:"text-body-small-emphasis",style:{color:"var(--color-foreground-secondary)"}},e.header),t&&r("span",{class:"sort-indicator","aria-hidden":"true"},d.direction==="asc"?"↑":"↓"))}))),a&&Array.from({length:5}).map(((t,s)=>r("div",{key:`sk-${s}`,class:"row",role:s===0?"status":"row","aria-label":s===0?"Loading":undefined},e.map((e=>r("div",{key:e.id,class:"cell",role:"cell"},r("div",{class:"skeleton"}))))))),i&&r("div",{key:"00bae4062ca2cc58e9b555b84de46dc02d1dcb3d",class:"empty-row",style:{gridColumn:"1 / -1"}},r("p",{key:"b6ba918db3e189479e5f7ff162bdeeb3346a45b0",class:"text-body-medium",style:{margin:"0",color:"var(--color-foreground-secondary)"}},this.emptyMessage)),!a&&t.map(((t,s)=>{const o=c.has(s);return r("div",{key:s,class:{row:true,"row--selected":o,"row--clickable":true},role:"row",tabIndex:0,"aria-selected":this.selectedRows?o:undefined,onClick:()=>this.dsRowClick.emit({row:t,rowIndex:s}),onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.dsRowClick.emit({row:t,rowIndex:s})}}},e.map((e=>r("div",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},role:"cell"},r("span",{class:"text-body-medium cell-value"},String(n(e,t)??""))))))})))),l&&r("div",{key:"03f02cf28b0ffcbbbd5619f1d3d41f8e07d5af7a",class:"table-pagination"},r("button",{key:"5f1ff6345ea38e88fff16450467f5b93b82b2090",type:"button",class:"page-button",disabled:this.pageIndex===0,onClick:()=>{this.pageIndex=this.pageIndex-1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},r("span",{key:"e4d2851b223407e53126ac2d32e5d146b09a8eb6",class:"text-body-small"},"Previous")),r("span",{key:"202da37099a60b51da9adbf1af792f2d74e14be7",class:"text-body-small",style:{color:"var(--color-foreground-secondary)"}},"Page ",this.pageIndex+1," of ",s),r("button",{key:"50998500b2e6c573257e8e695991dbca41a0c99c",type:"button",class:"page-button",disabled:this.pageIndex>=s-1,onClick:()=>{this.pageIndex=this.pageIndex+1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},r("span",{key:"e43594b07ded71f7c152796e61b58cd5f3f7f21f",class:"text-body-small"},"Next")))))}static get style(){return i()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-table"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(a(e))){customElements.define(a(e),d)}break}}))}l();const b=d;const u=l;export{b as DsTable,u as defineCustomElement};
+import{p as e,H as t,c as s,h as a,a as r,t as i}from"./index.js";import{d as o}from"./p-BDQgqw5J.js";const n=()=>`.sc-ds-table-h{display:block;width:100%}.table-wrapper.sc-ds-table{display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--dimension-radius-075)}.table-scroll.sc-ds-table{overflow-x:auto;width:100%}.table.sc-ds-table{display:grid;width:100%;min-width:max-content}.header-row.sc-ds-table{display:contents}.header-cell.sc-ds-table{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075) var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:2}.header-cell--sortable.sc-ds-table{cursor:pointer}.header-cell--sortable.sc-ds-table:hover{background-color:var(--color-background-translucent)}.header-cell--sortable.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.sort-indicator.sc-ds-table{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-secondary)}.row.sc-ds-table{display:contents}.row--clickable.sc-ds-table{cursor:pointer}.row.sc-ds-table:hover .cell.sc-ds-table{background-color:var(--color-interaction-hover)}.row--selected.sc-ds-table .cell.sc-ds-table{background-color:var(--color-background-faint-brand)}.row--clickable.sc-ds-table:focus-visible .cell.sc-ds-table{background-color:var(--color-interaction-hover);box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus)}.cell.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-075) var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);min-height:var(--dimension-size-500);background-color:var(--color-background-primary);transition:background-color var(--effect-motion-short-2)}.align-right.sc-ds-table{justify-content:flex-end;text-align:right}.align-center.sc-ds-table{justify-content:center;text-align:center}.cell-value.sc-ds-table{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.skeleton.sc-ds-table{height:var(--typography-fontsize-md);width:60%;background-color:var(--color-background-translucent);border-radius:var(--dimension-radius-050);animation:shimmer var(--effect-animation-duration-long-2) var(--effect-animation-easing-ease-in-out) infinite}@keyframes shimmer{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.table-pagination.sc-ds-table{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary);background-color:var(--color-background-primary)}.page-button.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-050) var(--dimension-space-100);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;transition:background-color var(--effect-motion-short-2)}.page-button.sc-ds-table:hover:not(:disabled){background-color:var(--color-interaction-hover)}.page-button.sc-ds-table:disabled{opacity:0.4;cursor:not-allowed}.page-button.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}`;function d(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function c(e,t,s){const a=s==="asc"?1:-1;if(e==null&&t==null)return 0;if(e==null)return a;if(t==null)return-a;if(typeof e==="number"&&typeof t==="number")return(e-t)*a;return String(e).localeCompare(String(t))*a}const l=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSort=s(this,"dsSort");this.dsRowClick=s(this,"dsRowClick");this.dsPageChange=s(this,"dsPageChange");this.columns=[];this.data=[];this.loading=false;this.emptyMessage="No results found.";this.selectedRows="";this.pageSize=20}get activeSort(){return this.sortState??this.internalSort}get visibleCols(){return this.columns.filter((e=>!e.hide))}get gridTemplate(){return this.visibleCols.map((e=>{if(e.width)return typeof e.width==="number"?`${e.width}px`:e.width;return"minmax(120px, 1fr)"})).join(" ")}get sortedData(){const e=this.activeSort;if(!e)return this.data;const t=this.columns.find((t=>t.id===e.columnId));if(!t)return this.data;return[...this.data].sort(((s,a)=>c(d(t,s),d(t,a),e.direction)))}get pagedData(){if(this.pageIndex===undefined)return this.sortedData;const e=this.pageIndex*this.pageSize;return this.sortedData.slice(e,e+this.pageSize)}get totalPages(){if(this.pageIndex===undefined)return 1;return Math.ceil(this.sortedData.length/this.pageSize)}get selectedSet(){if(!this.selectedRows)return new Set;return new Set(this.selectedRows.split(",").map(Number).filter((e=>!isNaN(e))))}handleSort(e){this.dsSort.emit({columnId:e});if(!this.sortState){const t=this.internalSort;this.internalSort=t?.columnId===e?{columnId:e,direction:t.direction==="asc"?"desc":"asc"}:{columnId:e,direction:"asc"}}}render(){const{visibleCols:e,pagedData:t,totalPages:s,loading:i}=this;const o=!i&&t.length===0;const n=this.selectedSet;const c=this.activeSort;const l=this.pageIndex!==undefined&&s>1;return a(r,{key:"eb5c39852f9cefb1cd77b71e7a7facb077274f50"},a("div",{key:"0104a50b0a5785e118c98ff4fd0ff36fa9f061b1",class:"table-wrapper","aria-busy":i||undefined},a("div",{key:"5a41c764ce0e3ea067c8c113a474f8d4278d609d",class:"table-scroll"},a("div",{key:"ebb934758bcd705fab8fda95d7c9704f5c63976a",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},a("div",{key:"69855c54aca218c061067ad561413a636a0c7360",class:"header-row",role:"row"},e.map((e=>{const t=c?.columnId===e.id;const s=e.sortable?t?c.direction==="asc"?"ascending":"descending":"none":undefined;return a("div",{key:e.id,class:{"header-cell":true,"header-cell--sortable":!!e.sortable,"align-right":e.align==="right","align-center":e.align==="center"},role:"columnheader","aria-sort":s,tabIndex:e.sortable?0:undefined,onClick:()=>e.sortable&&this.handleSort(e.id),onKeyDown:t=>{if(e.sortable&&(t.key==="Enter"||t.key===" ")){t.preventDefault();this.handleSort(e.id)}},style:e.minWidth?{minWidth:typeof e.minWidth==="number"?`${e.minWidth}px`:e.minWidth}:undefined},a("ds-text",{as:"span",variant:"text-body-small",emphasis:true,color:"secondary"},e.header),t&&a("span",{class:"sort-indicator","aria-hidden":"true"},c.direction==="asc"?"↑":"↓"))}))),i&&Array.from({length:5}).map(((t,s)=>a("div",{key:`sk-${s}`,class:"row",role:s===0?"status":"row","aria-label":s===0?"Loading":undefined},e.map((e=>a("div",{key:e.id,class:"cell",role:"cell"},a("div",{class:"skeleton"}))))))),o&&a("div",{key:"2b09a71a4f21c9ae5a8586cdf4f483dbdc9193f5",class:"empty-row",style:{gridColumn:"1 / -1"}},a("ds-text",{key:"a1a504a8ad694c509ff35cde5ad080ae021da11d",as:"p",variant:"text-body-medium",color:"secondary"},this.emptyMessage)),!i&&t.map(((t,s)=>{const r=n.has(s);return a("div",{key:s,class:{row:true,"row--selected":r,"row--clickable":true},role:"row",tabIndex:0,"aria-selected":this.selectedRows?r:undefined,onClick:()=>this.dsRowClick.emit({row:t,rowIndex:s}),onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.dsRowClick.emit({row:t,rowIndex:s})}}},e.map((e=>a("div",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},role:"cell"},a("span",{class:"cell-value"},a("ds-text",{as:"span",variant:"text-body-medium"},String(d(e,t)??"")))))))})))),l&&a("div",{key:"9e427703f7964bf8b4e79f2c53f538e90627c9c8",class:"table-pagination"},a("button",{key:"a12b5fb7aa8fee8e62aed55ff3c1d9f8ae8d6189",type:"button",class:"page-button",disabled:this.pageIndex===0,onClick:()=>{this.pageIndex=this.pageIndex-1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},a("ds-text",{key:"d7e1b3dfd708471714d7e2f7f2455474679805d8",as:"span",variant:"text-body-small"},"Previous")),a("ds-text",{key:"9f06fbd840324d7ee661bcab88027f8a25170fc9",as:"span",variant:"text-body-small",color:"secondary"},"Page ",this.pageIndex+1," of ",s),a("button",{key:"18e5be73903854bff0cf420f519d4b7dea7daf10",type:"button",class:"page-button",disabled:this.pageIndex>=s-1,onClick:()=>{this.pageIndex=this.pageIndex+1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},a("ds-text",{key:"46de642abe6cc31fd6192a6c12b5a510bedf13b2",as:"span",variant:"text-body-small"},"Next")))))}static get style(){return n()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-table","ds-text"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(i(e))){customElements.define(i(e),l)}break;case"ds-text":if(!customElements.get(i(e))){o()}break}}))}b();const u=l;const f=b;export{u as DsTable,f as defineCustomElement};
 //# sourceMappingURL=ds-table.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["tableCss","getCellValue","col","row","accessorKey","accessor","undefined","compareValues","a","b","dir","m","String","localeCompare","Table","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","columns","data","loading","emptyMessage","selectedRows","pageSize","activeSort","sortState","internalSort","visibleCols","filter","c","hide","gridTemplate","map","width","join","sortedData","sort","find","id","columnId","direction","pagedData","pageIndex","start","slice","totalPages","Math","ceil","length","selectedSet","Set","split","Number","n","isNaN","handleSort","dsSort","emit","cur","render","isEmpty","hasPagination","h","Host","key","class","style","gridTemplateColumns","role","isSorted","ariaSort","sortable","align","tabIndex","onClick","onKeyDown","e","preventDefault","minWidth","color","header","Array","from","_","i","gridColumn","margin","rowIndex","isSelected","has","dsRowClick","cell","type","disabled","dsPageChange"],"sources":["src/wc/components/Table/Table.css?tag=ds-table&encapsulation=scoped","src/wc/components/Table/Table.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.table-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-075);\n}\n\n.table-scroll {\n  overflow-x: auto;\n  width: 100%;\n}\n\n.table {\n  display: grid;\n  width: 100%;\n  min-width: max-content;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header-row {\n  display: contents;\n}\n\n.header-cell {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  -webkit-user-select: none;\n  user-select: none;\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n.header-cell--sortable {\n  cursor: pointer;\n}\n\n.header-cell--sortable:hover {\n  background-color: var(--color-background-translucent);\n}\n\n.header-cell--sortable:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n.sort-indicator {\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  color: var(--color-foreground-secondary);\n}\n\n/* ─── Rows ──────────────────────────────────────────────────────────────────── */\n\n.row {\n  display: contents;\n}\n\n.row--clickable {\n  cursor: pointer;\n}\n\n.row:hover .cell {\n  background-color: var(--color-interaction-hover);\n}\n\n.row--selected .cell {\n  background-color: var(--color-background-faint-brand);\n}\n\n.row--clickable:focus-visible .cell {\n  background-color: var(--color-interaction-hover);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);\n}\n\n/* ─── Cells ─────────────────────────────────────────────────────────────────── */\n\n.cell {\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  min-height: var(--dimension-size-500);\n  background-color: var(--color-background-primary);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n.align-center {\n  justify-content: center;\n  text-align: center;\n}\n\n.cell-value {\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.empty-row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-400);\n  background-color: var(--color-background-primary);\n}\n\n/* ─── Loading skeleton ──────────────────────────────────────────────────────── */\n\n.skeleton {\n  height: var(--typography-fontsize-md);\n  width: 60%;\n  background-color: var(--color-background-translucent);\n  border-radius: var(--dimension-radius-050);\n  animation: shimmer var(--effect-animation-duration-long-2) var(--effect-animation-easing-ease-in-out) infinite;\n}\n\n@keyframes shimmer {\n  0%   { opacity: 0.5; }\n  50%  { opacity: 1; }\n  100% { opacity: 0.5; }\n}\n\n/* ─── Pagination ────────────────────────────────────────────────────────────── */\n\n.table-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-100);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  background-color: var(--color-background-primary);\n}\n\n.page-button {\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.page-button:hover:not(:disabled) {\n  background-color: var(--color-interaction-hover);\n}\n\n.page-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.page-button:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface SortState {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport interface TableColumn<T = unknown> {\n  id: string;\n  header: string;\n  accessorKey?: string;\n  accessor?: (row: T) => unknown;\n  sortable?: boolean;\n  align?: 'left' | 'right' | 'center';\n  width?: string | number;\n  minWidth?: string | number;\n  hide?: boolean;\n}\n\nfunction getCellValue<T>(col: TableColumn<T>, row: T): unknown {\n  if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];\n  if (col.accessor) return col.accessor(row);\n  return undefined;\n}\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDirection): number {\n  const m = dir === 'asc' ? 1 : -1;\n  if (a == null && b == null) return 0;\n  if (a == null) return m;\n  if (b == null) return -m;\n  if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;\n  return String(a).localeCompare(String(b)) * m;\n}\n\n@Component({\n  tag: 'ds-table',\n  styleUrl: 'Table.css',\n  scoped: true,\n})\nexport class Table {\n  @Prop() columns: TableColumn[] = [];\n  @Prop() data: unknown[] = [];\n  @Prop() sortState: SortState | undefined;\n  @Prop() loading: boolean = false;\n  @Prop() emptyMessage: string = 'No results found.';\n  /** Comma-separated zero-based row indices that are selected. */\n  @Prop() selectedRows: string = '';\n  /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */\n  @Prop({ mutable: true }) pageIndex: number | undefined;\n  @Prop() pageSize: number = 20;\n\n  @State() private internalSort: SortState | undefined;\n\n  @Event() dsSort!: EventEmitter<{ columnId: string }>;\n  @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;\n  @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;\n\n  private get activeSort(): SortState | undefined {\n    return this.sortState ?? this.internalSort;\n  }\n\n  private get visibleCols(): TableColumn[] {\n    return this.columns.filter(c => !c.hide);\n  }\n\n  private get gridTemplate(): string {\n    return this.visibleCols.map(col => {\n      if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;\n      return 'minmax(120px, 1fr)';\n    }).join(' ');\n  }\n\n  private get sortedData(): unknown[] {\n    const sort = this.activeSort;\n    if (!sort) return this.data;\n    const col = this.columns.find(c => c.id === sort.columnId);\n    if (!col) return this.data;\n    return [...this.data].sort((a, b) =>\n      compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction)\n    );\n  }\n\n  private get pagedData(): unknown[] {\n    if (this.pageIndex === undefined) return this.sortedData;\n    const start = this.pageIndex * this.pageSize;\n    return this.sortedData.slice(start, start + this.pageSize);\n  }\n\n  private get totalPages(): number {\n    if (this.pageIndex === undefined) return 1;\n    return Math.ceil(this.sortedData.length / this.pageSize);\n  }\n\n  private get selectedSet(): Set<number> {\n    if (!this.selectedRows) return new Set();\n    return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));\n  }\n\n  private handleSort(columnId: string) {\n    this.dsSort.emit({ columnId });\n    // Toggle internal sort if consumer hasn't provided sortState\n    if (!this.sortState) {\n      const cur = this.internalSort;\n      this.internalSort = cur?.columnId === columnId\n        ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }\n        : { columnId, direction: 'asc' };\n    }\n  }\n\n  render() {\n    const { visibleCols, pagedData, totalPages, loading } = this;\n    const isEmpty = !loading && pagedData.length === 0;\n    const selectedSet = this.selectedSet;\n    const sort = this.activeSort;\n    const hasPagination = this.pageIndex !== undefined && totalPages > 1;\n\n    return (\n      <Host>\n        <div class=\"table-wrapper\" aria-busy={loading || undefined}>\n          <div class=\"table-scroll\">\n            <div class=\"table\" style={{ gridTemplateColumns: this.gridTemplate }} role=\"table\">\n\n              {/* Header row */}\n              <div class=\"header-row\" role=\"row\">\n                {visibleCols.map(col => {\n                  const isSorted = sort?.columnId === col.id;\n                  const ariaSort = col.sortable\n                    ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')\n                    : undefined;\n                  return (\n                    <div\n                      key={col.id}\n                      class={{\n                        'header-cell': true,\n                        'header-cell--sortable': !!col.sortable,\n                        'align-right': col.align === 'right',\n                        'align-center': col.align === 'center',\n                      }}\n                      role=\"columnheader\"\n                      aria-sort={ariaSort}\n                      tabIndex={col.sortable ? 0 : undefined}\n                      onClick={() => col.sortable && this.handleSort(col.id)}\n                      onKeyDown={(e: KeyboardEvent) => {\n                        if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {\n                          e.preventDefault();\n                          this.handleSort(col.id);\n                        }\n                      }}\n                      style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}\n                    >\n                      <span class=\"text-body-small-emphasis\" style={{ color: 'var(--color-foreground-secondary)' }}>\n                        {col.header}\n                      </span>\n                      {isSorted && (\n                        <span class=\"sort-indicator\" aria-hidden=\"true\">\n                          {sort.direction === 'asc' ? '↑' : '↓'}\n                        </span>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n\n              {/* Loading skeleton */}\n              {loading && Array.from({ length: 5 }).map((_, i) => (\n                <div\n                  key={`sk-${i}`}\n                  class=\"row\"\n                  role={i === 0 ? 'status' : 'row'}\n                  aria-label={i === 0 ? 'Loading' : undefined}\n                >\n                  {visibleCols.map(col => (\n                    <div key={col.id} class=\"cell\" role=\"cell\">\n                      <div class=\"skeleton\" />\n                    </div>\n                  ))}\n                </div>\n              ))}\n\n              {/* Empty state */}\n              {isEmpty && (\n                <div class=\"empty-row\" style={{ gridColumn: '1 / -1' }}>\n                  <p class=\"text-body-medium\" style={{ margin: '0', color: 'var(--color-foreground-secondary)' }}>\n                    {this.emptyMessage}\n                  </p>\n                </div>\n              )}\n\n              {/* Data rows */}\n              {!loading && pagedData.map((row, rowIndex) => {\n                const isSelected = selectedSet.has(rowIndex);\n                return (\n                  <div\n                    key={rowIndex}\n                    class={{\n                      'row': true,\n                      'row--selected': isSelected,\n                      'row--clickable': true,\n                    }}\n                    role=\"row\"\n                    tabIndex={0}\n                    aria-selected={this.selectedRows ? isSelected : undefined}\n                    onClick={() => this.dsRowClick.emit({ row, rowIndex })}\n                    onKeyDown={(e: KeyboardEvent) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault();\n                        this.dsRowClick.emit({ row, rowIndex });\n                      }\n                    }}\n                  >\n                    {visibleCols.map(col => (\n                      <div\n                        key={col.id}\n                        class={{\n                          'cell': true,\n                          'align-right': col.align === 'right',\n                          'align-center': col.align === 'center',\n                        }}\n                        role=\"cell\"\n                      >\n                        <span class=\"text-body-medium cell-value\">\n                          {String(getCellValue(col, row) ?? '')}\n                        </span>\n                      </div>\n                    ))}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* Built-in pagination */}\n          {hasPagination && (\n            <div class=\"table-pagination\">\n              <button\n                type=\"button\"\n                class=\"page-button\"\n                disabled={this.pageIndex === 0}\n                onClick={() => {\n                  this.pageIndex = this.pageIndex! - 1;\n                  this.dsPageChange.emit({ pageIndex: this.pageIndex });\n                }}\n              >\n                <span class=\"text-body-small\">Previous</span>\n              </button>\n              <span class=\"text-body-small\" style={{ color: 'var(--color-foreground-secondary)' }}>\n                Page {this.pageIndex! + 1} of {totalPages}\n              </span>\n              <button\n                type=\"button\"\n                class=\"page-button\"\n                disabled={this.pageIndex! >= totalPages - 1}\n                onClick={() => {\n                  this.pageIndex = this.pageIndex! + 1;\n                  this.dsPageChange.emit({ pageIndex: this.pageIndex });\n                }}\n              >\n                <span class=\"text-body-small\">Next</span>\n              </button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tableCss","getCellValue","col","row","accessorKey","accessor","undefined","compareValues","a","b","dir","m","String","localeCompare","Table","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","columns","data","loading","emptyMessage","selectedRows","pageSize","activeSort","sortState","internalSort","visibleCols","filter","c","hide","gridTemplate","map","width","join","sortedData","sort","find","id","columnId","direction","pagedData","pageIndex","start","slice","totalPages","Math","ceil","length","selectedSet","Set","split","Number","n","isNaN","handleSort","dsSort","emit","cur","render","isEmpty","hasPagination","h","Host","key","class","style","gridTemplateColumns","role","isSorted","ariaSort","sortable","align","tabIndex","onClick","onKeyDown","e","preventDefault","minWidth","as","variant","emphasis","color","header","Array","from","_","i","gridColumn","rowIndex","isSelected","has","dsRowClick","cell","type","disabled","dsPageChange"],"sources":["src/wc/components/Table/Table.css?tag=ds-table&encapsulation=scoped","src/wc/components/Table/Table.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.table-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-075);\n}\n\n.table-scroll {\n  overflow-x: auto;\n  width: 100%;\n}\n\n.table {\n  display: grid;\n  width: 100%;\n  min-width: max-content;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header-row {\n  display: contents;\n}\n\n.header-cell {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  -webkit-user-select: none;\n  user-select: none;\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n.header-cell--sortable {\n  cursor: pointer;\n}\n\n.header-cell--sortable:hover {\n  background-color: var(--color-background-translucent);\n}\n\n.header-cell--sortable:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n.sort-indicator {\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  color: var(--color-foreground-secondary);\n}\n\n/* ─── Rows ──────────────────────────────────────────────────────────────────── */\n\n.row {\n  display: contents;\n}\n\n.row--clickable {\n  cursor: pointer;\n}\n\n.row:hover .cell {\n  background-color: var(--color-interaction-hover);\n}\n\n.row--selected .cell {\n  background-color: var(--color-background-faint-brand);\n}\n\n.row--clickable:focus-visible .cell {\n  background-color: var(--color-interaction-hover);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);\n}\n\n/* ─── Cells ─────────────────────────────────────────────────────────────────── */\n\n.cell {\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  min-height: var(--dimension-size-500);\n  background-color: var(--color-background-primary);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n.align-center {\n  justify-content: center;\n  text-align: center;\n}\n\n.cell-value {\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.empty-row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-400);\n  background-color: var(--color-background-primary);\n}\n\n/* ─── Loading skeleton ──────────────────────────────────────────────────────── */\n\n.skeleton {\n  height: var(--typography-fontsize-md);\n  width: 60%;\n  background-color: var(--color-background-translucent);\n  border-radius: var(--dimension-radius-050);\n  animation: shimmer var(--effect-animation-duration-long-2) var(--effect-animation-easing-ease-in-out) infinite;\n}\n\n@keyframes shimmer {\n  0%   { opacity: 0.5; }\n  50%  { opacity: 1; }\n  100% { opacity: 0.5; }\n}\n\n/* ─── Pagination ────────────────────────────────────────────────────────────── */\n\n.table-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-100);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  background-color: var(--color-background-primary);\n}\n\n.page-button {\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.page-button:hover:not(:disabled) {\n  background-color: var(--color-interaction-hover);\n}\n\n.page-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.page-button:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface SortState {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport interface TableColumn<T = unknown> {\n  id: string;\n  header: string;\n  accessorKey?: string;\n  accessor?: (row: T) => unknown;\n  sortable?: boolean;\n  align?: 'left' | 'right' | 'center';\n  width?: string | number;\n  minWidth?: string | number;\n  hide?: boolean;\n}\n\nfunction getCellValue<T>(col: TableColumn<T>, row: T): unknown {\n  if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];\n  if (col.accessor) return col.accessor(row);\n  return undefined;\n}\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDirection): number {\n  const m = dir === 'asc' ? 1 : -1;\n  if (a == null && b == null) return 0;\n  if (a == null) return m;\n  if (b == null) return -m;\n  if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;\n  return String(a).localeCompare(String(b)) * m;\n}\n\n@Component({\n  tag: 'ds-table',\n  styleUrl: 'Table.css',\n  scoped: true,\n})\nexport class Table {\n  @Prop() columns: TableColumn[] = [];\n  @Prop() data: unknown[] = [];\n  @Prop() sortState: SortState | undefined;\n  @Prop() loading: boolean = false;\n  @Prop() emptyMessage: string = 'No results found.';\n  /** Comma-separated zero-based row indices that are selected. */\n  @Prop() selectedRows: string = '';\n  /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */\n  @Prop({ mutable: true }) pageIndex: number | undefined;\n  @Prop() pageSize: number = 20;\n\n  @State() private internalSort: SortState | undefined;\n\n  @Event() dsSort!: EventEmitter<{ columnId: string }>;\n  @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;\n  @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;\n\n  private get activeSort(): SortState | undefined {\n    return this.sortState ?? this.internalSort;\n  }\n\n  private get visibleCols(): TableColumn[] {\n    return this.columns.filter(c => !c.hide);\n  }\n\n  private get gridTemplate(): string {\n    return this.visibleCols.map(col => {\n      if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;\n      return 'minmax(120px, 1fr)';\n    }).join(' ');\n  }\n\n  private get sortedData(): unknown[] {\n    const sort = this.activeSort;\n    if (!sort) return this.data;\n    const col = this.columns.find(c => c.id === sort.columnId);\n    if (!col) return this.data;\n    return [...this.data].sort((a, b) =>\n      compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction)\n    );\n  }\n\n  private get pagedData(): unknown[] {\n    if (this.pageIndex === undefined) return this.sortedData;\n    const start = this.pageIndex * this.pageSize;\n    return this.sortedData.slice(start, start + this.pageSize);\n  }\n\n  private get totalPages(): number {\n    if (this.pageIndex === undefined) return 1;\n    return Math.ceil(this.sortedData.length / this.pageSize);\n  }\n\n  private get selectedSet(): Set<number> {\n    if (!this.selectedRows) return new Set();\n    return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));\n  }\n\n  private handleSort(columnId: string) {\n    this.dsSort.emit({ columnId });\n    // Toggle internal sort if consumer hasn't provided sortState\n    if (!this.sortState) {\n      const cur = this.internalSort;\n      this.internalSort = cur?.columnId === columnId\n        ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }\n        : { columnId, direction: 'asc' };\n    }\n  }\n\n  render() {\n    const { visibleCols, pagedData, totalPages, loading } = this;\n    const isEmpty = !loading && pagedData.length === 0;\n    const selectedSet = this.selectedSet;\n    const sort = this.activeSort;\n    const hasPagination = this.pageIndex !== undefined && totalPages > 1;\n\n    return (\n      <Host>\n        <div class=\"table-wrapper\" aria-busy={loading || undefined}>\n          <div class=\"table-scroll\">\n            <div class=\"table\" style={{ gridTemplateColumns: this.gridTemplate }} role=\"table\">\n\n              {/* Header row */}\n              <div class=\"header-row\" role=\"row\">\n                {visibleCols.map(col => {\n                  const isSorted = sort?.columnId === col.id;\n                  const ariaSort = col.sortable\n                    ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')\n                    : undefined;\n                  return (\n                    <div\n                      key={col.id}\n                      class={{\n                        'header-cell': true,\n                        'header-cell--sortable': !!col.sortable,\n                        'align-right': col.align === 'right',\n                        'align-center': col.align === 'center',\n                      }}\n                      role=\"columnheader\"\n                      aria-sort={ariaSort}\n                      tabIndex={col.sortable ? 0 : undefined}\n                      onClick={() => col.sortable && this.handleSort(col.id)}\n                      onKeyDown={(e: KeyboardEvent) => {\n                        if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {\n                          e.preventDefault();\n                          this.handleSort(col.id);\n                        }\n                      }}\n                      style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}\n                    >\n                      <ds-text as=\"span\" variant=\"text-body-small\" emphasis color=\"secondary\">\n                        {col.header}\n                      </ds-text>\n                      {isSorted && (\n                        <span class=\"sort-indicator\" aria-hidden=\"true\">\n                          {sort.direction === 'asc' ? '↑' : '↓'}\n                        </span>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n\n              {/* Loading skeleton */}\n              {loading && Array.from({ length: 5 }).map((_, i) => (\n                <div\n                  key={`sk-${i}`}\n                  class=\"row\"\n                  role={i === 0 ? 'status' : 'row'}\n                  aria-label={i === 0 ? 'Loading' : undefined}\n                >\n                  {visibleCols.map(col => (\n                    <div key={col.id} class=\"cell\" role=\"cell\">\n                      <div class=\"skeleton\" />\n                    </div>\n                  ))}\n                </div>\n              ))}\n\n              {/* Empty state */}\n              {isEmpty && (\n                <div class=\"empty-row\" style={{ gridColumn: '1 / -1' }}>\n                  <ds-text as=\"p\" variant=\"text-body-medium\" color=\"secondary\">\n                    {this.emptyMessage}\n                  </ds-text>\n                </div>\n              )}\n\n              {/* Data rows */}\n              {!loading && pagedData.map((row, rowIndex) => {\n                const isSelected = selectedSet.has(rowIndex);\n                return (\n                  <div\n                    key={rowIndex}\n                    class={{\n                      'row': true,\n                      'row--selected': isSelected,\n                      'row--clickable': true,\n                    }}\n                    role=\"row\"\n                    tabIndex={0}\n                    aria-selected={this.selectedRows ? isSelected : undefined}\n                    onClick={() => this.dsRowClick.emit({ row, rowIndex })}\n                    onKeyDown={(e: KeyboardEvent) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault();\n                        this.dsRowClick.emit({ row, rowIndex });\n                      }\n                    }}\n                  >\n                    {visibleCols.map(col => (\n                      <div\n                        key={col.id}\n                        class={{\n                          'cell': true,\n                          'align-right': col.align === 'right',\n                          'align-center': col.align === 'center',\n                        }}\n                        role=\"cell\"\n                      >\n                        <span class=\"cell-value\">\n                          <ds-text as=\"span\" variant=\"text-body-medium\">\n                            {String(getCellValue(col, row) ?? '')}\n                          </ds-text>\n                        </span>\n                      </div>\n                    ))}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* Built-in pagination */}\n          {hasPagination && (\n            <div class=\"table-pagination\">\n              <button\n                type=\"button\"\n                class=\"page-button\"\n                disabled={this.pageIndex === 0}\n                onClick={() => {\n                  this.pageIndex = this.pageIndex! - 1;\n                  this.dsPageChange.emit({ pageIndex: this.pageIndex });\n                }}\n              >\n                <ds-text as=\"span\" variant=\"text-body-small\">Previous</ds-text>\n              </button>\n              <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n                Page {this.pageIndex! + 1} of {totalPages}\n              </ds-text>\n              <button\n                type=\"button\"\n                class=\"page-button\"\n                disabled={this.pageIndex! >= totalPages - 1}\n                onClick={() => {\n                  this.pageIndex = this.pageIndex! + 1;\n                  this.dsPageChange.emit({ pageIndex: this.pageIndex });\n                }}\n              >\n                <ds-text as=\"span\" variant=\"text-body-small\">Next</ds-text>\n              </button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-tag.js

@@ -1,2 +1,2 @@
-import{p as o,H as r,h as t,a as n,t as a}from"./index.js";const i=()=>`.ds-control--md.sc-ds-tag-h,.ds-control--md.sc-ds-tag{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tag-h,.ds-control--sm.sc-ds-tag{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tag-h,.ds-control--xs.sc-ds-tag{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-interaction-fill.sc-ds-tag-h,.ds-interaction-fill.sc-ds-tag{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before,.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before{z-index:1}.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-tag-h,.ds-interaction-fill--bordered.sc-ds-tag{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tag-h,.ds-interaction-fill--selected.sc-ds-tag{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-tag-h>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill.sc-ds-tag>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill__content.sc-ds-tag{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-tag-h,.ds-interaction-fill--on-medium.sc-ds-tag{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-tag-h,.ds-interaction-fill--on-bold.sc-ds-tag{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-tag-h,.ds-interaction-fill--on-strong.sc-ds-tag{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-tag-h,.ds-interaction-fill--on-always-dark.sc-ds-tag{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-tag-h,.ds-interaction-fill--on-navigation.sc-ds-tag{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-tag-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-tag: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-tag{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-tag:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tag: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-tag{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{cursor:pointer;outline:none}.tag__label.sc-ds-tag{position:relative;z-index:2;line-height:0;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:0;min-width:0}.tag__icon-slot.sc-ds-tag{display:contents}.tag__icon-slot.sc-ds-tag-s>*,.tag__icon-slot .sc-ds-tag-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-tag{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.tag__remove.sc-ds-tag::before{content:'';position:absolute;inset:var(--dimension-space-n025);border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-tag:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-tag:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:var(--dimension-space-n012)}.tag--size-xs.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:0}.tag__remove-x.sc-ds-tag{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-tag-s>*,.tag__remove .sc-ds-tag-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const s={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c={md:"md",sm:"sm",xs:"xs"};const e=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.intent="neutral";this.contrast="faint";this.size="md";this.rounded=false}render(){const o=s[this.size];const r=c[this.size];const a=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return t(n,{key:"18d2d830c9019765ee8f1b0f669dc2ccd12b0b57",class:{tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded},style:a},t("span",{key:"86dc66897bfd8692dab9cd50061e7083d6fd4f8f",class:"tag__icon-slot","data-icon-size":r},t("slot",{key:"992054cfacacc218036281f0c2668579cd7ac813",name:"icon"})),t("span",{key:"0136f84d38a7c7bf1f86f322245c44a8a12355b8",class:{tag__label:true,[o]:true}},this.label))}static get style(){return i()}},[262,"ds-tag",{label:[1],intent:[1],contrast:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-tag"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(a(o))){customElements.define(a(o),e)}break}}))}d();const l=e;const g=d;export{l as DsTag,g as defineCustomElement};
+import{p as o,H as r,h as t,a as n,t as a}from"./index.js";import{d as i}from"./p-BDQgqw5J.js";import{C as s}from"./p-BvF44IQK.js";const c=()=>`.ds-control--md.sc-ds-tag-h,.ds-control--md.sc-ds-tag{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025);--ds-control-line-height:var(--typography-lineheight-md)}.ds-control--sm.sc-ds-tag-h,.ds-control--sm.sc-ds-tag{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025);--ds-control-line-height:var(--typography-lineheight-sm)}.ds-control--xs.sc-ds-tag-h,.ds-control--xs.sc-ds-tag{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025);--ds-control-line-height:var(--typography-lineheight-xs)}.ds-interaction-fill.sc-ds-tag-h,.ds-interaction-fill.sc-ds-tag{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before,.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before{z-index:1}.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-tag-h,.ds-interaction-fill--bordered.sc-ds-tag{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tag-h,.ds-interaction-fill--selected.sc-ds-tag{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-tag-h>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill.sc-ds-tag>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill__content.sc-ds-tag{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-tag-h,.ds-interaction-fill--on-medium.sc-ds-tag{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-tag-h,.ds-interaction-fill--on-bold.sc-ds-tag{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-tag-h,.ds-interaction-fill--on-strong.sc-ds-tag{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-tag-h,.ds-interaction-fill--on-always-dark.sc-ds-tag{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-tag-h,.ds-interaction-fill--on-navigation.sc-ds-tag{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-tag-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-tag: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-tag{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-tag:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tag: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-tag{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{cursor:pointer;outline:none}.tag__label.sc-ds-tag{position:relative;z-index:2;line-height:0;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:0;min-width:0}.tag__icon-slot.sc-ds-tag{display:contents}.tag__icon-slot.sc-ds-tag-s>*,.tag__icon-slot .sc-ds-tag-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-tag{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.tag__remove.sc-ds-tag::before{content:'';position:absolute;inset:var(--dimension-space-n025);border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-tag:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-tag:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:var(--dimension-space-n012)}.tag--size-xs.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:0}.tag__remove-x.sc-ds-tag{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-tag-s>*,.tag__remove .sc-ds-tag-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const e={md:"md",sm:"sm",xs:"xs"};const d=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.intent="neutral";this.contrast="faint";this.size="md";this.rounded=false}render(){const o=s[this.size];const r=e[this.size];const a=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return t(n,{key:"dd4739cdd59013f409a9024cc29aba7a692e1c93",class:{tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded},style:a},t("span",{key:"fd81509e5b185a785afe488a8415b7855d7635f1",class:"tag__icon-slot","data-icon-size":r},t("slot",{key:"58086b6b15df26ed3c03d3cfb3cf2764d36ae324",name:"icon"})),t("span",{key:"90f5d96576cef409cbdfda0362fcbccdc665db9d",class:"tag__label"},t("ds-text",{key:"8797b05f9bd39d0a3a730ca9aa5c6dd35e7edac5",as:"span",variant:o,color:"inherit"},this.label)))}static get style(){return c()}},[262,"ds-tag",{label:[1],intent:[1],contrast:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"]}]);function l(){if(typeof customElements==="undefined"){return}const o=["ds-tag","ds-text"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(a(o))){customElements.define(a(o),d)}break;case"ds-text":if(!customElements.get(a(o))){i()}break}}))}l();const g=d;const u=l;export{g as DsTag,u as defineCustomElement};
 //# sourceMappingURL=ds-tag.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["tagCss","TEXT_VARIANT","md","sm","xs","ICON_SIZE","Tag","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","intent","contrast","size","rounded","render","textVariant","iconSize","maxWidthStyle","maxWidth","undefined","h","Host","key","class","tag","style","name","tag__label","label"],"sources":["src/wc/components/Tag/Tag.css?tag=ds-tag&encapsulation=scoped","src/wc/components/Tag/Tag.tsx"],"sourcesContent":["/* ==========================================================================\n   ds-tag / ds-chip shared visual recipe\n   ========================================================================== */\n\n@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  color: var(--color-foreground-primary);\n  position: relative;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  gap: var(--ds-control-gap);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n/* Density vars come from .ds-control--md|sm|xs on the host (set in TSX). */\n/* Hover/press overlay comes from .ds-interaction-fill (Chip); do not swap host bg. */\n\n/* ── Rounded ────────────────────────────────────────────────────────────── */\n\n:host(.tag--rounded) { border-radius: var(--dimension-radius-half); }\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong)  { background-color: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral);  }\n:host(.tag--intent-brand.tag--contrast-strong)    { background-color: var(--color-background-strong-brand);    color: var(--color-foreground-medium-brand);    }\n:host(.tag--intent-ai.tag--contrast-strong)       { background-color: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai);       }\n:host(.tag--intent-negative.tag--contrast-strong) { background-color: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n:host(.tag--intent-warning.tag--contrast-strong)  { background-color: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning);  }\n:host(.tag--intent-caution.tag--contrast-strong)  { background-color: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution);  }\n:host(.tag--intent-positive.tag--contrast-strong) { background-color: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold)  { background-color: var(--color-background-bold-neutral);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-brand.tag--contrast-bold)    { background-color: var(--color-background-bold-brand);    color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-ai.tag--contrast-bold)       { background-color: var(--color-background-bold-ai);       color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-negative.tag--contrast-bold) { background-color: var(--color-background-bold-negative); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-warning.tag--contrast-bold)  { background-color: var(--color-background-bold-warning);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-caution.tag--contrast-bold)  { background-color: var(--color-background-bold-caution);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-positive.tag--contrast-bold) { background-color: var(--color-background-bold-positive); color: var(--color-foreground-on-bold-background-primary); }\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium)  { background-color: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral);  }\n:host(.tag--intent-brand.tag--contrast-medium)    { background-color: var(--color-background-medium-brand);    color: var(--color-foreground-strong-brand);    }\n:host(.tag--intent-ai.tag--contrast-medium)       { background-color: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai);       }\n:host(.tag--intent-negative.tag--contrast-medium) { background-color: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n:host(.tag--intent-warning.tag--contrast-medium)  { background-color: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning);  }\n:host(.tag--intent-caution.tag--contrast-medium)  { background-color: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution);  }\n:host(.tag--intent-positive.tag--contrast-medium) { background-color: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint)  { background-color: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral);  }\n:host(.tag--intent-brand.tag--contrast-faint)    { background-color: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand);    }\n:host(.tag--intent-ai.tag--contrast-faint)       { background-color: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai);       }\n:host(.tag--intent-negative.tag--contrast-faint) { background-color: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n:host(.tag--intent-warning.tag--contrast-faint)  { background-color: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning);  }\n:host(.tag--intent-caution.tag--contrast-faint)  { background-color: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution);  }\n:host(.tag--intent-positive.tag--contrast-faint) { background-color: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n\n/* ── Interactive (Chip) ─────────────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n  cursor: pointer;\n  outline: none;\n}\n\n/* Hover/press: `.ds-interaction-fill` paints via ::after — keep intent bg intact. */\n\n/* ── Label ──────────────────────────────────────────────────────────────── */\n\n.tag__label {\n  position: relative;\n  z-index: 2;\n  line-height: 0;\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n/* ── Icon slot ──────────────────────────────────────────────────────────── */\n\n/*\n * `display: contents` so an unused icon slot doesn't reserve a gap; when a\n * consumer slots an icon it becomes a flex child of the host and picks up\n * `--ds-control-gap`. Prefer matching `ds-icon` size to the tag size (md/sm/xs).\n */\n.tag__icon-slot {\n  display: contents;\n}\n\n.tag__icon-slot ::slotted(*) {\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n/* ── Remove button (Chip) ───────────────────────────────────────────────── */\n\n/*\n * Label↔dismiss uses host `gap` (`--ds-control-gap`) — same as Tag icon↔label.\n * Keep label inset on both sides so spacing mirrors Tag: [inset][text][inset][gap][icon].\n */\n.tag__remove {\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: inherit;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--dimension-radius-half);\n}\n\n.tag__remove::before {\n  content: '';\n  position: absolute;\n  /* Expand hover fill slightly past the glyph so the remove control feels clickable. */\n  inset: var(--dimension-space-n025);\n  border-radius: var(--dimension-radius-half);\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2);\n  pointer-events: none;\n}\n\n.tag__remove:hover::before  { background-color: var(--color-interaction-hover); }\n.tag__remove:active::before { background-color: var(--color-interaction-pressed); }\n\n:host(.tag--size-sm) .tag__remove::before { inset: var(--dimension-space-n012); }\n:host(.tag--size-xs) .tag__remove::before { inset: 0; }\n\n.tag__remove-x {\n  display: inline-flex;\n  flex-shrink: 0;\n  /* Box sized by ds-icon’s size prop (md/sm/xs → iconography tokens). */\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.tag__remove ::slotted(*) {\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TagIntent   = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';\nexport type TagSize     = 'md' | 'sm' | 'xs';\n\n/** Text variant per control-density recipe (md / sm / xs). */\nconst TEXT_VARIANT: Record<TagSize, string> = {\n  md: 'text-body-medium',\n  sm: 'text-body-small',\n  xs: 'text-caption',\n};\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<TagSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-tag',\n  styleUrl: 'Tag.css',\n  scoped: true,\n})\nexport class Tag {\n  @Prop() label!: string;\n  @Prop() intent: TagIntent = 'neutral';\n  @Prop() contrast: TagContrast = 'faint';\n  @Prop() size: TagSize = 'md';\n  @Prop() rounded: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n\n  render() {\n    const textVariant = TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'tag': true,\n          [`tag--intent-${this.intent}`]: true,\n          [`tag--contrast-${this.contrast}`]: true,\n          [`tag--size-${this.size}`]: true,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'tag--rounded': this.rounded,\n        }}\n        style={maxWidthStyle}\n      >\n        {/* Leading icon — consumer provides ds-icon (or any SVG); prefer size matching tag size. */}\n        <span class=\"tag__icon-slot\" data-icon-size={iconSize}>\n          <slot name=\"icon\" />\n        </span>\n        <span class={{ 'tag__label': true, [textVariant]: true }}>\n          {this.label}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAS,IAAM,suXCOrB,MAAMC,EAAwC,CAC5CC,GAAI,mBACJC,GAAI,kBACJC,GAAI,gBAON,MAAMC,EAAiD,CACrDH,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAQOE,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,4CAOUC,KAAAC,OAAoB,UACpBD,KAAAE,SAAwB,QACxBF,KAAAG,KAAgB,KAChBH,KAAAI,QAAmB,KAmC5B,CAhCC,MAAAC,GACE,MAAMC,EAAchB,EAAaU,KAAKG,MACtC,MAAMI,EAAWb,EAAUM,KAAKG,MAEhC,MAAMK,EAAgBR,KAAKS,UAAY,KACnC,CAAEA,gBAAiBT,KAAKS,WAAa,SAAW,GAAGT,KAAKS,aAAeT,KAAKS,UAC5EC,UAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,IAAO,KACP,CAAC,eAAef,KAAKC,UAAW,KAChC,CAAC,iBAAiBD,KAAKE,YAAa,KACpC,CAAC,aAAaF,KAAKG,QAAS,KAC5B,iBAAkBH,KAAKG,OAAS,KAChC,iBAAkBH,KAAKG,OAAS,KAChC,iBAAkBH,KAAKG,OAAS,KAChC,eAAgBH,KAAKI,SAEvBY,MAAOR,GAGPG,EAAA,QAAAE,IAAA,2CAAMC,MAAM,iBAAgB,iBAAiBP,GAC3CI,EAAA,QAAAE,IAAA,2CAAMI,KAAK,UAEbN,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAEI,WAAc,KAAMZ,CAACA,GAAc,OAC/CN,KAAKmB,O","ignoreList":[]}
+{"version":3,"names":["tagCss","ICON_SIZE","md","sm","xs","Tag","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","intent","contrast","size","rounded","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","maxWidthStyle","maxWidth","undefined","h","Host","key","class","tag","style","name","as","variant","color","label"],"sources":["src/wc/components/Tag/Tag.css?tag=ds-tag&encapsulation=scoped","src/wc/components/Tag/Tag.tsx"],"sourcesContent":["/* ==========================================================================\n   ds-tag / ds-chip shared visual recipe\n   ========================================================================== */\n\n@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  color: var(--color-foreground-primary);\n  position: relative;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  gap: var(--ds-control-gap);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n/* Density vars come from .ds-control--md|sm|xs on the host (set in TSX). */\n/* Hover/press overlay comes from .ds-interaction-fill (Chip); do not swap host bg. */\n\n/* ── Rounded ────────────────────────────────────────────────────────────── */\n\n:host(.tag--rounded) { border-radius: var(--dimension-radius-half); }\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong)  { background-color: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral);  }\n:host(.tag--intent-brand.tag--contrast-strong)    { background-color: var(--color-background-strong-brand);    color: var(--color-foreground-medium-brand);    }\n:host(.tag--intent-ai.tag--contrast-strong)       { background-color: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai);       }\n:host(.tag--intent-negative.tag--contrast-strong) { background-color: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n:host(.tag--intent-warning.tag--contrast-strong)  { background-color: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning);  }\n:host(.tag--intent-caution.tag--contrast-strong)  { background-color: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution);  }\n:host(.tag--intent-positive.tag--contrast-strong) { background-color: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold)  { background-color: var(--color-background-bold-neutral);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-brand.tag--contrast-bold)    { background-color: var(--color-background-bold-brand);    color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-ai.tag--contrast-bold)       { background-color: var(--color-background-bold-ai);       color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-negative.tag--contrast-bold) { background-color: var(--color-background-bold-negative); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-warning.tag--contrast-bold)  { background-color: var(--color-background-bold-warning);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-caution.tag--contrast-bold)  { background-color: var(--color-background-bold-caution);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-positive.tag--contrast-bold) { background-color: var(--color-background-bold-positive); color: var(--color-foreground-on-bold-background-primary); }\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium)  { background-color: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral);  }\n:host(.tag--intent-brand.tag--contrast-medium)    { background-color: var(--color-background-medium-brand);    color: var(--color-foreground-strong-brand);    }\n:host(.tag--intent-ai.tag--contrast-medium)       { background-color: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai);       }\n:host(.tag--intent-negative.tag--contrast-medium) { background-color: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n:host(.tag--intent-warning.tag--contrast-medium)  { background-color: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning);  }\n:host(.tag--intent-caution.tag--contrast-medium)  { background-color: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution);  }\n:host(.tag--intent-positive.tag--contrast-medium) { background-color: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint)  { background-color: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral);  }\n:host(.tag--intent-brand.tag--contrast-faint)    { background-color: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand);    }\n:host(.tag--intent-ai.tag--contrast-faint)       { background-color: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai);       }\n:host(.tag--intent-negative.tag--contrast-faint) { background-color: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n:host(.tag--intent-warning.tag--contrast-faint)  { background-color: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning);  }\n:host(.tag--intent-caution.tag--contrast-faint)  { background-color: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution);  }\n:host(.tag--intent-positive.tag--contrast-faint) { background-color: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n\n/* ── Interactive (Chip) ─────────────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n  cursor: pointer;\n  outline: none;\n}\n\n/* Hover/press: `.ds-interaction-fill` paints via ::after — keep intent bg intact. */\n\n/* ── Label ──────────────────────────────────────────────────────────────── */\n\n.tag__label {\n  position: relative;\n  z-index: 2;\n  line-height: 0;\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n/* ── Icon slot ──────────────────────────────────────────────────────────── */\n\n/*\n * `display: contents` so an unused icon slot doesn't reserve a gap; when a\n * consumer slots an icon it becomes a flex child of the host and picks up\n * `--ds-control-gap`. Prefer matching `ds-icon` size to the tag size (md/sm/xs).\n */\n.tag__icon-slot {\n  display: contents;\n}\n\n.tag__icon-slot ::slotted(*) {\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n/* ── Remove button (Chip) ───────────────────────────────────────────────── */\n\n/*\n * Label↔dismiss uses host `gap` (`--ds-control-gap`) — same as Tag icon↔label.\n * Keep label inset on both sides so spacing mirrors Tag: [inset][text][inset][gap][icon].\n */\n.tag__remove {\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: inherit;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--dimension-radius-half);\n}\n\n.tag__remove::before {\n  content: '';\n  position: absolute;\n  /* Expand hover fill slightly past the glyph so the remove control feels clickable. */\n  inset: var(--dimension-space-n025);\n  border-radius: var(--dimension-radius-half);\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2);\n  pointer-events: none;\n}\n\n.tag__remove:hover::before  { background-color: var(--color-interaction-hover); }\n.tag__remove:active::before { background-color: var(--color-interaction-pressed); }\n\n:host(.tag--size-sm) .tag__remove::before { inset: var(--dimension-space-n012); }\n:host(.tag--size-xs) .tag__remove::before { inset: 0; }\n\n.tag__remove-x {\n  display: inline-flex;\n  flex-shrink: 0;\n  /* Box sized by ds-icon’s size prop (md/sm/xs → iconography tokens). */\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.tag__remove ::slotted(*) {\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\nexport type TagIntent   = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';\nexport type TagSize     = 'md' | 'sm' | 'xs';\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<TagSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-tag',\n  styleUrl: 'Tag.css',\n  scoped: true,\n})\nexport class Tag {\n  @Prop() label!: string;\n  @Prop() intent: TagIntent = 'neutral';\n  @Prop() contrast: TagContrast = 'faint';\n  @Prop() size: TagSize = 'md';\n  @Prop() rounded: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'tag': true,\n          [`tag--intent-${this.intent}`]: true,\n          [`tag--contrast-${this.contrast}`]: true,\n          [`tag--size-${this.size}`]: true,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'tag--rounded': this.rounded,\n        }}\n        style={maxWidthStyle}\n      >\n        {/* Leading icon — consumer provides ds-icon (or any SVG); prefer size matching tag size. */}\n        <span class=\"tag__icon-slot\" data-icon-size={iconSize}>\n          <slot name=\"icon\" />\n        </span>\n        <span class=\"tag__label\">\n          <ds-text as=\"span\" variant={textVariant} color=\"inherit\">\n            {this.label}\n          </ds-text>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAAA,MAAMA,EAAS,IAAM,i5XCWrB,MAAMC,EAAiD,CACrDC,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAQOC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,4CAOUC,KAAAC,OAAoB,UACpBD,KAAAE,SAAwB,QACxBF,KAAAG,KAAgB,KAChBH,KAAAI,QAAmB,KAqC5B,CAlCC,MAAAC,GACE,MAAMC,EAAcC,EAAqBP,KAAKG,MAC9C,MAAMK,EAAWjB,EAAUS,KAAKG,MAEhC,MAAMM,EAAgBT,KAAKU,UAAY,KACnC,CAAEA,gBAAiBV,KAAKU,WAAa,SAAW,GAAGV,KAAKU,aAAeV,KAAKU,UAC5EC,UAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,IAAO,KACP,CAAC,eAAehB,KAAKC,UAAW,KAChC,CAAC,iBAAiBD,KAAKE,YAAa,KACpC,CAAC,aAAaF,KAAKG,QAAS,KAC5B,iBAAkBH,KAAKG,OAAS,KAChC,iBAAkBH,KAAKG,OAAS,KAChC,iBAAkBH,KAAKG,OAAS,KAChC,eAAgBH,KAAKI,SAEvBa,MAAOR,GAGPG,EAAA,QAAAE,IAAA,2CAAMC,MAAM,iBAAgB,iBAAiBP,GAC3CI,EAAA,QAAAE,IAAA,2CAAMI,KAAK,UAEbN,EAAA,QAAAE,IAAA,2CAAMC,MAAM,cACVH,EAAA,WAAAE,IAAA,2CAASK,GAAG,OAAOC,QAASd,EAAae,MAAM,WAC5CrB,KAAKsB,Q","ignoreList":[]}

package/dist/components/ds-text.js

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-CtwNUCnp.js";const t=o;const p=s;export{t as DsText,p as defineCustomElement};
+import{T as o,d as s}from"./p-BDQgqw5J.js";const t=o;const p=s;export{t as DsText,p as defineCustomElement};
 //# sourceMappingURL=ds-text.js.map

package/dist/components/ds-toggle.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as o,h as n,a as s,t as i}from"./index.js";const r=()=>`:host(.ds-control-inactive),.ds-control-inactive{opacity:0.25;pointer-events:none;cursor:not-allowed}: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)}.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(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.ds-control-inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.ds-control-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.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.isInactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return n(s,{key:"b729fc6fcfa69e9761c2d412802fd6228c0d6511",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.isInactive||undefined,tabIndex:this.isInactive?-1:0,class:{toggle:true,checked:this.checked,"ds-control-inactive":this.isInactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("span",{key:"3d8b5cd8b8d57653a279b5627aa2dbd476f9e427",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],isInactive:[4,"is-inactive"]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(i(t))){customElements.define(i(t),a)}break}}))}c();const d=a;const l=c;export{d as DsToggle,l as defineCustomElement};
+import{p as t,H as e,c as o,h as n,a as s,t as i}from"./index.js";const r=()=>`:host(.ds-control-inactive),.ds-control-inactive{opacity:0.25;pointer-events:none;cursor:not-allowed}: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)}.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(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.ds-control-inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.ds-control-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.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.isInactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return n(s,{key:"ac9c8419e4e01dac7ff141715746f5fe89cbf562",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.isInactive||undefined,tabIndex:this.isInactive?-1:0,class:{toggle:true,checked:this.checked,"ds-control-inactive":this.isInactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("span",{key:"33a7a004b0731c39b3a2f00c07aba20de5dbd951",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],isInactive:[4,"is-inactive"]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(i(t))){customElements.define(i(t),a)}break}}))}c();const d=a;const l=c;export{d as DsToggle,l as defineCustomElement};
 //# sourceMappingURL=ds-toggle.js.map

package/dist/components/ds-tooltip-data-viz.js

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-XNHSe8Mg.js";const t=o;const p=s;export{t as DsTooltipDataViz,p as defineCustomElement};
+import{T as o,d as s}from"./p-DwQ-zdqa.js";const t=o;const a=s;export{t as DsTooltipDataViz,a as defineCustomElement};
 //# sourceMappingURL=ds-tooltip-data-viz.js.map

package/dist/components/ds-tooltip.js

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-CDHRJqea.js";const t=o;const a=s;export{t as DsTooltip,a as defineCustomElement};
+import{T as o,d as s}from"./p-DQ3MyAC7.js";const t=o;const p=s;export{t as DsTooltip,p as defineCustomElement};
 //# sourceMappingURL=ds-tooltip.js.map

package/dist/components/p-061wD4FM.js

@@ -0,0 +1,2 @@
+import{p as t,H as o,c as n,h as i,a as d,t as l}from"./index.js";import{d as e}from"./p-CyFVn2Sc.js";import{d as r}from"./p-BDQgqw5J.js";import{C as s}from"./p-BvF44IQK.js";import{c as a}from"./p-DuFm-ieS.js";const c=()=>`.sc-ds-button-filled-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-filled: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-filled{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-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled: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-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-button-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-button-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025);--ds-control-line-height:var(--typography-lineheight-md)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025);--ds-control-line-height:var(--typography-lineheight-sm)}.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025);--ds-control-line-height:var(--typography-lineheight-xs)}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled-host--icon.ds-control-width--hug.sc-ds-button-filled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-filled-host--icon.ds-control-width--fill.sc-ds-button-filled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-filled-h .button-filled.sc-ds-button-filled{width:100%}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-2),     color var(--effect-motion-short-2),     transform var(--effect-motion-short-2)}.button-filled--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:scale(var(--dimension-scale-subtle))}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-filled__label.sc-ds-button-filled{position:relative;z-index:2;line-height:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}`;const u={md:"md",sm:"sm",xs:"xs"};const f=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.intent="brand";this.contrast="bold";this.isInactive=false;this.type="button";this.buttonEl=null;this.handleClick=t=>{if(this.isInactive)return;this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const t=s[this.size];const o=u[this.size];const n={"button-filled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-filled--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label",[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return i(d,{key:"61bf920af256140aeba905f111c91e2dbdabbf5c",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...a(this.width)},tabIndex:-1},i("button",{key:"8c47daf10a0bd8f1666775f6f274545f0dff4203",ref:t=>{this.buttonEl=t??null},type:this.type,class:n,disabled:this.isInactive,"aria-label":this.accessibleName,onClick:this.handleClick},this.showIcon&&i("span",{key:"d7807022c580c95dfce7519782129bec258d00b3",class:"button-filled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"14d0d7153bfa79427439d8deca11713c71220ddd",name:this.icon,size:o,color:"inherit"})),this.showLabel&&i("span",{key:"da6e51b6cf266f66ae40f3efd3492bad5066de9d",class:"button-filled__label ds-interaction-fill__content"},i("ds-text",{key:"2886e5357fb3005eff516d9af6ae4c3a746d0aa7",as:"span",variant:t,emphasis:true,color:"inherit"},this.label))))}get el(){return this}static get style(){return c()}},[2,"ds-button-filled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],intent:[1],contrast:[1],isInactive:[4,"is-inactive"],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(l(t))){customElements.define(l(t),f)}break;case"ds-icon":if(!customElements.get(l(t))){e()}break;case"ds-text":if(!customElements.get(l(t))){r()}break}}))}b();export{f as B,b as d};
+//# sourceMappingURL=p-061wD4FM.js.map

package/dist/components/p-061wD4FM.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["buttonFilledCss","ICON_SIZE","md","sm","xs","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","intent","contrast","isInactive","type","buttonEl","handleClick","event","dsClick","emit","setFocus","focus","showIcon","showLabel","accessibleName","ariaLabel","undefined","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","onClick","name","color","as","emphasis"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-filled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-filled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-filled {\n  width: 100%;\n}\n\n.button-filled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  background-color: var(--ds-button-filled-bg);\n  color: var(--ds-button-filled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition:\n    background-color var(--effect-motion-short-2),\n    color var(--effect-motion-short-2),\n    transform var(--effect-motion-short-2);\n  /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n.button-filled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-filled:active:not(:disabled):not(.ds-control-inactive) {\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.button-filled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-filled__label {\n  position: relative;\n  z-index: 2;\n  line-height: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-bold-neutral);\n  --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-bold-ai);\n  --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-bold-negative);\n  --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-bold-warning);\n  --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-bold-caution);\n  --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-bold-positive);\n  --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-bold-guide);\n  --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-strong-neutral);\n  --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-strong-brand);\n  --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-strong-ai);\n  --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-strong-negative);\n  --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-strong-warning);\n  --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-strong-caution);\n  --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-strong-positive);\n  --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-strong-guide);\n  --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-medium-neutral);\n  --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-medium-brand);\n  --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-medium-ai);\n  --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-medium-negative);\n  --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-medium-warning);\n  --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-medium-caution);\n  --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-medium-positive);\n  --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-medium-guide);\n  --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-faint-neutral);\n  --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-faint-brand);\n  --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-faint-ai);\n  --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-faint-negative);\n  --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-faint-warning);\n  --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-faint-caution);\n  --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-faint-positive);\n  --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-faint-guide);\n  --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonFilledIntent =\n  | 'neutral'\n  | 'brand'\n  | 'ai'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive'\n  | 'guide'\n  | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonFilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonFilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-filled',\n  styleUrl: 'ButtonFilled.css',\n  scoped: true,\n})\nexport class ButtonFilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonFilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonFilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonFilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Semantic colour intent. */\n  @Prop() intent: ButtonFilledIntent = 'brand';\n\n  /**\n   * Background fill weight. Foreground uses the paired contrast token:\n   * bold → faint, strong → medium, medium → strong, faint → bold.\n   */\n  @Prop() contrast: ButtonFilledContrast = 'bold';\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\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.isInactive) return;\n    this.dsClick.emit(event);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.showLabel && this.label) return undefined;\n    if (this.variant === 'icon') return this.icon || 'action';\n    return this.label || 'action';\n  }\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-filled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': !this.isInactive,\n      /* Bold is the default filled contrast — on-bold interaction tokens. */\n      'ds-interaction-fill--on-bold': this.contrast === 'bold',\n      'ds-interaction-fill--on-strong': this.contrast === 'strong',\n      'ds-interaction-fill--on-medium': this.contrast === 'medium',\n      /* faint → default app interaction tokens (no --on-*). */\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-filled--icon': this.variant === 'icon',\n      'button-filled--label': this.variant === 'label',\n      'button-filled--icon-label': this.variant === 'icon-label',\n      [`button-filled--intent-${this.intent}`]: true,\n      [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-filled-host': true,\n          'button-filled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          aria-label={this.accessibleName}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-filled__icon-wrap ds-interaction-fill__content\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          {this.showLabel && (\n            <span class=\"button-filled__label ds-interaction-fill__content\">\n              <ds-text as=\"span\" variant={textVariant} emphasis color=\"inherit\">\n                {this.label}\n              </ds-text>\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kNAAA,MAAMA,EAAkB,IAAM,+mfC0B9B,MAAMC,EAA0D,CAC9DC,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAQOC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,2EAYUC,KAAAC,QAA+B,QAG/BD,KAAAE,KAAyB,KAGzBF,KAAAG,MAA2B,MAG3BH,KAAAI,MAAgB,GAGhBJ,KAAAK,KAAe,GAGfL,KAAAM,OAA6B,QAM7BN,KAAAO,SAAiC,OAGjCP,KAAAQ,WAAsB,MAGtBR,KAAAS,KAAsC,SAMtCT,KAAAU,SAAqC,KAOrCV,KAAAW,YAAeC,IACrB,GAAIZ,KAAKQ,WAAY,OACrBR,KAAKa,QAAQC,KAAKF,EAAM,CAgF3B,CAtFC,cAAMG,GACJf,KAAKU,UAAUM,O,CAQjB,YAAYC,GACV,OAAOjB,KAAKC,UAAY,QAAUD,KAAKC,UAAY,Y,CAGrD,aAAYiB,GACV,OAAOlB,KAAKC,UAAY,SAAWD,KAAKC,UAAY,Y,CAGtD,kBAAYkB,GACV,GAAInB,KAAKoB,UAAW,OAAOpB,KAAKoB,UAChC,GAAIpB,KAAKkB,WAAalB,KAAKI,MAAO,OAAOiB,UACzC,GAAIrB,KAAKC,UAAY,OAAQ,OAAOD,KAAKK,MAAQ,SACjD,OAAOL,KAAKI,OAAS,Q,CAGvB,MAAAkB,GACE,MAAMC,EAAcC,EAAqBxB,KAAKE,MAC9C,MAAMuB,EAAWlC,EAAUS,KAAKE,MAEhC,MAAMwB,EAA+B,CACnC,gBAAiB,KACjB,sBAAuB,KACvB,uBAAwB1B,KAAKQ,WAE7B,+BAAgCR,KAAKO,WAAa,OAClD,iCAAkCP,KAAKO,WAAa,SACpD,iCAAkCP,KAAKO,WAAa,SAEpD,sBAAuBP,KAAKQ,WAC5B,iBAAkBR,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,sBAAuBF,KAAKC,UAAY,OACxC,uBAAwBD,KAAKC,UAAY,QACzC,4BAA6BD,KAAKC,UAAY,aAC9C,CAAC,yBAAyBD,KAAKM,UAAW,KAC1C,CAAC,2BAA2BN,KAAKO,YAAaP,KAAKO,WAAa,QAGlE,OACEoB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,qBAAsB,KACtB,2BAA4B9B,KAAKC,UAAY,OAC7C,iBAAkBD,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,QAC7B6B,EAAkB/B,KAAKG,QAE5B6B,UAAU,GAEVL,EAAA,UAAAE,IAAA,2CACEI,IAAKC,IACHlC,KAAKU,SAAWwB,GAAM,IAAI,EAE5BzB,KAAMT,KAAKS,KACXqB,MAAOJ,EACPS,SAAUnC,KAAKQ,WAAU,aACbR,KAAKmB,eACjBiB,QAASpC,KAAKW,aAEbX,KAAKiB,UACJU,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yDACVH,EAAA,WAAAE,IAAA,2CAASQ,KAAMrC,KAAKK,KAAMH,KAAMuB,EAAUa,MAAM,aAGnDtC,KAAKkB,WACJS,EAAA,QAAAE,IAAA,2CAAMC,MAAM,qDACVH,EAAA,WAAAE,IAAA,2CAASU,GAAG,OAAOtC,QAASsB,EAAaiB,SAAQ,KAACF,MAAM,WACrDtC,KAAKI,S","ignoreList":[]}

package/dist/components/p-AiGt4dQS.js

@@ -0,0 +1,2 @@
+import{p as e,H as a,h as n,a as i,t as r}from"./index.js";import{d as t}from"./p-BDQgqw5J.js";const d="--_badge-gradient-position";function s(e){const a=e.closest("ds-app-shell");return a?.hasAttribute("gradient")===true}const o=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half);line-height:1}.badge--selected.sc-ds-badge-h{--_badge-bg:var(--color-foreground-primary)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}`;const g={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.isSelected=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const a=this.el.closest("ds-app-shell");if(a)this.gradientObserver.observe(a);const n=this.el.closest("ds-bar-nav");if(n)this.gradientObserver.observe(n);const i=this.el.closest("ds-panel-nav");if(i)this.gradientObserver.observe(i)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const a={"--_badge-ring":e};if(!this.gradientBackground||!s(this.el))return a;a[d]="0 0";return a}render(){const e=this.variant==="dot";if(!e&&this.count===0)return n(i,{style:{display:"none"}});const a=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const t=this.background??g[this.surface];return n(i,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--selected":this.isSelected,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:this.ringHostStyle(t)},n("span",{class:"badge__mark","aria-hidden":"true"},!e&&n("ds-text",{as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a)))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return o()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"gradient-background"],isSelected:[4,"is-selected"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-badge","ds-text"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){t()}break}}))}b();export{c as B,b as d};
+//# sourceMappingURL=p-AiGt4dQS.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","hasAttribute","badgeCss","SURFACE_RING","default","primary","secondary","medium","bold","strong","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","gradientBackground","isSelected","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","bindGradientRingSync","el","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","render","isDot","h","Host","display","String","ariaLabel","label","background","class","badge","as","emphasis","color"],"sources":["src/wc/nav/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under `ds-app-shell[gradient]`. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  // Explicit <HTMLElement>: the inferred HTMLDsAppShellElement type only\n  // resolves where @stencil/core types are installed — consumers importing\n  // `@ds-mo/ui/nav` (raw TS) compile this without them.\n  const shell = from.closest<HTMLElement>('ds-app-shell');\n  return shell?.hasAttribute('gradient') === true;\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n  if (barHost) {\n    const root = barHost.shadowRoot ?? barHost;\n    const element = root.querySelector('.bar-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n  if (panelHost) {\n    const root = panelHost.shadowRoot ?? panelHost;\n    const element = root.querySelector('.panel-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  if (!isShellGradientActive(badgeHost)) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n",":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0;\n  border-radius: var(--dimension-radius-half);\n  line-height: 1;\n}\n\n:host(.badge--selected) {\n  --_badge-bg: var(--color-foreground-primary);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  /* stylelint-enable color-no-hex */\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  isShellGradientActive,\n} from '../../nav/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"+\". */\n  @Prop() max: number = 9;\n\n  /** Surface context for the ring around dots. */\n  @Prop() surface: BadgeSurface = 'default';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`;\n   * set `gradient-background` to opt in/out explicitly.\n   *\n   * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n   * unknown `on*` member down the event-listener path during attribute\n   * reflection, calling addEventListener with a non-listener and throwing.\n   */\n  @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */\n  @Prop() isSelected: boolean = false;\n\n  /** Accessible label. Defaults to the count as a string. */\n  @Prop() label: string | undefined;\n\n  /** Bumps on resize/layout so render recomputes gradient ring position. */\n  @State() private gradientLayoutVersion = 0;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n  }\n\n  @Watch('gradientBackground')\n  gradientBackgroundChanged() {\n    this.bindGradientRingSync();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n    }\n\n    if (this.gradientBackground) {\n      this.bindGradientRingSync();\n    }\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => {\n      this.gradientLayoutVersion += 1;\n    };\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-app-shell');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  private ringHostStyle(ring: string): Record<string, string> {\n    void this.gradientLayoutVersion;\n\n    const style: Record<string, string> = { '--_badge-ring': ring };\n    if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n    /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n    style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n    return style;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? '+' : String(this.count);\n    const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--selected': this.isSelected,\n          'badge--on-gradient-background': this.gradientBackground,\n        }}\n        aria-label={ariaLabel}\n        style={this.ringHostStyle(ring)}\n      >\n        <span class=\"badge__mark\" aria-hidden=\"true\">\n          {!isDot && (\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n              {display}\n            </ds-text>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAMO,MAAMA,EAA8B,6BASrC,SAAUC,EAAsBC,GAIpC,MAAMC,EAAQD,EAAKE,QAAqB,gBACxC,OAAOD,GAAOE,aAAa,cAAgB,IAC7C,CCrBA,MAAMC,EAAW,IAAM,ikECiBvB,MAAMC,EAA6C,CACjDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAI,QAAwB,UAc2BJ,KAAAK,mBAA8B,MAGjFL,KAAAM,WAAsB,MAMbN,KAAAO,sBAAwB,EAEjCP,KAAAQ,iBAA0C,KAC1CR,KAAAS,uBAA8C,IA0GvD,CAxGC,gBAAAC,GACEV,KAAKW,iC,CAGP,oBAAAC,GACEZ,KAAKa,wB,CAIP,yBAAAC,GACEd,KAAKe,sB,CAIC,+BAAAJ,GACN,IAAKX,KAAKK,oBAAsBxB,EAAsBmB,KAAKgB,IAAK,CAC9DhB,KAAKK,mBAAqB,I,CAG5B,GAAIL,KAAKK,mBAAoB,CAC3BL,KAAKe,sB,EAID,oBAAAA,GACNf,KAAKa,yBAEL,IAAKb,KAAKK,mBAAoB,OAE9B,MAAMY,EAAS,KACbjB,KAAKO,uBAAyB,CAAC,EAEjCU,IAEAjB,KAAKS,uBAAyBQ,EAC9BC,OAAOC,iBAAiB,SAAUF,GAElC,UAAWG,iBAAmB,YAAa,CACzCpB,KAAKQ,iBAAmB,IAAIY,eAAeH,GAC3CjB,KAAKQ,iBAAiBa,QAAQrB,KAAKgB,IAEnC,MAAMjC,EAAQiB,KAAKgB,GAAGhC,QAAQ,gBAC9B,GAAID,EAAOiB,KAAKQ,iBAAiBa,QAAQtC,GAEzC,MAAMuC,EAAMtB,KAAKgB,GAAGhC,QAAQ,cAC5B,GAAIsC,EAAKtB,KAAKQ,iBAAiBa,QAAQC,GAEvC,MAAMC,EAAQvB,KAAKgB,GAAGhC,QAAQ,gBAC9B,GAAIuC,EAAOvB,KAAKQ,iBAAiBa,QAAQE,E,EAIrC,sBAAAV,GACN,GAAIb,KAAKS,uBAAwB,CAC/BS,OAAOM,oBAAoB,SAAUxB,KAAKS,wBAC1CT,KAAKS,uBAAyB,I,CAGhCT,KAAKQ,kBAAkBiB,aACvBzB,KAAKQ,iBAAmB,I,CAGlB,aAAAkB,CAAcC,GAGpB,MAAMC,EAAgC,CAAE,gBAAiBD,GACzD,IAAK3B,KAAKK,qBAAuBxB,EAAsBmB,KAAKgB,IAAK,OAAOY,EAGxEA,EAAMhD,GAA+B,MACrC,OAAOgD,C,CAGT,MAAAC,GACE,MAAMC,EAAQ9B,KAAKC,UAAY,MAE/B,IAAK6B,GAAS9B,KAAKE,QAAU,EAAG,OAAO6B,EAACC,EAAI,CAACJ,MAAO,CAAEK,QAAS,UAE/D,MAAMA,EAAUjC,KAAKE,MAAQF,KAAKG,IAAM,IAAM+B,OAAOlC,KAAKE,OAC1D,MAAMiC,EAAYnC,KAAKoC,QAAUN,EAAQ,eAAiBI,OAAOlC,KAAKE,QACtE,MAAMyB,EAAO3B,KAAKqC,YAAclD,EAAaa,KAAKI,SAElD,OACE2B,EAACC,EAAI,CACHM,MAAO,CACLC,MAAO,KACP,kBAAmBT,EACnB,aAAcA,EACd,kBAAmB9B,KAAKM,WACxB,gCAAiCN,KAAKK,oBACvC,aACW8B,EACZP,MAAO5B,KAAK0B,cAAcC,IAE1BI,EAAA,QAAMO,MAAM,cAAa,cAAa,SAClCR,GACAC,EAAA,WAASS,GAAG,OAAOvC,QAAQ,eAAewC,SAAQ,KAACC,MAAM,WACtDT,I","ignoreList":[]}