@ds-mo/ui 15.10.2 → 15.11.0

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

@@ -0,0 +1 @@
+{"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","accessibleLabel","find","candidate","resolvedHeaders","activateTool","closeDrawer","CSS","escape","setFocus","bounded","renderRailAction","focusKey","ariaLabel","h","side","size","boundary","variant","class","isActive","activeFill","hasBorder","background","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","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: 'AIAsterisk',\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: 'QuestionCircle',\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\n    var(--_shell-tools-border, var(--color-border-tertiary));\n  --_panel-tools-divider-color: var(--_shell-tools-divider, var(--color-divider-divider));\n  --_panel-tools-divider: var(--dimension-stroke-width-012, 1px) solid\n    var(--_panel-tools-divider-color);\n  --_panel-tools-fg-secondary: var(--_shell-tools-fg-secondary, var(--color-foreground-secondary));\n  --_panel-tools-shortcut-fg-secondary: var(\n    --_shell-tools-fg-secondary,\n    var(--color-chrome-foreground-secondary)\n  );\n  --_panel-tools-shortcut-border: var(\n    --_shell-tools-border-secondary,\n    var(--color-chrome-border-secondary)\n  );\n  --_panel-tools-shortcut-dot-ring: var(\n    --_shell-tools-background-theme,\n    var(--color-chrome-background-theme)\n  );\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 calc(var(--dimension-size-base) * 25);\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(--_panel-tools-fg-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(--_panel-tools-fg-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-divider);\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(--_panel-tools-shortcut-fg-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(--_panel-tools-shortcut-border);\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  --_divider-color: var(--_panel-tools-divider-color);\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 accessibleLabel(): 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          background=\"chrome\"\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 ds-interaction-fill--on-chrome\"\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(--_panel-tools-shortcut-dot-ring)\"\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 accessibleLabel = this.accessibleLabel();\n    const header = this.activeHeader();\n    const headerTitle = header.title?.trim() || accessibleLabel;\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":"wYAYO,MAAMA,EAAoD,CAC/D,SACA,WACA,WACA,SACA,SACA,QAIK,MAAMC,EAAyD,SAK/D,MAAMC,EAAgE,CAC3EC,OAAQ,SACRC,SAAU,WACVC,OAAQ,SACRC,SAAU,WACVC,OAAQ,SACRC,KAAM,kBAGD,MAAMC,EAA4E,CACvFN,OAAQ,IACRI,OAAQ,IACRH,SAAU,IACVC,OAAQ,IACRC,SAAU,IACVE,KAAM,KA4GD,MAAME,EAA8C,CACzD,CACEC,GAAI,SACJC,KAAM,aACNC,MAAOX,EAAmBK,OAC1BO,cAAe,SACfC,MAAO,EACPC,YAAaP,EAAsBF,OACnCU,kBAAmB,UAErB,CACEN,GAAI,WACJC,KAAM,qBACNC,MAAOX,EAAmBE,SAC1BW,MAAO,EACPC,YAAaP,EAAsBL,SACnCa,kBAAmB,YAErB,CACEN,GAAI,WACJC,KAAM,OACNC,MAAOX,EAAmBI,SAC1BS,MAAO,EACPC,YAAaP,EAAsBH,SACnCW,kBAAmB,YAErB,CACEN,GAAI,SACJC,KAAM,kBACNC,MAAOX,EAAmBC,OAC1BY,MAAO,EACPC,YAAaP,EAAsBN,OACnCc,kBAAmB,UAErB,CACEN,GAAI,OACJC,KAAM,iBACNC,MAAOX,EAAmBM,KAC1BM,cAAe,SACfC,MAAO,EACPC,YAAaP,EAAsBD,KACnCS,kBAAmB,SCpLvB,MAAMC,EAAoE,CACxEC,OAAQ,EACRC,KAAM,EACNC,OAAQ,GAGV,SAASC,EAAoBC,GAC3B,MAAMC,EAAYxB,EAAqByB,WAAUd,GAAMA,IAAOY,EAAKZ,KACnE,OAAOY,EAAKR,QAAUS,EAAY,EAAIE,OAAOC,iBAAmBH,EAClE,CAEM,SAAUI,EAAqBC,GACnC,MAAMC,EAAY,IAAIC,IACtB,IAAK,MAAMR,KAAQM,EAAO,CACxB,GAAIN,EAAKZ,GAAGqB,SAAWF,EAAUG,IAAIV,EAAKZ,IAAKmB,EAAUI,IAAIX,EAAKZ,GAAIY,E,CAExE,OAAOY,MAAMC,KAAKN,EAAUO,UAAUC,MAAK,CAACC,EAAMC,KAChD,MAAMC,EAAaC,EAAwBH,GAC3C,MAAMI,EAAcD,EAAwBF,GAC5C,MAAMI,EACJ1B,EAAyBuB,GAAcvB,EAAyByB,GAClE,GAAIC,IAAgB,EAAG,OAAOA,EAE9B,OAAOtB,EAAoBiB,GAAQjB,EAAoBkB,EAAM,GAEjE,CAOM,SAAUK,EACdhB,EACAiB,GAEA,MAAMC,EAAqCnB,EAAqBC,GAAOmB,KAAIzB,IAAI,CAC7E0B,KAAM,OACNtC,GAAIY,EAAKZ,GACTY,WAEF,MAAM2B,EAAqB,IAAInB,IAC/B,IAAK,MAAMoB,KAAaL,EAAa,CACnC,GAAIK,EAAUxC,GAAGqB,SAAWkB,EAAmBjB,IAAIkB,EAAUxC,IAAK,CAChEuC,EAAmBhB,IAAIiB,EAAUxC,GAAIwC,E,EAGzC,MAAMC,EAA0CjB,MAAMC,KAAKc,EAAmBb,UAAUW,KACtFG,IAAS,CACPF,KAAM,YACNtC,GAAIwC,EAAUxC,GACdwC,gBAIJ,MAAO,IAAIJ,KAAgBK,GAAkBd,MAAK,CAACC,EAAMC,KACvD,MAAMa,EACJd,EAAKU,OAAS,OAASP,EAAwBH,EAAKhB,MAAQgB,EAAKY,UAAUrC,cAC7E,MAAMwC,EACJd,EAAMS,OAAS,OAASP,EAAwBF,EAAMjB,MAAQiB,EAAMW,UAAUrC,cAChF,MAAM8B,EACJ1B,EAAyBmC,GAAiBnC,EAAyBoC,GACrE,GAAIV,IAAgB,EAAG,OAAOA,EAE9B,MAAMW,EAAYhB,EAAKU,OAAS,OAAS3B,EAAoBiB,EAAKhB,MAAQgB,EAAKY,UAAUpC,MACzF,MAAMyC,EACJhB,EAAMS,OAAS,OAAS3B,EAAoBkB,EAAMjB,MAAQiB,EAAMW,UAAUpC,MAC5E,OAAOwC,EAAYC,CAAU,GAEjC,CAGM,SAAUC,EAAwBC,GACtC,OAAOA,EAAQC,SAAQC,IACrB,GAAIA,EAAMX,OAAS,OAAQ,MAAO,CAAC,QAAQW,EAAMjD,MACjD,GAAIiD,EAAMT,UAAUF,OAAS,UAAW,MAAO,GAC/C,GAAIW,EAAMT,UAAUF,OAAS,WAAY,CACvC,OAAOW,EAAMT,UAAUU,OAAOC,WAC1B,GACA,CAAC,aAAaF,EAAMjD,MAAMiD,EAAMT,UAAUU,OAAOlD,K,CAEvD,MAAMoD,EAAOH,EAAMT,UAAUa,cAAcF,WACvC,GACA,CAAC,aAAaF,EAAMjD,MAAMiD,EAAMT,UAAUa,cAAcrD,MAC5D,GAAIiD,EAAMT,UAAUc,kBAAoBL,EAAMT,UAAUc,gBAAgBH,WAAY,CAClFC,EAAKG,KAAK,aAAaN,EAAMjD,MAAMiD,EAAMT,UAAUc,gBAAgBtD,K,CAErE,OAAOoD,CAAI,GAEf,C,SAGgBI,EACdC,EACAC,EACAC,GAEA,IAAKD,EAASE,OAAQ,OAAO,EAC7B,MAAMC,EAAaJ,EAAaE,GAChC,MAAMG,EAAiBD,EAAaH,EAASK,QAAQF,IAAc,EACnE,GAAIC,GAAkB,EAAG,OAAOA,EAChC,IAAK,IAAIE,EAAQL,EAAe,EAAGK,EAAQP,EAAaG,OAAQI,GAAS,EAAG,CAC1E,MAAMC,EAAYP,EAASK,QAAQN,EAAaO,IAChD,GAAIC,GAAa,EAAG,OAAOA,C,CAE7B,IAAK,IAAID,EAAQL,EAAe,EAAGK,GAAS,EAAGA,GAAS,EAAG,CACzD,MAAMC,EAAYP,EAASK,QAAQN,EAAaO,IAChD,GAAIC,GAAa,EAAG,OAAOA,C,CAE7B,OAAOC,KAAKC,IAAID,KAAKE,IAAIT,EAAc,GAAID,EAASE,OAAS,EAC/D,C,SAEgBS,EACdC,EACAC,EACAC,GAEA,MAAO,CAAEF,cAAaC,WAAUC,SAClC,CAEM,SAAUC,EAAmBC,GACjC,cAAcA,IAAU,UAAYA,EAAMrD,OAAOuC,OAAS,CAC5D,CAEM,SAAU7B,EAAwBnB,GACtC,GAAIA,EAAKT,cAAe,OAAOS,EAAKT,cACpC,GAAIS,EAAKZ,KAAOV,EAA6B,MAAO,SACpD,GAAIsB,EAAKZ,KAAO,OAAQ,MAAO,SAC/B,MAAO,MACT,C,SAEgB2E,EACdzD,EACA0D,EACAC,GAEA,IAAKA,GAAc3D,EAAM4D,MAAKlE,GAAQA,EAAKZ,KAAO6E,IAAa,CAC7D,MAAO,CAAED,OAAMC,aAAYE,YAAa,G,CAE1C,MAAO,CAAEH,KAAM,MAAOC,WAAY,GAAIE,YAAaF,EACrD,CAmCM,SAAUG,EAA6BC,GAC3C,MAAMC,EAAaD,EAAME,mBAAmBC,MAAM,KAAK/C,KAAIzB,GAAQA,EAAKS,SACxE,MAAMgE,EAAYJ,EAAMK,mBAAmBF,MAAM,KAAK/C,KAAIzB,GAAQ2E,EAAe3E,EAAKS,OAAQ,KAC9F,MAAMmE,EAASP,EAAMQ,gBAAgBL,MAAM,KAAK/C,KAAIzB,GAAQ2E,EAAe3E,EAAKS,OAAQ,KAExF,OAAO6D,EAAWQ,QAAO,CAACtB,EAAKuB,EAAU3B,KACvC,GAAI2B,IAAa,OAASA,IAAa,YAAa,OAAOvB,EAC3D,MAAMwB,EAAWP,EAAUrB,EAAQqB,EAAUzB,SAAW,EACxD,MAAMiC,EAAQL,EAAOxB,EAAQwB,EAAO5B,SAAW,EAC/C,OAAOM,KAAKE,IAAIA,EAAKwB,EAAWC,EAAO,EAAE,GACxC,EACL,CAGM,SAAUC,EAAwBlB,EAAemB,GACrD,OAAQnB,GAAQmB,IAAW,MAC7B,C,SAGgBC,EACdC,EACAC,EACAH,GAEA,GAAIA,IAAW,UAAW,OAAOE,GAAS,GAC1C,GAAIF,IAAW,UAAW,OAAOG,EAAc,GAAKD,GAASC,EAAc,GAC3E,OAAO,IACT,C,SAGgBC,EACdvB,EACAC,EACA7E,GAEA,GAAI4E,GAAQC,IAAe7E,EAAI,CAC7B,MAAO,CAAE4E,KAAM,MAAOC,WAAY7E,EAAIoG,SAAU,M,CAElD,MAAO,CAAExB,KAAM,KAAMC,WAAY7E,EAAIoG,SAAU,KACjD,CCjOA,MAAMC,EAAgB,IAAM,0zrB,MCmDfC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,6bAS0CC,KAAA/B,KAAgB,MAGhB+B,KAAAC,aAAwC,SAIhFD,KAAAE,qBAA2C,SAI3CF,KAAA9B,WAAoC,GAM5B8B,KAAAzF,MAA0B,GAM1ByF,KAAAxE,YAAyC,GAEzCwE,KAAAG,WAAqB,QACrBH,KAAAI,mBAA6B,iBAG7BJ,KAAAK,QAA6B,GAMDL,KAAAM,WAAqB,GAkCxCN,KAAAZ,OAAyC,OAGzCY,KAAAO,sBAAwB,MAGxBP,KAAAQ,eAAiB,MAGjBR,KAAAS,6BAA+B,MAE/BT,KAAAU,YAAc,EACdV,KAAAW,gBAAsC,GACtCX,KAAAY,mBAAqB,MAE9BZ,KAAAa,uBAAyB,EACzBb,KAAAc,6BAA+B,EAC/Bd,KAAAe,qBAAuB,EACvBf,KAAAgB,wBAAyC,KAEzChB,KAAAiB,0BAA4B,MAC5BjB,KAAAkB,sBAA4C,KAC5ClB,KAAAmB,iBAA4C,KAkG5CnB,KAAAoB,2BAA8BC,IACpC,MAAMC,EAAUD,EAA6DC,OAC7E,IAAKtB,KAAK9B,aAAeoD,GAAQjI,GAAI,OACrCgI,EAAME,kBACNvB,KAAKwB,eAAeC,KAAK,CACvBC,KAAM1B,KAAK9B,WACX7E,GAAIiI,EAAOjI,GACXwE,OAAQyD,EAAOzD,QACf,EAuKImC,KAAA2B,oBAAuBN,IAC7B,MAAMO,EAAS5B,KAAK6B,WAAWC,cAAc,wBAC7C,GAAIT,EAAMU,SAAWH,EAAQ,OAC7B,GAAIP,EAAMW,eAAiB,YAAa,OACxC,GAAIhC,KAAKiB,0BAA2B,CAClCjB,KAAKiB,0BAA4B,MACjC,M,CAMF,GAAII,EAAM1F,OAAS,mBAAoB,OACvC,GAAIiG,IAAW5B,KAAKiC,2BAA2BL,EAAQ5B,KAAKZ,QAAS,OACrEY,KAAKkC,wBAAwB,EAiFvBlC,KAAAmC,iBAAoB9I,IAC1B,MAAM+I,EAAO5C,EAA2BQ,KAAK/B,KAAM+B,KAAK9B,WAAY7E,GACpE2G,KAAK/B,KAAOmE,EAAKnE,KACjB+B,KAAK9B,WAAakE,EAAKlE,WACvB8B,KAAKqC,aAAaZ,KAAK,CAAEpI,KAAIoG,SAAU2C,EAAK3C,UAAW,EA8CjDO,KAAAsC,kBAAoB,CAACC,EAAkBlF,EAAemF,KAC5D,MAAM/F,EAAON,EAAwB6D,KAAKyC,oBAC1C,IAAKhG,EAAKQ,OAAQ,OAElB,IAAKsF,EAAEG,MAAQ,SAAWH,EAAEG,MAAQ,MAAQF,EAAU,CACpDD,EAAEI,iBACFH,IACA,M,CAGF,GAAID,EAAEG,MAAQ,YAAa,CACzB,GAAIrF,GAASZ,EAAKQ,OAAS,EAAG,OAC9BsF,EAAEI,iBACF3C,KAAK4C,YAAYvF,EAAQ,GACzB,M,CAGF,GAAIkF,EAAEG,MAAQ,UAAW,CACvB,GAAIrF,GAAS,EAAG,OAChBkF,EAAEI,iBACF3C,KAAK4C,YAAYvF,EAAQ,E,EAoa9B,CAt1BC,aAAYwF,GACV,OAAO7C,KAAKzF,OAAS,E,CAGvB,oBAAYuI,GACV,OAAOxI,EAAqB0F,KAAK6C,U,CAGnC,mBAAYE,GACV,OAAO/C,KAAKxE,aAAe,E,CAG7B,sBAAYiH,GACV,OAAOlH,EAA2ByE,KAAK6C,UAAW7C,KAAK+C,gB,CAGzD,oBAAAC,GACEhD,KAAKiD,GAAGC,oBAAoB,gBAAiBlD,KAAK2B,qBAClD3B,KAAKiD,GAAGC,oBAAoB,mBAAoBlD,KAAK2B,qBACrD3B,KAAKiD,GAAGC,oBAAoB,WAAYlD,KAAKoB,4BAC7CpB,KAAKmD,4BACLnD,KAAKa,wBAA0B,EAC/Bb,KAAKmB,kBAAkBiC,aACvBpD,KAAKmB,iBAAmB,KACxBnB,KAAKqD,4B,CAIP,mBAAAC,CAAoBlB,EAA+BmB,GACjD,GAAInB,IAASmB,EAAU,OAKvB,GAAIvD,KAAKiD,GAAGO,aAAa,kBAAoBpB,EAAM,CACjDpC,KAAKiD,GAAGQ,aAAa,eAAgBrB,E,CAEvC,MAAMsB,IAA2B1D,KAAKc,6BACtCd,KAAKS,6BAA+B,KACpCkD,uBAAsB,KACpBA,uBAAsB,KACpB,GAAID,IAA2B1D,KAAKc,6BAA8B,OAClEd,KAAKS,6BAA+B,KAAK,GACzC,IAEJ,GAAI2B,IAAS,aAAc,CACzBpC,KAAKkB,sBACH0C,SAASC,yBAAyBhE,EAAc+D,SAASC,cAAgB,KAC3E7D,KAAK/B,KAAO,I,MACP,GAAIsF,IAAa,aAAc,CACpC,MAAMrC,EAAwBlB,KAAKkB,sBACnC,MAAM4C,EAAmB9D,KAAK+D,eAAeC,UAAU,IAAI3K,GAC3DsK,uBAAsBM,UACpB,GAAI/C,GAAuBgD,YAAa,CACtChD,EAAsBiD,MAAM,CAAEC,cAAe,M,CAE/C,MAAMC,EAAgBnD,EAClB0C,SAASC,gBAAkB3C,GAC3BA,EAAsBoD,SAASV,SAASC,eACxC,MACJ,IAAKQ,GAAiBP,QAAwB9D,KAAKuE,kBAAkBT,GACrE9D,KAAKkB,sBAAwB,IAAI,G,CAGrClB,KAAKwE,qBAAqB/C,KAAK,CAAExB,aAAcmC,G,CAIjD,sBAAAqC,CAAuBpD,GACrB,GAAIrB,KAAKC,eAAiB,cAAgBoB,EAAMqB,MAAQ,SAAU,OAClErB,EAAMsB,iBACNtB,EAAME,kBACNvB,KAAKC,aAAe,Q,CAGd,iBAAAyE,GACN,GAAI1E,KAAKQ,eAAgB,OACzB,MAAMmE,IAAe3E,KAAKa,uBAC1B8C,uBAAsB,KACpB,GAAIgB,IAAe3E,KAAKa,uBAAwB,OAChD8C,uBAAsB,KACpB,GAAIgB,IAAe3E,KAAKa,uBAAwB,OAChDb,KAAKQ,eAAiB,IAAI,GAC1B,G,CAIN,iBAAAoE,GACE5E,KAAKiD,GAAGQ,aAAaoB,EAAqC,IAC1D7E,KAAKiD,GAAG6B,iBAAiB,gBAAiB9E,KAAK2B,qBAC/C3B,KAAKiD,GAAG6B,iBAAiB,mBAAoB9E,KAAK2B,qBAClD3B,KAAKiD,GAAG6B,iBAAiB,WAAY9E,KAAKoB,2B,CAc5C,iBAAA2D,GACE/E,KAAKgF,wBACLhF,KAAKO,sBAAwBP,KAAK/B,I,CAIpC,WAAAgH,CAAYC,EAAiBC,GAC3B,GAAID,EAAQlF,KAAKO,sBAAwB,KACzC,GAAIP,KAAKQ,gBAAkB2E,IAAYC,WAAaD,IAAYD,EAAQ,CACtElF,KAAKqF,sBAAsBH,EAAS,UAAY,U,MAC3C,IAAKA,EAAQ,CAClBlF,KAAKO,sBAAwB,K,CAE/BP,KAAK0E,mB,CAIP,iBAAAY,GACEtF,KAAKuF,wBACLvF,KAAK0E,mB,CAIP,iBAAAc,GACExF,KAAKgF,uB,CAGP,gBAAAS,GACEzF,KAAK0E,oBACL1E,KAAK0F,0BACL1F,KAAK2F,2BACL3F,KAAK4F,oBACL5F,KAAKmB,iBAAmB,IAAI0E,kBAAiB,IAAM7F,KAAK4F,sBACxD5F,KAAKmB,iBAAiB2E,QAAQ9F,KAAKiD,GAAI,CACrC8C,UAAW,KACXC,WAAY,KACZC,gBAAiB,CAAC,S,CAItB,kBAAAC,GACElG,KAAK2F,0B,CAGC,uBAAAD,GACN1F,KAAKqD,6BACL,IAAKrD,KAAKmG,mBAAqBC,iBAAmB,YAAa,OAC/DpG,KAAKqG,iBAAmB,IAAID,gBAAe,IAAMpG,KAAK2F,6BACtD3F,KAAKqG,iBAAiBP,QAAQ9F,KAAKmG,W,CAG7B,0BAAA9C,GACNrD,KAAKqG,kBAAkBjD,aACvBpD,KAAKqG,iBAAmBjB,S,CAGlB,wBAAAO,GACN,MAAMvD,EAAOkE,QACXtG,KAAKmG,YAAcnG,KAAKmG,WAAWI,aAAevG,KAAKmG,WAAWK,aAAe,GAEnF,GAAIpE,IAASpC,KAAKY,mBAAoBZ,KAAKY,mBAAqBwB,C,CAIlE,YAAAqE,GACEzG,KAAKU,YAAc,EACnBV,KAAK0G,sBACL1G,KAAK0E,mB,CAIP,kBAAAiC,CACEvE,EAAkC,GAClCmB,EAAsC,IAEtC,MAAMzG,EAAeX,EACnBZ,EAA2ByE,KAAK6C,UAAWU,IAE7C,MAAMxG,EAAWZ,EAAwBZ,EAA2ByE,KAAK6C,UAAWT,IACpF,MAAMyB,EAAiB7D,KAAK6B,WAA0BgC,cACtD,MAAM+C,EACJ/C,GAAegD,QAAqB,0BAA0BC,QAAQC,aACxE,MAAMC,EAAeJ,EAAa9J,EAAaM,QAAQwJ,IAAc,EACrE,MAAM5J,EAAegK,GAAgB,EAAIA,EAAehH,KAAKU,YAC7D,MAAMpD,EAAYT,EAA+BC,EAAcC,EAAUC,GACzE,MAAMiK,EAAeD,GAAgB,IAAMjK,EAASmK,SAASN,GAAc,IAC3E5G,KAAKU,YAAcpD,EACnB,GAAI2J,GAAgBlK,EAASE,OAAQ,CACnC0G,uBAAsB,IAAM3D,KAAK4C,YAAYtF,I,EAIzC,qBAAA0H,GACN,IAAKhF,KAAKM,YAAcN,KAAK9B,WAAY,OACzC,IACE,MAAMiJ,EAASC,aAAaC,QAAQrH,KAAKM,YACzC,GAAIxC,EAAmBqJ,GAASnH,KAAK9B,WAAaiJ,C,CAClD,M,EAKI,qBAAA5B,GACN,IAAKvF,KAAKM,aAAeN,KAAK9B,WAAY,OAC1C,IACEkJ,aAAaE,QAAQtH,KAAKM,WAAYN,KAAK9B,W,CAC3C,M,EAKI,kBAAAqJ,GACN,IAAKvH,KAAKM,WAAY,OACtB,IACE8G,aAAaI,WAAWxH,KAAKM,W,CAC7B,M,EAKI,mBAAAoG,GACN,MAAMtE,EAAOpE,EAAgCgC,KAAK6C,UAAW7C,KAAK/B,KAAM+B,KAAK9B,YAC7E,IAAKkE,EAAKhE,YAAa,OACvB4B,KAAKuH,qBACLvH,KAAK/B,KAAOmE,EAAKnE,KACjB+B,KAAK9B,WAAakE,EAAKlE,WACvB8B,KAAKqC,aAAaZ,KAAK,CAAEpI,GAAI+I,EAAKhE,YAAaqB,SAAU,O,CAGnD,qBAAA4F,CAAsBoC,GAC5B,MAAM7F,EAAS5B,KAAK6B,WAAWC,cAAc,wBAC7C,GAAI9B,KAAKZ,SAAW,OAAQ,CAC1BY,KAAKkC,yBACLlC,KAAKiB,0BAA4B,I,CAEnCjB,KAAKZ,OAASqI,EACdzH,KAAK0H,wBAAwBjG,KAAK,CAAEkG,OAAQ,cAAeF,UAC3D,MAAM9C,IAAe3E,KAAKe,qBAE1B4C,uBAAsB,KACpBA,uBAAsB,KACpB,GAAIgB,IAAe3E,KAAKe,sBAAwBf,KAAKZ,SAAWqI,EAAO,OACvE,IAAK7F,EAAQ,CACX5B,KAAKkC,yBACL,M,CAGF,GAAIlC,KAAKiC,2BAA2BL,EAAQ6F,GAAQ,CAClDzH,KAAKkC,yBACL,M,CAGF,MAAM0F,EAAavJ,EAA6BwJ,iBAAiBjG,IACjE,GAAIgG,GAAc,EAAG,CACnB5H,KAAKkC,yBACL,M,CAEFlC,KAAKgB,wBAA0B8G,OAAOC,YAAW,KAC/C/H,KAAKkC,wBAAwB,GAC5B0F,EAAW,GACd,G,CAqBE,0BAAA3F,CACNL,EACA6F,GAEA,MAAMnI,EAAQsC,EAAOoG,wBAAwB1I,MAC7C,MAAM2I,EAAUrG,EAAOE,cAAc,gCACrC,MAAMvC,EAAc0I,GAASD,wBAAwB1I,OAAS,EAC9D,OAAOD,EAA2BC,EAAOC,EAAakI,E,CAGhD,sBAAAvF,GACN,MAAMgG,EAAiBlI,KAAKZ,OAC5B,MAAM+I,EAAmBD,IAAmB,OAC5ClI,KAAKmD,4BACL,IAAKgF,EAAkB,OACvBnI,KAAKiB,0BAA4B,MACjCjB,KAAKZ,OAAS,OACd,GAAI8I,IAAmB,YAAclI,KAAK/B,KAAM,CAC9C+B,KAAKO,sBAAwB,K,CAE/BP,KAAKoI,sBAAsB3G,KAAK,CAAEkG,OAAQ,e,CAGpC,yBAAAxE,GACNnD,KAAKe,sBAAwB,EAC7B,GAAIf,KAAKgB,0BAA4B,KAAM,CACzC8G,OAAOO,aAAarI,KAAKgB,yBACzBhB,KAAKgB,wBAA0B,I,EAK3B,cAAAsH,CAAejP,GACrB,OAAO2G,KAAK/B,MAAQ+B,KAAK9B,aAAe7E,C,CAIlC,eAAAkP,GACN,OAAOvI,KAAK/B,MAAQ+B,KAAKO,qB,CAGnB,YAAAiI,CAAanP,GACnB,OAAO2G,KAAKuI,mBAAqBvI,KAAK9B,aAAe7E,C,CAG/C,WAAAoP,CAAYpP,GAClB,OAAO2G,KAAKW,gBAAgBuG,SAAS7N,E,CAG/B,iBAAAuM,GACN,MAAM8C,EAAM1I,KAAK8C,iBAAiBpH,KAAIzB,GAAQA,EAAKZ,KACnD,MAAM+I,EAAOsG,EAAIC,QAAOtP,GAAMiN,QAAQtG,KAAKiD,GAAGnB,cAAc,UAAUzI,eACtE,GAAI+I,EAAKwG,KAAK,OAAS5I,KAAKW,gBAAgBiI,KAAK,KAAM5I,KAAKW,gBAAkByB,C,CAGhF,cAAYP,GACV,OAAO7B,KAAKiD,GAAG4F,YAAc7I,KAAKiD,E,CAG5B,eAAA6F,GACN,IAAK9I,KAAKuI,oBAAsBvI,KAAK9B,WAAY,MAAO,GACxD,MAAMjE,EAAO+F,KAAK6C,UAAUkG,MAAKC,GAAaA,EAAU3P,KAAO2G,KAAK9B,aACpE,OACEjE,GAAMV,OACNX,EAAmBoH,KAAK9B,aACxB8B,KAAK9B,U,CAID,eAAA+K,GACN,OAAOjJ,KAAKK,SAAW,E,CAGjB,YAAA0D,GACN,IAAK/D,KAAK9B,WAAY,MAAO,GAC7B,OAAO8B,KAAKiJ,kBAAkBjJ,KAAK9B,aAAe,E,CAYpD,kBAAMgL,CAAa7P,GACjB,MAAMY,EAAO+F,KAAK6C,UAAUkG,MAAKzM,GAASA,EAAMjD,KAAOA,IACvD,IAAKY,GAAQA,EAAKuC,WAAY,OAC9BwD,KAAKmC,iBAAiB9I,E,CAKxB,iBAAM8P,GACJ,IAAKnJ,KAAK/B,KAAM,OAChB,MAAM5E,EAAK2G,KAAK9B,WAChB8B,KAAK/B,KAAO,MACZ,GAAI5E,EAAI,CACN2G,KAAKqC,aAAaZ,KAAK,CAAEpI,KAAIoG,SAAU,O,EAM3C,uBAAM8E,CAAkBlL,GACtB,MAAMkD,EAASyD,KAAK6B,WAAWC,cAAc,2BAA2BsH,IAAIC,OAAOhQ,cAG7EkD,GAAQ+M,a,CAGR,WAAA1G,CAAYvF,GAClB,MAAMZ,EAAON,EAAwB6D,KAAKyC,oBAC1C,IAAKhG,EAAKQ,OAAQ,OAClB,MAAMsM,EAAUhM,KAAKE,IAAI,EAAGF,KAAKC,IAAIH,EAAOZ,EAAKQ,OAAS,IAC1D+C,KAAKU,YAAc6I,EACnB,MAAMhN,EAASyD,KAAK6B,WAAWC,cAC7B,yBAAyBsH,IAAIC,OAAO5M,EAAK8M,SAE3C,GAAIhN,GAAQ+M,SAAU,MACf/M,EAAO+M,U,KACP,CACL/M,GAAQ4H,MAAM,CAAEC,cAAe,M,EA4B3B,gBAAAoF,CAAiBvP,EAAsBoD,GAC7C,MAAMoM,EAAW,QAAQxP,EAAKZ,KAC9B,MAAME,EACJU,EAAKyP,WACLzP,EAAKV,OACLX,EAAmBqB,EAAKZ,KACxBY,EAAKZ,GACP,OACEsQ,EAAA,cACEjH,IAAKzI,EAAKZ,GACVE,MAAOA,EACPG,YACEO,EAAKP,aAAeP,EAAsBc,EAAKZ,IAEjDuQ,KAAK,OACLC,KAAK,KACLC,SAAS,YAETH,EAAA,sBACEI,QAAQ,OACRC,MAAM,2BACN1Q,KAAMW,EAAKX,KACX2Q,SAAUjK,KAAKsI,eAAerO,EAAKZ,IACnC6Q,WAAY,MACZC,UAAW,MACXC,WAAW,SACXC,WAAY,MACZC,IAAKrQ,EAAKqQ,KAAO,MACjB9N,WAAYvC,EAAKuC,WACjB+N,cAAelN,IAAU2C,KAAKU,YAAc,GAAI,EAAE,sBAC7B+I,EAAQ,aACjBlQ,EACZiR,QAASxK,KAAKsI,eAAerO,EAAKZ,IAClCoR,UAAW,KACTzK,KAAKU,YAAcrD,CAAK,EAE1BqN,UAAYnI,GACVvC,KAAKsC,kBAAkBC,EAAGlF,GAAO,IAAM2C,KAAKmC,iBAAiBlI,EAAKZ,MAEpEsR,UAAW,IAAM3K,KAAKmC,iBAAiBlI,EAAKZ,M,CAM5C,qBAAAuR,CAAsB/O,GAC5B,MAAMgP,EAAchP,EAAUa,cAAcgN,WAAWhP,QAAUmB,EAAU6N,UAC3E,MAAMoB,EAASjP,EAAUkP,WAAWrQ,OACpC,OAAOoQ,EAAS,GAAGD,MAAgBC,IAAWD,C,CAGxC,mBAAAG,CACNrN,EACApB,EACAsB,GAEA,GAAItB,EAAOC,WAAY,OACvBwD,KAAKiL,sBAAsBxJ,KACzB/D,EAAoCC,EAAapB,EAAOlD,GAAIwE,G,CAIxD,qBAAAqN,CAAsBrP,GAC5B,GAAIA,EAAUsP,OAAOxP,OAAS,QAAS,CACrC,OACEgO,EAAA,OACEK,MAAM,+BACNoB,IAAKvP,EAAUsP,OAAOC,IACtBC,IAAI,GAAE,cACM,Q,CAIlB,GAAIxP,EAAUsP,OAAOxP,OAAS,UAAW,CACvC,MAAM2P,EAAU,IAAIzP,EAAUsP,OAAOG,QAAQ5Q,QAAQ6Q,MAAM,EAAG,GAAG3C,KAAK,IACtE,OACEe,EAAA,WACEK,MAAM,iCACNwB,GAAG,OACHzB,QAAQ,eACR0B,SAAQ,KACRC,MAAM,UAAS,cACH,QAEXJ,E,CAIP,OAAO3B,EAAA,WAASgC,KAAM9P,EAAUsP,OAAO7R,KAAMuQ,KAAK,KAAI,cAAa,Q,CAG7D,kBAAA+B,CACN/P,EACAgQ,GAEA,MAAMpC,EAAW,aAAa5N,EAAUxC,MAAMwC,EAAUU,OAAOlD,KAC/D,MAAMyS,EAAaD,EAAaE,IAAItC,GACpC,MAAMlQ,EAAQsC,EAAUU,OAAOmN,WAAWhP,QAAUmB,EAAU6N,UAC9D,MAAMsC,EAAW,IAAInQ,EAAUmQ,SAAStR,QAAQ6Q,MAAM,EAAG,GAAG3C,KAAK,IAEjE,OACEe,EAAA,OACEjH,IAAK,aAAa7G,EAAUxC,KAC5B2Q,MAAM,2DAENL,EAAA,cAAYpQ,MAAOA,EAAOqQ,KAAK,OAAOC,KAAK,KAAKC,SAAS,YACvDH,EAAA,UACEhO,KAAK,SACLqO,MAAM,+FACNiC,SAAUpQ,EAAUU,OAAOC,WAC3B0P,SAAUJ,IAAe9L,KAAKU,YAAc,GAAI,EAAE,sBAC7B+I,EAAQ,aACjBlQ,EACZ4S,QAAS,KACP,GAAIL,IAAe1G,UAAWpF,KAAKU,YAAcoL,CAAU,EAE7DpB,UAAYrJ,GACVyK,IAAe1G,UAAYA,UAAYpF,KAAKsC,kBAAkBjB,EAAOyK,GAEvEM,QAAU/K,GACRrB,KAAKgL,oBACHnP,EAAUxC,GACVwC,EAAUU,OACV8E,EAAMgL,gBAIV1C,EAAA,QAAMK,MAAM,8DACVL,EAAA,WACEK,MAAM,4BACNwB,GAAG,OACHzB,QAAQ,eACR0B,SAAQ,KACRC,MAAM,WAELM,GAEFnQ,EAAUyO,IACTX,EAAA,YACEK,MAAM,4BACND,QAAQ,MACRK,WAAW,wCAAuC,cACtC,SAEZ,Q,CAQR,mBAAAkC,CACNzQ,EACAgQ,GAEA,GAAIhQ,EAAUF,OAAS,UAAW,CAChC,OACEgO,EAAA,OACEjH,IAAK,aAAa7G,EAAUxC,KAC5B2Q,MAAM,iCAAgC,cAC1B,QAEZL,EAAA,mB,CAKN,GAAI9N,EAAUF,OAAS,WAAY,CACjC,OAAOqE,KAAK4L,mBAAmB/P,EAAWgQ,E,CAG5C,MAAMU,EAAa,aAAa1Q,EAAUxC,MAAMwC,EAAUa,cAAcrD,KACxE,MAAMmT,EAAeX,EAAaE,IAAIQ,GACtC,MAAME,EAAezM,KAAK4K,sBAAsB/O,GAChD,MAAM6Q,EAAY7Q,EAAUc,gBAC5B,MAAMgQ,EAAeD,EAAY,aAAa7Q,EAAUxC,MAAMqT,EAAUrT,KAAO,GAC/E,MAAMuT,EAAiBF,EAAYb,EAAaE,IAAIY,GAAgBvH,UAEpE,OACEuE,EAAA,OACEjH,IAAK,aAAa7G,EAAUxC,KAC5B2Q,MAAO,CACL,yBAA0B,KAC1B,oCAAqC,KACrC,2CAA4CnO,EAAUgR,aAAe,SACrE,6CAA8ChR,EAAUgR,aAAe,aAGzElD,EAAA,cAAYpQ,MAAOkT,EAAc7C,KAAK,OAAOC,KAAK,KAAKC,SAAS,YAC9DH,EAAA,UACEhO,KAAK,SACLqO,MAAM,sGACNiC,SAAUpQ,EAAUa,cAAcF,WAClC0P,SAAUM,IAAiBxM,KAAKU,YAAc,GAAI,EAAE,sBAC/B6L,EAAU,aACnBE,EACZN,QAAS,KACP,GAAIK,IAAiBpH,UAAWpF,KAAKU,YAAc8L,CAAY,EAEjE9B,UAAYrJ,GACVmL,IAAiBpH,UAAYA,UAAYpF,KAAKsC,kBAAkBjB,EAAOmL,GAEzEJ,QAAU/K,GACRrB,KAAKgL,oBACHnP,EAAUxC,GACVwC,EAAUa,cACV2E,EAAMgL,gBAIV1C,EAAA,QAAMK,MAAM,uEACThK,KAAKkL,sBAAsBrP,MAIjC6Q,EACC/C,EAAA,cAAYpQ,MAAOmT,EAAUhD,UAAWE,KAAK,OAAOC,KAAK,KAAKC,SAAS,YACrEH,EAAA,sBACEK,MAAM,mCACND,QAAQ,OACRF,KAAK,KACLiD,QAAO,KACP1C,WAAW,OACXD,UAAW,MACX7Q,KAAMoT,EAAUpT,KAChBkD,WAAYkQ,EAAUlQ,WACtB+N,cAAeqC,IAAmB5M,KAAKU,YAAc,GAAI,EAAE,sBACtCiM,EAAY,aACrBD,EAAUhD,UACtBe,UAAW,KACT,GAAImC,IAAmBxH,UAAWpF,KAAKU,YAAckM,CAAc,EAErElC,UAAYrJ,GACVuL,IAAmBxH,UACfA,UACApF,KAAKsC,kBAAkBjB,EAAOuL,GAEpCjC,UAAYtJ,GACVrB,KAAKgL,oBACHnP,EAAUxC,GACVqT,EACArL,EAAMgL,kBAKZ,K,CAKF,eAAAU,CAAgBzQ,EAA4BuP,GAClD,GAAIvP,EAAMX,OAAS,OAAQ,CACzB,OAAOqE,KAAKwJ,iBAAiBlN,EAAMrC,KAAM4R,EAAaE,IAAI,QAAQzP,EAAMjD,OAAS,E,CAEnF,OAAO2G,KAAKsM,oBAAoBhQ,EAAMT,UAAWgQ,E,CAGnD,MAAAmB,GACE,MAAMlE,EAAkB9I,KAAK8I,kBAC7B,MAAMjP,EAASmG,KAAK+D,eACpB,MAAMkJ,EAAcpT,EAAOqT,OAAOxS,QAAUoO,EAC5C,MAAMqE,EAAgBtT,EAAOmK,SAAW,GACxC,MAAMlB,EAAmB9C,KAAK8C,iBAC9B,MAAML,EAAqBzC,KAAKyC,mBAChC,MAAM2K,EAAkB9Q,GACtBA,EAAMX,OAAS,OAASP,EAAwBkB,EAAMrC,MAAQqC,EAAMT,UAAUrC,cAChF,MAAM6T,EAAgB5K,EAAmBkG,QAAOrM,GAAS8Q,EAAe9Q,KAAW,WACnF,MAAMgR,EAAc7K,EAAmBkG,QAAOrM,GAAS8Q,EAAe9Q,KAAW,SACjF,MAAMiR,EAAgB9K,EAAmBkG,QAAOrM,GAAS8Q,EAAe9Q,KAAW,WACnF,MAAMuP,EAAe,IAAIpR,IACvB0B,EAAwBsG,GAAoB/G,KAAI,CAACgH,EAAKrF,IAAU,CAACqF,EAAKrF,MAExE,MAAMmQ,EAAmBxN,KAAKuI,kBAC9B,MAAMkF,EAAgBtO,EAAwBa,KAAK/B,KAAM+B,KAAKZ,QAC9D,MAAMsO,EAAiBpH,QACrBkH,GAAoBxN,KAAK9B,YAAc8B,KAAKyI,YAAYzI,KAAK9B,aAE/D,MAAMyP,EAAU7K,EAAiBpH,KAAIzB,GAAQA,EAAKZ,KAElD,OACEsQ,EAACiE,EAAI,CAAAlL,IAAA,2CACHsH,MAAO,CACL,cAAe,KACf,oBAAqBhK,KAAK/B,KAC1B,qBAAsB+B,KAAKQ,eAC3B,8BAA+BR,KAAKZ,SAAW,UAC/C,8BAA+BY,KAAKZ,SAAW,UAC/C,8BAA+BqO,EAC/B,0BAA2BzN,KAAKC,eAAiB,aACjD,iCAAkCD,KAAKS,8BACxC,gCAEDoN,KAAM7N,KAAKC,eAAiB,aAAe,SAAW,gBAAe,aACzDD,KAAKC,eAAiB,aAAe,OAASmF,UAAS,aACvDpF,KAAKG,YAEjBwJ,EAAA,OAAAjH,IAAA,2CAAKsH,MAAM,uBACTL,EAAA,OAAAjH,IAAA,2CAAKsH,MAAM,oBAAmB,aAAahK,KAAKI,oBAC7CiN,EAAcpQ,OACb0M,EAAA,OACEK,MAAO,CACL,2BAA4B,KAC5B,qCAAsCqD,EAAcpQ,OAAS,EAC7D,gBAAiBoQ,EAAcpQ,SAAW,EAC1C,mBAAoBoQ,EAAcpQ,OAAS,EAC3C,sBAAuB,OAGxBoQ,EAAc3R,KAAIY,GAAS0D,KAAK+M,gBAAgBzQ,EAAOuP,MAExD,KACJlC,EAAA,OAAAjH,IAAA,2CACEsH,MAAO,CACL,yBAA0B,KAC1B,mBAAoB,KACpB,sBAAuB,KACvB,sBAAuB,KACvB,gBAAiBhK,KAAKY,oBAExBkN,IAAKC,IACH,MAAM3L,EAAQ2L,GAA2B3I,UACzC,GAAIhD,IAASpC,KAAKmG,WAAY,OAC9BnG,KAAKmG,WAAa/D,EAClBpC,KAAK0F,yBAAyB,EAEhCmI,KAAM7N,KAAKY,mBAAqB,SAAWwE,UAAS,aACxCpF,KAAKY,mBAAqBZ,KAAKI,mBAAqBgF,UAChE8G,SAAUlM,KAAKY,mBAAqB,EAAIwE,WAExCuE,EAAA,OAAAjH,IAAA,2CAAKsH,MAAM,6BACRsD,EAAY5R,KAAIY,GAAS0D,KAAK+M,gBAAgBzQ,EAAOuP,OAGzD0B,EAActQ,OACb0M,EAAA,OACEK,MAAO,CACL,2BAA4B,KAC5B,qCAAsCuD,EAActQ,OAAS,EAC7D,gBAAiBsQ,EAActQ,SAAW,EAC1C,mBAAoBsQ,EAActQ,OAAS,EAC3C,sBAAuB,OAGxBsQ,EAAc7R,KAAIY,GAAS0D,KAAK+M,gBAAgBzQ,EAAOuP,MAExD,MAGNlC,EAAA,OAAAjH,IAAA,2CACEsH,MAAO,CACL,sBAAuB,KACvB,+BAAgCwD,GACjC,cACYA,EAAmB,KAAO,OACvCQ,MAAOR,EAAmBpI,UAAY,MAEtCuE,EAAA,OAAAjH,IAAA,2CAAKsH,MAAM,+BACRhK,KAAKC,eAAiB,cAAgBD,KAAKE,uBAAyB,SACnEyJ,EAAA,wBACEK,MAAM,sBACNiE,QAAShB,EACTiB,SAAUrU,EAAOqU,UAAY,MAC7BC,SAAUtU,EAAOsU,UAAY,cAC7BC,cAAevU,EAAOuU,eAAiB,OACvCC,SAAU,MACVP,IAAKC,IACH,MAAMO,EAAaP,EAKnB,GAAIO,EAAYA,EAAWtK,QAAUmJ,CAAa,EAEpDoB,SAAU,KACR,GAAIvO,KAAK9B,WAAY8B,KAAKwO,aAAa/M,KAAK,CAAEC,KAAM1B,KAAK9B,YAAa,IAGxE,KACJyL,EAAA,OAAAjH,IAAA,2CAAKsH,MAAM,oBAAoByE,OAAQf,GACpCC,EAAQjS,KAAIrC,IACX,MAAMqV,EAAS1O,KAAKwI,aAAanP,GACjC,OACEsQ,EAAA,OACEK,MAAO,CACL,oBAAqB,KACrB,4BAA6B0E,GAE/BD,QAASC,GAET/E,EAAA,QAAMgC,KAAMtS,IACR,KAIZsQ,EAAA,OAAAjH,IAAA,2CAAKsH,MAAM,0BAA0ByE,QAASf,GAC3CC,EAAQjS,KAAIrC,GACXsQ,EAAA,OACEK,MAAO,CACL,yBAA0B,KAC1B,iCACEhK,KAAKwI,aAAanP,IAAO2G,KAAKyI,YAAYpP,IAE9CoV,SAAUzO,KAAKwI,aAAanP,IAAO2G,KAAKyI,YAAYpP,KAEpDsQ,EAAA,QAAMgC,KAAM,GAAGtS,kB","ignoreList":[]}

