@ds-mo/ui 14.27.0 → 14.28.0

package/dist/mcp-data/registry/menu.json

@@ -50,6 +50,7 @@
         "pattern:menu-trigger"
       ],
       "accessibility": [
+        "An empty choice collection can show informational copy in a focusable non-modal dialog instead of rendering a fake disabled action. Escape and Tab retain the normal popup dismissal and anchor-focus behavior.",
         "Anchor the menu to the control that opens it and return focus to that control when the menu closes.",
         "Open with visible initial focus only when the trigger was activated from the keyboard.",
         "Keep disabled items discoverable only when their unavailable state is meaningful.",
@@ -156,6 +157,15 @@
           "mutable": false,
           "description": "Explicit collision owner; otherwise the nearest data-ds-overlay-boundary ancestor is used."
         },
+        "emptyMessage": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "empty-message",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Informational message shown when there are no choices. Uses a non-modal dialog, not a fake menu item."
+        },
         "initialFocusVisible": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -339,6 +349,15 @@
         "mutable": false,
         "description": "Explicit collision owner; otherwise the nearest data-ds-overlay-boundary ancestor is used."
       },
+      "emptyMessage": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "empty-message",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Informational message shown when there are no choices. Uses a non-modal dialog, not a fake menu item."
+      },
       "initialFocusVisible": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -523,12 +542,12 @@
   "files": [
     {
       "path": "src/wc/components/Menu/Menu.css",
-      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n/* Inactive: `.ds-control-inactive` (50% 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 keeps an 8px label-to-control gap without changing the\n   density gap between a prefix icon or drag handle and the label. */\n.menu-item__switch {\n  flex-shrink: 0;\n  margin-inline-start: calc(\n    var(--dimension-space-100) - var(--ds-control-gap, var(--dimension-space-050))\n  );\n}\n\n/* ── Prefix icon / reorder handle ────────────────────────────────────────── */\n\n.menu-item > .menu-item__handle {\n  pointer-events: auto;\n  cursor: grab;\n  touch-action: none;\n}\n\n.menu-item > .menu-item__handle:active,\n.menu-item--dragging > .menu-item__handle {\n  cursor: grabbing;\n}\n\n.menu-item--dragging {\n  opacity: var(--effect-opacity-medium);\n}\n\n.menu-item__drop-rail {\n  position: absolute;\n  z-index: var(--dimension-z-index-raised);\n  inset-inline: var(--dimension-space-050);\n  block-size: var(--dimension-stroke-width-025);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-border-bold-brand);\n  pointer-events: none;\n}\n\n.menu-item__drop-rail--before {\n  inset-block-start: calc(-1 * var(--dimension-space-025));\n  transform: translateY(-50%);\n}\n\n.menu-item__drop-rail--after {\n  inset-block-end: calc(-1 * var(--dimension-space-025));\n  transform: translateY(50%);\n}\n\n@media (forced-colors: active) {\n  .menu-item__drop-rail {\n    background: var(--ds-forced-color-selected);\n  }\n}\n",
+      "content": "@import '../../utils/choice-list.css';\n@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.menu-empty {\n  padding: var(--dimension-space-200);\n  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\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 keeps an 8px label-to-control gap without changing the\n   density gap between a prefix icon or drag handle and the label. */\n.menu-item__switch {\n  flex-shrink: 0;\n  margin-inline-start: calc(\n    var(--dimension-space-100) - var(--ds-control-gap, var(--dimension-space-050))\n  );\n}\n\n/* ── Prefix icon / reorder handle ────────────────────────────────────────── */\n\n.menu-item > .menu-item__handle {\n  pointer-events: auto;\n  cursor: grab;\n  touch-action: none;\n}\n\n.menu-item > .menu-item__handle:active,\n.menu-item--dragging > .menu-item__handle {\n  cursor: grabbing;\n}\n\n.menu-item--dragging {\n  opacity: var(--effect-opacity-medium);\n}\n\n.menu-item__drop-rail {\n  position: absolute;\n  z-index: var(--dimension-z-index-raised);\n  inset-inline: var(--dimension-space-050);\n  block-size: var(--dimension-stroke-width-025);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-border-bold-brand);\n  pointer-events: none;\n}\n\n.menu-item__drop-rail--before {\n  inset-block-start: calc(-1 * var(--dimension-space-025));\n  transform: translateY(-50%);\n}\n\n.menu-item__drop-rail--after {\n  inset-block-end: calc(-1 * var(--dimension-space-025));\n  transform: translateY(50%);\n}\n\n@media (forced-colors: active) {\n  .menu-item__drop-rail {\n    background: var(--ds-forced-color-selected);\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Menu/Menu.tsx",
-      "content": "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  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n  type ChoicePopupAnchorAlignment,\n  type ControlSize,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { computeAnchoredPosition, type AnchoredPositionInput } from '../../utils/anchored-position';\nimport type { MenuAlign, MenuSide } from './menu-position';\nimport {\n  isMenuPickerSection,\n  isMenuSwatchPickerSection,\n  type MenuItemData,\n  type MenuReorderDetail,\n  type MenuSection,\n} from './menu-types';\nimport { snapshotMenuSections } from './menu-sections';\nimport {\n  createMenuReorderDetail,\n  locateMenuItem,\n  menuReorderableRange,\n  moveReorderableMenuItemBefore,\n  moveReorderableMenuItemBy,\n} from './menu-reorder';\n\nexport type MenuSelectionMode = 'none' | 'single';\nexport type MenuSize = ControlSize;\nconst MENU_ITEM_TAG_SIZE: Record<MenuSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\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  /** Choice-row density. */\n  @Prop() size: MenuSize = 'md';\n  /** Give ordinary rows mutually-exclusive menu semantics using isSelected. */\n  @Prop() selectionMode: MenuSelectionMode = 'none';\n  @Prop() sections: MenuSection[] = [];\n  /** Preferred side; placement flips to the opposite side when that offers a better fit. */\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  /** Explicit collision owner; otherwise the nearest data-ds-overlay-boundary ancestor is used. */\n  @Prop() boundary: HTMLElement | 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 availableHeight: number | null = null;\n  @State() private focusRingVisible: boolean = false;\n  @State() private reorderFromFlat: number | null = null;\n  @State() private reorderInsertBefore: number | null = null;\n  @State() private reorderAnnouncement = '';\n\n  @Event() dsClose!: EventEmitter<void>;\n  /** Emitted after the popup's exit motion is complete and its rendered content is removed. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n  /** Emitted when a generic `swatch-picker` section option is chosen. */\n  @Event() dsSwatchSelect!: EventEmitter<string>;\n  /** Emitted after a pointer drop or keyboard move; Menu never mutates item order. */\n  @Event() dsReorder!: EventEmitter<MenuReorderDetail>;\n\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private positionReadyCallback: (() => void) | undefined;\n  private suppressItemClick = false;\n  private reorderPointer: {\n    pointerId: number;\n    sectionIndex: number;\n    fromIndex: number;\n  } | null = null;\n  /**\n   * Anchored placement. The choice-cell measurement stays here on purpose: the\n   * inner-cell align offset and the `--dimension-menu-width-xs` floor are Menu\n   * semantics, not shared geometry.\n   */\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.resolvedAnchor ?? null,\n    getPopup: () => this.el.querySelector<HTMLElement>('.menu-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchorEl, popup) => {\n      if (!this.open) return null;\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      const viewportPadPx = this.viewportPadPx;\n      const list = popup.querySelector<HTMLElement>('.ds-choice-list');\n      const naturalPopupHeight = Math.min(\n        Math.max(popup.offsetHeight, list?.scrollHeight ?? 0),\n        window.innerHeight - viewportPadPx * 2\n      );\n      const input: AnchoredPositionInput = {\n        anchorRect,\n        popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n        popupHeight: naturalPopupHeight || 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,\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect: resolveAnchoredOverlayBoundaryRect(anchorEl, this.boundary),\n      };\n      const unconstrained = computeAnchoredPosition(input);\n      return {\n        ...input,\n        popupHeight: Math.min(input.popupHeight, unconstrained.availableHeight),\n      };\n    },\n    apply: ({ x, y, availableHeight }) => {\n      this.pos = { x, y };\n      this.availableHeight = availableHeight;\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    topLayer: true,\n    observeResize: true,\n    observeAnchorMotion: true,\n  });\n  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.resolvedAnchor,\n    getPopup: () => this.el.querySelector<HTMLElement>('.menu-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.close(),\n  });\n  /** Last content actually painted while open; retained unchanged through exit motion. */\n  private lastRenderedSections: MenuSection[] = [];\n  private closingSections: MenuSection[] | null = null;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.cancelPositionRetry();\n    this.cancelLivePositionUpdate();\n    this.clearReorderPointer();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.closingSections = null;\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.availableHeight = null;\n      this.focusRingVisible = this.initialFocusVisible;\n      this.setupListeners();\n      this.schedulePositionUpdate(() => {\n        this.focusInitialItem();\n      });\n    } else if (this.shouldRender) {\n      this.positionReadyCallback = undefined;\n      this.cancelPositionRetry();\n      this.captureClosingSections();\n      this.closing = true;\n      this.teardownListeners();\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  @Watch('boundary')\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    const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.lastRenderedSections = [];\n    this.closingSections = null;\n    this.clearReorderPointer();\n    this.reorderAnnouncement = '';\n    this.dsAfterClose.emit();\n  }\n\n  private captureClosingSections() {\n    if (this.closingSections) return;\n    const visibleSections = this.lastRenderedSections.length\n      ? this.lastRenderedSections\n      : this.activeSections;\n    this.closingSections = snapshotMenuSections(visibleSections);\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 compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n    return this.interaction.tabLeavesPopup(event);\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    this.position.cancel();\n  }\n\n  private cancelLivePositionUpdate() {\n    this.position.cancel();\n  }\n\n  /** Reposition after the current scroll/layout frame without hiding the open popup. */\n  private scheduleLivePositionUpdate() {\n    this.position.scheduleLiveUpdate();\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    this.positionReady = false;\n    // Opening often sets `open` and `anchorId` together. Each Watch reschedules\n    // placement; keep the open-path ready callback so initial focus is not dropped.\n    if (onReady) this.positionReadyCallback = onReady;\n    const callback = this.positionReadyCallback;\n    this.position.schedule(() => {\n      if (this.positionReadyCallback === callback) {\n        this.positionReadyCallback = undefined;\n      }\n      callback?.();\n    });\n  }\n\n  /** @returns `true` when anchor and popup were found and `pos` was updated. */\n  private calculatePosition(): boolean {\n    return this.position.update();\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 || !!it.reorderable);\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.interaction.connect();\n    this.position.observe();\n  }\n\n  private teardownListeners() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close(restoreFocus = true) {\n    this.captureClosingSections();\n    if (restoreFocus) this.interaction.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.interaction.moveFocusAfterTab(e.shiftKey);\n      return;\n    }\n\n    if (this.hasCompositeSections) return;\n\n    if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.altKey && !e.ctrlKey && !e.shiftKey) {\n      this.handleReorderKey(e);\n      return;\n    }\n\n    const flat = this.flatItems;\n    const enabled = flat\n      .map((it, i) => ({ it, i }))\n      .filter(({ it }) => !it.isInactive || !!it.reorderable)\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 (this.suppressItemClick) {\n      this.suppressItemClick = false;\n      return;\n    }\n    if (item.isInactive) return;\n    // Consumers commonly change the item source while handling selection.\n    // Capture first so the exit animation never paints the next menu context.\n    this.captureClosingSections();\n    this.dsSelect.emit(item);\n  }\n\n  private handleSwatchSelect(value: string) {\n    this.dsSwatchSelect.emit(value);\n  }\n\n  private handleReorderKey(event: KeyboardEvent): void {\n    const located = locateMenuItem(this.activeSections, this.focusedIndex);\n    if (!located || !located.items[located.itemIndex]?.reorderable) return;\n\n    const nextItems = moveReorderableMenuItemBy(\n      located.items,\n      located.itemIndex,\n      event.key === 'ArrowUp' ? -1 : 1\n    );\n    if (!nextItems) return;\n\n    event.preventDefault();\n    event.stopPropagation();\n    this.emitReorder(located.items, located.itemIndex, nextItems, located.sectionIndex);\n  }\n\n  private emitReorder(\n    items: MenuItemData[],\n    fromIndex: number,\n    nextItems: MenuItemData[],\n    sectionIndex: number\n  ): void {\n    const detail = createMenuReorderDetail(items, fromIndex, nextItems, sectionIndex);\n    if (!detail) return;\n    this.focusedIndex = this.flatIndexFor(sectionIndex, detail.toIndex);\n    this.announceReorder(detail);\n    this.dsReorder.emit(detail);\n  }\n\n  private flatIndexFor(sectionIndex: number, itemIndex: number): number {\n    let flat = 0;\n    for (let index = 0; index < this.activeSections.length; index += 1) {\n      const section = this.activeSections[index];\n      if (isMenuPickerSection(section)) continue;\n      if (index === sectionIndex) return flat + itemIndex;\n      flat += section.items.length;\n    }\n    return itemIndex;\n  }\n\n  private announceReorder(detail: MenuReorderDetail): void {\n    const range = menuReorderableRange(detail.items, detail.toIndex);\n    const count = range ? range.end - range.start + 1 : detail.items.length;\n    const position = range ? detail.toIndex - range.start + 1 : detail.toIndex + 1;\n    this.reorderAnnouncement = `${detail.item.label} moved to position ${position} of ${count}`;\n  }\n\n  private onReorderPointerDown(\n    event: PointerEvent,\n    sectionIndex: number,\n    itemIndex: number,\n    flatIndex: number\n  ): void {\n    if (event.button !== 0) return;\n    const section = this.activeSections[sectionIndex];\n    if (!section || isMenuPickerSection(section)) return;\n    if (!section.items[itemIndex]?.reorderable) return;\n\n    event.preventDefault();\n    event.stopPropagation();\n    this.suppressItemClick = true;\n    this.focusRingVisible = false;\n    this.focusedIndex = flatIndex;\n    this.focusItem(flatIndex);\n    this.reorderPointer = {\n      pointerId: event.pointerId,\n      sectionIndex,\n      fromIndex: itemIndex,\n    };\n    this.reorderFromFlat = flatIndex;\n    this.reorderInsertBefore = itemIndex;\n    window.addEventListener('pointermove', this.onReorderPointerMove);\n    window.addEventListener('pointerup', this.onReorderPointerUp);\n    window.addEventListener('pointercancel', this.onReorderPointerCancel);\n  }\n\n  private onReorderPointerMove = (event: PointerEvent) => {\n    const drag = this.reorderPointer;\n    if (!drag || event.pointerId !== drag.pointerId) return;\n    const section = this.activeSections[drag.sectionIndex];\n    if (!section || isMenuPickerSection(section)) return;\n\n    const insertBefore = this.resolveReorderInsertBefore(\n      event.clientY,\n      drag.sectionIndex,\n      drag.fromIndex,\n      section.items\n    );\n    if (insertBefore !== this.reorderInsertBefore) this.reorderInsertBefore = insertBefore;\n  };\n\n  private onReorderPointerUp = (event: PointerEvent) => {\n    const drag = this.reorderPointer;\n    if (!drag || event.pointerId !== drag.pointerId) return;\n\n    const section = this.activeSections[drag.sectionIndex];\n    const insertBefore = this.reorderInsertBefore;\n    this.clearReorderPointer();\n    queueMicrotask(() => {\n      this.suppressItemClick = false;\n    });\n    if (!section || isMenuPickerSection(section) || insertBefore === null) return;\n\n    const nextItems = moveReorderableMenuItemBefore(section.items, drag.fromIndex, insertBefore);\n    if (!nextItems) return;\n    this.emitReorder(section.items, drag.fromIndex, nextItems, drag.sectionIndex);\n  };\n\n  private onReorderPointerCancel = (event: PointerEvent) => {\n    if (!this.reorderPointer || event.pointerId !== this.reorderPointer.pointerId) return;\n    this.clearReorderPointer();\n    queueMicrotask(() => {\n      this.suppressItemClick = false;\n    });\n  };\n\n  private resolveReorderInsertBefore(\n    clientY: number,\n    sectionIndex: number,\n    fromIndex: number,\n    items: MenuItemData[]\n  ): number {\n    const range = menuReorderableRange(items, fromIndex);\n    if (!range) return fromIndex;\n\n    const buttons = [...this.el.querySelectorAll<HTMLElement>('.menu-item')];\n    const sectionStart = this.flatIndexFor(sectionIndex, 0);\n    let insertBefore = range.end + 1;\n    for (let itemIndex = range.start; itemIndex <= range.end; itemIndex += 1) {\n      const row = buttons[sectionStart + itemIndex];\n      if (!row) continue;\n      const rect = row.getBoundingClientRect();\n      if (clientY < rect.top + rect.height / 2) {\n        insertBefore = itemIndex;\n        break;\n      }\n    }\n    return Math.min(Math.max(insertBefore, range.start), range.end + 1);\n  }\n\n  private clearReorderPointer(): void {\n    if (this.reorderPointer) {\n      window.removeEventListener('pointermove', this.onReorderPointerMove);\n      window.removeEventListener('pointerup', this.onReorderPointerUp);\n      window.removeEventListener('pointercancel', this.onReorderPointerCancel);\n    }\n    this.reorderPointer = null;\n    this.reorderFromFlat = null;\n    this.reorderInsertBefore = null;\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.closing\n      ? (this.closingSections ?? this.lastRenderedSections)\n      : this.activeSections;\n    const hasCompositeSections = sections.some(isMenuPickerSection);\n    if (!this.closing) {\n      this.lastRenderedSections = snapshotMenuSections(sections);\n      this.closingSections = null;\n    }\n    let flatIdx = 0;\n    const dragLocated =\n      this.reorderFromFlat === null ? null : locateMenuItem(sections, this.reorderFromFlat);\n    const dragRange = dragLocated\n      ? menuReorderableRange(dragLocated.items, dragLocated.itemIndex)\n      : null;\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    if (this.availableHeight !== null) {\n      popupStyle['max-height'] = `${Math.floor(this.availableHeight)}px`;\n    }\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          popover=\"manual\"\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={hasCompositeSections ? 'dialog' : 'menu'}\n          aria-label={this.menuLabel}\n          aria-orientation={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--swatch-picker': isMenuPickerSection(section),\n                  'ds-choice-section': true,\n                  'ds-chrome-column': true,\n                  'ds-chrome-space--sm': true,\n                  'ds-choice-section--divided': si < sections.length - 1,\n                  'ds-choice-section--headed-after-first': si > 0 && Boolean(section.header),\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-section-heading ds-control--${this.size}`}\n                    as=\"span\"\n                    variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                    emphasis\n                    color=\"primary\"\n                    aria-hidden=\"true\"\n                  >\n                    <span class=\"ds-choice-section__header-label\">{section.header}</span>\n                  </ds-text>\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, itemIndex) => {\n                    const idx = flatIdx++;\n                    const isFocused = this.focusedIndex === idx;\n                    const isSingleSelectionItem =\n                      !hasCompositeSections && this.selectionMode === 'single' && !item.showSwitch;\n                    const usesLeading = section.items.some(\n                      candidate => candidate.reorderable || !!candidate.icon\n                    );\n                    const locked = !!item.isInactive && !item.reorderable;\n                    const dragging = this.reorderFromFlat === idx;\n                    const dropBefore =\n                      dragLocated?.sectionIndex === si &&\n                      dragRange !== null &&\n                      itemIndex <= dragRange.end &&\n                      this.reorderInsertBefore === itemIndex;\n                    const dropAfter =\n                      dragLocated?.sectionIndex === si &&\n                      dragRange !== null &&\n                      this.reorderInsertBefore === dragRange.end + 1 &&\n                      itemIndex === dragRange.end;\n                    return (\n                      <button\n                        key={item.value ?? `${si}-${item.label}`}\n                        type=\"button\"\n                        class={{\n                          'menu-item': true,\n                          'ds-choice-item': true,\n                          'ds-control-frame': true,\n                          [`ds-control--${this.size}`]: true,\n                          'ds-focus-ring-inset': true,\n                          'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n                          'ds-interaction-fill': !locked,\n                          'ds-interaction-fill--selected': !!item.isSelected && !locked,\n                          'menu-item--selected': !!item.isSelected,\n                          'menu-item--switch': !!item.showSwitch,\n                          'ds-control-inactive': locked,\n                          'menu-item--destructive': !!item.isDestructive,\n                          'menu-item--focused': isFocused,\n                          'menu-item--dragging': dragging,\n                        }}\n                        role={\n                          hasCompositeSections\n                            ? undefined\n                            : item.showSwitch\n                              ? 'menuitemcheckbox'\n                              : isSingleSelectionItem\n                                ? 'menuitemradio'\n                                : 'menuitem'\n                        }\n                        aria-checked={\n                          !hasCompositeSections && item.showSwitch\n                            ? String(!!item.switchValue)\n                            : isSingleSelectionItem\n                              ? String(!!item.isSelected)\n                              : undefined\n                        }\n                        aria-pressed={\n                          hasCompositeSections\n                            ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n                            : undefined\n                        }\n                        aria-current={\n                          !hasCompositeSections &&\n                          !item.showSwitch &&\n                          !isSingleSelectionItem &&\n                          item.isSelected\n                            ? 'true'\n                            : undefined\n                        }\n                        aria-description={\n                          item.reorderable\n                            ? item.isInactive\n                              ? 'Visibility cannot be changed. Alt + Arrow Up or Alt + Arrow Down moves this row.'\n                              : 'Drag to reorder. Alt + Arrow Up or Alt + Arrow Down moves this row.'\n                            : undefined\n                        }\n                        aria-disabled={item.isInactive ? 'true' : undefined}\n                        disabled={locked}\n                        tabIndex={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                        {(dropBefore || dropAfter) && (\n                          <span\n                            class={{\n                              'menu-item__drop-rail': true,\n                              'menu-item__drop-rail--before': dropBefore,\n                              'menu-item__drop-rail--after': dropAfter,\n                            }}\n                            data-menu-drop-rail\n                            aria-hidden=\"true\"\n                          />\n                        )}\n                        {item.reorderable ? (\n                          <span\n                            class=\"menu-item__handle ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n                            data-menu-handle\n                            aria-hidden=\"true\"\n                            onPointerDown={event =>\n                              this.onReorderPointerDown(event, si, itemIndex, idx)\n                            }\n                            onClick={event => {\n                              event.preventDefault();\n                              event.stopPropagation();\n                            }}\n                          >\n                            <ds-icon name=\"Drag\" size={this.size} color=\"inherit\" />\n                          </span>\n                        ) : usesLeading && item.icon ? (\n                          <span\n                            class=\"menu-item__icon ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n                            aria-hidden=\"true\"\n                          >\n                            <ds-icon name={item.icon} size={this.size} color=\"inherit\" />\n                          </span>\n                        ) : usesLeading ? (\n                          <span\n                            class=\"menu-item__icon-spacer ds-choice-item__icon ds-control-icon-box\"\n                            aria-hidden=\"true\"\n                          />\n                        ) : null}\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 ds-control-label-box\"\n                            as=\"span\"\n                            variant={CONTROL_TEXT_VARIANT[this.size]}\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 ds-control-label-box\"\n                              as=\"span\"\n                              variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                              color=\"secondary\"\n                            >\n                              {item.subtext}\n                            </ds-text>\n                          )}\n                        </div>\n                        {item.tag && (\n                          <ds-tag\n                            class=\"ds-choice-item__tag ds-interaction-fill__content\"\n                            label={item.tag.label}\n                            size={MENU_ITEM_TAG_SIZE[this.size]}\n                            intent={item.tag.intent ?? 'neutral'}\n                            contrast={item.tag.contrast ?? 'faint'}\n                            rounded={item.tag.rounded ?? false}\n                            isInset\n                          />\n                        )}\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={this.size}\n                            checked={!!item.switchValue}\n                            isInactive={!!item.isInactive}\n                            presentation\n                          />\n                        )}\n                      </button>\n                    );\n                  })\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n        <div class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\">\n          {this.reorderAnnouncement}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "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  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n  type ChoicePopupAnchorAlignment,\n  type ControlSize,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { computeAnchoredPosition, type AnchoredPositionInput } from '../../utils/anchored-position';\nimport type { MenuAlign, MenuSide } from './menu-position';\nimport {\n  isMenuPickerSection,\n  isMenuSwatchPickerSection,\n  type MenuItemData,\n  type MenuReorderDetail,\n  type MenuSection,\n} from './menu-types';\nimport { snapshotMenuSections } from './menu-sections';\nimport {\n  createMenuReorderDetail,\n  locateMenuItem,\n  menuReorderableRange,\n  moveReorderableMenuItemBefore,\n  moveReorderableMenuItemBy,\n} from './menu-reorder';\n\nexport type MenuSelectionMode = 'none' | 'single';\nexport type MenuSize = ControlSize;\nlet menuId = 0;\nconst MENU_ITEM_TAG_SIZE: Record<MenuSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\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  /** Choice-row density. */\n  @Prop() size: MenuSize = 'md';\n  /** Give ordinary rows mutually-exclusive menu semantics using isSelected. */\n  @Prop() selectionMode: MenuSelectionMode = 'none';\n  @Prop() sections: MenuSection[] = [];\n  /** Preferred side; placement flips to the opposite side when that offers a better fit. */\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  /** Explicit collision owner; otherwise the nearest data-ds-overlay-boundary ancestor is used. */\n  @Prop() boundary: HTMLElement | 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  /** Informational message shown when there are no choices. Uses a non-modal dialog, not a fake menu item. */\n  @Prop() emptyMessage: string = '';\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 availableHeight: number | null = null;\n  @State() private focusRingVisible: boolean = false;\n  @State() private reorderFromFlat: number | null = null;\n  @State() private reorderInsertBefore: number | null = null;\n  @State() private reorderAnnouncement = '';\n\n  @Event() dsClose!: EventEmitter<void>;\n  /** Emitted after the popup's exit motion is complete and its rendered content is removed. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n  /** Emitted when a generic `swatch-picker` section option is chosen. */\n  @Event() dsSwatchSelect!: EventEmitter<string>;\n  /** Emitted after a pointer drop or keyboard move; Menu never mutates item order. */\n  @Event() dsReorder!: EventEmitter<MenuReorderDetail>;\n\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private positionReadyCallback: (() => void) | undefined;\n  private suppressItemClick = false;\n  private reorderPointer: {\n    pointerId: number;\n    sectionIndex: number;\n    fromIndex: number;\n  } | null = null;\n  /**\n   * Anchored placement. The choice-cell measurement stays here on purpose: the\n   * inner-cell align offset and the `--dimension-menu-width-xs` floor are Menu\n   * semantics, not shared geometry.\n   */\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.resolvedAnchor ?? null,\n    getPopup: () => this.el.querySelector<HTMLElement>('.menu-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchorEl, popup) => {\n      if (!this.open) return null;\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      const viewportPadPx = this.viewportPadPx;\n      const list = popup.querySelector<HTMLElement>('.ds-choice-list');\n      const naturalPopupHeight = Math.min(\n        Math.max(popup.offsetHeight, list?.scrollHeight ?? 0),\n        window.innerHeight - viewportPadPx * 2\n      );\n      const input: AnchoredPositionInput = {\n        anchorRect,\n        popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n        popupHeight: naturalPopupHeight || 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,\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect: resolveAnchoredOverlayBoundaryRect(anchorEl, this.boundary),\n      };\n      const unconstrained = computeAnchoredPosition(input);\n      return {\n        ...input,\n        popupHeight: Math.min(input.popupHeight, unconstrained.availableHeight),\n      };\n    },\n    apply: ({ x, y, availableHeight }) => {\n      this.pos = { x, y };\n      this.availableHeight = availableHeight;\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    topLayer: true,\n    observeResize: true,\n    observeAnchorMotion: true,\n  });\n  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.resolvedAnchor,\n    getPopup: () => this.el.querySelector<HTMLElement>('.menu-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.close(),\n  });\n  /** Last content actually painted while open; retained unchanged through exit motion. */\n  private lastRenderedSections: MenuSection[] = [];\n  private closingSections: MenuSection[] | null = null;\n  private readonly emptyMessageId = `ds-menu-empty-${++menuId}`;\n  private lastRenderedEmptyMessage = '';\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.cancelPositionRetry();\n    this.cancelLivePositionUpdate();\n    this.clearReorderPointer();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.closingSections = null;\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.availableHeight = null;\n      this.focusRingVisible = this.initialFocusVisible;\n      this.setupListeners();\n      this.schedulePositionUpdate(() => {\n        this.focusInitialItem();\n      });\n    } else if (this.shouldRender) {\n      this.positionReadyCallback = undefined;\n      this.cancelPositionRetry();\n      this.captureClosingSections();\n      this.closing = true;\n      this.teardownListeners();\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  @Watch('boundary')\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    const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.lastRenderedSections = [];\n    this.closingSections = null;\n    this.clearReorderPointer();\n    this.reorderAnnouncement = '';\n    this.dsAfterClose.emit();\n  }\n\n  private captureClosingSections() {\n    if (this.closingSections) return;\n    const visibleSections = this.lastRenderedSections.length\n      ? this.lastRenderedSections\n      : this.activeSections;\n    this.closingSections = snapshotMenuSections(visibleSections);\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 compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n    return this.interaction.tabLeavesPopup(event);\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    this.position.cancel();\n  }\n\n  private cancelLivePositionUpdate() {\n    this.position.cancel();\n  }\n\n  /** Reposition after the current scroll/layout frame without hiding the open popup. */\n  private scheduleLivePositionUpdate() {\n    this.position.scheduleLiveUpdate();\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    this.positionReady = false;\n    // Opening often sets `open` and `anchorId` together. Each Watch reschedules\n    // placement; keep the open-path ready callback so initial focus is not dropped.\n    if (onReady) this.positionReadyCallback = onReady;\n    const callback = this.positionReadyCallback;\n    this.position.schedule(() => {\n      if (this.positionReadyCallback === callback) {\n        this.positionReadyCallback = undefined;\n      }\n      callback?.();\n    });\n  }\n\n  /** @returns `true` when anchor and popup were found and `pos` was updated. */\n  private calculatePosition(): boolean {\n    return this.position.update();\n  }\n\n  /** Focus the selected item when present, otherwise the first enabled item. */\n  private focusInitialItem() {\n    if (!this.hasCompositeSections && !this.flatItems.length && this.emptyMessage.trim()) {\n      requestAnimationFrame(() => {\n        if (this.open) this.el.querySelector<HTMLElement>('.menu-popup')?.focus();\n      });\n      return;\n    }\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 || !!it.reorderable);\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.interaction.connect();\n    this.position.observe();\n  }\n\n  private teardownListeners() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close(restoreFocus = true) {\n    this.captureClosingSections();\n    if (restoreFocus) this.interaction.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.interaction.moveFocusAfterTab(e.shiftKey);\n      return;\n    }\n\n    if (this.hasCompositeSections) return;\n\n    if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.altKey && !e.ctrlKey && !e.shiftKey) {\n      this.handleReorderKey(e);\n      return;\n    }\n\n    const flat = this.flatItems;\n    const enabled = flat\n      .map((it, i) => ({ it, i }))\n      .filter(({ it }) => !it.isInactive || !!it.reorderable)\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 (this.suppressItemClick) {\n      this.suppressItemClick = false;\n      return;\n    }\n    if (item.isInactive) return;\n    // Consumers commonly change the item source while handling selection.\n    // Capture first so the exit animation never paints the next menu context.\n    this.captureClosingSections();\n    this.dsSelect.emit(item);\n  }\n\n  private handleSwatchSelect(value: string) {\n    this.dsSwatchSelect.emit(value);\n  }\n\n  private handleReorderKey(event: KeyboardEvent): void {\n    const located = locateMenuItem(this.activeSections, this.focusedIndex);\n    if (!located || !located.items[located.itemIndex]?.reorderable) return;\n\n    const nextItems = moveReorderableMenuItemBy(\n      located.items,\n      located.itemIndex,\n      event.key === 'ArrowUp' ? -1 : 1\n    );\n    if (!nextItems) return;\n\n    event.preventDefault();\n    event.stopPropagation();\n    this.emitReorder(located.items, located.itemIndex, nextItems, located.sectionIndex);\n  }\n\n  private emitReorder(\n    items: MenuItemData[],\n    fromIndex: number,\n    nextItems: MenuItemData[],\n    sectionIndex: number\n  ): void {\n    const detail = createMenuReorderDetail(items, fromIndex, nextItems, sectionIndex);\n    if (!detail) return;\n    this.focusedIndex = this.flatIndexFor(sectionIndex, detail.toIndex);\n    this.announceReorder(detail);\n    this.dsReorder.emit(detail);\n  }\n\n  private flatIndexFor(sectionIndex: number, itemIndex: number): number {\n    let flat = 0;\n    for (let index = 0; index < this.activeSections.length; index += 1) {\n      const section = this.activeSections[index];\n      if (isMenuPickerSection(section)) continue;\n      if (index === sectionIndex) return flat + itemIndex;\n      flat += section.items.length;\n    }\n    return itemIndex;\n  }\n\n  private announceReorder(detail: MenuReorderDetail): void {\n    const range = menuReorderableRange(detail.items, detail.toIndex);\n    const count = range ? range.end - range.start + 1 : detail.items.length;\n    const position = range ? detail.toIndex - range.start + 1 : detail.toIndex + 1;\n    this.reorderAnnouncement = `${detail.item.label} moved to position ${position} of ${count}`;\n  }\n\n  private onReorderPointerDown(\n    event: PointerEvent,\n    sectionIndex: number,\n    itemIndex: number,\n    flatIndex: number\n  ): void {\n    if (event.button !== 0) return;\n    const section = this.activeSections[sectionIndex];\n    if (!section || isMenuPickerSection(section)) return;\n    if (!section.items[itemIndex]?.reorderable) return;\n\n    event.preventDefault();\n    event.stopPropagation();\n    this.suppressItemClick = true;\n    this.focusRingVisible = false;\n    this.focusedIndex = flatIndex;\n    this.focusItem(flatIndex);\n    this.reorderPointer = {\n      pointerId: event.pointerId,\n      sectionIndex,\n      fromIndex: itemIndex,\n    };\n    this.reorderFromFlat = flatIndex;\n    this.reorderInsertBefore = itemIndex;\n    window.addEventListener('pointermove', this.onReorderPointerMove);\n    window.addEventListener('pointerup', this.onReorderPointerUp);\n    window.addEventListener('pointercancel', this.onReorderPointerCancel);\n  }\n\n  private onReorderPointerMove = (event: PointerEvent) => {\n    const drag = this.reorderPointer;\n    if (!drag || event.pointerId !== drag.pointerId) return;\n    const section = this.activeSections[drag.sectionIndex];\n    if (!section || isMenuPickerSection(section)) return;\n\n    const insertBefore = this.resolveReorderInsertBefore(\n      event.clientY,\n      drag.sectionIndex,\n      drag.fromIndex,\n      section.items\n    );\n    if (insertBefore !== this.reorderInsertBefore) this.reorderInsertBefore = insertBefore;\n  };\n\n  private onReorderPointerUp = (event: PointerEvent) => {\n    const drag = this.reorderPointer;\n    if (!drag || event.pointerId !== drag.pointerId) return;\n\n    const section = this.activeSections[drag.sectionIndex];\n    const insertBefore = this.reorderInsertBefore;\n    this.clearReorderPointer();\n    queueMicrotask(() => {\n      this.suppressItemClick = false;\n    });\n    if (!section || isMenuPickerSection(section) || insertBefore === null) return;\n\n    const nextItems = moveReorderableMenuItemBefore(section.items, drag.fromIndex, insertBefore);\n    if (!nextItems) return;\n    this.emitReorder(section.items, drag.fromIndex, nextItems, drag.sectionIndex);\n  };\n\n  private onReorderPointerCancel = (event: PointerEvent) => {\n    if (!this.reorderPointer || event.pointerId !== this.reorderPointer.pointerId) return;\n    this.clearReorderPointer();\n    queueMicrotask(() => {\n      this.suppressItemClick = false;\n    });\n  };\n\n  private resolveReorderInsertBefore(\n    clientY: number,\n    sectionIndex: number,\n    fromIndex: number,\n    items: MenuItemData[]\n  ): number {\n    const range = menuReorderableRange(items, fromIndex);\n    if (!range) return fromIndex;\n\n    const buttons = [...this.el.querySelectorAll<HTMLElement>('.menu-item')];\n    const sectionStart = this.flatIndexFor(sectionIndex, 0);\n    let insertBefore = range.end + 1;\n    for (let itemIndex = range.start; itemIndex <= range.end; itemIndex += 1) {\n      const row = buttons[sectionStart + itemIndex];\n      if (!row) continue;\n      const rect = row.getBoundingClientRect();\n      if (clientY < rect.top + rect.height / 2) {\n        insertBefore = itemIndex;\n        break;\n      }\n    }\n    return Math.min(Math.max(insertBefore, range.start), range.end + 1);\n  }\n\n  private clearReorderPointer(): void {\n    if (this.reorderPointer) {\n      window.removeEventListener('pointermove', this.onReorderPointerMove);\n      window.removeEventListener('pointerup', this.onReorderPointerUp);\n      window.removeEventListener('pointercancel', this.onReorderPointerCancel);\n    }\n    this.reorderPointer = null;\n    this.reorderFromFlat = null;\n    this.reorderInsertBefore = null;\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.closing\n      ? (this.closingSections ?? this.lastRenderedSections)\n      : this.activeSections;\n    const hasCompositeSections = sections.some(isMenuPickerSection);\n    const emptyMessage = this.closing ? this.lastRenderedEmptyMessage : this.emptyMessage.trim();\n    const showEmpty =\n      Boolean(emptyMessage) &&\n      !hasCompositeSections &&\n      sections.every(section => !isMenuPickerSection(section) && section.items.length === 0);\n    if (!this.closing) {\n      this.lastRenderedEmptyMessage = emptyMessage;\n      this.lastRenderedSections = snapshotMenuSections(sections);\n      this.closingSections = null;\n    }\n    let flatIdx = 0;\n    const dragLocated =\n      this.reorderFromFlat === null ? null : locateMenuItem(sections, this.reorderFromFlat);\n    const dragRange = dragLocated\n      ? menuReorderableRange(dragLocated.items, dragLocated.itemIndex)\n      : null;\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    if (this.availableHeight !== null) {\n      popupStyle['max-height'] = `${Math.floor(this.availableHeight)}px`;\n    }\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          popover=\"manual\"\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            'ds-focus-ring': showEmpty,\n            'ds-focus-ring--visible': showEmpty && this.focusRingVisible,\n          }}\n          style={popupStyle}\n          role={hasCompositeSections || showEmpty ? 'dialog' : 'menu'}\n          aria-label={this.menuLabel}\n          aria-orientation={hasCompositeSections || showEmpty ? undefined : 'vertical'}\n          aria-describedby={showEmpty ? this.emptyMessageId : undefined}\n          tabIndex={showEmpty ? -1 : undefined}\n        >\n          <div class=\"ds-choice-list\">\n            {showEmpty ? (\n              <ds-text\n                textId={this.emptyMessageId}\n                class=\"menu-empty\"\n                as=\"p\"\n                variant={CONTROL_TEXT_VARIANT[this.size]}\n                color=\"secondary\"\n              >\n                {emptyMessage}\n              </ds-text>\n            ) : (\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--swatch-picker': isMenuPickerSection(section),\n                    'ds-choice-section': true,\n                    'ds-chrome-column': true,\n                    'ds-chrome-space--sm': true,\n                    'ds-choice-section--divided': si < sections.length - 1,\n                    'ds-choice-section--headed-after-first': si > 0 && Boolean(section.header),\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-section-heading ds-control--${this.size}`}\n                      as=\"span\"\n                      variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                      emphasis\n                      color=\"primary\"\n                      aria-hidden=\"true\"\n                    >\n                      <span class=\"ds-choice-section__header-label\">{section.header}</span>\n                    </ds-text>\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, itemIndex) => {\n                      const idx = flatIdx++;\n                      const isFocused = this.focusedIndex === idx;\n                      const isSingleSelectionItem =\n                        !hasCompositeSections &&\n                        this.selectionMode === 'single' &&\n                        !item.showSwitch;\n                      const usesLeading = section.items.some(\n                        candidate => candidate.reorderable || !!candidate.icon\n                      );\n                      const locked = !!item.isInactive && !item.reorderable;\n                      const dragging = this.reorderFromFlat === idx;\n                      const dropBefore =\n                        dragLocated?.sectionIndex === si &&\n                        dragRange !== null &&\n                        itemIndex <= dragRange.end &&\n                        this.reorderInsertBefore === itemIndex;\n                      const dropAfter =\n                        dragLocated?.sectionIndex === si &&\n                        dragRange !== null &&\n                        this.reorderInsertBefore === dragRange.end + 1 &&\n                        itemIndex === dragRange.end;\n                      return (\n                        <button\n                          key={item.value ?? `${si}-${item.label}`}\n                          type=\"button\"\n                          class={{\n                            'menu-item': true,\n                            'ds-choice-item': true,\n                            'ds-control-frame': true,\n                            [`ds-control--${this.size}`]: true,\n                            'ds-focus-ring-inset': true,\n                            'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n                            'ds-interaction-fill': !locked,\n                            'ds-interaction-fill--selected': !!item.isSelected && !locked,\n                            'menu-item--selected': !!item.isSelected,\n                            'menu-item--switch': !!item.showSwitch,\n                            'ds-control-inactive': locked,\n                            'menu-item--destructive': !!item.isDestructive,\n                            'menu-item--focused': isFocused,\n                            'menu-item--dragging': dragging,\n                          }}\n                          role={\n                            hasCompositeSections\n                              ? undefined\n                              : item.showSwitch\n                                ? 'menuitemcheckbox'\n                                : isSingleSelectionItem\n                                  ? 'menuitemradio'\n                                  : 'menuitem'\n                          }\n                          aria-checked={\n                            !hasCompositeSections && item.showSwitch\n                              ? String(!!item.switchValue)\n                              : isSingleSelectionItem\n                                ? String(!!item.isSelected)\n                                : undefined\n                          }\n                          aria-pressed={\n                            hasCompositeSections\n                              ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n                              : undefined\n                          }\n                          aria-current={\n                            !hasCompositeSections &&\n                            !item.showSwitch &&\n                            !isSingleSelectionItem &&\n                            item.isSelected\n                              ? 'true'\n                              : undefined\n                          }\n                          aria-description={\n                            item.reorderable\n                              ? item.isInactive\n                                ? 'Visibility cannot be changed. Alt + Arrow Up or Alt + Arrow Down moves this row.'\n                                : 'Drag to reorder. Alt + Arrow Up or Alt + Arrow Down moves this row.'\n                              : undefined\n                          }\n                          aria-disabled={item.isInactive ? 'true' : undefined}\n                          disabled={locked}\n                          tabIndex={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                          {(dropBefore || dropAfter) && (\n                            <span\n                              class={{\n                                'menu-item__drop-rail': true,\n                                'menu-item__drop-rail--before': dropBefore,\n                                'menu-item__drop-rail--after': dropAfter,\n                              }}\n                              data-menu-drop-rail\n                              aria-hidden=\"true\"\n                            />\n                          )}\n                          {item.reorderable ? (\n                            <span\n                              class=\"menu-item__handle ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n                              data-menu-handle\n                              aria-hidden=\"true\"\n                              onPointerDown={event =>\n                                this.onReorderPointerDown(event, si, itemIndex, idx)\n                              }\n                              onClick={event => {\n                                event.preventDefault();\n                                event.stopPropagation();\n                              }}\n                            >\n                              <ds-icon name=\"Drag\" size={this.size} color=\"inherit\" />\n                            </span>\n                          ) : usesLeading && item.icon ? (\n                            <span\n                              class=\"menu-item__icon ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n                              aria-hidden=\"true\"\n                            >\n                              <ds-icon name={item.icon} size={this.size} color=\"inherit\" />\n                            </span>\n                          ) : usesLeading ? (\n                            <span\n                              class=\"menu-item__icon-spacer ds-choice-item__icon ds-control-icon-box\"\n                              aria-hidden=\"true\"\n                            />\n                          ) : null}\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 ds-control-label-box\"\n                              as=\"span\"\n                              variant={CONTROL_TEXT_VARIANT[this.size]}\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 ds-control-label-box\"\n                                as=\"span\"\n                                variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                                color=\"secondary\"\n                              >\n                                {item.subtext}\n                              </ds-text>\n                            )}\n                          </div>\n                          {item.tag && (\n                            <ds-tag\n                              class=\"ds-choice-item__tag ds-interaction-fill__content\"\n                              label={item.tag.label}\n                              size={MENU_ITEM_TAG_SIZE[this.size]}\n                              intent={item.tag.intent ?? 'neutral'}\n                              contrast={item.tag.contrast ?? 'faint'}\n                              rounded={item.tag.rounded ?? false}\n                              isInset\n                            />\n                          )}\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={this.size}\n                              checked={!!item.switchValue}\n                              isInactive={!!item.isInactive}\n                              presentation\n                            />\n                          )}\n                        </button>\n                      );\n                    })\n                  )}\n                </div>\n              ))\n            )}\n          </div>\n        </div>\n        <div class=\"ds-visually-hidden\" role=\"status\" aria-live=\"polite\">\n          {this.reorderAnnouncement}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/mobile-bar-nav.json

@@ -33,6 +33,7 @@
       ],
       "states": [
         "The fixed groups are Menu plus current area, followed by Search, Activity, Messages, and Agents.",
+        "The shell may retain Help in the context position while another global tool is selected; context identity and active selection are independent.",
         "Consumers that intentionally group multiple review tools can replace the Activity destination with Inbox.",
         "Selection promotes foreground to primary without painting a selected fill; unselected destinations use tertiary foreground.",
         "Opening Mobile Sheet Nav replaces the Menu glyph with Cross while preserving its accessible name.",
@@ -157,6 +158,15 @@
           "required": false,
           "mutable": false
         },
