@ds-mo/ui 9.0.0 → 9.1.0

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

@@ -0,0 +1 @@
+{"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","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","type","isDestructive","showSwitch","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  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","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } 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';\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  @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 (HTMLElement & { setFocus?: () => Promise<void> | void }) | 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(document.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR))\n      .filter(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(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 (this.anchorAlignment === 'choice-cell' && (this.side === 'top' || this.side === 'bottom')) {\n        popup.style.minWidth = `max(var(--dimension-menu-width-xs), ${choicePopupMinWidth(anchorRect.width, sectionInsetPx)}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\n      ? selectedIdx\n      : (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.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).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(); 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(); 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(); e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault(); 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                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={this.hasCompositeSections ? undefined : item.showSwitch ? 'menuitemcheckbox' : 'menuitem'}\n                    aria-checked={!this.hasCompositeSections && item.showSwitch ? String(!!item.switchValue) : undefined}\n                    aria-pressed={this.hasCompositeSections\n                      ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n                      : undefined}\n                    aria-current={!this.hasCompositeSections && !item.showSwitch && item.isSelected ? 'true' : undefined}\n                    disabled={item.isInactive}\n                    tabIndex={this.hasCompositeSections ? 0 : isFocused ? 0 : -1}\n                    onMouseDown={() => { this.focusRingVisible = false; }}\n                    onClick={() => this.handleItemClick(item)}\n                    onFocus={() => { this.focusedIndex = idx; }}\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 class=\"menu-item__subtext ds-choice-item__subtext\" as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n                          {item.subtext}\n                        </ds-text>\n                      )}\n                    </div>\n                    {item.dot && (\n                      <span class=\"menu-item__dot-box ds-interaction-fill__content\" aria-hidden=\"true\">\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            </div>\n          ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-17T21:08:27",
+  "timestamp": "2026-07-17T23:45:36",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -1092,12 +1092,9 @@
         ],
         "ds-menu": [
           "ds-text",
-          "ds-shell-gradient-picker",
+          "ds-swatch-picker",
           "ds-badge",
           "ds-switch"
-        ],
-        "ds-shell-gradient-picker": [
-          "ds-shell-gradient-swatch"
         ]
       }
     },
@@ -6855,6 +6852,47 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "anchorAlignment",
+          "type": "\"choice-cell\" | \"popup-frame\"",
+          "complexType": {
+            "original": "ChoicePopupAnchorAlignment",
+            "resolved": "\"choice-cell\" | \"popup-frame\"",
+            "references": {
+              "ChoicePopupAnchorAlignment": {
+                "location": "import",
+                "path": "../../utils",
+                "id": "src/wc/utils/index.ts::ChoicePopupAnchorAlignment",
+                "referenceLocation": "ChoicePopupAnchorAlignment"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "anchor-alignment",
+          "reflectToAttr": false,
+          "docs": "Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'choice-cell'"
+            }
+          ],
+          "default": "'choice-cell'",
+          "values": [
+            {
+              "value": "choice-cell",
+              "type": "string"
+            },
+            {
+              "value": "popup-frame",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "anchorId",
           "type": "string | undefined",
@@ -7229,6 +7267,20 @@
           "composed": true,
           "docs": "",
           "docsTags": []
+        },
+        {
+          "event": "dsSwatchSelect",
+          "detail": "string",
+          "bubbles": true,
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when a generic `swatch-picker` section option is chosen.",
+          "docsTags": []
         }
       ],
       "listeners": [
@@ -7247,20 +7299,17 @@
       ],
       "dependencies": [
         "ds-text",
-        "ds-shell-gradient-picker",
+        "ds-swatch-picker",
         "ds-badge",
         "ds-switch"
       ],
       "dependencyGraph": {
         "ds-menu": [
           "ds-text",
-          "ds-shell-gradient-picker",
+          "ds-swatch-picker",
           "ds-badge",
           "ds-switch"
         ],
-        "ds-shell-gradient-picker": [
-          "ds-shell-gradient-swatch"
-        ],
         "ds-badge": [
           "ds-text"
         ],
@@ -11288,7 +11337,12 @@
       "encapsulation": "scoped",
       "tag": "ds-shell-gradient-picker",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "deprecated",
+          "text": "Use `ds-swatch-picker` with shell preset options."
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -11403,27 +11457,28 @@
       "slots": [],
       "parts": [],
       "states": [],
-      "dependents": [
-        "ds-menu"
-      ],
+      "dependents": [],
       "dependencies": [
-        "ds-shell-gradient-swatch"
+        "ds-swatch-picker"
       ],
       "dependencyGraph": {
         "ds-shell-gradient-picker": [
-          "ds-shell-gradient-swatch"
-        ],
-        "ds-menu": [
-          "ds-shell-gradient-picker"
+          "ds-swatch-picker"
         ]
-      }
+      },
+      "deprecation": "Use `ds-swatch-picker` with shell preset options."
     },
     {
       "filePath": "src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx",
       "encapsulation": "scoped",
       "tag": "ds-shell-gradient-swatch",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "deprecated",
+          "text": "Use `ds-swatch-picker`; individual swatches are implementation detail."
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -11599,15 +11654,10 @@
       "slots": [],
       "parts": [],
       "states": [],
-      "dependents": [
-        "ds-shell-gradient-picker"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "ds-shell-gradient-picker": [
-          "ds-shell-gradient-swatch"
-        ]
-      }
+      "dependencyGraph": {},
+      "deprecation": "Use `ds-swatch-picker`; individual swatches are implementation detail."
     },
     {
       "filePath": "src/wc/components/Skeleton/Skeleton.tsx",
@@ -12943,6 +12993,179 @@
         ]
       }
     },
