@ds-mo/ui 14.36.0 → 15.0.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["PANEL_TOOLS_TOOL_IDS","PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","help","PANEL_TOOLS_SHORTCUTS","PANEL_TOOLS_DEFAULT_ITEMS","id","icon","label","railPlacement","order","shortcutKey","mobileDestination","PANEL_TOOLS_REGION_ORDER","header","body","footer","panelToolsItemOrder","item","canonical","findIndex","Number","MAX_SAFE_INTEGER","orderPanelToolsItems","items","firstById","Map","trim","has","set","Array","from","values","sort","left","right","leftRegion","panelToolsRailPlacement","rightRegion","regionDelta","orderPanelToolsRailEntries","accessories","toolEntries","map","type","firstAccessoryById","accessory","accessoryEntries","leftPlacement","rightPlacement","leftOrder","rightOrder","panelToolsRailFocusKeys","entries","flatMap","entry","action","isInactive","keys","primaryAction","secondaryAction","push","reconcilePanelToolsRovingIndex","previousKeys","nextKeys","currentIndex","length","currentKey","preservedIndex","indexOf","index","nextIndex","Math","min","max","panelToolsRailAccessoryActionDetail","accessoryId","actionId","anchor","isPanelToolsToolId","value","reconcilePanelToolsAvailability","open","activeTool","some","removedTool","panelToolsDrawerTransitionMs","style","properties","transitionProperty","split","durations","transitionDuration","parseCssTimeMs","delays","transitionDelay","reduce","property","duration","delay","panelToolsDrawerResting","motion","panelToolsDrawerAtTerminal","width","targetWidth","resolvePanelToolActivation","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","presentation","fullscreenHeaderMode","toolsLabel","toolShortcutsLabel","headers","storageKey","drawerSurfaceRetained","readyForMotion","presentationMotionSuppressed","rovingIndex","fullViewToolIds","railBodyScrollable","motionEnableGeneration","presentationMotionGeneration","transitionGeneration","transitionFallbackTimer","ignoreReplacementTerminal","focusBeforeFullscreen","fullViewObserver","handleComposedHeaderAction","event","detail","stopPropagation","dsHeaderAction","emit","tool","handleTransitionEnd","drawer","renderRoot","querySelector","target","propertyName","drawerTransitionAtTerminal","finishDrawerTransition","handleToolChange","next","dsToolChange","handleRailKeyDown","e","activate","orderedRailEntries","key","preventDefault","focusRailAt","railItems","orderedRailItems","railAccessories","disconnectedCallback","el","removeEventListener","clearTransitionCompletion","disconnect","disconnectRailBodyObserver","presentationChanged","previous","getAttribute","setAttribute","presentationGeneration","requestAnimationFrame","document","activeElement","fallbackActionId","activeHeader","actions","async","isConnected","focus","preventScroll","focusRestored","contains","focusHeaderAction","dsPresentationChange","handleFullscreenEscape","deferMotionEnable","generation","connectedCallback","ANCHORED_OVERLAY_BOUNDARY_ATTRIBUTE","addEventListener","componentWillLoad","restoreLastActiveTool","openChanged","isOpen","wasOpen","undefined","startDrawerTransition","activeToolChanged","persistLastActiveTool","storageKeyChanged","componentDidLoad","connectRailBodyObserver","updateRailBodyScrollable","syncFullViewTools","MutationObserver","observe","childList","attributes","attributeFilter","componentDidRender","railBodyEl","ResizeObserver","railBodyObserver","Boolean","scrollHeight","clientHeight","itemsChanged","reconcileActiveTool","accessoriesChanged","focusedKey","closest","dataset","railFocusKey","focusedIndex","restoreFocus","includes","stored","localStorage","getItem","setItem","clearPersistedTool","removeItem","phase","dsChromeTransitionStart","source","fallbackMs","getComputedStyle","window","setTimeout","getBoundingClientRect","surface","completedPhase","wasTransitioning","dsChromeTransitionEnd","clearTimeout","isRailSelected","isDrawerPresent","isViewActive","hasFullView","ids","filter","join","shadowRoot","headerLabel","find","candidate","resolvedHeaders","activateTool","closeDrawer","CSS","escape","setFocus","bounded","renderRailAction","focusKey","ariaLabel","h","side","size","boundary","variant","class","isActive","activeFill","hasBorder","pressScale","dot","focusTabIndex","pressed","onFocusin","onKeyDown","onDsClick","accessoryPrimaryLabel","actionLabel","status","statusText","emitAccessoryAction","dsRailAccessoryAction","renderAccessoryVisual","visual","src","alt","initial","slice","as","emphasis","color","name","renderRailShortcut","focusIndexes","focusIndex","get","initials","disabled","tabIndex","onFocus","onClick","currentTarget","background","renderRailAccessory","primaryKey","primaryIndex","primaryLabel","secondary","secondaryKey","secondaryIndex","statusTone","rounded","renderRailEntry","render","headerTitle","title","headerActions","entryPlacement","headerEntries","bodyEntries","footerEntries","showDrawerChrome","drawerResting","activeFullView","toolIds","Host","role","ref","element","inert","heading","showBack","backIcon","backAriaLabel","showMenu","toolHeader","onDsBack","dsHeaderBack","hidden","active"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=shadow","src/wc/components/PanelTools/PanelTools.tsx"],"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  'agents',\n  'messages',\n  'activity',\n  'search',\n  'stacks',\n  'help',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: CanonicalPanelToolsToolId = 'agents';\n\n/** Rail footer slot — 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 type PanelToolsRailPlacement = 'header' | 'body' | 'footer';\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 Agents/Help placement is the fallback. */\n  railPlacement?: PanelToolsRailPlacement;\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' | 'activity' | '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\nexport type PanelToolsRailAccessoryVisual =\n  | { type: 'icon'; icon: string }\n  | { type: 'initial'; initial: string }\n  | { type: 'image'; src: string };\n\nexport interface PanelToolsRailAccessoryAction {\n  /** Stable application-owned action id emitted with the accessory id. */\n  id: string;\n  /** Overrides the accessory label for the primary action. */\n  ariaLabel?: string;\n  isInactive?: boolean;\n}\n\nexport interface PanelToolsRailAccessorySecondaryAction {\n  id: string;\n  icon: string;\n  ariaLabel: string;\n  isInactive?: boolean;\n}\n\nexport type PanelToolsRailTransientTone = 'active' | 'positive';\n\ninterface PanelToolsRailAccessoryBase {\n  /** Stable application-owned identity. Duplicate or blank ids are omitted. */\n  id: string;\n  /** Explicit rail region; accessories never infer placement from their id. */\n  railPlacement: PanelToolsRailPlacement;\n  /** Stable ordering within the selected rail region. */\n  order: number;\n}\n\n/** Decorative boundary between application-owned rail accessory groups. */\nexport interface PanelToolsRailDividerAccessory extends PanelToolsRailAccessoryBase {\n  type: 'divider';\n}\n\n/**\n * A compact one-action shortcut that matches standard tool-button geometry.\n * PanelTools owns its initial orb, notification dot, and transient interaction paint.\n */\nexport interface PanelToolsRailShortcutAccessory extends PanelToolsRailAccessoryBase {\n  type: 'shortcut';\n  /** Accessible shortcut name and action-label fallback. */\n  ariaLabel: string;\n  /** One or two displayed graphemes. Longer values are truncated visually. */\n  initials: string;\n  /** Supplemental notification dot. Include its meaning in the accessible label when needed. */\n  dot?: boolean;\n  action: PanelToolsRailAccessoryAction;\n}\n\n/**\n * A direct application intent that never selects a tool or changes drawer state.\n * PanelTools owns the two-control-height surface and its focus behavior.\n */\nexport interface PanelToolsRailTransientAccessory extends PanelToolsRailAccessoryBase {\n  type: 'transient';\n  /** Accessible accessory name and primary-action fallback label. */\n  ariaLabel: string;\n  visual: PanelToolsRailAccessoryVisual;\n  /** State announced with the primary action and shown in its tooltip. */\n  statusText: string;\n  /** Bold surface treatment. Active uses brand; positive uses positive semantic color. */\n  statusTone: PanelToolsRailTransientTone;\n  primaryAction: PanelToolsRailAccessoryAction;\n  secondaryAction?: PanelToolsRailAccessorySecondaryAction;\n}\n\nexport type PanelToolsRailAccessory =\n  | PanelToolsRailDividerAccessory\n  | PanelToolsRailShortcutAccessory\n  | PanelToolsRailTransientAccessory;\n\nexport interface PanelToolsRailAccessoryActionDetail {\n  accessoryId: string;\n  actionId: string;\n  /** Rendered action control, suitable for anchoring an application-owned overlay. */\n  anchor: HTMLElement;\n}\n\n/** Canonical shell recipe used by Lab and by managed ShellApp examples. */\nexport const PANEL_TOOLS_DEFAULT_ITEMS: PanelToolsItem[] = [\n  {\n    id: 'agents',\n    icon: 'AI',\n    label: PANEL_TOOLS_LABELS.agents,\n    railPlacement: 'header',\n    order: 0,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.agents,\n    mobileDestination: 'agents',\n  },\n  {\n    id: 'messages',\n    icon: 'MessageBubbleStack',\n    label: PANEL_TOOLS_LABELS.messages,\n    order: 0,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.messages,\n    mobileDestination: 'messages',\n  },\n  {\n    id: 'activity',\n    icon: 'Bell',\n    label: PANEL_TOOLS_LABELS.activity,\n    order: 1,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.activity,\n    mobileDestination: 'activity',\n  },\n  {\n    id: 'search',\n    icon: 'MagnifyingGlass',\n    label: PANEL_TOOLS_LABELS.search,\n    order: 2,\n    shortcutKey: PANEL_TOOLS_SHORTCUTS.search,\n    mobileDestination: 'search',\n  },\n  {\n    id: 'help',\n    icon: 'CircleQuestion',\n    label: PANEL_TOOLS_LABELS.help,\n    railPlacement: 'footer',\n    order: 0,\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  /** Associated surface remains visible, including exit motion. */\n  surfaceOpen?: boolean;\n  haspopup?: 'menu' | 'dialog' | 'listbox' | 'tree' | 'grid';\n  pressed?: boolean;\n  isInactive?: boolean;\n}\n\nexport interface PanelToolsHeaderActionDetail {\n  tool: PanelToolsToolId;\n  id: string;\n  /** Rendered header action host. Pass this to an external overlay's element anchor prop. */\n  anchor?: HTMLElement;\n}\n\nexport interface PanelToolHeaderActionDetail {\n  id: string;\n  originalEvent: MouseEvent;\n  /** Rendered action host, suitable for anchoring an external overlay across a shadow boundary. */\n  anchor: HTMLElement;\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","import { parseCssTimeMs } from '../../utils/resolve-css-time-ms';\nimport {\n  PANEL_TOOLS_PRIMARY_TOOL_ID,\n  PANEL_TOOLS_TOOL_IDS,\n  type PanelToolsItem,\n  type PanelToolsRailAccessory,\n  type PanelToolsRailAccessoryActionDetail,\n  type PanelToolsRailPlacement,\n  type PanelToolsToolId,\n} from './panel-tools-types';\n\nconst PANEL_TOOLS_REGION_ORDER: Record<PanelToolsRailPlacement, number> = {\n  header: 0,\n  body: 1,\n  footer: 2,\n};\n\nfunction panelToolsItemOrder(item: PanelToolsItem): number {\n  const canonical = PANEL_TOOLS_TOOL_IDS.findIndex(id => id === item.id);\n  return item.order ?? (canonical < 0 ? Number.MAX_SAFE_INTEGER : canonical);\n}\n\nexport function orderPanelToolsItems(items: PanelToolsItem[]): PanelToolsItem[] {\n  const firstById = new Map<PanelToolsToolId, PanelToolsItem>();\n  for (const item of items) {\n    if (item.id.trim() && !firstById.has(item.id)) firstById.set(item.id, item);\n  }\n  return Array.from(firstById.values()).sort((left, right) => {\n    const leftRegion = panelToolsRailPlacement(left);\n    const rightRegion = panelToolsRailPlacement(right);\n    const regionDelta =\n      PANEL_TOOLS_REGION_ORDER[leftRegion] - PANEL_TOOLS_REGION_ORDER[rightRegion];\n    if (regionDelta !== 0) return regionDelta;\n\n    return panelToolsItemOrder(left) - panelToolsItemOrder(right);\n  });\n}\n\nexport type PanelToolsRailEntry =\n  | { type: 'tool'; id: string; item: PanelToolsItem }\n  | { type: 'accessory'; id: string; accessory: PanelToolsRailAccessory };\n\n/** Merge tools and governed accessories into one visual and keyboard order. */\nexport function orderPanelToolsRailEntries(\n  items: PanelToolsItem[],\n  accessories: PanelToolsRailAccessory[]\n): PanelToolsRailEntry[] {\n  const toolEntries: PanelToolsRailEntry[] = orderPanelToolsItems(items).map(item => ({\n    type: 'tool',\n    id: item.id,\n    item,\n  }));\n  const firstAccessoryById = new Map<string, PanelToolsRailAccessory>();\n  for (const accessory of accessories) {\n    if (accessory.id.trim() && !firstAccessoryById.has(accessory.id)) {\n      firstAccessoryById.set(accessory.id, accessory);\n    }\n  }\n  const accessoryEntries: PanelToolsRailEntry[] = Array.from(firstAccessoryById.values()).map(\n    accessory => ({\n      type: 'accessory',\n      id: accessory.id,\n      accessory,\n    })\n  );\n\n  return [...toolEntries, ...accessoryEntries].sort((left, right) => {\n    const leftPlacement =\n      left.type === 'tool' ? panelToolsRailPlacement(left.item) : left.accessory.railPlacement;\n    const rightPlacement =\n      right.type === 'tool' ? panelToolsRailPlacement(right.item) : right.accessory.railPlacement;\n    const regionDelta =\n      PANEL_TOOLS_REGION_ORDER[leftPlacement] - PANEL_TOOLS_REGION_ORDER[rightPlacement];\n    if (regionDelta !== 0) return regionDelta;\n\n    const leftOrder = left.type === 'tool' ? panelToolsItemOrder(left.item) : left.accessory.order;\n    const rightOrder =\n      right.type === 'tool' ? panelToolsItemOrder(right.item) : right.accessory.order;\n    return leftOrder - rightOrder;\n  });\n}\n\n/** Flatten interactive entries while leaving decorative boundaries out of focus order. */\nexport function panelToolsRailFocusKeys(entries: PanelToolsRailEntry[]): string[] {\n  return entries.flatMap(entry => {\n    if (entry.type === 'tool') return [`tool:${entry.id}`];\n    if (entry.accessory.type === 'divider') return [];\n    if (entry.accessory.type === 'shortcut') {\n      return entry.accessory.action.isInactive\n        ? []\n        : [`accessory:${entry.id}:${entry.accessory.action.id}`];\n    }\n    const keys = entry.accessory.primaryAction.isInactive\n      ? []\n      : [`accessory:${entry.id}:${entry.accessory.primaryAction.id}`];\n    if (entry.accessory.secondaryAction && !entry.accessory.secondaryAction.isInactive) {\n      keys.push(`accessory:${entry.id}:${entry.accessory.secondaryAction.id}`);\n    }\n    return keys;\n  });\n}\n\n/** Preserve the current target across collection changes, or choose its nearest survivor. */\nexport function reconcilePanelToolsRovingIndex(\n  previousKeys: string[],\n  nextKeys: string[],\n  currentIndex: number\n): number {\n  if (!nextKeys.length) return 0;\n  const currentKey = previousKeys[currentIndex];\n  const preservedIndex = currentKey ? nextKeys.indexOf(currentKey) : -1;\n  if (preservedIndex >= 0) return preservedIndex;\n  for (let index = currentIndex + 1; index < previousKeys.length; index += 1) {\n    const nextIndex = nextKeys.indexOf(previousKeys[index]);\n    if (nextIndex >= 0) return nextIndex;\n  }\n  for (let index = currentIndex - 1; index >= 0; index -= 1) {\n    const nextIndex = nextKeys.indexOf(previousKeys[index]);\n    if (nextIndex >= 0) return nextIndex;\n  }\n  return Math.min(Math.max(currentIndex, 0), nextKeys.length - 1);\n}\n\nexport function panelToolsRailAccessoryActionDetail(\n  accessoryId: string,\n  actionId: string,\n  anchor: HTMLElement\n): PanelToolsRailAccessoryActionDetail {\n  return { accessoryId, actionId, anchor };\n}\n\nexport function isPanelToolsToolId(value: string | null): value is PanelToolsToolId {\n  return typeof value === 'string' && value.trim().length > 0;\n}\n\nexport function panelToolsRailPlacement(item: PanelToolsItem): 'header' | 'body' | 'footer' {\n  if (item.railPlacement) return item.railPlacement;\n  if (item.id === PANEL_TOOLS_PRIMARY_TOOL_ID) return 'header';\n  if (item.id === 'help') return 'footer';\n  return 'body';\n}\n\nexport function reconcilePanelToolsAvailability(\n  items: PanelToolsItem[],\n  open: boolean,\n  activeTool: PanelToolsToolId | ''\n): { open: boolean; activeTool: PanelToolsToolId | ''; removedTool: PanelToolsToolId | '' } {\n  if (!activeTool || items.some(item => item.id === activeTool)) {\n    return { open, activeTool, removedTool: '' };\n  }\n  return { open: false, activeTool: '', removedTool: activeTool };\n}\n\nexport function shouldResyncPanelToolsItems(\n  prev: PanelToolsItem[],\n  next: PanelToolsItem[]\n): boolean {\n  if (prev.length !== next.length) return true;\n  return next.some((item, index) => {\n    const prior = prev[index];\n    if (!prior) return true;\n    return (\n      prior.id !== item.id ||\n      prior.icon !== item.icon ||\n      prior.label !== item.label ||\n      prior.railPlacement !== item.railPlacement ||\n      prior.order !== item.order ||\n      prior.shortcutKey !== item.shortcutKey ||\n      prior.mobileDestination !== item.mobileDestination ||\n      prior.selected !== item.selected ||\n      prior.dot !== item.dot ||\n      prior.isInactive !== item.isInactive ||\n      prior.ariaLabel !== item.ariaLabel\n    );\n  });\n}\n\nexport type PanelToolsMotion = 'opening' | 'closing' | 'idle';\n\nexport interface PanelToolsTransitionStyle {\n  transitionProperty: string;\n  transitionDuration: string;\n  transitionDelay: string;\n}\n\n/** Maximum computed time for the drawer's max-width transition, including delay. */\nexport function panelToolsDrawerTransitionMs(style: PanelToolsTransitionStyle): number {\n  const properties = style.transitionProperty.split(',').map(item => item.trim());\n  const durations = style.transitionDuration.split(',').map(item => parseCssTimeMs(item.trim(), 0));\n  const delays = style.transitionDelay.split(',').map(item => parseCssTimeMs(item.trim(), 0));\n\n  return properties.reduce((max, property, index) => {\n    if (property !== 'all' && property !== 'max-width') return max;\n    const duration = durations[index % durations.length] ?? 0;\n    const delay = delays[index % delays.length] ?? 0;\n    return Math.max(max, duration + delay, 0);\n  }, 0);\n}\n\n/** True when the drawer clip is fully closed — safe to skip painting slot content. */\nexport function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {\n  return !open && motion === 'idle';\n}\n\n/** True only when the animated clip has reached the terminal width for its motion phase. */\nexport function panelToolsDrawerAtTerminal(\n  width: number,\n  targetWidth: number,\n  motion: PanelToolsMotion\n): boolean {\n  if (motion === 'closing') return width <= 0.5;\n  if (motion === 'opening') return targetWidth > 0 && width >= targetWidth - 0.5;\n  return true;\n}\n\n/** Toggle or switch rail tool selection — repeat activation closes the active tool. */\nexport function resolvePanelToolActivation(\n  open: boolean,\n  activeTool: PanelToolsToolId | '',\n  id: PanelToolsToolId\n): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {\n  if (open && activeTool === id) {\n    return { open: false, activeTool: id, selected: false };\n  }\n  return { open: true, activeTool: id, selected: true };\n}\n","@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/scrollbar-hidden.css';\n\n:host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  --_panel-tools-rail-width: var(--dimension-size-600);\n  --_panel-tools-drawer-width: var(--ds-shell-panel-tools-width, var(--dimension-panel-width-xs));\n  --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\n  /* Match panel-nav expand timing (medium-1); easing differs by direction. */\n  --_panel-tools-expand-dur: var(--effect-animation-duration-medium-1, 300ms);\n}\n\n.panel-tools__layout {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: stretch;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n/* Clip frame — only max-width animates (slide reveal, same as pre-rail :host). */\n.panel-tools__drawer {\n  flex: 0 0 auto;\n  max-width: 0;\n  min-width: 0;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  box-sizing: border-box;\n  transition: none;\n}\n\n:host(.panel-tools--ready) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in-out, ease);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__drawer {\n  max-width: var(--_panel-tools-drawer-width);\n}\n\n.panel-tools__drawer--visible {\n  border-left: var(--_panel-tools-border);\n}\n\n/* Fixed-width surface — ShellApp supplies the standard 300px tools width. */\n.panel-tools__drawer-surface {\n  display: flex;\n  flex-direction: column;\n  width: var(--_panel-tools-drawer-width);\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: transparent;\n}\n\n.panel-tools__full-views,\n.panel-tools__full-view {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.panel-tools__full-view {\n  height: 100%;\n}\n\n.panel-tools__full-view {\n  display: none;\n}\n.panel-tools__full-view--active {\n  display: block;\n}\n\n:host([presentation='fullscreen']) {\n  height: 100%;\n  inset: 0;\n  position: fixed;\n  width: 100%;\n  z-index: var(--dimension-z-index-modal);\n}\n\n:host([presentation='fullscreen']) .panel-tools__rail {\n  display: none;\n}\n:host([presentation='fullscreen']) .panel-tools__drawer {\n  max-width: 100%;\n  transition: none;\n  width: 100%;\n}\n:host([presentation='fullscreen']) .panel-tools__drawer--visible {\n  border-left: none;\n}\n:host([presentation='fullscreen']) .panel-tools__drawer-surface {\n  background-color: transparent;\n  width: 100%;\n}\n\n/*\n * A framework can update the reflected presentation attribute before Stencil\n * commits the matching render class. Conceal that single inconsistent frame so\n * slotted master/detail content never paints against the previous geometry.\n */\n:host([presentation='fullscreen']:not(.panel-tools--fullscreen)) .panel-tools__drawer-surface,\n:host(.panel-tools--fullscreen:not([presentation='fullscreen'])) .panel-tools__drawer-surface {\n  visibility: hidden;\n}\n\n:host(.panel-tools--presentation-snap) .panel-tools__drawer {\n  transition: none;\n}\n\n.panel-tools__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  position: relative;\n}\n\n/* Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. */\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n  display: none;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  padding: var(--dimension-space-200);\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family-ui);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted(*) {\n  margin: 0;\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family-ui);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n  display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. */\n.panel-tools__rail {\n  flex: 0 0 var(--_panel-tools-rail-width);\n  width: var(--_panel-tools-rail-width);\n  min-width: var(--_panel-tools-rail-width);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  border-left: var(--_panel-tools-border);\n  background-color: transparent;\n}\n\n.panel-tools__rail-header {\n  justify-content: center;\n  height: var(--dimension-size-600);\n  flex-shrink: 0;\n  border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-header.panel-tools__rail-section--stacked {\n  height: auto;\n  min-height: var(--dimension-size-600);\n}\n\n.panel-tools__rail-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.panel-tools__rail-actions {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n/* Flush to the bottom of the rail — mirrors Search header pin. */\n.panel-tools__rail-footer {\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: auto;\n}\n\n.panel-tools__rail-section--stacked {\n  align-items: stretch;\n}\n\n.panel-tools__rail-action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: var(--ds-control-height);\n  flex-shrink: 0;\n}\n\n.panel-tools__accessory {\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 calc(var(--dimension-size-400) * 2);\n  box-sizing: border-box;\n  width: 100%;\n  min-height: calc(var(--dimension-size-400) * 2);\n}\n\n.panel-tools__accessory--shortcut {\n  flex-basis: var(--dimension-size-400);\n  min-width: var(--dimension-size-400);\n  min-height: var(--dimension-size-400);\n}\n\n.panel-tools__accessory--shortcut > ds-tooltip {\n  display: flex;\n  flex: 1 1 auto;\n  width: 100%;\n  min-height: 0;\n}\n\n.panel-tools__accessory--transient {\n  align-items: center;\n  gap: var(--dimension-space-100);\n  width: var(--dimension-size-400);\n  height: calc(var(--dimension-size-400) * 2);\n  min-height: calc(var(--dimension-size-400) * 2);\n  padding: var(--dimension-space-050);\n  border-radius: var(--dimension-radius-half);\n}\n\n.panel-tools__accessory--transient-active {\n  background-color: var(--color-background-bold-brand);\n}\n\n.panel-tools__accessory--transient-positive {\n  background-color: var(--color-background-bold-positive);\n}\n\n.panel-tools__accessory--transient > ds-tooltip {\n  display: flex;\n  flex: 0 0 var(--dimension-size-300);\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  min-height: var(--dimension-size-300);\n}\n\n.panel-tools__shortcut {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-half);\n  color: var(--color-foreground-secondary);\n  background: transparent;\n  font: inherit;\n}\n\n.panel-tools__shortcut:disabled {\n  color: var(--color-foreground-disabled);\n  cursor: not-allowed;\n}\n\n.panel-tools__shortcut-content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n}\n\n.panel-tools__shortcut-orb {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  border: var(--dimension-stroke-width-012) solid var(--color-border-secondary);\n  border-radius: var(--dimension-radius-half);\n  background: transparent;\n}\n\n.panel-tools__shortcut-dot {\n  position: absolute;\n  inset-block-start: calc((var(--dimension-size-400) - var(--dimension-iconography-md)) / 2);\n  inset-inline-end: calc((var(--dimension-size-400) - var(--dimension-iconography-md)) / 2);\n  z-index: 2;\n  pointer-events: none;\n}\n\n.panel-tools__accessory-primary {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-half);\n  color: var(--color-foreground-on-bold-background-secondary);\n  background: transparent;\n  font: inherit;\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-on-bold-background-secondary);\n}\n\n.panel-tools__accessory-primary:disabled {\n  color: var(--color-foreground-on-bold-background-quaternary);\n  cursor: not-allowed;\n}\n\n.panel-tools__accessory-primary-content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.panel-tools__accessory-image,\n.panel-tools__accessory-initial {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--dimension-radius-half);\n}\n\n.panel-tools__accessory-image {\n  object-fit: cover;\n}\n\n.panel-tools__accessory-initial {\n  color: inherit;\n  background: transparent;\n}\n\n.panel-tools__accessory-secondary {\n  display: inline-flex;\n  flex: 0 0 var(--dimension-size-300);\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n}\n\n.panel-tools__accessory-divider {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  width: 100%;\n  padding-block: var(--dimension-space-050);\n}\n\n.panel-tools__accessory-divider ds-divider {\n  display: block;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer,\n  :host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  Method,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport { ANCHORED_OVERLAY_BOUNDARY_ATTRIBUTE } from '../../utils/anchored-overlay-boundary';\nimport {\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_SHORTCUTS,\n  type PanelToolsHeaderAction,\n  type PanelToolsHeaderActionDetail,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsRailAccessory,\n  type PanelToolsRailAccessoryAction,\n  type PanelToolsRailAccessoryActionDetail,\n  type PanelToolsRailShortcutAccessory,\n  type PanelToolsRailTransientAccessory,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport {\n  isPanelToolsToolId,\n  orderPanelToolsRailEntries,\n  orderPanelToolsItems,\n  panelToolsRailAccessoryActionDetail,\n  panelToolsRailFocusKeys,\n  panelToolsDrawerAtTerminal,\n  panelToolsDrawerResting,\n  panelToolsDrawerTransitionMs,\n  panelToolsRailPlacement,\n  reconcilePanelToolsAvailability,\n  reconcilePanelToolsRovingIndex,\n  resolvePanelToolActivation,\n  type PanelToolsRailEntry,\n} from './panel-tools-utils';\n\n@Component({\n  tag: 'ds-panel-tools',\n  styleUrl: 'PanelTools.css',\n  shadow: true,\n})\nexport class PanelTools {\n  @Element() el!: HTMLElement;\n\n  /** When false, only the icon rail is shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Drawer presentation or presentation covering the shell stage for the active tool. */\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n\n  /** Let a fullscreen product supply independent master/detail headers inside its view. */\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n\n  /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n\n  /**\n   * Rail items rendered in the right column.\n   * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n   */\n  @Prop() items: PanelToolsItem[] = [];\n\n  /**\n   * Desktop/tablet-only application-owned rail boundaries and direct intents.\n   * Set via JS property and replace the array reference to update.\n   */\n  @Prop() accessories: PanelToolsRailAccessory[] = [];\n\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n\n  /** Active header state per tool. Replace the object when title, depth, or actions change. */\n  @Prop() headers: PanelToolsHeaders = {};\n\n  /**\n   * Optional localStorage key for the last active tool. The drawer always starts\n   * closed; only the tool identity is restored for continuity within this browser.\n   */\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n\n  /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n\n  /** Emitted when fullscreen changes, including Escape-initiated exits. */\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n\n  /** Requests navigation to the active tool's parent view. */\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n\n  /** Requests one application-owned action from the active tool header. */\n  @Event({ bubbles: true, composed: true })\n  dsHeaderAction!: EventEmitter<PanelToolsHeaderActionDetail>;\n\n  /** Direct accessory intent. Emitting this event never changes the active tool or drawer. */\n  @Event({ bubbles: true, composed: true })\n  dsRailAccessoryAction!: EventEmitter<PanelToolsRailAccessoryActionDetail>;\n\n  /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Arms open vs close easing for the in-flight width transition. */\n  @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n  /** Keeps header and slotted content painted until the closing clip transition completes. */\n  @State() private drawerSurfaceRetained = false;\n\n  /** Suppresses width transition until the host has painted its initial open state. */\n  @State() private readyForMotion = false;\n\n  /** Fullscreen presentation changes snap without borrowing drawer width motion. */\n  @State() private presentationMotionSuppressed = false;\n\n  @State() private rovingIndex = 0;\n  @State() private fullViewToolIds: PanelToolsToolId[] = [];\n  @State() private railBodyScrollable = false;\n\n  private motionEnableGeneration = 0;\n  private presentationMotionGeneration = 0;\n  private transitionGeneration = 0;\n  private transitionFallbackTimer: number | null = null;\n  /** Ignores the old transition's terminal event when reversing direction. */\n  private ignoreReplacementTerminal = false;\n  private focusBeforeFullscreen: HTMLElement | null = null;\n  private fullViewObserver: MutationObserver | null = null;\n  private railBodyEl?: HTMLElement;\n  private railBodyObserver?: ResizeObserver;\n\n  private get railItems(): PanelToolsItem[] {\n    return this.items ?? [];\n  }\n\n  private get orderedRailItems(): PanelToolsItem[] {\n    return orderPanelToolsItems(this.railItems);\n  }\n\n  private get railAccessories(): PanelToolsRailAccessory[] {\n    return this.accessories ?? [];\n  }\n\n  private get orderedRailEntries(): PanelToolsRailEntry[] {\n    return orderPanelToolsRailEntries(this.railItems, this.railAccessories);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.el.removeEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.removeEventListener('dsAction', this.handleComposedHeaderAction);\n    this.clearTransitionCompletion();\n    this.motionEnableGeneration += 1;\n    this.fullViewObserver?.disconnect();\n    this.fullViewObserver = null;\n    this.disconnectRailBodyObserver();\n  }\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous?: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n    // Framework property bindings can update slotted master/detail content in\n    // the same render that requests fullscreen. Reflect the host selector\n    // immediately so that content cannot paint once in the drawer geometry\n    // while Stencil waits to commit its next render.\n    if (this.el.getAttribute('presentation') !== next) {\n      this.el.setAttribute('presentation', next);\n    }\n    const presentationGeneration = ++this.presentationMotionGeneration;\n    this.presentationMotionSuppressed = true;\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (presentationGeneration !== this.presentationMotionGeneration) return;\n        this.presentationMotionSuppressed = false;\n      });\n    });\n    if (next === 'fullscreen') {\n      this.focusBeforeFullscreen =\n        document.activeElement instanceof HTMLElement ? document.activeElement : null;\n      this.open = true;\n    } else if (previous === 'fullscreen') {\n      const focusBeforeFullscreen = this.focusBeforeFullscreen;\n      const fallbackActionId = this.activeHeader().actions?.[0]?.id;\n      requestAnimationFrame(async () => {\n        if (focusBeforeFullscreen?.isConnected) {\n          focusBeforeFullscreen.focus({ preventScroll: true });\n        }\n        const focusRestored = focusBeforeFullscreen\n          ? document.activeElement === focusBeforeFullscreen ||\n            focusBeforeFullscreen.contains(document.activeElement)\n          : false;\n        if (!focusRestored && fallbackActionId) await this.focusHeaderAction(fallbackActionId);\n        this.focusBeforeFullscreen = null;\n      });\n    }\n    this.dsPresentationChange.emit({ presentation: next });\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleFullscreenEscape(event: KeyboardEvent) {\n    if (this.presentation !== 'fullscreen' || event.key !== 'Escape') return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.presentation = 'drawer';\n  }\n\n  private deferMotionEnable() {\n    if (this.readyForMotion) return;\n    const generation = ++this.motionEnableGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.motionEnableGeneration) return;\n      requestAnimationFrame(() => {\n        if (generation !== this.motionEnableGeneration) return;\n        this.readyForMotion = true;\n      });\n    });\n  }\n\n  connectedCallback() {\n    this.el.setAttribute(ANCHORED_OVERLAY_BOUNDARY_ATTRIBUTE, '');\n    this.el.addEventListener('transitionend', this.handleTransitionEnd);\n    this.el.addEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.addEventListener('dsAction', this.handleComposedHeaderAction);\n  }\n\n  private handleComposedHeaderAction = (event: Event) => {\n    const detail = (event as CustomEvent<{ id?: string; anchor?: HTMLElement }>).detail;\n    if (!this.activeTool || !detail?.id) return;\n    event.stopPropagation();\n    this.dsHeaderAction.emit({\n      tool: this.activeTool,\n      id: detail.id,\n      anchor: detail.anchor,\n    });\n  };\n\n  componentWillLoad() {\n    this.restoreLastActiveTool();\n    this.drawerSurfaceRetained = this.open;\n  }\n\n  @Watch('open')\n  openChanged(isOpen: boolean, wasOpen?: boolean) {\n    if (isOpen) this.drawerSurfaceRetained = true;\n    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n      this.startDrawerTransition(isOpen ? 'opening' : 'closing');\n    } else if (!isOpen) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.persistLastActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('storageKey')\n  storageKeyChanged() {\n    this.restoreLastActiveTool();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n    this.connectRailBodyObserver();\n    this.updateRailBodyScrollable();\n    this.syncFullViewTools();\n    this.fullViewObserver = new MutationObserver(() => this.syncFullViewTools());\n    this.fullViewObserver.observe(this.el, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n  }\n\n  componentDidRender() {\n    this.updateRailBodyScrollable();\n  }\n\n  private connectRailBodyObserver() {\n    this.disconnectRailBodyObserver();\n    if (!this.railBodyEl || typeof ResizeObserver === 'undefined') return;\n    this.railBodyObserver = new ResizeObserver(() => this.updateRailBodyScrollable());\n    this.railBodyObserver.observe(this.railBodyEl);\n  }\n\n  private disconnectRailBodyObserver() {\n    this.railBodyObserver?.disconnect();\n    this.railBodyObserver = undefined;\n  }\n\n  private updateRailBodyScrollable() {\n    const next = Boolean(\n      this.railBodyEl && this.railBodyEl.scrollHeight > this.railBodyEl.clientHeight + 1\n    );\n    if (next !== this.railBodyScrollable) this.railBodyScrollable = next;\n  }\n\n  @Watch('items')\n  itemsChanged() {\n    this.rovingIndex = 0;\n    this.reconcileActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('accessories')\n  accessoriesChanged(\n    next: PanelToolsRailAccessory[] = [],\n    previous: PanelToolsRailAccessory[] = []\n  ) {\n    const previousKeys = panelToolsRailFocusKeys(\n      orderPanelToolsRailEntries(this.railItems, previous)\n    );\n    const nextKeys = panelToolsRailFocusKeys(orderPanelToolsRailEntries(this.railItems, next));\n    const activeElement = (this.renderRoot as ShadowRoot).activeElement as HTMLElement | null;\n    const focusedKey =\n      activeElement?.closest<HTMLElement>('[data-rail-focus-key]')?.dataset.railFocusKey;\n    const focusedIndex = focusedKey ? previousKeys.indexOf(focusedKey) : -1;\n    const currentIndex = focusedIndex >= 0 ? focusedIndex : this.rovingIndex;\n    const nextIndex = reconcilePanelToolsRovingIndex(previousKeys, nextKeys, currentIndex);\n    const restoreFocus = focusedIndex >= 0 && !nextKeys.includes(focusedKey ?? '');\n    this.rovingIndex = nextIndex;\n    if (restoreFocus && nextKeys.length) {\n      requestAnimationFrame(() => this.focusRailAt(nextIndex));\n    }\n  }\n\n  private restoreLastActiveTool() {\n    if (!this.storageKey || this.activeTool) return;\n    try {\n      const stored = localStorage.getItem(this.storageKey);\n      if (isPanelToolsToolId(stored)) this.activeTool = stored;\n    } catch {\n      /* localStorage unavailable */\n    }\n  }\n\n  private persistLastActiveTool() {\n    if (!this.storageKey || !this.activeTool) return;\n    try {\n      localStorage.setItem(this.storageKey, this.activeTool);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private clearPersistedTool() {\n    if (!this.storageKey) return;\n    try {\n      localStorage.removeItem(this.storageKey);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private reconcileActiveTool() {\n    const next = reconcilePanelToolsAvailability(this.railItems, this.open, this.activeTool);\n    if (!next.removedTool) return;\n    this.clearPersistedTool();\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id: next.removedTool, selected: false });\n  }\n\n  private startDrawerTransition(phase: 'opening' | 'closing') {\n    const drawer = this.renderRoot.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (this.motion !== 'idle') {\n      this.finishDrawerTransition();\n      this.ignoreReplacementTerminal = true;\n    }\n    this.motion = phase;\n    this.dsChromeTransitionStart.emit({ source: 'panel-tools', phase });\n    const generation = ++this.transitionGeneration;\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (generation !== this.transitionGeneration || this.motion !== phase) return;\n        if (!drawer) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        if (this.drawerTransitionAtTerminal(drawer, phase)) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        const fallbackMs = panelToolsDrawerTransitionMs(getComputedStyle(drawer));\n        if (fallbackMs <= 0) {\n          this.finishDrawerTransition();\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishDrawerTransition();\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const drawer = this.renderRoot.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (event.target !== drawer) return;\n    if (event.propertyName !== 'max-width') return;\n    if (this.ignoreReplacementTerminal) {\n      this.ignoreReplacementTerminal = false;\n      return;\n    }\n    // Changing from the neutral transition recipe to the direction-specific\n    // easing can cancel the transition that the reflected `open` class began.\n    // The replacement transition and its watchdog still own completion; ending\n    // motion here would hide the fixed-width tool surface while it is visible.\n    if (event.type === 'transitioncancel') return;\n    if (drawer && !this.drawerTransitionAtTerminal(drawer, this.motion)) return;\n    this.finishDrawerTransition();\n  };\n\n  private drawerTransitionAtTerminal(\n    drawer: HTMLElement,\n    phase: 'opening' | 'closing' | 'idle'\n  ): boolean {\n    const width = drawer.getBoundingClientRect().width;\n    const surface = drawer.querySelector('.panel-tools__drawer-surface') as HTMLElement | null;\n    const targetWidth = surface?.getBoundingClientRect().width ?? 0;\n    return panelToolsDrawerAtTerminal(width, targetWidth, phase);\n  }\n\n  private finishDrawerTransition() {\n    const completedPhase = this.motion;\n    const wasTransitioning = completedPhase !== 'idle';\n    this.clearTransitionCompletion();\n    if (!wasTransitioning) return;\n    this.ignoreReplacementTerminal = false;\n    this.motion = 'idle';\n    if (completedPhase === 'closing' && !this.open) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  }\n\n  private clearTransitionCompletion() {\n    this.transitionGeneration += 1;\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.drawerSurfaceRetained;\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private hasFullView(id: PanelToolsToolId): boolean {\n    return this.fullViewToolIds.includes(id);\n  }\n\n  private syncFullViewTools() {\n    const ids = this.orderedRailItems.map(item => item.id);\n    const next = ids.filter(id => Boolean(this.el.querySelector(`[slot=\"${id}-view\"]`)));\n    if (next.join('|') !== this.fullViewToolIds.join('|')) this.fullViewToolIds = next;\n  }\n\n  private get renderRoot(): ParentNode {\n    return this.el.shadowRoot ?? this.el;\n  }\n\n  private headerLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    const item = this.railItems.find(candidate => candidate.id === this.activeTool);\n    return (\n      item?.label ??\n      PANEL_TOOLS_LABELS[this.activeTool as keyof typeof PANEL_TOOLS_LABELS] ??\n      this.activeTool\n    );\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    return this.headers ?? {};\n  }\n\n  private activeHeader(): PanelToolsHeaderConfig {\n    if (!this.activeTool) return {};\n    return this.resolvedHeaders()[this.activeTool] ?? {};\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  /** Focus an active tool-header action by its application-owned id. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    const action = this.renderRoot.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await action?.setFocus?.();\n  }\n\n  private focusRailAt(index: number) {\n    const keys = panelToolsRailFocusKeys(this.orderedRailEntries);\n    if (!keys.length) return;\n    const bounded = Math.max(0, Math.min(index, keys.length - 1));\n    this.rovingIndex = bounded;\n    const action = this.renderRoot.querySelector(\n      `[data-rail-focus-key=\"${CSS.escape(keys[bounded])}\"]`\n    ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n    if (action?.setFocus) {\n      void action.setFocus();\n    } else {\n      action?.focus({ preventScroll: true });\n    }\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number, activate?: () => void) => {\n    const keys = panelToolsRailFocusKeys(this.orderedRailEntries);\n    if (!keys.length) return;\n\n    if ((e.key === 'Enter' || e.key === ' ') && activate) {\n      e.preventDefault();\n      activate();\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= keys.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const focusKey = `tool:${item.id}`;\n    const label =\n      item.ariaLabel ??\n      item.label ??\n      PANEL_TOOLS_LABELS[item.id as keyof typeof PANEL_TOOLS_LABELS] ??\n      item.id;\n    return (\n      <ds-tooltip\n        key={item.id}\n        label={label}\n        shortcutKey={\n          item.shortcutKey ?? PANEL_TOOLS_SHORTCUTS[item.id as keyof typeof PANEL_TOOLS_SHORTCUTS]\n        }\n        side=\"left\"\n        size=\"sm\"\n        boundary=\"viewport\"\n      >\n        <ds-button-unfilled\n          variant=\"icon\"\n          class=\"panel-tools__rail-action\"\n          icon={item.icon}\n          isActive={this.isRailSelected(item.id)}\n          activeFill={false}\n          hasBorder={false}\n          pressScale={false}\n          dot={item.dot ?? false}\n          isInactive={item.isInactive}\n          focusTabIndex={index === this.rovingIndex ? 0 : -1}\n          data-rail-focus-key={focusKey}\n          aria-label={label}\n          pressed={this.isRailSelected(item.id)}\n          onFocusin={() => {\n            this.rovingIndex = index;\n          }}\n          onKeyDown={(e: KeyboardEvent) =>\n            this.handleRailKeyDown(e, index, () => this.handleToolChange(item.id))\n          }\n          onDsClick={() => this.handleToolChange(item.id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  private accessoryPrimaryLabel(accessory: PanelToolsRailTransientAccessory): string {\n    const actionLabel = accessory.primaryAction.ariaLabel?.trim() || accessory.ariaLabel;\n    const status = accessory.statusText.trim();\n    return status ? `${actionLabel}. ${status}` : actionLabel;\n  }\n\n  private emitAccessoryAction(\n    accessoryId: string,\n    action: PanelToolsRailAccessoryAction,\n    anchor: HTMLElement\n  ) {\n    if (action.isInactive) return;\n    this.dsRailAccessoryAction.emit(\n      panelToolsRailAccessoryActionDetail(accessoryId, action.id, anchor)\n    );\n  }\n\n  private renderAccessoryVisual(accessory: PanelToolsRailTransientAccessory) {\n    if (accessory.visual.type === 'image') {\n      return (\n        <img\n          class=\"panel-tools__accessory-image\"\n          src={accessory.visual.src}\n          alt=\"\"\n          aria-hidden=\"true\"\n        />\n      );\n    }\n    if (accessory.visual.type === 'initial') {\n      const initial = [...accessory.visual.initial.trim()].slice(0, 2).join('');\n      return (\n        <ds-text\n          class=\"panel-tools__accessory-initial\"\n          as=\"span\"\n          variant=\"text-caption\"\n          emphasis\n          color=\"inherit\"\n          aria-hidden=\"true\"\n        >\n          {initial}\n        </ds-text>\n      );\n    }\n    return <ds-icon name={accessory.visual.icon} size=\"sm\" aria-hidden=\"true\" />;\n  }\n\n  private renderRailShortcut(\n    accessory: PanelToolsRailShortcutAccessory,\n    focusIndexes: Map<string, number>\n  ) {\n    const focusKey = `accessory:${accessory.id}:${accessory.action.id}`;\n    const focusIndex = focusIndexes.get(focusKey);\n    const label = accessory.action.ariaLabel?.trim() || accessory.ariaLabel;\n    const initials = [...accessory.initials.trim()].slice(0, 2).join('');\n\n    return (\n      <div\n        key={`accessory:${accessory.id}`}\n        class=\"panel-tools__accessory panel-tools__accessory--shortcut\"\n      >\n        <ds-tooltip label={label} side=\"left\" size=\"sm\" boundary=\"viewport\">\n          <button\n            type=\"button\"\n            class=\"panel-tools__shortcut ds-focus-ring-inset ds-interaction-fill\"\n            disabled={accessory.action.isInactive}\n            tabIndex={focusIndex === this.rovingIndex ? 0 : -1}\n            data-rail-focus-key={focusKey}\n            aria-label={label}\n            onFocus={() => {\n              if (focusIndex !== undefined) this.rovingIndex = focusIndex;\n            }}\n            onKeyDown={(event: KeyboardEvent) =>\n              focusIndex === undefined ? undefined : this.handleRailKeyDown(event, focusIndex)\n            }\n            onClick={(event: MouseEvent) =>\n              this.emitAccessoryAction(\n                accessory.id,\n                accessory.action,\n                event.currentTarget as HTMLElement\n              )\n            }\n          >\n            <span class=\"panel-tools__shortcut-content ds-interaction-fill__content\">\n              <ds-text\n                class=\"panel-tools__shortcut-orb\"\n                as=\"span\"\n                variant=\"text-caption\"\n                emphasis\n                color=\"inherit\"\n              >\n                {initials}\n              </ds-text>\n              {accessory.dot ? (\n                <ds-badge\n                  class=\"panel-tools__shortcut-dot\"\n                  variant=\"dot\"\n                  background=\"var(--color-background-secondary)\"\n                  aria-hidden=\"true\"\n                />\n              ) : null}\n            </span>\n          </button>\n        </ds-tooltip>\n      </div>\n    );\n  }\n\n  private renderRailAccessory(\n    accessory: PanelToolsRailAccessory,\n    focusIndexes: Map<string, number>\n  ) {\n    if (accessory.type === 'divider') {\n      return (\n        <div\n          key={`accessory:${accessory.id}`}\n          class=\"panel-tools__accessory-divider\"\n          aria-hidden=\"true\"\n        >\n          <ds-divider />\n        </div>\n      );\n    }\n\n    if (accessory.type === 'shortcut') {\n      return this.renderRailShortcut(accessory, focusIndexes);\n    }\n\n    const primaryKey = `accessory:${accessory.id}:${accessory.primaryAction.id}`;\n    const primaryIndex = focusIndexes.get(primaryKey);\n    const primaryLabel = this.accessoryPrimaryLabel(accessory);\n    const secondary = accessory.secondaryAction;\n    const secondaryKey = secondary ? `accessory:${accessory.id}:${secondary.id}` : '';\n    const secondaryIndex = secondary ? focusIndexes.get(secondaryKey) : undefined;\n\n    return (\n      <div\n        key={`accessory:${accessory.id}`}\n        class={{\n          'panel-tools__accessory': true,\n          'panel-tools__accessory--transient': true,\n          'panel-tools__accessory--transient-active': accessory.statusTone === 'active',\n          'panel-tools__accessory--transient-positive': accessory.statusTone === 'positive',\n        }}\n      >\n        <ds-tooltip label={primaryLabel} side=\"left\" size=\"sm\" boundary=\"viewport\">\n          <button\n            type=\"button\"\n            class=\"panel-tools__accessory-primary ds-focus-ring-inset ds-interaction-fill ds-interaction-fill--on-bold\"\n            disabled={accessory.primaryAction.isInactive}\n            tabIndex={primaryIndex === this.rovingIndex ? 0 : -1}\n            data-rail-focus-key={primaryKey}\n            aria-label={primaryLabel}\n            onFocus={() => {\n              if (primaryIndex !== undefined) this.rovingIndex = primaryIndex;\n            }}\n            onKeyDown={(event: KeyboardEvent) =>\n              primaryIndex === undefined ? undefined : this.handleRailKeyDown(event, primaryIndex)\n            }\n            onClick={(event: MouseEvent) =>\n              this.emitAccessoryAction(\n                accessory.id,\n                accessory.primaryAction,\n                event.currentTarget as HTMLElement\n              )\n            }\n          >\n            <span class=\"panel-tools__accessory-primary-content ds-interaction-fill__content\">\n              {this.renderAccessoryVisual(accessory)}\n            </span>\n          </button>\n        </ds-tooltip>\n        {secondary ? (\n          <ds-tooltip label={secondary.ariaLabel} side=\"left\" size=\"sm\" boundary=\"viewport\">\n            <ds-button-unfilled\n              class=\"panel-tools__accessory-secondary\"\n              variant=\"icon\"\n              size=\"sm\"\n              rounded\n              background=\"bold\"\n              hasBorder={false}\n              icon={secondary.icon}\n              isInactive={secondary.isInactive}\n              focusTabIndex={secondaryIndex === this.rovingIndex ? 0 : -1}\n              data-rail-focus-key={secondaryKey}\n              aria-label={secondary.ariaLabel}\n              onFocusin={() => {\n                if (secondaryIndex !== undefined) this.rovingIndex = secondaryIndex;\n              }}\n              onKeyDown={(event: KeyboardEvent) =>\n                secondaryIndex === undefined\n                  ? undefined\n                  : this.handleRailKeyDown(event, secondaryIndex)\n              }\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.emitAccessoryAction(\n                  accessory.id,\n                  secondary,\n                  event.currentTarget as HTMLElement\n                )\n              }\n            />\n          </ds-tooltip>\n        ) : null}\n      </div>\n    );\n  }\n\n  private renderRailEntry(entry: PanelToolsRailEntry, focusIndexes: Map<string, number>) {\n    if (entry.type === 'tool') {\n      return this.renderRailAction(entry.item, focusIndexes.get(`tool:${entry.id}`) ?? 0);\n    }\n    return this.renderRailAccessory(entry.accessory, focusIndexes);\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const header = this.activeHeader();\n    const headerTitle = header.title?.trim() || headerLabel;\n    const headerActions = header.actions ?? [];\n    const orderedRailItems = this.orderedRailItems;\n    const orderedRailEntries = this.orderedRailEntries;\n    const entryPlacement = (entry: PanelToolsRailEntry) =>\n      entry.type === 'tool' ? panelToolsRailPlacement(entry.item) : entry.accessory.railPlacement;\n    const headerEntries = orderedRailEntries.filter(entry => entryPlacement(entry) === 'header');\n    const bodyEntries = orderedRailEntries.filter(entry => entryPlacement(entry) === 'body');\n    const footerEntries = orderedRailEntries.filter(entry => entryPlacement(entry) === 'footer');\n    const focusIndexes = new Map(\n      panelToolsRailFocusKeys(orderedRailEntries).map((key, index) => [key, index])\n    );\n    const showDrawerChrome = this.isDrawerPresent();\n    const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n    const activeFullView = Boolean(\n      showDrawerChrome && this.activeTool && this.hasFullView(this.activeTool)\n    );\n    const toolIds = orderedRailItems.map(item => item.id);\n\n    return (\n      <Host\n        class={{\n          'panel-tools': true,\n          'panel-tools--open': this.open,\n          'panel-tools--ready': this.readyForMotion,\n          'panel-tools--motion-opening': this.motion === 'opening',\n          'panel-tools--motion-closing': this.motion === 'closing',\n          'panel-tools--drawer-resting': drawerResting,\n          'panel-tools--fullscreen': this.presentation === 'fullscreen',\n          'panel-tools--presentation-snap': this.presentationMotionSuppressed,\n        }}\n        data-ds-overlay-boundary\n        role={this.presentation === 'fullscreen' ? 'dialog' : 'complementary'}\n        aria-modal={this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={this.toolsLabel}\n      >\n        <div class=\"panel-tools__layout\">\n          <nav class=\"panel-tools__rail\" aria-label={this.toolShortcutsLabel}>\n            {headerEntries.length ? (\n              <div\n                class={{\n                  'panel-tools__rail-header': true,\n                  'panel-tools__rail-section--stacked': headerEntries.length > 1,\n                  'ds-chrome-row': headerEntries.length === 1,\n                  'ds-chrome-column': headerEntries.length > 1,\n                  'ds-chrome-space--md': true,\n                }}\n              >\n                {headerEntries.map(entry => this.renderRailEntry(entry, focusIndexes))}\n              </div>\n            ) : null}\n            <div\n              class={{\n                'panel-tools__rail-body': true,\n                'ds-chrome-column': true,\n                'ds-chrome-space--md': true,\n                'ds-scrollbar-hidden': true,\n                'ds-focus-ring': this.railBodyScrollable,\n              }}\n              ref={element => {\n                const next = (element as HTMLElement) ?? undefined;\n                if (next === this.railBodyEl) return;\n                this.railBodyEl = next;\n                this.connectRailBodyObserver();\n              }}\n              role={this.railBodyScrollable ? 'region' : undefined}\n              aria-label={this.railBodyScrollable ? this.toolShortcutsLabel : undefined}\n              tabIndex={this.railBodyScrollable ? 0 : undefined}\n            >\n              <div class=\"panel-tools__rail-actions\">\n                {bodyEntries.map(entry => this.renderRailEntry(entry, focusIndexes))}\n              </div>\n            </div>\n            {footerEntries.length ? (\n              <div\n                class={{\n                  'panel-tools__rail-footer': true,\n                  'panel-tools__rail-section--stacked': footerEntries.length > 1,\n                  'ds-chrome-row': footerEntries.length === 1,\n                  'ds-chrome-column': footerEntries.length > 1,\n                  'ds-chrome-space--md': true,\n                }}\n              >\n                {footerEntries.map(entry => this.renderRailEntry(entry, focusIndexes))}\n              </div>\n            ) : null}\n          </nav>\n\n          <div\n            class={{\n              'panel-tools__drawer': true,\n              'panel-tools__drawer--visible': showDrawerChrome,\n            }}\n            aria-hidden={showDrawerChrome ? null : 'true'}\n            inert={showDrawerChrome ? undefined : true}\n          >\n            <div class=\"panel-tools__drawer-surface\">\n              {this.presentation !== 'fullscreen' || this.fullscreenHeaderMode === 'shared' ? (\n                <ds-panel-tool-header\n                  class=\"panel-tools__header\"\n                  heading={headerTitle}\n                  showBack={header.showBack ?? false}\n                  backIcon={header.backIcon || 'ChevronLeft'}\n                  backAriaLabel={header.backAriaLabel || 'Back'}\n                  showMenu={false}\n                  ref={element => {\n                    const toolHeader = element as\n                      | (HTMLDsPanelToolHeaderElement & {\n                          actions: PanelToolsHeaderAction[];\n                        })\n                      | undefined;\n                    if (toolHeader) toolHeader.actions = headerActions;\n                  }}\n                  onDsBack={() => {\n                    if (this.activeTool) this.dsHeaderBack.emit({ tool: this.activeTool });\n                  }}\n                />\n              ) : null}\n              <div class=\"panel-tools__body\" hidden={activeFullView}>\n                {toolIds.map(id => {\n                  const active = this.isViewActive(id);\n                  return (\n                    <div\n                      class={{\n                        'panel-tools__view': true,\n                        'panel-tools__view--active': active,\n                      }}\n                      hidden={!active}\n                    >\n                      <slot name={id} />\n                    </div>\n                  );\n                })}\n              </div>\n              <div class=\"panel-tools__full-views\" hidden={!activeFullView}>\n                {toolIds.map(id => (\n                  <div\n                    class={{\n                      'panel-tools__full-view': true,\n                      'panel-tools__full-view--active':\n                        this.isViewActive(id) && this.hasFullView(id),\n                    }}\n                    hidden={!(this.isViewActive(id) && this.hasFullView(id))}\n                  >\n                    <slot name={`${id}-view`} />\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/mcp-data/registry/table-group.json

@@ -1,358 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "table-group",
-  "title": "TableGroup",
-  "description": "Two-panel toolbar control for choosing one table grouping data point and the order of its group sections.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/table-group",
-    "source": "src/wc/components/TableGroup/TableGroup.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "general",
-      "status": "stable",
-      "summary": "Two-panel toolbar control for choosing one table grouping data point and the order of its group sections.",
-      "useWhen": [
-        "A table toolbar needs explicit control of one grouping level and its section order.",
-        "Grouping data-point labels differ from compact table-header labels."
-      ],
-      "avoidWhen": [
-        "The table is not groupable.",
-        "The application expects the component to rearrange rows or create group sections internally."
-      ],
-      "alternatives": [
-        {
-          "when": "The choice is one submitted form value with no dependent order pane.",
-          "component": "component:ds-select",
-          "reason": "Select owns form-value semantics rather than table grouping state."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-table",
-        "component:ds-table-toolbar",
-        "component:ds-table-filter",
-        "component:ds-table-sort"
-      ],
-      "patterns": [
-        "pattern:menu-trigger"
-      ],
-      "accessibility": [
-        "The trigger opens a named non-modal dialog. Data and Order are independently named single-selection listboxes.",
-        "Up and Down move within the focused pane. Right moves from Data to Order when a group is active, Left returns to the selected Data row, and Escape closes the dialog and restores trigger focus.",
-        "The right pane remains present before a group is active as one complete empty state without the Order heading, and explains that a group must be selected."
-      ],
-      "states": [
-        "options and grouping are controlled. A data option may supply product-owned orderOptions; otherwise Order defaults to Ascending and Descending. dsGroupChange reports a complete TableGroupingState and dsClear requests null grouping without mutating either input.",
-        "Selecting a new data point starts at its first custom order option, or ascending when it has no custom order options. Re-selecting the active data point preserves its complete order state.",
-        "Selecting a data point or direction applies immediately and leaves the dialog open so the other pane can be changed.",
-        "The grouping picker automatically holds the shared surface-open wash through exit. Opening this picker is separate from expanding an inline table group.",
-        "Embedded mode renders the same controlled content inside a parent-owned surface; the parent owns positioning, initial focus, Escape, Tab exit, and dismissal.",
-        "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback.",
-        "Expanded toolbar triggers use an icon and regular-weight text without a trailing chevron.",
-        "Vertical presentation stacks grouping data and ordering, with an explicit No grouping choice and no Clear footer."
-      ],
-      "responsiveBehavior": [
-        "Use in the trailing region of ds-table-toolbar.",
-        "The trigger uses the shared caption-control button behavior and becomes icon-only in compact named table containers.",
-        "Both panes remain present and their choice lists scroll within the collision-constrained popup."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Assign options and grouping as JavaScript properties and replace grouping from dsGroupChange or dsClear."
-        ],
-        "react": [
-          "Keep grouping in application state and replace it from dsGroupChange; set it to null from dsClear."
-        ],
-        "angular": [
-          "Import the generated DsTableGroup adapter and bind options and grouping as properties."
-        ]
-      },
-      "references": [
-        {
-          "label": "Review states",
-          "path": "src/wc/components/TableGroup/TableGroup.stories.ts"
-        },
-        {
-          "label": "Toolbar composition owner",
-          "path": "src/wc/components/TableToolbar/TableToolbar.agent.json"
-        },
-        {
-          "label": "Surface ownership and trigger state",
-          "path": "src/docs/SurfaceOwnership.mdx"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "ariaLabel": {
-          "type": "string | null",
-          "resolvedType": "null | string",
-          "attribute": "aria-label",
-          "default": "null",
-          "required": false,
-          "mutable": false,
-          "description": "Accessible name for the trigger and non-modal dialog."
-        },
-        "clearLabel": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "clear-label",
-          "default": "'Clear'",
-          "required": false,
-          "mutable": false,
-          "description": "Clear action label."
-        },
-        "embedded": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "embedded",
-          "default": "false",
-          "required": false,
-          "mutable": false
-        },
-        "emptyMessage": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "empty-message",
-          "default": "'Select a group to choose its order.'",
-          "required": false,
-          "mutable": false,
-          "description": "Empty message kept in the order pane until a grouping data point is selected."
-        },
-        "grouping": {
-          "type": "TableGroupingState | null",
-          "resolvedType": "TableGroupingState | null",
-          "default": "null",
-          "required": false,
-          "mutable": false,
-          "description": "Controlled grouping field and the order of its group sections."
-        },
-        "hasBorder": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "has-border",
-          "default": "true",
-          "required": false,
-          "mutable": false,
-          "description": "Show the trigger border."
-        },
-        "open": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "open",
-          "default": "false",
-          "required": false,
-          "mutable": true,
-          "description": "Controlled popup visibility."
-        },
-        "options": {
-          "type": "TableGroupOption[]",
-          "resolvedType": "TableGroupOption[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false
-        },
-        "vertical": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "vertical",
-          "default": "false",
-          "required": false,
-          "mutable": false
-        }
-      },
-      "events": [
-        {
-          "name": "dsClear",
-          "detail": "void",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "description": "Requests removal of the controlled grouping state."
-        },
-        {
-          "name": "dsGroupChange",
-          "detail": "TableGroupingState",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "description": "Requests replacement of the complete controlled grouping state."
-        },
-        {
-          "name": "dsOpenChange",
-          "detail": "boolean",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "description": "Reports controlled popup visibility changes."
-        }
-      ],
-      "methods": [],
-      "slots": []
-    },
-    "props": {
-      "ariaLabel": {
-        "type": "string | null",
-        "resolvedType": "null | string",
-        "attribute": "aria-label",
-        "default": "null",
-        "required": false,
-        "mutable": false,
-        "description": "Accessible name for the trigger and non-modal dialog."
-      },
-      "clearLabel": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "clear-label",
-        "default": "'Clear'",
-        "required": false,
-        "mutable": false,
-        "description": "Clear action label."
-      },
-      "embedded": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "embedded",
-        "default": "false",
-        "required": false,
-        "mutable": false
-      },
-      "emptyMessage": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "empty-message",
-        "default": "'Select a group to choose its order.'",
-        "required": false,
-        "mutable": false,
-        "description": "Empty message kept in the order pane until a grouping data point is selected."
-      },
-      "grouping": {
-        "type": "TableGroupingState | null",
-        "resolvedType": "TableGroupingState | null",
-        "default": "null",
-        "required": false,
-        "mutable": false,
-        "description": "Controlled grouping field and the order of its group sections."
-      },
-      "hasBorder": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "has-border",
-        "default": "true",
-        "required": false,
-        "mutable": false,
-        "description": "Show the trigger border."
-      },
-      "open": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "open",
-        "default": "false",
-        "required": false,
-        "mutable": true,
-        "description": "Controlled popup visibility."
-      },
-      "options": {
-        "type": "TableGroupOption[]",
-        "resolvedType": "TableGroupOption[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false
-      },
-      "vertical": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "vertical",
-        "default": "false",
-        "required": false,
-        "mutable": false
-      }
-    },
-    "events": [
-      {
-        "name": "dsClear",
-        "detail": "void",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "description": "Requests removal of the controlled grouping state."
-      },
-      {
-        "name": "dsGroupChange",
-        "detail": "TableGroupingState",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "description": "Requests replacement of the complete controlled grouping state."
-      },
-      {
-        "name": "dsOpenChange",
-        "detail": "boolean",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "description": "Reports controlled popup visibility changes."
-      }
-    ],
-    "methods": [],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-table-group",
-      "react": "DsTableGroup",
-      "vue": "DsTableGroup",
-      "angular": "DsTableGroup"
-    },
-    "consumption": {
-      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
-      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
-      "customElements": {
-        "import": "import '@ds-mo/ui/dist/components/ds-table-group.js';",
-        "example": "<ds-table-group></ds-table-group>"
-      },
-      "react": {
-        "import": "import { DsTableGroup } from '@ds-mo/ui/react';",
-        "example": "<DsTableGroup />"
-      },
-      "vue": {
-        "import": "import { DsTableGroup } from '@ds-mo/ui/vue';",
-        "example": "<DsTableGroup />"
-      },
-      "angular": {
-        "import": "import { DsTableGroup } from '@ds-mo/ui/angular/ds-table-group';",
-        "example": "<ds-table-group></ds-table-group>"
-      },
-      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: grouping, options.",
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
-        ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
-      }
-    }
-  },
-  "dependencies": [
-    "@ds-mo/ui",
-    "@ds-mo/tokens"
-  ],
-  "registryDependencies": [
-    "button-unfilled",
-    "empty-state",
-    "input",
-    "text"
-  ],
-  "files": [
-    {
-      "path": "src/wc/components/TableGroup/TableGroup.css",
-      "content": "@import '../../utils/radius.css';\n@import '../../utils/choice-list.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/table-caption-control.css';\n\n:host {\n  display: inline-flex;\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.table-group__body {\n  display: grid;\n  grid-template-columns: var(--dimension-menu-width-xs) var(--dimension-menu-width-sm);\n  min-height: calc(var(--dimension-size-800) * 4 + var(--dimension-space-150));\n  max-height: calc(100vh - var(--dimension-size-800) - var(--dimension-size-600));\n}\n\n.table-group__data-pane,\n.table-group__order-pane {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n}\n\n.table-group__data-pane {\n  border-inline-end: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.table-group__list {\n  flex: 1 1 auto;\n}\n\n.table-group__empty {\n  flex: 1 1 auto;\n}\n\n.table-group__footer {\n  flex: 0 0 auto;\n}\n\n.table-group__footer .ds-choice-footer__content {\n  justify-content: flex-start;\n}\n\n.table-group__footer[aria-hidden='true']::before {\n  visibility: hidden;\n}\n\n.table-group__footer[aria-hidden='true'] .ds-choice-footer__content {\n  visibility: hidden;\n}\n\n@media (forced-colors: active) {\n  .table-group__data-pane {\n    border-inline-end-color: var(--ds-forced-color-content);\n  }\n}\n\n.table-preferences-embedded {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  color: var(--color-foreground-secondary);\n}\n\n:host:has(.table-preferences-embedded) {\n  display: block;\n  max-inline-size: none;\n}\n.table-preferences-embedded .table-group__body {\n  grid-template-columns: min(var(--dimension-menu-width-xs), 40%) minmax(0, 1fr);\n}\n\n:host(.table-group-vertical) .table-group__body {\n  grid-template-columns: minmax(0, 1fr);\n}\n:host(.table-group-vertical) .table-group__data-pane {\n  border-inline-end: 0;\n}\n\n:host(.table-group-vertical) .table-group__footer {\n  display: none;\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/TableGroup/TableGroup.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  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { ChoiceListSection, ChoiceOptionRow } from '../../utils/choice-list-parts';\nimport type { TableGroupingState, TableSortDirection } from '../Table/table-types';\n\nexport interface TableGroupOrderOption {\n  label: string;\n  direction: TableSortDirection;\n  /** Optional application-owned data point used to order the group sections. */\n  orderBy?: string;\n}\n\nexport interface TableGroupOption {\n  label: string;\n  value: string;\n  description?: string;\n  isInactive?: boolean;\n  /** Product-owned order choices for this grouping data point. */\n  orderOptions?: TableGroupOrderOption[];\n}\n\nconst DEFAULT_ORDER_OPTIONS: TableGroupOrderOption[] = [\n  { label: 'Ascending', direction: 'asc' },\n  { label: 'Descending', direction: 'desc' },\n];\n\nlet tableGroupSeq = 0;\n\n@Component({\n  tag: 'ds-table-group',\n  styleUrl: 'TableGroup.css',\n  scoped: true,\n})\nexport class TableGroup {\n  @Element() private el!: HTMLElement;\n\n  /** Product-owned data points that may group the table. */\n  /** Render content inside a parent-owned surface; the parent owns dismissal and positioning. */\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  @Prop() vertical: boolean = false;\n  @Prop() embedded: boolean = false;\n  @Prop() options: TableGroupOption[] = [];\n  /** Controlled grouping field and the order of its group sections. */\n  @Prop() grouping: TableGroupingState | null = null;\n  /** Accessible name for the trigger and non-modal dialog. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true }) open = false;\n  /** Empty message kept in the order pane until a grouping data point is selected. */\n  @Prop() emptyMessage = 'Select a group to choose its order.';\n  /** Clear action label. */\n  @Prop() clearLabel = 'Clear';\n\n  /** Requests replacement of the complete controlled grouping state. */\n  @Event() dsGroupChange!: EventEmitter<TableGroupingState>;\n  /** Requests removal of the controlled grouping state. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Reports controlled popup visibility changes. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n\n  @State() private shouldRender = false;\n  @State() private closing = false;\n  @State() private positionReady = false;\n  @State() private pos = { x: 0, y: 0 };\n  @State() private focusRingVisible = false;\n\n  private readonly componentId = `ds-table-group-${++tableGroupSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly popupId = `${this.componentId}-popup`;\n  private triggerElement: HTMLElement | null = null;\n  private pendingInitialFocusVisible = false;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.triggerElement,\n    getPopup: () => this.el.querySelector<HTMLElement>('.table-group-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchor, popup) => {\n      if (!this.open) return null;\n      const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n      return {\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n        side: 'bottom',\n        align: 'end',\n        sideOffsetPx: resolveCssLengthPx(TOKEN_CSS_LENGTHS.space050, TOKEN_DEFAULTS.space050),\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: 'end',\n          alignOffsetPx: 0,\n          sectionInsetPx,\n        }),\n        viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\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  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.triggerElement,\n    getPopup: () => this.el.querySelector<HTMLElement>('.table-group-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.close(),\n  });\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) clearTimeout(this.closeTimer);\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (this.embedded) return;\n    if (isOpen) {\n      this.teardown();\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.focusRingVisible = this.pendingInitialFocusVisible;\n      this.interaction.connect();\n      this.position.observe();\n      this.position.schedule(() => this.focusInitialDataPoint());\n      return;\n    }\n    if (!this.shouldRender) return;\n    this.position.cancel();\n    this.closing = true;\n    this.interaction.disconnect();\n    this.position.unobserve();\n    const duration = resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort2,\n      TOKEN_DEFAULTS.animationDurationShort3\n    );\n    if (duration <= 0) this.finishClose();\n    else this.closeTimer = setTimeout(() => this.finishClose(), duration);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.embedded && (event.key === 'Escape' || event.key === 'Tab')) return;\n    if ((!this.shouldRender && !this.embedded) || this.closing) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      return;\n    }\n    if (event.key !== 'Tab' || !this.interaction.tabLeavesPopup(event)) return;\n    event.preventDefault();\n    this.close(false);\n    this.interaction.moveFocusAfterTab(event.shiftKey);\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 teardown() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private toggle(fromKeyboard = false) {\n    if (this.open) {\n      this.close();\n      return;\n    }\n    this.pendingInitialFocusVisible = fromKeyboard;\n    this.open = true;\n    this.dsOpenChange.emit(true);\n    this.onOpenChange(true);\n  }\n\n  private close(restoreFocus = true) {\n    if (restoreFocus) this.interaction.focusAnchor();\n    this.open = false;\n    this.dsOpenChange.emit(false);\n    this.onOpenChange(false);\n  }\n\n  private finishClose() {\n    const popup = this.el.querySelector<HTMLElement>('.table-group-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.closeTimer = null;\n  }\n\n  private focusInitialDataPoint() {\n    requestAnimationFrame(() => {\n      const selected = this.grouping\n        ? this.el.querySelector<HTMLElement>(\n            `[data-group-value=\"${CSS.escape(this.grouping.columnId)}\"] [role=\"option\"]`\n          )\n        : null;\n      const initial =\n        selected ??\n        this.el.querySelector<HTMLElement>(\n          '[data-group-value] [role=\"option\"]:not([aria-disabled=\"true\"])'\n        );\n      initial?.focus();\n      this.pendingInitialFocusVisible = false;\n    });\n  }\n\n  private selectData(option: TableGroupOption) {\n    if (option.value === '__none__') {\n      this.dsClear.emit();\n      return;\n    }\n    if (option.isInactive) return;\n    if (this.grouping?.columnId === option.value) {\n      this.dsGroupChange.emit({ ...this.grouping });\n      return;\n    }\n    const initialOrder = option.orderOptions?.[0];\n    this.dsGroupChange.emit({\n      columnId: option.value,\n      direction: initialOrder?.direction ?? 'asc',\n      ...(initialOrder?.orderBy ? { orderBy: initialOrder.orderBy } : {}),\n    });\n  }\n\n  private get activeOrderOptions(): TableGroupOrderOption[] {\n    const configured = this.options.find(\n      option => option.value === this.grouping?.columnId\n    )?.orderOptions;\n    return configured?.length ? configured : DEFAULT_ORDER_OPTIONS;\n  }\n\n  private get selectedOrderIndex(): number {\n    if (!this.grouping) return -1;\n    const exact = this.activeOrderOptions.findIndex(\n      option =>\n        option.direction === this.grouping?.direction && option.orderBy === this.grouping?.orderBy\n    );\n    if (exact >= 0) return exact;\n    if (this.grouping.orderBy === undefined) {\n      return this.activeOrderOptions.findIndex(\n        option => option.direction === this.grouping?.direction\n      );\n    }\n    return -1;\n  }\n\n  private selectOrder(option: TableGroupOrderOption, index: number) {\n    if (!this.grouping || this.selectedOrderIndex === index) return;\n    const grouping: TableGroupingState = {\n      columnId: this.grouping.columnId,\n      direction: option.direction,\n    };\n    if (option.orderBy) grouping.orderBy = option.orderBy;\n    this.dsGroupChange.emit(grouping);\n  }\n\n  private moveFocus(\n    event: KeyboardEvent,\n    selector: string,\n    currentIndex: number,\n    oppositeSelector?: string\n  ) {\n    if (oppositeSelector && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {\n      event.preventDefault();\n      this.focusRingVisible = true;\n      this.el.querySelector<HTMLElement>(oppositeSelector)?.focus();\n      return;\n    }\n    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n    event.preventDefault();\n    const items = Array.from(this.el.querySelectorAll<HTMLElement>(selector)).filter(\n      item => item.getAttribute('aria-disabled') !== 'true'\n    );\n    if (!items.length) return;\n    let next: number;\n    if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = items.length - 1;\n    else next = (currentIndex + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;\n    this.focusRingVisible = true;\n    items[next]?.focus();\n  }\n\n  private renderDataOption(option: TableGroupOption, index: number) {\n    const selected =\n      option.value === '__none__' ? !this.grouping : option.value === this.grouping?.columnId;\n    return (\n      <ChoiceOptionRow\n        id={`${this.componentId}-data-${index}`}\n        option={{ ...option }}\n        selected={selected}\n        active={selected}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={Boolean(option.description)}\n        tabIndex={selected || (!this.grouping && index === 0) ? 0 : -1}\n        onHover={() => {\n          this.focusRingVisible = false;\n        }}\n        onSelect={() => this.selectData(option)}\n        onKeyDown={(event: KeyboardEvent) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.selectData(option);\n            return;\n          }\n          this.moveFocus(\n            event,\n            '[data-group-value] [role=\"option\"]',\n            this.options\n              .filter(candidate => !candidate.isInactive)\n              .findIndex(candidate => candidate.value === option.value),\n            this.grouping\n              ? `[data-group-order-index=\"${this.selectedOrderIndex}\"] [role=\"option\"]`\n              : undefined\n          );\n        }}\n      />\n    );\n  }\n\n  private renderOrder(option: TableGroupOrderOption, index: number) {\n    const selected = index === this.selectedOrderIndex;\n    return (\n      <ChoiceOptionRow\n        id={`${this.componentId}-order-${index}`}\n        option={{ label: option.label, value: String(index) }}\n        selected={selected}\n        active={selected}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={false}\n        tabIndex={selected ? 0 : -1}\n        onHover={() => {\n          this.focusRingVisible = false;\n        }}\n        onSelect={() => this.selectOrder(option, index)}\n        onKeyDown={(event: KeyboardEvent) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.selectOrder(option, index);\n            return;\n          }\n          this.moveFocus(\n            event,\n            '[data-group-order-index] [role=\"option\"]',\n            index,\n            `[data-group-value=\"${CSS.escape(this.grouping?.columnId ?? '')}\"] [role=\"option\"]`\n          );\n        }}\n      />\n    );\n  }\n\n  render() {\n    const name = this.ariaLabel?.trim() || 'Group table';\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    return (\n      <Host\n        class={{ 'table-group-vertical': this.vertical }}\n        hidden={this.options.length === 0 ? true : undefined}\n      >\n        {this.options.length && !this.embedded ? (\n          <ds-button-unfilled\n            hasBorder={this.hasBorder}\n            ref={element => {\n              this.triggerElement = (element as HTMLElement) ?? null;\n            }}\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"SectionList\"\n            label=\"Group\"\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label={name}\n            haspopup=\"dialog\"\n            collapseLabel={true}\n            expanded={this.open}\n            surfaceOpen={this.open || this.closing}\n            controls={this.popupId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => this.toggle(event.detail.detail === 0)}\n          />\n        ) : null}\n\n        {this.shouldRender || this.embedded ? (\n          <div\n            id={this.popupId}\n            popover={this.embedded ? undefined : 'manual'}\n            class={{\n              'table-group-popup': true,\n              'ds-choice-popup': !this.embedded,\n              'table-preferences-embedded': this.embedded,\n              'ds-choice-popup--closing': this.closing,\n            }}\n            style={this.embedded ? undefined : popupStyle}\n            role=\"dialog\"\n            aria-label={name}\n          >\n            <div class=\"table-group__body\">\n              <div class=\"table-group__data-pane\">\n                <ChoiceListSection\n                  heading=\"Data\"\n                  ariaLabel=\"Group data\"\n                  className=\"table-group__list\"\n                >\n                  {this.vertical &&\n                    this.renderDataOption({ label: 'No grouping', value: '__none__' }, -1)}\n                  {this.options.map((option, index) => (\n                    <div data-group-value={option.value}>\n                      {this.renderDataOption(option, index)}\n                    </div>\n                  ))}\n                </ChoiceListSection>\n                <div\n                  hidden={this.vertical}\n                  class=\"table-group__footer ds-choice-footer\"\n                  aria-hidden={!this.grouping ? 'true' : undefined}\n                >\n                  <div class=\"ds-choice-footer__content ds-control--md\">\n                    {this.grouping ? (\n                      <button\n                        class=\"ds-choice-footer__clear ds-text-action ds-focus-ring\"\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                    ) : null}\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"table-group__order-pane\">\n                {this.grouping ? (\n                  <ChoiceListSection\n                    heading=\"Order\"\n                    ariaLabel=\"Group order\"\n                    className=\"table-group__list\"\n                  >\n                    {this.activeOrderOptions.map((option, index) => (\n                      <div data-group-order-index={index}>{this.renderOrder(option, index)}</div>\n                    ))}\n                  </ChoiceListSection>\n                ) : (\n                  <div class=\"table-group__empty ds-choice-empty ds-empty-region\">\n                    <ds-empty-state body={this.emptyMessage} />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}