+        "primaryDestination": {
+          "type": "'area' | 'help'",
+          "resolvedType": "\"area\" | \"help\"",
+          "attribute": "primary-destination",
+          "default": "'area'",
+          "required": false,
+          "mutable": false,
+          "description": "Context destination retained while a different global tool is active."
+        },
         "searchDot": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -311,6 +321,15 @@
         "required": false,
         "mutable": false
       },
+      "primaryDestination": {
+        "type": "'area' | 'help'",
+        "resolvedType": "\"area\" | \"help\"",
+        "attribute": "primary-destination",
+        "default": "'area'",
+        "required": false,
+        "mutable": false,
+        "description": "Context destination retained while a different global tool is active."
+      },
       "searchDot": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -411,7 +430,7 @@
     },
     {
       "path": "src/wc/components/MobileBarNav/MobileBarNav.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport {\n  shouldEmitMobileDestinationChange,\n  type MobileDestination,\n} from '../../shell/shell-responsive';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { MobileBarNavDestinationDetail } from './mobile-bar-nav-types';\n\ninterface DestinationConfig {\n  id: MobileDestination;\n  icon: string;\n  label: string;\n  dot: boolean;\n}\n\nconst MINIMUM_DIRECT_PRESS_MS = 120;\n\n@Component({\n  tag: 'ds-mobile-bar-nav',\n  styleUrl: 'MobileBarNav.css',\n  scoped: true,\n})\nexport class MobileBarNav {\n  @Element() el!: HTMLElement;\n\n  @Prop() activeDestination: MobileDestination = 'area';\n  @Prop() currentArea: PanelNavItem = {\n    id: 'tracking',\n    icon: 'MapPage',\n    label: 'Tracking',\n  };\n  @Prop() sheetNavExpanded: boolean = false;\n  @Prop() menuLabel: string = 'Menu';\n  @Prop() searchLabel: string = 'Search';\n  /** Render Activity directly, or retain the optional grouped Inbox destination. */\n  @Prop() activityMode: 'direct' | 'inbox' = 'direct';\n  @Prop() activityLabel: string = 'Activity';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() messagesLabel: string = 'Messages';\n  @Prop() agentsLabel: string = 'Agents';\n  @Prop() helpLabel: string = 'Help & Support';\n  @Prop() searchDot: boolean = false;\n  @Prop() activityDot: boolean = false;\n  @Prop() inboxDot: boolean = false;\n  @Prop() messagesDot: boolean = false;\n  @Prop() agentsDot: boolean = false;\n\n  @State() private pressedItemId: string | null = null;\n\n  @Event() dsSheetNavToggle!: EventEmitter<boolean>;\n  @Event() dsDestinationChange!: EventEmitter<MobileBarNavDestinationDetail>;\n\n  private activePointerId: number | null = null;\n  private pressedAt = 0;\n  private pressClearTimer: ReturnType<typeof setTimeout> | null = null;\n\n  disconnectedCallback() {\n    this.clearPressedItem();\n  }\n\n  private clearPressTimer() {\n    if (this.pressClearTimer === null) return;\n    clearTimeout(this.pressClearTimer);\n    this.pressClearTimer = null;\n  }\n\n  private clearPressedItem() {\n    this.clearPressTimer();\n    this.activePointerId = null;\n    this.pressedItemId = null;\n  }\n\n  private beginDirectPress(itemId: string, event: PointerEvent) {\n    if (!event.isPrimary || event.pointerType === 'mouse' || event.button !== 0) return;\n\n    this.clearPressTimer();\n    this.activePointerId = event.pointerId;\n    this.pressedAt = performance.now();\n    this.pressedItemId = itemId;\n\n    const target = event.currentTarget as HTMLElement;\n    try {\n      target.setPointerCapture(event.pointerId);\n    } catch {\n      // Pointer capture can fail if Safari has already cancelled the stream.\n    }\n  }\n\n  private finishDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n\n    this.activePointerId = null;\n    const remaining = Math.max(0, MINIMUM_DIRECT_PRESS_MS - (performance.now() - this.pressedAt));\n\n    this.clearPressTimer();\n    this.pressClearTimer = setTimeout(() => {\n      this.pressClearTimer = null;\n      this.pressedItemId = null;\n    }, remaining);\n  }\n\n  private cancelDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n    this.clearPressedItem();\n  }\n\n  private pressHandlers(itemId: string) {\n    return {\n      onPointerDown: (event: PointerEvent) => this.beginDirectPress(itemId, event),\n      onPointerUp: (event: PointerEvent) => this.finishDirectPress(event),\n      onPointerCancel: (event: PointerEvent) => this.cancelDirectPress(event),\n      onLostPointerCapture: (event: PointerEvent) => this.finishDirectPress(event),\n    };\n  }\n\n  private destinationConfig(): DestinationConfig[] {\n    const currentArea =\n      this.activeDestination === 'help'\n        ? {\n            id: 'help' as const,\n            icon: 'CircleQuestion',\n            label: this.helpLabel,\n            dot: false,\n          }\n        : {\n            id: 'area' as const,\n            icon: this.currentArea.icon || 'MapPage',\n            label: this.currentArea.label || 'Area',\n            dot: false,\n          };\n\n    const activity =\n      this.activityMode === 'direct'\n        ? {\n            id: 'activity' as const,\n            icon: 'Bell',\n            label: this.activityLabel,\n            dot: this.activityDot,\n          }\n        : {\n            id: 'inbox' as const,\n            icon: 'Inbox',\n            label: this.inboxLabel,\n            dot: this.inboxDot,\n          };\n\n    return [\n      currentArea,\n      { id: 'search', icon: 'MagnifyingGlass', label: this.searchLabel, dot: this.searchDot },\n      activity,\n      {\n        id: 'messages',\n        icon: 'MessageBubbleStack',\n        label: this.messagesLabel,\n        dot: this.messagesDot,\n      },\n      { id: 'agents', icon: 'AI', label: this.agentsLabel, dot: this.agentsDot },\n    ];\n  }\n\n  private selectDestination(destination: MobileDestination) {\n    if (\n      !shouldEmitMobileDestinationChange(this.activeDestination, destination, this.sheetNavExpanded)\n    ) {\n      return;\n    }\n    this.dsDestinationChange.emit({ destination });\n    // Owners may replace the visible mobile stage (and transiently drop focus\n    // in WebKit) while handling the controlled destination change.\n    requestAnimationFrame(() => {\n      void this.focusDestination(destination);\n    });\n  }\n\n  @Method()\n  async focusDestination(destination: MobileDestination | 'sheet-nav') {\n    const target = this.el.querySelector<HTMLElement>(\n      `#${\n        destination === 'sheet-nav'\n          ? 'ds-mobile-sheet-nav-trigger'\n          : `ds-mobile-bar-${destination}-trigger`\n      }`\n    );\n    target?.focus({ preventScroll: true });\n  }\n\n  private renderDestination(item: DestinationConfig) {\n    const selected = !this.sheetNavExpanded && item.id === this.activeDestination;\n    return (\n      <button\n        id={`ds-mobile-bar-${item.id}-trigger`}\n        type=\"button\"\n        class={{\n          'mobile-bar-nav__item': true,\n          'mobile-bar-nav__item--selected': selected,\n          'mobile-bar-nav__item--pressed': this.pressedItemId === item.id,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        aria-label={item.label}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.selectDestination(item.id)}\n        {...this.pressHandlers(item.id)}\n      >\n        <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n          <ds-icon name={item.icon} size=\"lg\" color=\"inherit\" />\n          {item.dot && (\n            <ds-badge class=\"mobile-bar-nav__dot\" variant=\"dot\" label=\"\" aria-hidden=\"true\" />\n          )}\n        </span>\n      </button>\n    );\n  }\n\n  render() {\n    const [currentArea, ...tools] = this.destinationConfig();\n\n    return (\n      <Host>\n        <nav class=\"mobile-bar-nav ds-chrome-row ds-chrome-space--md\" aria-label=\"Primary\">\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--context\">\n            <button\n              id=\"ds-mobile-sheet-nav-trigger\"\n              type=\"button\"\n              class={{\n                'mobile-bar-nav__item': true,\n                'mobile-bar-nav__item--selected': this.sheetNavExpanded,\n                'mobile-bar-nav__item--pressed': this.pressedItemId === 'sheet-nav',\n                'ds-focus-ring-inset': true,\n                'ds-interaction-fill': true,\n              }}\n              aria-label={this.menuLabel}\n              aria-expanded={String(this.sheetNavExpanded)}\n              aria-controls=\"ds-mobile-sheet-nav\"\n              onClick={() => this.dsSheetNavToggle.emit(!this.sheetNavExpanded)}\n              {...this.pressHandlers('sheet-nav')}\n            >\n              <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n                <ds-icon\n                  name={this.sheetNavExpanded ? 'Cross' : 'Hamburger'}\n                  size=\"lg\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n            <span class=\"mobile-bar-nav__divider\" aria-hidden=\"true\" />\n            {this.renderDestination(currentArea)}\n          </div>\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--tools\">\n            {tools.map(item => this.renderDestination(item))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport {\n  shouldEmitMobileDestinationChange,\n  type MobileDestination,\n} from '../../shell/shell-responsive';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { MobileBarNavDestinationDetail } from './mobile-bar-nav-types';\n\ninterface DestinationConfig {\n  id: MobileDestination;\n  icon: string;\n  label: string;\n  dot: boolean;\n}\n\nconst MINIMUM_DIRECT_PRESS_MS = 120;\n\n@Component({\n  tag: 'ds-mobile-bar-nav',\n  styleUrl: 'MobileBarNav.css',\n  scoped: true,\n})\nexport class MobileBarNav {\n  @Element() el!: HTMLElement;\n\n  @Prop() activeDestination: MobileDestination = 'area';\n  /** Context destination retained while a different global tool is active. */\n  @Prop() primaryDestination: 'area' | 'help' = 'area';\n  @Prop() currentArea: PanelNavItem = {\n    id: 'tracking',\n    icon: 'MapPage',\n    label: 'Tracking',\n  };\n  @Prop() sheetNavExpanded: boolean = false;\n  @Prop() menuLabel: string = 'Menu';\n  @Prop() searchLabel: string = 'Search';\n  /** Render Activity directly, or retain the optional grouped Inbox destination. */\n  @Prop() activityMode: 'direct' | 'inbox' = 'direct';\n  @Prop() activityLabel: string = 'Activity';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() messagesLabel: string = 'Messages';\n  @Prop() agentsLabel: string = 'Agents';\n  @Prop() helpLabel: string = 'Help & Support';\n  @Prop() searchDot: boolean = false;\n  @Prop() activityDot: boolean = false;\n  @Prop() inboxDot: boolean = false;\n  @Prop() messagesDot: boolean = false;\n  @Prop() agentsDot: boolean = false;\n\n  @State() private pressedItemId: string | null = null;\n\n  @Event() dsSheetNavToggle!: EventEmitter<boolean>;\n  @Event() dsDestinationChange!: EventEmitter<MobileBarNavDestinationDetail>;\n\n  private activePointerId: number | null = null;\n  private pressedAt = 0;\n  private pressClearTimer: ReturnType<typeof setTimeout> | null = null;\n\n  disconnectedCallback() {\n    this.clearPressedItem();\n  }\n\n  private clearPressTimer() {\n    if (this.pressClearTimer === null) return;\n    clearTimeout(this.pressClearTimer);\n    this.pressClearTimer = null;\n  }\n\n  private clearPressedItem() {\n    this.clearPressTimer();\n    this.activePointerId = null;\n    this.pressedItemId = null;\n  }\n\n  private beginDirectPress(itemId: string, event: PointerEvent) {\n    if (!event.isPrimary || event.pointerType === 'mouse' || event.button !== 0) return;\n\n    this.clearPressTimer();\n    this.activePointerId = event.pointerId;\n    this.pressedAt = performance.now();\n    this.pressedItemId = itemId;\n\n    const target = event.currentTarget as HTMLElement;\n    try {\n      target.setPointerCapture(event.pointerId);\n    } catch {\n      // Pointer capture can fail if Safari has already cancelled the stream.\n    }\n  }\n\n  private finishDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n\n    this.activePointerId = null;\n    const remaining = Math.max(0, MINIMUM_DIRECT_PRESS_MS - (performance.now() - this.pressedAt));\n\n    this.clearPressTimer();\n    this.pressClearTimer = setTimeout(() => {\n      this.pressClearTimer = null;\n      this.pressedItemId = null;\n    }, remaining);\n  }\n\n  private cancelDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n    this.clearPressedItem();\n  }\n\n  private pressHandlers(itemId: string) {\n    return {\n      onPointerDown: (event: PointerEvent) => this.beginDirectPress(itemId, event),\n      onPointerUp: (event: PointerEvent) => this.finishDirectPress(event),\n      onPointerCancel: (event: PointerEvent) => this.cancelDirectPress(event),\n      onLostPointerCapture: (event: PointerEvent) => this.finishDirectPress(event),\n    };\n  }\n\n  private destinationConfig(): DestinationConfig[] {\n    const currentArea =\n      this.primaryDestination === 'help' || this.activeDestination === 'help'\n        ? {\n            id: 'help' as const,\n            icon: 'CircleQuestion',\n            label: this.helpLabel,\n            dot: false,\n          }\n        : {\n            id: 'area' as const,\n            icon: this.currentArea.icon || 'MapPage',\n            label: this.currentArea.label || 'Area',\n            dot: false,\n          };\n\n    const activity =\n      this.activityMode === 'direct'\n        ? {\n            id: 'activity' as const,\n            icon: 'Bell',\n            label: this.activityLabel,\n            dot: this.activityDot,\n          }\n        : {\n            id: 'inbox' as const,\n            icon: 'Inbox',\n            label: this.inboxLabel,\n            dot: this.inboxDot,\n          };\n\n    return [\n      currentArea,\n      { id: 'search', icon: 'MagnifyingGlass', label: this.searchLabel, dot: this.searchDot },\n      activity,\n      {\n        id: 'messages',\n        icon: 'MessageBubbleStack',\n        label: this.messagesLabel,\n        dot: this.messagesDot,\n      },\n      { id: 'agents', icon: 'AI', label: this.agentsLabel, dot: this.agentsDot },\n    ];\n  }\n\n  private selectDestination(destination: MobileDestination) {\n    if (\n      !shouldEmitMobileDestinationChange(this.activeDestination, destination, this.sheetNavExpanded)\n    ) {\n      return;\n    }\n    this.dsDestinationChange.emit({ destination });\n    // Owners may replace the visible mobile stage (and transiently drop focus\n    // in WebKit) while handling the controlled destination change.\n    requestAnimationFrame(() => {\n      void this.focusDestination(destination);\n    });\n  }\n\n  @Method()\n  async focusDestination(destination: MobileDestination | 'sheet-nav') {\n    const target = this.el.querySelector<HTMLElement>(\n      `#${\n        destination === 'sheet-nav'\n          ? 'ds-mobile-sheet-nav-trigger'\n          : `ds-mobile-bar-${destination}-trigger`\n      }`\n    );\n    target?.focus({ preventScroll: true });\n  }\n\n  private renderDestination(item: DestinationConfig) {\n    const selected = !this.sheetNavExpanded && item.id === this.activeDestination;\n    return (\n      <button\n        id={`ds-mobile-bar-${item.id}-trigger`}\n        type=\"button\"\n        class={{\n          'mobile-bar-nav__item': true,\n          'mobile-bar-nav__item--selected': selected,\n          'mobile-bar-nav__item--pressed': this.pressedItemId === item.id,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        aria-label={item.label}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.selectDestination(item.id)}\n        {...this.pressHandlers(item.id)}\n      >\n        <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n          <ds-icon name={item.icon} size=\"lg\" color=\"inherit\" />\n          {item.dot && (\n            <ds-badge class=\"mobile-bar-nav__dot\" variant=\"dot\" label=\"\" aria-hidden=\"true\" />\n          )}\n        </span>\n      </button>\n    );\n  }\n\n  render() {\n    const [currentArea, ...tools] = this.destinationConfig();\n\n    return (\n      <Host>\n        <nav class=\"mobile-bar-nav ds-chrome-row ds-chrome-space--md\" aria-label=\"Primary\">\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--context\">\n            <button\n              id=\"ds-mobile-sheet-nav-trigger\"\n              type=\"button\"\n              class={{\n                'mobile-bar-nav__item': true,\n                'mobile-bar-nav__item--selected': this.sheetNavExpanded,\n                'mobile-bar-nav__item--pressed': this.pressedItemId === 'sheet-nav',\n                'ds-focus-ring-inset': true,\n                'ds-interaction-fill': true,\n              }}\n              aria-label={this.menuLabel}\n              aria-expanded={String(this.sheetNavExpanded)}\n              aria-controls=\"ds-mobile-sheet-nav\"\n              onClick={() => this.dsSheetNavToggle.emit(!this.sheetNavExpanded)}\n              {...this.pressHandlers('sheet-nav')}\n            >\n              <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n                <ds-icon\n                  name={this.sheetNavExpanded ? 'Cross' : 'Hamburger'}\n                  size=\"lg\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n            <span class=\"mobile-bar-nav__divider\" aria-hidden=\"true\" />\n            {this.renderDestination(currentArea)}\n          </div>\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--tools\">\n            {tools.map(item => this.renderDestination(item))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/mobile-header.json

@@ -39,8 +39,10 @@
       "states": [
         "Without multiple sections the center renders heading.",
         "With multiple sections the center renders the controlled MobileSectionSwitcher by default or an explicitly requested segmented TabGroup.",
+        "Primary section switching without subordinate navigation uses the viewport-edge sheet. Headers exposing both peer sections and subordinate views retain their two-level navigation.",
         "The segmented presentation uses the shared fill-width TabGroup contract and divides its centered two-thirds top-bar lane equally between options.",
-        "Optional subsections render in a second row and emit dsSubsectionChange without changing the primary section.",
+        "Optional subsections use a second row by default. When navigation already exposes peer sections, local views can sit beside a stable page title in one row; they never replace that title or its semantic heading.",
+        "The combined local-view presentation joins the page identity and selected subsection in one outlined sheet trigger. The semantic heading remains the page identity, while Back and page actions stay outside the trigger.",
         "Sections represent peer destinations at the current navigation level; subsections represent local views beneath the selected page or detail identity.",
         "Brand tone changes surface and foreground without changing geometry or interaction ownership."
       ],
@@ -127,6 +129,15 @@
           "mutable": false,
           "description": "Accessible name for the child-section chooser."
         },
