@ds-mo/ui 4.1.0 → 4.1.1

package/dist/components/{p-DO7y9eZQ.js.map → p-B2J0Kelv.js.map}

@@ -1 +1 @@
-{"version":3,"names":["buttonUnfilledCss","ICON_SIZE","md","sm","xs","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","isActive","activeFill","hasBorder","dot","isInactive","type","ariaLabel","buttonEl","handleClick","event","dsClick","emit","dsChange","setFocus","focus","effectiveContrast","backgroundContrast","showIcon","showLabel","showDot","dotRing","accessibleName","undefined","render","bg","background","contrast","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","focusTabIndex","controls","expanded","String","haspopup","pressed","onClick","name","color","as","emphasis"],"sources":["src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-unfilled-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-unfilled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-unfilled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-unfilled {\n  width: 100%;\n}\n\n.button-unfilled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-button-unfilled-fg);\n  cursor: pointer;\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` / `--on-*`).\n     Active always promotes foreground to primary (toggle mode). */\n}\n\n.button-unfilled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-unfilled--active {\n  color: var(--ds-button-unfilled-fg-active);\n}\n\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Fallback if interaction-fill is omitted (should be rare — prefer keep the util class). */\n.button-unfilled--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/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--contrast-medium {\n  --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--contrast-bold {\n  --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--contrast-strong {\n  --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--on-always-dark {\n  --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n  --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n.button-unfilled--on-navigation {\n  --ds-button-unfilled-fg: var(--color-navigation-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-navigation-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-navigation-background);\n  --ds-button-unfilled-border: var(--color-navigation-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n  --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n\n.button-unfilled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-unfilled__label {\n  position: relative;\n  z-index: 2;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.button-unfilled__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';\n\nexport type ButtonUnfilledBackground = 'always-dark' | 'navigation';\n\nexport type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonUnfilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonUnfilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonUnfilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-unfilled',\n  styleUrl: 'ButtonUnfilled.css',\n  scoped: true,\n})\nexport class ButtonUnfilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonUnfilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonUnfilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonUnfilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Active/selected visual state. Always promotes foreground to primary. */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * When active, render the selected interaction fill.\n   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n   * `false` so selection is foreground-only (primary color, no fill).\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Foreground and interaction tokens when the button sits on a contrasting parent\n   * background (default, medium, bold, or strong).\n   */\n  @Prop({ attribute: 'on-background-contrast' })\n  backgroundContrast?: ButtonUnfilledOnBackgroundContrast;\n\n  /** Parent surface context for navigation and always-dark chrome. */\n  @Prop() background: ButtonUnfilledBackground | undefined;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: string | undefined;\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive) return;\n    this.dsClick.emit(event);\n    this.dsChange.emit(!this.isActive);\n  };\n\n  private effectiveContrast(): ButtonUnfilledOnBackgroundContrast {\n    return this.backgroundContrast ?? 'default';\n  }\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if (this.isActive && this.activeFill) {\n      return 'var(--ds-interaction-active)';\n    }\n    return 'var(--ds-button-unfilled-dot-ring)';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.showLabel && this.label) return undefined;\n    if (this.variant === 'icon') return this.icon || 'action';\n    return this.label || 'action';\n  }\n\n  render() {\n    const bg = this.background;\n    const contrast = this.effectiveContrast();\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected': this.isActive && this.activeFill && !this.isInactive,\n      'ds-interaction-fill--on-medium': contrast === 'medium',\n      'ds-interaction-fill--on-bold': contrast === 'bold',\n      'ds-interaction-fill--on-strong': contrast === 'strong',\n      'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n      'ds-interaction-fill--on-navigation': bg === 'navigation',\n      'button-unfilled--active': this.isActive,\n      'button-unfilled--bordered': this.hasBorder,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-unfilled--icon': this.variant === 'icon',\n      'button-unfilled--label': this.variant === 'label',\n      'button-unfilled--icon-label': this.variant === 'icon-label',\n      'button-unfilled--contrast-medium': contrast === 'medium',\n      'button-unfilled--contrast-bold': contrast === 'bold',\n      'button-unfilled--contrast-strong': contrast === 'strong',\n      'button-unfilled--on-always-dark': bg === 'always-dark',\n      'button-unfilled--on-navigation': bg === 'navigation',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-unfilled-host': true,\n          'button-unfilled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.accessibleName}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.haspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-unfilled__icon-wrap ds-interaction-fill__content\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              {this.showDot && (\n                <ds-badge\n                  class=\"button-unfilled__dot\"\n                  variant=\"dot\"\n                  background={this.dotRing}\n                  label=\"\"\n                  aria-hidden=\"true\"\n                />\n              )}\n            </span>\n          )}\n          {this.showLabel && (\n            <ds-text\n              class=\"button-unfilled__label ds-interaction-fill__content\"\n              as=\"span\"\n              variant={textVariant}\n              emphasis\n              color=\"inherit\"\n            >\n              {this.label}\n            </ds-text>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["buttonUnfilledCss","ICON_SIZE","md","sm","xs","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","isActive","activeFill","hasBorder","dot","isInactive","type","ariaLabel","buttonEl","handleClick","event","dsClick","emit","dsChange","setFocus","focus","effectiveContrast","backgroundContrast","showIcon","showLabel","showDot","dotRing","accessibleName","undefined","render","bg","background","contrast","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","focusTabIndex","controls","expanded","String","haspopup","pressed","onClick","name","color","as","emphasis"],"sources":["src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-unfilled-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-unfilled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-unfilled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-unfilled {\n  width: 100%;\n}\n\n.button-unfilled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-button-unfilled-fg);\n  cursor: pointer;\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` / `--on-*`).\n     Active always promotes foreground to primary (toggle mode). */\n}\n\n.button-unfilled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-unfilled--active {\n  color: var(--ds-button-unfilled-fg-active);\n}\n\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Fallback if interaction-fill is omitted (should be rare — prefer keep the util class). */\n.button-unfilled--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/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--contrast-medium {\n  --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--contrast-bold {\n  --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--contrast-strong {\n  --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--on-always-dark {\n  --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n  --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n.button-unfilled--on-navigation {\n  --ds-button-unfilled-fg: var(--color-navigation-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-navigation-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-navigation-background);\n  --ds-button-unfilled-border: var(--color-navigation-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n  --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n\n.button-unfilled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-unfilled__label {\n  position: relative;\n  z-index: 2;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.button-unfilled__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';\n\nexport type ButtonUnfilledBackground = 'always-dark' | 'navigation';\n\nexport type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonUnfilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonUnfilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonUnfilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-unfilled',\n  styleUrl: 'ButtonUnfilled.css',\n  scoped: true,\n})\nexport class ButtonUnfilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonUnfilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonUnfilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonUnfilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Active/selected visual state. Always promotes foreground to primary. */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * When active, render the selected interaction fill.\n   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n   * `false` so selection is foreground-only (primary color, no fill).\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Foreground and interaction tokens when the button sits on a contrasting parent\n   * background (default, medium, bold, or strong).\n   */\n  @Prop({ attribute: 'on-background-contrast' })\n  backgroundContrast?: ButtonUnfilledOnBackgroundContrast;\n\n  /** Parent surface context for navigation and always-dark chrome. */\n  @Prop() background: ButtonUnfilledBackground | undefined;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: string | undefined;\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive) return;\n    this.dsClick.emit(event);\n    this.dsChange.emit(!this.isActive);\n  };\n\n  private effectiveContrast(): ButtonUnfilledOnBackgroundContrast {\n    return this.backgroundContrast ?? 'default';\n  }\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if (this.isActive && this.activeFill) {\n      return 'var(--ds-interaction-active)';\n    }\n    return 'var(--ds-button-unfilled-dot-ring)';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.showLabel && this.label) return undefined;\n    if (this.variant === 'icon') return this.icon || 'action';\n    return this.label || 'action';\n  }\n\n  render() {\n    const bg = this.background;\n    const contrast = this.effectiveContrast();\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected': this.isActive && this.activeFill && !this.isInactive,\n      'ds-interaction-fill--on-medium': contrast === 'medium',\n      'ds-interaction-fill--on-bold': contrast === 'bold',\n      'ds-interaction-fill--on-strong': contrast === 'strong',\n      'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n      'ds-interaction-fill--on-navigation': bg === 'navigation',\n      'button-unfilled--active': this.isActive,\n      'button-unfilled--bordered': this.hasBorder,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-unfilled--icon': this.variant === 'icon',\n      'button-unfilled--label': this.variant === 'label',\n      'button-unfilled--icon-label': this.variant === 'icon-label',\n      'button-unfilled--contrast-medium': contrast === 'medium',\n      'button-unfilled--contrast-bold': contrast === 'bold',\n      'button-unfilled--contrast-strong': contrast === 'strong',\n      'button-unfilled--on-always-dark': bg === 'always-dark',\n      'button-unfilled--on-navigation': bg === 'navigation',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-unfilled-host': true,\n          'button-unfilled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.accessibleName}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.haspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-unfilled__icon-wrap ds-interaction-fill__content\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              {this.showDot && (\n                <ds-badge\n                  class=\"button-unfilled__dot\"\n                  variant=\"dot\"\n                  background={this.dotRing}\n                  label=\"\"\n                  aria-hidden=\"true\"\n                />\n              )}\n            </span>\n          )}\n          {this.showLabel && (\n            <ds-text\n              class=\"button-unfilled__label ds-interaction-fill__content\"\n              as=\"span\"\n              variant={textVariant}\n              emphasis\n              color=\"inherit\"\n            >\n              {this.label}\n            </ds-text>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-BOc1hs1x.js

@@ -0,0 +1,2 @@
+import{p as t,H as i,h as o,a as s,t as n}from"./index.js";import{d as e}from"./p-emacH2W5.js";import{a as r,T as a}from"./p-drBA73M_.js";import{r as d}from"./p-BWUTr_XN.js";import{r as c}from"./p-C1cBr-Ri.js";import{C as l}from"./p-Cx-ywr1e.js";const h=new Set(["⌘","⇧","⌥","⌃"]);const p={alt:"⌥",cmd:"⌘",command:"⌘",control:"⌃",ctrl:"⌃",option:"⌥",shift:"⇧"};function m(t){return p[t.toLowerCase()]??t}function u(t){const i=t.trim();if(!i)return[];if(i.includes("+")){return i.split("+").map((t=>t.trim())).filter(Boolean).map(m)}if(/\s/.test(i)){return i.split(/\s+/).filter(Boolean).map(m)}const o=Array.from(i);const s=[];while(o.length>1&&h.has(o[0])){s.push(o.shift())}s.push(o.join(""));return s}const f=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--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-tooltip-h,.ds-control--sm.sc-ds-tooltip{--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-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--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-tooltip-h,.ds-control--sm.sc-ds-tooltip{--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-tooltip-h,.ds-control--xs.sc-ds-tooltip{--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)}.key-hint-group.sc-ds-tooltip{display:inline-flex;align-items:center;gap:var(--dimension-stroke-width-012);width:max-content;flex-shrink:0}.key-hint.sc-ds-tooltip{box-sizing:border-box;min-width:var(--ds-control-icon, var(--dimension-iconography-md));width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));padding-inline:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-primary)}.key-hint--wide.sc-ds-tooltip{width:calc(var(--ds-control-icon, var(--dimension-iconography-md)) * 1.5)}.key-hint__label.sc-ds-tooltip{display:inline-flex;width:max-content;min-width:max-content;font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);line-height:1;font-weight:var(--typography-weight-bold);letter-spacing:0;text-transform:uppercase;color:inherit}.ds-control--xs.sc-ds-tooltip .key-hint__label.sc-ds-tooltip{font-size:calc(var(--typography-fontsize-xs) * 0.78)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-inner.sc-ds-tooltip>ds-text.sc-ds-tooltip{flex-shrink:0;min-width:max-content;max-width:none;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const g={md:a.size400,sm:a.size300,xs:a.size200};let v=0;let y=0;let b=null;function x(t){const i=document.createElement("ds-text");i.as="span";i.variant=t.variant;i.emphasis=t.emphasis??false;i.color=t.color??"inherit";if(t.wrap)i.wrap=t.wrap;i.textContent=t.text;return i}function C(t){t.style.flexShrink="0";t.style.minWidth="max-content";t.style.maxWidth="none";t.style.padding="0 var(--ds-control-label-inset, var(--dimension-space-025))";t.style.color="var(--color-foreground-primary)"}const w=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=r.space050;this.alignOffset=0;this.delay=a.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++y}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.positionObserver=null;this.skipEnterAnimation=false;this.isOpen=false;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()}}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){if(b===this)b=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.schedulePosition()}get viewportPadPx(){return d(a.space050,a.space050)}get sideOffsetPx(){return d(this.sideOffset,a.space050)}get alignOffsetPx(){return d(this.alignOffset,0)}get hoverDelayMs(){return c(this.delay,a.animationDelayMedium3)}get instantReopenMs(){return c(a.animationDurationMedium1,a.animationDurationMedium1)}get fadeOutMs(){return c(a.motionShort3,a.animationDurationShort3)}get tooltipFallbackWidthPx(){return d(a.tooltipFallbackWidth,a.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=g[this.size];return d(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const o=i[0]??this.el.firstElementChild;if(!o)return;this.anchor=o;o.setAttribute("aria-describedby",this.tooltipId);o.addEventListener("mouseenter",this.mouseEnterHandler);o.addEventListener("mouseleave",this.mouseLeaveHandler);o.addEventListener("focusin",this.focusHandler);o.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}destroyPopup(){this.positionObserver?.disconnect();this.positionObserver=null;if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}schedulePosition(){if(!this.popupEl)return;const t=()=>{const t=this.popupEl?.querySelector(":scope > .tooltip-inner > ds-text");if(t instanceof i)C(t)};requestAnimationFrame((()=>{t();this.calculatePosition();requestAnimationFrame((()=>{t();this.calculatePosition()}))}));this.positionObserver?.disconnect();this.positionObserver=new ResizeObserver((()=>this.calculatePosition()));this.positionObserver.observe(this.popupEl)}hideInstant(){this.clearTimers();v=Date.now();if(b===this)b=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-v<this.instantReopenMs;if(b&&b!==this){b.hideInstant();t=true}b=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;v=Date.now();if(b===this)b=null;if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.schedulePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=l[this.size];const i=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const o="sc-ds-tooltip";const s=document.createElement("div");s.className=`tooltip-inner ${i} ${o}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const i=document.createElement("span");i.className=`key-hint-group ${o}`;i.setAttribute("aria-hidden","true");for(const t of u(this.shortcutKey)){const s=document.createElement("span");const n=Array.from(t).length>1?" key-hint--wide":"";s.className=`key-hint${n} ${o}`;const e=document.createElement("span");e.className=`key-hint__label ${o}`;e.textContent=t;s.appendChild(e);i.appendChild(s)}s.appendChild(i)};n("start");const e=x({variant:t,wrap:"nowrap",text:this.label});C(e);s.appendChild(e);n("end");this.popupEl.replaceChildren(s)}calculatePosition(){if(!this.anchor||!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const o=t.offsetWidth||this.tooltipFallbackWidthPx;const s=t.offsetHeight||this.tooltipFallbackHeightPx;const n=this.sideOffsetPx;const e=this.alignOffsetPx;const r=this.viewportPadPx;let a=0,d=0;switch(this.side){case"top":d=i.top-s-n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-o+e:i.left+i.width/2-o/2+e;break;case"bottom":d=i.bottom+n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-o+e:i.left+i.width/2-o/2+e;break;case"left":a=i.left-o-n;d=this.align==="start"?i.top+e:this.align==="end"?i.bottom-s+e:i.top+i.height/2-s/2+e;break;case"right":a=i.right+n;d=this.align==="start"?i.top+e:this.align==="end"?i.bottom-s+e:i.top+i.height/2-s/2+e;break}const c=Math.min(Math.max(a,r),window.innerWidth-o-r);const l=Math.min(Math.max(d,r),window.innerHeight-s-r);t.style.transform=`translate(${Math.round(c)}px, ${Math.round(l)}px)`}render(){return o(s,{key:"bf35f410cdc79de3acc8fa6281319fad871425be",style:{display:"contents"}},o("slot",{key:"fb783900f923b407f25a245c25029b6161ae2c11"}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return f()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function k(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),w)}break;case"ds-text":if(!customElements.get(n(t))){e()}break}}))}k();export{w as T,k as d};
+//# sourceMappingURL=p-BOc1hs1x.js.map