+    {
+      "filePath": "src/wc/components/SwatchPicker/SwatchPicker.tsx",
+      "encapsulation": "scoped",
+      "tag": "ds-swatch-picker",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "groupLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "group-label",
+          "reflectToAttr": false,
+          "docs": "Accessible name for the complete one-of-many choice.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Swatch options'"
+            }
+          ],
+          "default": "'Swatch options'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "options",
+          "type": "SwatchPickerOption[]",
+          "complexType": {
+            "original": "SwatchPickerOption[]",
+            "resolved": "SwatchPickerOption[]",
+            "references": {
+              "SwatchPickerOption": {
+                "location": "import",
+                "path": "./swatch-picker-types",
+                "id": "src/wc/components/SwatchPicker/swatch-picker-types.ts::SwatchPickerOption",
+                "referenceLocation": "SwatchPickerOption"
+              }
+            }
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Flat option list. Sections take precedence when supplied. Assign as a JavaScript property.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "[]"
+            }
+          ],
+          "default": "[]",
+          "values": [
+            {
+              "type": "SwatchPickerOption[]"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "sections",
+          "type": "SwatchPickerSection[]",
+          "complexType": {
+            "original": "SwatchPickerSection[]",
+            "resolved": "SwatchPickerSection[]",
+            "references": {
+              "SwatchPickerSection": {
+                "location": "import",
+                "path": "./swatch-picker-types",
+                "id": "src/wc/components/SwatchPicker/swatch-picker-types.ts::SwatchPickerSection",
+                "referenceLocation": "SwatchPickerSection"
+              }
+            }
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Visually separated option groups that remain one radio group. Assign as a JavaScript property.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "[]"
+            }
+          ],
+          "default": "[]",
+          "values": [
+            {
+              "type": "SwatchPickerSection[]"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "value",
+          "reflectToAttr": true,
+          "docs": "Selected option value.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "dsChange",
+          "detail": "string",
+          "bubbles": true,
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [
+        "ds-menu",
+        "ds-shell-gradient-picker"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "ds-menu": [
+          "ds-swatch-picker"
+        ],
+        "ds-shell-gradient-picker": [
+          "ds-swatch-picker"
+        ]
+      }
+    },
     {
       "filePath": "src/wc/components/Switch/Switch.tsx",
       "encapsulation": "shadow",
@@ -15681,7 +15904,7 @@
       "path": "src/wc/components/Menu/menu-types.ts"
     },
     "src/wc/components/Menu/menu-types.ts::MenuSection": {
-      "declaration": "export type MenuSection = MenuItemsSection | MenuGradientPickerSection;",
+      "declaration": "export type MenuSection =\n  | MenuItemsSection\n  | MenuGradientPickerSection\n  | MenuSwatchPickerSection;",
       "docstring": "",
       "path": "src/wc/components/Menu/menu-types.ts"
     },
@@ -15695,6 +15918,11 @@
       "docstring": "",
       "path": "src/wc/components/Menu/menu-position.ts"
     },
+    "src/wc/utils/index.ts::ChoicePopupAnchorAlignment": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/wc/utils/index.ts"
+    },
     "src/wc/components/PanelNav/panel-nav-types.ts::PanelNavGroup": {
       "declaration": "export interface PanelNavGroup {\n  id?: string;\n  label?: string;\n  items: PanelNavItem[];\n}",
       "docstring": "",
@@ -15729,6 +15957,16 @@
       "declaration": "any",
       "docstring": "",
       "path": "src/wc/components/ShellGradientSwatch/shell-gradient-swatch-types.ts"
+    },
+    "src/wc/components/SwatchPicker/swatch-picker-types.ts::SwatchPickerOption": {
+      "declaration": "export interface SwatchPickerOption {\n  /** Stable value emitted when this option is selected. */\n  value: string;\n  /** Accessible option name; the visual preview never replaces this label. */\n  label: string;\n  preview: SwatchPickerPreview;\n  isInactive?: boolean;\n}",
+      "docstring": "",
+      "path": "src/wc/components/SwatchPicker/swatch-picker-types.ts"
+    },
+    "src/wc/components/SwatchPicker/swatch-picker-types.ts::SwatchPickerSection": {
+      "declaration": "export interface SwatchPickerSection {\n  /** Sections remain one radio group and are separated visually. */\n  options: SwatchPickerOption[];\n}",
+      "docstring": "",
+      "path": "src/wc/components/SwatchPicker/swatch-picker-types.ts"
     }
   }
 }