+        "subsectionsPlacement": {
+          "type": "'below' | 'inline' | 'combined'",
+          "resolvedType": "\"below\" | \"combined\" | \"inline\"",
+          "attribute": "subsections-placement",
+          "default": "'below'",
+          "required": false,
+          "mutable": false,
+          "description": "Place local sections below, beside, or combined with the page title in one sheet trigger."
+        },
         "subvalue": {
           "type": "string",
           "resolvedType": "string",
@@ -247,6 +258,15 @@
         "mutable": false,
         "description": "Accessible name for the child-section chooser."
       },
+      "subsectionsPlacement": {
+        "type": "'below' | 'inline' | 'combined'",
+        "resolvedType": "\"below\" | \"combined\" | \"inline\"",
+        "attribute": "subsections-placement",
+        "default": "'below'",
+        "required": false,
+        "mutable": false,
+        "description": "Place local sections below, beside, or combined with the page title in one sheet trigger."
+      },
       "subvalue": {
         "type": "string",
         "resolvedType": "string",
@@ -342,12 +362,12 @@
   "files": [
     {
       "path": "src/wc/components/MobileHeader/MobileHeader.css",
-      "content": "@import '../../utils/chrome-layout.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n}\n\n:host([tone='brand']) {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold);\n}\n\n.mobile-header {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary {\n  grid-template-columns: minmax(var(--dimension-size-400), 1fr) minmax(0, auto) minmax(\n      var(--dimension-size-400),\n      1fr\n    );\n  width: 100%;\n  height: calc(var(--dimension-size-500) + var(--dimension-space-200));\n  min-width: 0;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary--segmented {\n  grid-template-columns:\n    minmax(var(--dimension-size-500), 1fr)\n    minmax(0, 4fr)\n    minmax(var(--dimension-size-500), 1fr);\n}\n\n.mobile-header__primary--segmented .mobile-header__center,\n.mobile-header__primary--segmented ds-tab-group {\n  width: 100%;\n}\n\n:host(:not([tone='brand'])) .mobile-header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-header__subsections {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n.mobile-header__subsections ds-mobile-section-switcher {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.mobile-header__lane {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-header__lane--leading {\n  justify-content: flex-start;\n}\n\n.mobile-header__lane--trailing {\n  justify-content: flex-end;\n}\n\n.mobile-header__center {\n  position: relative;\n  min-width: 0;\n  max-width: 100%;\n  justify-self: center;\n}\n\n.mobile-header__heading {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-header__semantic-heading {\n  position: absolute;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  padding: 0;\n  margin: calc(var(--dimension-stroke-width-012) * -1);\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n::slotted([slot='leading']),\n::slotted([slot='trailing']) {\n  flex: 0 0 auto;\n}\n",
+      "content": "@import '../../utils/chrome-layout.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n}\n\n:host([tone='brand']) {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold);\n}\n\n.mobile-header {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary {\n  grid-template-columns: minmax(var(--dimension-size-500), 1fr) minmax(0, auto) minmax(\n      var(--dimension-size-500),\n      1fr\n    );\n  width: 100%;\n  height: calc(var(--dimension-size-500) + var(--dimension-space-200));\n  min-width: 0;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary--segmented {\n  grid-template-columns:\n    minmax(var(--dimension-size-500), 1fr)\n    minmax(0, 4fr)\n    minmax(var(--dimension-size-500), 1fr);\n}\n\n.mobile-header__primary--segmented .mobile-header__center,\n.mobile-header__primary--segmented ds-tab-group {\n  width: 100%;\n}\n\n:host(:not([tone='brand'])) .mobile-header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-header__subsections {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n.mobile-header__subsections ds-mobile-section-switcher {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.mobile-header__lane {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-header__lane--leading {\n  justify-content: flex-start;\n}\n\n.mobile-header__lane--trailing {\n  justify-content: flex-end;\n}\n\n.mobile-header__center {\n  position: relative;\n  min-width: 0;\n  max-width: 100%;\n  justify-self: center;\n}\n\n.mobile-header__heading {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-header__primary--inline-subsections .mobile-header__center,\n.mobile-header__primary--combined-subsections .mobile-header__center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-100);\n  width: 100%;\n}\n\n.mobile-header__combined-subsections {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.mobile-header__primary--inline-subsections .mobile-header__heading {\n  flex: 0 1 auto;\n  width: auto;\n}\n\n.mobile-header__inline-subsections {\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 60%;\n}\n\n.mobile-header__semantic-heading {\n  position: absolute;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  padding: 0;\n  margin: calc(var(--dimension-stroke-width-012) * -1);\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n::slotted([slot='leading']),\n::slotted([slot='trailing']) {\n  flex: 0 0 auto;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/MobileHeader/MobileHeader.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { getSelectableTabs, type TabGroupItem, type TabItem } from '../TabGroup/tab-item-utils';\nimport type { TabGroupSize } from '../TabGroup/TabGroup';\nimport type {\n  MobileHeaderHeadingLevel,\n  MobileHeaderSectionsPresentation,\n  MobileHeaderTone,\n} from './mobile-header-types';\n\n@Component({\n  tag: 'ds-mobile-header',\n  styleUrl: 'MobileHeader.css',\n  scoped: true,\n})\nexport class MobileHeader {\n  /** Static title used when no peer sections are supplied. */\n  @Prop() heading: string = '';\n  /** Semantic heading level for the active mobile screen. */\n  @Prop() headingLevel: MobileHeaderHeadingLevel = 'h1';\n  /** Controlled peer sections. Their selected label replaces the static title. */\n  @Prop() sections: TabGroupItem[] = [];\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n  /** Popup switcher or an inline segmented TabGroup for peer sections. */\n  @Prop() sectionsPresentation: MobileHeaderSectionsPresentation = 'switcher';\n  /** Density for the segmented sections presentation. */\n  @Prop() sectionsSize: TabGroupSize = 'md';\n  /** Controlled child sections within the selected page or detail screen. */\n  @Prop() subsections: TabItem[] = [];\n  /** Controlled selected child-section id. */\n  @Prop() subvalue: string = '';\n  /** Accessible name for the child-section chooser. */\n  @Prop() subsectionsAriaLabel: string = 'Change page subsection';\n  /** Default page chrome or bold-brand workflow chrome. */\n  @Prop({ reflect: true }) tone: MobileHeaderTone = 'default';\n\n  /** Section selection intent. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n  /** Child-section selection intent. */\n  @Event() dsSubsectionChange!: EventEmitter<string>;\n\n  private get resolvedSections(): TabGroupItem[] {\n    return this.sections ?? [];\n  }\n\n  private get resolvedSubsections(): TabItem[] {\n    return this.subsections ?? [];\n  }\n\n  private get selectedLabel(): string {\n    const selectable = getSelectableTabs(this.resolvedSections);\n    return (\n      selectable.find(section => section.id === this.value)?.label ??\n      selectable[0]?.label ??\n      this.heading\n    );\n  }\n\n  private handleSectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSectionChange.emit(event.detail);\n  };\n\n  private handleSubsectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSubsectionChange.emit(event.detail);\n  };\n\n  render() {\n    const Heading = this.headingLevel;\n    const selectable = getSelectableTabs(this.resolvedSections);\n    const hasSwitcher = selectable.length > 1;\n    const hasSubsections = getSelectableTabs(this.resolvedSubsections).length > 1;\n    const hasSegmentedSections = hasSwitcher && this.sectionsPresentation === 'segmented';\n    const foreground = this.tone === 'brand' ? 'on-bold' : 'primary';\n\n    return (\n      <Host>\n        <header class=\"mobile-header\">\n          <div\n            class={{\n              'mobile-header__primary': true,\n              'mobile-header__primary--segmented': hasSegmentedSections,\n              'ds-chrome-grid': true,\n              'ds-chrome-space--md': true,\n            }}\n          >\n            <div class=\"mobile-header__lane mobile-header__lane--leading\">\n              <slot name=\"leading\" />\n            </div>\n            <div class=\"mobile-header__center\">\n              {hasSwitcher ? (\n                [\n                  <span\n                    class=\"mobile-header__semantic-heading\"\n                    role=\"heading\"\n                    aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n                  >\n                    {this.selectedLabel}\n                  </span>,\n                  this.sectionsPresentation === 'segmented' ? (\n                    <ds-tab-group\n                      tabs={this.resolvedSections}\n                      value={this.value}\n                      size={this.sectionsSize}\n                      width=\"fill\"\n                      ariaLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ) : (\n                    <ds-mobile-section-switcher\n                      sections={this.resolvedSections}\n                      value={this.value}\n                      navigationLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ),\n                ]\n              ) : (\n                <ds-text\n                  class=\"mobile-header__heading\"\n                  as={Heading}\n                  variant=\"text-body-medium\"\n                  emphasis\n                  color={foreground}\n                  lineTruncation={1}\n                >\n                  {this.selectedLabel}\n                </ds-text>\n              )}\n            </div>\n            <div class=\"mobile-header__lane mobile-header__lane--trailing\">\n              <slot name=\"trailing\" />\n            </div>\n          </div>\n          {hasSubsections ? (\n            <nav class=\"mobile-header__subsections\" aria-label={this.subsectionsAriaLabel}>\n              <ds-mobile-section-switcher\n                sections={this.resolvedSubsections}\n                value={this.subvalue}\n                navigationLabel={this.subsectionsAriaLabel}\n                onDsChange={this.handleSubsectionChange}\n              />\n            </nav>\n          ) : null}\n        </header>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { getSelectableTabs, type TabGroupItem, type TabItem } from '../TabGroup/tab-item-utils';\nimport type { TabGroupSize } from '../TabGroup/TabGroup';\nimport type {\n  MobileHeaderHeadingLevel,\n  MobileHeaderSectionsPresentation,\n  MobileHeaderTone,\n} from './mobile-header-types';\n\n@Component({\n  tag: 'ds-mobile-header',\n  styleUrl: 'MobileHeader.css',\n  scoped: true,\n})\nexport class MobileHeader {\n  /** Static title used when no peer sections are supplied. */\n  @Prop() heading: string = '';\n  /** Semantic heading level for the active mobile screen. */\n  @Prop() headingLevel: MobileHeaderHeadingLevel = 'h1';\n  /** Controlled peer sections. Their selected label replaces the static title. */\n  @Prop() sections: TabGroupItem[] = [];\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n  /** Popup switcher or an inline segmented TabGroup for peer sections. */\n  @Prop() sectionsPresentation: MobileHeaderSectionsPresentation = 'switcher';\n  /** Density for the segmented sections presentation. */\n  @Prop() sectionsSize: TabGroupSize = 'md';\n  /** Controlled child sections within the selected page or detail screen. */\n  @Prop() subsections: TabItem[] = [];\n  /** Controlled selected child-section id. */\n  @Prop() subvalue: string = '';\n  /** Accessible name for the child-section chooser. */\n  @Prop() subsectionsAriaLabel: string = 'Change page subsection';\n  /** Place local sections below, beside, or combined with the page title in one sheet trigger. */\n  @Prop() subsectionsPlacement: 'below' | 'inline' | 'combined' = 'below';\n  /** Default page chrome or bold-brand workflow chrome. */\n  @Prop({ reflect: true }) tone: MobileHeaderTone = 'default';\n\n  /** Section selection intent. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n  /** Child-section selection intent. */\n  @Event() dsSubsectionChange!: EventEmitter<string>;\n\n  private get resolvedSections(): TabGroupItem[] {\n    return this.sections ?? [];\n  }\n\n  private get resolvedSubsections(): TabItem[] {\n    return this.subsections ?? [];\n  }\n\n  private get selectedLabel(): string {\n    const selectable = getSelectableTabs(this.resolvedSections);\n    return (\n      selectable.find(section => section.id === this.value)?.label ??\n      selectable[0]?.label ??\n      this.heading\n    );\n  }\n\n  private handleSectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSectionChange.emit(event.detail);\n  };\n\n  private handleSubsectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSubsectionChange.emit(event.detail);\n  };\n\n  render() {\n    const Heading = this.headingLevel;\n    const selectable = getSelectableTabs(this.resolvedSections);\n    const hasSwitcher = selectable.length > 1;\n    const hasSubsections = getSelectableTabs(this.resolvedSubsections).length > 1;\n    const hasSegmentedSections = hasSwitcher && this.sectionsPresentation === 'segmented';\n    const inlineSubsections =\n      hasSubsections && !hasSwitcher && this.subsectionsPlacement === 'inline';\n    const combinedSubsections =\n      hasSubsections && !hasSwitcher && this.subsectionsPlacement === 'combined';\n    const foreground = this.tone === 'brand' ? 'on-bold' : 'primary';\n\n    return (\n      <Host>\n        <header class=\"mobile-header\">\n          <div\n            class={{\n              'mobile-header__primary': true,\n              'mobile-header__primary--segmented': hasSegmentedSections,\n              'mobile-header__primary--inline-subsections': inlineSubsections,\n              'mobile-header__primary--combined-subsections': combinedSubsections,\n              'ds-chrome-grid': true,\n              'ds-chrome-space--md': true,\n            }}\n          >\n            <div class=\"mobile-header__lane mobile-header__lane--leading\">\n              <slot name=\"leading\" />\n            </div>\n            <div class=\"mobile-header__center\">\n              {combinedSubsections ? (\n                [\n                  <span\n                    class=\"mobile-header__semantic-heading\"\n                    role=\"heading\"\n                    aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n                  >\n                    {this.selectedLabel}\n                  </span>,\n                  <nav\n                    class=\"mobile-header__combined-subsections\"\n                    aria-label={this.subsectionsAriaLabel}\n                  >\n                    <ds-mobile-section-switcher\n                      presentation=\"sheet\"\n                      pageLabel={this.selectedLabel}\n                      sections={this.resolvedSubsections}\n                      value={this.subvalue}\n                      navigationLabel={this.subsectionsAriaLabel}\n                      onDsChange={this.handleSubsectionChange}\n                    />\n                  </nav>,\n                ]\n              ) : hasSwitcher ? (\n                [\n                  <span\n                    class=\"mobile-header__semantic-heading\"\n                    role=\"heading\"\n                    aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n                  >\n                    {this.selectedLabel}\n                  </span>,\n                  this.sectionsPresentation === 'segmented' ? (\n                    <ds-tab-group\n                      tabs={this.resolvedSections}\n                      value={this.value}\n                      size={this.sectionsSize}\n                      width=\"fill\"\n                      ariaLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ) : (\n                    <ds-mobile-section-switcher\n                      presentation={hasSubsections ? 'menu' : 'sheet'}\n                      sections={this.resolvedSections}\n                      value={this.value}\n                      navigationLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ),\n                ]\n              ) : (\n                <ds-text\n                  class=\"mobile-header__heading\"\n                  as={Heading}\n                  variant=\"text-body-large\"\n                  emphasis\n                  color={foreground}\n                  lineTruncation={1}\n                >\n                  {this.selectedLabel}\n                </ds-text>\n              )}\n              {inlineSubsections ? this.renderSubsections() : null}\n            </div>\n            <div class=\"mobile-header__lane mobile-header__lane--trailing\">\n              <slot name=\"trailing\" />\n            </div>\n          </div>\n          {hasSubsections && !inlineSubsections && !combinedSubsections ? (\n            <nav class=\"mobile-header__subsections\" aria-label={this.subsectionsAriaLabel}>\n              <ds-mobile-section-switcher\n                sections={this.resolvedSubsections}\n                value={this.subvalue}\n                navigationLabel={this.subsectionsAriaLabel}\n                onDsChange={this.handleSubsectionChange}\n              />\n            </nav>\n          ) : null}\n        </header>\n      </Host>\n    );\n  }\n\n  private renderSubsections() {\n    return (\n      <nav class=\"mobile-header__inline-subsections\" aria-label={this.subsectionsAriaLabel}>\n        <ds-mobile-section-switcher\n          sections={this.resolvedSubsections}\n          value={this.subvalue}\n          navigationLabel={this.subsectionsAriaLabel}\n          onDsChange={this.handleSubsectionChange}\n        />\n      </nav>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/mobile-section-switcher.json

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "mobile-section-switcher",
   "title": "MobileSectionSwitcher",
-  "description": "Controlled mobile section chooser showing the current section, adjacent-position hints, and a complete tap menu.",
+  "description": "Controlled mobile section chooser with a viewport-edge sheet for primary pages and an anchored menu for local views.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,7 +13,7 @@
     "intent": {
       "audience": "specialized",
       "status": "experimental",
-      "summary": "Controlled mobile section chooser showing the current section, adjacent-position hints, and a complete tap menu.",
+      "summary": "Controlled mobile section chooser with a viewport-edge sheet for primary pages and an anchored menu for local views.",
       "useWhen": [
         "A mobile page or tool header must combine current-page identity with ordered peer-section navigation."
       ],
@@ -30,13 +30,16 @@
       "accessibility": [
         "The trigger exposes the current section, popup relationship, and expanded state.",
         "Decorative previous and next position hints are hidden from assistive technology.",
-        "The menu is always available so a future swipe gesture is never the only navigation mechanism.",
+        "The sheet is a native modal top-layer dialog: background content is inert, Escape and backdrop dismiss it, and focus returns to the trigger after exit motion. Arrow keys, Home, End, and initial-letter navigation move among enabled destinations.",
+        "The sheet initially focuses the current enabled destination, uses emphasis for selection, and never adds decorative icons to its rows.",
         "Peer destinations use menuitem semantics with aria-current on the active page; they do not present a radio-control affordance."
       ],
       "states": [
         "Selection is controlled and dsChange reports intent without mutating value.",
         "Dividers group menu items but never participate in previous or next resolution.",
-        "The first and last selectable sections expose only the available neighboring direction."
+        "The anchored local-view menu retains its neighboring-direction hints; the primary-page sheet uses an unfilled perimeter trigger without hints.",
+        "A sheet trigger can combine stable page identity and the current local view, separated by a decorative middle dot. The whole control opens only the supplied local destinations; long page names truncate before crowding out the active view.",
+        "Sheet selection emits navigation intent immediately while exit motion runs independently, so the controlled title can update without waiting for dismissal. Removing the owner or hiding its header closes the top layer without leaving the application blocked."
       ],
       "responsiveBehavior": [
         "Use only in the dedicated mobile header presentation."
@@ -59,6 +62,24 @@
           "mutable": false,
           "description": "Accessible name for the section chooser."
         },
+        "pageLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "page-label",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Stable page identity shown before the selected section in a sheet trigger."
+        },
+        "presentation": {
+          "type": "'menu' | 'sheet'",
+          "resolvedType": "\"menu\" | \"sheet\"",
+          "attribute": "presentation",
+          "default": "'menu'",
+          "required": false,
+          "mutable": false,
+          "description": "Anchored local-view menu or viewport-edge sheet for primary page sections."
+        },
         "sections": {
           "type": "TabItem[]",
           "resolvedType": "TabItem[]",
@@ -100,6 +121,24 @@
         "mutable": false,
         "description": "Accessible name for the section chooser."
       },
+      "pageLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "page-label",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Stable page identity shown before the selected section in a sheet trigger."
+      },
+      "presentation": {
+        "type": "'menu' | 'sheet'",
+        "resolvedType": "\"menu\" | \"sheet\"",
+        "attribute": "presentation",
+        "default": "'menu'",
+        "required": false,
+        "mutable": false,
+        "description": "Anchored local-view menu or viewport-edge sheet for primary page sections."
+      },
       "sections": {
         "type": "TabItem[]",
         "resolvedType": "TabItem[]",
@@ -176,12 +215,12 @@
   "files": [
     {
       "path": "src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.css",
-      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n  appearance: none;\n  display: grid;\n  grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  max-width: 100%;\n  min-height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-100);\n  background: var(--color-background-secondary);\n  color: inherit;\n  box-sizing: border-box;\n  cursor: default;\n}\n\n.mobile-section-switcher--expanded {\n  background: var(--color-background-tertiary);\n}\n\n.mobile-section-switcher__label {\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-section-switcher__position {\n  width: var(--dimension-size-050);\n  height: var(--dimension-size-050);\n  border-radius: var(--dimension-radius-half);\n  background: currentColor;\n  opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n  opacity: 1;\n}\n",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-density.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n  appearance: none;\n  display: grid;\n  grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  max-width: 100%;\n  min-height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-100);\n  background: var(--color-background-secondary);\n  color: inherit;\n  box-sizing: border-box;\n  cursor: default;\n}\n\n.mobile-section-switcher--expanded {\n  background: var(--color-background-tertiary);\n}\n\n.mobile-section-switcher__label {\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-section-switcher__position {\n  width: var(--dimension-size-050);\n  height: var(--dimension-size-050);\n  border-radius: var(--dimension-radius-half);\n  background: currentColor;\n  opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n  opacity: 1;\n}\n\n.mobile-section-switcher--sheet {\n  grid-template-columns: minmax(0, auto);\n  min-height: var(--dimension-size-500);\n  padding-inline: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-half);\n  background: transparent;\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-tertiary);\n}\n\n.mobile-section-switcher--combined {\n  display: flex;\n}\n\n.mobile-section-switcher__page-label {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.mobile-section-switcher__separator {\n  flex: 0 0 auto;\n}\n\n.mobile-section-switcher--combined .mobile-section-switcher__label {\n  flex: 0 0 auto;\n  max-width: 50%;\n}\n\n.mobile-section-sheet {\n  position: fixed;\n  inset: 0 0 auto;\n  width: 100%;\n  max-width: none;\n  max-height: calc(100dvh - var(--dimension-size-500) - var(--dimension-space-200));\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-secondary);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  outline: none;\n}\n\n.mobile-section-sheet[open] {\n  display: flex;\n  flex-direction: column;\n  animation: mobileSectionSheetIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet::backdrop {\n  background: var(--color-background-shade);\n  animation: mobileSectionShadeIn var(--effect-motion-short-2) both;\n}\n\n.mobile-section-sheet--closing[open] {\n  animation-name: mobileSectionSheetOut;\n}\n\n.mobile-section-sheet--closing::backdrop {\n  animation-name: mobileSectionShadeOut;\n}\n\n.mobile-section-sheet__items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n  min-height: 0;\n  padding: var(--dimension-space-100);\n  padding-block-start: max(var(--dimension-space-100), env(safe-area-inset-top, 0px));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.mobile-section-sheet__item {\n  appearance: none;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  height: var(--ds-control-height);\n  width: 100%;\n  min-width: 0;\n  padding: 0 var(--ds-control-padding-inline);\n  box-sizing: border-box;\n  border: 0;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: inherit;\n  text-align: start;\n}\n\n.mobile-section-sheet__item[aria-current='page'] {\n  color: var(--color-foreground-primary);\n}\n\n.mobile-section-sheet__item:disabled {\n  color: var(--color-foreground-tertiary);\n}\n\n.mobile-section-sheet__label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-section-sheet__divider {\n  flex: 0 0 auto;\n  height: var(--dimension-stroke-width-012);\n  margin-inline: var(--dimension-space-100);\n  background: var(--color-border-tertiary);\n}\n\n@keyframes mobileSectionSheetIn {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes mobileSectionSheetOut {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes mobileSectionShadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes mobileSectionShadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mobile-section-sheet[open],\n  .mobile-section-sheet::backdrop {\n    animation: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\nimport { resolveMobileSectionPosition } from './mobile-section-switcher-utils';\n\nlet nextMobileSectionSwitcherId = 0;\n\n@Component({\n  tag: 'ds-mobile-section-switcher',\n  styleUrl: 'MobileSectionSwitcher.css',\n  scoped: true,\n})\nexport class MobileSectionSwitcher {\n  @Element() el!: HTMLElement;\n\n  /** Ordered controlled sections. Divider entries group the popup menu. */\n  @Prop() sections: TabItem[] = [];\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() navigationLabel: string = 'Change page section';\n\n  /** Selection intent. The route, tool, or workflow owner updates `value`. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private menuOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly instanceId = nextMobileSectionSwitcherId++;\n  private readonly triggerId = `ds-mobile-section-switcher-trigger-${this.instanceId}`;\n  private readonly menuId = `ds-mobile-section-switcher-menu-${this.instanceId}`;\n  private triggerEl: HTMLButtonElement | null = null;\n\n  private get resolvedSections(): TabItem[] {\n    return this.sections ?? [];\n  }\n\n  private get selectableSections(): TabItemTab[] {\n    return getSelectableTabs(this.resolvedSections);\n  }\n\n  private get selectedIndex(): number {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).selectedIndex;\n  }\n\n  private get selectedSection(): TabItemTab | undefined {\n    return this.selectableSections[this.selectedIndex];\n  }\n\n  private get hasPrevious(): boolean {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).hasPrevious;\n  }\n\n  private get hasNext(): boolean {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).hasNext;\n  }\n\n  private get triggerAriaLabel(): string {\n    return `${this.navigationLabel}. Current section: ${this.selectedSection?.label ?? ''}`;\n  }\n\n  private get menuSections(): MenuSection[] {\n    const groups: MenuSection[] = [];\n    let items: MenuItemData[] = [];\n    const commit = () => {\n      if (items.length) groups.push({ items });\n      items = [];\n    };\n\n    for (const section of this.resolvedSections) {\n      if (isTabDivider(section)) {\n        commit();\n        continue;\n      }\n      items.push({\n        label: section.label,\n        value: section.id,\n        dot: section.dot,\n        isSelected: section.id === this.selectedSection?.id,\n        isInactive: section.isInactive,\n      });\n    }\n    commit();\n    return groups;\n  }\n\n  @Watch('sections')\n  handleSectionsChange() {\n    if (this.selectableSections.length <= 1) this.closeMenu();\n  }\n\n  private toggleMenu = (event: MouseEvent) => {\n    if (this.selectableSections.length <= 1) return;\n    this.initialFocusVisible = event.detail === 0;\n    this.menuOpen = !this.menuOpen;\n  };\n\n  private closeMenu = () => {\n    this.menuOpen = false;\n  };\n\n  private handleSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail.value ?? '');\n    const section = this.selectableSections.find(candidate => candidate.id === id);\n    if (!section || section.isInactive) return;\n    this.closeMenu();\n    if (id !== this.selectedSection?.id) this.dsChange.emit(id);\n    requestAnimationFrame(() => this.triggerEl?.focus());\n  };\n\n  render() {\n    const selected = this.selectedSection;\n    if (!selected) return <Host />;\n\n    return (\n      <Host>\n        <button\n          ref={element => {\n            this.triggerEl = element ?? null;\n          }}\n          id={this.triggerId}\n          class={{\n            'mobile-section-switcher': true,\n            'mobile-section-switcher--expanded': this.menuOpen,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n          }}\n          type=\"button\"\n          aria-haspopup=\"menu\"\n          aria-controls={this.menuId}\n          aria-expanded={String(this.menuOpen)}\n          aria-label={this.triggerAriaLabel}\n          onClick={this.toggleMenu}\n        >\n          <span\n            class={{\n              'mobile-section-switcher__position': true,\n              'mobile-section-switcher__position--visible': this.hasPrevious,\n              'ds-interaction-fill__content': true,\n            }}\n            aria-hidden=\"true\"\n          />\n          <ds-text\n            class=\"mobile-section-switcher__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {selected.label}\n          </ds-text>\n          <span\n            class={{\n              'mobile-section-switcher__position': true,\n              'mobile-section-switcher__position--visible': this.hasNext,\n              'ds-interaction-fill__content': true,\n            }}\n            aria-hidden=\"true\"\n          />\n        </button>\n\n        {this.selectableSections.length > 1 ? (\n          <ds-menu\n            id={this.menuId}\n            anchorId={this.triggerId}\n            align=\"center\"\n            menuLabel={this.navigationLabel}\n            open={this.menuOpen}\n            initialFocusVisible={this.initialFocusVisible}\n            sections={this.menuSections}\n            onDsClose={this.closeMenu}\n            onDsSelect={this.handleSelect}\n          />\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\nimport { resolveMobileSectionPosition } from './mobile-section-switcher-utils';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nlet nextMobileSectionSwitcherId = 0;\n\n@Component({\n  tag: 'ds-mobile-section-switcher',\n  styleUrl: 'MobileSectionSwitcher.css',\n  scoped: true,\n})\nexport class MobileSectionSwitcher {\n  @Element() el!: HTMLElement;\n\n  /** Ordered controlled sections. Divider entries group the popup menu. */\n  @Prop() sections: TabItem[] = [];\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() navigationLabel: string = 'Change page section';\n  /** Anchored local-view menu or viewport-edge sheet for primary page sections. */\n  @Prop() presentation: 'menu' | 'sheet' = 'menu';\n  /** Stable page identity shown before the selected section in a sheet trigger. */\n  @Prop() pageLabel: string = '';\n\n  /** Selection intent. The route, tool, or workflow owner updates `value`. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private menuOpen = false;\n  @State() private initialFocusVisible = false;\n  @State() private sheetClosing = false;\n  @State() private focusedSection = '';\n\n  private readonly instanceId = nextMobileSectionSwitcherId++;\n  private readonly triggerId = `ds-mobile-section-switcher-trigger-${this.instanceId}`;\n  private readonly menuId = `ds-mobile-section-switcher-menu-${this.instanceId}`;\n  private triggerEl: HTMLButtonElement | null = null;\n  private dialogEl: HTMLDialogElement | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private visibilityObserver?: ResizeObserver;\n\n  componentDidLoad() {\n    this.visibilityObserver = new ResizeObserver(() => {\n      if (this.dialogEl?.open && !this.triggerEl?.getClientRects().length) {\n        this.finishSheetClose(false);\n      }\n    });\n    this.visibilityObserver.observe(this.el);\n  }\n\n  componentDidRender() {\n    if (!this.dialogEl) return;\n    if (this.presentation === 'sheet' && this.menuOpen && !this.dialogEl.open) {\n      const initialSection = this.focusedSection;\n      this.dialogEl.showModal();\n      this.focusSheetItem(initialSection);\n    }\n    if (this.sheetClosing && this.dialogEl.open && !this.closeTimer) {\n      const duration = resolveMotionTimeMs(\n        TOKEN_DEFAULTS.motionShort2,\n        TOKEN_DEFAULTS.animationDurationShort3\n      );\n      if (!duration) this.finishSheetClose();\n      else this.closeTimer = setTimeout(() => this.finishSheetClose(), duration);\n    }\n  }\n\n  disconnectedCallback() {\n    this.visibilityObserver?.disconnect();\n    this.finishSheetClose(false);\n  }\n\n  @Watch('presentation')\n  @Watch('value')\n  @Watch('pageLabel')\n  handleContextChange() {\n    this.closeMenu();\n  }\n\n  private finishSheetClose(restoreFocus = true) {\n    if (this.closeTimer) clearTimeout(this.closeTimer);\n    this.closeTimer = null;\n    const wasOpen = this.dialogEl?.open;\n    this.dialogEl?.close();\n    this.menuOpen = false;\n    this.sheetClosing = false;\n    if (wasOpen && restoreFocus && this.triggerEl?.getClientRects().length) this.triggerEl.focus();\n  }\n\n  private focusSheetItem(id: string) {\n    const buttons = Array.from(this.dialogEl?.querySelectorAll<HTMLButtonElement>('button') ?? []);\n    const button =\n      buttons.find(item => item.value === id && !item.disabled) ??\n      buttons.find(item => !item.disabled);\n    if (button) {\n      this.focusedSection = button.value;\n      button.focus();\n    } else this.dialogEl?.focus();\n  }\n\n  private handleSheetKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.closeMenu();\n      return;\n    }\n    const sections = this.selectableSections.filter(section => !section.isInactive);\n    if (!sections.length) return;\n    const index = Math.max(\n      0,\n      sections.findIndex(section => section.id === this.focusedSection)\n    );\n    let next: number;\n    if (event.key === 'ArrowDown') next = (index + 1) % sections.length;\n    else if (event.key === 'ArrowUp') next = (index + sections.length - 1) % sections.length;\n    else if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = sections.length - 1;\n    else if (event.key === 'Tab') next = index;\n    else if (\n      event.key.length === 1 &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey &&\n      event.key !== ' '\n    ) {\n      const match = sections.findIndex((_, offset) =>\n        sections[(index + offset + 1) % sections.length].label\n          .toLowerCase()\n          .startsWith(event.key.toLowerCase())\n      );\n      if (match < 0) return;\n      next = (index + match + 1) % sections.length;\n    } else return;\n    event.preventDefault();\n    this.initialFocusVisible = true;\n    this.focusSheetItem(sections[next].id);\n  };\n\n  private get resolvedSections(): TabItem[] {\n    return this.sections ?? [];\n  }\n\n  private get selectableSections(): TabItemTab[] {\n    return getSelectableTabs(this.resolvedSections);\n  }\n\n  private get selectedIndex(): number {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).selectedIndex;\n  }\n\n  private get selectedSection(): TabItemTab | undefined {\n    return this.selectableSections[this.selectedIndex];\n  }\n\n  private get hasPrevious(): boolean {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).hasPrevious;\n  }\n\n  private get hasNext(): boolean {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).hasNext;\n  }\n\n  private get triggerAriaLabel(): string {\n    return `${this.presentation === 'sheet' && this.pageLabel ? `${this.pageLabel}. ` : ''}${this.navigationLabel}. Current section: ${this.selectedSection?.label ?? ''}`;\n  }\n\n  private get menuSections(): MenuSection[] {\n    const groups: MenuSection[] = [];\n    let items: MenuItemData[] = [];\n    const commit = () => {\n      if (items.length) groups.push({ items });\n      items = [];\n    };\n\n    for (const section of this.resolvedSections) {\n      if (isTabDivider(section)) {\n        commit();\n        continue;\n      }\n      items.push({\n        label: section.label,\n        value: section.id,\n        dot: section.dot,\n        isSelected: section.id === this.selectedSection?.id,\n        isInactive: section.isInactive,\n      });\n    }\n    commit();\n    return groups;\n  }\n\n  @Watch('sections')\n  handleSectionsChange() {\n    if (this.selectableSections.length <= 1) this.closeMenu();\n    else if (this.dialogEl?.open && !this.sheetClosing) this.focusSheetItem(this.focusedSection);\n  }\n\n  private toggleMenu = (event: MouseEvent) => {\n    if (this.selectableSections.length <= 1) return;\n    this.initialFocusVisible = event.detail === 0;\n    if (this.presentation === 'sheet') {\n      if (this.menuOpen) this.closeMenu();\n      else {\n        this.focusedSection = this.selectedSection?.id ?? '';\n        this.menuOpen = true;\n      }\n      return;\n    }\n    this.menuOpen = !this.menuOpen;\n  };\n\n  private closeMenu = () => {\n    this.menuOpen = false;\n    if (this.dialogEl?.open) this.sheetClosing = true;\n  };\n\n  private renderSheet() {\n    return (\n      <dialog\n        id={this.menuId}\n        ref={element => {\n          this.dialogEl = element ?? null;\n        }}\n        class={{ 'mobile-section-sheet': true, 'mobile-section-sheet--closing': this.sheetClosing }}\n        aria-label={this.navigationLabel}\n        tabIndex={-1}\n        onCancel={event => {\n          event.preventDefault();\n          this.closeMenu();\n        }}\n        onKeyDown={this.handleSheetKeyDown}\n        onClick={event => {\n          if (!this.dialogEl || event.target !== this.dialogEl) return;\n          const rect = this.dialogEl.getBoundingClientRect();\n          if (\n            event.clientY < rect.top ||\n            event.clientY > rect.bottom ||\n            event.clientX < rect.left ||\n            event.clientX > rect.right\n          )\n            this.closeMenu();\n        }}\n      >\n        <div class=\"mobile-section-sheet__items\" role=\"menu\" aria-label={this.navigationLabel}>\n          {this.resolvedSections.map(section =>\n            isTabDivider(section) ? (\n              <div class=\"mobile-section-sheet__divider\" role=\"separator\" />\n            ) : (\n              <button\n                type=\"button\"\n                role=\"menuitem\"\n                value={section.id}\n                disabled={section.isInactive}\n                aria-current={section.id === this.selectedSection?.id ? 'page' : undefined}\n                tabIndex={section.id === this.focusedSection ? 0 : -1}\n                class={{\n                  'mobile-section-sheet__item': true,\n                  'ds-control--lg': true,\n                  'ds-interaction-fill': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-focus-ring--visible':\n                    this.initialFocusVisible && section.id === this.focusedSection,\n                }}\n                onFocus={() => {\n                  this.focusedSection = section.id;\n                }}\n                onClick={() => {\n                  if (this.sheetClosing || section.isInactive) return;\n                  this.closeMenu();\n                  if (section.id !== this.selectedSection?.id) this.dsChange.emit(section.id);\n                }}\n              >\n                <ds-text\n                  class=\"mobile-section-sheet__label ds-interaction-fill__content\"\n                  as=\"span\"\n                  variant=\"text-body-large\"\n                  color=\"inherit\"\n                  emphasis={section.id === this.selectedSection?.id}\n                  lineTruncation={1}\n                >\n                  {section.label}\n                </ds-text>\n              </button>\n            )\n          )}\n        </div>\n      </dialog>\n    );\n  }\n\n  private handleSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail.value ?? '');\n    const section = this.selectableSections.find(candidate => candidate.id === id);\n    if (!section || section.isInactive) return;\n    this.closeMenu();\n    if (id !== this.selectedSection?.id) this.dsChange.emit(id);\n    requestAnimationFrame(() => this.triggerEl?.focus());\n  };\n\n  render() {\n    const selected = this.selectedSection;\n    if (!selected) return <Host />;\n    const combined = this.presentation === 'sheet' && !!this.pageLabel;\n\n    return (\n      <Host>\n        <button\n          ref={element => {\n            this.triggerEl = element ?? null;\n          }}\n          id={this.triggerId}\n          class={{\n            'mobile-section-switcher': true,\n            'mobile-section-switcher--expanded': this.menuOpen,\n            'mobile-section-switcher--sheet': this.presentation === 'sheet',\n            'mobile-section-switcher--combined': combined,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n          }}\n          type=\"button\"\n          aria-haspopup={this.presentation === 'sheet' ? 'dialog' : 'menu'}\n          aria-controls={this.menuId}\n          aria-expanded={String(this.menuOpen)}\n          aria-label={this.triggerAriaLabel}\n          onClick={this.toggleMenu}\n        >\n          {this.presentation === 'menu' ? (\n            <span\n              class={{\n                'mobile-section-switcher__position': true,\n                'mobile-section-switcher__position--visible': this.hasPrevious,\n                'ds-interaction-fill__content': true,\n              }}\n              aria-hidden=\"true\"\n            />\n          ) : null}\n          {combined\n            ? [\n                <ds-text\n                  class=\"mobile-section-switcher__page-label ds-interaction-fill__content\"\n                  as=\"span\"\n                  variant=\"text-body-large\"\n                  emphasis\n                  color=\"inherit\"\n                  lineTruncation={1}\n                >\n                  {this.pageLabel}\n                </ds-text>,\n                <ds-text\n                  class=\"mobile-section-switcher__separator ds-interaction-fill__content\"\n                  as=\"span\"\n                  variant=\"text-body-large\"\n                  color=\"inherit\"\n                  aria-hidden=\"true\"\n                >\n                  ·\n                </ds-text>,\n              ]\n            : null}\n          <ds-text\n            class=\"mobile-section-switcher__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant={this.presentation === 'sheet' ? 'text-body-large' : 'text-body-medium'}\n            emphasis\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {selected.label}\n          </ds-text>\n          {this.presentation === 'menu' ? (\n            <span\n              class={{\n                'mobile-section-switcher__position': true,\n                'mobile-section-switcher__position--visible': this.hasNext,\n                'ds-interaction-fill__content': true,\n              }}\n              aria-hidden=\"true\"\n            />\n          ) : null}\n        </button>\n\n        {this.presentation === 'sheet' || this.sheetClosing ? (\n          this.renderSheet()\n        ) : this.selectableSections.length > 1 ? (\n          <ds-menu\n            id={this.menuId}\n            anchorId={this.triggerId}\n            align=\"center\"\n            menuLabel={this.navigationLabel}\n            open={this.menuOpen}\n            initialFocusVisible={this.initialFocusVisible}\n            sections={this.menuSections}\n            onDsClose={this.closeMenu}\n            onDsSelect={this.handleSelect}\n          />\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {