@ds-mo/ui 9.2.0 → 9.2.1

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

@@ -1 +0,0 @@
-{"version":3,"names":["computeMenuPosition","computeAnchoredPopupPosition","isMenuGradientPickerSection","section","variant","isMenuSwatchPickerSection","isMenuPickerSection","menuCss","POSITION_RETRY_BUDGET","MENU_FOCUSABLE_SELECTOR","join","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","selectionMode","sections","side","align","anchorAlignment","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","menuLabel","shouldRender","closing","pos","x","y","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","positionRetryRaf","listenersReady","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","closeAnimationMs","finishClose","setTimeout","onAnchorChange","onPositionPropsChange","viewportPadPx","resolveCssLengthPx","TOKEN_DEFAULTS","sideOffsetPx","alignOffsetPx","popupFallbackWidthPx","menuWidthXs","popupFallbackHeightPx","menuFallbackHeight","resolveMotionTimeMs","motionShort2","animationDurationShort3","resolvedAnchor","anchor","anchorId","document","getElementById","anchorFocusTarget","matches","querySelector","focusAnchor","setFocus","focus","moveFocusAfterTab","backwards","candidates","Array","from","querySelectorAll","filter","element","closest","getClientRects","length","index","indexOf","compositeTabLeavesPopup","event","popup","el","focusables","currentIndex","target","shiftKey","activeSections","flatItems","flatMap","hasCompositeSections","some","cancelAnimationFrame","onReady","remaining","attempt","calculatePosition","requestAnimationFrame","anchorEl","anchorRect","getBoundingClientRect","sectionInsetPx","minWidth","style","choicePopupMinWidth","width","removeProperty","popupWidth","offsetWidth","popupHeight","offsetHeight","resolveChoicePopupAlignOffset","viewportWidth","window","innerWidth","viewportHeight","innerHeight","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","e","t","contains","close","addEventListener","removeEventListener","clearTimeout","restoreFocus","dsClose","emit","handleKeyDown","key","preventDefault","enabled","map","i","cur","safe","stopPropagation","focusItem","idx","handleItemClick","item","dsSelect","handleGradientSelect","preset","dsGradientSelect","handleSwatchSelect","value","dsSwatchSelect","render","h","Host","display","flatIdx","popupStyle","position","left","top","transform","Math","round","zIndex","visibility","menuWidth","class","role","undefined","si","header","as","emphasis","color","groupLabel","shellGradientPickerSections","onDsChange","detail","options","isFocused","isRadioItem","showSwitch","type","isDestructive","String","switchValue","disabled","tabIndex","onMouseDown","onClick","onFocus","label","subtext","dot","hasRing","size","checked","presentation"],"sources":["src/wc/components/Menu/menu-position.ts","src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["import {\n  computeAnchoredPopupPosition,\n  type AnchoredPopupAlign,\n  type AnchoredPopupPositionInput,\n  type AnchoredPopupSide,\n} from '../../utils/anchored-popup';\n\nexport type MenuSide = AnchoredPopupSide;\nexport type MenuAlign = AnchoredPopupAlign;\nexport type MenuPositionInput = AnchoredPopupPositionInput;\n\n/** Backward-compatible menu alias for the shared anchored-popup layout math. */\nexport const computeMenuPosition = computeAnchoredPopupPosition;\n","import type { ShellGradientPreset } from '../../shell/shell-gradient-presets';\nimport type { SwatchPickerOption, SwatchPickerSection } from '../SwatchPicker/swatch-picker-types';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n  PANEL_NAV_USER_MENU_PLACEMENT,\n  PANEL_TOOLS_HEADER_MENU_PLACEMENT,\n  type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemData {\n  label: string;\n  value?: string;\n  subtext?: string;\n  /** Show a supplemental brand notification dot. */\n  dot?: boolean;\n  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  /** Render a compact switch indicator; the menu row owns interaction. */\n  showSwitch?: boolean;\n  switchValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n  header?: string;\n  items: MenuItemData[];\n}\n\nexport interface MenuGradientPickerSection {\n  header?: string;\n  /** @deprecated Use the generic `swatch-picker` section. */\n  variant: 'gradient-picker';\n  value: ShellGradientPreset;\n}\n\nexport interface MenuSwatchPickerSection {\n  header?: string;\n  variant: 'swatch-picker';\n  value: string;\n  options?: SwatchPickerOption[];\n  sections?: SwatchPickerSection[];\n  groupLabel?: string;\n}\n\nexport type MenuSection =\n  | MenuItemsSection\n  | MenuGradientPickerSection\n  | MenuSwatchPickerSection;\n\nexport function isMenuGradientPickerSection(\n  section: MenuSection,\n): section is MenuGradientPickerSection {\n  return 'variant' in section && section.variant === 'gradient-picker';\n}\n\nexport function isMenuSwatchPickerSection(\n  section: MenuSection,\n): section is MenuSwatchPickerSection {\n  return 'variant' in section && section.variant === 'swatch-picker';\n}\n\nexport function isMenuPickerSection(\n  section: MenuSection,\n): section is MenuGradientPickerSection | MenuSwatchPickerSection {\n  return isMenuGradientPickerSection(section) || isMenuSwatchPickerSection(section);\n}\n\nexport type { ShellGradientPreset };\nexport type { SwatchPickerOption, SwatchPickerSection };\n","@import '../../utils/choice-list.css';\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.menu-item--destructive .menu-item__label {\n  /* Beat ds-text color-* host classes for destructive rows. */\n  color: var(--color-foreground-bold-negative) !important;\n}\n\n/* Standard md icon zone keeps the dot aligned with other control suffixes. */\n.menu-item__dot-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  pointer-events: none;\n}\n\n/* ── Switch suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__switch {\n  flex-shrink: 0;\n}\n\n/* ── Single-selection radio indicator ───────────────────────────────────── */\n\n.menu-item__radio-box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  pointer-events: none;\n}\n\n.menu-item__radio {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-iconography-sm);\n  height: var(--dimension-iconography-sm);\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-015) var(--color-foreground-tertiary);\n}\n\n.menu-item__radio--checked {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.menu-item__radio-dot {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-on-bold-background-primary);\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  choicePopupMinWidth,\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n  type ChoicePopupAnchorAlignment,\n} from '../../utils';\nimport { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\n\nexport type MenuSelectionMode = 'none' | 'single';\nimport {\n  isMenuGradientPickerSection,\n  isMenuPickerSection,\n  isMenuSwatchPickerSection,\n} from './menu-types';\nimport {\n  shellGradientPickerSections,\n  type ShellGradientPreset,\n} from '../../shell/shell-gradient-presets';\n\n/** rAF retries while the popup mounts or the anchor resolves. */\nconst POSITION_RETRY_BUDGET = 8;\nconst MENU_FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  /** Give ordinary rows mutually-exclusive radio-menu semantics using isSelected. */\n  @Prop() selectionMode: MenuSelectionMode = 'none';\n  @Prop() sections: MenuSection[] = [];\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  /** Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry. */\n  @Prop() anchorAlignment: ChoicePopupAnchorAlignment = 'choice-cell';\n  /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\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  @Prop() menuWidth: string | undefined;\n  @Prop() minWidth: string | undefined;\n  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning */\n  @Prop() anchorId: string | undefined;\n  /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n  @Prop() initialFocusVisible: boolean = false;\n  /** Accessible name for the popup menu. */\n  @Prop() menuLabel: string = 'Menu';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n  @State() private focusRingVisible: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n  /** Emitted when a `gradient-picker` section swatch is chosen. */\n  @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;\n  /** Emitted when a generic `swatch-picker` section option is chosen. */\n  @Event() dsSwatchSelect!: EventEmitter<string>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private scrollResizeHandler: (() => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private itemEls: HTMLElement[] = [];\n  private positionRetryRaf: number | null = null;\n  private listenersReady = false;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.cancelPositionRetry();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.listenersReady = false;\n      this.focusRingVisible = this.initialFocusVisible;\n      this.listenersReady = true;\n      this.setupListeners();\n      this.schedulePositionUpdate(() => {\n        this.focusInitialItem();\n      });\n    } else if (this.shouldRender) {\n      this.cancelPositionRetry();\n      this.closing = true;\n      this.teardownListeners();\n      this.listenersReady = false;\n      const closeAnimationMs = this.closeAnimationMs;\n      if (closeAnimationMs <= 0) {\n        this.finishClose();\n        return;\n      }\n      this.closeTimer = setTimeout(() => {\n        this.closeTimer = null;\n        this.finishClose();\n      }, closeAnimationMs);\n    }\n  }\n\n  @Watch('anchor')\n  @Watch('anchorId')\n  onAnchorChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  @Watch('side')\n  @Watch('align')\n  @Watch('anchorAlignment')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  onPositionPropsChange() {\n    if (this.open) this.schedulePositionUpdate();\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 popupFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n  }\n\n  private get popupFallbackHeightPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    this.shouldRender = false;\n    this.closing = false;\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return document.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get anchorFocusTarget(): HTMLElement | null {\n    const anchor = this.resolvedAnchor;\n    if (!anchor) return null;\n    if (anchor.matches(MENU_FOCUSABLE_SELECTOR)) return anchor;\n    return anchor.querySelector<HTMLElement>(MENU_FOCUSABLE_SELECTOR) ?? anchor;\n  }\n\n  private focusAnchor() {\n    const anchor = this.resolvedAnchor as\n      | (HTMLElement & { setFocus?: () => Promise<void> | void })\n      | null;\n    if (anchor?.setFocus) {\n      anchor.setFocus();\n      return;\n    }\n    this.anchorFocusTarget?.focus();\n  }\n\n  private moveFocusAfterTab(backwards: boolean) {\n    const anchor = this.anchorFocusTarget;\n    if (!anchor) return;\n    if (backwards) {\n      anchor.focus();\n      return;\n    }\n\n    const candidates = Array.from(\n      document.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(\n      element =>\n        !element.closest('.menu-popup') &&\n        !element.closest('[inert]') &&\n        element.getClientRects().length > 0\n    );\n    const index = candidates.indexOf(anchor);\n    (candidates[index + 1] ?? anchor).focus();\n  }\n\n  private compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n    const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n    if (!popup) return true;\n    const focusables = Array.from(\n      popup.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(element => element.getClientRects().length > 0);\n    const currentIndex = focusables.indexOf(event.target as HTMLElement);\n    if (currentIndex < 0) return true;\n    return event.shiftKey ? currentIndex === 0 : currentIndex === focusables.length - 1;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(section =>\n      isMenuPickerSection(section) ? [] : section.items\n    );\n  }\n\n  /** Rich preference content is a non-modal dialog, not an ARIA action menu. */\n  private get hasCompositeSections(): boolean {\n    return this.activeSections.some(isMenuPickerSection);\n  }\n\n  private cancelPositionRetry() {\n    if (this.positionRetryRaf !== null) {\n      cancelAnimationFrame(this.positionRetryRaf);\n      this.positionRetryRaf = null;\n    }\n  }\n\n  /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n  private schedulePositionUpdate(onReady?: () => void) {\n    if (!this.open) return;\n\n    this.cancelPositionRetry();\n    this.positionReady = false;\n\n    let remaining = POSITION_RETRY_BUDGET;\n\n    const attempt = () => {\n      this.positionRetryRaf = null;\n      if (!this.open) return;\n\n      if (this.calculatePosition()) {\n        this.positionReady = true;\n        onReady?.();\n        return;\n      }\n\n      if (remaining > 0) {\n        remaining -= 1;\n        this.positionRetryRaf = requestAnimationFrame(attempt);\n      }\n    };\n\n    this.positionRetryRaf = requestAnimationFrame(attempt);\n  }\n\n  /** @returns `true` when anchor and popup were found and `pos` was updated. */\n  private calculatePosition(): boolean {\n    const anchorEl = this.resolvedAnchor;\n    if (!anchorEl) return false;\n    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n    if (!popup) return false;\n\n    const anchorRect = anchorEl.getBoundingClientRect();\n    const sectionInsetPx = this.viewportPadPx;\n    if (!this.minWidth) {\n      if (\n        this.anchorAlignment === 'choice-cell' &&\n        (this.side === 'top' || this.side === 'bottom')\n      ) {\n        popup.style.minWidth = `max(var(--dimension-menu-width-xs), ${choicePopupMinWidth(\n          anchorRect.width,\n          sectionInsetPx\n        )}px)`;\n      } else {\n        popup.style.removeProperty('min-width');\n      }\n    }\n\n    this.pos = computeMenuPosition({\n      anchorRect,\n      popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n      popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n      side: this.side,\n      align: this.align,\n      sideOffsetPx: this.sideOffsetPx,\n      alignOffsetPx: resolveChoicePopupAlignOffset({\n        align: this.align,\n        alignOffsetPx: this.alignOffsetPx,\n        sectionInsetPx,\n        anchorAlignment: this.anchorAlignment,\n      }),\n      viewportPadPx: this.viewportPadPx,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n    });\n    return true;\n  }\n\n  /** Focus the selected item when present, otherwise the first enabled item. */\n  private focusInitialItem() {\n    if (this.hasCompositeSections) {\n      requestAnimationFrame(() => {\n        this.el.querySelector<HTMLElement>('.menu-popup [tabindex=\"0\"]')?.focus();\n      });\n      return;\n    }\n\n    const flat = this.flatItems;\n    const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n    const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n    this.focusedIndex = selectedIdx >= 0 ? selectedIdx : firstEnabledIdx >= 0 ? firstEnabledIdx : 0;\n\n    requestAnimationFrame(() => {\n      const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n      btns[this.focusedIndex]?.focus();\n    });\n  }\n\n  private setupListeners() {\n    this.clickOutsideHandler = (e: MouseEvent) => {\n      const t = e.target as Node;\n      const popup = this.el.querySelector('.menu-popup');\n      const anchorEl = this.resolvedAnchor;\n      if (popup?.contains(t) || anchorEl?.contains(t)) return;\n      this.close();\n    };\n\n    this.scrollResizeHandler = () => {\n      if (this.shouldRender && !this.closing) this.calculatePosition();\n    };\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    window.addEventListener('scroll', this.scrollResizeHandler, true);\n    window.addEventListener('resize', this.scrollResizeHandler);\n  }\n\n  private teardownListeners() {\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.scrollResizeHandler) {\n      window.removeEventListener('scroll', this.scrollResizeHandler, true);\n      window.removeEventListener('resize', this.scrollResizeHandler);\n      this.scrollResizeHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close(restoreFocus = true) {\n    if (restoreFocus) this.focusAnchor();\n    this.dsClose.emit();\n    this.open = false;\n    this.onOpenChange(false);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      if (this.hasCompositeSections && !this.compositeTabLeavesPopup(e)) return;\n      e.preventDefault();\n      this.close(false);\n      this.moveFocusAfterTab(e.shiftKey);\n      return;\n    }\n\n    if (this.hasCompositeSections) return;\n\n    const flat = this.flatItems;\n    const enabled = flat\n      .map((it, i) => ({ it, i }))\n      .filter(({ it }) => !it.isInactive)\n      .map(({ i }) => i);\n    if (!enabled.length) return;\n\n    const cur = enabled.indexOf(this.focusedIndex);\n    const safe = cur < 0 ? 0 : cur;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n    }\n  }\n\n  private focusItem(idx: number) {\n    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n    btns[idx]?.focus();\n  }\n\n  private handleItemClick(item: MenuItemData) {\n    if (item.isInactive) return;\n    this.dsSelect.emit(item);\n  }\n\n  private handleGradientSelect(preset: ShellGradientPreset) {\n    this.dsGradientSelect.emit(preset);\n  }\n\n  private handleSwatchSelect(value: string) {\n    this.dsSwatchSelect.emit(value);\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.activeSections;\n    let flatIdx = 0;\n\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n    if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{\n            'menu-popup': true,\n            'menu-popup--closing': this.closing,\n            'ds-choice-popup': true,\n            'ds-choice-popup--closing': this.closing,\n          }}\n          style={popupStyle}\n          role={this.hasCompositeSections ? 'dialog' : 'menu'}\n          aria-label={this.menuLabel}\n          aria-orientation={this.hasCompositeSections ? undefined : 'vertical'}\n        >\n          <div class=\"ds-choice-list\">\n            {sections.map((section, si) => (\n              <div\n                key={si}\n                class={{\n                  'menu-section': true,\n                  'menu-section--divided': si < sections.length - 1,\n                  'menu-section--gradient-picker': isMenuPickerSection(section),\n                  'ds-choice-section': true,\n                  'ds-choice-section--divided': si < sections.length - 1,\n                }}\n                role={section.header ? 'group' : undefined}\n                aria-label={section.header}\n              >\n                {section.header && (\n                  <ds-text\n                    class=\"section-header ds-choice-section__header ds-control--md\"\n                    as=\"span\"\n                    variant=\"text-body-small\"\n                    emphasis\n                    color=\"primary\"\n                    aria-hidden=\"true\"\n                  >\n                    {section.header}\n                  </ds-text>\n                )}\n                {isMenuGradientPickerSection(section) ? (\n                  <ds-swatch-picker\n                    value={section.value}\n                    groupLabel={section.header ?? 'Shell gradient theme'}\n                    sections={shellGradientPickerSections()}\n                    onDsChange={(e: CustomEvent<string>) => {\n                      e.stopPropagation();\n                      this.handleGradientSelect(e.detail as ShellGradientPreset);\n                    }}\n                  />\n                ) : isMenuSwatchPickerSection(section) ? (\n                  <ds-swatch-picker\n                    value={section.value}\n                    groupLabel={section.groupLabel ?? section.header ?? 'Swatch options'}\n                    options={section.options ?? []}\n                    sections={section.sections ?? []}\n                    onDsChange={(e: CustomEvent<string>) => {\n                      e.stopPropagation();\n                      this.handleSwatchSelect(e.detail);\n                    }}\n                  />\n                ) : (\n                  section.items.map(item => {\n                    const idx = flatIdx++;\n                    const isFocused = this.focusedIndex === idx;\n                    const isRadioItem =\n                      !this.hasCompositeSections &&\n                      this.selectionMode === 'single' &&\n                      !item.showSwitch;\n                    return (\n                      <button\n                        key={idx}\n                        type=\"button\"\n                        class={{\n                          'menu-item': true,\n                          'ds-choice-item': true,\n                          'ds-control--md': true,\n                          'ds-focus-ring-inset': true,\n                          'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n                          'ds-interaction-fill': !item.isInactive,\n                          'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n                          'menu-item--selected': !!item.isSelected,\n                          'ds-control-inactive': !!item.isInactive,\n                          'menu-item--destructive': !!item.isDestructive,\n                          'menu-item--focused': isFocused,\n                        }}\n                        role={\n                          this.hasCompositeSections\n                            ? undefined\n                            : item.showSwitch\n                            ? 'menuitemcheckbox'\n                            : isRadioItem\n                            ? 'menuitemradio'\n                            : 'menuitem'\n                        }\n                        aria-checked={\n                          !this.hasCompositeSections && item.showSwitch\n                            ? String(!!item.switchValue)\n                            : isRadioItem\n                            ? String(!!item.isSelected)\n                            : undefined\n                        }\n                        aria-pressed={\n                          this.hasCompositeSections\n                            ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n                            : undefined\n                        }\n                        aria-current={\n                          !this.hasCompositeSections &&\n                          !item.showSwitch &&\n                          !isRadioItem &&\n                          item.isSelected\n                            ? 'true'\n                            : undefined\n                        }\n                        disabled={item.isInactive}\n                        tabIndex={this.hasCompositeSections ? 0 : isFocused ? 0 : -1}\n                        onMouseDown={() => {\n                          this.focusRingVisible = false;\n                        }}\n                        onClick={() => this.handleItemClick(item)}\n                        onFocus={() => {\n                          this.focusedIndex = idx;\n                        }}\n                      >\n                        {isRadioItem && (\n                          <span\n                            class=\"menu-item__radio-box ds-interaction-fill__content\"\n                            aria-hidden=\"true\"\n                          >\n                            <span\n                              class={{\n                                'menu-item__radio': true,\n                                'menu-item__radio--checked': !!item.isSelected,\n                              }}\n                            >\n                              {item.isSelected && <span class=\"menu-item__radio-dot\" />}\n                            </span>\n                          </span>\n                        )}\n                        <div class=\"menu-item__content ds-choice-item__content ds-interaction-fill__content\">\n                          <ds-text\n                            class=\"menu-item__label ds-choice-item__label\"\n                            as=\"span\"\n                            variant=\"text-body-medium\"\n                            color={item.isSelected ? 'primary' : 'secondary'}\n                          >\n                            {item.label}\n                          </ds-text>\n                          {item.subtext && (\n                            <ds-text\n                              class=\"menu-item__subtext ds-choice-item__subtext\"\n                              as=\"span\"\n                              variant=\"text-body-small\"\n                              color=\"secondary\"\n                            >\n                              {item.subtext}\n                            </ds-text>\n                          )}\n                        </div>\n                        {item.dot && (\n                          <span\n                            class=\"menu-item__dot-box ds-interaction-fill__content\"\n                            aria-hidden=\"true\"\n                          >\n                            <ds-badge\n                              class=\"menu-item__dot\"\n                              variant=\"dot\"\n                              hasRing={false}\n                              label=\"\"\n                            />\n                          </span>\n                        )}\n                        {item.showSwitch && (\n                          <ds-switch\n                            class=\"menu-item__switch ds-interaction-fill__content\"\n                            size=\"md\"\n                            checked={!!item.switchValue}\n                            presentation\n                          />\n                        )}\n                      </button>\n                    );\n                  })\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-Di-ThR90.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["panelToolHeaderCss","PanelToolHeader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","showBack","backIcon","backAriaLabel","showMenu","menuAriaLabel","menuTriggerId","menuExpanded","actions","focusMenuTrigger","trigger","el","querySelector","setFocus","render","authoredActions","length","id","icon","ariaLabel","triggerId","controls","menuControls","expanded","haspopup","h","Host","key","class","variant","size","activeFill","hasBorder","onDsClick","event","dsBack","emit","detail","as","emphasis","color","lineTruncation","map","action","undefined","pressed","isInactive","dsMenuToggle","dsAction","originalEvent"],"sources":["src/wc/components/PanelToolHeader/PanelToolHeader.css?tag=ds-panel-tool-header&encapsulation=scoped","src/wc/components/PanelToolHeader/PanelToolHeader.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n:host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n}\n\n.panel-tool-header {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  color: var(--color-foreground-primary);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.panel-tool-header__leading,\n.panel-tool-header__trailing {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.panel-tool-header__leading:empty,\n.panel-tool-header__trailing:empty {\n  display: none;\n}\n\n.panel-tool-header__leading {\n  flex: 0 0 auto;\n}\n\n.panel-tool-header__trailing {\n  flex: 0 0 auto;\n  gap: var(--dimension-space-050);\n  justify-content: flex-end;\n}\n\nds-text.panel-tool-header__heading {\n  display: inline-flex;\n  flex: 1 1 0;\n  align-items: center;\n  width: auto;\n  min-width: 0;\n  height: var(--ds-control-height);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport type { PanelToolsHeaderAction } from '../PanelTools/panel-tools-types';\n\n@Component({\n  tag: 'ds-panel-tool-header',\n  styleUrl: 'PanelToolHeader.css',\n  scoped: true,\n})\nexport class PanelToolHeader {\n  @Element() el!: HTMLElement;\n\n  /** Visible heading for the active tool view. */\n  @Prop() heading: string = '';\n  /** Show the leading Back action. */\n  @Prop() showBack: boolean = false;\n  /** Canonical icon for the leading navigation or dismiss action. */\n  @Prop() backIcon: string = 'ChevronLeft';\n  /** Accessible name for the leading navigation or dismiss action. */\n  @Prop() backAriaLabel: string = 'Back';\n  /** Show the trailing options-menu trigger. */\n  @Prop() showMenu: boolean = true;\n  /** Accessible name for the options-menu trigger. */\n  @Prop() menuAriaLabel: string = 'More options';\n  /** Stable id placed on the menu trigger host for ds-menu anchoring. */\n  @Prop() menuTriggerId: string = '';\n  /** Id of the menu controlled by the trigger. */\n  @Prop() menuControls: string | undefined;\n  /** Whether the controlled menu is open. */\n  @Prop() menuExpanded: boolean = false;\n  /** Trailing application-owned icon actions. When present, these replace the legacy menu action. */\n  @Prop() actions: PanelToolsHeaderAction[] = [];\n\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n  @Event() dsMenuToggle!: EventEmitter<MouseEvent>;\n  @Event() dsAction!: EventEmitter<{ id: string; originalEvent: MouseEvent }>;\n\n  @Method()\n  async focusMenuTrigger() {\n    const trigger = this.el.querySelector(\n      'ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id=\"menu\"]'\n    ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n    await trigger?.setFocus?.();\n  }\n\n  render() {\n    const authoredActions = this.actions.length > 0;\n    const actions: PanelToolsHeaderAction[] = authoredActions\n      ? this.actions\n      : this.showMenu\n      ? [\n          {\n            id: 'menu',\n            icon: 'Ellipses',\n            ariaLabel: this.menuAriaLabel,\n            triggerId: this.menuTriggerId,\n            controls: this.menuControls,\n            expanded: this.menuExpanded,\n            haspopup: 'menu',\n          },\n        ]\n      : [];\n\n    return (\n      <Host>\n        <header class=\"panel-tool-header\">\n          <div class=\"panel-tool-header__leading\">\n            {this.showBack ? (\n              <ds-button-unfilled\n                class=\"panel-tool-header__back\"\n                variant=\"icon\"\n                icon={this.backIcon}\n                size=\"md\"\n                aria-label={this.backAriaLabel}\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n              />\n            ) : null}\n          </div>\n          <ds-text\n            class=\"panel-tool-header__heading ds-control--md\"\n            as=\"h2\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"primary\"\n            lineTruncation={1}\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"panel-tool-header__trailing\">\n            {actions.map(action => (\n              <ds-button-unfilled\n                key={action.id}\n                id={action.triggerId || undefined}\n                data-header-action-id={action.id}\n                class={{\n                  'panel-tool-header__action': true,\n                  'panel-tool-header__menu': action.id === 'menu',\n                }}\n                variant=\"icon\"\n                icon={action.icon}\n                size=\"md\"\n                aria-label={action.ariaLabel}\n                haspopup={action.haspopup}\n                controls={action.controls}\n                expanded={action.expanded}\n                pressed={action.pressed}\n                isInactive={action.isInactive}\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) => {\n                  if (!authoredActions && action.id === 'menu')\n                    this.dsMenuToggle.emit(event.detail);\n                  this.dsAction.emit({ id: action.id, originalEvent: event.detail });\n                }}\n              />\n            ))}\n          </div>\n        </header>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iPAAA,MAAMA,EAAqB,IAAM,uyE,MCQpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,mJASUC,KAAAC,QAAkB,GAElBD,KAAAE,SAAoB,MAEpBF,KAAAG,SAAmB,cAEnBH,KAAAI,cAAwB,OAExBJ,KAAAK,SAAoB,KAEpBL,KAAAM,cAAwB,eAExBN,KAAAO,cAAwB,GAIxBP,KAAAQ,aAAwB,MAExBR,KAAAS,QAAoC,EA4F7C,CArFC,sBAAMC,GACJ,MAAMC,EAAUX,KAAKY,GAAGC,cACtB,sGAEIF,GAASG,a,CAGjB,MAAAC,GACE,MAAMC,EAAkBhB,KAAKS,QAAQQ,OAAS,EAC9C,MAAMR,EAAoCO,EACtChB,KAAKS,QACLT,KAAKK,SACL,CACE,CACEa,GAAI,OACJC,KAAM,WACNC,UAAWpB,KAAKM,cAChBe,UAAWrB,KAAKO,cAChBe,SAAUtB,KAAKuB,aACfC,SAAUxB,KAAKQ,aACfiB,SAAU,SAGd,GAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAM,qBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8BACR7B,KAAKE,SACJwB,EAAA,sBACEG,MAAM,0BACNC,QAAQ,OACRX,KAAMnB,KAAKG,SACX4B,KAAK,KAAI,aACG/B,KAAKI,cACjB4B,WAAY,MACZC,UAAW,MACXC,UAAYC,GAAmCnC,KAAKoC,OAAOC,KAAKF,EAAMG,UAEtE,MAENZ,EAAA,WAAAE,IAAA,2CACEC,MAAM,4CACNU,GAAG,KACHT,QAAQ,mBACRU,SAAQ,KACRC,MAAM,UACNC,eAAgB,GAEf1C,KAAKC,SAERyB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACRpB,EAAQkC,KAAIC,GACXlB,EAAA,sBACEE,IAAKgB,EAAO1B,GACZA,GAAI0B,EAAOvB,WAAawB,UAAS,wBACVD,EAAO1B,GAC9BW,MAAO,CACL,4BAA6B,KAC7B,0BAA2Be,EAAO1B,KAAO,QAE3CY,QAAQ,OACRX,KAAMyB,EAAOzB,KACbY,KAAK,KAAI,aACGa,EAAOxB,UACnBK,SAAUmB,EAAOnB,SACjBH,SAAUsB,EAAOtB,SACjBE,SAAUoB,EAAOpB,SACjBsB,QAASF,EAAOE,QAChBC,WAAYH,EAAOG,WACnBf,WAAY,MACZC,UAAW,MACXC,UAAYC,IACV,IAAKnB,GAAmB4B,EAAO1B,KAAO,OACpClB,KAAKgD,aAAaX,KAAKF,EAAMG,QAC/BtC,KAAKiD,SAASZ,KAAK,CAAEnB,GAAI0B,EAAO1B,GAAIgC,cAAef,EAAMG,QAAS,Q","ignoreList":[]}