package/dist/lib/components/Menu/menu-placement.d.ts

@@ -1,8 +1,10 @@
+import type { ChoicePopupAnchorAlignment } from '../../utils/choice-popup-alignment';
 import type { MenuAlign, MenuSide } from './menu-position';
 /** Placement props bindable on `ds-menu` (side, align, offsets). */
 export interface MenuPlacement {
     side: MenuSide;
     align: MenuAlign;
+    anchorAlignment: ChoicePopupAnchorAlignment;
     sideOffset: number | string;
     alignOffset: number | string;
 }
@@ -11,13 +13,14 @@ export interface MenuPlacement {
  * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).
  *
  * Not for BarNav overflow menus — those use `side="bottom"` / `align="end"` internally.
- * `align: 'end'` bottom-aligns on the anchor; offsets nudge into the content area:
+ * `align: 'end'` bottom-aligns the last choice cell on the anchor; the side offset nudges into the content area:
  * - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).
- * - `alignOffset` space-050 (4px): 4px below the footer user row.
+ * - `anchorAlignment: 'choice-cell'`: the shared section inset puts the last row edge on the footer user row.
  */
 export declare const PANEL_NAV_USER_MENU_PLACEMENT: {
     readonly side: "right";
     readonly align: "end";
+    readonly anchorAlignment: "choice-cell";
     readonly sideOffset: "calc(var(--dimension-space-100) + var(--dimension-space-050))";
-    readonly alignOffset: "var(--dimension-space-050)";
+    readonly alignOffset: 0;
 };

package/dist/lib/shell/index.d.ts

@@ -6,8 +6,8 @@ export { SHELL_GRADIENT_IMAGE_VAR, SHELL_GRADIENT_SIZE_VAR, SHELL_GRADIENT_POSIT
 export type { ShellGradientLayout, ShellViewportDimensions } from './shell-gradient';
 export type { MenuPlacement } from '../components/Menu/menu-placement';
 export { PANEL_NAV_USER_MENU_PLACEMENT, } from '../components/Menu/menu-placement';
-export type { ShellGradientPreset } from './shell-gradient-presets';
-export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, isShellGradientPreset, normalizeShellGradientPreset, shellGradientPresetStopToken, } from './shell-gradient-presets';
+export type { ShellGradientPickerOption, ShellGradientPickerPreview, ShellGradientPickerSection, ShellGradientPreset, } from './shell-gradient-presets';
+export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, isShellGradientPreset, normalizeShellGradientPreset, shellGradientPickerSections, shellGradientPresetStopToken, } from './shell-gradient-presets';
 export type { ChromeTransitionDetail, ChromeTransitionSource } from './chrome-transition';
 export { CHROME_TRANSITION_END, CHROME_TRANSITION_START, ChromeTransitionDepth, createRafCoalescer, readChromeTransitionSource, readChromeTransitionPhase, } from './chrome-transition';
 export { barGradientPositionFromPanelWidth, isPanelNavCollapsed, panelWidthPxFromTokens, readCssVarWidthPx, readPanelNavWidthTokens, } from './shell-chrome-metrics';

package/dist/lib/shell/index.js

@@ -137,6 +137,12 @@ var SHELL_GRADIENT_PRESETS = [
   "warm",
   "fresh"
 ];