package/dist/components/{p-BQE2Uj4p.js → p-DfzXyVoM.js}

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as i,h as a,a as o,t as d}from"./index.js";import{g as r}from"./p-BQq26pt9.js";import{d as t}from"./p-CzTJAO2J.js";import{d as n}from"./p-BrB05_X8.js";import{d as c}from"./p-BVsVUnAw.js";import{d as m}from"./p-0XTyQNRG.js";import{d as h}from"./p-z_8aZHHo.js";import{d as l}from"./p-YmJYwnhW.js";import{d as b}from"./p-Ch00yccW.js";import{d as p}from"./p-CAARHqjE.js";import{d as g}from"./p-0EpjqRWc.js";import{d as u}from"./p-M9pOLcyK.js";import{d as f}from"./p-CTAF7SkL.js";import{d as _}from"./p-PNY7auMh.js";const v=()=>`.ds-chrome-space--sm.sc-ds-mobile-header-h,.ds-chrome-space--sm.sc-ds-mobile-header{--ds-chrome-padding:var(--ds-chrome-space-sm-padding, var(--dimension-space-050));--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-header-h,.ds-chrome-space--md.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-header-h,.ds-chrome-space--lg.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-header-h,.ds-chrome-row.sc-ds-mobile-header,.ds-chrome-column.sc-ds-mobile-header-h,.ds-chrome-column.sc-ds-mobile-header,.ds-chrome-grid.sc-ds-mobile-header-h,.ds-chrome-grid.sc-ds-mobile-header{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-mobile-header-h,.ds-chrome-row.sc-ds-mobile-header{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-header-h,.ds-chrome-column.sc-ds-mobile-header{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-header-h,.ds-chrome-grid.sc-ds-mobile-header{display:grid;align-items:center}.sc-ds-mobile-header-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-primary);color:var(--color-foreground-primary)}[tone='brand'].sc-ds-mobile-header-h{background:var(--color-background-bold-brand);color:var(--color-foreground-on-bold)}.mobile-header.sc-ds-mobile-header{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;background:inherit;color:inherit}.mobile-header__primary.sc-ds-mobile-header{grid-template-columns:minmax(var(--dimension-size-500), 1fr) minmax(0, auto) minmax(       var(--dimension-size-500),       1fr     );width:100%;height:calc(var(--dimension-size-500) + var(--dimension-space-200));min-width:0;background:inherit;color:inherit}.mobile-header__primary--segmented.sc-ds-mobile-header{grid-template-columns:minmax(var(--dimension-size-500), 1fr)     minmax(0, 4fr)     minmax(var(--dimension-size-500), 1fr)}.mobile-header__primary--segmented.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header,.mobile-header__primary--segmented.sc-ds-mobile-header ds-tab-group.sc-ds-mobile-header{width:100%}.sc-ds-mobile-header-h:not([tone='brand']) .mobile-header.sc-ds-mobile-header::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-header__subsections.sc-ds-mobile-header{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--dimension-size-600);padding:var(--dimension-space-100) var(--dimension-space-200);box-sizing:border-box}.mobile-header__subsections.sc-ds-mobile-header ds-mobile-section-switcher.sc-ds-mobile-header{min-width:0;max-width:100%}.mobile-header__lane.sc-ds-mobile-header{display:flex;align-items:center;gap:var(--dimension-space-050);min-width:0}.mobile-header__lane--leading.sc-ds-mobile-header{justify-content:flex-start}.mobile-header__lane--trailing.sc-ds-mobile-header{justify-content:flex-end}.mobile-header__center.sc-ds-mobile-header{position:relative;min-width:0;max-width:100%;justify-self:center}.mobile-header__heading.sc-ds-mobile-header{display:block;min-width:0;max-width:100%;text-align:center}.mobile-header__primary--inline-subsections.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header,.mobile-header__primary--combined-subsections.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);width:100%}.mobile-header__combined-subsections.sc-ds-mobile-header{min-width:0;max-width:100%}.mobile-header__primary--inline-subsections.sc-ds-mobile-header .mobile-header__heading.sc-ds-mobile-header{flex:0 1 auto;width:auto}.mobile-header__inline-subsections.sc-ds-mobile-header{flex:0 1 auto;min-width:0;max-width:60%}.mobile-header__semantic-heading.sc-ds-mobile-header{position:absolute;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);padding:0;margin:calc(var(--dimension-stroke-width-012) * -1);overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-mobile-header-s>[slot='leading'],.sc-ds-mobile-header-s>[slot='trailing']{flex:0 0 auto}`;const w=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSectionChange=i(this,"dsSectionChange",7);this.dsSubsectionChange=i(this,"dsSubsectionChange",7);this.heading="";this.headingLevel="h1";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.sectionsPresentation="switcher";this.sectionsSize="md";this.subsections=[];this.subvalue="";this.subsectionsAriaLabel="Change page subsection";this.subsectionsPlacement="below";this.tone="default";this.handleSectionChange=e=>{e.stopPropagation();this.dsSectionChange.emit(e.detail)};this.handleSubsectionChange=e=>{e.stopPropagation();this.dsSubsectionChange.emit(e.detail)}}get resolvedSections(){return this.sections??[]}get resolvedSubsections(){return this.subsections??[]}get selectedLabel(){const e=r(this.resolvedSections);return e.find((e=>e.id===this.value))?.label??e[0]?.label??this.heading}render(){const e=this.headingLevel;const s=r(this.resolvedSections);const i=s.length>1;const d=r(this.resolvedSubsections).length>1;const t=i&&this.sectionsPresentation==="segmented";const n=d&&!i&&this.subsectionsPlacement==="inline";const c=d&&!i&&this.subsectionsPlacement==="combined";const m=this.tone==="brand"?"on-bold":"primary";return a(o,{key:"8c94039873b754fc2e4eefc63e3cc0cf5f5b31ff"},a("header",{key:"54d62265ec32b5ad822e8ea86252dbb5076fa3b2",class:"mobile-header"},a("div",{key:"57e372cf7ccd408bf68ab90e620f4afa877edc26",class:{"mobile-header__primary":true,"mobile-header__primary--segmented":t,"mobile-header__primary--inline-subsections":n,"mobile-header__primary--combined-subsections":c,"ds-chrome-grid":true,"ds-chrome-space--md":true}},a("div",{key:"ef572b4c88a61c64871cb9a6fb94574c9451f4f1",class:"mobile-header__lane mobile-header__lane--leading"},a("slot",{key:"efa331bb178c360a5c29a8ebc289379e07031cf6",name:"leading"})),a("div",{key:"fdc914841da28f2c8062ea29b0b96c16e9eea0b4",class:"mobile-header__center"},c?[a("span",{class:"mobile-header__semantic-heading",role:"heading","aria-level":this.headingLevel==="h1"?"1":"2"},this.selectedLabel),a("nav",{class:"mobile-header__combined-subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{presentation:"sheet",pageLabel:this.selectedLabel,sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange}))]:i?[a("span",{class:"mobile-header__semantic-heading",role:"heading","aria-level":this.headingLevel==="h1"?"1":"2"},this.selectedLabel),this.sectionsPresentation==="segmented"?a("ds-tab-group",{tabs:this.resolvedSections,value:this.value,size:this.sectionsSize,width:"fill",ariaLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange}):a("ds-mobile-section-switcher",{presentation:d?"menu":"sheet",sections:this.resolvedSections,value:this.value,navigationLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange})]:a("ds-text",{class:"mobile-header__heading",as:e,variant:"text-body-large",emphasis:true,color:m,lineTruncation:1},this.selectedLabel),n?this.renderSubsections():null),a("div",{key:"6bf27f8640a30fe3b803a654aa43905b7a00618e",class:"mobile-header__lane mobile-header__lane--trailing"},a("slot",{key:"9e8ed83a41acf176db6c0f8bbeeac3c04f2ac18d",name:"trailing"}))),d&&!n&&!c?a("nav",{class:"mobile-header__subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange})):null))}renderSubsections(){return a("nav",{class:"mobile-header__inline-subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange}))}static get style(){return v()}},[262,"ds-mobile-header",{heading:[1],headingLevel:[1,"heading-level"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],sectionsPresentation:[1,"sections-presentation"],sectionsSize:[1,"sections-size"],subsections:[16],subvalue:[1],subsectionsAriaLabel:[1,"subsections-aria-label"],subsectionsPlacement:[1,"subsections-placement"],tone:[513]}]);function y(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-header","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-section-switcher","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-mobile-header":if(!customElements.get(d(e))){customElements.define(d(e),w)}break;case"ds-badge":if(!customElements.get(d(e))){t()}break;case"ds-button-unfilled":if(!customElements.get(d(e))){n()}break;case"ds-icon":if(!customElements.get(d(e))){c()}break;case"ds-loader":if(!customElements.get(d(e))){m()}break;case"ds-menu":if(!customElements.get(d(e))){h()}break;case"ds-mobile-section-switcher":if(!customElements.get(d(e))){l()}break;case"ds-swatch-picker":if(!customElements.get(d(e))){b()}break;case"ds-switch":if(!customElements.get(d(e))){p()}break;case"ds-tab-group":if(!customElements.get(d(e))){g()}break;case"ds-tag":if(!customElements.get(d(e))){u()}break;case"ds-text":if(!customElements.get(d(e))){f()}break;case"ds-tooltip":if(!customElements.get(d(e))){_()}break}}))}y();export{w as M,y as d};
-//# sourceMappingURL=p-BQE2Uj4p.js.map
+import{p as e,H as s,c as i,h as a,a as o,t as d}from"./index.js";import{g as r}from"./p-BQq26pt9.js";import{d as t}from"./p-CzTJAO2J.js";import{d as n}from"./p-CaNMVLhm.js";import{d as c}from"./p-BVsVUnAw.js";import{d as m}from"./p-0XTyQNRG.js";import{d as h}from"./p-DixX2_Bd.js";import{d as l}from"./p-Ba-dSshd.js";import{d as b}from"./p-Ch00yccW.js";import{d as p}from"./p-CAARHqjE.js";import{d as u}from"./p-0EpjqRWc.js";import{d as g}from"./p-M9pOLcyK.js";import{d as f}from"./p-CTAF7SkL.js";import{d as _}from"./p-B5rN3slq.js";const v=()=>`.ds-chrome-space--sm.sc-ds-mobile-header-h,.ds-chrome-space--sm.sc-ds-mobile-header{--ds-chrome-padding:var(--ds-chrome-space-sm-padding, var(--dimension-space-050));--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-header-h,.ds-chrome-space--md.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-header-h,.ds-chrome-space--lg.sc-ds-mobile-header{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-header-h,.ds-chrome-row.sc-ds-mobile-header,.ds-chrome-column.sc-ds-mobile-header-h,.ds-chrome-column.sc-ds-mobile-header,.ds-chrome-grid.sc-ds-mobile-header-h,.ds-chrome-grid.sc-ds-mobile-header{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-mobile-header-h,.ds-chrome-row.sc-ds-mobile-header{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-header-h,.ds-chrome-column.sc-ds-mobile-header{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-header-h,.ds-chrome-grid.sc-ds-mobile-header{display:grid;align-items:center}.sc-ds-mobile-header-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-primary);color:var(--color-foreground-primary)}[tone='brand'].sc-ds-mobile-header-h{background:var(--color-background-bold-brand);color:var(--color-foreground-on-bold)}.mobile-header.sc-ds-mobile-header{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;background:inherit;color:inherit}.mobile-header__primary.sc-ds-mobile-header{grid-template-columns:minmax(var(--dimension-size-400), 1fr) minmax(0, auto) minmax(       var(--dimension-size-400),       1fr     );width:100%;height:calc(var(--dimension-size-400) + var(--dimension-space-200));min-width:0;background:inherit;color:inherit}.mobile-header__primary--segmented.sc-ds-mobile-header{grid-template-columns:minmax(var(--dimension-size-400), 1fr)     minmax(0, 4fr)     minmax(var(--dimension-size-400), 1fr)}.mobile-header__primary--segmented.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header,.mobile-header__primary--segmented.sc-ds-mobile-header ds-tab-group.sc-ds-mobile-header{width:100%}.sc-ds-mobile-header-h:not([tone='brand']) .mobile-header.sc-ds-mobile-header::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-header__subsections.sc-ds-mobile-header{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--dimension-size-600);padding:var(--dimension-space-100) var(--dimension-space-200);box-sizing:border-box}.mobile-header__subsections.sc-ds-mobile-header ds-mobile-section-switcher.sc-ds-mobile-header{min-width:0;max-width:100%}.mobile-header__lane.sc-ds-mobile-header{display:flex;align-items:center;gap:var(--dimension-space-050);min-width:0}.mobile-header__lane--leading.sc-ds-mobile-header{justify-content:flex-start}.mobile-header__lane--trailing.sc-ds-mobile-header{justify-content:flex-end}.mobile-header__center.sc-ds-mobile-header{position:relative;min-width:0;max-width:100%;justify-self:center}.mobile-header__heading.sc-ds-mobile-header{display:block;min-width:0;max-width:100%;text-align:center}.mobile-header__primary--inline-subsections.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header,.mobile-header__primary--combined-subsections.sc-ds-mobile-header .mobile-header__center.sc-ds-mobile-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);width:100%}.mobile-header__combined-subsections.sc-ds-mobile-header{min-width:0;max-width:100%}.mobile-header__primary--inline-subsections.sc-ds-mobile-header .mobile-header__heading.sc-ds-mobile-header{flex:0 1 auto;width:auto}.mobile-header__inline-subsections.sc-ds-mobile-header{flex:0 1 auto;min-width:0;max-width:60%}.mobile-header__semantic-heading.sc-ds-mobile-header{position:absolute;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);padding:0;margin:calc(var(--dimension-stroke-width-012) * -1);overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-mobile-header-s>[slot='leading'],.sc-ds-mobile-header-s>[slot='trailing']{flex:0 0 auto}`;const w=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSectionChange=i(this,"dsSectionChange",7);this.dsSubsectionChange=i(this,"dsSubsectionChange",7);this.heading="";this.headingLevel="h1";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.sectionsPresentation="switcher";this.sectionsSize="md";this.subsections=[];this.subvalue="";this.subsectionsAriaLabel="Change page subsection";this.subsectionsPlacement="below";this.tone="default";this.handleSectionChange=e=>{e.stopPropagation();this.dsSectionChange.emit(e.detail)};this.handleSubsectionChange=e=>{e.stopPropagation();this.dsSubsectionChange.emit(e.detail)}}get resolvedSections(){return this.sections??[]}get resolvedSubsections(){return this.subsections??[]}get selectedLabel(){const e=r(this.resolvedSections);return e.find((e=>e.id===this.value))?.label??e[0]?.label??this.heading}render(){const e=this.headingLevel;const s=r(this.resolvedSections);const i=s.length>1;const d=r(this.resolvedSubsections).length>1;const t=i&&this.sectionsPresentation==="segmented";const n=d&&!i&&this.subsectionsPlacement==="inline";const c=d&&!i&&this.subsectionsPlacement==="combined";const m=this.tone==="brand"?"on-bold":"primary";return a(o,{key:"8c94039873b754fc2e4eefc63e3cc0cf5f5b31ff"},a("header",{key:"54d62265ec32b5ad822e8ea86252dbb5076fa3b2",class:"mobile-header"},a("div",{key:"57e372cf7ccd408bf68ab90e620f4afa877edc26",class:{"mobile-header__primary":true,"mobile-header__primary--segmented":t,"mobile-header__primary--inline-subsections":n,"mobile-header__primary--combined-subsections":c,"ds-chrome-grid":true,"ds-chrome-space--md":true}},a("div",{key:"ef572b4c88a61c64871cb9a6fb94574c9451f4f1",class:"mobile-header__lane mobile-header__lane--leading"},a("slot",{key:"efa331bb178c360a5c29a8ebc289379e07031cf6",name:"leading"})),a("div",{key:"fdc914841da28f2c8062ea29b0b96c16e9eea0b4",class:"mobile-header__center"},c?[a("span",{class:"mobile-header__semantic-heading",role:"heading","aria-level":this.headingLevel==="h1"?"1":"2"},this.selectedLabel),a("nav",{class:"mobile-header__combined-subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{presentation:"sheet",pageLabel:this.selectedLabel,sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange}))]:i?[a("span",{class:"mobile-header__semantic-heading",role:"heading","aria-level":this.headingLevel==="h1"?"1":"2"},this.selectedLabel),this.sectionsPresentation==="segmented"?a("ds-tab-group",{tabs:this.resolvedSections,value:this.value,size:this.sectionsSize,width:"fill",ariaLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange}):a("ds-mobile-section-switcher",{presentation:d?"menu":"sheet",sections:this.resolvedSections,value:this.value,navigationLabel:this.sectionsAriaLabel,onDsChange:this.handleSectionChange})]:a("ds-text",{class:"mobile-header__heading",as:e,variant:"text-body-medium",emphasis:true,color:m,lineTruncation:1},this.selectedLabel),n?this.renderSubsections():null),a("div",{key:"c55f949b0b7b86be91293af91e24e8dd51b10cf8",class:"mobile-header__lane mobile-header__lane--trailing"},a("slot",{key:"9762a6d1bfd58d2ee7f36870ec68789ac9f71429",name:"trailing"}))),d&&!n&&!c?a("nav",{class:"mobile-header__subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange})):null))}renderSubsections(){return a("nav",{class:"mobile-header__inline-subsections","aria-label":this.subsectionsAriaLabel},a("ds-mobile-section-switcher",{sections:this.resolvedSubsections,value:this.subvalue,navigationLabel:this.subsectionsAriaLabel,onDsChange:this.handleSubsectionChange}))}static get style(){return v()}},[262,"ds-mobile-header",{heading:[1],headingLevel:[1,"heading-level"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],sectionsPresentation:[1,"sections-presentation"],sectionsSize:[1,"sections-size"],subsections:[16],subvalue:[1],subsectionsAriaLabel:[1,"subsections-aria-label"],subsectionsPlacement:[1,"subsections-placement"],tone:[513]}]);function y(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-header","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-section-switcher","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-mobile-header":if(!customElements.get(d(e))){customElements.define(d(e),w)}break;case"ds-badge":if(!customElements.get(d(e))){t()}break;case"ds-button-unfilled":if(!customElements.get(d(e))){n()}break;case"ds-icon":if(!customElements.get(d(e))){c()}break;case"ds-loader":if(!customElements.get(d(e))){m()}break;case"ds-menu":if(!customElements.get(d(e))){h()}break;case"ds-mobile-section-switcher":if(!customElements.get(d(e))){l()}break;case"ds-swatch-picker":if(!customElements.get(d(e))){b()}break;case"ds-switch":if(!customElements.get(d(e))){p()}break;case"ds-tab-group":if(!customElements.get(d(e))){u()}break;case"ds-tag":if(!customElements.get(d(e))){g()}break;case"ds-text":if(!customElements.get(d(e))){f()}break;case"ds-tooltip":if(!customElements.get(d(e))){_()}break}}))}y();export{w as M,y as d};
+//# sourceMappingURL=p-DfzXyVoM.js.map

package/dist/components/{p-BQE2Uj4p.js.map → p-DfzXyVoM.js.map}

@@ -1 +1 @@
-{"version":3,"names":["mobileHeaderCss","MobileHeader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","headingLevel","sections","value","sectionsAriaLabel","sectionsPresentation","sectionsSize","subsections","subvalue","subsectionsAriaLabel","subsectionsPlacement","tone","handleSectionChange","event","stopPropagation","dsSectionChange","emit","detail","handleSubsectionChange","dsSubsectionChange","resolvedSections","resolvedSubsections","selectedLabel","selectable","getSelectableTabs","find","section","id","label","render","Heading","hasSwitcher","length","hasSubsections","hasSegmentedSections","inlineSubsections","combinedSubsections","foreground","h","Host","key","class","name","role","presentation","pageLabel","navigationLabel","onDsChange","tabs","size","width","ariaLabel","as","variant","emphasis","color","lineTruncation","renderSubsections"],"sources":["src/wc/components/MobileHeader/MobileHeader.css?tag=ds-mobile-header&encapsulation=scoped","src/wc/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n}\n\n:host([tone='brand']) {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold);\n}\n\n.mobile-header {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary {\n  grid-template-columns: minmax(var(--dimension-size-500), 1fr) minmax(0, auto) minmax(\n      var(--dimension-size-500),\n      1fr\n    );\n  width: 100%;\n  height: calc(var(--dimension-size-500) + var(--dimension-space-200));\n  min-width: 0;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary--segmented {\n  grid-template-columns:\n    minmax(var(--dimension-size-500), 1fr)\n    minmax(0, 4fr)\n    minmax(var(--dimension-size-500), 1fr);\n}\n\n.mobile-header__primary--segmented .mobile-header__center,\n.mobile-header__primary--segmented ds-tab-group {\n  width: 100%;\n}\n\n:host(:not([tone='brand'])) .mobile-header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-header__subsections {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n.mobile-header__subsections ds-mobile-section-switcher {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.mobile-header__lane {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-header__lane--leading {\n  justify-content: flex-start;\n}\n\n.mobile-header__lane--trailing {\n  justify-content: flex-end;\n}\n\n.mobile-header__center {\n  position: relative;\n  min-width: 0;\n  max-width: 100%;\n  justify-self: center;\n}\n\n.mobile-header__heading {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-header__primary--inline-subsections .mobile-header__center,\n.mobile-header__primary--combined-subsections .mobile-header__center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-100);\n  width: 100%;\n}\n\n.mobile-header__combined-subsections {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.mobile-header__primary--inline-subsections .mobile-header__heading {\n  flex: 0 1 auto;\n  width: auto;\n}\n\n.mobile-header__inline-subsections {\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 60%;\n}\n\n.mobile-header__semantic-heading {\n  position: absolute;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  padding: 0;\n  margin: calc(var(--dimension-stroke-width-012) * -1);\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n::slotted([slot='leading']),\n::slotted([slot='trailing']) {\n  flex: 0 0 auto;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { getSelectableTabs, type TabGroupItem, type TabItem } from '../TabGroup/tab-item-utils';\nimport type { TabGroupSize } from '../TabGroup/TabGroup';\nimport type {\n  MobileHeaderHeadingLevel,\n  MobileHeaderSectionsPresentation,\n  MobileHeaderTone,\n} from './mobile-header-types';\n\n@Component({\n  tag: 'ds-mobile-header',\n  styleUrl: 'MobileHeader.css',\n  scoped: true,\n})\nexport class MobileHeader {\n  /** Static title used when no peer sections are supplied. */\n  @Prop() heading: string = '';\n  /** Semantic heading level for the active mobile screen. */\n  @Prop() headingLevel: MobileHeaderHeadingLevel = 'h1';\n  /** Controlled peer sections. Their selected label replaces the static title. */\n  @Prop() sections: TabGroupItem[] = [];\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n  /** Popup switcher or an inline segmented TabGroup for peer sections. */\n  @Prop() sectionsPresentation: MobileHeaderSectionsPresentation = 'switcher';\n  /** Density for the segmented sections presentation. */\n  @Prop() sectionsSize: TabGroupSize = 'md';\n  /** Controlled child sections within the selected page or detail screen. */\n  @Prop() subsections: TabItem[] = [];\n  /** Controlled selected child-section id. */\n  @Prop() subvalue: string = '';\n  /** Accessible name for the child-section chooser. */\n  @Prop() subsectionsAriaLabel: string = 'Change page subsection';\n  /** Place local sections below, beside, or combined with the page title in one sheet trigger. */\n  @Prop() subsectionsPlacement: 'below' | 'inline' | 'combined' = 'below';\n  /** Default page chrome or bold-brand workflow chrome. */\n  @Prop({ reflect: true }) tone: MobileHeaderTone = 'default';\n\n  /** Section selection intent. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n  /** Child-section selection intent. */\n  @Event() dsSubsectionChange!: EventEmitter<string>;\n\n  private get resolvedSections(): TabGroupItem[] {\n    return this.sections ?? [];\n  }\n\n  private get resolvedSubsections(): TabItem[] {\n    return this.subsections ?? [];\n  }\n\n  private get selectedLabel(): string {\n    const selectable = getSelectableTabs(this.resolvedSections);\n    return (\n      selectable.find(section => section.id === this.value)?.label ??\n      selectable[0]?.label ??\n      this.heading\n    );\n  }\n\n  private handleSectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSectionChange.emit(event.detail);\n  };\n\n  private handleSubsectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSubsectionChange.emit(event.detail);\n  };\n\n  render() {\n    const Heading = this.headingLevel;\n    const selectable = getSelectableTabs(this.resolvedSections);\n    const hasSwitcher = selectable.length > 1;\n    const hasSubsections = getSelectableTabs(this.resolvedSubsections).length > 1;\n    const hasSegmentedSections = hasSwitcher && this.sectionsPresentation === 'segmented';\n    const inlineSubsections =\n      hasSubsections && !hasSwitcher && this.subsectionsPlacement === 'inline';\n    const combinedSubsections =\n      hasSubsections && !hasSwitcher && this.subsectionsPlacement === 'combined';\n    const foreground = this.tone === 'brand' ? 'on-bold' : 'primary';\n\n    return (\n      <Host>\n        <header class=\"mobile-header\">\n          <div\n            class={{\n              'mobile-header__primary': true,\n              'mobile-header__primary--segmented': hasSegmentedSections,\n              'mobile-header__primary--inline-subsections': inlineSubsections,\n              'mobile-header__primary--combined-subsections': combinedSubsections,\n              'ds-chrome-grid': true,\n              'ds-chrome-space--md': true,\n            }}\n          >\n            <div class=\"mobile-header__lane mobile-header__lane--leading\">\n              <slot name=\"leading\" />\n            </div>\n            <div class=\"mobile-header__center\">\n              {combinedSubsections ? (\n                [\n                  <span\n                    class=\"mobile-header__semantic-heading\"\n                    role=\"heading\"\n                    aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n                  >\n                    {this.selectedLabel}\n                  </span>,\n                  <nav\n                    class=\"mobile-header__combined-subsections\"\n                    aria-label={this.subsectionsAriaLabel}\n                  >\n                    <ds-mobile-section-switcher\n                      presentation=\"sheet\"\n                      pageLabel={this.selectedLabel}\n                      sections={this.resolvedSubsections}\n                      value={this.subvalue}\n                      navigationLabel={this.subsectionsAriaLabel}\n                      onDsChange={this.handleSubsectionChange}\n                    />\n                  </nav>,\n                ]\n              ) : hasSwitcher ? (\n                [\n                  <span\n                    class=\"mobile-header__semantic-heading\"\n                    role=\"heading\"\n                    aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n                  >\n                    {this.selectedLabel}\n                  </span>,\n                  this.sectionsPresentation === 'segmented' ? (\n                    <ds-tab-group\n                      tabs={this.resolvedSections}\n                      value={this.value}\n                      size={this.sectionsSize}\n                      width=\"fill\"\n                      ariaLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ) : (\n                    <ds-mobile-section-switcher\n                      presentation={hasSubsections ? 'menu' : 'sheet'}\n                      sections={this.resolvedSections}\n                      value={this.value}\n                      navigationLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ),\n                ]\n              ) : (\n                <ds-text\n                  class=\"mobile-header__heading\"\n                  as={Heading}\n                  variant=\"text-body-large\"\n                  emphasis\n                  color={foreground}\n                  lineTruncation={1}\n                >\n                  {this.selectedLabel}\n                </ds-text>\n              )}\n              {inlineSubsections ? this.renderSubsections() : null}\n            </div>\n            <div class=\"mobile-header__lane mobile-header__lane--trailing\">\n              <slot name=\"trailing\" />\n            </div>\n          </div>\n          {hasSubsections && !inlineSubsections && !combinedSubsections ? (\n            <nav class=\"mobile-header__subsections\" aria-label={this.subsectionsAriaLabel}>\n              <ds-mobile-section-switcher\n                sections={this.resolvedSubsections}\n                value={this.subvalue}\n                navigationLabel={this.subsectionsAriaLabel}\n                onDsChange={this.handleSubsectionChange}\n              />\n            </nav>\n          ) : null}\n        </header>\n      </Host>\n    );\n  }\n\n  private renderSubsections() {\n    return (\n      <nav class=\"mobile-header__inline-subsections\" aria-label={this.subsectionsAriaLabel}>\n        <ds-mobile-section-switcher\n          sections={this.resolvedSubsections}\n          value={this.subvalue}\n          navigationLabel={this.subsectionsAriaLabel}\n          onDsChange={this.handleSubsectionChange}\n        />\n      </nav>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["mobileHeaderCss","MobileHeader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","headingLevel","sections","value","sectionsAriaLabel","sectionsPresentation","sectionsSize","subsections","subvalue","subsectionsAriaLabel","subsectionsPlacement","tone","handleSectionChange","event","stopPropagation","dsSectionChange","emit","detail","handleSubsectionChange","dsSubsectionChange","resolvedSections","resolvedSubsections","selectedLabel","selectable","getSelectableTabs","find","section","id","label","render","Heading","hasSwitcher","length","hasSubsections","hasSegmentedSections","inlineSubsections","combinedSubsections","foreground","h","Host","key","class","name","role","presentation","pageLabel","navigationLabel","onDsChange","tabs","size","width","ariaLabel","as","variant","emphasis","color","lineTruncation","renderSubsections"],"sources":["src/wc/components/MobileHeader/MobileHeader.css?tag=ds-mobile-header&encapsulation=scoped","src/wc/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n}\n\n:host([tone='brand']) {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold);\n}\n\n.mobile-header {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary {\n  grid-template-columns: minmax(var(--dimension-size-400), 1fr) minmax(0, auto) minmax(\n      var(--dimension-size-400),\n      1fr\n    );\n  width: 100%;\n  height: calc(var(--dimension-size-400) + var(--dimension-space-200));\n  min-width: 0;\n  background: inherit;\n  color: inherit;\n}\n\n.mobile-header__primary--segmented {\n  grid-template-columns:\n    minmax(var(--dimension-size-400), 1fr)\n    minmax(0, 4fr)\n    minmax(var(--dimension-size-400), 1fr);\n}\n\n.mobile-header__primary--segmented .mobile-header__center,\n.mobile-header__primary--segmented ds-tab-group {\n  width: 100%;\n}\n\n:host(:not([tone='brand'])) .mobile-header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-header__subsections {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n.mobile-header__subsections ds-mobile-section-switcher {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.mobile-header__lane {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-header__lane--leading {\n  justify-content: flex-start;\n}\n\n.mobile-header__lane--trailing {\n  justify-content: flex-end;\n}\n\n.mobile-header__center {\n  position: relative;\n  min-width: 0;\n  max-width: 100%;\n  justify-self: center;\n}\n\n.mobile-header__heading {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-header__primary--inline-subsections .mobile-header__center,\n.mobile-header__primary--combined-subsections .mobile-header__center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-100);\n  width: 100%;\n}\n\n.mobile-header__combined-subsections {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.mobile-header__primary--inline-subsections .mobile-header__heading {\n  flex: 0 1 auto;\n  width: auto;\n}\n\n.mobile-header__inline-subsections {\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 60%;\n}\n\n.mobile-header__semantic-heading {\n  position: absolute;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  padding: 0;\n  margin: calc(var(--dimension-stroke-width-012) * -1);\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n::slotted([slot='leading']),\n::slotted([slot='trailing']) {\n  flex: 0 0 auto;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { getSelectableTabs, type TabGroupItem, type TabItem } from '../TabGroup/tab-item-utils';\nimport type { TabGroupSize } from '../TabGroup/TabGroup';\nimport type {\n  MobileHeaderHeadingLevel,\n  MobileHeaderSectionsPresentation,\n  MobileHeaderTone,\n} from './mobile-header-types';\n\n@Component({\n  tag: 'ds-mobile-header',\n  styleUrl: 'MobileHeader.css',\n  scoped: true,\n})\nexport class MobileHeader {\n  /** Static title used when no peer sections are supplied. */\n  @Prop() heading: string = '';\n  /** Semantic heading level for the active mobile screen. */\n  @Prop() headingLevel: MobileHeaderHeadingLevel = 'h1';\n  /** Controlled peer sections. Their selected label replaces the static title. */\n  @Prop() sections: TabGroupItem[] = [];\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n  /** Popup switcher or an inline segmented TabGroup for peer sections. */\n  @Prop() sectionsPresentation: MobileHeaderSectionsPresentation = 'switcher';\n  /** Density for the segmented sections presentation. */\n  @Prop() sectionsSize: TabGroupSize = 'md';\n  /** Controlled child sections within the selected page or detail screen. */\n  @Prop() subsections: TabItem[] = [];\n  /** Controlled selected child-section id. */\n  @Prop() subvalue: string = '';\n  /** Accessible name for the child-section chooser. */\n  @Prop() subsectionsAriaLabel: string = 'Change page subsection';\n  /** Place local sections below, beside, or combined with the page title in one sheet trigger. */\n  @Prop() subsectionsPlacement: 'below' | 'inline' | 'combined' = 'below';\n  /** Default page chrome or bold-brand workflow chrome. */\n  @Prop({ reflect: true }) tone: MobileHeaderTone = 'default';\n\n  /** Section selection intent. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n  /** Child-section selection intent. */\n  @Event() dsSubsectionChange!: EventEmitter<string>;\n\n  private get resolvedSections(): TabGroupItem[] {\n    return this.sections ?? [];\n  }\n\n  private get resolvedSubsections(): TabItem[] {\n    return this.subsections ?? [];\n  }\n\n  private get selectedLabel(): string {\n    const selectable = getSelectableTabs(this.resolvedSections);\n    return (\n      selectable.find(section => section.id === this.value)?.label ??\n      selectable[0]?.label ??\n      this.heading\n    );\n  }\n\n  private handleSectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSectionChange.emit(event.detail);\n  };\n\n  private handleSubsectionChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.dsSubsectionChange.emit(event.detail);\n  };\n\n  render() {\n    const Heading = this.headingLevel;\n    const selectable = getSelectableTabs(this.resolvedSections);\n    const hasSwitcher = selectable.length > 1;\n    const hasSubsections = getSelectableTabs(this.resolvedSubsections).length > 1;\n    const hasSegmentedSections = hasSwitcher && this.sectionsPresentation === 'segmented';\n    const inlineSubsections =\n      hasSubsections && !hasSwitcher && this.subsectionsPlacement === 'inline';\n    const combinedSubsections =\n      hasSubsections && !hasSwitcher && this.subsectionsPlacement === 'combined';\n    const foreground = this.tone === 'brand' ? 'on-bold' : 'primary';\n\n    return (\n      <Host>\n        <header class=\"mobile-header\">\n          <div\n            class={{\n              'mobile-header__primary': true,\n              'mobile-header__primary--segmented': hasSegmentedSections,\n              'mobile-header__primary--inline-subsections': inlineSubsections,\n              'mobile-header__primary--combined-subsections': combinedSubsections,\n              'ds-chrome-grid': true,\n              'ds-chrome-space--md': true,\n            }}\n          >\n            <div class=\"mobile-header__lane mobile-header__lane--leading\">\n              <slot name=\"leading\" />\n            </div>\n            <div class=\"mobile-header__center\">\n              {combinedSubsections ? (\n                [\n                  <span\n                    class=\"mobile-header__semantic-heading\"\n                    role=\"heading\"\n                    aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n                  >\n                    {this.selectedLabel}\n                  </span>,\n                  <nav\n                    class=\"mobile-header__combined-subsections\"\n                    aria-label={this.subsectionsAriaLabel}\n                  >\n                    <ds-mobile-section-switcher\n                      presentation=\"sheet\"\n                      pageLabel={this.selectedLabel}\n                      sections={this.resolvedSubsections}\n                      value={this.subvalue}\n                      navigationLabel={this.subsectionsAriaLabel}\n                      onDsChange={this.handleSubsectionChange}\n                    />\n                  </nav>,\n                ]\n              ) : hasSwitcher ? (\n                [\n                  <span\n                    class=\"mobile-header__semantic-heading\"\n                    role=\"heading\"\n                    aria-level={this.headingLevel === 'h1' ? '1' : '2'}\n                  >\n                    {this.selectedLabel}\n                  </span>,\n                  this.sectionsPresentation === 'segmented' ? (\n                    <ds-tab-group\n                      tabs={this.resolvedSections}\n                      value={this.value}\n                      size={this.sectionsSize}\n                      width=\"fill\"\n                      ariaLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ) : (\n                    <ds-mobile-section-switcher\n                      presentation={hasSubsections ? 'menu' : 'sheet'}\n                      sections={this.resolvedSections}\n                      value={this.value}\n                      navigationLabel={this.sectionsAriaLabel}\n                      onDsChange={this.handleSectionChange}\n                    />\n                  ),\n                ]\n              ) : (\n                <ds-text\n                  class=\"mobile-header__heading\"\n                  as={Heading}\n                  variant=\"text-body-medium\"\n                  emphasis\n                  color={foreground}\n                  lineTruncation={1}\n                >\n                  {this.selectedLabel}\n                </ds-text>\n              )}\n              {inlineSubsections ? this.renderSubsections() : null}\n            </div>\n            <div class=\"mobile-header__lane mobile-header__lane--trailing\">\n              <slot name=\"trailing\" />\n            </div>\n          </div>\n          {hasSubsections && !inlineSubsections && !combinedSubsections ? (\n            <nav class=\"mobile-header__subsections\" aria-label={this.subsectionsAriaLabel}>\n              <ds-mobile-section-switcher\n                sections={this.resolvedSubsections}\n                value={this.subvalue}\n                navigationLabel={this.subsectionsAriaLabel}\n                onDsChange={this.handleSubsectionChange}\n              />\n            </nav>\n          ) : null}\n        </header>\n      </Host>\n    );\n  }\n\n  private renderSubsections() {\n    return (\n      <nav class=\"mobile-header__inline-subsections\" aria-label={this.subsectionsAriaLabel}>\n        <ds-mobile-section-switcher\n          sections={this.resolvedSubsections}\n          value={this.subvalue}\n          navigationLabel={this.subsectionsAriaLabel}\n          onDsChange={this.handleSubsectionChange}\n        />\n      </nav>\n    );\n  }\n}\n"],"mappings":"shBAAA,MAAMA,EAAkB,IAAM,+1I,MCcjBC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,oJAOUC,KAAAC,QAAkB,GAElBD,KAAAE,aAAyC,KAEzCF,KAAAG,SAA2B,GAE3BH,KAAAI,MAAgB,GAEhBJ,KAAAK,kBAA4B,sBAE5BL,KAAAM,qBAAyD,WAEzDN,KAAAO,aAA6B,KAE7BP,KAAAQ,YAAyB,GAEzBR,KAAAS,SAAmB,GAEnBT,KAAAU,qBAA+B,yBAE/BV,KAAAW,qBAAwD,QAEvCX,KAAAY,KAAyB,UAwB1CZ,KAAAa,oBAAuBC,IAC7BA,EAAMC,kBACNf,KAAKgB,gBAAgBC,KAAKH,EAAMI,OAAO,EAGjClB,KAAAmB,uBAA0BL,IAChCA,EAAMC,kBACNf,KAAKoB,mBAAmBH,KAAKH,EAAMI,OAAO,CAgI7C,CAxJC,oBAAYG,GACV,OAAOrB,KAAKG,UAAY,E,CAG1B,uBAAYmB,GACV,OAAOtB,KAAKQ,aAAe,E,CAG7B,iBAAYe,GACV,MAAMC,EAAaC,EAAkBzB,KAAKqB,kBAC1C,OACEG,EAAWE,MAAKC,GAAWA,EAAQC,KAAO5B,KAAKI,SAAQyB,OACvDL,EAAW,IAAIK,OACf7B,KAAKC,O,CAcT,MAAA6B,GACE,MAAMC,EAAU/B,KAAKE,aACrB,MAAMsB,EAAaC,EAAkBzB,KAAKqB,kBAC1C,MAAMW,EAAcR,EAAWS,OAAS,EACxC,MAAMC,EAAiBT,EAAkBzB,KAAKsB,qBAAqBW,OAAS,EAC5E,MAAME,EAAuBH,GAAehC,KAAKM,uBAAyB,YAC1E,MAAM8B,EACJF,IAAmBF,GAAehC,KAAKW,uBAAyB,SAClE,MAAM0B,EACJH,IAAmBF,GAAehC,KAAKW,uBAAyB,WAClE,MAAM2B,EAAatC,KAAKY,OAAS,QAAU,UAAY,UAEvD,OACE2B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAM,iBACZH,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,yBAA0B,KAC1B,oCAAqCP,EACrC,6CAA8CC,EAC9C,+CAAgDC,EAChD,iBAAkB,KAClB,sBAAuB,OAGzBE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oDACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,aAEbJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,yBACRL,EAAmB,CAEhBE,EAAA,QACEG,MAAM,kCACNE,KAAK,UAAS,aACF5C,KAAKE,eAAiB,KAAO,IAAM,KAE9CF,KAAKuB,eAERgB,EAAA,OACEG,MAAM,sCAAqC,aAC/B1C,KAAKU,sBAEjB6B,EAAA,8BACEM,aAAa,QACbC,UAAW9C,KAAKuB,cAChBpB,SAAUH,KAAKsB,oBACflB,MAAOJ,KAAKS,SACZsC,gBAAiB/C,KAAKU,qBACtBsC,WAAYhD,KAAKmB,2BAIrBa,EAAW,CAEXO,EAAA,QACEG,MAAM,kCACNE,KAAK,UAAS,aACF5C,KAAKE,eAAiB,KAAO,IAAM,KAE9CF,KAAKuB,eAERvB,KAAKM,uBAAyB,YAC5BiC,EAAA,gBACEU,KAAMjD,KAAKqB,iBACXjB,MAAOJ,KAAKI,MACZ8C,KAAMlD,KAAKO,aACX4C,MAAM,OACNC,UAAWpD,KAAKK,kBAChB2C,WAAYhD,KAAKa,sBAGnB0B,EAAA,8BACEM,aAAcX,EAAiB,OAAS,QACxC/B,SAAUH,KAAKqB,iBACfjB,MAAOJ,KAAKI,MACZ2C,gBAAiB/C,KAAKK,kBACtB2C,WAAYhD,KAAKa,uBAKvB0B,EAAA,WACEG,MAAM,yBACNW,GAAItB,EACJuB,QAAQ,mBACRC,SAAQ,KACRC,MAAOlB,EACPmB,eAAgB,GAEfzD,KAAKuB,eAGTa,EAAoBpC,KAAK0D,oBAAsB,MAElDnB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qDACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,eAGdT,IAAmBE,IAAsBC,EACxCE,EAAA,OAAKG,MAAM,6BAA4B,aAAa1C,KAAKU,sBACvD6B,EAAA,8BACEpC,SAAUH,KAAKsB,oBACflB,MAAOJ,KAAKS,SACZsC,gBAAiB/C,KAAKU,qBACtBsC,WAAYhD,KAAKmB,0BAGnB,M,CAMJ,iBAAAuC,GACN,OACEnB,EAAA,OAAKG,MAAM,oCAAmC,aAAa1C,KAAKU,sBAC9D6B,EAAA,8BACEpC,SAAUH,KAAKsB,oBACflB,MAAOJ,KAAKS,SACZsC,gBAAiB/C,KAAKU,qBACtBsC,WAAYhD,KAAKmB,yB","ignoreList":[]}