package/dist/components/{p-D7SoZNpD.js.map → p-BOc1hs1x.js.map}

@@ -1 +1 @@
-{"version":3,"names":["MODIFIER_GLYPHS","Set","MODIFIER_LABELS","alt","cmd","command","control","ctrl","option","shift","canonicalKeyLabel","label","toLowerCase","shortcutKeyLabels","shortcut","normalized","trim","includes","split","map","part","filter","Boolean","test","characters","Array","from","labels","length","has","push","join","tooltipCss","FALLBACK_HEIGHT","md","TOKEN_DEFAULTS","size400","sm","size300","xs","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","createDsText","opts","el","document","createElement","as","variant","emphasis","color","wrap","textContent","text","styleTooltipLabel","style","flexShrink","minWidth","maxWidth","padding","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","positionObserver","skipEnterAnimation","isOpen","mouseEnterHandler","show","mouseLeaveHandler","hide","focusHandler","blurHandler","e","next","relatedTarget","contains","componentDidLoad","bindAnchor","disconnectedCallback","unbindAnchor","clearTimers","destroyPopup","onContentOrPositionChange","hideInstant","renderPopupContent","schedulePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slot","querySelector","slotted","assignedElements","child","firstElementChild","setAttribute","addEventListener","removeAttribute","removeEventListener","clearTimeout","disconnect","remove","reapplyLabelStyles","requestAnimationFrame","calculatePosition","ResizeObserver","observe","Date","now","instant","mountPopup","setTimeout","classList","add","tip","id","className","Object","assign","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","CONTROL_TEXT_VARIANT","density","sc","inner","appendShortcut","shortcutKey","group","hint","wide","replaceChildren","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","vpPad","x","y","right","width","bottom","height","nextX","Math","min","max","window","innerWidth","nextY","innerHeight","transform","round","render","h","Host","key","display"],"sources":["src/wc/utils/shortcut-key.ts","src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["const MODIFIER_GLYPHS = new Set(['⌘', '⇧', '⌥', '⌃']);\nconst MODIFIER_LABELS: Readonly<Record<string, string>> = {\n  alt: '⌥',\n  cmd: '⌘',\n  command: '⌘',\n  control: '⌃',\n  ctrl: '⌃',\n  option: '⌥',\n  shift: '⇧',\n};\n\nfunction canonicalKeyLabel(label: string): string {\n  return MODIFIER_LABELS[label.toLowerCase()] ?? label;\n}\n\n/** Split a shortcut chord into the labels rendered on individual keycaps. */\nexport function shortcutKeyLabels(shortcut: string): string[] {\n  const normalized = shortcut.trim();\n  if (!normalized) return [];\n\n  if (normalized.includes('+')) {\n    return normalized.split('+').map(part => part.trim()).filter(Boolean).map(canonicalKeyLabel);\n  }\n\n  if (/\\s/.test(normalized)) {\n    return normalized.split(/\\s+/).filter(Boolean).map(canonicalKeyLabel);\n  }\n\n  const characters = Array.from(normalized);\n  const labels: string[] = [];\n  while (characters.length > 1 && MODIFIER_GLYPHS.has(characters[0])) {\n    labels.push(characters.shift()!);\n  }\n  labels.push(characters.join(''));\n  return labels;\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/key-hint.css';\n\n.tooltip-popup {\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n  animation: none;\n  opacity: 1;\n}\n\n.tooltip-popup--closing {\n  animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/*\n * Label layout lives on ds-text (metric-box + control label-inset).\n * NOTE: Stencil scopes this to `ds-text.sc-ds-tooltip`, but portaled\n * createElement ds-text loses that class when Text's <Host class> renders.\n * `renderPopupContent` therefore also sets these as inline styles.\n */\n.tooltip-inner > ds-text {\n  flex-shrink: 0;\n  min-width: max-content;\n  max-width: none;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_TEXT_VARIANT,\n  resolveCssLengthPx,\n  resolveCssTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport type { TextVariant } from '../Text/text-types';\nimport { shortcutKeyLabels } from '../../utils/shortcut-key';\n// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.\nimport '../Text/Text';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n  md: TOKEN_DEFAULTS.size400,\n  sm: TOKEN_DEFAULTS.size300,\n  xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\ntype DsTextEl = HTMLElement & {\n  as: string;\n  variant: TextVariant;\n  emphasis: boolean;\n  color: string;\n  wrap: string;\n};\n\nfunction createDsText(opts: {\n  variant: TextVariant;\n  emphasis?: boolean;\n  color?: string;\n  wrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';\n  text: string;\n}): DsTextEl {\n  const el = document.createElement('ds-text') as DsTextEl;\n  el.as = 'span';\n  el.variant = opts.variant;\n  el.emphasis = opts.emphasis ?? false;\n  el.color = opts.color ?? 'inherit';\n  if (opts.wrap) el.wrap = opts.wrap;\n  el.textContent = opts.text;\n  return el;\n}\n\n/**\n * Control-density label styles for portaled ds-text.\n * Scoped CSS requires `sc-ds-tooltip` on the host, but Text's `<Host class>`\n * overwrites imperative className — so these must be inline to stick.\n */\nfunction styleTooltipLabel(el: HTMLElement) {\n  el.style.flexShrink = '0';\n  el.style.minWidth = 'max-content';\n  el.style.maxWidth = 'none';\n  el.style.padding = '0 var(--ds-control-label-inset, var(--dimension-space-025))';\n  el.style.color = 'var(--color-foreground-primary)';\n}\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n  tag: 'ds-tooltip',\n  styleUrl: 'Tooltip.css',\n  scoped: true,\n})\nexport class Tooltip {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n   * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n   */\n  @Prop() label!: string;\n\n  /** Control density (height, padding, type). */\n  @Prop() size: TooltipSize = 'md';\n\n  @Prop() side: TooltipSide = 'top';\n  @Prop() align: TooltipAlign = 'center';\n  /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number (px) or TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  /**\n   * Hover show delay before the tooltip appears.\n   * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n   * initial hover/focus show only — after a recent dismiss, reopen is instant.\n   * Prefer the default; override only for denser chrome or rare/destructive actions.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n  @Prop() shortcutKey: string | undefined;\n  @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n  private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private anchor: HTMLElement | null = null;\n  private popupEl: HTMLElement | null = null;\n  private positionObserver: ResizeObserver | null = null;\n  private skipEnterAnimation = false;\n  private isOpen = false;\n  private mouseEnterHandler: () => void = () => this.show();\n  private mouseLeaveHandler: () => void = () => this.hide();\n  /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n  private focusHandler: () => void = () => this.show();\n  private blurHandler: (e: FocusEvent) => void = (e) => {\n    const next = e.relatedTarget as Node | null;\n    if (next && this.anchor?.contains(next)) return;\n    this.hide();\n  };\n\n  componentDidLoad() {\n    this.bindAnchor();\n  }\n\n  disconnectedCallback() {\n    if (activeTooltip === this) activeTooltip = null;\n    this.unbindAnchor();\n    this.clearTimers();\n    this.destroyPopup();\n  }\n\n  @Watch('label')\n  @Watch('size')\n  @Watch('side')\n  @Watch('align')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  @Watch('shortcutKey')\n  @Watch('shortcutKeyPosition')\n  onContentOrPositionChange() {\n    if (!this.label?.trim()) {\n      if (this.isOpen || this.popupEl) this.hideInstant();\n      return;\n    }\n    if (!this.popupEl || !this.isOpen) return;\n    this.renderPopupContent();\n    this.schedulePosition();\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get sideOffsetPx(): number {\n    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n  }\n\n  private get alignOffsetPx(): number {\n    return resolveCssLengthPx(this.alignOffset, 0);\n  }\n\n  private get hoverDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n  }\n\n  private get instantReopenMs(): number {\n    return resolveCssTimeMs(\n      TOKEN_DEFAULTS.animationDurationMedium1,\n      TOKEN_DEFAULTS.animationDurationMedium1,\n    );\n  }\n\n  private get fadeOutMs(): number {\n    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private get tooltipFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n  }\n\n  private get tooltipFallbackHeightPx(): number {\n    const token = FALLBACK_HEIGHT[this.size];\n    return resolveCssLengthPx(token, token);\n  }\n\n  private bindAnchor() {\n    const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n    const slotted = slot?.assignedElements?.() ?? [];\n    const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n    if (!child) return;\n    this.anchor = child;\n    child.setAttribute('aria-describedby', this.tooltipId);\n    child.addEventListener('mouseenter', this.mouseEnterHandler);\n    child.addEventListener('mouseleave', this.mouseLeaveHandler);\n    child.addEventListener('focusin', this.focusHandler);\n    child.addEventListener('focusout', this.blurHandler);\n  }\n\n  private unbindAnchor() {\n    if (!this.anchor) return;\n    this.anchor.removeAttribute('aria-describedby');\n    this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);\n    this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);\n    this.anchor.removeEventListener('focusin', this.focusHandler);\n    this.anchor.removeEventListener('focusout', this.blurHandler);\n    this.anchor = null;\n  }\n\n  private clearTimers() {\n    if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n    if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n  }\n\n  private destroyPopup() {\n    this.positionObserver?.disconnect();\n    this.positionObserver = null;\n    if (!this.popupEl) return;\n    this.popupEl.remove();\n    this.popupEl = null;\n  }\n\n  /**\n   * Position after `ds-text` upgrades and lays out. Measuring synchronously in\n   * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.\n   */\n  private schedulePosition() {\n    if (!this.popupEl) return;\n\n    const reapplyLabelStyles = () => {\n      const label = this.popupEl?.querySelector(':scope > .tooltip-inner > ds-text');\n      if (label instanceof HTMLElement) styleTooltipLabel(label);\n    };\n\n    requestAnimationFrame(() => {\n      reapplyLabelStyles();\n      this.calculatePosition();\n      requestAnimationFrame(() => {\n        reapplyLabelStyles();\n        this.calculatePosition();\n      });\n    });\n\n    this.positionObserver?.disconnect();\n    this.positionObserver = new ResizeObserver(() => this.calculatePosition());\n    this.positionObserver.observe(this.popupEl);\n  }\n\n  /** Drop the open tip immediately (warm handoff to another tooltip). */\n  private hideInstant() {\n    this.clearTimers();\n    lastDismissedAt = Date.now();\n    if (activeTooltip === this) activeTooltip = null;\n    this.destroyPopup();\n    this.isOpen = false;\n    this.skipEnterAnimation = false;\n  }\n\n  private show() {\n    // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n    // but no tip should appear.\n    if (!this.label?.trim()) return;\n    this.clearTimers();\n    let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n    if (activeTooltip && activeTooltip !== this) {\n      activeTooltip.hideInstant();\n      instant = true;\n    }\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance\n    activeTooltip = this;\n    this.skipEnterAnimation = instant;\n    if (instant) {\n      this.mountPopup();\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      if (!this.label?.trim()) return;\n      this.mountPopup();\n    }, this.hoverDelayMs);\n  }\n\n  private hide() {\n    this.clearTimers();\n    if (!this.popupEl && !this.isOpen) return;\n    lastDismissedAt = Date.now();\n    if (activeTooltip === this) activeTooltip = null;\n    if (!this.popupEl) {\n      this.isOpen = false;\n      return;\n    }\n    this.popupEl.classList.remove('tooltip-popup--instant');\n    this.popupEl.classList.add('tooltip-popup--closing');\n    this.closeTimer = setTimeout(() => {\n      this.closeTimer = null;\n      this.destroyPopup();\n      this.isOpen = false;\n      this.skipEnterAnimation = false;\n    }, this.fadeOutMs);\n  }\n\n  private mountPopup() {\n    if (!this.popupEl) {\n      const tip = document.createElement('div');\n      tip.id = this.tooltipId;\n      tip.setAttribute('role', 'tooltip');\n      // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n      tip.className = 'tooltip-popup sc-ds-tooltip';\n      Object.assign(tip.style, {\n        position: 'fixed',\n        left: '0',\n        top: '0',\n        zIndex: 'var(--dimension-z-index-tooltip)',\n        pointerEvents: 'none',\n      });\n      document.body.appendChild(tip);\n      this.popupEl = tip;\n    }\n\n    this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n    this.popupEl.classList.remove('tooltip-popup--closing');\n    this.renderPopupContent();\n    this.schedulePosition();\n    this.isOpen = true;\n  }\n\n  private renderPopupContent() {\n    if (!this.popupEl) return;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const density =\n      this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n    // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n    const sc = 'sc-ds-tooltip';\n\n    const inner = document.createElement('div');\n    inner.className = `tooltip-inner ${density} ${sc}`;\n\n    const appendShortcut = (position: 'start' | 'end') => {\n      if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;\n      const group = document.createElement('span');\n      group.className = `key-hint-group ${sc}`;\n      group.setAttribute('aria-hidden', 'true');\n\n      for (const label of shortcutKeyLabels(this.shortcutKey)) {\n        const hint = document.createElement('span');\n        const wide = Array.from(label).length > 1 ? ' key-hint--wide' : '';\n        hint.className = `key-hint${wide} ${sc}`;\n        const text = document.createElement('span');\n        text.className = `key-hint__label ${sc}`;\n        text.textContent = label;\n        hint.appendChild(text);\n        group.appendChild(hint);\n      }\n      inner.appendChild(group);\n    };\n\n    appendShortcut('start');\n\n    // ds-text is the layout box (metric-box + 2px control label-inset).\n    // Inline styles required — see styleTooltipLabel.\n    const label = createDsText({ variant: textVariant, wrap: 'nowrap', text: this.label });\n    styleTooltipLabel(label);\n    inner.appendChild(label);\n\n    appendShortcut('end');\n\n    this.popupEl.replaceChildren(inner);\n  }\n\n  private calculatePosition() {\n    if (!this.anchor || !this.popupEl) return;\n    const tip = this.popupEl;\n    const a = this.anchor.getBoundingClientRect();\n    const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n    const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n    const sideOffset = this.sideOffsetPx;\n    const alignOffset = this.alignOffsetPx;\n    const vpPad = this.viewportPadPx;\n    let x = 0, y = 0;\n\n    switch (this.side) {\n      case 'top':\n        y = a.top - th - sideOffset;\n        x = this.align === 'start' ? a.left + alignOffset\n          : this.align === 'end' ? a.right - tw + alignOffset\n          : a.left + a.width / 2 - tw / 2 + alignOffset;\n        break;\n      case 'bottom':\n        y = a.bottom + sideOffset;\n        x = this.align === 'start' ? a.left + alignOffset\n          : this.align === 'end' ? a.right - tw + alignOffset\n          : a.left + a.width / 2 - tw / 2 + alignOffset;\n        break;\n      case 'left':\n        x = a.left - tw - sideOffset;\n        y = this.align === 'start' ? a.top + alignOffset\n          : this.align === 'end' ? a.bottom - th + alignOffset\n          : a.top + a.height / 2 - th / 2 + alignOffset;\n        break;\n      case 'right':\n        x = a.right + sideOffset;\n        y = this.align === 'start' ? a.top + alignOffset\n          : this.align === 'end' ? a.bottom - th + alignOffset\n          : a.top + a.height / 2 - th / 2 + alignOffset;\n        break;\n    }\n\n    const nextX = Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad);\n    const nextY = Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad);\n    tip.style.transform = `translate(${Math.round(nextX)}px, ${Math.round(nextY)}px)`;\n  }\n\n  render() {\n    return (\n      <Host style={{ display: 'contents' }}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["MODIFIER_GLYPHS","Set","MODIFIER_LABELS","alt","cmd","command","control","ctrl","option","shift","canonicalKeyLabel","label","toLowerCase","shortcutKeyLabels","shortcut","normalized","trim","includes","split","map","part","filter","Boolean","test","characters","Array","from","labels","length","has","push","join","tooltipCss","FALLBACK_HEIGHT","md","TOKEN_DEFAULTS","size400","sm","size300","xs","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","createDsText","opts","el","document","createElement","as","variant","emphasis","color","wrap","textContent","text","styleTooltipLabel","style","flexShrink","minWidth","maxWidth","padding","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","positionObserver","skipEnterAnimation","isOpen","mouseEnterHandler","show","mouseLeaveHandler","hide","focusHandler","blurHandler","e","next","relatedTarget","contains","componentDidLoad","bindAnchor","disconnectedCallback","unbindAnchor","clearTimers","destroyPopup","onContentOrPositionChange","hideInstant","renderPopupContent","schedulePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slot","querySelector","slotted","assignedElements","child","firstElementChild","setAttribute","addEventListener","removeAttribute","removeEventListener","clearTimeout","disconnect","remove","reapplyLabelStyles","requestAnimationFrame","calculatePosition","ResizeObserver","observe","Date","now","instant","mountPopup","setTimeout","classList","add","tip","id","className","Object","assign","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","CONTROL_TEXT_VARIANT","density","sc","inner","appendShortcut","shortcutKey","group","hint","wide","replaceChildren","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","vpPad","x","y","right","width","bottom","height","nextX","Math","min","max","window","innerWidth","nextY","innerHeight","transform","round","render","h","Host","key","display"],"sources":["src/wc/utils/shortcut-key.ts","src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["const MODIFIER_GLYPHS = new Set(['⌘', '⇧', '⌥', '⌃']);\nconst MODIFIER_LABELS: Readonly<Record<string, string>> = {\n  alt: '⌥',\n  cmd: '⌘',\n  command: '⌘',\n  control: '⌃',\n  ctrl: '⌃',\n  option: '⌥',\n  shift: '⇧',\n};\n\nfunction canonicalKeyLabel(label: string): string {\n  return MODIFIER_LABELS[label.toLowerCase()] ?? label;\n}\n\n/** Split a shortcut chord into the labels rendered on individual keycaps. */\nexport function shortcutKeyLabels(shortcut: string): string[] {\n  const normalized = shortcut.trim();\n  if (!normalized) return [];\n\n  if (normalized.includes('+')) {\n    return normalized.split('+').map(part => part.trim()).filter(Boolean).map(canonicalKeyLabel);\n  }\n\n  if (/\\s/.test(normalized)) {\n    return normalized.split(/\\s+/).filter(Boolean).map(canonicalKeyLabel);\n  }\n\n  const characters = Array.from(normalized);\n  const labels: string[] = [];\n  while (characters.length > 1 && MODIFIER_GLYPHS.has(characters[0])) {\n    labels.push(characters.shift()!);\n  }\n  labels.push(characters.join(''));\n  return labels;\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/key-hint.css';\n\n.tooltip-popup {\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n  animation: none;\n  opacity: 1;\n}\n\n.tooltip-popup--closing {\n  animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/*\n * Label layout lives on ds-text (metric-box + control label-inset).\n * NOTE: Stencil scopes this to `ds-text.sc-ds-tooltip`, but portaled\n * createElement ds-text loses that class when Text's <Host class> renders.\n * `renderPopupContent` therefore also sets these as inline styles.\n */\n.tooltip-inner > ds-text {\n  flex-shrink: 0;\n  min-width: max-content;\n  max-width: none;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_TEXT_VARIANT,\n  resolveCssLengthPx,\n  resolveCssTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport type { TextVariant } from '../Text/text-types';\nimport { shortcutKeyLabels } from '../../utils/shortcut-key';\n// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.\nimport '../Text/Text';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n  md: TOKEN_DEFAULTS.size400,\n  sm: TOKEN_DEFAULTS.size300,\n  xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\ntype DsTextEl = HTMLElement & {\n  as: string;\n  variant: TextVariant;\n  emphasis: boolean;\n  color: string;\n  wrap: string;\n};\n\nfunction createDsText(opts: {\n  variant: TextVariant;\n  emphasis?: boolean;\n  color?: string;\n  wrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';\n  text: string;\n}): DsTextEl {\n  const el = document.createElement('ds-text') as DsTextEl;\n  el.as = 'span';\n  el.variant = opts.variant;\n  el.emphasis = opts.emphasis ?? false;\n  el.color = opts.color ?? 'inherit';\n  if (opts.wrap) el.wrap = opts.wrap;\n  el.textContent = opts.text;\n  return el;\n}\n\n/**\n * Control-density label styles for portaled ds-text.\n * Scoped CSS requires `sc-ds-tooltip` on the host, but Text's `<Host class>`\n * overwrites imperative className — so these must be inline to stick.\n */\nfunction styleTooltipLabel(el: HTMLElement) {\n  el.style.flexShrink = '0';\n  el.style.minWidth = 'max-content';\n  el.style.maxWidth = 'none';\n  el.style.padding = '0 var(--ds-control-label-inset, var(--dimension-space-025))';\n  el.style.color = 'var(--color-foreground-primary)';\n}\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n  tag: 'ds-tooltip',\n  styleUrl: 'Tooltip.css',\n  scoped: true,\n})\nexport class Tooltip {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n   * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n   */\n  @Prop() label!: string;\n\n  /** Control density (height, padding, type). */\n  @Prop() size: TooltipSize = 'md';\n\n  @Prop() side: TooltipSide = 'top';\n  @Prop() align: TooltipAlign = 'center';\n  /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number (px) or TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  /**\n   * Hover show delay before the tooltip appears.\n   * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n   * initial hover/focus show only — after a recent dismiss, reopen is instant.\n   * Prefer the default; override only for denser chrome or rare/destructive actions.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n  @Prop() shortcutKey: string | undefined;\n  @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n  private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private anchor: HTMLElement | null = null;\n  private popupEl: HTMLElement | null = null;\n  private positionObserver: ResizeObserver | null = null;\n  private skipEnterAnimation = false;\n  private isOpen = false;\n  private mouseEnterHandler: () => void = () => this.show();\n  private mouseLeaveHandler: () => void = () => this.hide();\n  /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n  private focusHandler: () => void = () => this.show();\n  private blurHandler: (e: FocusEvent) => void = (e) => {\n    const next = e.relatedTarget as Node | null;\n    if (next && this.anchor?.contains(next)) return;\n    this.hide();\n  };\n\n  componentDidLoad() {\n    this.bindAnchor();\n  }\n\n  disconnectedCallback() {\n    if (activeTooltip === this) activeTooltip = null;\n    this.unbindAnchor();\n    this.clearTimers();\n    this.destroyPopup();\n  }\n\n  @Watch('label')\n  @Watch('size')\n  @Watch('side')\n  @Watch('align')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  @Watch('shortcutKey')\n  @Watch('shortcutKeyPosition')\n  onContentOrPositionChange() {\n    if (!this.label?.trim()) {\n      if (this.isOpen || this.popupEl) this.hideInstant();\n      return;\n    }\n    if (!this.popupEl || !this.isOpen) return;\n    this.renderPopupContent();\n    this.schedulePosition();\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get sideOffsetPx(): number {\n    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n  }\n\n  private get alignOffsetPx(): number {\n    return resolveCssLengthPx(this.alignOffset, 0);\n  }\n\n  private get hoverDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n  }\n\n  private get instantReopenMs(): number {\n    return resolveCssTimeMs(\n      TOKEN_DEFAULTS.animationDurationMedium1,\n      TOKEN_DEFAULTS.animationDurationMedium1,\n    );\n  }\n\n  private get fadeOutMs(): number {\n    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private get tooltipFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n  }\n\n  private get tooltipFallbackHeightPx(): number {\n    const token = FALLBACK_HEIGHT[this.size];\n    return resolveCssLengthPx(token, token);\n  }\n\n  private bindAnchor() {\n    const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n    const slotted = slot?.assignedElements?.() ?? [];\n    const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n    if (!child) return;\n    this.anchor = child;\n    child.setAttribute('aria-describedby', this.tooltipId);\n    child.addEventListener('mouseenter', this.mouseEnterHandler);\n    child.addEventListener('mouseleave', this.mouseLeaveHandler);\n    child.addEventListener('focusin', this.focusHandler);\n    child.addEventListener('focusout', this.blurHandler);\n  }\n\n  private unbindAnchor() {\n    if (!this.anchor) return;\n    this.anchor.removeAttribute('aria-describedby');\n    this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);\n    this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);\n    this.anchor.removeEventListener('focusin', this.focusHandler);\n    this.anchor.removeEventListener('focusout', this.blurHandler);\n    this.anchor = null;\n  }\n\n  private clearTimers() {\n    if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n    if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n  }\n\n  private destroyPopup() {\n    this.positionObserver?.disconnect();\n    this.positionObserver = null;\n    if (!this.popupEl) return;\n    this.popupEl.remove();\n    this.popupEl = null;\n  }\n\n  /**\n   * Position after `ds-text` upgrades and lays out. Measuring synchronously in\n   * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.\n   */\n  private schedulePosition() {\n    if (!this.popupEl) return;\n\n    const reapplyLabelStyles = () => {\n      const label = this.popupEl?.querySelector(':scope > .tooltip-inner > ds-text');\n      if (label instanceof HTMLElement) styleTooltipLabel(label);\n    };\n\n    requestAnimationFrame(() => {\n      reapplyLabelStyles();\n      this.calculatePosition();\n      requestAnimationFrame(() => {\n        reapplyLabelStyles();\n        this.calculatePosition();\n      });\n    });\n\n    this.positionObserver?.disconnect();\n    this.positionObserver = new ResizeObserver(() => this.calculatePosition());\n    this.positionObserver.observe(this.popupEl);\n  }\n\n  /** Drop the open tip immediately (warm handoff to another tooltip). */\n  private hideInstant() {\n    this.clearTimers();\n    lastDismissedAt = Date.now();\n    if (activeTooltip === this) activeTooltip = null;\n    this.destroyPopup();\n    this.isOpen = false;\n    this.skipEnterAnimation = false;\n  }\n\n  private show() {\n    // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n    // but no tip should appear.\n    if (!this.label?.trim()) return;\n    this.clearTimers();\n    let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n    if (activeTooltip && activeTooltip !== this) {\n      activeTooltip.hideInstant();\n      instant = true;\n    }\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance\n    activeTooltip = this;\n    this.skipEnterAnimation = instant;\n    if (instant) {\n      this.mountPopup();\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      if (!this.label?.trim()) return;\n      this.mountPopup();\n    }, this.hoverDelayMs);\n  }\n\n  private hide() {\n    this.clearTimers();\n    if (!this.popupEl && !this.isOpen) return;\n    lastDismissedAt = Date.now();\n    if (activeTooltip === this) activeTooltip = null;\n    if (!this.popupEl) {\n      this.isOpen = false;\n      return;\n    }\n    this.popupEl.classList.remove('tooltip-popup--instant');\n    this.popupEl.classList.add('tooltip-popup--closing');\n    this.closeTimer = setTimeout(() => {\n      this.closeTimer = null;\n      this.destroyPopup();\n      this.isOpen = false;\n      this.skipEnterAnimation = false;\n    }, this.fadeOutMs);\n  }\n\n  private mountPopup() {\n    if (!this.popupEl) {\n      const tip = document.createElement('div');\n      tip.id = this.tooltipId;\n      tip.setAttribute('role', 'tooltip');\n      // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n      tip.className = 'tooltip-popup sc-ds-tooltip';\n      Object.assign(tip.style, {\n        position: 'fixed',\n        left: '0',\n        top: '0',\n        zIndex: 'var(--dimension-z-index-tooltip)',\n        pointerEvents: 'none',\n      });\n      document.body.appendChild(tip);\n      this.popupEl = tip;\n    }\n\n    this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n    this.popupEl.classList.remove('tooltip-popup--closing');\n    this.renderPopupContent();\n    this.schedulePosition();\n    this.isOpen = true;\n  }\n\n  private renderPopupContent() {\n    if (!this.popupEl) return;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const density =\n      this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n    // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n    const sc = 'sc-ds-tooltip';\n\n    const inner = document.createElement('div');\n    inner.className = `tooltip-inner ${density} ${sc}`;\n\n    const appendShortcut = (position: 'start' | 'end') => {\n      if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;\n      const group = document.createElement('span');\n      group.className = `key-hint-group ${sc}`;\n      group.setAttribute('aria-hidden', 'true');\n\n      for (const label of shortcutKeyLabels(this.shortcutKey)) {\n        const hint = document.createElement('span');\n        const wide = Array.from(label).length > 1 ? ' key-hint--wide' : '';\n        hint.className = `key-hint${wide} ${sc}`;\n        const text = document.createElement('span');\n        text.className = `key-hint__label ${sc}`;\n        text.textContent = label;\n        hint.appendChild(text);\n        group.appendChild(hint);\n      }\n      inner.appendChild(group);\n    };\n\n    appendShortcut('start');\n\n    // ds-text is the layout box (metric-box + 2px control label-inset).\n    // Inline styles required — see styleTooltipLabel.\n    const label = createDsText({ variant: textVariant, wrap: 'nowrap', text: this.label });\n    styleTooltipLabel(label);\n    inner.appendChild(label);\n\n    appendShortcut('end');\n\n    this.popupEl.replaceChildren(inner);\n  }\n\n  private calculatePosition() {\n    if (!this.anchor || !this.popupEl) return;\n    const tip = this.popupEl;\n    const a = this.anchor.getBoundingClientRect();\n    const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n    const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n    const sideOffset = this.sideOffsetPx;\n    const alignOffset = this.alignOffsetPx;\n    const vpPad = this.viewportPadPx;\n    let x = 0, y = 0;\n\n    switch (this.side) {\n      case 'top':\n        y = a.top - th - sideOffset;\n        x = this.align === 'start' ? a.left + alignOffset\n          : this.align === 'end' ? a.right - tw + alignOffset\n          : a.left + a.width / 2 - tw / 2 + alignOffset;\n        break;\n      case 'bottom':\n        y = a.bottom + sideOffset;\n        x = this.align === 'start' ? a.left + alignOffset\n          : this.align === 'end' ? a.right - tw + alignOffset\n          : a.left + a.width / 2 - tw / 2 + alignOffset;\n        break;\n      case 'left':\n        x = a.left - tw - sideOffset;\n        y = this.align === 'start' ? a.top + alignOffset\n          : this.align === 'end' ? a.bottom - th + alignOffset\n          : a.top + a.height / 2 - th / 2 + alignOffset;\n        break;\n      case 'right':\n        x = a.right + sideOffset;\n        y = this.align === 'start' ? a.top + alignOffset\n          : this.align === 'end' ? a.bottom - th + alignOffset\n          : a.top + a.height / 2 - th / 2 + alignOffset;\n        break;\n    }\n\n    const nextX = Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad);\n    const nextY = Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad);\n    tip.style.transform = `translate(${Math.round(nextX)}px, ${Math.round(nextY)}px)`;\n  }\n\n  render() {\n    return (\n      <Host style={{ display: 'contents' }}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-C2gX0ggG.js

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

package/dist/components/{p-CvjQuj6A.js.map → p-C2gX0ggG.js.map}

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

package/dist/components/p-Cy3bKuLE.js

@@ -0,0 +1,2 @@
+import{p as i,H as e,c as s,h as n,a as t,t as o}from"./index.js";import{d as r}from"./p-CHcS6Z4V.js";import{d as a}from"./p-ORF34W29.js";import{d}from"./p-B4gGwfix.js";import{d as c}from"./p-emacH2W5.js";import{a as l,T as u}from"./p-drBA73M_.js";import{r as h}from"./p-BWUTr_XN.js";import{r as m}from"./p-C1cBr-Ri.js";function f(i){const{anchorRect:e,popupWidth:s,popupHeight:n,side:t,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:d,viewportWidth:c,viewportHeight:l}=i;let u=0;let h=0;switch(t){case"top":h=e.top-n-r;u=o==="start"?e.left+a:o==="end"?e.right-s+a:e.left+e.width/2-s/2+a;break;case"bottom":h=e.bottom+r;u=o==="start"?e.left+a:o==="end"?e.right-s+a:e.left+e.width/2-s/2+a;break;case"left":u=e.left-s-r;h=o==="start"?e.top+a:o==="end"?e.bottom-n+a:e.top+e.height/2-n/2+a;break;case"right":u=e.right+r;h=o==="start"?e.top+a:o==="end"?e.bottom-n+a:e.top+e.height/2-n/2+a;break}return{x:Math.min(Math.max(u,d),c-s-d),y:Math.min(Math.max(h,d),l-n-d)}}function g(i){return"variant"in i&&i.variant==="gradient-picker"}const v=()=>`.sc-ds-menu-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-menu: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-menu{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-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu: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-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::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-menu-h,.ds-interaction-fill.sc-ds-menu{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::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-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--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-menu-h,.ds-control-inactive.sc-ds-menu{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu{--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-menu-h,.ds-control--sm.sc-ds-menu{--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-menu-h,.ds-control--xs.sc-ds-menu{--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)}.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-2) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.section-header.sc-ds-menu{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   );text-align:start;-webkit-user-select:none;user-select:none}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.menu-item.sc-ds-menu:has(.menu-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.menu-item__label.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}.menu-item__subtext.sc-ds-menu,ds-text.menu-item__subtext.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}.menu-item__dot-box.sc-ds-menu{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.menu-item__toggle.sc-ds-menu{position:relative;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const p=8;const b=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsSelect=s(this,"dsSelect");this.dsGradientSelect=s(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=l.space050;this.alignOffset=0;this.initialFocusVisible=false;this.menuLabel="Menu";this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(i){if(i){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),this.closeAnimationMs)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return h(u.space050,u.space050)}get sideOffsetPx(){return h(this.sideOffset,u.space050)}get alignOffsetPx(){return h(this.alignOffset,0)}get popupFallbackWidthPx(){return h(u.menuWidthXs,u.menuWidthXs)}get popupFallbackHeightPx(){return h(u.menuFallbackHeight,u.menuFallbackHeight)}get closeAnimationMs(){return m(u.motionShort2,u.animationDurationShort3)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((i=>g(i)?[]:i.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(i){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let e=p;const s=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;i?.();return}if(e>0){e-=1;this.positionRetryRaf=requestAnimationFrame(s)}};this.positionRetryRaf=requestAnimationFrame(s)}calculatePosition(){const i=this.resolvedAnchor;if(!i)return false;const e=this.el.querySelector(".menu-popup");if(!e)return false;this.pos=f({anchorRect:i.getBoundingClientRect(),popupWidth:e.offsetWidth||this.popupFallbackWidthPx,popupHeight:e.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const i=this.flatItems;const e=i.findIndex((i=>i.isSelected&&!i.isInactive));const s=i.findIndex((i=>!i.isInactive));this.focusedIndex=e>=0?e:s>=0?s:0;requestAnimationFrame((()=>{const i=this.el.querySelectorAll(".menu-item");i[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=i=>{const e=i.target;const s=this.el.querySelector(".menu-popup");const n=this.resolvedAnchor;if(s?.contains(e)||n?.contains(e))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(i){if(!this.shouldRender||this.closing)return;const e=this.flatItems;const s=e.map(((i,e)=>({it:i,i:e}))).filter((({it:i})=>!i.isInactive)).map((({i})=>i));if(!s.length)return;const n=s.indexOf(this.focusedIndex);const t=n<0?0:n;switch(i.key){case"ArrowDown":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(t+1)%s.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(t-1+s.length)%s.length];this.focusItem(this.focusedIndex);break;case"Home":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[0];this.focusItem(this.focusedIndex);break;case"End":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[s.length-1];this.focusItem(this.focusedIndex);break;case"Escape":i.preventDefault();this.close();break;case"Tab":i.preventDefault();this.close();break}}focusItem(i){const e=this.el.querySelectorAll(".menu-item");e[i]?.focus()}handleItemClick(i){if(i.isInactive)return;this.dsSelect.emit(i)}handleGradientSelect(i){this.dsGradientSelect.emit(i)}render(){if(!this.shouldRender)return n(t,{style:{display:"contents"}});const i=this.activeSections;let e=0;const s={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)s["width"]=this.menuWidth;if(this.minWidth)s["min-width"]=this.minWidth;return n(t,{style:{display:"contents"}},n("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:s,role:"menu","aria-label":this.menuLabel,"aria-orientation":"vertical"},i.map(((s,t)=>n("div",{key:t,class:{"menu-section":true,"menu-section--divided":t<i.length-1,"menu-section--gradient-picker":g(s)},role:s.header?"group":undefined,"aria-label":s.header},s.header&&n("ds-text",{class:"section-header ds-control--md",as:"span",variant:"text-body-small",emphasis:true,color:"primary","aria-hidden":"true"},s.header),g(s)?n("ds-shell-gradient-picker",{value:s.value,onDsChange:i=>{i.stopPropagation();this.handleGradientSelect(i.detail)}}):s.items.map((i=>{const s=e++;const t=this.focusedIndex===s;return n("button",{key:s,type:"button",class:{"menu-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":t&&this.focusRingVisible,"ds-interaction-fill":!i.isInactive,"ds-interaction-fill--selected":!!i.isSelected&&!i.isInactive,"menu-item--selected":!!i.isSelected,"ds-control-inactive":!!i.isInactive,"menu-item--destructive":!!i.isDestructive,"menu-item--focused":t},role:"menuitem","aria-current":i.isSelected?"true":undefined,disabled:i.isInactive,tabIndex:t?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(i),onFocus:()=>{this.focusedIndex=s}},n("div",{class:"menu-item__content ds-interaction-fill__content"},n("ds-text",{class:"menu-item__label",as:"span",variant:"text-body-medium",emphasis:!!i.isSelected,color:i.isSelected?"primary":"secondary"},i.label),i.subtext&&n("ds-text",{class:"menu-item__subtext",as:"span",variant:"text-body-small",color:"secondary"},i.subtext)),i.dot&&n("span",{class:"menu-item__dot-box ds-interaction-fill__content","aria-hidden":"true"},n("ds-badge",{class:"menu-item__dot",variant:"dot",background:i.isSelected&&!i.isInactive?"var(--ds-interaction-active)":"var(--color-background-primary)",label:""})),i.showToggle&&n("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!i.toggleValue,"ds-interaction-fill__content":true},"aria-hidden":"true"},n("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return v()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],menuLabel:[1,"menu-label"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function x(){if(typeof customElements==="undefined"){return}const i=["ds-menu","ds-badge","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-text"];i.forEach((i=>{switch(i){case"ds-menu":if(!customElements.get(o(i))){customElements.define(o(i),b)}break;case"ds-badge":if(!customElements.get(o(i))){r()}break;case"ds-shell-gradient-picker":if(!customElements.get(o(i))){a()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(i))){d()}break;case"ds-text":if(!customElements.get(o(i))){c()}break}}))}x();export{b as M,x as d};
+//# sourceMappingURL=p-Cy3bKuLE.js.map