+var SHELL_GRADIENT_WASH_PRESETS = [
+  "cool",
+  "neutral",
+  "warm",
+  "fresh"
+];
 var DEFAULT_SHELL_GRADIENT_PRESET = "neutral";
 var SHELL_GRADIENT_PRESET_LABELS = {
   none: "None",
@@ -184,6 +190,13 @@ function shellGradientPresetStopToken(preset) {
   const stops = SHELL_GRADIENT_RECIPES[preset].stops;
   return stops[stops.length - 1]?.color ?? null;
 }
+function shellGradientPresetRecipe(preset) {
+  const normalized = normalizeShellGradientPreset(preset);
+  return normalized === "none" ? null : SHELL_GRADIENT_RECIPES[normalized];
+}
+function shellGradientPresetOpacity(preset) {
+  return String(shellGradientPresetRecipe(preset)?.opacity ?? 0);
+}
 function isShellGradientPreset(value) {
   return SHELL_GRADIENT_PRESETS.includes(value);
 }
@@ -199,6 +212,30 @@ function buildShellRadialGradientFromStops(stops) {
   const serialized = stops.map((stop) => `${stop.color} ${stop.position}%`).join(", ");
   return `radial-gradient(${GRADIENT_GEOMETRY}, ${serialized})`;
 }
+function shellGradientPickerSections() {
+  return [
+    {
+      options: [{
+        value: "none",
+        label: SHELL_GRADIENT_PRESET_LABELS.none,
+        preview: {
+          backgroundColor: "var(--color-background-secondary)"
+        }
+      }]
+    },
+    {
+      options: SHELL_GRADIENT_WASH_PRESETS.map((preset) => ({
+        value: preset,
+        label: SHELL_GRADIENT_PRESET_LABELS[preset],
+        preview: {
+          backgroundColor: "var(--color-background-secondary)",
+          backgroundImage: buildShellRadialGradientForPreset(preset),
+          opacity: Number(shellGradientPresetOpacity(preset))
+        }
+      }))
+    }
+  ];
+}
 
 // src/wc/shell/shell-gradient.ts
 var SHELL_GRADIENT_IMAGE_VAR = "--ds-shell-gradient-image";
@@ -238,50 +275,13 @@ function shellChromeSurfacePosition(leftPx, topPx) {
   return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;
 }
 
-// src/wc/utils/token-defaults.ts
-import {
-  dimensionIconographyMd,
-  dimensionIconographySm,
-  dimensionIconographyXs,
-  dimensionMenuWidthXs,
-  dimensionPanelWidth2xs,
-  dimensionPanelWidthLg,
-  dimensionPanelWidthMd,
-  dimensionRadius025,
-  dimensionSize200,
-  dimensionSize300,
-  dimensionSize400,
-  dimensionSize600,
-  dimensionSize800,
-  dimensionSpace050,
-  dimensionSpace200,
-  typographyLineheightLg,
-  typographyLineheightMd,
-  typographyLineheightSm,
-  typographyLineheightXl,
-  typographyLineheightXs,
-  effectAnimationDelayLong2,
-  effectAnimationDelayMedium1,
-  effectAnimationDelayMedium3,
-  effectAnimationDelayInstant,
-  effectAnimationDelayShort2,
-  effectAnimationDurationMedium1,
-  effectAnimationDurationShort3,
-  effectMotionShort2,
-  effectMotionShort3
-} from "@ds-mo/tokens/ts";
-var TOKEN_CSS_LENGTHS = {
-  space050: `var(${dimensionSpace050})`,
-  space200: `var(${dimensionSpace200})`,
-  menuWidthXs: `var(${dimensionMenuWidthXs})`
-};
-
 // src/wc/components/Menu/menu-placement.ts
 var PANEL_NAV_USER_MENU_PLACEMENT = {
   side: "right",
   align: "end",
+  anchorAlignment: "choice-cell",
   sideOffset: "calc(var(--dimension-space-100) + var(--dimension-space-050))",
-  alignOffset: TOKEN_CSS_LENGTHS.space050
+  alignOffset: 0
 };
 
 // src/wc/shell/chrome-transition.ts
@@ -469,6 +469,7 @@ export {
   shellChromeLayerActive,
   shellChromeSurfacePosition,
   shellGradientImage,
+  shellGradientPickerSections,
   shellGradientPositionBar,
   shellGradientPositionPanel,
   shellGradientPresetStopToken,