@ds-mo/ui 8.0.1 → 8.1.0

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

@@ -1 +1 @@
-{"version":3,"names":["selectCss","ICON_SIZE","md","sm","xs","Select","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","disabled","required","requiredMessage","placeholder","size","width","isInactive","activeFill","hasBorder","ariaLabel","isOpen","triggerEl","menuEl","openWithFocusVisible","initialValue","formDisabled","handleMenuSelect","e","detail","undefined","String","dsChange","emit","close","handleMenuClose","componentWillLoad","syncFormValue","componentDidLoad","anchor","addEventListener","syncMenuItems","disconnectedCallback","removeEventListener","onIsOpenChange","open","initialFocusVisible","onOptionsChange","onValueChange","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","items","map","opt","label","isSelected","syncMenuLayout","sectionPadPx","resolveCssLengthPx","TOKEN_DEFAULTS","space050","triggerW","offsetWidth","menuWidth","minWidth","alignOffset","opts","focusVisible","toggle","handleKeyDown","document","activeElement","key","preventDefault","focus","selectedLabel","find","o","hasSelection","some","render","showPlaceholder","hasValue","textVariant","CONTROL_TEXT_VARIANT","iconSize","density","showSelectedFill","h","Host","class","controlWidthClass","ref","el","type","trigger","role","ariaLabelledby","onClick","as","variant","color","lineTruncation","name","side","align"],"sources":["src/wc/components/Select/Select.css?tag=ds-select&encapsulation=scoped","src/wc/components/Select/Select.tsx"],"sourcesContent":["/* ==========================================================================\n   Select — unfilled-button chrome trigger + ds-menu dropdown.\n   Density via `.ds-control--md|sm|xs` (control-density.css).\n   ========================================================================== */\n\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host(.select-host) {\n  display: inline-flex;\n  position: relative;\n  /* Idle/open = secondary. A selected value promotes only the label. */\n  --ds-select-fg: var(--color-foreground-secondary);\n  --ds-select-fg-active: var(--color-foreground-primary);\n  --ds-select-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill) .trigger {\n  width: 100%;\n}\n\n:host(.ds-control-width--hug) .trigger__label {\n  flex: 0 1 auto;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-select-fg);\n  cursor: pointer;\n  font-family: inherit;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected`).\n     A selected value promotes the label; opening alone does not. */\n}\n\n/* Inset stroke via interaction-fill ::after (same recipe as ButtonUnfilled). */\n.trigger--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-select-border);\n}\n\n.trigger--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n.trigger__label {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  color: inherit;\n  transition: color var(--effect-motion-short-2);\n}\n\n.trigger--has-value .trigger__label {\n  color: var(--ds-select-fg-active);\n}\n\n.trigger__chevron {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Always secondary — only a selected label promotes. */\n  color: var(--ds-select-fg);\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  resolveCssLengthPx,\n  TOKEN_DEFAULTS,\n  type ControlWidth,\n} from '../../utils';\nimport type { MenuItemData } from '../Menu/menu-types';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\nexport type SelectSize = 'md' | 'sm' | 'xs';\n\nexport type SelectWidth = ControlWidth;\n\n/** `ds-icon` size matching control-density icon metrics. */\nconst ICON_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in\n * control-density sizes, with `ds-menu` for the option list.\n */\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Array of options. Set via JS property.\n   * @example el.options = [{ label: 'Apple', value: 'apple' }];\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /** Currently selected value. */\n  @Prop({ mutable: true }) value: string = '';\n\n  @Prop({ reflect: true }) name: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) required: boolean = false;\n\n  @Prop() requiredMessage: string = 'This field is required.';\n\n  /** Placeholder shown when no value is selected. */\n  @Prop() placeholder: string = 'Select';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: SelectSize = 'md';\n\n  /** Width fit — fill the parent (default) or hug content. */\n  @Prop() width: SelectWidth = 'fill';\n\n  /** Disables interaction (25% opacity via ds-control-inactive). */\n  @Prop() isInactive: boolean = false;\n\n  /**\n   * When a value is selected, render the selected interaction fill (same recipe\n   * as unfilled-button `activeFill`). Default `true`. Pass `false` for\n   * foreground-only selection (primary label, no fill).\n   * A selected value promotes the label to primary; chevron stays secondary.\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on (matches unfilled button). */\n  @Prop() hasBorder: boolean = true;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  /** Emits the selected value string. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private isOpen: boolean = false;\n\n  private triggerEl: HTMLButtonElement | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n  /** True when the open was keyboard-driven — menu shows initial focus ring. */\n  private openWithFocusVisible = false;\n  private initialValue = '';\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n    }\n    this.menuEl?.addEventListener('dsSelect', this.handleMenuSelect);\n    this.menuEl?.addEventListener('dsClose', this.handleMenuClose);\n    this.syncMenuItems();\n  }\n\n  disconnectedCallback() {\n    this.menuEl?.removeEventListener('dsSelect', this.handleMenuSelect);\n    this.menuEl?.removeEventListener('dsClose', this.handleMenuClose);\n  }\n\n  @Watch('isOpen')\n  onIsOpenChange(open: boolean) {\n    if (!this.menuEl) return;\n    this.menuEl.initialFocusVisible = open && this.openWithFocusVisible;\n    this.menuEl.open = open;\n  }\n\n  @Watch('options')\n  onOptionsChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(inactive ? null : this.value);\n    const missing = this.required && !inactive && this.value.length === 0;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  private handleMenuSelect = (e: Event) => {\n    const detail = (e as CustomEvent<MenuItemData>).detail;\n    if (detail?.value !== undefined) {\n      this.value = String(detail.value);\n      this.dsChange.emit(this.value);\n    }\n    this.close();\n  };\n\n  private handleMenuClose = () => {\n    this.close();\n  };\n\n  private syncMenuItems() {\n    if (!this.menuEl) return;\n    this.menuEl.items = this.options.map(opt => ({\n      label: opt.label,\n      value: opt.value,\n      isSelected: opt.value === this.value,\n    }));\n  }\n\n  /**\n   * Size/place the menu so option labels line up with the select label.\n   * Menu section padding insets items; we expand min-width by that chrome and\n   * shift left by the same amount (`alignOffset`). Menu can grow wider than\n   * the field (left-bottom / `align=\"start\"`) when labels need more room.\n   */\n  private syncMenuLayout() {\n    if (!this.menuEl || !this.triggerEl) return;\n    const sectionPadPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n    const triggerW = this.triggerEl.offsetWidth;\n    // Prefer min-width over fixed width so long options can grow the menu.\n    this.menuEl.menuWidth = '';\n    this.menuEl.minWidth = `${triggerW + sectionPadPx * 2}px`;\n    this.menuEl.alignOffset = -sectionPadPx;\n    this.menuEl.anchor = this.triggerEl;\n  }\n\n  private open(opts: { focusVisible: boolean } = { focusVisible: false }) {\n    if (this.isInactive || this.disabled || this.formDisabled || !this.options.length) return;\n    this.openWithFocusVisible = opts.focusVisible;\n    this.syncMenuLayout();\n    this.syncMenuItems();\n    this.isOpen = true;\n  }\n\n  private close() {\n    this.isOpen = false;\n    this.openWithFocusVisible = false;\n  }\n\n  private toggle(opts: { focusVisible: boolean }) {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open(opts);\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (document.activeElement !== this.triggerEl) return;\n\n    if (!this.isOpen) {\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          this.open({ focusVisible: true });\n          break;\n      }\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      this.triggerEl?.focus();\n    }\n  }\n\n  private get selectedLabel(): string {\n    return this.options.find(o => o.value === this.value)?.label ?? '';\n  }\n\n  private get hasSelection(): boolean {\n    return this.options.some(o => o.value === this.value);\n  }\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const showPlaceholder = !this.hasSelection;\n    const hasValue = !showPlaceholder;\n    const label = showPlaceholder ? this.placeholder : this.selectedLabel;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const density = `ds-control--${this.size}`;\n    // Opening the menu is transient interaction, not selected product state.\n    const showSelectedFill = !inactive && this.activeFill && hasValue;\n\n    return (\n      <Host\n        class={{\n          'select-host': true,\n          'ds-control-inactive': inactive,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n      >\n        <button\n          ref={el => {\n            this.triggerEl = (el as HTMLButtonElement) ?? null;\n          }}\n          type=\"button\"\n          class={{\n            trigger: true,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--selected': showSelectedFill,\n            'trigger--bordered': this.hasBorder,\n            'trigger--placeholder': showPlaceholder,\n            'trigger--has-value': hasValue,\n            [density]: true,\n          }}\n          disabled={inactive}\n          role=\"combobox\"\n          aria-haspopup=\"menu\"\n          aria-expanded={String(this.isOpen)}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          onClick={() => this.toggle({ focusVisible: false })}\n        >\n          <ds-text\n            class=\"trigger__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant={textVariant}\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {label}\n          </ds-text>\n          <span class=\"trigger__chevron ds-interaction-fill__content\" aria-hidden=\"true\">\n            <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n          </span>\n        </button>\n        {/* bottom + start: left-aligned under the field; wider menus grow right. */}\n        <ds-menu\n          ref={el => {\n            this.menuEl = (el as HTMLDsMenuElement) ?? null;\n          }}\n          side=\"bottom\"\n          align=\"start\"\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["selectCss","ICON_SIZE","md","sm","xs","selectId","Select","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","sections","value","open","disabled","required","requiredMessage","placeholder","size","width","isInactive","isLoading","activeFill","hasBorder","allowClear","clearLabel","searchable","searchPlaceholder","noResultsText","loadingLabel","error","ariaLabel","activeIndex","searchTerm","formDisabled","position","x","y","positionReady","focusRingVisible","generatedId","listboxId","errorId","triggerEl","popupEl","searchEl","initialValue","typeahead","typeaheadTimer","outsideHandler","repositionHandler","clearSelection","event","preventDefault","stopPropagation","dsChange","emit","dsClear","enabled","enabledChoiceIndexes","visibleOptions","requestAnimationFrame","focus","handleTriggerKeyDown","includes","key","openPopup","length","metaKey","ctrlKey","altKey","handleTypeahead","handleListKeyDown","componentWillLoad","syncFormValue","componentDidLoad","onOpenChange","disconnectedCallback","unbindPopupListeners","clearTimeout","inactive","isDisabled","resolvedValue","hasSelection","internals","setFormValue","missing","setValidity","valueMissing","updatePosition","onLoadingChange","dsOpenChange","bindPopupListeners","scrollActiveOptionIntoView","onSearchTermChange","onActiveIndexChange","formDisabledCallback","formResetCallback","closePopup","formStateRestoreCallback","state","setFocus","allSections","resolveChoiceSections","allOptions","flattenChoiceSections","visibleSections","filterChoiceSections","selectedOption","find","option","Boolean","activeOptionId","undefined","el","querySelector","scrollIntoView","block","inline","target","contains","document","addEventListener","window","removeEventListener","sectionPadding","resolveCssLengthPx","TOKEN_DEFAULTS","space050","style","minWidth","offsetWidth","computeAnchoredPopupPosition","anchorRect","getBoundingClientRect","popupWidth","popupHeight","offsetHeight","side","align","sideOffsetPx","alignOffsetPx","viewportPadPx","viewportWidth","innerWidth","viewportHeight","innerHeight","focusVisible","edge","selectedIndex","findIndex","restoreFocus","selectOption","moveActive","direction","moveChoiceIndex","setActiveEdge","normalized","toLocaleLowerCase","repeatedCharacter","every","character","match","findChoiceTypeaheadMatch","resetMs","resolveCssTimeMs","animationDurationMedium1","setTimeout","renderOption","index","usesIcons","usesSubtext","selected","active","h","ChoiceOptionRow","id","leading","icon","class","name","color","onHover","onSelect","render","showPlaceholder","label","textVariant","CONTROL_TEXT_VARIANT","iconSize","usesOptionIcons","choiceListUsesIcons","usesOptionSubtext","choiceListUsesSubtext","showError","errorMessage","describedBy","ariaDescribedby","filter","join","popupStyle","left","top","transform","Math","round","zIndex","visibility","flatIndex","Host","controlWidthClass","background","ref","element","inputId","type","trigger","choiceBackgroundClassMap","role","String","ariaLabelledby","onClick","onKeyDown","as","variant","lineTruncation","ChoiceSearch","controls","activeDescendant","inputRef","onValueChange","body","map","section","divider","header","emphasis","ChoiceFooter","onClear","textId"],"sources":["src/wc/components/Select/Select.css?tag=ds-select&encapsulation=scoped","src/wc/components/Select/Select.tsx"],"sourcesContent":["@import '../../utils/choice-list.css';\n@import '../../utils/control-width.css';\n@import '../../utils/typography.css';\n\n:host(.select-host) {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  position: relative;\n  outline: none;\n  --ds-select-fg: var(--color-foreground-secondary);\n  --ds-select-fg-active: var(--color-foreground-primary);\n  --ds-select-prefix-fg: var(--ds-select-fg);\n  --ds-select-chevron-fg: var(--ds-select-fg);\n  --ds-select-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .trigger {\n  width: 100%;\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-select-fg);\n  cursor: pointer;\n  font-family: inherit;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n}\n\n.trigger--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-select-border);\n}\n\n.trigger--has-value .trigger__label {\n  color: var(--ds-select-fg-active);\n}\n\n.wrapper--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.trigger__prefix,\n.trigger__chevron {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.trigger__prefix {\n  color: var(--ds-select-prefix-fg);\n}\n\n.trigger__chevron {\n  color: var(--ds-select-chevron-fg);\n}\n\n.trigger__label {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  color: inherit;\n  transition: color var(--effect-motion-short-2);\n}\n\n.select-popup {\n  color: var(--color-foreground-secondary);\n}\n\n.select-search {\n  position: relative;\n  box-sizing: border-box;\n  padding: var(--dimension-space-050);\n}\n\n.select-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.select-search:focus-within::after {\n  height: var(--dimension-stroke-width-018);\n  background-color: var(--color-border-bold-brand);\n}\n\n.select-search__control {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border: 0;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.select-search__control:has(.select-search__clear) {\n  padding-right: 0;\n}\n\n.select-search__clear {\n  align-self: center;\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-050);\n}\n\n.select-search__control input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  border: 0;\n  outline: none;\n  background: transparent;\n  color: var(--color-foreground-primary);\n  font-family: inherit;\n}\n\n.select-search__control input::placeholder {\n  color: var(--color-foreground-secondary);\n}\n\n.select-search__control input:focus::placeholder {\n  color: var(--color-foreground-quaternary);\n}\n\n.select-search__control input[type='search']::-webkit-search-cancel-button,\n.select-search__control input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.error-text {\n  width: 100%;\n}\n\n:host(.select-host--background-medium) {\n  --ds-select-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-select-border: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.select-host--background-bold) {\n  --ds-select-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-select-border: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.select-host--background-strong) {\n  --ds-select-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-select-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-select-border: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.select-host--background-translucent) {\n  --ds-select-fg: var(--color-translucent-foreground-secondary);\n  --ds-select-fg-active: var(--color-translucent-foreground-primary);\n  --ds-select-border: var(--color-translucent-border-secondary);\n}\n\n:host(.select-host--background-inverted) {\n  --ds-select-fg: var(--color-inverted-foreground-secondary);\n  --ds-select-fg-active: var(--color-inverted-foreground-primary);\n  --ds-select-border: var(--color-inverted-border-secondary);\n}\n\n:host(.select-host--background-media) {\n  --ds-select-fg: var(--color-media-foreground-secondary);\n  --ds-select-fg-active: var(--color-media-foreground-primary);\n  --ds-select-border: var(--color-media-border-secondary);\n}\n\n:host(.select-host--background-always-dark) {\n  --ds-select-fg: var(--color-always-dark-foreground-secondary);\n  --ds-select-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-select-border: var(--color-always-dark-border-secondary);\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  resolveCssLengthPx,\n  resolveCssTimeMs,\n  TOKEN_DEFAULTS,\n  type ControlWidth,\n} from '../../utils';\nimport { computeAnchoredPopupPosition } from '../../utils/anchored-popup';\nimport { ChoiceFooter, ChoiceOptionRow, ChoiceSearch } from '../../utils/choice-list-parts';\nimport {\n  choiceBackgroundClassMap,\n  choiceListUsesIcons,\n  choiceListUsesSubtext,\n  enabledChoiceIndexes,\n  filterChoiceSections,\n  findChoiceTypeaheadMatch,\n  flattenChoiceSections,\n  moveChoiceIndex,\n  resolveChoiceSections,\n  type ChoiceBackground,\n  type ChoiceOption,\n  type ChoiceSection,\n} from '../../utils/choice-list';\n\nexport type SelectOption = ChoiceOption;\nexport type SelectSection = ChoiceSection;\nexport type SelectBackground = ChoiceBackground;\nexport type SelectSize = 'md' | 'sm' | 'xs';\nexport type SelectWidth = ControlWidth;\n\nconst ICON_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nlet selectId = 0;\n\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Flat choices. Assign arrays through the JavaScript property. */\n  @Prop() options: SelectOption[] = [];\n  /** Grouped choices; takes precedence over options. Assign through JavaScript. */\n  @Prop() sections: SelectSection[] = [];\n  /** Selected string value. Unknown values render the placeholder and are not submitted. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require one valid selected value. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when required is missing. */\n  @Prop() requiredMessage: string = 'This field is required.';\n  /** Trigger text shown when no valid value is selected. */\n  @Prop() placeholder: string = 'Select';\n  /** Control density. */\n  @Prop() size: SelectSize = 'md';\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: SelectWidth = 'hug';\n  /** Shared inactive treatment; removes interaction and form submission. */\n  @Prop() isInactive: boolean = false;\n  /** Replace the prefix with a loader and disable option interaction. */\n  @Prop() isLoading: boolean = false;\n  /** Show the selected interaction fill when a valid value exists. */\n  @Prop() activeFill: boolean = true;\n  /** Show the surface-aware inset border. */\n  @Prop() hasBorder: boolean = true;\n  /** Optional trigger prefix icon name. */\n  @Prop() icon: string | undefined;\n  /** Show the clear footer action when a value exists. */\n  @Prop() allowClear: boolean = true;\n  /** Localized clear action label. */\n  @Prop() clearLabel: string = 'Clear';\n  /** Show immediate local filtering over option labels, subtext, and section headings. */\n  @Prop() searchable: boolean = false;\n  /** Localized search-field placeholder and accessible name. */\n  @Prop() searchPlaceholder: string = 'Search';\n  /** Localized empty-filter result text. */\n  @Prop() noResultsText: string = 'No results found';\n  /** Accessible loading status label. */\n  @Prop() loadingLabel: string = 'Loading';\n  /** Actual parent surface context; omit on primary and secondary surfaces. */\n  @Prop() background: SelectBackground | undefined;\n  /** Show invalid visual state. */\n  @Prop() error: boolean = false;\n  /** Error text rendered below the trigger when error is true. */\n  @Prop() errorMessage: string | undefined;\n  /** ID applied to the internal combobox trigger for external labels. */\n  @Prop() inputId: string | undefined;\n  /** Direct accessible name when no external label is available. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** IDs of elements that label the combobox. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Additional IDs that describe the combobox. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  /** Emitted after user selection or clearing with the next scalar value. */\n  @Event() dsChange!: EventEmitter<string>;\n  /** Emitted after the footer clear action. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Emitted whenever popup visibility changes. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n\n  @State() private activeIndex = -1;\n  @State() private searchTerm = '';\n  @State() private formDisabled = false;\n  @State() private position = { x: 0, y: 0 };\n  @State() private positionReady = false;\n  @State() private focusRingVisible = false;\n\n  private readonly generatedId = `ds-select-${++selectId}`;\n  private readonly listboxId = `${this.generatedId}-listbox`;\n  private readonly errorId = `${this.generatedId}-error`;\n  private triggerEl: HTMLButtonElement | null = null;\n  private popupEl: HTMLDivElement | null = null;\n  private searchEl: HTMLInputElement | null = null;\n  private initialValue = '';\n  private typeahead = '';\n  private typeaheadTimer: ReturnType<typeof setTimeout> | null = null;\n  private outsideHandler: ((event: MouseEvent) => void) | null = null;\n  private repositionHandler: (() => void) | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.unbindPopupListeners();\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('options')\n  @Watch('sections')\n  syncFormValue() {\n    const inactive = this.isDisabled;\n    const resolvedValue = this.hasSelection ? this.value : '';\n    this.internals.setFormValue(inactive ? null : resolvedValue);\n    const missing = this.required && !inactive && !resolvedValue;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n    if (this.open) {\n      const enabled = enabledChoiceIndexes(this.visibleOptions);\n      if (!enabled.includes(this.activeIndex)) this.activeIndex = enabled[0] ?? -1;\n      requestAnimationFrame(() => this.updatePosition());\n    }\n  }\n\n  @Watch('isLoading')\n  onLoadingChange() {\n    if (this.open) requestAnimationFrame(() => this.updatePosition());\n  }\n\n  @Watch('open')\n  onOpenChange(open: boolean) {\n    this.dsOpenChange.emit(open);\n    if (open) {\n      this.bindPopupListeners();\n      this.positionReady = false;\n      requestAnimationFrame(() => {\n        this.updatePosition();\n        this.scrollActiveOptionIntoView();\n        if (this.searchable) this.searchEl?.focus();\n      });\n    } else {\n      this.unbindPopupListeners();\n      this.searchTerm = '';\n      this.positionReady = false;\n    }\n  }\n\n  @Watch('searchTerm')\n  onSearchTermChange() {\n    const enabled = enabledChoiceIndexes(this.visibleOptions);\n    this.activeIndex = enabled[0] ?? -1;\n    requestAnimationFrame(() => {\n      this.updatePosition();\n      this.scrollActiveOptionIntoView();\n    });\n  }\n\n  @Watch('activeIndex')\n  onActiveIndexChange() {\n    requestAnimationFrame(() => this.scrollActiveOptionIntoView());\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.closePopup();\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  @Method()\n  async setFocus() {\n    this.triggerEl?.focus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private get allSections(): SelectSection[] {\n    return resolveChoiceSections(this.options, this.sections);\n  }\n\n  private get allOptions(): SelectOption[] {\n    return flattenChoiceSections(this.allSections);\n  }\n\n  private get visibleSections(): SelectSection[] {\n    return this.searchable\n      ? filterChoiceSections(this.allSections, this.searchTerm)\n      : this.allSections;\n  }\n\n  private get visibleOptions(): SelectOption[] {\n    return flattenChoiceSections(this.visibleSections);\n  }\n\n  private get selectedOption(): SelectOption | undefined {\n    return this.allOptions.find(option => option.value === this.value);\n  }\n\n  private get hasSelection(): boolean {\n    return Boolean(this.selectedOption);\n  }\n\n  private get activeOptionId(): string | undefined {\n    return !this.isLoading && this.activeIndex >= 0\n      ? `${this.generatedId}-option-${this.activeIndex}`\n      : undefined;\n  }\n\n  private scrollActiveOptionIntoView() {\n    if (!this.open || !this.activeOptionId) return;\n    this.el\n      .querySelector<HTMLElement>(`#${this.activeOptionId}`)\n      ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n  }\n\n  private bindPopupListeners() {\n    this.unbindPopupListeners();\n    this.outsideHandler = event => {\n      const target = event.target as Node;\n      if (this.el.contains(target)) return;\n      this.closePopup();\n    };\n    this.repositionHandler = () => this.updatePosition();\n    document.addEventListener('mousedown', this.outsideHandler, true);\n    window.addEventListener('scroll', this.repositionHandler, true);\n    window.addEventListener('resize', this.repositionHandler);\n  }\n\n  private unbindPopupListeners() {\n    if (this.outsideHandler) {\n      document.removeEventListener('mousedown', this.outsideHandler, true);\n      this.outsideHandler = null;\n    }\n    if (this.repositionHandler) {\n      window.removeEventListener('scroll', this.repositionHandler, true);\n      window.removeEventListener('resize', this.repositionHandler);\n      this.repositionHandler = null;\n    }\n  }\n\n  private updatePosition() {\n    if (!this.open || !this.triggerEl || !this.popupEl) return;\n    const sectionPadding = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n    this.popupEl.style.minWidth = `${this.triggerEl.offsetWidth + sectionPadding * 2}px`;\n    this.position = computeAnchoredPopupPosition({\n      anchorRect: this.triggerEl.getBoundingClientRect(),\n      popupWidth: this.popupEl.offsetWidth,\n      popupHeight: this.popupEl.offsetHeight,\n      side: 'bottom',\n      align: 'start',\n      sideOffsetPx: sectionPadding,\n      alignOffsetPx: -sectionPadding,\n      viewportPadPx: sectionPadding,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n    });\n    this.positionReady = true;\n  }\n\n  private openPopup(focusVisible: boolean, edge?: 'first' | 'last') {\n    if (this.isDisabled || (!this.allOptions.length && !this.isLoading)) return;\n    const enabled = enabledChoiceIndexes(this.visibleOptions);\n    const selectedIndex = this.visibleOptions.findIndex(\n      option => option.value === this.value && !option.isInactive,\n    );\n    this.activeIndex =\n      edge === 'last'\n        ? (enabled[enabled.length - 1] ?? -1)\n        : selectedIndex >= 0\n          ? selectedIndex\n          : (enabled[0] ?? -1);\n    this.focusRingVisible = focusVisible;\n    this.open = true;\n  }\n\n  private closePopup(restoreFocus = false) {\n    if (!this.open) return;\n    this.open = false;\n    if (restoreFocus) requestAnimationFrame(() => this.triggerEl?.focus());\n  }\n\n  private selectOption(option: SelectOption) {\n    if (option.isInactive || this.isLoading) return;\n    this.value = option.value;\n    this.dsChange.emit(this.value);\n    this.closePopup(true);\n  }\n\n  private clearSelection = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = '';\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    const enabled = enabledChoiceIndexes(this.visibleOptions);\n    this.activeIndex = enabled[0] ?? -1;\n    requestAnimationFrame(() => (this.searchable ? this.searchEl?.focus() : this.triggerEl?.focus()));\n  };\n\n  private moveActive(direction: 1 | -1) {\n    this.activeIndex = moveChoiceIndex(this.visibleOptions, this.activeIndex, direction);\n  }\n\n  private setActiveEdge(edge: 'first' | 'last') {\n    const enabled = enabledChoiceIndexes(this.visibleOptions);\n    this.activeIndex =\n      edge === 'first' ? (enabled[0] ?? -1) : (enabled[enabled.length - 1] ?? -1);\n  }\n\n  private handleTypeahead(key: string) {\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n    this.focusRingVisible = true;\n    const normalized = key.toLocaleLowerCase();\n    const repeatedCharacter =\n      this.typeahead.length > 0 &&\n      [...this.typeahead].every(character => character === normalized);\n    this.typeahead = repeatedCharacter ? normalized : `${this.typeahead}${normalized}`;\n    const match = findChoiceTypeaheadMatch(this.visibleOptions, this.typeahead, this.activeIndex);\n    if (match >= 0) this.activeIndex = match;\n    const resetMs = resolveCssTimeMs(\n      TOKEN_DEFAULTS.animationDurationMedium1,\n      TOKEN_DEFAULTS.animationDurationMedium1,\n    );\n    this.typeaheadTimer = setTimeout(() => {\n      this.typeahead = '';\n      this.typeaheadTimer = null;\n    }, resetMs);\n  }\n\n  private handleListKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.focusRingVisible = true;\n        this.moveActive(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusRingVisible = true;\n        this.moveActive(-1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.focusRingVisible = true;\n        this.setActiveEdge('first');\n        break;\n      case 'End':\n        event.preventDefault();\n        this.focusRingVisible = true;\n        this.setActiveEdge('last');\n        break;\n      case 'Enter':\n      case ' ': {\n        if (event.key === ' ' && this.searchable && event.target === this.searchEl) break;\n        event.preventDefault();\n        const option = this.visibleOptions[this.activeIndex];\n        if (option) this.selectOption(option);\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        this.closePopup(true);\n        break;\n      case 'Tab':\n        this.closePopup();\n        break;\n      default:\n        if (!this.searchable && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n          this.handleTypeahead(event.key);\n        }\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    if (!this.open) {\n      if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {\n        event.preventDefault();\n        this.openPopup(true, event.key === 'ArrowUp' ? 'last' : 'first');\n      } else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n        event.preventDefault();\n        this.openPopup(true);\n        if (this.searchable) {\n          this.searchTerm = event.key;\n        } else {\n          this.handleTypeahead(event.key);\n        }\n      }\n      return;\n    }\n    this.handleListKeyDown(event);\n  };\n\n  private renderOption(\n    option: SelectOption,\n    index: number,\n    usesIcons: boolean,\n    usesSubtext: boolean,\n  ) {\n    const selected = option.value === this.value;\n    const active = index === this.activeIndex;\n    return (\n      <ChoiceOptionRow\n        id={`${this.generatedId}-option-${index}`}\n        option={option}\n        selected={selected}\n        active={active}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={usesSubtext}\n        leading={usesIcons && option.icon ? (\n          <span class=\"ds-choice-item__icon ds-interaction-fill__content\" aria-hidden=\"true\">\n            <ds-icon name={option.icon} size=\"md\" color=\"inherit\" />\n          </span>\n        ) : undefined}\n        onHover={() => {\n            this.focusRingVisible = false;\n            this.activeIndex = index;\n        }}\n        onSelect={() => this.selectOption(option)}\n      />\n    );\n  }\n\n  render() {\n    const inactive = this.isDisabled;\n    const showPlaceholder = !this.hasSelection;\n    const label = showPlaceholder ? this.placeholder : this.selectedOption?.label;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const usesOptionIcons = choiceListUsesIcons(this.allOptions);\n    const usesOptionSubtext = choiceListUsesSubtext(this.allOptions);\n    const showError = this.error && Boolean(this.errorMessage);\n    const describedBy = [this.ariaDescribedby, showError ? this.errorId : undefined]\n      .filter(Boolean)\n      .join(' ') || undefined;\n    const popupStyle = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,\n      zIndex: 'var(--dimension-z-index-floating)',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n    let flatIndex = 0;\n\n    return (\n      <Host\n        class={{\n          'select-host': true,\n          'ds-control-inactive': inactive,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n          [`select-host--background-${this.background}`]: !!this.background,\n        }}\n      >\n        <button\n          ref={element => {\n            this.triggerEl = (element as HTMLButtonElement) ?? null;\n          }}\n          id={this.inputId ?? this.generatedId}\n          type=\"button\"\n          class={{\n            trigger: true,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--selected':\n              !inactive && this.activeFill && this.hasSelection,\n            'trigger--bordered': this.hasBorder || this.error,\n            'trigger--placeholder': showPlaceholder,\n            'trigger--has-value': this.hasSelection,\n            'wrapper--error': this.error,\n            [`ds-control--${this.size}`]: true,\n            ...choiceBackgroundClassMap(this.background),\n          }}\n          disabled={inactive}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={String(this.open)}\n          aria-controls={this.open ? this.listboxId : undefined}\n          aria-activedescendant={this.open && !this.searchable ? this.activeOptionId : undefined}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-describedby={describedBy}\n          aria-invalid={this.error || undefined}\n          aria-required={this.required || undefined}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          onClick={() => (this.open ? this.closePopup() : this.openPopup(false))}\n          onKeyDown={this.handleTriggerKeyDown}\n        >\n          {(this.icon || this.isLoading) && (\n            <span class=\"trigger__prefix ds-interaction-fill__content\" aria-hidden=\"true\">\n              {this.isLoading ? (\n                <ds-loader size={iconSize} color=\"inherit\" />\n              ) : (\n                <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              )}\n            </span>\n          )}\n          <ds-text\n            class=\"trigger__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant={textVariant}\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {label}\n          </ds-text>\n          <span class=\"trigger__chevron ds-interaction-fill__content\" aria-hidden=\"true\">\n            <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n          </span>\n        </button>\n\n        {this.open && (\n          <div\n            ref={element => {\n              this.popupEl = (element as HTMLDivElement) ?? null;\n            }}\n            class=\"select-popup ds-choice-popup\"\n            style={popupStyle}\n          >\n            {this.searchable && (\n              <ChoiceSearch\n                value={this.searchTerm}\n                placeholder={this.searchPlaceholder}\n                controls={this.listboxId}\n                activeDescendant={this.activeOptionId}\n                inputRef={element => {\n                  this.searchEl = element;\n                }}\n                clearLabel={this.clearLabel}\n                onValueChange={value => {\n                  this.searchTerm = value;\n                }}\n                onKeyDown={event => this.handleListKeyDown(event)}\n              />\n            )}\n            <div\n              id={this.listboxId}\n              class=\"ds-choice-list\"\n              role=\"listbox\"\n              aria-label={this.ariaLabel ?? this.placeholder}\n              aria-busy={this.isLoading ? 'true' : undefined}\n            >\n              {this.isLoading ? (\n                <div class=\"ds-choice-loading\">\n                  <ds-loader size=\"md\" color=\"inherit\" label={this.loadingLabel} />\n                </div>\n              ) : this.visibleOptions.length === 0 ? (\n                <div class=\"ds-choice-empty\">\n                  <ds-empty-state body={this.noResultsText} />\n                </div>\n              ) : (\n                this.visibleSections.map(section => (\n                  <div\n                    class={{\n                      'ds-choice-section': true,\n                      'ds-choice-section--divided': !!section.divider,\n                    }}\n                    role={section.header ? 'group' : undefined}\n                    aria-label={section.header}\n                  >\n                    {section.header && (\n                      <ds-text\n                        class=\"ds-choice-section__header ds-control--md\"\n                        as=\"span\"\n                        variant=\"text-body-small\"\n                        emphasis\n                        color=\"primary\"\n                        aria-hidden=\"true\"\n                      >\n                        {section.header}\n                      </ds-text>\n                    )}\n                    {section.options.map(option => this.renderOption(\n                      option,\n                      flatIndex++,\n                      usesOptionIcons,\n                      usesOptionSubtext,\n                    ))}\n                  </div>\n                ))\n              )}\n            </div>\n            {this.allowClear && this.hasSelection && !this.isLoading && (\n              <ChoiceFooter clearLabel={this.clearLabel} onClear={this.clearSelection} />\n            )}\n          </div>\n        )}\n\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

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

package/dist/components/ds-skeleton.js

@@ -1,2 +1,2 @@
-import{S as s,d as o}from"./p-DsiueSMI.js";const t=s;const p=o;export{t as DsSkeleton,p as defineCustomElement};
+import{S as o,d as s}from"./p-auwU64d8.js";const t=o;const a=s;export{t as DsSkeleton,a as defineCustomElement};
 //# sourceMappingURL=ds-skeleton.js.map

package/dist/components/ds-slider.js

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

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

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

package/dist/components/ds-switch.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","ariaLabel","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","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabelledby","map","tab","index","isTabDivider","isSelected","variant","showIcon","showLabel","emphasizeLabel","type","label","panelId","disabled","tabIndex","onClick","tab__content","dot","name","icon","size","color","as","emphasis","style"],"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  --_tab-group-surface-border: var(--color-border-tertiary);\n  --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-medium) {\n  --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.tab-group-host--on-bold) {\n  --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.tab-group-host--on-strong) {\n  --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.tab-group-host--on-translucent) {\n  --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n  --_tab-group-divider: var(--color-translucent-border-secondary);\n}\n\n:host(.tab-group-host--on-inverted) {\n  --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n  --_tab-group-divider: var(--color-inverted-border-secondary);\n}\n\n:host(.tab-group-host--on-media) {\n  --_tab-group-surface-border: var(--color-media-border-tertiary);\n  --_tab-group-divider: var(--color-media-border-secondary);\n}\n\n:host(.tab-group-host--on-always-dark) {\n  --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n  --_tab-group-divider: var(--color-always-dark-border-secondary);\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(--_tab-group-surface-border);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n  background-color: transparent;\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  /* 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(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n  background-color: var(--ds-interaction-active);\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__content {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n}\n\n.tab__content--label,\n.tab__content--icon-label {\n  padding: 0 var(--dimension-space-025);\n}\n\n.tab__content--dot {\n  padding-right: var(--dimension-space-050);\n}\n\n.tab__content--label.tab__content--dot,\n.tab__content--icon-label.tab__content--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n.tab__label {\n  white-space: nowrap;\n}\n\n.tab__icon {\n  flex-shrink: 0;\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  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected { color: var(--color-foreground-on-medium-background-primary); }\n\n.on-bold {\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  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-strong-background-primary); }\n\n.on-translucent { color: var(--color-translucent-foreground-secondary); }\n\n.on-translucent.tab--selected { color: var(--color-translucent-foreground-primary); }\n\n.on-inverted { color: var(--color-inverted-foreground-secondary); }\n\n.on-inverted.tab--selected { color: var(--color-inverted-foreground-primary); }\n\n.on-media { color: var(--color-media-foreground-secondary); }\n\n.on-media.tab--selected { color: var(--color-media-foreground-primary); }\n\n.on-always-dark {\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(--_tab-group-divider);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabGroupItem,\n  type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | '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: TabGroupItem[] = [];\n  @Prop() background: TabBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get 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\n    let nextIdx: number | null = null;\n\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\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) 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\n    return (\n      <Host\n        class={{\n          'tab-group-host': true,\n          'tab-group-host--surface': !!bgClass,\n          [`tab-group-host--${bgClass}`]: !!bgClass,\n        }}\n      >\n        <div\n          role=\"tablist\"\n          class=\"tab-list\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class=\"tab-divider\"\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            const variant = tab.variant ?? 'label';\n            const showIcon = variant === 'icon' || variant === 'icon-label';\n            const showLabel = variant === 'label' || variant === 'icon-label';\n            const emphasizeLabel = isSelected && !bgClass;\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-faint': bgClass === 'on-faint',\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-translucent': bgClass === 'on-translucent',\n                  'ds-interaction-fill--on-inverted': bgClass === 'on-inverted',\n                  'ds-interaction-fill--on-media': bgClass === 'on-media',\n                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-label={variant === 'icon' ? tab.label : undefined}\n                aria-selected={isSelected}\n                aria-disabled={tab.isInactive ? 'true' : 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__content: true,\n                  [`tab__content--${variant}`]: true,\n                  'tab__content--dot': !!tab.dot,\n                }}>\n                  {showIcon && (\n                    <ds-icon\n                      class=\"tab__icon\"\n                      name={tab.icon}\n                      size=\"sm\"\n                      color=\"inherit\"\n                    />\n                  )}\n                  {showLabel && (\n                    <ds-text\n                      class=\"tab__label\"\n                      as=\"span\"\n                      variant=\"text-body-small\"\n                      emphasis={emphasizeLabel}\n                      color=\"inherit\"\n                    >\n                      {tab.label}\n                    </ds-text>\n                  )}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      style={{ '--_badge-ring-width': '0' }}\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","ariaLabel","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","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabelledby","map","tab","index","isTabDivider","isSelected","variant","showIcon","showLabel","emphasizeLabel","type","label","panelId","disabled","tabIndex","onClick","tab__content","dot","name","icon","size","color","as","emphasis","hasRing"],"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  --_tab-group-surface-border: var(--color-border-tertiary);\n  --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-medium) {\n  --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.tab-group-host--on-bold) {\n  --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.tab-group-host--on-strong) {\n  --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.tab-group-host--on-translucent) {\n  --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n  --_tab-group-divider: var(--color-translucent-border-secondary);\n}\n\n:host(.tab-group-host--on-inverted) {\n  --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n  --_tab-group-divider: var(--color-inverted-border-secondary);\n}\n\n:host(.tab-group-host--on-media) {\n  --_tab-group-surface-border: var(--color-media-border-tertiary);\n  --_tab-group-divider: var(--color-media-border-secondary);\n}\n\n:host(.tab-group-host--on-always-dark) {\n  --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n  --_tab-group-divider: var(--color-always-dark-border-secondary);\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(--_tab-group-surface-border);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n  background-color: transparent;\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  /* 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(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n  background-color: var(--ds-interaction-active);\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__content {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n}\n\n.tab__content--label,\n.tab__content--icon-label {\n  padding: 0 var(--dimension-space-025);\n}\n\n.tab__content--dot {\n  padding-right: var(--dimension-space-050);\n}\n\n.tab__content--label.tab__content--dot,\n.tab__content--icon-label.tab__content--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n.tab__label {\n  white-space: nowrap;\n}\n\n.tab__icon {\n  flex-shrink: 0;\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  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected { color: var(--color-foreground-on-medium-background-primary); }\n\n.on-bold {\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  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-strong-background-primary); }\n\n.on-translucent { color: var(--color-translucent-foreground-secondary); }\n\n.on-translucent.tab--selected { color: var(--color-translucent-foreground-primary); }\n\n.on-inverted { color: var(--color-inverted-foreground-secondary); }\n\n.on-inverted.tab--selected { color: var(--color-inverted-foreground-primary); }\n\n.on-media { color: var(--color-media-foreground-secondary); }\n\n.on-media.tab--selected { color: var(--color-media-foreground-primary); }\n\n.on-always-dark {\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(--_tab-group-divider);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabGroupItem,\n  type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | '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: TabGroupItem[] = [];\n  @Prop() background: TabBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get 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\n    let nextIdx: number | null = null;\n\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\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) 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\n    return (\n      <Host\n        class={{\n          'tab-group-host': true,\n          'tab-group-host--surface': !!bgClass,\n          [`tab-group-host--${bgClass}`]: !!bgClass,\n        }}\n      >\n        <div\n          role=\"tablist\"\n          class=\"tab-list\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class=\"tab-divider\"\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            const variant = tab.variant ?? 'label';\n            const showIcon = variant === 'icon' || variant === 'icon-label';\n            const showLabel = variant === 'label' || variant === 'icon-label';\n            const emphasizeLabel = isSelected && !bgClass;\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-faint': bgClass === 'on-faint',\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-translucent': bgClass === 'on-translucent',\n                  'ds-interaction-fill--on-inverted': bgClass === 'on-inverted',\n                  'ds-interaction-fill--on-media': bgClass === 'on-media',\n                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-label={variant === 'icon' ? tab.label : undefined}\n                aria-selected={isSelected}\n                aria-disabled={tab.isInactive ? 'true' : 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__content: true,\n                  [`tab__content--${variant}`]: true,\n                  'tab__content--dot': !!tab.dot,\n                }}>\n                  {showIcon && (\n                    <ds-icon\n                      class=\"tab__icon\"\n                      name={tab.icon}\n                      size=\"sm\"\n                      color=\"inherit\"\n                    />\n                  )}\n                  {showLabel && (\n                    <ds-text\n                      class=\"tab__label\"\n                      as=\"span\"\n                      variant=\"text-body-small\"\n                      emphasis={emphasizeLabel}\n                      color=\"inherit\"\n                    >\n                      {tab.label}\n                    </ds-text>\n                  )}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      hasRing={false}\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 a,a as r,t as i}from"./index.js";import{d as o}from"./p-DsiueSMI.js";import{d as n}from"./p-Dt0XnMxc.js";const c=()=>`.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-translucent-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}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.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 l(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function d(e,t,s,a){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 a.compare(String(e),String(t))*r}const b=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.loadingLabel="Loading";this.previousPageLabel="Previous";this.nextPageLabel="Next";this.pageStatusLabel="Page {page} of {total}";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)=>d(l(t,s),l(t,a),e.direction,new Intl.Collator(this.locale))))}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 d=this.pageIndex!==undefined&&s>1;return a(r,{key:"c310f54c66a14edbb2bacbec881537f0bca881cc"},a("div",{key:"411c4e95e40ed83e0e271e5058f4207f17b05f97",class:"table-wrapper","aria-busy":i||undefined},a("div",{key:"2659719451dc6e77c24af54074089dccf87aefc0",class:"table-scroll"},a("div",{key:"54c93934dc9e4d92ec8ad2e495598fb13ddcd177",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},a("div",{key:"d777ec8aa91ab2d3dc39b37640267424c6f2d8be",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?this.loadingLabel:undefined},e.map((e=>a("div",{key:e.id,class:"cell",role:"cell"},a("ds-skeleton",{variant:"text",width:"60%"}))))))),o&&a("ds-text",{key:"149ff65328d77f77ec111b83c7f65c913f594124",class:"empty-row",as:"p",variant:"text-body-medium",color:"secondary",style:{gridColumn:"1 / -1"}},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("ds-text",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},as:"span",variant:"text-body-medium",lineTruncation:1,role:"cell"},String(l(e,t)??"")))))})))),d&&a("div",{key:"44386a3285f1ebcd92becce96b482696402db342",class:"table-pagination"},a("button",{key:"468f85961a0d251ce82bbc460ff6e1aa24ff5314",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:"2b97fb8c5abfd6d426920821612691b0f86e6ee3",as:"span",variant:"text-body-small"},this.previousPageLabel)),a("ds-text",{key:"04113a4e0d73397e5b9390220fcb5055ac4a3ac1",as:"span",variant:"text-body-small",color:"secondary"},this.pageStatusLabel.replace("{page}",String(this.pageIndex+1)).replace("{total}",String(s))),a("button",{key:"cd37a5872f6ecf1339d902063e2ffcc9b1670812",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:"4fc7cf5ef48553007348f8ae5237ca00078c9261",as:"span",variant:"text-body-small"},this.nextPageLabel)))))}static get style(){return c()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],loadingLabel:[1,"loading-label"],previousPageLabel:[1,"previous-page-label"],nextPageLabel:[1,"next-page-label"],pageStatusLabel:[1,"page-status-label"],locale:[1],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-table","ds-skeleton","ds-text"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(i(e))){customElements.define(i(e),b)}break;case"ds-skeleton":if(!customElements.get(i(e))){o()}break;case"ds-text":if(!customElements.get(i(e))){n()}break}}))}u();const h=b;const f=u;export{h as DsTable,f 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-auwU64d8.js";import{d as n}from"./p-CwaC4wLu.js";const d=()=>`.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-translucent-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}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.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 l(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function c(e,t,s,a){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 a.compare(String(e),String(t))*r}const b=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.loadingLabel="Loading";this.previousPageLabel="Previous";this.nextPageLabel="Next";this.pageStatusLabel="Page {page} of {total}";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(l(t,s),l(t,a),e.direction,new Intl.Collator(this.locale))))}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 d=this.activeSort;const c=this.pageIndex!==undefined&&s>1;return a(r,{key:"0e2b681e3ddb682632a53b5a256885cbac0427db"},a("div",{key:"b16704e700efdc00b73771c4eb6866acd77dd62d",class:"table-wrapper","aria-busy":i||undefined},a("div",{key:"a7096b8fbe7f6072c6802199d69debfe21b2e298",class:"table-scroll"},a("div",{key:"cba5f9db7dbc9ad0b34f77ecb8a015d17700ff91",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},a("div",{key:"0791ff79b56f0ed7f6df1687bb250f85b27afecb",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 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"},d.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?this.loadingLabel:undefined},e.map((e=>a("div",{key:e.id,class:"cell",role:"cell"},a("ds-skeleton",{variant:"text",width:"60%"}))))))),o&&a("ds-text",{key:"f38382ee89f568fc33af47688ac17c5fe3653aa0",class:"empty-row",as:"p",variant:"text-body-medium",color:"secondary",style:{gridColumn:"1 / -1"}},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("ds-text",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},as:"span",variant:"text-body-medium",lineTruncation:1,role:"cell"},String(l(e,t)??"")))))})))),c&&a("div",{key:"480ccad189be5f751e054cbc8f8c415a727489d8",class:"table-pagination"},a("button",{key:"80882dd86fc94e21ee3cbdb698a19483e4f36025",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:"ccb182f2c86b441d672110c28765928c5e7472dc",as:"span",variant:"text-body-small"},this.previousPageLabel)),a("ds-text",{key:"390300b029598b63833941e2ecd9fe332f76abed",as:"span",variant:"text-body-small",color:"secondary"},this.pageStatusLabel.replace("{page}",String(this.pageIndex+1)).replace("{total}",String(s))),a("button",{key:"e0f822d900b4f3de03b36a56ee9b15aabff26096",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:"62c1c25c9a0d9bf082ae19c9c271a03cabe6f800",as:"span",variant:"text-body-small"},this.nextPageLabel)))))}static get style(){return d()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],loadingLabel:[1,"loading-label"],previousPageLabel:[1,"previous-page-label"],nextPageLabel:[1,"next-page-label"],pageStatusLabel:[1,"page-status-label"],locale:[1],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-table","ds-skeleton","ds-text"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(i(e))){customElements.define(i(e),b)}break;case"ds-skeleton":if(!customElements.get(i(e))){o()}break;case"ds-text":if(!customElements.get(i(e))){n()}break}}))}u();const h=b;const f=u;export{h as DsTable,f as defineCustomElement};
 //# sourceMappingURL=ds-table.js.map

package/dist/components/ds-tag.js

@@ -1,2 +1,2 @@
-import{p as o,H as r,c as t,h as n,a as i,t as a}from"./index.js";import{d as s}from"./p-DoZU8RH0.js";import{d as c}from"./p-Dt0XnMxc.js";import{C as e}from"./p-Cx-ywr1e.js";const d=()=>`.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:0;--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-brand);--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-secondary)}.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-faint.sc-ds-tag-h,.ds-interaction-fill--on-faint.sc-ds-tag{--ds-interaction-active:var(--color-interaction-active)}.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-translucent.sc-ds-tag-h,.ds-interaction-fill--on-translucent.sc-ds-tag{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-tag-h,.ds-interaction-fill--on-inverted.sc-ds-tag{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-tag-h,.ds-interaction-fill--on-media.sc-ds-tag{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-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-h:focus-visible,.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-h,.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-h:focus-visible,.ds-focus-ring-inset.sc-ds-tag:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tag-h:focus-visible::after,.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-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag-h::after,.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))}.ds-control-inactive.sc-ds-tag-h,.ds-control-inactive.sc-ds-tag{opacity:0.25;pointer-events:none;cursor:not-allowed}.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__label.sc-ds-tag{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.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-on-strong-background-primary)}.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-on-medium-background-primary)}.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{padding:0;gap:0}.tag__button.sc-ds-tag{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;max-width:100%;height:100%;padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);border-radius:inherit;color:inherit;cursor:pointer}.tag__button.sc-ds-tag:disabled{cursor:not-allowed}.tag__prefix-icon.sc-ds-tag,.tag__suffix-icon.sc-ds-tag{position:relative;z-index:2;display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const g=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=t(this,"dsClick");this.icon="";this.intent="neutral";this.contrast="faint";this.size="md";this.rounded=false;this.interactive=false;this.expanded=false;this.isInactive=false;this.handleClick=o=>{if(!this.interactive||this.isInactive)return;this.dsClick.emit(o)}}render(){const o=e[this.size];const r=l[this.size];const t=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const a={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,"tag--interactive":this.interactive,"ds-control-inactive":this.interactive&&this.isInactive};const s=[this.icon&&n("ds-icon",{class:"tag__prefix-icon",name:this.icon,size:r,color:"inherit"}),n("ds-text",{class:"tag__label",as:"span",variant:o,color:"inherit"},this.label)];if(!this.interactive){return n(i,{class:a,style:t},s)}return n(i,{class:a,style:t},n("button",{type:"button",class:"tag__button ds-interaction-fill ds-focus-ring-inset","aria-haspopup":"menu","aria-expanded":this.expanded?"true":"false","aria-controls":this.ariaControls,disabled:this.isInactive||undefined,onClick:this.handleClick},s,n("ds-icon",{class:"tag__suffix-icon",name:"ChevronUpDown",size:r,color:"inherit"})))}static get style(){return d()}},[2,"ds-tag",{label:[1],icon:[1],intent:[1],contrast:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"],interactive:[4],expanded:[4],ariaControls:[1,"aria-controls"],isInactive:[4,"is-inactive"]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-tag","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(a(o))){customElements.define(a(o),g)}break;case"ds-icon":if(!customElements.get(a(o))){s()}break;case"ds-text":if(!customElements.get(a(o))){c()}break}}))}u();const v=g;const f=u;export{v as DsTag,f as defineCustomElement};
+import{p as o,H as r,c as t,h as n,a as i,t as a}from"./index.js";import{d as s}from"./p-BMbadvZo.js";import{d as c}from"./p-CwaC4wLu.js";import{C as e}from"./p-Cx-ywr1e.js";const d=()=>`.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:0;--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-brand);--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-secondary)}.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-faint.sc-ds-tag-h,.ds-interaction-fill--on-faint.sc-ds-tag{--ds-interaction-active:var(--color-interaction-active)}.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-translucent.sc-ds-tag-h,.ds-interaction-fill--on-translucent.sc-ds-tag{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-tag-h,.ds-interaction-fill--on-inverted.sc-ds-tag{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-tag-h,.ds-interaction-fill--on-media.sc-ds-tag{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-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-h:focus-visible,.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-h,.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-h:focus-visible,.ds-focus-ring-inset.sc-ds-tag:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tag-h:focus-visible::after,.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-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag-h::after,.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))}.ds-control-inactive.sc-ds-tag-h,.ds-control-inactive.sc-ds-tag{opacity:0.25;pointer-events:none;cursor:not-allowed}.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__label.sc-ds-tag{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.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-on-strong-background-primary)}.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-on-medium-background-primary)}.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{padding:0;gap:0}.tag__button.sc-ds-tag{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;max-width:100%;height:100%;padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);border-radius:inherit;color:inherit;cursor:pointer}.tag__button.sc-ds-tag:disabled{cursor:not-allowed}.tag__prefix-icon.sc-ds-tag,.tag__suffix-icon.sc-ds-tag{position:relative;z-index:2;display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const g=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=t(this,"dsClick");this.icon="";this.intent="neutral";this.contrast="faint";this.size="md";this.rounded=false;this.interactive=false;this.expanded=false;this.isInactive=false;this.handleClick=o=>{if(!this.interactive||this.isInactive)return;this.dsClick.emit(o)}}render(){const o=e[this.size];const r=l[this.size];const t=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const a={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,"tag--interactive":this.interactive,"ds-control-inactive":this.interactive&&this.isInactive};const s=[this.icon&&n("ds-icon",{class:"tag__prefix-icon",name:this.icon,size:r,color:"inherit"}),n("ds-text",{class:"tag__label",as:"span",variant:o,color:"inherit"},this.label)];if(!this.interactive){return n(i,{class:a,style:t},s)}return n(i,{class:a,style:t},n("button",{type:"button",class:"tag__button ds-interaction-fill ds-focus-ring-inset","aria-haspopup":"menu","aria-expanded":this.expanded?"true":"false","aria-controls":this.ariaControls,disabled:this.isInactive||undefined,onClick:this.handleClick},s,n("ds-icon",{class:"tag__suffix-icon",name:"ChevronUpDown",size:r,color:"inherit"})))}static get style(){return d()}},[2,"ds-tag",{label:[1],icon:[1],intent:[1],contrast:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"],interactive:[4],expanded:[4],ariaControls:[1,"aria-controls"],isInactive:[4,"is-inactive"]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-tag","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(a(o))){customElements.define(a(o),g)}break;case"ds-icon":if(!customElements.get(a(o))){s()}break;case"ds-text":if(!customElements.get(a(o))){c()}break}}))}u();const v=g;const f=u;export{v as DsTag,f as defineCustomElement};
 //# sourceMappingURL=ds-tag.js.map

package/dist/components/ds-text.js

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