@ds-mo/ui 14.11.0 → 14.12.0

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-21T20:51:35",
+  "timestamp": "2026-08-22T06:42:11",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -15955,6 +15955,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "fitToPageInactive",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "fit-to-page-inactive",
+          "reflectToAttr": false,
+          "docs": "Keep the Fit to page choice visible but unavailable.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "itemLabel",
           "type": "string",
@@ -18240,7 +18269,7 @@
     },
     {
       "filePath": "src/wc/components/PanelTools/PanelTools.tsx",
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "tag": "ds-panel-tools",
       "docs": "",
       "docsTags": [],
@@ -21972,7 +22001,7 @@
     },
     {
       "filePath": "src/wc/components/ShellTools/ShellTools.tsx",
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "tag": "ds-shell-tools",
       "docs": "",
       "docsTags": [],
@@ -24948,6 +24977,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "chromeLoading",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "chrome-loading",
+          "reflectToAttr": false,
+          "docs": "Replace opted-in table-owned caption controls with same-size visual skeletons.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "collapsedGroupIds",
           "type": "string[]",
@@ -25211,7 +25269,7 @@
           "mutable": false,
           "attr": "displayed-count",
           "reflectToAttr": false,
-          "docs": "Optional result summary footer. When both `displayedCount` and `totalCount`\nare finite numbers, infinite mode shows “Displaying {displayed} of {total}”.\nVirtual mode ignores `displayedCount` and shows a total-only summary.",
+          "docs": "Optional result summary footer. When both `displayedCount` and `totalCount`\nare finite numbers, infinite mode shows “Displaying {displayed} of {total}”.\nVirtual mode ignores `displayedCount` and derives its total from the\ncomplete supplied rows; a mismatched `totalCount` emits a warning.",
           "docsTags": [],
           "values": [
             {
@@ -27025,7 +27083,7 @@
           "mutable": false,
           "attr": "dirty",
           "reflectToAttr": false,
-          "docs": "Whether the current table state differs from the selected view.",
+          "docs": "Whether the current table state differs from the selected custom view. Ignored for the default view.",
           "docsTags": [
             {
               "name": "default",

package/dist/lib/shell/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/wc/components/PanelTools/panel-tools-types.ts", "../../../src/wc/shell/nav-chrome.ts", "../../../src/wc/components/Menu/menu-placement.ts", "../../../src/wc/shell/shell-gradient-presets.ts", "../../../src/wc/shell/shell-responsive.ts"],
-  "sourcesContent": ["/** Application-owned tool id for the shell rail and responsive tool views. */\nexport type PanelToolsToolId = string;\n\n/** Canonical Motive shell recipe used when item metadata is omitted. */\nexport type CanonicalPanelToolsToolId =\n  | 'search'\n  | 'messages'\n  | 'agents'\n  | 'stacks'\n  | 'activity'\n  | 'help';\n\nexport const PANEL_TOOLS_TOOL_IDS: CanonicalPanelToolsToolId[] = [\n  'search',\n  'messages',\n  'agents',\n  'stacks',\n  'activity',\n  'help',\n];\n\n/** Rail header slot \u2014 mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: CanonicalPanelToolsToolId = 'search';\n\n/** Rail footer slot \u2014 flush to the bottom of the tools column. */\nexport const PANEL_TOOLS_FOOTER_TOOL_ID: CanonicalPanelToolsToolId = 'help';\n\nexport const PANEL_TOOLS_LABELS: Record<CanonicalPanelToolsToolId, string> = {\n  search: 'Search',\n  messages: 'Messages',\n  stacks: 'Stacks',\n  activity: 'Activity',\n  agents: 'Agents',\n  help: 'Help & Support',\n};\n\nexport const PANEL_TOOLS_SHORTCUTS: Partial<Record<CanonicalPanelToolsToolId, string>> = {\n  search: 'K',\n  agents: 'A',\n  messages: 'M',\n  stacks: 'S',\n  activity: 'N',\n  help: '/',\n};\n\nexport interface PanelToolsItem {\n  id: PanelToolsToolId;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Visible and accessible fallback label for custom tool ids. */\n  label?: string;\n  /** Explicit rail region; canonical Search/Help placement is the fallback. */\n  railPlacement?: 'header' | 'body' | 'footer';\n  /** Stable ordering within the selected rail region. */\n  order?: number;\n  /** Optional shortcut label displayed by the tooltip. */\n  shortcutKey?: string;\n  /** Mobile destination recipe; canonical ids retain their explicit defaults. */\n  mobileDestination?: 'search' | 'inbox' | 'messages' | 'agents' | 'help';\n  /** Whether this rail button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  isInactive?: boolean;\n  ariaLabel?: string;\n}\n\n/** Canonical shell recipe used by Lab and by managed ShellApp examples. */\nexport const PANEL_TOOLS_DEFAULT_ITEMS: PanelToolsItem[] = [\n  {\n    id: 'search',\n    icon: 'MagnifyingGlass',\n    label: PANEL_TOOLS_LABELS.search,\n    railPlacement: 'header',\n    order: 0,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.search,\n    mobileDestination: 'search',\n  },\n  {\n    id: 'messages',\n    icon: 'MessageBubbleStack',\n    label: PANEL_TOOLS_LABELS.messages,\n    order: 1,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.messages,\n    mobileDestination: 'messages',\n  },\n  {\n    id: 'agents',\n    icon: 'AI',\n    label: PANEL_TOOLS_LABELS.agents,\n    order: 2,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.agents,\n    mobileDestination: 'agents',\n  },\n  {\n    id: 'stacks',\n    icon: 'ViewMenu',\n    label: PANEL_TOOLS_LABELS.stacks,\n    order: 3,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.stacks,\n    mobileDestination: 'inbox',\n  },\n  {\n    id: 'activity',\n    icon: 'Bell',\n    label: PANEL_TOOLS_LABELS.activity,\n    order: 4,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.activity,\n    mobileDestination: 'inbox',\n  },\n  {\n    id: 'help',\n    icon: 'CircleQuestion',\n    label: PANEL_TOOLS_LABELS.help,\n    railPlacement: 'footer',\n    order: 5,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.help,\n    mobileDestination: 'help',\n  },\n];\n\nexport interface PanelToolsHeaderAction {\n  id: string;\n  icon: string;\n  ariaLabel: string;\n  triggerId?: string;\n  controls?: string;\n  expanded?: boolean;\n  haspopup?: 'menu' | 'dialog' | 'listbox' | 'tree' | 'grid';\n  pressed?: boolean;\n  isInactive?: boolean;\n}\n\nexport interface PanelToolsHeaderConfig {\n  title?: string;\n  showBack?: boolean;\n  backIcon?: string;\n  backAriaLabel?: string;\n  actions?: PanelToolsHeaderAction[];\n}\n\n/** Per-tool header state. The application replaces the object when a tool changes depth or actions. */\nexport type PanelToolsHeaders = Partial<Record<PanelToolsToolId, PanelToolsHeaderConfig>>;\n", "/** Nav chrome style slot \u2014 dashboard vs settings. Colors unified for now; texture hooks use the class. */\nexport type NavChromeStyle = 'dashboard' | 'settings';\n\n/** Document hint for first paint before framework props land. */\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\nexport function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {\n  if (attr === 'dashboard' || attr === 'settings') return attr;\n  return undefined;\n}\n\nexport function setNavStyleHint(style: NavChromeStyle): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);\n}\n\nexport function clearNavStyleHint(): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);\n}\n\nexport function resolveNavChromeStyle(\n  styleProp: NavChromeStyle,\n  hostAttr: string | null,\n  docHint?: string | null,\n): NavChromeStyle {\n  const fromHost = readNavStyleAttr(hostAttr);\n  if (fromHost) return fromHost;\n\n  const hint =\n    docHint !== undefined\n      ? docHint\n      : typeof document !== 'undefined'\n        ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n        : null;\n  const fromHint = readNavStyleAttr(hint);\n  if (fromHint) return fromHint;\n\n  return styleProp;\n}\n\nexport function shouldResyncNavChromeStyle(\n  renderedStyle: NavChromeStyle,\n  style: NavChromeStyle,\n): boolean {\n  return renderedStyle !== style;\n}\n", "import type { ChoicePopupAnchorAlignment } from '../../utils/choice-popup-alignment';\nimport type { MenuAlign, MenuSide } from './menu-position';\n\n/** Placement props bindable on `ds-menu` (side, align, offsets). */\nexport interface MenuPlacement {\n  side: MenuSide;\n  align: MenuAlign;\n  anchorAlignment: ChoicePopupAnchorAlignment;\n  sideOffset: number | string;\n  alignOffset: number | string;\n}\n\n/**\n * Canonical `ds-menu` placement for the **panel-nav footer user menu**.\n * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).\n *\n * Not for BarNav overflow menus \u2014 those use `side=\"bottom\"` / `align=\"end\"` internally.\n * `align: 'end'` bottom-aligns the last choice cell on the anchor; the side offset nudges into the content area:\n * - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).\n * - `anchorAlignment: 'choice-cell'`: the shared section inset puts the last row edge on the footer user row.\n */\nexport const PANEL_NAV_USER_MENU_PLACEMENT = {\n  side: 'right',\n  align: 'end',\n  anchorAlignment: 'choice-cell',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: 0,\n} as const satisfies MenuPlacement;\n\n/**\n * Canonical placement for a menu opened by a PanelTools header action.\n * Matches BarNav overflow: the 32px trigger is 8px inside the 48px header, so\n * a 12px side offset places the popup 4px below the header edge. Choice-cell\n * alignment keeps the final menu item edge aligned with the trigger.\n */\nexport const PANEL_TOOLS_HEADER_MENU_PLACEMENT = {\n  side: 'bottom',\n  align: 'end',\n  anchorAlignment: 'choice-cell',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: 0,\n} as const satisfies MenuPlacement;\n", "/** Built-in shell chrome wash presets. */\nexport type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';\n\nexport const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = [\n  'none',\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Wash presets shown after the `none` option in pickers. */\nexport const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[] = [\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Default wash when `gradient-preset` is omitted. */\nexport const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset = 'neutral';\n\nexport const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string> = {\n  none: 'None',\n  cool: 'Cool',\n  neutral: 'Neutral',\n  warm: 'Warm',\n  fresh: 'Fresh',\n};\n\nexport interface ShellGradientStop {\n  color: string;\n  position: number;\n}\n\nexport interface ShellGradientRecipe {\n  opacity: number;\n  stops: readonly ShellGradientStop[];\n}\n\nexport interface ShellGradientPickerPreview {\n  backgroundColor: string;\n  backgroundImage?: string;\n  opacity?: number;\n}\n\nexport interface ShellGradientPickerOption {\n  value: ShellGradientPreset;\n  label: string;\n  preview: ShellGradientPickerPreview;\n}\n\nexport interface ShellGradientPickerSection {\n  options: ShellGradientPickerOption[];\n}\n\nconst SHELL_GRADIENT_RECIPES: Record<Exclude<ShellGradientPreset, 'none'>, ShellGradientRecipe> = {\n  cool: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-blue-strong-background)', position: 100 },\n    ],\n  },\n  neutral: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-grey-strong-background)', position: 100 },\n    ],\n  },\n  warm: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-yellow-strong-background)', position: 100 },\n    ],\n  },\n  fresh: {\n    opacity: 0.4,\n    stops: [\n      { color: 'var(--color-color-intent-cyan-faint-background)', position: 0 },\n      { color: 'var(--color-background-transparent)', position: 47 },\n      { color: 'var(--color-background-transparent)', position: 58 },\n      { color: 'var(--color-color-intent-red-faint-background)', position: 83 },\n      { color: 'var(--color-color-intent-pink-faint-background)', position: 100 },\n    ],\n  },\n};\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\nexport function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null {\n  if (preset === 'none') return null;\n  const stops = SHELL_GRADIENT_RECIPES[preset].stops;\n  return stops[stops.length - 1]?.color ?? null;\n}\n\nexport function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null {\n  const normalized = normalizeShellGradientPreset(preset);\n  return normalized === 'none' ? null : SHELL_GRADIENT_RECIPES[normalized];\n}\n\nexport function shellGradientPresetOpacity(preset: ShellGradientPreset): string {\n  return String(shellGradientPresetRecipe(preset)?.opacity ?? 0);\n}\n\nexport function isShellGradientPreset(value: string): value is ShellGradientPreset {\n  return (SHELL_GRADIENT_PRESETS as string[]).includes(value);\n}\n\n/**\n * Coerce unknown/absent presets to the default. Runtime values escape the\n * type: removing the reflected `gradient-preset` attribute (e.g. an Angular\n * `[attr.gradient-preset]=\"null\"` binding) drives the prop to null past its\n * field default \u2014 without normalization the stop lookup interpolates the\n * literal string \"undefined\" into CSS and the wash silently disappears.\n */\nexport function normalizeShellGradientPreset(\n  value: string | null | undefined,\n): ShellGradientPreset {\n  return value != null && isShellGradientPreset(value) ? value : DEFAULT_SHELL_GRADIENT_PRESET;\n}\n\n/** Radial wash for a preset \u2014 transparent at top-left into the intent stop. `none` returns no image. */\nexport function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {\n  const normalized = normalizeShellGradientPreset(preset);\n  if (normalized === 'none') return 'none';\n\n  return buildShellRadialGradientFromStops(SHELL_GRADIENT_RECIPES[normalized].stops);\n}\n\n/** Build the production shell geometry from an ordered set of design-time stops. */\nexport function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string {\n  const serialized = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');\n  return `radial-gradient(${GRADIENT_GEOMETRY}, ${serialized})`;\n}\n\n/** Generic SwatchPicker sections for the fixed shell appearance presets. */\nexport function shellGradientPickerSections(): ShellGradientPickerSection[] {\n  return [\n    {\n      options: [{\n        value: 'none',\n        label: SHELL_GRADIENT_PRESET_LABELS.none,\n        preview: {\n          backgroundColor: 'var(--color-background-secondary)',\n        },\n      }],\n    },\n    {\n      options: SHELL_GRADIENT_WASH_PRESETS.map(preset => ({\n        value: preset,\n        label: SHELL_GRADIENT_PRESET_LABELS[preset],\n        preview: {\n          backgroundColor: 'var(--color-background-secondary)',\n          backgroundImage: buildShellRadialGradientForPreset(preset),\n          opacity: Number(shellGradientPresetOpacity(preset)),\n        },\n      })),\n    },\n  ];\n}\n", "import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';\n\nexport type ShellResponsiveMode = 'desktop' | 'tablet' | 'mobile';\nexport type MobileDestination = 'area' | 'search' | 'inbox' | 'messages' | 'agents' | 'help';\nexport type ShellInboxToolId = PanelToolsToolId;\n\nexport const SHELL_DESKTOP_BREAKPOINT = 1200;\nexport const SHELL_MOBILE_BREAKPOINT = 768;\nexport const SHELL_DEFAULT_INBOX_TOOL: ShellInboxToolId = 'activity';\n\nexport function resolveShellResponsiveMode(width: number): ShellResponsiveMode {\n  if (width >= SHELL_DESKTOP_BREAKPOINT) return 'desktop';\n  if (width >= SHELL_MOBILE_BREAKPOINT) return 'tablet';\n  return 'mobile';\n}\n\nexport function resolveManagedShellPageCapacity(\n  mode: ShellResponsiveMode,\n  toolsOpen: boolean\n): 'roomy' | 'compact' | 'constrained' {\n  if (mode === 'desktop') return toolsOpen ? 'compact' : 'roomy';\n  return toolsOpen ? 'constrained' : 'compact';\n}\n\nexport function shellMobileDestinationForTool(\n  open: boolean,\n  tool: PanelToolsToolId | ''\n): MobileDestination {\n  if (!open || !tool) return 'area';\n  if (tool === 'help') return 'help';\n  if (tool === 'search') return 'search';\n  if (tool === 'messages') return 'messages';\n  if (tool === 'agents') return 'agents';\n  return 'inbox';\n}\n\nexport function isShellInboxTool(tool: string): tool is ShellInboxToolId {\n  return tool === 'stacks' || tool === 'activity';\n}\n\nexport function resolveAvailableInboxTool(\n  preferred: string,\n  available: readonly PanelToolsToolId[]\n): ShellInboxToolId | '' {\n  const inbox = available.filter(isShellInboxTool);\n  if (isShellInboxTool(preferred) && inbox.includes(preferred)) return preferred;\n  if (inbox.includes(SHELL_DEFAULT_INBOX_TOOL)) return SHELL_DEFAULT_INBOX_TOOL;\n  return inbox[0] ?? '';\n}\n\n/** Active-destination reselects are inert unless they also dismiss the Menu pane. */\nexport function shouldEmitMobileDestinationChange(\n  active: MobileDestination,\n  next: MobileDestination,\n  navigationOpen: boolean\n): boolean {\n  return navigationOpen || active !== next;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/** Application-owned tool id for the shell rail and responsive tool views. */\nexport type PanelToolsToolId = string;\n\n/** Canonical Motive shell recipe used when item metadata is omitted. */\nexport type CanonicalPanelToolsToolId =\n  | 'search'\n  | 'messages'\n  | 'agents'\n  | 'stacks'\n  | 'activity'\n  | 'help';\n\nexport const PANEL_TOOLS_TOOL_IDS: CanonicalPanelToolsToolId[] = [\n  'search',\n  'messages',\n  'agents',\n  'stacks',\n  'activity',\n  'help',\n];\n\n/** Rail header slot \u2014 mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: CanonicalPanelToolsToolId = 'search';\n\n/** Rail footer slot \u2014 flush to the bottom of the tools column. */\nexport const PANEL_TOOLS_FOOTER_TOOL_ID: CanonicalPanelToolsToolId = 'help';\n\nexport const PANEL_TOOLS_LABELS: Record<CanonicalPanelToolsToolId, string> = {\n  search: 'Search',\n  messages: 'Messages',\n  stacks: 'Stacks',\n  activity: 'Activity',\n  agents: 'Agents',\n  help: 'Help & Support',\n};\n\nexport const PANEL_TOOLS_SHORTCUTS: Partial<Record<CanonicalPanelToolsToolId, string>> = {\n  search: 'K',\n  agents: 'A',\n  messages: 'M',\n  stacks: 'S',\n  activity: 'N',\n  help: '/',\n};\n\nexport interface PanelToolsItem {\n  id: PanelToolsToolId;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Visible and accessible fallback label for custom tool ids. */\n  label?: string;\n  /** Explicit rail region; canonical Search/Help placement is the fallback. */\n  railPlacement?: 'header' | 'body' | 'footer';\n  /** Stable ordering within the selected rail region. */\n  order?: number;\n  /** Optional shortcut label displayed by the tooltip. */\n  shortcutKey?: string;\n  /** Mobile destination recipe; canonical ids retain their explicit defaults. */\n  mobileDestination?: 'search' | 'inbox' | 'messages' | 'agents' | 'help';\n  /** Whether this rail button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  isInactive?: boolean;\n  ariaLabel?: string;\n}\n\n/** Canonical shell recipe used by Lab and by managed ShellApp examples. */\nexport const PANEL_TOOLS_DEFAULT_ITEMS: PanelToolsItem[] = [\n  {\n    id: 'search',\n    icon: 'MagnifyingGlass',\n    label: PANEL_TOOLS_LABELS.search,\n    railPlacement: 'header',\n    order: 0,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.search,\n    mobileDestination: 'search',\n  },\n  {\n    id: 'messages',\n    icon: 'MessageBubbleStack',\n    label: PANEL_TOOLS_LABELS.messages,\n    order: 1,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.messages,\n    mobileDestination: 'messages',\n  },\n  {\n    id: 'agents',\n    icon: 'AI',\n    label: PANEL_TOOLS_LABELS.agents,\n    order: 2,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.agents,\n    mobileDestination: 'agents',\n  },\n  {\n    id: 'stacks',\n    icon: 'ViewMenu',\n    label: PANEL_TOOLS_LABELS.stacks,\n    order: 3,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.stacks,\n    mobileDestination: 'inbox',\n  },\n  {\n    id: 'activity',\n    icon: 'Bell',\n    label: PANEL_TOOLS_LABELS.activity,\n    order: 4,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.activity,\n    mobileDestination: 'inbox',\n  },\n  {\n    id: 'help',\n    icon: 'CircleQuestion',\n    label: PANEL_TOOLS_LABELS.help,\n    railPlacement: 'footer',\n    order: 5,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.help,\n    mobileDestination: 'help',\n  },\n];\n\nexport interface PanelToolsHeaderAction {\n  id: string;\n  icon: string;\n  ariaLabel: string;\n  triggerId?: string;\n  controls?: string;\n  expanded?: boolean;\n  haspopup?: 'menu' | 'dialog' | 'listbox' | 'tree' | 'grid';\n  pressed?: boolean;\n  isInactive?: boolean;\n}\n\nexport interface PanelToolsHeaderConfig {\n  title?: string;\n  showBack?: boolean;\n  backIcon?: string;\n  backAriaLabel?: string;\n  actions?: PanelToolsHeaderAction[];\n}\n\n/** Per-tool header state. The application replaces the object when a tool changes depth or actions. */\nexport type PanelToolsHeaders = Partial<Record<PanelToolsToolId, PanelToolsHeaderConfig>>;\n", "/** Nav chrome style slot \u2014 dashboard vs settings. Colors unified for now; texture hooks use the class. */\nexport type NavChromeStyle = 'dashboard' | 'settings';\n\n/** Document hint for first paint before framework props land. */\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\nexport function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {\n  if (attr === 'dashboard' || attr === 'settings') return attr;\n  return undefined;\n}\n\nexport function setNavStyleHint(style: NavChromeStyle): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);\n}\n\nexport function clearNavStyleHint(): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);\n}\n\nexport function resolveNavChromeStyle(\n  styleProp: NavChromeStyle,\n  hostAttr: string | null,\n  docHint?: string | null,\n): NavChromeStyle {\n  const fromHost = readNavStyleAttr(hostAttr);\n  if (fromHost) return fromHost;\n\n  const hint =\n    docHint !== undefined\n      ? docHint\n      : typeof document !== 'undefined'\n        ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n        : null;\n  const fromHint = readNavStyleAttr(hint);\n  if (fromHint) return fromHint;\n\n  return styleProp;\n}\n\nexport function shouldResyncNavChromeStyle(\n  renderedStyle: NavChromeStyle,\n  style: NavChromeStyle,\n): boolean {\n  return renderedStyle !== style;\n}\n", "import type { ChoicePopupAnchorAlignment } from '../../utils/choice-popup-alignment';\nimport type { MenuAlign, MenuSide } from './menu-position';\n\n/** Placement props bindable on `ds-menu` (side, align, offsets). */\nexport interface MenuPlacement {\n  side: MenuSide;\n  align: MenuAlign;\n  anchorAlignment: ChoicePopupAnchorAlignment;\n  sideOffset: number | string;\n  alignOffset: number | string;\n}\n\n/**\n * Canonical `ds-menu` placement for the **panel-nav footer user menu**.\n * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).\n *\n * Not for BarNav overflow menus \u2014 those use `side=\"bottom\"` / `align=\"end\"` internally.\n * `align: 'end'` bottom-aligns the last choice cell on the anchor; the side offset nudges into the content area:\n * - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).\n * - `anchorAlignment: 'choice-cell'`: the shared section inset puts the last row edge on the footer user row.\n */\nexport const PANEL_NAV_USER_MENU_PLACEMENT = {\n  side: 'right',\n  align: 'end',\n  anchorAlignment: 'choice-cell',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: 0,\n} as const satisfies MenuPlacement;\n\n/**\n * Canonical placement for a menu opened by a PanelTools header action.\n * Matches BarNav overflow: the 32px trigger is 8px inside the 48px header, so\n * a 12px side offset places the popup 4px below the header edge. Choice-cell\n * alignment keeps the final menu item edge aligned with the trigger.\n */\nexport const PANEL_TOOLS_HEADER_MENU_PLACEMENT = {\n  side: 'bottom',\n  align: 'end',\n  anchorAlignment: 'choice-cell',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: 0,\n} as const satisfies MenuPlacement;\n", "/** Built-in shell chrome wash presets. */\nexport type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';\n\nexport const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = [\n  'none',\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Wash presets shown after the `none` option in pickers. */\nexport const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[] = [\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Default wash when `gradient-preset` is omitted. */\nexport const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset = 'neutral';\n\nexport const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string> = {\n  none: 'None',\n  cool: 'Cool',\n  neutral: 'Neutral',\n  warm: 'Warm',\n  fresh: 'Fresh',\n};\n\nexport interface ShellGradientStop {\n  color: string;\n  position: number;\n}\n\nexport interface ShellGradientRecipe {\n  opacity: number;\n  stops: readonly ShellGradientStop[];\n}\n\nexport interface ShellGradientPickerPreview {\n  backgroundColor: string;\n  backgroundImage?: string;\n  opacity?: number;\n}\n\nexport interface ShellGradientPickerOption {\n  value: ShellGradientPreset;\n  label: string;\n  preview: ShellGradientPickerPreview;\n}\n\nexport interface ShellGradientPickerSection {\n  options: ShellGradientPickerOption[];\n}\n\nconst SHELL_GRADIENT_RECIPES: Record<Exclude<ShellGradientPreset, 'none'>, ShellGradientRecipe> = {\n  cool: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-blue-strong-background)', position: 100 },\n    ],\n  },\n  neutral: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-grey-strong-background)', position: 100 },\n    ],\n  },\n  warm: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-yellow-strong-background)', position: 100 },\n    ],\n  },\n  fresh: {\n    opacity: 0.4,\n    stops: [\n      { color: 'var(--color-color-intent-cyan-faint-background)', position: 0 },\n      { color: 'var(--color-background-transparent)', position: 47 },\n      { color: 'var(--color-background-transparent)', position: 58 },\n      { color: 'var(--color-color-intent-red-faint-background)', position: 83 },\n      { color: 'var(--color-color-intent-pink-faint-background)', position: 100 },\n    ],\n  },\n};\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\nexport function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null {\n  if (preset === 'none') return null;\n  const stops = SHELL_GRADIENT_RECIPES[preset].stops;\n  return stops[stops.length - 1]?.color ?? null;\n}\n\nexport function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null {\n  const normalized = normalizeShellGradientPreset(preset);\n  return normalized === 'none' ? null : SHELL_GRADIENT_RECIPES[normalized];\n}\n\nexport function shellGradientPresetOpacity(preset: ShellGradientPreset): string {\n  return String(shellGradientPresetRecipe(preset)?.opacity ?? 0);\n}\n\nexport function isShellGradientPreset(value: string): value is ShellGradientPreset {\n  return (SHELL_GRADIENT_PRESETS as string[]).includes(value);\n}\n\n/**\n * Coerce unknown/absent presets to the default. Runtime values escape the\n * type: removing the reflected `gradient-preset` attribute (e.g. an Angular\n * `[attr.gradient-preset]=\"null\"` binding) drives the prop to null past its\n * field default \u2014 without normalization the stop lookup interpolates the\n * literal string \"undefined\" into CSS and the wash silently disappears.\n */\nexport function normalizeShellGradientPreset(\n  value: string | null | undefined,\n): ShellGradientPreset {\n  return value != null && isShellGradientPreset(value) ? value : DEFAULT_SHELL_GRADIENT_PRESET;\n}\n\n/** Radial wash for a preset \u2014 transparent at top-left into the intent stop. `none` returns no image. */\nexport function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {\n  const normalized = normalizeShellGradientPreset(preset);\n  if (normalized === 'none') return 'none';\n\n  return buildShellRadialGradientFromStops(SHELL_GRADIENT_RECIPES[normalized].stops);\n}\n\n/** Build the production shell geometry from an ordered set of design-time stops. */\nexport function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string {\n  const serialized = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');\n  return `radial-gradient(${GRADIENT_GEOMETRY}, ${serialized})`;\n}\n\n/** Generic SwatchPicker sections for the fixed shell appearance presets. */\nexport function shellGradientPickerSections(): ShellGradientPickerSection[] {\n  return [\n    {\n      options: [{\n        value: 'none',\n        label: SHELL_GRADIENT_PRESET_LABELS.none,\n        preview: {\n          backgroundColor: 'var(--color-background-secondary)',\n        },\n      }],\n    },\n    {\n      options: SHELL_GRADIENT_WASH_PRESETS.map(preset => ({\n        value: preset,\n        label: SHELL_GRADIENT_PRESET_LABELS[preset],\n        preview: {\n          backgroundColor: 'var(--color-background-secondary)',\n          backgroundImage: buildShellRadialGradientForPreset(preset),\n          opacity: Number(shellGradientPresetOpacity(preset)),\n        },\n      })),\n    },\n  ];\n}\n", "import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';\n\nexport type ShellResponsiveMode = 'desktop' | 'tablet' | 'mobile';\nexport type MobileDestination = 'area' | 'search' | 'inbox' | 'messages' | 'agents' | 'help';\nexport type ShellInboxToolId = PanelToolsToolId;\n\nexport const SHELL_DESKTOP_BREAKPOINT = 1200;\nexport const SHELL_MOBILE_BREAKPOINT = 768;\nexport const SHELL_DEFAULT_INBOX_TOOL: ShellInboxToolId = 'activity';\n\nexport function resolveShellResponsiveMode(width: number): ShellResponsiveMode {\n  if (width >= SHELL_DESKTOP_BREAKPOINT) return 'desktop';\n  if (width >= SHELL_MOBILE_BREAKPOINT) return 'tablet';\n  return 'mobile';\n}\n\nexport function resolveManagedShellPageCapacity(\n  mode: ShellResponsiveMode\n): 'roomy' | 'compact' | 'constrained' {\n  return mode === 'desktop' ? 'roomy' : 'compact';\n}\n\nexport function shellMobileDestinationForTool(\n  open: boolean,\n  tool: PanelToolsToolId | ''\n): MobileDestination {\n  if (!open || !tool) return 'area';\n  if (tool === 'help') return 'help';\n  if (tool === 'search') return 'search';\n  if (tool === 'messages') return 'messages';\n  if (tool === 'agents') return 'agents';\n  return 'inbox';\n}\n\nexport function isShellInboxTool(tool: string): tool is ShellInboxToolId {\n  return tool === 'stacks' || tool === 'activity';\n}\n\nexport function resolveAvailableInboxTool(\n  preferred: string,\n  available: readonly PanelToolsToolId[]\n): ShellInboxToolId | '' {\n  const inbox = available.filter(isShellInboxTool);\n  if (isShellInboxTool(preferred) && inbox.includes(preferred)) return preferred;\n  if (inbox.includes(SHELL_DEFAULT_INBOX_TOOL)) return SHELL_DEFAULT_INBOX_TOOL;\n  return inbox[0] ?? '';\n}\n\n/** Active-destination reselects are inert unless they also dismiss the Menu pane. */\nexport function shouldEmitMobileDestinationChange(\n  active: MobileDestination,\n  next: MobileDestination,\n  navigationOpen: boolean\n): boolean {\n  return navigationOpen || active !== next;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/lib/shell/shell-responsive.d.ts

@@ -6,7 +6,7 @@ export declare const SHELL_DESKTOP_BREAKPOINT = 1200;
 export declare const SHELL_MOBILE_BREAKPOINT = 768;
 export declare const SHELL_DEFAULT_INBOX_TOOL: ShellInboxToolId;
 export declare function resolveShellResponsiveMode(width: number): ShellResponsiveMode;
-export declare function resolveManagedShellPageCapacity(mode: ShellResponsiveMode, toolsOpen: boolean): 'roomy' | 'compact' | 'constrained';
+export declare function resolveManagedShellPageCapacity(mode: ShellResponsiveMode): 'roomy' | 'compact' | 'constrained';
 export declare function shellMobileDestinationForTool(open: boolean, tool: PanelToolsToolId | ''): MobileDestination;
 export declare function isShellInboxTool(tool: string): tool is ShellInboxToolId;
 export declare function resolveAvailableInboxTool(preferred: string, available: readonly PanelToolsToolId[]): ShellInboxToolId | '';

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

@@ -637,7 +637,7 @@
     },
     {
       "path": "src/wc/components/FilterMenu/FilterMenu.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  CONTROL_TEXT_VARIANT,\n  controlWidthClass,\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n  type ControlWidth,\n} from '../../utils';\nimport type { AnchoredAlign, AnchoredSide } from '../../utils/anchored-position';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { ChoiceOptionRow } from '../../utils/choice-list-parts';\nimport { choiceListUsesSubtext } from '../../utils/choice-list';\n\nexport type FilterMenuFilterKind = 'single' | 'multiple' | 'boolean' | 'date';\nexport type FilterMenuSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type FilterMenuWidth = ControlWidth;\n\nexport interface FilterMenuOption {\n  label: string;\n  value: string;\n  description?: string;\n  isInactive?: boolean;\n}\n\nexport interface FilterMenuFilter {\n  id: string;\n  label: string;\n  kind: FilterMenuFilterKind;\n  options?: FilterMenuOption[];\n  description?: string;\n  fieldLabel?: string;\n  /** Draw a standard menu-section divider after this category. */\n  divider?: boolean;\n}\n\nexport type FilterMenuValue = string[] | boolean | string;\nexport type FilterMenuValues = Record<string, FilterMenuValue | undefined>;\n\nexport interface FilterMenuChangeDetail {\n  filterId: string;\n  value: FilterMenuValue;\n}\n\nconst FILTER_MENU_FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet filterMenuId = 0;\n\nconst ICON_SIZE: Record<FilterMenuSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-filter-menu',\n  styleUrl: 'FilterMenu.css',\n  scoped: true,\n})\nexport class FilterMenu {\n  @Element() el!: HTMLElement;\n\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true }) open: boolean = false;\n  /** Select trigger text. The selected count is appended automatically. */\n  @Prop() triggerLabel: string = 'Filters';\n  /** Optional select trigger prefix icon name. */\n  @Prop() icon: string | undefined = 'Filters';\n  /** Select trigger density. */\n  @Prop() size: FilterMenuSize = 'md';\n  /** Select trigger width fit. */\n  @Prop() width: FilterMenuWidth = 'hug';\n  /** Show the surface-aware inset border around the select trigger. */\n  @Prop() hasBorder: boolean = true;\n  /** Show selected interaction fill when one or more criteria are active. */\n  @Prop() activeFill: boolean = false;\n  /** ID applied to the internal select trigger. */\n  @Prop() inputId: string | undefined;\n  /** Direct accessible name for the internal select trigger. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Product-owned filter categories and option definitions. */\n  @Prop() filters: FilterMenuFilter[] = [];\n  /** Controlled values keyed by filter id. */\n  @Prop() values: FilterMenuValues = {};\n  /** Controlled category shown in the option pane. */\n  @Prop() activeFilterId: string | undefined;\n  /** External trigger element to position against. */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element used for positioning and focus return. */\n  @Prop() anchorId: string | undefined;\n  /** Preferred popup side; collision handling may flip it. */\n  @Prop() side: AnchoredSide = 'bottom';\n  /** Cross-axis alignment against the trigger. */\n  @Prop() align: AnchoredAlign = 'end';\n  /** Gap between trigger and popup — number in px or a TokoMo length. */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number in px or a TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  /** Popup width. It remains clamped to the viewport by the component recipe. */\n  @Prop() menuWidth: string = TOKEN_CSS_LENGTHS.menuWidthLg;\n  /** Accessible name for the non-modal filter dialog. */\n  @Prop() menuLabel: string = 'Filters';\n  /** Accessible name for the category tab list. */\n  @Prop() categoriesLabel: string = 'Filter categories';\n  /** Footer action and date-clear accessible label. */\n  @Prop() clearLabel: string = 'Clear';\n  /** Show a visible focus ring on initial entry after keyboard activation. */\n  @Prop() initialFocusVisible: boolean = false;\n\n  @State() private shouldRender = false;\n  @State() private closing = false;\n  @State() private positionReady = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusRingVisible = false;\n  @State() private activeOptionIndex = 0;\n\n  /** Requests a controlled value replacement without closing the popup. */\n  @Event() dsChange!: EventEmitter<FilterMenuChangeDetail>;\n  /** Requests that the consumer clear every filter value. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Requests a controlled active-category replacement. */\n  @Event() dsActiveFilterChange!: EventEmitter<string>;\n  /** Requests that the controlled popup close. */\n  @Event() dsClose!: EventEmitter<void>;\n  /** Emitted whenever internal select-trigger activation changes popup visibility. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n  /** Emitted after exit motion and rendered popup removal complete. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  private readonly generatedId = `ds-filter-menu-${++filterMenuId}`;\n  private outsideHandler: ((event: MouseEvent) => void) | null = null;\n  private triggerElement: HTMLButtonElement | null = null;\n  private pendingInitialFocusVisible = false;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private closingSnapshot: {\n    filters: FilterMenuFilter[];\n    values: FilterMenuValues;\n    activeFilterId: string | undefined;\n  } | null = null;\n\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.resolvedAnchor,\n    getPopup: () => this.el.querySelector<HTMLElement>('.filter-menu-popup'),\n    measure: (anchor, popup) => {\n      if (!this.open) return null;\n      const anchorRect = anchor.getBoundingClientRect();\n      const sectionInsetPx = resolveCssLengthPx(\n        TOKEN_DEFAULTS.space050,\n        TOKEN_DEFAULTS.space050\n      );\n      return {\n        anchorRect,\n        popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n        side: this.side,\n        align: this.align,\n        sideOffsetPx: resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050),\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: this.align,\n          alignOffsetPx: resolveCssLengthPx(this.alignOffset, 0),\n          sectionInsetPx,\n        }),\n        viewportPadPx: this.viewportPad,\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    observeResize: true,\n    topLayer: true,\n  });\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.position.unobserve();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.closingSnapshot = null;\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.focusRingVisible = this.pendingInitialFocusVisible || this.initialFocusVisible;\n      this.setupListeners();\n      this.position.schedule(() => this.focusInitialCategory());\n      return;\n    }\n\n    if (!this.shouldRender) return;\n    this.position.cancel();\n    this.captureClosingSnapshot();\n    this.closing = true;\n    this.teardownListeners();\n    const duration = resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort2,\n      TOKEN_DEFAULTS.animationDurationShort3\n    );\n    if (duration <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.closeTimer = setTimeout(() => this.finishClose(), duration);\n  }\n\n  @Watch('anchor')\n  @Watch('anchorId')\n  @Watch('side')\n  @Watch('align')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  @Watch('menuWidth')\n  onPositionInputChange() {\n    if (this.open) this.position.schedule();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      return;\n    }\n    if (event.key !== 'Tab' || !this.tabLeavesPopup(event)) return;\n    event.preventDefault();\n    this.close(false);\n    this.moveFocusAfterTab(event.shiftKey);\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 this.triggerElement;\n  }\n\n  private get usesInternalTrigger(): boolean {\n    return !this.anchor && !this.anchorId;\n  }\n\n  private get anchorFocusTarget(): HTMLElement | null {\n    const anchor = this.resolvedAnchor;\n    if (!anchor) return null;\n    if (anchor.matches(FILTER_MENU_FOCUSABLE_SELECTOR)) return anchor;\n    return anchor.querySelector<HTMLElement>(FILTER_MENU_FOCUSABLE_SELECTOR) ?? anchor;\n  }\n\n  private get viewportPad(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get popupFallbackWidth(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthLg, TOKEN_DEFAULTS.menuWidthLg);\n  }\n\n  private get popupFallbackHeight(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private setupListeners() {\n    this.outsideHandler = event => {\n      const target = event.target as Node;\n      const popup = this.el.querySelector('.filter-menu-popup');\n      if (popup?.contains(target) || this.resolvedAnchor?.contains(target)) return;\n      this.close();\n    };\n    document.addEventListener('mousedown', this.outsideHandler, true);\n    this.position.observe();\n  }\n\n  private teardownListeners() {\n    this.position.unobserve();\n    if (this.outsideHandler) {\n      document.removeEventListener('mousedown', this.outsideHandler, true);\n      this.outsideHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close(restoreFocus = true) {\n    this.captureClosingSnapshot();\n    if (restoreFocus) this.focusAnchor();\n    this.dsOpenChange.emit(false);\n    this.dsClose.emit();\n    this.open = false;\n    this.onOpenChange(false);\n  }\n\n  private toggleFromTrigger(event: MouseEvent) {\n    if (this.open) {\n      this.close();\n      return;\n    }\n    this.pendingInitialFocusVisible = event.detail === 0;\n    this.open = true;\n    this.dsOpenChange.emit(true);\n    this.onOpenChange(true);\n  }\n\n  private handleTriggerKeyDown(event: KeyboardEvent) {\n    if (event.key !== 'ArrowDown' || this.open) return;\n    event.preventDefault();\n    this.pendingInitialFocusVisible = true;\n    this.open = true;\n    this.dsOpenChange.emit(true);\n    this.onOpenChange(true);\n  }\n\n  private finishClose() {\n    const popup = this.el.querySelector<HTMLElement>('.filter-menu-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.closingSnapshot = null;\n    this.closeTimer = null;\n    this.dsAfterClose.emit();\n  }\n\n  private captureClosingSnapshot() {\n    if (this.closingSnapshot) return;\n    this.closingSnapshot = {\n      filters: this.filters.map(filter => ({\n        ...filter,\n        options: filter.options?.map(option => ({ ...option })),\n      })),\n      values: Object.fromEntries(\n        Object.entries(this.values).map(([key, value]) => [\n          key,\n          Array.isArray(value) ? [...value] : value,\n        ])\n      ),\n      activeFilterId: this.activeFilterId,\n    };\n  }\n\n  private focusAnchor() {\n    const anchor = this.resolvedAnchor as\n      (HTMLElement & { setFocus?: () => Promise<void> | void }) | null;\n    if (anchor?.setFocus) {\n      void anchor.setFocus();\n      return;\n    }\n    this.anchorFocusTarget?.focus();\n  }\n\n  private focusInitialCategory() {\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLElement>('.filter-menu__category[tabindex=\"0\"]')?.focus();\n      this.pendingInitialFocusVisible = false;\n    });\n  }\n\n  private tabLeavesPopup(event: KeyboardEvent): boolean {\n    const popup = this.el.querySelector<HTMLElement>('.filter-menu-popup');\n    if (!popup) return true;\n    const focusables = Array.from(\n      popup.querySelectorAll<HTMLElement>(FILTER_MENU_FOCUSABLE_SELECTOR)\n    ).filter(element => element.getClientRects().length > 0);\n    const index = focusables.indexOf(event.target as HTMLElement);\n    if (index < 0) return true;\n    return event.shiftKey ? index === 0 : index === focusables.length - 1;\n  }\n\n  private moveFocusAfterTab(backwards: boolean) {\n    const anchor = this.anchorFocusTarget;\n    if (!anchor) return;\n    if (backwards) {\n      anchor.focus();\n      return;\n    }\n    const candidates = Array.from(\n      document.querySelectorAll<HTMLElement>(FILTER_MENU_FOCUSABLE_SELECTOR)\n    ).filter(\n      element =>\n        !element.closest('.filter-menu-popup') &&\n        !element.closest('[inert]') &&\n        element.getClientRects().length > 0\n    );\n    const index = candidates.indexOf(anchor);\n    (candidates[index + 1] ?? anchor).focus();\n  }\n\n  private selectedFilter(filters: FilterMenuFilter[], activeFilterId: string | undefined) {\n    return filters.find(filter => filter.id === activeFilterId) ?? filters[0];\n  }\n\n  private selectedCount(filter: FilterMenuFilter, values: FilterMenuValues): number {\n    const value = values[filter.id];\n    if (filter.kind === 'multiple') return Array.isArray(value) ? value.length : 0;\n    if (filter.kind === 'boolean') return value === true ? 1 : 0;\n    return typeof value === 'string' && value.length > 0 ? 1 : 0;\n  }\n\n  private totalSelected(filters: FilterMenuFilter[], values: FilterMenuValues): number {\n    return filters.reduce((total, filter) => total + this.selectedCount(filter, values), 0);\n  }\n\n  private activeFilterCount(filters: FilterMenuFilter[], values: FilterMenuValues): number {\n    return filters.filter(filter => this.selectedCount(filter, values) > 0).length;\n  }\n\n  private selectCategory(filterId: string, focus = false) {\n    this.activeOptionIndex = 0;\n    this.dsActiveFilterChange.emit(filterId);\n    if (!focus) return;\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLElement>(`[data-filter-category=\"${filterId}\"]`)?.focus();\n    });\n  }\n\n  private handleCategoryKeyDown(\n    event: KeyboardEvent,\n    filters: FilterMenuFilter[],\n    filterId: string\n  ) {\n    const currentIndex = filters.findIndex(filter => filter.id === filterId);\n    let nextIndex: number;\n    if (event.key === 'ArrowDown') nextIndex = (currentIndex + 1) % filters.length;\n    else if (event.key === 'ArrowUp')\n      nextIndex = (currentIndex - 1 + filters.length) % filters.length;\n    else if (event.key === 'Home') nextIndex = 0;\n    else if (event.key === 'End') nextIndex = filters.length - 1;\n    else if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      requestAnimationFrame(() => {\n        this.el\n          .querySelector<HTMLElement>(\n            '.filter-menu__options [role=\"option\"], .filter-menu__options input'\n          )\n          ?.focus();\n      });\n      return;\n    } else return;\n\n    event.preventDefault();\n    this.focusRingVisible = true;\n    this.selectCategory(filters[nextIndex].id, true);\n  }\n\n  private handlePanelKeyDown(event: KeyboardEvent, filterId: string) {\n    if (event.key !== 'ArrowLeft') return;\n    event.preventDefault();\n    this.el.querySelector<HTMLElement>(`[data-filter-category=\"${filterId}\"]`)?.focus();\n  }\n\n  private handleOptionKeyDown(\n    event: KeyboardEvent,\n    filter: FilterMenuFilter,\n    option: FilterMenuOption,\n    index: number,\n    values: FilterMenuValues\n  ) {\n    const options = filter.options ?? [];\n    if (event.key === 'ArrowLeft') {\n      this.handlePanelKeyDown(event, filter.id);\n      return;\n    }\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.selectOption(filter, option, values);\n      return;\n    }\n    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n    event.preventDefault();\n    const enabled = options\n      .map((candidate, optionIndex) => ({ candidate, optionIndex }))\n      .filter(({ candidate }) => !candidate.isInactive)\n      .map(({ optionIndex }) => optionIndex);\n    if (!enabled.length) return;\n    const current = enabled.indexOf(index);\n    let next: number;\n    if (event.key === 'Home') next = enabled[0];\n    else if (event.key === 'End') next = enabled[enabled.length - 1];\n    else {\n      const direction = event.key === 'ArrowDown' ? 1 : -1;\n      const start = current >= 0 ? current : direction === 1 ? -1 : 0;\n      next = enabled[(start + direction + enabled.length) % enabled.length];\n    }\n    this.activeOptionIndex = next;\n    this.focusRingVisible = true;\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLElement>(`#${this.generatedId}-${filter.id}-option-${next}`)?.focus();\n    });\n  }\n\n  private toggleMultiple(\n    filter: FilterMenuFilter,\n    option: FilterMenuOption,\n    checked: boolean,\n    values: FilterMenuValues\n  ) {\n    if (option.isInactive) return;\n    const current = Array.isArray(values[filter.id]) ? (values[filter.id] as string[]) : [];\n    const selected = new Set(current);\n    if (checked) selected.add(option.value);\n    else selected.delete(option.value);\n    const ordered = (filter.options ?? [])\n      .map(candidate => candidate.value)\n      .filter(value => selected.has(value));\n    this.dsChange.emit({ filterId: filter.id, value: ordered });\n  }\n\n  private selectOption(\n    filter: FilterMenuFilter,\n    option: FilterMenuOption,\n    values: FilterMenuValues\n  ) {\n    if (option.isInactive) return;\n    if (filter.kind === 'single') {\n      this.dsChange.emit({ filterId: filter.id, value: option.value });\n      return;\n    }\n    const selected = Array.isArray(values[filter.id])\n      ? (values[filter.id] as string[]).includes(option.value)\n      : false;\n    this.toggleMultiple(filter, option, !selected, values);\n  }\n\n  private renderOptions(filter: FilterMenuFilter, values: FilterMenuValues) {\n    const value = values[filter.id];\n    if (filter.kind === 'multiple' || filter.kind === 'single') {\n      const selected = Array.isArray(value) ? value : [];\n      const options = filter.options ?? [];\n      const usesSubtext = choiceListUsesSubtext(\n        options.map(option => ({\n          label: option.label,\n          value: option.value,\n          subtext: option.description,\n        }))\n      );\n      return options.map((option, index) => {\n        const isSelected =\n          filter.kind === 'multiple'\n            ? selected.includes(option.value)\n            : value === option.value;\n        return (\n          <ChoiceOptionRow\n            size=\"md\"\n            id={`${this.generatedId}-${filter.id}-option-${index}`}\n            option={{\n              label: option.label,\n              value: option.value,\n              subtext: option.description,\n              isInactive: option.isInactive,\n            }}\n            selected={isSelected}\n            active={index === this.activeOptionIndex}\n            focusRingVisible={this.focusRingVisible}\n            usesSubtext={usesSubtext}\n            tabIndex={index === this.activeOptionIndex ? 0 : -1}\n            leading={\n              filter.kind === 'multiple' ? (\n                <span\n                  class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n                  aria-hidden=\"true\"\n                >\n                  <ds-checkbox label=\"\" size=\"md\" checked={isSelected} presentation />\n                </span>\n              ) : undefined\n            }\n            onFocus={() => {\n              this.activeOptionIndex = index;\n            }}\n            onKeyDown={(event: KeyboardEvent) =>\n              this.handleOptionKeyDown(event, filter, option, index, values)\n            }\n            onHover={() => {\n              this.focusRingVisible = false;\n              this.activeOptionIndex = index;\n            }}\n            onSelect={() => this.selectOption(filter, option, values)}\n          />\n        );\n      });\n    }\n\n    if (filter.kind === 'boolean') {\n      const option: FilterMenuOption = {\n        label: filter.fieldLabel ?? filter.label,\n        value: 'true',\n        description: filter.description,\n      };\n      return (\n        <ChoiceOptionRow\n          size=\"md\"\n          id={`${this.generatedId}-${filter.id}-option-0`}\n          option={{\n            label: option.label,\n            value: option.value,\n            subtext: option.description,\n          }}\n          selected={value === true}\n          active\n          focusRingVisible={this.focusRingVisible}\n          usesSubtext={Boolean(option.description)}\n          tabIndex={0}\n          leading={\n            <span\n              class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-checkbox label=\"\" size=\"md\" checked={value === true} presentation />\n            </span>\n          }\n          onKeyDown={(event: KeyboardEvent) => {\n            if (event.key === 'ArrowLeft') this.handlePanelKeyDown(event, filter.id);\n            else if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault();\n              this.dsChange.emit({ filterId: filter.id, value: value !== true });\n            }\n          }}\n          onHover={() => {\n            this.focusRingVisible = false;\n          }}\n          onSelect={() => this.dsChange.emit({ filterId: filter.id, value: value !== true })}\n        />\n      );\n    }\n\n    const dateValue = typeof value === 'string' ? value : '';\n    const inputId = `${this.generatedId}-${filter.id}-input`;\n    return (\n      <div class=\"filter-menu__date-field\">\n        <label htmlFor={inputId}>\n          <ds-text as=\"span\" variant=\"text-body-small\" emphasis color=\"primary\">\n            {filter.fieldLabel ?? 'Event date'}\n          </ds-text>\n        </label>\n        <div class=\"filter-menu__date-control ds-control-frame ds-control--md\">\n          <input\n            id={inputId}\n            class=\"filter-menu__date-input\"\n            type=\"date\"\n            value={dateValue}\n            onInput={(event: Event) =>\n              this.dsChange.emit({\n                filterId: filter.id,\n                value: (event.target as HTMLInputElement).value,\n              })\n            }\n          />\n          {dateValue ? (\n            <ds-button-unfilled\n              variant=\"icon\"\n              icon=\"CrossCircle\"\n              size=\"sm\"\n              isInset\n              hasBorder={false}\n              rounded\n              ariaLabel={`${this.clearLabel} ${filter.fieldLabel ?? filter.label}`}\n              onDsClick={(event: CustomEvent<MouseEvent>) => {\n                event.stopPropagation();\n                this.dsChange.emit({ filterId: filter.id, value: '' });\n              }}\n            />\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const state =\n      this.closing && this.closingSnapshot\n        ? this.closingSnapshot\n        : {\n            filters: this.filters,\n            values: this.values,\n            activeFilterId: this.activeFilterId,\n          };\n    const activeFilter = this.selectedFilter(state.filters, state.activeFilterId);\n    const totalSelected = this.totalSelected(state.filters, state.values);\n    const activeFilterCount = this.activeFilterCount(state.filters, state.values);\n    const hasActiveFilters = activeFilterCount > 0;\n    const label = `${this.triggerLabel}${hasActiveFilters ? ` · ${activeFilterCount}` : ''}`;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const popupId = `${this.generatedId}-popup`;\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      width: this.menuWidth,\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    return (\n      <Host\n        class={{\n          'filter-menu-host': true,\n          'filter-menu-host--external-trigger': !this.usesInternalTrigger,\n          'ds-select-trigger-host': this.usesInternalTrigger,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n      >\n        {this.usesInternalTrigger ? (\n          <button\n            ref={element => {\n              this.triggerElement = (element as HTMLButtonElement) ?? null;\n            }}\n            id={this.inputId ?? `${this.generatedId}-trigger`}\n            type=\"button\"\n            class={{\n              trigger: true,\n              'ds-control-frame': true,\n              'ds-focus-ring-inset': true,\n              'ds-interaction-fill': true,\n              'ds-interaction-fill--selected': this.activeFill && hasActiveFilters,\n              'trigger--expanded': this.open || this.closing,\n              'trigger--bordered': this.hasBorder,\n              'trigger--has-value': hasActiveFilters,\n              [`ds-control--${this.size}`]: true,\n            }}\n            role=\"combobox\"\n            aria-haspopup=\"dialog\"\n            aria-expanded={String(this.open)}\n            aria-controls={this.open ? popupId : undefined}\n            aria-label={this.ariaLabel ?? this.menuLabel}\n            onClick={(event: MouseEvent) => this.toggleFromTrigger(event)}\n            onKeyDown={(event: KeyboardEvent) => this.handleTriggerKeyDown(event)}\n          >\n            {this.icon ? (\n              <span\n                class=\"trigger__prefix ds-control-icon-box ds-interaction-fill__content\"\n                aria-hidden=\"true\"\n              >\n                <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              </span>\n            ) : null}\n            <ds-text\n              class=\"trigger__label-box trigger__label trigger__label-content ds-control-label-box ds-interaction-fill__content\"\n              as=\"span\"\n              variant={textVariant}\n              color=\"inherit\"\n              lineTruncation={1}\n            >\n              {label}\n            </ds-text>\n            <span\n              class=\"trigger__chevron ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n            </span>\n          </button>\n        ) : null}\n\n        {this.shouldRender ? (\n          <div\n          id={popupId}\n          popover=\"manual\"\n          class={{\n            'filter-menu-popup': true,\n            'ds-choice-popup': true,\n            'ds-choice-popup--closing': this.closing,\n          }}\n          style={popupStyle}\n          role=\"dialog\"\n          aria-label={this.menuLabel}\n        >\n          {activeFilter ? (\n            <div class=\"filter-menu\">\n              <div class=\"filter-menu__body\">\n                <div\n                  class=\"filter-menu__categories ds-choice-list ds-chrome-column ds-chrome-space--sm\"\n                  role=\"tablist\"\n                  aria-label={this.categoriesLabel}\n                  aria-orientation=\"vertical\"\n                >\n                  {state.filters.map(filter => {\n                    const active = filter.id === activeFilter.id;\n                    const count = this.selectedCount(filter, state.values);\n                    return (\n                      <div\n                        key={filter.id}\n                        class={{\n                          'filter-menu__category-section': true,\n                          'ds-choice-section--divided': Boolean(filter.divider),\n                        }}\n                      >\n                        <button\n                          id={`${this.generatedId}-${filter.id}-tab`}\n                          type=\"button\"\n                          role=\"tab\"\n                          data-filter-category={filter.id}\n                          class={{\n                            'filter-menu__category': true,\n                            'filter-menu__category--active': active,\n                            'ds-choice-item': true,\n                            'ds-control-frame': true,\n                            'ds-control--md': true,\n                            'ds-focus-ring-inset': true,\n                            'ds-focus-ring--visible': active && this.focusRingVisible,\n                            'ds-interaction-fill': true,\n                            'ds-interaction-fill--selected': active,\n                          }}\n                          aria-selected={String(active)}\n                          aria-controls={`${this.generatedId}-panel`}\n                          tabIndex={active ? 0 : -1}\n                          onMouseDown={() => {\n                            this.focusRingVisible = false;\n                          }}\n                          onClick={() => this.selectCategory(filter.id)}\n                          onKeyDown={(event: KeyboardEvent) =>\n                            this.handleCategoryKeyDown(event, state.filters, filter.id)\n                          }\n                        >\n                          <ds-text\n                            class=\"ds-choice-item__content ds-choice-item__label ds-control-label-box ds-interaction-fill__content\"\n                            as=\"span\"\n                            variant=\"text-body-medium\"\n                            color={active ? 'primary' : 'secondary'}\n                          >\n                            {filter.label}\n                          </ds-text>\n                          {count > 0 ? (\n                            <ds-tag\n                              class=\"ds-choice-item__tag ds-interaction-fill__content\"\n                              label={String(count)}\n                              size=\"sm\"\n                              intent=\"brand\"\n                              contrast=\"bold\"\n                              isInset\n                              rounded\n                            />\n                          ) : null}\n                        </button>\n                      </div>\n                    );\n                  })}\n                </div>\n\n                <div\n                  id={`${this.generatedId}-panel`}\n                  class=\"filter-menu__options\"\n                  role=\"tabpanel\"\n                  aria-labelledby={`${this.generatedId}-${activeFilter.id}-tab`}\n                >\n                  <div\n                    key={activeFilter.id}\n                    class=\"filter-menu__option-list ds-choice-list ds-chrome-column ds-chrome-space--sm\"\n                    role=\"listbox\"\n                    aria-label={activeFilter.label}\n                    aria-multiselectable={\n                      activeFilter.kind === 'multiple' ? 'true' : undefined\n                    }\n                  >\n                    {this.renderOptions(activeFilter, state.values)}\n                  </div>\n                </div>\n              </div>\n\n              {totalSelected > 0 ? (\n                <div class=\"filter-menu__footer ds-choice-footer\">\n                  <div class=\"ds-choice-footer__content ds-control--md\">\n                    <ds-text\n                      class=\"ds-choice-footer__summary\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"secondary\"\n                      aria-live=\"polite\"\n                    >\n                      {totalSelected} selected\n                    </ds-text>\n                    <button\n                      class=\"filter-menu__clear ds-choice-footer__clear ds-text-action\"\n                      type=\"button\"\n                      onClick={() => this.dsClear.emit()}\n                    >\n                      <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n                        {this.clearLabel}\n                      </ds-text>\n                    </button>\n                  </div>\n                </div>\n              ) : null}\n            </div>\n          ) : null}\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  CONTROL_TEXT_VARIANT,\n  controlWidthClass,\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n  type ControlWidth,\n} from '../../utils';\nimport type { AnchoredAlign, AnchoredSide } from '../../utils/anchored-position';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { ChoiceOptionRow } from '../../utils/choice-list-parts';\nimport { choiceListUsesSubtext } from '../../utils/choice-list';\n\nexport type FilterMenuFilterKind = 'single' | 'multiple' | 'boolean' | 'date';\nexport type FilterMenuSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type FilterMenuWidth = ControlWidth;\n\nexport interface FilterMenuOption {\n  label: string;\n  value: string;\n  description?: string;\n  isInactive?: boolean;\n}\n\nexport interface FilterMenuFilter {\n  id: string;\n  label: string;\n  kind: FilterMenuFilterKind;\n  options?: FilterMenuOption[];\n  description?: string;\n  fieldLabel?: string;\n  /** Draw a standard menu-section divider after this category. */\n  divider?: boolean;\n}\n\nexport type FilterMenuValue = string[] | boolean | string;\nexport type FilterMenuValues = Record<string, FilterMenuValue | undefined>;\n\nexport interface FilterMenuChangeDetail {\n  filterId: string;\n  value: FilterMenuValue;\n}\n\nconst FILTER_MENU_FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet filterMenuId = 0;\n\nconst ICON_SIZE: Record<FilterMenuSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-filter-menu',\n  styleUrl: 'FilterMenu.css',\n  scoped: true,\n})\nexport class FilterMenu {\n  @Element() el!: HTMLElement;\n\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true }) open: boolean = false;\n  /** Select trigger text. The selected count is appended automatically. */\n  @Prop() triggerLabel: string = 'Filters';\n  /** Optional select trigger prefix icon name. */\n  @Prop() icon: string | undefined = 'Filters';\n  /** Select trigger density. */\n  @Prop() size: FilterMenuSize = 'md';\n  /** Select trigger width fit. */\n  @Prop() width: FilterMenuWidth = 'hug';\n  /** Show the surface-aware inset border around the select trigger. */\n  @Prop() hasBorder: boolean = true;\n  /** Show selected interaction fill when one or more criteria are active. */\n  @Prop() activeFill: boolean = false;\n  /** ID applied to the internal select trigger. */\n  @Prop() inputId: string | undefined;\n  /** Direct accessible name for the internal select trigger. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Product-owned filter categories and option definitions. */\n  @Prop() filters: FilterMenuFilter[] = [];\n  /** Controlled values keyed by filter id. */\n  @Prop() values: FilterMenuValues = {};\n  /** Controlled category shown in the option pane. */\n  @Prop() activeFilterId: string | undefined;\n  /** External trigger element to position against. */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element used for positioning and focus return. */\n  @Prop() anchorId: string | undefined;\n  /** Preferred popup side; collision handling may flip it. */\n  @Prop() side: AnchoredSide = 'bottom';\n  /** Cross-axis alignment against the trigger. */\n  @Prop() align: AnchoredAlign = 'end';\n  /** Gap between trigger and popup — number in px or a TokoMo length. */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number in px or a TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  /** Popup width. It remains clamped to the viewport by the component recipe. */\n  @Prop() menuWidth: string = TOKEN_CSS_LENGTHS.menuWidthLg;\n  /** Accessible name for the non-modal filter dialog. */\n  @Prop() menuLabel: string = 'Filters';\n  /** Accessible name for the category tab list. */\n  @Prop() categoriesLabel: string = 'Filter categories';\n  /** Footer action and date-clear accessible label. */\n  @Prop() clearLabel: string = 'Clear';\n  /** Show a visible focus ring on initial entry after keyboard activation. */\n  @Prop() initialFocusVisible: boolean = false;\n\n  @State() private shouldRender = false;\n  @State() private closing = false;\n  @State() private positionReady = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusRingVisible = false;\n  @State() private activeOptionIndex = 0;\n\n  /** Requests a controlled value replacement without closing the popup. */\n  @Event() dsChange!: EventEmitter<FilterMenuChangeDetail>;\n  /** Requests that the consumer clear every filter value. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Requests a controlled active-category replacement. */\n  @Event() dsActiveFilterChange!: EventEmitter<string>;\n  /** Requests that the controlled popup close. */\n  @Event() dsClose!: EventEmitter<void>;\n  /** Emitted whenever internal select-trigger activation changes popup visibility. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n  /** Emitted after exit motion and rendered popup removal complete. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  private readonly generatedId = `ds-filter-menu-${++filterMenuId}`;\n  private outsideHandler: ((event: MouseEvent) => void) | null = null;\n  private triggerElement: HTMLButtonElement | null = null;\n  private pendingInitialFocusVisible = false;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private closingSnapshot: {\n    filters: FilterMenuFilter[];\n    values: FilterMenuValues;\n    activeFilterId: string | undefined;\n  } | null = null;\n\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.resolvedAnchor,\n    getPopup: () => this.el.querySelector<HTMLElement>('.filter-menu-popup'),\n    measure: (anchor, popup) => {\n      if (!this.open) return null;\n      const anchorRect = anchor.getBoundingClientRect();\n      const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n      return {\n        anchorRect,\n        popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n        side: this.side,\n        align: this.align,\n        sideOffsetPx: resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050),\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: this.align,\n          alignOffsetPx: resolveCssLengthPx(this.alignOffset, 0),\n          sectionInsetPx,\n        }),\n        viewportPadPx: this.viewportPad,\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    observeResize: true,\n    topLayer: true,\n  });\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.position.unobserve();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.closingSnapshot = null;\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.focusRingVisible = this.pendingInitialFocusVisible || this.initialFocusVisible;\n      this.setupListeners();\n      this.position.schedule(() => this.focusInitialCategory());\n      return;\n    }\n\n    if (!this.shouldRender) return;\n    this.position.cancel();\n    this.captureClosingSnapshot();\n    this.closing = true;\n    this.teardownListeners();\n    const duration = resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort2,\n      TOKEN_DEFAULTS.animationDurationShort3\n    );\n    if (duration <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.closeTimer = setTimeout(() => this.finishClose(), duration);\n  }\n\n  @Watch('anchor')\n  @Watch('anchorId')\n  @Watch('side')\n  @Watch('align')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  @Watch('menuWidth')\n  onPositionInputChange() {\n    if (this.open) this.position.schedule();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      return;\n    }\n    if (event.key !== 'Tab' || !this.tabLeavesPopup(event)) return;\n    event.preventDefault();\n    this.close(false);\n    this.moveFocusAfterTab(event.shiftKey);\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 this.triggerElement;\n  }\n\n  private get usesInternalTrigger(): boolean {\n    return !this.anchor && !this.anchorId;\n  }\n\n  private get anchorFocusTarget(): HTMLElement | null {\n    const anchor = this.resolvedAnchor;\n    if (!anchor) return null;\n    if (anchor.matches(FILTER_MENU_FOCUSABLE_SELECTOR)) return anchor;\n    return anchor.querySelector<HTMLElement>(FILTER_MENU_FOCUSABLE_SELECTOR) ?? anchor;\n  }\n\n  private get viewportPad(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get popupFallbackWidth(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthLg, TOKEN_DEFAULTS.menuWidthLg);\n  }\n\n  private get popupFallbackHeight(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private setupListeners() {\n    this.outsideHandler = event => {\n      const target = event.target as Node;\n      const popup = this.el.querySelector('.filter-menu-popup');\n      if (popup?.contains(target) || this.resolvedAnchor?.contains(target)) return;\n      this.close();\n    };\n    document.addEventListener('mousedown', this.outsideHandler, true);\n    this.position.observe();\n  }\n\n  private teardownListeners() {\n    this.position.unobserve();\n    if (this.outsideHandler) {\n      document.removeEventListener('mousedown', this.outsideHandler, true);\n      this.outsideHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close(restoreFocus = true) {\n    this.captureClosingSnapshot();\n    if (restoreFocus) this.focusAnchor();\n    this.dsOpenChange.emit(false);\n    this.dsClose.emit();\n    this.open = false;\n    this.onOpenChange(false);\n  }\n\n  private toggleFromTrigger(event: MouseEvent) {\n    if (this.open) {\n      this.close();\n      return;\n    }\n    this.pendingInitialFocusVisible = event.detail === 0;\n    this.open = true;\n    this.dsOpenChange.emit(true);\n    this.onOpenChange(true);\n  }\n\n  private handleTriggerKeyDown(event: KeyboardEvent) {\n    if (event.key !== 'ArrowDown' || this.open) return;\n    event.preventDefault();\n    this.pendingInitialFocusVisible = true;\n    this.open = true;\n    this.dsOpenChange.emit(true);\n    this.onOpenChange(true);\n  }\n\n  private finishClose() {\n    const popup = this.el.querySelector<HTMLElement>('.filter-menu-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.closingSnapshot = null;\n    this.closeTimer = null;\n    this.dsAfterClose.emit();\n  }\n\n  private captureClosingSnapshot() {\n    if (this.closingSnapshot) return;\n    this.closingSnapshot = {\n      filters: this.filters.map(filter => ({\n        ...filter,\n        options: filter.options?.map(option => ({ ...option })),\n      })),\n      values: Object.fromEntries(\n        Object.entries(this.values).map(([key, value]) => [\n          key,\n          Array.isArray(value) ? [...value] : value,\n        ])\n      ),\n      activeFilterId: this.activeFilterId,\n    };\n  }\n\n  private focusAnchor() {\n    const anchor = this.resolvedAnchor as\n      (HTMLElement & { setFocus?: () => Promise<void> | void }) | null;\n    if (anchor?.setFocus) {\n      void anchor.setFocus();\n      return;\n    }\n    this.anchorFocusTarget?.focus();\n  }\n\n  private focusInitialCategory() {\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLElement>('.filter-menu__category[tabindex=\"0\"]')?.focus();\n      this.pendingInitialFocusVisible = false;\n    });\n  }\n\n  private tabLeavesPopup(event: KeyboardEvent): boolean {\n    const popup = this.el.querySelector<HTMLElement>('.filter-menu-popup');\n    if (!popup) return true;\n    const focusables = Array.from(\n      popup.querySelectorAll<HTMLElement>(FILTER_MENU_FOCUSABLE_SELECTOR)\n    ).filter(element => element.getClientRects().length > 0);\n    const index = focusables.indexOf(event.target as HTMLElement);\n    if (index < 0) return true;\n    return event.shiftKey ? index === 0 : index === focusables.length - 1;\n  }\n\n  private moveFocusAfterTab(backwards: boolean) {\n    const anchor = this.anchorFocusTarget;\n    if (!anchor) return;\n    if (backwards) {\n      anchor.focus();\n      return;\n    }\n    const candidates = Array.from(\n      document.querySelectorAll<HTMLElement>(FILTER_MENU_FOCUSABLE_SELECTOR)\n    ).filter(\n      element =>\n        !element.closest('.filter-menu-popup') &&\n        !element.closest('[inert]') &&\n        element.getClientRects().length > 0\n    );\n    const index = candidates.indexOf(anchor);\n    (candidates[index + 1] ?? anchor).focus();\n  }\n\n  private selectedFilter(filters: FilterMenuFilter[], activeFilterId: string | undefined) {\n    return filters.find(filter => filter.id === activeFilterId) ?? filters[0];\n  }\n\n  private selectedCount(filter: FilterMenuFilter, values: FilterMenuValues): number {\n    const value = values[filter.id];\n    if (filter.kind === 'multiple') return Array.isArray(value) ? value.length : 0;\n    if (filter.kind === 'boolean') return value === true ? 1 : 0;\n    return typeof value === 'string' && value.length > 0 ? 1 : 0;\n  }\n\n  private totalSelected(filters: FilterMenuFilter[], values: FilterMenuValues): number {\n    return filters.reduce((total, filter) => total + this.selectedCount(filter, values), 0);\n  }\n\n  private activeFilterCount(filters: FilterMenuFilter[], values: FilterMenuValues): number {\n    return filters.filter(filter => this.selectedCount(filter, values) > 0).length;\n  }\n\n  private selectCategory(filterId: string, focus = false) {\n    this.activeOptionIndex = 0;\n    this.dsActiveFilterChange.emit(filterId);\n    if (!focus) return;\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLElement>(`[data-filter-category=\"${filterId}\"]`)?.focus();\n    });\n  }\n\n  private handleCategoryKeyDown(\n    event: KeyboardEvent,\n    filters: FilterMenuFilter[],\n    filterId: string\n  ) {\n    const currentIndex = filters.findIndex(filter => filter.id === filterId);\n    let nextIndex: number;\n    if (event.key === 'ArrowDown') nextIndex = (currentIndex + 1) % filters.length;\n    else if (event.key === 'ArrowUp')\n      nextIndex = (currentIndex - 1 + filters.length) % filters.length;\n    else if (event.key === 'Home') nextIndex = 0;\n    else if (event.key === 'End') nextIndex = filters.length - 1;\n    else if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      requestAnimationFrame(() => {\n        this.el\n          .querySelector<HTMLElement>(\n            '.filter-menu__options [role=\"option\"], .filter-menu__options input'\n          )\n          ?.focus();\n      });\n      return;\n    } else return;\n\n    event.preventDefault();\n    this.focusRingVisible = true;\n    this.selectCategory(filters[nextIndex].id, true);\n  }\n\n  private handlePanelKeyDown(event: KeyboardEvent, filterId: string) {\n    if (event.key !== 'ArrowLeft') return;\n    event.preventDefault();\n    this.el.querySelector<HTMLElement>(`[data-filter-category=\"${filterId}\"]`)?.focus();\n  }\n\n  private handleOptionKeyDown(\n    event: KeyboardEvent,\n    filter: FilterMenuFilter,\n    option: FilterMenuOption,\n    index: number,\n    values: FilterMenuValues\n  ) {\n    const options = filter.options ?? [];\n    if (event.key === 'ArrowLeft') {\n      this.handlePanelKeyDown(event, filter.id);\n      return;\n    }\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.selectOption(filter, option, values);\n      return;\n    }\n    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n    event.preventDefault();\n    const enabled = options\n      .map((candidate, optionIndex) => ({ candidate, optionIndex }))\n      .filter(({ candidate }) => !candidate.isInactive)\n      .map(({ optionIndex }) => optionIndex);\n    if (!enabled.length) return;\n    const current = enabled.indexOf(index);\n    let next: number;\n    if (event.key === 'Home') next = enabled[0];\n    else if (event.key === 'End') next = enabled[enabled.length - 1];\n    else {\n      const direction = event.key === 'ArrowDown' ? 1 : -1;\n      const start = current >= 0 ? current : direction === 1 ? -1 : 0;\n      next = enabled[(start + direction + enabled.length) % enabled.length];\n    }\n    this.activeOptionIndex = next;\n    this.focusRingVisible = true;\n    requestAnimationFrame(() => {\n      this.el\n        .querySelector<HTMLElement>(`#${this.generatedId}-${filter.id}-option-${next}`)\n        ?.focus();\n    });\n  }\n\n  private toggleMultiple(\n    filter: FilterMenuFilter,\n    option: FilterMenuOption,\n    checked: boolean,\n    values: FilterMenuValues\n  ) {\n    if (option.isInactive) return;\n    const current = Array.isArray(values[filter.id]) ? (values[filter.id] as string[]) : [];\n    const selected = new Set(current);\n    if (checked) selected.add(option.value);\n    else selected.delete(option.value);\n    const ordered = (filter.options ?? [])\n      .map(candidate => candidate.value)\n      .filter(value => selected.has(value));\n    this.dsChange.emit({ filterId: filter.id, value: ordered });\n  }\n\n  private selectOption(\n    filter: FilterMenuFilter,\n    option: FilterMenuOption,\n    values: FilterMenuValues\n  ) {\n    if (option.isInactive) return;\n    if (filter.kind === 'single') {\n      this.dsChange.emit({ filterId: filter.id, value: option.value });\n      return;\n    }\n    const selected = Array.isArray(values[filter.id])\n      ? (values[filter.id] as string[]).includes(option.value)\n      : false;\n    this.toggleMultiple(filter, option, !selected, values);\n  }\n\n  private renderOptions(filter: FilterMenuFilter, values: FilterMenuValues) {\n    const value = values[filter.id];\n    if (filter.kind === 'multiple' || filter.kind === 'single') {\n      const selected = Array.isArray(value) ? value : [];\n      const options = filter.options ?? [];\n      const usesSubtext = choiceListUsesSubtext(\n        options.map(option => ({\n          label: option.label,\n          value: option.value,\n          subtext: option.description,\n        }))\n      );\n      return options.map((option, index) => {\n        const isSelected =\n          filter.kind === 'multiple' ? selected.includes(option.value) : value === option.value;\n        return (\n          <ChoiceOptionRow\n            size=\"md\"\n            id={`${this.generatedId}-${filter.id}-option-${index}`}\n            option={{\n              label: option.label,\n              value: option.value,\n              subtext: option.description,\n              isInactive: option.isInactive,\n            }}\n            selected={isSelected}\n            active={index === this.activeOptionIndex}\n            focusRingVisible={this.focusRingVisible}\n            usesSubtext={usesSubtext}\n            tabIndex={index === this.activeOptionIndex ? 0 : -1}\n            leading={\n              filter.kind === 'multiple' ? (\n                <span\n                  class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n                  aria-hidden=\"true\"\n                >\n                  <ds-checkbox label=\"\" size=\"md\" checked={isSelected} presentation />\n                </span>\n              ) : undefined\n            }\n            onFocus={() => {\n              this.activeOptionIndex = index;\n            }}\n            onKeyDown={(event: KeyboardEvent) =>\n              this.handleOptionKeyDown(event, filter, option, index, values)\n            }\n            onHover={() => {\n              this.focusRingVisible = false;\n              this.activeOptionIndex = index;\n            }}\n            onSelect={() => this.selectOption(filter, option, values)}\n          />\n        );\n      });\n    }\n\n    if (filter.kind === 'boolean') {\n      const option: FilterMenuOption = {\n        label: filter.fieldLabel ?? filter.label,\n        value: 'true',\n        description: filter.description,\n      };\n      return (\n        <ChoiceOptionRow\n          size=\"md\"\n          id={`${this.generatedId}-${filter.id}-option-0`}\n          option={{\n            label: option.label,\n            value: option.value,\n            subtext: option.description,\n          }}\n          selected={value === true}\n          active\n          focusRingVisible={this.focusRingVisible}\n          usesSubtext={Boolean(option.description)}\n          tabIndex={0}\n          leading={\n            <span\n              class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-checkbox label=\"\" size=\"md\" checked={value === true} presentation />\n            </span>\n          }\n          onKeyDown={(event: KeyboardEvent) => {\n            if (event.key === 'ArrowLeft') this.handlePanelKeyDown(event, filter.id);\n            else if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault();\n              this.dsChange.emit({ filterId: filter.id, value: value !== true });\n            }\n          }}\n          onHover={() => {\n            this.focusRingVisible = false;\n          }}\n          onSelect={() => this.dsChange.emit({ filterId: filter.id, value: value !== true })}\n        />\n      );\n    }\n\n    const dateValue = typeof value === 'string' ? value : '';\n    const inputId = `${this.generatedId}-${filter.id}-input`;\n    return (\n      <div class=\"filter-menu__date-field\">\n        <label htmlFor={inputId}>\n          <ds-text as=\"span\" variant=\"text-body-small\" emphasis color=\"primary\">\n            {filter.fieldLabel ?? 'Event date'}\n          </ds-text>\n        </label>\n        <div class=\"filter-menu__date-control ds-control-frame ds-control--md\">\n          <input\n            id={inputId}\n            class=\"filter-menu__date-input\"\n            type=\"date\"\n            value={dateValue}\n            onInput={(event: Event) =>\n              this.dsChange.emit({\n                filterId: filter.id,\n                value: (event.target as HTMLInputElement).value,\n              })\n            }\n          />\n          {dateValue ? (\n            <ds-button-unfilled\n              variant=\"icon\"\n              icon=\"CrossCircle\"\n              size=\"sm\"\n              isInset\n              hasBorder={false}\n              rounded\n              ariaLabel={`${this.clearLabel} ${filter.fieldLabel ?? filter.label}`}\n              onDsClick={(event: CustomEvent<MouseEvent>) => {\n                event.stopPropagation();\n                this.dsChange.emit({ filterId: filter.id, value: '' });\n              }}\n            />\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const state =\n      this.closing && this.closingSnapshot\n        ? this.closingSnapshot\n        : {\n            filters: this.filters,\n            values: this.values,\n            activeFilterId: this.activeFilterId,\n          };\n    const activeFilter = this.selectedFilter(state.filters, state.activeFilterId);\n    const totalSelected = this.totalSelected(state.filters, state.values);\n    const activeFilterCount = this.activeFilterCount(state.filters, state.values);\n    const hasActiveFilters = activeFilterCount > 0;\n    const label = `${this.triggerLabel}${hasActiveFilters ? ` · ${activeFilterCount}` : ''}`;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const popupId = `${this.generatedId}-popup`;\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      width: this.menuWidth,\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    return (\n      <Host\n        class={{\n          'filter-menu-host': true,\n          'filter-menu-host--external-trigger': !this.usesInternalTrigger,\n          'ds-select-trigger-host': this.usesInternalTrigger,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n      >\n        {this.usesInternalTrigger ? (\n          <button\n            ref={element => {\n              this.triggerElement = (element as HTMLButtonElement) ?? null;\n            }}\n            id={this.inputId ?? `${this.generatedId}-trigger`}\n            type=\"button\"\n            class={{\n              trigger: true,\n              'ds-control-frame': true,\n              'ds-focus-ring-inset': true,\n              'ds-interaction-fill': true,\n              'ds-interaction-fill--selected': this.activeFill && hasActiveFilters,\n              'trigger--expanded': this.open || this.closing,\n              'trigger--bordered': this.hasBorder,\n              'trigger--has-value': hasActiveFilters,\n              [`ds-control--${this.size}`]: true,\n            }}\n            role=\"combobox\"\n            aria-haspopup=\"dialog\"\n            aria-expanded={String(this.open)}\n            aria-controls={this.open ? popupId : undefined}\n            aria-label={this.ariaLabel ?? this.menuLabel}\n            onClick={(event: MouseEvent) => this.toggleFromTrigger(event)}\n            onKeyDown={(event: KeyboardEvent) => this.handleTriggerKeyDown(event)}\n          >\n            {this.icon ? (\n              <span\n                class=\"trigger__prefix ds-control-icon-box ds-interaction-fill__content\"\n                aria-hidden=\"true\"\n              >\n                <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              </span>\n            ) : null}\n            <ds-text\n              class=\"trigger__label-box trigger__label trigger__label-content ds-control-label-box ds-interaction-fill__content\"\n              as=\"span\"\n              variant={textVariant}\n              color=\"inherit\"\n              lineTruncation={1}\n            >\n              {label}\n            </ds-text>\n            <span\n              class=\"trigger__chevron ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n            </span>\n          </button>\n        ) : null}\n\n        {this.shouldRender ? (\n          <div\n            id={popupId}\n            popover=\"manual\"\n            class={{\n              'filter-menu-popup': true,\n              'ds-choice-popup': true,\n              'ds-choice-popup--closing': this.closing,\n            }}\n            style={popupStyle}\n            role=\"dialog\"\n            aria-label={this.menuLabel}\n          >\n            {activeFilter ? (\n              <div class=\"filter-menu\">\n                <div class=\"filter-menu__body\">\n                  <div\n                    class=\"filter-menu__categories ds-choice-list ds-chrome-column ds-chrome-space--sm\"\n                    role=\"tablist\"\n                    aria-label={this.categoriesLabel}\n                    aria-orientation=\"vertical\"\n                  >\n                    {state.filters.map(filter => {\n                      const active = filter.id === activeFilter.id;\n                      const count = this.selectedCount(filter, state.values);\n                      return (\n                        <div\n                          key={filter.id}\n                          class={{\n                            'filter-menu__category-section': true,\n                            'ds-choice-section--divided': Boolean(filter.divider),\n                          }}\n                        >\n                          <button\n                            id={`${this.generatedId}-${filter.id}-tab`}\n                            type=\"button\"\n                            role=\"tab\"\n                            data-filter-category={filter.id}\n                            class={{\n                              'filter-menu__category': true,\n                              'filter-menu__category--active': active,\n                              'ds-choice-item': true,\n                              'ds-control-frame': true,\n                              'ds-control--md': true,\n                              'ds-focus-ring-inset': true,\n                              'ds-focus-ring--visible': active && this.focusRingVisible,\n                              'ds-interaction-fill': true,\n                              'ds-interaction-fill--selected': active,\n                            }}\n                            aria-selected={String(active)}\n                            aria-controls={`${this.generatedId}-panel`}\n                            tabIndex={active ? 0 : -1}\n                            onMouseDown={() => {\n                              this.focusRingVisible = false;\n                            }}\n                            onClick={() => this.selectCategory(filter.id)}\n                            onKeyDown={(event: KeyboardEvent) =>\n                              this.handleCategoryKeyDown(event, state.filters, filter.id)\n                            }\n                          >\n                            <ds-text\n                              class=\"ds-choice-item__content ds-choice-item__label ds-control-label-box ds-interaction-fill__content\"\n                              as=\"span\"\n                              variant=\"text-body-medium\"\n                              color={active ? 'primary' : 'secondary'}\n                            >\n                              {filter.label}\n                            </ds-text>\n                            {count > 0 ? (\n                              <ds-tag\n                                class=\"ds-choice-item__tag ds-interaction-fill__content\"\n                                label={String(count)}\n                                size=\"sm\"\n                                intent=\"brand\"\n                                contrast=\"bold\"\n                                isInset\n                                rounded\n                              />\n                            ) : null}\n                          </button>\n                        </div>\n                      );\n                    })}\n                  </div>\n\n                  <div\n                    id={`${this.generatedId}-panel`}\n                    class=\"filter-menu__options\"\n                    role=\"tabpanel\"\n                    aria-labelledby={`${this.generatedId}-${activeFilter.id}-tab`}\n                  >\n                    <div\n                      key={activeFilter.id}\n                      class=\"filter-menu__option-list ds-choice-list ds-chrome-column ds-chrome-space--sm\"\n                      role=\"listbox\"\n                      aria-label={activeFilter.label}\n                      aria-multiselectable={activeFilter.kind === 'multiple' ? 'true' : undefined}\n                    >\n                      {this.renderOptions(activeFilter, state.values)}\n                    </div>\n                  </div>\n                </div>\n\n                {totalSelected > 0 ? (\n                  <div class=\"filter-menu__footer ds-choice-footer\">\n                    <div class=\"ds-choice-footer__content ds-control--md\">\n                      <ds-text\n                        class=\"ds-choice-footer__summary\"\n                        as=\"span\"\n                        variant=\"text-body-medium\"\n                        color=\"secondary\"\n                        aria-live=\"polite\"\n                      >\n                        {totalSelected} selected\n                      </ds-text>\n                      <button\n                        class=\"filter-menu__clear ds-choice-footer__clear ds-text-action\"\n                        type=\"button\"\n                        onClick={() => this.dsClear.emit()}\n                      >\n                        <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n                          {this.clearLabel}\n                        </ds-text>\n                      </button>\n                    </div>\n                  </div>\n                ) : null}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -504,7 +504,7 @@
     },
     {
       "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 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\nconst MENU_FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  /** 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  /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n  @Prop() initialFocusVisible: boolean = false;\n  /** Accessible name for the popup menu. */\n  @Prop() menuLabel: string = 'Menu';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n  @State() private focusRingVisible: boolean = false;\n  @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 clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private positionReadyCallback: (() => void) | undefined;\n  private suppressItemClick = false;\n  private reorderPointer:\n    | {\n        pointerId: number;\n        sectionIndex: number;\n        fromIndex: number;\n      }\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    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      return {\n        anchorRect,\n        popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n        side: this.side,\n        align: this.align,\n        sideOffsetPx: this.sideOffsetPx,\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: this.align,\n          alignOffsetPx: this.alignOffsetPx,\n          sectionInsetPx,\n          anchorAlignment: this.anchorAlignment,\n        }),\n        viewportPadPx: this.viewportPadPx,\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    topLayer: true,\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.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  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 get anchorFocusTarget(): HTMLElement | null {\n    const anchor = this.resolvedAnchor;\n    if (!anchor) return null;\n    if (anchor.matches(MENU_FOCUSABLE_SELECTOR)) return anchor;\n    return anchor.querySelector<HTMLElement>(MENU_FOCUSABLE_SELECTOR) ?? anchor;\n  }\n\n  private focusAnchor() {\n    const anchor = this.resolvedAnchor as\n      (HTMLElement & { setFocus?: () => Promise<void> | void }) | null;\n    if (anchor?.setFocus) {\n      anchor.setFocus();\n      return;\n    }\n    this.anchorFocusTarget?.focus();\n  }\n\n  private moveFocusAfterTab(backwards: boolean) {\n    const anchor = this.anchorFocusTarget;\n    if (!anchor) return;\n    if (backwards) {\n      anchor.focus();\n      return;\n    }\n\n    const candidates = Array.from(\n      document.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(\n      element =>\n        !element.closest('.menu-popup') &&\n        !element.closest('[inert]') &&\n        element.getClientRects().length > 0\n    );\n    const index = candidates.indexOf(anchor);\n    (candidates[index + 1] ?? anchor).focus();\n  }\n\n  private compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n    const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n    if (!popup) return true;\n    const focusables = Array.from(\n      popup.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(element => element.getClientRects().length > 0);\n    const currentIndex = focusables.indexOf(event.target as HTMLElement);\n    if (currentIndex < 0) return true;\n    return event.shiftKey ? currentIndex === 0 : currentIndex === focusables.length - 1;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(section =>\n      isMenuPickerSection(section) ? [] : section.items\n    );\n  }\n\n  /** Rich preference content is a non-modal dialog, not an ARIA action menu. */\n  private get hasCompositeSections(): boolean {\n    return this.activeSections.some(isMenuPickerSection);\n  }\n\n  private cancelPositionRetry() {\n    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.clickOutsideHandler = (e: MouseEvent) => {\n      const t = e.target as Node;\n      const popup = this.el.querySelector('.menu-popup');\n      const anchorEl = this.resolvedAnchor;\n      if (popup?.contains(t) || anchorEl?.contains(t)) return;\n      this.close();\n    };\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    this.position.observe();\n  }\n\n  private teardownListeners() {\n    this.position.unobserve();\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\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.focusAnchor();\n    this.dsClose.emit();\n    this.open = false;\n    this.onOpenChange(false);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      if (this.hasCompositeSections && !this.compositeTabLeavesPopup(e)) return;\n      e.preventDefault();\n      this.close(false);\n      this.moveFocusAfterTab(e.shiftKey);\n      return;\n    }\n\n    if (this.hasCompositeSections) return;\n\n    if (\n      (e.key === 'ArrowUp' || e.key === 'ArrowDown') &&\n      e.altKey &&\n      !e.ctrlKey &&\n      !e.shiftKey\n    ) {\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(\n      section.items,\n      drag.fromIndex,\n      insertBefore,\n    );\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 = this.reorderFromFlat === null\n      ? null\n      : 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\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 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\nconst MENU_FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  /** 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  /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n  @Prop() initialFocusVisible: boolean = false;\n  /** Accessible name for the popup menu. */\n  @Prop() menuLabel: string = 'Menu';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n  @State() private focusRingVisible: boolean = false;\n  @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 clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\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    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      return {\n        anchorRect,\n        popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n        side: this.side,\n        align: this.align,\n        sideOffsetPx: this.sideOffsetPx,\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: this.align,\n          alignOffsetPx: this.alignOffsetPx,\n          sectionInsetPx,\n          anchorAlignment: this.anchorAlignment,\n        }),\n        viewportPadPx: this.viewportPadPx,\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    topLayer: true,\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.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  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 get anchorFocusTarget(): HTMLElement | null {\n    const anchor = this.resolvedAnchor;\n    if (!anchor) return null;\n    if (anchor.matches(MENU_FOCUSABLE_SELECTOR)) return anchor;\n    return anchor.querySelector<HTMLElement>(MENU_FOCUSABLE_SELECTOR) ?? anchor;\n  }\n\n  private focusAnchor() {\n    const anchor = this.resolvedAnchor as\n      (HTMLElement & { setFocus?: () => Promise<void> | void }) | null;\n    if (anchor?.setFocus) {\n      anchor.setFocus();\n      return;\n    }\n    this.anchorFocusTarget?.focus();\n  }\n\n  private moveFocusAfterTab(backwards: boolean) {\n    const anchor = this.anchorFocusTarget;\n    if (!anchor) return;\n    if (backwards) {\n      anchor.focus();\n      return;\n    }\n\n    const candidates = Array.from(\n      document.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(\n      element =>\n        !element.closest('.menu-popup') &&\n        !element.closest('[inert]') &&\n        element.getClientRects().length > 0\n    );\n    const index = candidates.indexOf(anchor);\n    (candidates[index + 1] ?? anchor).focus();\n  }\n\n  private compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n    const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n    if (!popup) return true;\n    const focusables = Array.from(\n      popup.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(element => element.getClientRects().length > 0);\n    const currentIndex = focusables.indexOf(event.target as HTMLElement);\n    if (currentIndex < 0) return true;\n    return event.shiftKey ? currentIndex === 0 : currentIndex === focusables.length - 1;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(section =>\n      isMenuPickerSection(section) ? [] : section.items\n    );\n  }\n\n  /** Rich preference content is a non-modal dialog, not an ARIA action menu. */\n  private get hasCompositeSections(): boolean {\n    return this.activeSections.some(isMenuPickerSection);\n  }\n\n  private cancelPositionRetry() {\n    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.clickOutsideHandler = (e: MouseEvent) => {\n      const t = e.target as Node;\n      const popup = this.el.querySelector('.menu-popup');\n      const anchorEl = this.resolvedAnchor;\n      if (popup?.contains(t) || anchorEl?.contains(t)) return;\n      this.close();\n    };\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    this.position.observe();\n  }\n\n  private teardownListeners() {\n    this.position.unobserve();\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\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.focusAnchor();\n    this.dsClose.emit();\n    this.open = false;\n    this.onOpenChange(false);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      if (this.hasCompositeSections && !this.compositeTabLeavesPopup(e)) return;\n      e.preventDefault();\n      this.close(false);\n      this.moveFocusAfterTab(e.shiftKey);\n      return;\n    }\n\n    if (this.hasCompositeSections) return;\n\n    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\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",
       "type": "registry:ui"
     },
     {