@ds-mo/ui 16.3.1 → 16.3.2

package/dist/mcp-data/registry/panel-nav.json

@@ -739,7 +739,7 @@
     },
     {
       "path": "src/wc/components/PanelNav/PanelNav.tsx",
-      "content": "import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  State,\n  Element,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\nimport { CHROME_TRANSITION_END, type ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport {\n  derivePanelNavSelectionFromUrl,\n  firstEnabledPanelNavChild,\n  panelNavWidthTransitionMs,\n  parsePanelNavGroups,\n  resolvePanelNavDisableVt,\n  resolvePanelNavStyle,\n  resolvePanelNavToggle,\n  shouldResyncPanelNavGroups,\n  shouldResyncPanelNavStyle,\n} from './panel-nav-utils';\nimport {\n  PANEL_NAV_USER_MENU_ANCHOR_ID,\n  PANEL_NAV_USER_MENU_PLACEMENT,\n  type PanelNavChildItem,\n  type PanelNavChildSelectDetail,\n  type PanelNavGroup,\n  type PanelNavItem,\n  type PanelNavPresentation,\n  type PanelNavRouterMode,\n  type PanelNavUserActionDetail,\n} from './panel-nav-types';\nimport { PANEL_NAV_CHILD_MENU_PLACEMENT } from '../Menu/menu-placement';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { scrollEdgeFadeClassMap } from '../../utils/scroll-edge-fade';\nimport { prefersReducedMotion } from '../../utils/resolve-css-time-ms';\nimport { resolveSafeUrl } from '../../utils/safe-url';\n\ntype PanelNavRovingEntry =\n  | { kind: 'parent'; item: PanelNavItem }\n  | { kind: 'child'; parent: PanelNavItem; child: PanelNavChildItem };\n\nlet nextPanelNavInstanceId = 0;\n\n@Component({\n  tag: 'ds-panel-nav',\n  styleUrl: 'PanelNav.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class PanelNav {\n  private readonly instanceId = nextPanelNavInstanceId++;\n  /** Style slot: `dashboard` or `settings`. Colors match for now;\n   *  class hooks reserved for texture/glyph layers. Property: `navStyle`. Attribute: `nav-style`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /** When `true`, style changes apply synchronously — host app owns view transitions. */\n  @Prop() disableViewTransition: boolean = false;\n\n  /** Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute. */\n  @Prop() groups: string | PanelNavGroup[] = '[]';\n\n  /** Flat primary destinations, or nested child-route disclosure. */\n  @Prop({ reflect: true }) presentation: PanelNavPresentation = 'flat';\n\n  /** How items with `href` render:\n   *  - `anchor` (default): native `<a href>` — works with routers that intercept anchors.\n   *  - `event`: always `<button>`; host handles navigation via `dsNavSelect`. */\n  @Prop() routerMode: PanelNavRouterMode = 'anchor';\n\n  /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n  @Prop() activeId: string = '';\n\n  /** ID of the active child route when URL matching is unavailable. */\n  @Prop() activeChildId: string = '';\n\n  /** Whether the nav is in collapsed (icon-only) state.\n   *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */\n  @Prop({ mutable: true }) collapsed: boolean = false;\n\n  /** Viewport width (px) below which the nav locks in icon-only mode. 0 = disabled. */\n  @Prop() breakpoint: number = 0;\n\n  /** `localStorage` key used to persist the collapsed state across page loads.\n   *  When set, collapsed state is restored on mount and written on each toggle. */\n  @Prop() storageKey: string = '';\n\n  /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n   *  When set the component derives the active item by matching item `href` values\n   *  against this string (longest segment-boundary prefix wins), overriding `activeId`. */\n  @Prop() currentUrl: string = '';\n\n  /** Display name for the footer user section */\n  @Prop() userName: string = '';\n\n  /** Single character shown in the collapsed avatar */\n  @Prop() userInitial: string = '';\n\n  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  /** Account disclosure state. Expanded-derived styling is deprecated; use accountMenuSurfaceOpen for the rendered lifetime. */\n  @Prop() accountMenuExpanded: boolean = false;\n  /** External account surface is visible, including exit motion. Omission\n   * preserves the deprecated accountMenuExpanded-derived wash. */\n  @Prop() accountMenuSurfaceOpen: boolean | undefined;\n  @Prop() dashboardNavigationLabel: string = 'Dashboard navigation';\n  @Prop() settingsNavigationLabel: string = 'Settings navigation';\n  @Prop() expandNavigationLabel: string = 'Expand navigation';\n  @Prop() collapseNavigationLabel: string = 'Collapse navigation';\n  /** Localized name for the body when overflow makes it a keyboard-scrollable region. */\n  @Prop() navigationItemsLabel: string = 'Navigation items';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when a nested child route is selected. */\n  @Event() dsNavChildSelect!: EventEmitter<PanelNavChildSelectDetail>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Bubbling lifecycle — `ds-shell-app` pauses chrome metrics during width motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Emitted when the footer left button (gear / dashboard) is clicked. */\n  @Event() dsNavFooterAction!: EventEmitter<void>;\n\n  /** Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`. */\n  @Event() dsNavUserAction!: EventEmitter<PanelNavUserActionDetail>;\n\n  @Element() el!: HTMLElement;\n\n  @State() private renderedStyle: NavChromeStyle = 'dashboard';\n  @State() private parsedGroups: PanelNavGroup[] = [];\n  @State() private isAnimating = false;\n  @State() private rovingIndex: number = 0;\n  @State() private viewportNarrow: boolean = false;\n  @State() private urlDerivedActiveId: string = '';\n  @State() private urlDerivedActiveChildId: string = '';\n  @State() private bodyScrollable = false;\n  @State() private expandedParentId: string = '';\n  @State() private inlineChildrenExpansionReady = true;\n  @State() private flyoutParentId: string = '';\n  @State() private flyoutOpen = false;\n  @State() private flyoutInitialFocusVisible = false;\n\n  private transitionCompletionHandler?: (e: TransitionEvent) => void;\n  private transitionFallbackTimer: number | null = null;\n  private resizeObserver?: ResizeObserver;\n  private scrollRegionObserver?: ResizeObserver;\n  private bodyEl?: HTMLElement;\n  private initialRenderComplete = false;\n  private hasLoaded = false;\n  private readonly connectionTasks = new ConnectionTasks(() => this.el.isConnected);\n  private transitionShell: HTMLElement | null = null;\n  private inlineChildrenExpansionFrame: number | null = null;\n\n  // Drag-to-resize state (not @State — no re-render needed)\n  private isDragging = false;\n  private dragStartX = 0;\n  private didSnap = false;\n  private lastDeltaX = 0;\n  private edgeOverlayTimer: number | null = null;\n  private globalMouseMoveHandler?: (e: MouseEvent) => void;\n  private globalMouseUpHandler?: () => void;\n  private dragBodyStyle?: { cursor: string; userSelect: string };\n\n  @State() private showEdgeOverlay = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n\n  /** The ID that should be treated as active. `currentUrl` matching takes precedence\n   *  over `activeId` when both are present. */\n  private get effectiveActiveId(): string {\n    return this.urlDerivedActiveId || this.activeId;\n  }\n\n  private get effectiveActiveChildId(): string {\n    return this.urlDerivedActiveChildId || this.activeChildId;\n  }\n\n  private get collapsedPresentation(): boolean {\n    return this.collapsed || this.viewportNarrow;\n  }\n\n  private get effectiveDisableViewTransition(): boolean {\n    return resolvePanelNavDisableVt(\n      this.disableViewTransition,\n      this.el.getAttribute('disable-view-transition')\n    );\n  }\n\n  @Watch('collapsed')\n  onCollapsedChange(next: boolean, prev: boolean | undefined) {\n    if (prev === undefined || !this.initialRenderComplete) return;\n    this.stageInlineChildrenExpansion(\n      prev && !next && !this.viewportNarrow && this.presentation === 'nested'\n    );\n    this.flyoutParentId = '';\n    this.flyoutOpen = false;\n    this.syncExpandedParent();\n    this.rovingIndex = this.getFirstRovingIndex();\n    this.startCollapseAnimation();\n  }\n\n  @Watch('viewportNarrow')\n  onViewportNarrowChange(next: boolean, prev: boolean | undefined) {\n    if (prev === undefined || !this.initialRenderComplete) return;\n    this.stageInlineChildrenExpansion(\n      prev && !next && !this.collapsed && this.presentation === 'nested'\n    );\n    this.flyoutParentId = '';\n    this.flyoutOpen = false;\n    if (next || this.rovingIndex > this.getVisibleRovingEntries().length) {\n      this.rovingIndex = this.getFirstRovingIndex();\n    }\n    this.startCollapseAnimation();\n  }\n\n  @Watch('breakpoint')\n  onBreakpointChange() {\n    this.disconnectResizeObserver();\n    if (this.el.isConnected) {\n      this.viewportNarrow = this.isViewportNarrow();\n      if (this.effectiveBreakpoint() > 0) this.connectResizeObserver();\n    }\n  }\n\n  @Watch('groups')\n  onGroupsChange(val: string | PanelNavGroup[]) {\n    this.parsedGroups = parsePanelNavGroups(val);\n    this.rovingIndex = 0;\n    this.syncActiveFromUrl();\n    this.syncExpandedParent();\n  }\n\n  @Watch('presentation')\n  onPresentationChange() {\n    this.stageInlineChildrenExpansion(false);\n    this.flyoutParentId = '';\n    this.flyoutOpen = false;\n    this.syncExpandedParent();\n    this.rovingIndex = this.getFirstRovingIndex();\n  }\n\n  @Watch('activeId')\n  @Watch('activeChildId')\n  @Watch('urlDerivedActiveId')\n  @Watch('urlDerivedActiveChildId')\n  onActiveIdChange() {\n    this.syncExpandedParent();\n  }\n\n  @Watch('currentUrl')\n  onCurrentUrlChange() {\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('navStyle')\n  onNavStyleChange(newVal: NavChromeStyle) {\n    this.renderedStyle = newVal;\n  }\n\n  componentWillLoad() {\n    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));\n    this.viewportNarrow = this.isViewportNarrow();\n    if (this.storageKey) {\n      try {\n        const stored = localStorage.getItem(this.storageKey);\n        if (stored !== null) this.collapsed = stored === 'true';\n      } catch {\n        /* localStorage unavailable */\n      }\n    }\n    this.onGroupsChange(this.groups);\n    this.syncActiveFromUrl();\n  }\n\n  connectedCallback() {\n    if (this.hasLoaded) this.connectResources();\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.connectResources();\n  }\n\n  private connectResources() {\n    if (!this.el.isConnected) return;\n    this.syncHostPropsIfNeeded();\n    this.viewportNarrow = this.isViewportNarrow();\n    this.syncExpandedParent();\n    this.rovingIndex = this.getFirstRovingIndex();\n    this.scheduleDeferredHostPropSync();\n    if (this.effectiveBreakpoint() > 0) this.connectResizeObserver();\n    this.connectScrollRegionObserver();\n    this.updateBodyScrollable();\n    this.initialRenderComplete = true;\n  }\n\n  componentDidRender() {\n    if (!this.el.isConnected) return;\n    this.updateBodyScrollable();\n    this.scheduleInlineChildrenExpansion();\n  }\n\n  disconnectedCallback() {\n    this.connectionTasks.cancel();\n    this.initialRenderComplete = false;\n    this.disconnectResizeObserver();\n    this.disconnectScrollRegionObserver();\n    this.clearInlineChildrenExpansionFrame();\n    this.finishCollapseAnimation(this.el.querySelector('.panel-nav') as HTMLElement | null);\n    this.clearEdgeOverlayTimer();\n    this.clearResizeDrag();\n    this.stageInlineChildrenExpansion(false);\n    this.flyoutParentId = '';\n    this.flyoutOpen = false;\n  }\n\n  private startCollapseAnimation() {\n    if (!this.el.isConnected || this.isAnimating) return;\n    this.isAnimating = true;\n    this.transitionShell = this.el.closest('ds-shell-app');\n    this.dsChromeTransitionStart.emit({ source: 'panel-nav' });\n    const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n    this.clearCollapseAnimationCompletion(panel);\n    this.transitionCompletionHandler = (e: TransitionEvent) => {\n      if (e.target === panel && (e.propertyName === 'width' || e.propertyName === 'min-width')) {\n        this.finishCollapseAnimation(panel);\n      }\n    };\n    panel?.addEventListener('transitionend', this.transitionCompletionHandler);\n    panel?.addEventListener('transitioncancel', this.transitionCompletionHandler);\n    this.connectionTasks.frame(() => {\n      this.connectionTasks.frame(() => {\n        if (!this.isAnimating) return;\n        if (!panel) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n\n        const fallbackMs = panelNavWidthTransitionMs(getComputedStyle(panel));\n        if (fallbackMs <= 0) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishCollapseAnimation(panel);\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private stageInlineChildrenExpansion(stage: boolean) {\n    this.clearInlineChildrenExpansionFrame();\n    this.inlineChildrenExpansionReady = !stage;\n  }\n\n  private scheduleInlineChildrenExpansion() {\n    if (!this.el.isConnected || this.inlineChildrenExpansionReady || this.collapsedPresentation)\n      return;\n    this.clearInlineChildrenExpansionFrame();\n    this.inlineChildrenExpansionFrame =\n      this.connectionTasks.frame(() => {\n        this.inlineChildrenExpansionFrame = null;\n        if (this.collapsedPresentation) return;\n\n        // Commit the newly mounted accordion's closed geometry before opening it.\n        // Without this read, the browser can insert it directly at 1fr and skip motion.\n        this.el\n          .querySelector<HTMLElement>('.panel-nav__children-accordion')\n          ?.getBoundingClientRect();\n        this.inlineChildrenExpansionReady = true;\n      }) ?? null;\n  }\n\n  private clearInlineChildrenExpansionFrame() {\n    if (this.inlineChildrenExpansionFrame === null) return;\n    this.connectionTasks.cancelFrame(this.inlineChildrenExpansionFrame);\n    this.inlineChildrenExpansionFrame = null;\n  }\n\n  private finishCollapseAnimation(panel: HTMLElement | null) {\n    const wasAnimating = this.isAnimating;\n    const shell = this.transitionShell;\n    this.transitionShell = null;\n    this.clearCollapseAnimationCompletion(panel);\n    if (!wasAnimating) return;\n    this.isAnimating = false;\n    if (shell && this.el.closest('ds-shell-app') !== shell) {\n      // Removal must release the shell that received the matching start event.\n      shell.dispatchEvent(\n        new CustomEvent<ChromeTransitionDetail>(CHROME_TRANSITION_END, {\n          detail: { source: 'panel-nav' },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    } else {\n      this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });\n    }\n  }\n\n  private clearCollapseAnimationCompletion(panel: HTMLElement | null) {\n    if (this.transitionCompletionHandler) {\n      panel?.removeEventListener('transitionend', this.transitionCompletionHandler);\n      panel?.removeEventListener('transitioncancel', this.transitionCompletionHandler);\n      this.transitionCompletionHandler = undefined;\n    }\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  private effectiveBreakpoint(): number {\n    if (this.breakpoint > 0) return this.breakpoint;\n    const attributeValue = Number(this.el.getAttribute('breakpoint') ?? 0);\n    return Number.isFinite(attributeValue) && attributeValue > 0 ? attributeValue : 0;\n  }\n\n  private isViewportNarrow(): boolean {\n    const breakpoint = this.effectiveBreakpoint();\n    return typeof window !== 'undefined' && breakpoint > 0 && window.innerWidth < breakpoint;\n  }\n\n  private connectResizeObserver() {\n    this.disconnectResizeObserver();\n    this.viewportNarrow = this.isViewportNarrow();\n    this.resizeObserver = new ResizeObserver(() => {\n      this.viewportNarrow = this.isViewportNarrow();\n    });\n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  private disconnectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  private connectScrollRegionObserver() {\n    this.disconnectScrollRegionObserver();\n    if (!this.bodyEl || typeof ResizeObserver === 'undefined') return;\n    this.scrollRegionObserver = new ResizeObserver(() => this.updateBodyScrollable());\n    this.scrollRegionObserver.observe(this.bodyEl);\n  }\n\n  private disconnectScrollRegionObserver() {\n    this.scrollRegionObserver?.disconnect();\n    this.scrollRegionObserver = undefined;\n  }\n\n  private updateBodyScrollable() {\n    if (!this.el.isConnected) return;\n    const next = Boolean(this.bodyEl && this.bodyEl.scrollHeight > this.bodyEl.clientHeight + 1);\n    if (next !== this.bodyScrollable) this.bodyScrollable = next;\n  }\n\n  /** Derive active ID from the current URL by matching item `href` values.\n   *  Uses longest segment-boundary prefix match. */\n  private syncActiveFromUrl() {\n    if (!this.currentUrl) {\n      this.urlDerivedActiveId = '';\n      this.urlDerivedActiveChildId = '';\n      return;\n    }\n    const selection = derivePanelNavSelectionFromUrl(this.currentUrl, this.getAllItems());\n    this.urlDerivedActiveId = selection.parentId;\n    this.urlDerivedActiveChildId = selection.childId;\n  }\n\n  private syncExpandedParent() {\n    const active = this.getAllItems().find(item => item.id === this.effectiveActiveId);\n    this.expandedParentId =\n      this.presentation === 'nested' && active?.children?.length ? active.id : '';\n  }\n\n  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    if (shouldResyncPanelNavStyle(this.renderedStyle, this.navStyle)) {\n      this.renderedStyle = this.navStyle;\n    }\n\n    if (shouldResyncPanelNavGroups(this.parsedGroups, this.groups)) {\n      this.onGroupsChange(this.groups);\n    } else if (this.currentUrl) {\n      this.syncActiveFromUrl();\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = PanelNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        this.connectionTasks.frame(tick);\n      }\n    };\n    this.connectionTasks.microtask(tick);\n  }\n\n  /** Centralised toggle: updates the desktop preference unless breakpoint-locked. */\n  private applyToggle(next: boolean) {\n    if (this.viewportNarrow) return;\n    this.collapsed = next;\n    if (this.storageKey) {\n      try {\n        localStorage.setItem(this.storageKey, String(next));\n      } catch {\n        /* unavailable */\n      }\n    }\n    this.dsNavToggle.emit(next);\n  }\n\n  private getAllItems(): PanelNavItem[] {\n    return this.parsedGroups.flatMap(g => g.items);\n  }\n\n  private getVisibleRovingEntries(): PanelNavRovingEntry[] {\n    return this.getAllItems().flatMap<PanelNavRovingEntry>(item => {\n      const parent: PanelNavRovingEntry = { kind: 'parent', item };\n      if (\n        this.presentation !== 'nested' ||\n        this.collapsedPresentation ||\n        item.id !== this.expandedParentId ||\n        !item.children?.length\n      ) {\n        return [parent];\n      }\n      return [\n        parent,\n        ...item.children\n          .filter(child => !child.isInactive)\n          .map<PanelNavRovingEntry>(child => ({ kind: 'child', parent: item, child })),\n      ];\n    });\n  }\n\n  private getFirstRovingIndex(): number {\n    return this.viewportNarrow ? 1 : 0;\n  }\n\n  private getFooterRovingIndex(): number {\n    return 1 + this.getVisibleRovingEntries().length;\n  }\n\n  private getUserRovingIndex(): number {\n    return this.getFooterRovingIndex() + 1;\n  }\n\n  private getRovingElement(index: number): HTMLElement | null {\n    const itemCount = this.getVisibleRovingEntries().length;\n    if (index === 0) {\n      return this.viewportNarrow ? null : this.el.querySelector('.panel-nav__header-btn');\n    }\n    if (index >= 1 && index <= itemCount) {\n      const items = this.el.querySelectorAll<HTMLElement>(\n        '.panel-nav__body [data-panel-nav-roving]'\n      );\n      return items[index - 1] ?? null;\n    }\n    if (index === this.getFooterRovingIndex()) {\n      return this.el.querySelector('.panel-nav__footer-btn .button-unfilled');\n    }\n    if (index === this.getUserRovingIndex()) {\n      return this.el.querySelector('.panel-nav__footer-user');\n    }\n    return null;\n  }\n\n  private focusRovingAt(index: number) {\n    this.rovingIndex = index;\n    this.getRovingElement(index)?.focus({ preventScroll: true });\n  }\n\n  private activateRovingIndex(index: number, keyboard = false) {\n    const entries = this.getVisibleRovingEntries();\n    const itemCount = entries.length;\n    if (index === 0) {\n      this.handleToggle();\n      return;\n    }\n    if (index >= 1 && index <= itemCount) {\n      const entry = entries[index - 1];\n      if (!entry) return;\n      if (entry.kind === 'child') {\n        this.emitChildSelect(entry.parent, entry.child);\n      } else if (entry.item.children?.length) {\n        this.activateParent(entry.item, keyboard);\n      } else {\n        this.handleItemClick(entry.item.id);\n      }\n      return;\n    }\n    if (index === this.getFooterRovingIndex()) {\n      this.handleFooterAction();\n      return;\n    }\n    if (index === this.getUserRovingIndex()) {\n      const anchor = this.el.querySelector(\n        `#${PANEL_NAV_USER_MENU_ANCHOR_ID}`\n      ) as HTMLElement | null;\n      if (anchor)\n        this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n    }\n  }\n\n  private handleRovingKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.activateRovingIndex(index, true);\n      return;\n    }\n\n    const footerIdx = this.getFooterRovingIndex();\n    const userIdx = this.getUserRovingIndex();\n    const firstIdx = this.getFirstRovingIndex();\n    let next: number | undefined;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        if (index === userIdx) return;\n        if (index === footerIdx) next = userIdx;\n        else next = index + 1;\n        break;\n      case 'ArrowUp':\n        if (index === firstIdx) return;\n        if (index === userIdx) next = footerIdx;\n        else if (index === footerIdx) next = footerIdx - 1;\n        else next = index - 1;\n        break;\n      case 'ArrowRight':\n        if (index === footerIdx) next = userIdx;\n        else return;\n        break;\n      case 'ArrowLeft':\n        if (index === userIdx) next = footerIdx;\n        else return;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = firstIdx;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = userIdx;\n        break;\n      default:\n        return;\n    }\n\n    if (next === undefined || next === index) return;\n    e.preventDefault();\n    this.focusRovingAt(next);\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private emitChildSelect(parent: PanelNavItem, child: PanelNavChildItem) {\n    if (child.isInactive) return;\n    this.dsNavChildSelect.emit({\n      parentId: parent.id,\n      childId: child.id,\n      href: child.href,\n    });\n  }\n\n  private followFlyoutAnchor(child: PanelNavChildItem) {\n    const href = resolveSafeUrl(child.href);\n    if (this.routerMode !== 'anchor' || !href) return;\n    const anchor = this.el.ownerDocument.createElement('a');\n    anchor.href = href;\n    anchor.hidden = true;\n    this.el.append(anchor);\n    anchor.click();\n    anchor.remove();\n  }\n\n  private activateParent(parent: PanelNavItem, keyboard = false) {\n    if (this.presentation === 'nested') {\n      this.expandedParentId = parent.id;\n      if (this.collapsedPresentation) {\n        if (this.flyoutParentId === parent.id && this.flyoutOpen) {\n          this.closeFlyout();\n          return;\n        }\n        this.flyoutInitialFocusVisible = keyboard;\n        this.flyoutParentId = parent.id;\n        this.flyoutOpen = true;\n        return;\n      }\n    }\n\n    const child = firstEnabledPanelNavChild(parent.children);\n    if (child) this.emitChildSelect(parent, child);\n  }\n\n  private parentAnchorId(parentId: string): string {\n    return `panel-nav-parent-${this.instanceId}-${parentId.replace(/[^a-zA-Z0-9_-]/g, '-')}`;\n  }\n\n  private childListId(parentId: string): string {\n    return `panel-nav-children-${this.instanceId}-${parentId.replace(/[^a-zA-Z0-9_-]/g, '-')}`;\n  }\n\n  private closeFlyout = () => {\n    this.flyoutOpen = false;\n    this.flyoutInitialFocusVisible = false;\n  };\n\n  private handleFlyoutAfterClose = () => {\n    if (!this.flyoutOpen) this.flyoutParentId = '';\n  };\n\n  private handleFlyoutSelect = (event: CustomEvent<MenuItemData>) => {\n    const parent = this.getAllItems().find(item => item.id === this.flyoutParentId);\n    const child = parent?.children?.find(item => item.id === event.detail?.value);\n    if (!parent || !child) return;\n    this.emitChildSelect(parent, child);\n    this.followFlyoutAnchor(child);\n    this.closeFlyout();\n  };\n\n  private handleToggle() {\n    const next = resolvePanelNavToggle(this.collapsed, this.viewportNarrow);\n    if (next !== null) this.applyToggle(next);\n  }\n\n  /** Toggle the desktop preference. No-op while the breakpoint locks the panel collapsed. */\n  @Method()\n  async toggleCollapsed() {\n    this.handleToggle();\n  }\n\n  private handleFooterAction() {\n    this.dsNavFooterAction.emit();\n  }\n\n  private handleUserAction(e: MouseEvent) {\n    const anchor = e.currentTarget as HTMLElement;\n    this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n  }\n\n  private clearEdgeOverlayTimer() {\n    if (this.edgeOverlayTimer !== null) {\n      window.clearTimeout(this.edgeOverlayTimer);\n      this.edgeOverlayTimer = null;\n    }\n  }\n\n  private handleResizeHandleMouseEnter() {\n    this.clearEdgeOverlayTimer();\n    if (prefersReducedMotion()) {\n      this.showEdgeOverlay = true;\n      return;\n    }\n    this.edgeOverlayTimer = window.setTimeout(() => {\n      this.showEdgeOverlay = true;\n      this.edgeOverlayTimer = null;\n    }, 500);\n  }\n\n  private handleResizeHandleMouseLeave() {\n    if (this.isDragging) return;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n  }\n\n  private handleResizeHandleMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const wasCollapsed = this.collapsed || this.viewportNarrow;\n    this.isDragging = true;\n    this.dragStartX = e.clientX;\n    this.didSnap = false;\n    this.lastDeltaX = 0;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n\n    this.dragBodyStyle = {\n      cursor: document.body.style.cursor,\n      userSelect: document.body.style.userSelect,\n    };\n    document.body.style.cursor = 'ew-resize';\n    document.body.style.userSelect = 'none';\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      this.lastDeltaX = Math.abs(deltaX);\n      if (this.didSnap) return;\n      if (!wasCollapsed && deltaX < -8) {\n        this.applyToggle(true);\n        this.didSnap = true;\n      } else if (wasCollapsed && deltaX > 8) {\n        this.applyToggle(false);\n        this.didSnap = true;\n      }\n    };\n\n    const onUp = () => {\n      if (!this.didSnap && this.lastDeltaX < 3) {\n        this.applyToggle(!wasCollapsed);\n      }\n      this.clearResizeDrag();\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\n  }\n\n  private clearResizeDrag() {\n    if (this.globalMouseMoveHandler)\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    if (this.globalMouseUpHandler) window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    this.globalMouseMoveHandler = undefined;\n    this.globalMouseUpHandler = undefined;\n    this.isDragging = false;\n    this.showEdgeOverlay = false;\n    if (this.dragBodyStyle) {\n      document.body.style.cursor = this.dragBodyStyle.cursor;\n      document.body.style.userSelect = this.dragBodyStyle.userSelect;\n      this.dragBodyStyle = undefined;\n    }\n  }\n\n  private renderFooterAction(isDashboardChrome: boolean) {\n    // Short chrome labels — same string for tip + aria (not \"Open/Go to …\").\n    const footerLabel = isDashboardChrome ? this.settingsLabel : this.dashboardLabel;\n    return (\n      <ds-tooltip label={footerLabel} side=\"right\" size=\"sm\">\n        <ds-button-unfilled\n          variant=\"icon\"\n          class=\"panel-nav__footer-btn\"\n          icon={isDashboardChrome ? 'Gear' : 'Dashboard'}\n          activeFill={false}\n          hasBorder={false}\n          background=\"chrome\"\n          focusTabIndex={this.rovingIndex === this.getFooterRovingIndex() ? 0 : -1}\n          aria-label={footerLabel}\n          onDsClick={() => this.handleFooterAction()}\n          onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getFooterRovingIndex())}\n          onFocusin={() => {\n            this.rovingIndex = this.getFooterRovingIndex();\n          }}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  private renderFooterUser(collapsed: boolean, userName: string, userInitial: string) {\n    // Always wrap so collapse morph CSS can transition on a stable button node.\n    // Tip only when collapsed (empty label → ds-tooltip skips show).\n    const tipLabel = collapsed ? this.accountLabel : '';\n    const userButton = (\n      <button\n        type=\"button\"\n        id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n        class={{\n          'panel-nav__item': true,\n          'panel-nav__footer-user': true,\n          'panel-nav__footer-user--menu-expanded': this.accountMenuExpanded,\n          'ds-interaction-fill--surface-open':\n            this.accountMenuSurfaceOpen ?? this.accountMenuExpanded,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n          'ds-interaction-fill--on-chrome': true,\n        }}\n        tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}\n        aria-label={this.accountLabel}\n        aria-haspopup=\"menu\"\n        aria-expanded={String(this.accountMenuExpanded)}\n        onClick={e => this.handleUserAction(e)}\n        onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}\n        onFocus={() => {\n          this.rovingIndex = this.getUserRovingIndex();\n        }}\n      >\n        <ds-text\n          class=\"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text ds-control--md\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          emphasis\n          color=\"inherit\"\n          lineTruncation={1}\n        >\n          {userName}\n        </ds-text>\n        <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n          <span class=\"panel-nav__footer-icon-expanded\">\n            <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n          </span>\n          <span class=\"panel-nav__footer-icon-collapsed\">\n            <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n            <ds-text\n              class=\"panel-nav__user-initial\"\n              as=\"span\"\n              variant=\"text-caption\"\n              emphasis\n              align=\"center\"\n              color=\"inherit\"\n            >\n              {userInitial}\n            </ds-text>\n          </span>\n        </span>\n      </button>\n    );\n\n    return (\n      <ds-tooltip label={tipLabel} side=\"right\" size=\"sm\">\n        {userButton}\n      </ds-tooltip>\n    );\n  }\n\n  private renderParentItem(item: PanelNavItem, rovingPosition: number, collapsed: boolean) {\n    const isActive = item.id === this.effectiveActiveId;\n    const hasChildRoutes = (item.children?.length ?? 0) > 0;\n    const disclosure = this.presentation === 'nested' && hasChildRoutes;\n    const expanded = disclosure\n      ? collapsed\n        ? this.flyoutParentId === item.id\n        : this.expandedParentId === item.id\n      : false;\n\n    const itemContent = [\n      <span class=\"panel-nav__item-icon\">\n        <ds-icon name={item.icon} size=\"md\" color=\"inherit\" />\n      </span>,\n      <ds-text\n        class=\"panel-nav__item-label panel-nav__item-label-text ds-control--md\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        emphasis={isActive}\n        color=\"inherit\"\n        lineTruncation={1}\n      >\n        {item.label}\n      </ds-text>,\n      item.dot && (\n        <span class=\"panel-nav__item-dot-box\" aria-hidden=\"true\">\n          <ds-badge\n            class=\"panel-nav__item-dot\"\n            variant=\"dot\"\n            hasRing={collapsed}\n            label=\"\"\n            style={{ '--_badge-bg': 'var(--_nav-dot)' }}\n          />\n        </span>\n      ),\n    ];\n\n    const sharedProps = {\n      id: disclosure ? this.parentAnchorId(item.id) : undefined,\n      class: {\n        'panel-nav__item': true,\n        'panel-nav__parent': disclosure,\n        'panel-nav__parent--expanded': expanded,\n        'panel-nav__parent--flyout-active': collapsed && this.flyoutParentId === item.id,\n        'ds-interaction-fill--surface-open': collapsed && this.flyoutParentId === item.id,\n        'panel-nav__parent--muted':\n          this.presentation === 'nested' &&\n          !collapsed &&\n          this.expandedParentId !== '' &&\n          this.expandedParentId !== item.id,\n        'panel-nav__item--active': isActive,\n        'ds-focus-ring-inset': true,\n        'ds-interaction-fill': true,\n        'ds-interaction-fill--on-chrome': true,\n      },\n      'aria-current': !disclosure && isActive ? ('page' as const) : undefined,\n      'aria-expanded': disclosure ? String(expanded) : undefined,\n      'aria-controls': disclosure && expanded ? this.childListId(item.id) : undefined,\n      'aria-haspopup': disclosure && collapsed ? ('menu' as const) : undefined,\n      'data-panel-nav-roving': '',\n      tabIndex: rovingPosition === this.rovingIndex ? 0 : -1,\n      onClick: (event: MouseEvent) =>\n        hasChildRoutes\n          ? this.activateParent(item, event.detail === 0)\n          : this.handleItemClick(item.id),\n      onKeyDown: (e: KeyboardEvent) => this.handleRovingKeyDown(e, rovingPosition),\n      onFocus: () => {\n        this.rovingIndex = rovingPosition;\n      },\n    };\n\n    const href = resolveSafeUrl(\n      hasChildRoutes ? firstEnabledPanelNavChild(item.children)?.href : item.href\n    );\n    const useAnchor = this.routerMode === 'anchor' && href && !(disclosure && collapsed);\n    const control = useAnchor ? (\n      <a {...sharedProps} href={href}>\n        {itemContent}\n      </a>\n    ) : (\n      <button {...sharedProps} type=\"button\">\n        {itemContent}\n      </button>\n    );\n\n    // Always wrap so label fade CSS can transition on a stable item node.\n    // Tip only when collapsed (empty label → ds-tooltip skips show).\n    return (\n      <ds-tooltip label={collapsed ? item.label : ''} side=\"right\" size=\"sm\">\n        {control}\n      </ds-tooltip>\n    );\n  }\n\n  private renderChildItem(\n    parent: PanelNavItem,\n    child: PanelNavChildItem,\n    rovingPosition: number | undefined,\n    childIndex: number,\n    childReverseIndex: number\n  ) {\n    const isActive =\n      parent.id === this.effectiveActiveId && child.id === this.effectiveActiveChildId;\n    const inactive = child.isInactive === true;\n    const content = [\n      <ds-text\n        class=\"panel-nav__item-label panel-nav__item-label-text ds-control--md\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        emphasis={isActive}\n        color=\"inherit\"\n        lineTruncation={1}\n      >\n        {child.label}\n      </ds-text>,\n      child.dot && (\n        <span class=\"panel-nav__child-dot\" aria-hidden=\"true\">\n          <ds-badge\n            variant=\"dot\"\n            background=\"var(--_nav-bg)\"\n            label=\"\"\n            style={{ '--_badge-bg': 'var(--_nav-dot)' }}\n          />\n        </span>\n      ),\n    ];\n    const sharedProps = {\n      class: {\n        'panel-nav__item': true,\n        'panel-nav__child': true,\n        'ds-nav-disclosure__item': true,\n        'panel-nav__child--active': isActive,\n        'panel-nav__child--inactive': inactive,\n        'panel-nav__item--active': isActive,\n        'ds-focus-ring-inset': !inactive,\n        'ds-interaction-fill': !inactive,\n        'ds-interaction-fill--on-chrome': !inactive,\n      },\n      'aria-current': isActive ? ('page' as const) : undefined,\n      'aria-disabled': inactive ? 'true' : undefined,\n      'data-panel-nav-roving': inactive || rovingPosition === undefined ? undefined : '',\n      style: {\n        '--_panel-nav-child-index': String(childIndex),\n        '--_panel-nav-child-reverse-index': String(childReverseIndex),\n        '--ds-nav-disclosure-index': String(childIndex),\n        '--ds-nav-disclosure-reverse-index': String(childReverseIndex),\n      },\n      tabIndex: !inactive && rovingPosition === this.rovingIndex ? 0 : -1,\n      onClick: () => this.emitChildSelect(parent, child),\n      onKeyDown: (event: KeyboardEvent) =>\n        rovingPosition === undefined ? undefined : this.handleRovingKeyDown(event, rovingPosition),\n      onFocus: () => {\n        if (rovingPosition !== undefined) this.rovingIndex = rovingPosition;\n      },\n    };\n    const href = resolveSafeUrl(child.href);\n    const useAnchor = !inactive && this.routerMode === 'anchor' && href;\n\n    return useAnchor ? (\n      <a {...sharedProps} href={href}>\n        {content}\n      </a>\n    ) : (\n      <button {...sharedProps} type=\"button\" disabled={inactive}>\n        {content}\n      </button>\n    );\n  }\n\n  private renderFlyout() {\n    const parent = this.getAllItems().find(item => item.id === this.flyoutParentId);\n    if (!parent?.children?.length) return null;\n    return (\n      <ds-menu\n        id={this.childListId(parent.id)}\n        open={this.flyoutOpen}\n        side={PANEL_NAV_CHILD_MENU_PLACEMENT.side}\n        align={PANEL_NAV_CHILD_MENU_PLACEMENT.align}\n        anchorAlignment={PANEL_NAV_CHILD_MENU_PLACEMENT.anchorAlignment}\n        sideOffset={PANEL_NAV_CHILD_MENU_PLACEMENT.sideOffset}\n        alignOffset={PANEL_NAV_CHILD_MENU_PLACEMENT.alignOffset}\n        anchorId={this.parentAnchorId(parent.id)}\n        selectionMode=\"single\"\n        menuLabel={`${parent.label} sections`}\n        initialFocusVisible={this.flyoutInitialFocusVisible}\n        sections={[\n          {\n            items: parent.children.map(child => ({\n              label: child.label,\n              value: child.id,\n              dot: child.dot,\n              isInactive: child.isInactive,\n              isSelected:\n                parent.id === this.effectiveActiveId && child.id === this.effectiveActiveChildId,\n            })),\n          },\n        ]}\n        onDsSelect={this.handleFlyoutSelect}\n        onDsClose={this.closeFlyout}\n        onDsAfterClose={this.handleFlyoutAfterClose}\n      />\n    );\n  }\n\n  render() {\n    const chromeStyle = this.renderedStyle;\n    const isDashboardChrome = chromeStyle === 'dashboard';\n    const isDashboard = this.navStyle === 'dashboard';\n    const collapsed = this.collapsed || this.viewportNarrow;\n    const { userName, userInitial } = this;\n\n    const navCls: Record<string, boolean> = {\n      'panel-nav': true,\n      'ds-control--md': true,\n      'panel-nav--dashboard': isDashboard,\n      'panel-nav--settings': !isDashboard,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--breakpoint-locked': this.viewportNarrow,\n      'panel-nav--animating': this.isAnimating,\n    };\n\n    return (\n      <Host style={{ display: 'block', position: 'relative' }}>\n        <nav\n          class={navCls}\n          aria-label={\n            isDashboardChrome ? this.dashboardNavigationLabel : this.settingsNavigationLabel\n          }\n        >\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header ds-chrome-row ds-chrome-space--md\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill ds-interaction-fill--on-chrome\"\n              disabled={this.viewportNarrow}\n              tabIndex={!this.viewportNarrow && this.rovingIndex === 0 ? 0 : -1}\n              onClick={() => this.handleToggle()}\n              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, 0)}\n              onFocus={() => {\n                this.rovingIndex = 0;\n              }}\n              aria-label={collapsed ? this.expandNavigationLabel : this.collapseNavigationLabel}\n              aria-expanded={collapsed ? 'false' : 'true'}\n            >\n              {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n              <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n                <svg\n                  class=\"panel-nav__m-mark\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\n              </span>\n              {/* Collapse / expand icon — revealed on hover via CSS */}\n              <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n                <ds-icon\n                  name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n                  size=\"md\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n          </div>\n\n          {/* ── Scrollable body ── */}\n          <div\n            class={{\n              'panel-nav__body': true,\n              'ds-chrome-column': true,\n              'ds-chrome-space--md': true,\n              'ds-scrollbar-hidden': true,\n              'ds-focus-ring': this.bodyScrollable,\n              ...scrollEdgeFadeClassMap({ edges: 'bottom' }),\n            }}\n            ref={element => {\n              const next = (element as HTMLElement) ?? undefined;\n              if (next === this.bodyEl) return;\n              this.bodyEl = next;\n              this.connectScrollRegionObserver();\n            }}\n            role={this.bodyScrollable ? 'region' : undefined}\n            aria-label={this.bodyScrollable ? this.navigationItemsLabel : undefined}\n            tabIndex={this.bodyScrollable ? 0 : undefined}\n          >\n            <div class=\"panel-nav__sections\">\n              {(() => {\n                let rovingPosition = 1;\n                return this.parsedGroups.map(group => (\n                  <div class=\"panel-nav__group\" key={group.id ?? group.label}>\n                    {group.label && (\n                      <ds-text\n                        class=\"panel-nav__group-label ds-control--md\"\n                        as=\"span\"\n                        variant=\"text-caption\"\n                        emphasis\n                        color=\"inherit\"\n                      >\n                        {group.label}\n                      </ds-text>\n                    )}\n                    {group.items.map((item, itemIndex) => {\n                      const parentPosition = rovingPosition++;\n                      const expanded =\n                        !collapsed &&\n                        this.inlineChildrenExpansionReady &&\n                        item.id === this.expandedParentId &&\n                        (item.children?.length ?? 0) > 0;\n                      const hasGroupSiblings = group.items.length > 1;\n                      const hasDividerBefore = hasGroupSiblings && itemIndex > 0;\n                      const hasDividerAfter =\n                        hasGroupSiblings && itemIndex < group.items.length - 1;\n                      const showBranchDividers = expanded && hasGroupSiblings;\n                      const hasInlineChildren =\n                        this.presentation === 'nested' &&\n                        (!collapsed || this.isAnimating) &&\n                        (item.children?.length ?? 0) > 0;\n                      const children = hasInlineChildren\n                        ? item.children?.map((child, childIndex) => {\n                            const childPosition =\n                              !expanded || child.isInactive ? undefined : rovingPosition++;\n                            return this.renderChildItem(\n                              item,\n                              child,\n                              childPosition,\n                              childIndex,\n                              (item.children?.length ?? 0) - childIndex - 1\n                            );\n                          })\n                        : null;\n                      return (\n                        <div class=\"panel-nav__branch\" key={item.id}>\n                          {hasDividerBefore ? (\n                            <div\n                              key={`${item.id}-divider-before`}\n                              class={{\n                                'panel-nav__branch-divider': true,\n                                'panel-nav__branch-divider--before': true,\n                                'panel-nav__branch-divider--open': showBranchDividers,\n                                'ds-nav-disclosure-divider': true,\n                                'ds-nav-disclosure-divider--open': showBranchDividers,\n                              }}\n                              aria-hidden=\"true\"\n                            >\n                              <div class=\"panel-nav__branch-divider-clip ds-nav-disclosure-divider__clip\">\n                                <span class=\"panel-nav__branch-divider-line\"></span>\n                              </div>\n                            </div>\n                          ) : null}\n                          {this.renderParentItem(item, parentPosition, collapsed)}\n                          {hasInlineChildren ? (\n                            <div\n                              key={`${item.id}-children`}\n                              class={{\n                                'panel-nav__children-accordion': true,\n                                'panel-nav__children-accordion--open': expanded,\n                                'ds-nav-disclosure': true,\n                                'ds-nav-disclosure--open': expanded,\n                              }}\n                              aria-hidden={expanded ? undefined : 'true'}\n                              inert={expanded ? undefined : true}\n                            >\n                              <div\n                                id={this.childListId(item.id)}\n                                class=\"panel-nav__children\"\n                                role=\"group\"\n                                aria-labelledby={this.parentAnchorId(item.id)}\n                              >\n                                {children}\n                              </div>\n                            </div>\n                          ) : null}\n                          {hasDividerAfter ? (\n                            <div\n                              key={`${item.id}-divider-after`}\n                              class={{\n                                'panel-nav__branch-divider': true,\n                                'panel-nav__branch-divider--after': true,\n                                'panel-nav__branch-divider--open': showBranchDividers,\n                                'ds-nav-disclosure-divider': true,\n                                'ds-nav-disclosure-divider--open': showBranchDividers,\n                              }}\n                              aria-hidden=\"true\"\n                            >\n                              <div class=\"panel-nav__branch-divider-clip ds-nav-disclosure-divider__clip\">\n                                <span class=\"panel-nav__branch-divider-line\"></span>\n                              </div>\n                            </div>\n                          ) : null}\n                        </div>\n                      );\n                    })}\n                  </div>\n                ));\n              })()}\n            </div>\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            {this.renderFooterAction(isDashboardChrome)}\n            {this.renderFooterUser(collapsed, userName, userInitial)}\n          </div>\n        </nav>\n\n        {this.renderFlyout()}\n\n        {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n        {!this.viewportNarrow && (\n          <div\n            class={{\n              'panel-nav__resize-handle': true,\n              'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n            }}\n            onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n            onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n            onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  State,\n  Element,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\nimport { CHROME_TRANSITION_END, type ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport {\n  derivePanelNavSelectionFromUrl,\n  firstEnabledPanelNavChild,\n  panelNavWidthTransitionMs,\n  parsePanelNavGroups,\n  resolvePanelNavDisableVt,\n  resolvePanelNavStyle,\n  resolvePanelNavToggle,\n  shouldResyncPanelNavGroups,\n  shouldResyncPanelNavStyle,\n} from './panel-nav-utils';\nimport {\n  PANEL_NAV_USER_MENU_ANCHOR_ID,\n  PANEL_NAV_USER_MENU_PLACEMENT,\n  type PanelNavChildItem,\n  type PanelNavChildSelectDetail,\n  type PanelNavGroup,\n  type PanelNavItem,\n  type PanelNavPresentation,\n  type PanelNavRouterMode,\n  type PanelNavUserActionDetail,\n} from './panel-nav-types';\nimport { PANEL_NAV_CHILD_MENU_PLACEMENT } from '../Menu/menu-placement';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { scrollEdgeFadeClassMap } from '../../utils/scroll-edge-fade';\nimport { labelWithVisibleText } from '../../utils/label-in-name';\nimport { prefersReducedMotion } from '../../utils/resolve-css-time-ms';\nimport { resolveSafeUrl } from '../../utils/safe-url';\n\ntype PanelNavRovingEntry =\n  | { kind: 'parent'; item: PanelNavItem }\n  | { kind: 'child'; parent: PanelNavItem; child: PanelNavChildItem };\n\nlet nextPanelNavInstanceId = 0;\n\n@Component({\n  tag: 'ds-panel-nav',\n  styleUrl: 'PanelNav.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class PanelNav {\n  private readonly instanceId = nextPanelNavInstanceId++;\n  /** Style slot: `dashboard` or `settings`. Colors match for now;\n   *  class hooks reserved for texture/glyph layers. Property: `navStyle`. Attribute: `nav-style`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /** When `true`, style changes apply synchronously — host app owns view transitions. */\n  @Prop() disableViewTransition: boolean = false;\n\n  /** Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute. */\n  @Prop() groups: string | PanelNavGroup[] = '[]';\n\n  /** Flat primary destinations, or nested child-route disclosure. */\n  @Prop({ reflect: true }) presentation: PanelNavPresentation = 'flat';\n\n  /** How items with `href` render:\n   *  - `anchor` (default): native `<a href>` — works with routers that intercept anchors.\n   *  - `event`: always `<button>`; host handles navigation via `dsNavSelect`. */\n  @Prop() routerMode: PanelNavRouterMode = 'anchor';\n\n  /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n  @Prop() activeId: string = '';\n\n  /** ID of the active child route when URL matching is unavailable. */\n  @Prop() activeChildId: string = '';\n\n  /** Whether the nav is in collapsed (icon-only) state.\n   *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */\n  @Prop({ mutable: true }) collapsed: boolean = false;\n\n  /** Viewport width (px) below which the nav locks in icon-only mode. 0 = disabled. */\n  @Prop() breakpoint: number = 0;\n\n  /** `localStorage` key used to persist the collapsed state across page loads.\n   *  When set, collapsed state is restored on mount and written on each toggle. */\n  @Prop() storageKey: string = '';\n\n  /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n   *  When set the component derives the active item by matching item `href` values\n   *  against this string (longest segment-boundary prefix wins), overriding `activeId`. */\n  @Prop() currentUrl: string = '';\n\n  /** Display name for the footer user section */\n  @Prop() userName: string = '';\n\n  /** Single character shown in the collapsed avatar */\n  @Prop() userInitial: string = '';\n\n  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  /** Account disclosure state. Expanded-derived styling is deprecated; use accountMenuSurfaceOpen for the rendered lifetime. */\n  @Prop() accountMenuExpanded: boolean = false;\n  /** External account surface is visible, including exit motion. Omission\n   * preserves the deprecated accountMenuExpanded-derived wash. */\n  @Prop() accountMenuSurfaceOpen: boolean | undefined;\n  @Prop() dashboardNavigationLabel: string = 'Dashboard navigation';\n  @Prop() settingsNavigationLabel: string = 'Settings navigation';\n  @Prop() expandNavigationLabel: string = 'Expand navigation';\n  @Prop() collapseNavigationLabel: string = 'Collapse navigation';\n  /** Localized name for the body when overflow makes it a keyboard-scrollable region. */\n  @Prop() navigationItemsLabel: string = 'Navigation items';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when a nested child route is selected. */\n  @Event() dsNavChildSelect!: EventEmitter<PanelNavChildSelectDetail>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Bubbling lifecycle — `ds-shell-app` pauses chrome metrics during width motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Emitted when the footer left button (gear / dashboard) is clicked. */\n  @Event() dsNavFooterAction!: EventEmitter<void>;\n\n  /** Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`. */\n  @Event() dsNavUserAction!: EventEmitter<PanelNavUserActionDetail>;\n\n  @Element() el!: HTMLElement;\n\n  @State() private renderedStyle: NavChromeStyle = 'dashboard';\n  @State() private parsedGroups: PanelNavGroup[] = [];\n  @State() private isAnimating = false;\n  @State() private rovingIndex: number = 0;\n  @State() private viewportNarrow: boolean = false;\n  @State() private urlDerivedActiveId: string = '';\n  @State() private urlDerivedActiveChildId: string = '';\n  @State() private bodyScrollable = false;\n  @State() private expandedParentId: string = '';\n  @State() private inlineChildrenExpansionReady = true;\n  @State() private flyoutParentId: string = '';\n  @State() private flyoutOpen = false;\n  @State() private flyoutInitialFocusVisible = false;\n\n  private transitionCompletionHandler?: (e: TransitionEvent) => void;\n  private transitionFallbackTimer: number | null = null;\n  private resizeObserver?: ResizeObserver;\n  private scrollRegionObserver?: ResizeObserver;\n  private bodyEl?: HTMLElement;\n  private initialRenderComplete = false;\n  private hasLoaded = false;\n  private readonly connectionTasks = new ConnectionTasks(() => this.el.isConnected);\n  private transitionShell: HTMLElement | null = null;\n  private inlineChildrenExpansionFrame: number | null = null;\n\n  // Drag-to-resize state (not @State — no re-render needed)\n  private isDragging = false;\n  private dragStartX = 0;\n  private didSnap = false;\n  private lastDeltaX = 0;\n  private edgeOverlayTimer: number | null = null;\n  private globalMouseMoveHandler?: (e: MouseEvent) => void;\n  private globalMouseUpHandler?: () => void;\n  private dragBodyStyle?: { cursor: string; userSelect: string };\n\n  @State() private showEdgeOverlay = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n\n  /** The ID that should be treated as active. `currentUrl` matching takes precedence\n   *  over `activeId` when both are present. */\n  private get effectiveActiveId(): string {\n    return this.urlDerivedActiveId || this.activeId;\n  }\n\n  private get effectiveActiveChildId(): string {\n    return this.urlDerivedActiveChildId || this.activeChildId;\n  }\n\n  private get collapsedPresentation(): boolean {\n    return this.collapsed || this.viewportNarrow;\n  }\n\n  private get effectiveDisableViewTransition(): boolean {\n    return resolvePanelNavDisableVt(\n      this.disableViewTransition,\n      this.el.getAttribute('disable-view-transition')\n    );\n  }\n\n  @Watch('collapsed')\n  onCollapsedChange(next: boolean, prev: boolean | undefined) {\n    if (prev === undefined || !this.initialRenderComplete) return;\n    this.stageInlineChildrenExpansion(\n      prev && !next && !this.viewportNarrow && this.presentation === 'nested'\n    );\n    this.flyoutParentId = '';\n    this.flyoutOpen = false;\n    this.syncExpandedParent();\n    this.rovingIndex = this.getFirstRovingIndex();\n    this.startCollapseAnimation();\n  }\n\n  @Watch('viewportNarrow')\n  onViewportNarrowChange(next: boolean, prev: boolean | undefined) {\n    if (prev === undefined || !this.initialRenderComplete) return;\n    this.stageInlineChildrenExpansion(\n      prev && !next && !this.collapsed && this.presentation === 'nested'\n    );\n    this.flyoutParentId = '';\n    this.flyoutOpen = false;\n    if (next || this.rovingIndex > this.getVisibleRovingEntries().length) {\n      this.rovingIndex = this.getFirstRovingIndex();\n    }\n    this.startCollapseAnimation();\n  }\n\n  @Watch('breakpoint')\n  onBreakpointChange() {\n    this.disconnectResizeObserver();\n    if (this.el.isConnected) {\n      this.viewportNarrow = this.isViewportNarrow();\n      if (this.effectiveBreakpoint() > 0) this.connectResizeObserver();\n    }\n  }\n\n  @Watch('groups')\n  onGroupsChange(val: string | PanelNavGroup[]) {\n    this.parsedGroups = parsePanelNavGroups(val);\n    this.rovingIndex = 0;\n    this.syncActiveFromUrl();\n    this.syncExpandedParent();\n  }\n\n  @Watch('presentation')\n  onPresentationChange() {\n    this.stageInlineChildrenExpansion(false);\n    this.flyoutParentId = '';\n    this.flyoutOpen = false;\n    this.syncExpandedParent();\n    this.rovingIndex = this.getFirstRovingIndex();\n  }\n\n  @Watch('activeId')\n  @Watch('activeChildId')\n  @Watch('urlDerivedActiveId')\n  @Watch('urlDerivedActiveChildId')\n  onActiveIdChange() {\n    this.syncExpandedParent();\n  }\n\n  @Watch('currentUrl')\n  onCurrentUrlChange() {\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('navStyle')\n  onNavStyleChange(newVal: NavChromeStyle) {\n    this.renderedStyle = newVal;\n  }\n\n  componentWillLoad() {\n    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));\n    this.viewportNarrow = this.isViewportNarrow();\n    if (this.storageKey) {\n      try {\n        const stored = localStorage.getItem(this.storageKey);\n        if (stored !== null) this.collapsed = stored === 'true';\n      } catch {\n        /* localStorage unavailable */\n      }\n    }\n    this.onGroupsChange(this.groups);\n    this.syncActiveFromUrl();\n  }\n\n  connectedCallback() {\n    if (this.hasLoaded) this.connectResources();\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.connectResources();\n  }\n\n  private connectResources() {\n    if (!this.el.isConnected) return;\n    this.syncHostPropsIfNeeded();\n    this.viewportNarrow = this.isViewportNarrow();\n    this.syncExpandedParent();\n    this.rovingIndex = this.getFirstRovingIndex();\n    this.scheduleDeferredHostPropSync();\n    if (this.effectiveBreakpoint() > 0) this.connectResizeObserver();\n    this.connectScrollRegionObserver();\n    this.updateBodyScrollable();\n    this.initialRenderComplete = true;\n  }\n\n  componentDidRender() {\n    if (!this.el.isConnected) return;\n    this.updateBodyScrollable();\n    this.scheduleInlineChildrenExpansion();\n  }\n\n  disconnectedCallback() {\n    this.connectionTasks.cancel();\n    this.initialRenderComplete = false;\n    this.disconnectResizeObserver();\n    this.disconnectScrollRegionObserver();\n    this.clearInlineChildrenExpansionFrame();\n    this.finishCollapseAnimation(this.el.querySelector('.panel-nav') as HTMLElement | null);\n    this.clearEdgeOverlayTimer();\n    this.clearResizeDrag();\n    this.stageInlineChildrenExpansion(false);\n    this.flyoutParentId = '';\n    this.flyoutOpen = false;\n  }\n\n  private startCollapseAnimation() {\n    if (!this.el.isConnected || this.isAnimating) return;\n    this.isAnimating = true;\n    this.transitionShell = this.el.closest('ds-shell-app');\n    this.dsChromeTransitionStart.emit({ source: 'panel-nav' });\n    const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n    this.clearCollapseAnimationCompletion(panel);\n    this.transitionCompletionHandler = (e: TransitionEvent) => {\n      if (e.target === panel && (e.propertyName === 'width' || e.propertyName === 'min-width')) {\n        this.finishCollapseAnimation(panel);\n      }\n    };\n    panel?.addEventListener('transitionend', this.transitionCompletionHandler);\n    panel?.addEventListener('transitioncancel', this.transitionCompletionHandler);\n    this.connectionTasks.frame(() => {\n      this.connectionTasks.frame(() => {\n        if (!this.isAnimating) return;\n        if (!panel) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n\n        const fallbackMs = panelNavWidthTransitionMs(getComputedStyle(panel));\n        if (fallbackMs <= 0) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishCollapseAnimation(panel);\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private stageInlineChildrenExpansion(stage: boolean) {\n    this.clearInlineChildrenExpansionFrame();\n    this.inlineChildrenExpansionReady = !stage;\n  }\n\n  private scheduleInlineChildrenExpansion() {\n    if (!this.el.isConnected || this.inlineChildrenExpansionReady || this.collapsedPresentation)\n      return;\n    this.clearInlineChildrenExpansionFrame();\n    this.inlineChildrenExpansionFrame =\n      this.connectionTasks.frame(() => {\n        this.inlineChildrenExpansionFrame = null;\n        if (this.collapsedPresentation) return;\n\n        // Commit the newly mounted accordion's closed geometry before opening it.\n        // Without this read, the browser can insert it directly at 1fr and skip motion.\n        this.el\n          .querySelector<HTMLElement>('.panel-nav__children-accordion')\n          ?.getBoundingClientRect();\n        this.inlineChildrenExpansionReady = true;\n      }) ?? null;\n  }\n\n  private clearInlineChildrenExpansionFrame() {\n    if (this.inlineChildrenExpansionFrame === null) return;\n    this.connectionTasks.cancelFrame(this.inlineChildrenExpansionFrame);\n    this.inlineChildrenExpansionFrame = null;\n  }\n\n  private finishCollapseAnimation(panel: HTMLElement | null) {\n    const wasAnimating = this.isAnimating;\n    const shell = this.transitionShell;\n    this.transitionShell = null;\n    this.clearCollapseAnimationCompletion(panel);\n    if (!wasAnimating) return;\n    this.isAnimating = false;\n    if (shell && this.el.closest('ds-shell-app') !== shell) {\n      // Removal must release the shell that received the matching start event.\n      shell.dispatchEvent(\n        new CustomEvent<ChromeTransitionDetail>(CHROME_TRANSITION_END, {\n          detail: { source: 'panel-nav' },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    } else {\n      this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });\n    }\n  }\n\n  private clearCollapseAnimationCompletion(panel: HTMLElement | null) {\n    if (this.transitionCompletionHandler) {\n      panel?.removeEventListener('transitionend', this.transitionCompletionHandler);\n      panel?.removeEventListener('transitioncancel', this.transitionCompletionHandler);\n      this.transitionCompletionHandler = undefined;\n    }\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  private effectiveBreakpoint(): number {\n    if (this.breakpoint > 0) return this.breakpoint;\n    const attributeValue = Number(this.el.getAttribute('breakpoint') ?? 0);\n    return Number.isFinite(attributeValue) && attributeValue > 0 ? attributeValue : 0;\n  }\n\n  private isViewportNarrow(): boolean {\n    const breakpoint = this.effectiveBreakpoint();\n    return typeof window !== 'undefined' && breakpoint > 0 && window.innerWidth < breakpoint;\n  }\n\n  private connectResizeObserver() {\n    this.disconnectResizeObserver();\n    this.viewportNarrow = this.isViewportNarrow();\n    this.resizeObserver = new ResizeObserver(() => {\n      this.viewportNarrow = this.isViewportNarrow();\n    });\n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  private disconnectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  private connectScrollRegionObserver() {\n    this.disconnectScrollRegionObserver();\n    if (!this.bodyEl || typeof ResizeObserver === 'undefined') return;\n    this.scrollRegionObserver = new ResizeObserver(() => this.updateBodyScrollable());\n    this.scrollRegionObserver.observe(this.bodyEl);\n  }\n\n  private disconnectScrollRegionObserver() {\n    this.scrollRegionObserver?.disconnect();\n    this.scrollRegionObserver = undefined;\n  }\n\n  private updateBodyScrollable() {\n    if (!this.el.isConnected) return;\n    const next = Boolean(this.bodyEl && this.bodyEl.scrollHeight > this.bodyEl.clientHeight + 1);\n    if (next !== this.bodyScrollable) this.bodyScrollable = next;\n  }\n\n  /** Derive active ID from the current URL by matching item `href` values.\n   *  Uses longest segment-boundary prefix match. */\n  private syncActiveFromUrl() {\n    if (!this.currentUrl) {\n      this.urlDerivedActiveId = '';\n      this.urlDerivedActiveChildId = '';\n      return;\n    }\n    const selection = derivePanelNavSelectionFromUrl(this.currentUrl, this.getAllItems());\n    this.urlDerivedActiveId = selection.parentId;\n    this.urlDerivedActiveChildId = selection.childId;\n  }\n\n  private syncExpandedParent() {\n    const active = this.getAllItems().find(item => item.id === this.effectiveActiveId);\n    this.expandedParentId =\n      this.presentation === 'nested' && active?.children?.length ? active.id : '';\n  }\n\n  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    if (shouldResyncPanelNavStyle(this.renderedStyle, this.navStyle)) {\n      this.renderedStyle = this.navStyle;\n    }\n\n    if (shouldResyncPanelNavGroups(this.parsedGroups, this.groups)) {\n      this.onGroupsChange(this.groups);\n    } else if (this.currentUrl) {\n      this.syncActiveFromUrl();\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = PanelNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        this.connectionTasks.frame(tick);\n      }\n    };\n    this.connectionTasks.microtask(tick);\n  }\n\n  /** Centralised toggle: updates the desktop preference unless breakpoint-locked. */\n  private applyToggle(next: boolean) {\n    if (this.viewportNarrow) return;\n    this.collapsed = next;\n    if (this.storageKey) {\n      try {\n        localStorage.setItem(this.storageKey, String(next));\n      } catch {\n        /* unavailable */\n      }\n    }\n    this.dsNavToggle.emit(next);\n  }\n\n  private getAllItems(): PanelNavItem[] {\n    return this.parsedGroups.flatMap(g => g.items);\n  }\n\n  private getVisibleRovingEntries(): PanelNavRovingEntry[] {\n    return this.getAllItems().flatMap<PanelNavRovingEntry>(item => {\n      const parent: PanelNavRovingEntry = { kind: 'parent', item };\n      if (\n        this.presentation !== 'nested' ||\n        this.collapsedPresentation ||\n        item.id !== this.expandedParentId ||\n        !item.children?.length\n      ) {\n        return [parent];\n      }\n      return [\n        parent,\n        ...item.children\n          .filter(child => !child.isInactive)\n          .map<PanelNavRovingEntry>(child => ({ kind: 'child', parent: item, child })),\n      ];\n    });\n  }\n\n  private getFirstRovingIndex(): number {\n    return this.viewportNarrow ? 1 : 0;\n  }\n\n  private getFooterRovingIndex(): number {\n    return 1 + this.getVisibleRovingEntries().length;\n  }\n\n  private getUserRovingIndex(): number {\n    return this.getFooterRovingIndex() + 1;\n  }\n\n  private getRovingElement(index: number): HTMLElement | null {\n    const itemCount = this.getVisibleRovingEntries().length;\n    if (index === 0) {\n      return this.viewportNarrow ? null : this.el.querySelector('.panel-nav__header-btn');\n    }\n    if (index >= 1 && index <= itemCount) {\n      const items = this.el.querySelectorAll<HTMLElement>(\n        '.panel-nav__body [data-panel-nav-roving]'\n      );\n      return items[index - 1] ?? null;\n    }\n    if (index === this.getFooterRovingIndex()) {\n      return this.el.querySelector('.panel-nav__footer-btn .button-unfilled');\n    }\n    if (index === this.getUserRovingIndex()) {\n      return this.el.querySelector('.panel-nav__footer-user');\n    }\n    return null;\n  }\n\n  private focusRovingAt(index: number) {\n    this.rovingIndex = index;\n    this.getRovingElement(index)?.focus({ preventScroll: true });\n  }\n\n  private activateRovingIndex(index: number, keyboard = false) {\n    const entries = this.getVisibleRovingEntries();\n    const itemCount = entries.length;\n    if (index === 0) {\n      this.handleToggle();\n      return;\n    }\n    if (index >= 1 && index <= itemCount) {\n      const entry = entries[index - 1];\n      if (!entry) return;\n      if (entry.kind === 'child') {\n        this.emitChildSelect(entry.parent, entry.child);\n      } else if (entry.item.children?.length) {\n        this.activateParent(entry.item, keyboard);\n      } else {\n        this.handleItemClick(entry.item.id);\n      }\n      return;\n    }\n    if (index === this.getFooterRovingIndex()) {\n      this.handleFooterAction();\n      return;\n    }\n    if (index === this.getUserRovingIndex()) {\n      const anchor = this.el.querySelector(\n        `#${PANEL_NAV_USER_MENU_ANCHOR_ID}`\n      ) as HTMLElement | null;\n      if (anchor)\n        this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n    }\n  }\n\n  private handleRovingKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.activateRovingIndex(index, true);\n      return;\n    }\n\n    const footerIdx = this.getFooterRovingIndex();\n    const userIdx = this.getUserRovingIndex();\n    const firstIdx = this.getFirstRovingIndex();\n    let next: number | undefined;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        if (index === userIdx) return;\n        if (index === footerIdx) next = userIdx;\n        else next = index + 1;\n        break;\n      case 'ArrowUp':\n        if (index === firstIdx) return;\n        if (index === userIdx) next = footerIdx;\n        else if (index === footerIdx) next = footerIdx - 1;\n        else next = index - 1;\n        break;\n      case 'ArrowRight':\n        if (index === footerIdx) next = userIdx;\n        else return;\n        break;\n      case 'ArrowLeft':\n        if (index === userIdx) next = footerIdx;\n        else return;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = firstIdx;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = userIdx;\n        break;\n      default:\n        return;\n    }\n\n    if (next === undefined || next === index) return;\n    e.preventDefault();\n    this.focusRovingAt(next);\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private emitChildSelect(parent: PanelNavItem, child: PanelNavChildItem) {\n    if (child.isInactive) return;\n    this.dsNavChildSelect.emit({\n      parentId: parent.id,\n      childId: child.id,\n      href: child.href,\n    });\n  }\n\n  private followFlyoutAnchor(child: PanelNavChildItem) {\n    const href = resolveSafeUrl(child.href);\n    if (this.routerMode !== 'anchor' || !href) return;\n    const anchor = this.el.ownerDocument.createElement('a');\n    anchor.href = href;\n    anchor.hidden = true;\n    this.el.append(anchor);\n    anchor.click();\n    anchor.remove();\n  }\n\n  private activateParent(parent: PanelNavItem, keyboard = false) {\n    if (this.presentation === 'nested') {\n      this.expandedParentId = parent.id;\n      if (this.collapsedPresentation) {\n        if (this.flyoutParentId === parent.id && this.flyoutOpen) {\n          this.closeFlyout();\n          return;\n        }\n        this.flyoutInitialFocusVisible = keyboard;\n        this.flyoutParentId = parent.id;\n        this.flyoutOpen = true;\n        return;\n      }\n    }\n\n    const child = firstEnabledPanelNavChild(parent.children);\n    if (child) this.emitChildSelect(parent, child);\n  }\n\n  private parentAnchorId(parentId: string): string {\n    return `panel-nav-parent-${this.instanceId}-${parentId.replace(/[^a-zA-Z0-9_-]/g, '-')}`;\n  }\n\n  private childListId(parentId: string): string {\n    return `panel-nav-children-${this.instanceId}-${parentId.replace(/[^a-zA-Z0-9_-]/g, '-')}`;\n  }\n\n  private closeFlyout = () => {\n    this.flyoutOpen = false;\n    this.flyoutInitialFocusVisible = false;\n  };\n\n  private handleFlyoutAfterClose = () => {\n    if (!this.flyoutOpen) this.flyoutParentId = '';\n  };\n\n  private handleFlyoutSelect = (event: CustomEvent<MenuItemData>) => {\n    const parent = this.getAllItems().find(item => item.id === this.flyoutParentId);\n    const child = parent?.children?.find(item => item.id === event.detail?.value);\n    if (!parent || !child) return;\n    this.emitChildSelect(parent, child);\n    this.followFlyoutAnchor(child);\n    this.closeFlyout();\n  };\n\n  private handleToggle() {\n    const next = resolvePanelNavToggle(this.collapsed, this.viewportNarrow);\n    if (next !== null) this.applyToggle(next);\n  }\n\n  /** Toggle the desktop preference. No-op while the breakpoint locks the panel collapsed. */\n  @Method()\n  async toggleCollapsed() {\n    this.handleToggle();\n  }\n\n  private handleFooterAction() {\n    this.dsNavFooterAction.emit();\n  }\n\n  private handleUserAction(e: MouseEvent) {\n    const anchor = e.currentTarget as HTMLElement;\n    this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n  }\n\n  private clearEdgeOverlayTimer() {\n    if (this.edgeOverlayTimer !== null) {\n      window.clearTimeout(this.edgeOverlayTimer);\n      this.edgeOverlayTimer = null;\n    }\n  }\n\n  private handleResizeHandleMouseEnter() {\n    this.clearEdgeOverlayTimer();\n    if (prefersReducedMotion()) {\n      this.showEdgeOverlay = true;\n      return;\n    }\n    this.edgeOverlayTimer = window.setTimeout(() => {\n      this.showEdgeOverlay = true;\n      this.edgeOverlayTimer = null;\n    }, 500);\n  }\n\n  private handleResizeHandleMouseLeave() {\n    if (this.isDragging) return;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n  }\n\n  private handleResizeHandleMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const wasCollapsed = this.collapsed || this.viewportNarrow;\n    this.isDragging = true;\n    this.dragStartX = e.clientX;\n    this.didSnap = false;\n    this.lastDeltaX = 0;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n\n    this.dragBodyStyle = {\n      cursor: document.body.style.cursor,\n      userSelect: document.body.style.userSelect,\n    };\n    document.body.style.cursor = 'ew-resize';\n    document.body.style.userSelect = 'none';\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      this.lastDeltaX = Math.abs(deltaX);\n      if (this.didSnap) return;\n      if (!wasCollapsed && deltaX < -8) {\n        this.applyToggle(true);\n        this.didSnap = true;\n      } else if (wasCollapsed && deltaX > 8) {\n        this.applyToggle(false);\n        this.didSnap = true;\n      }\n    };\n\n    const onUp = () => {\n      if (!this.didSnap && this.lastDeltaX < 3) {\n        this.applyToggle(!wasCollapsed);\n      }\n      this.clearResizeDrag();\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\n  }\n\n  private clearResizeDrag() {\n    if (this.globalMouseMoveHandler)\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    if (this.globalMouseUpHandler) window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    this.globalMouseMoveHandler = undefined;\n    this.globalMouseUpHandler = undefined;\n    this.isDragging = false;\n    this.showEdgeOverlay = false;\n    if (this.dragBodyStyle) {\n      document.body.style.cursor = this.dragBodyStyle.cursor;\n      document.body.style.userSelect = this.dragBodyStyle.userSelect;\n      this.dragBodyStyle = undefined;\n    }\n  }\n\n  private renderFooterAction(isDashboardChrome: boolean) {\n    // Short chrome labels — same string for tip + aria (not \"Open/Go to …\").\n    const footerLabel = isDashboardChrome ? this.settingsLabel : this.dashboardLabel;\n    return (\n      <ds-tooltip label={footerLabel} side=\"right\" size=\"sm\">\n        <ds-button-unfilled\n          variant=\"icon\"\n          class=\"panel-nav__footer-btn\"\n          icon={isDashboardChrome ? 'Gear' : 'Dashboard'}\n          activeFill={false}\n          hasBorder={false}\n          background=\"chrome\"\n          focusTabIndex={this.rovingIndex === this.getFooterRovingIndex() ? 0 : -1}\n          aria-label={footerLabel}\n          onDsClick={() => this.handleFooterAction()}\n          onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getFooterRovingIndex())}\n          onFocusin={() => {\n            this.rovingIndex = this.getFooterRovingIndex();\n          }}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  private renderFooterUser(collapsed: boolean, userName: string, userInitial: string) {\n    // Always wrap so collapse morph CSS can transition on a stable button node.\n    // Tip only when collapsed (empty label → ds-tooltip skips show).\n    const tipLabel = collapsed ? this.accountLabel : '';\n    const userButton = (\n      <button\n        type=\"button\"\n        id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n        class={{\n          'panel-nav__item': true,\n          'panel-nav__footer-user': true,\n          'panel-nav__footer-user--menu-expanded': this.accountMenuExpanded,\n          'ds-interaction-fill--surface-open':\n            this.accountMenuSurfaceOpen ?? this.accountMenuExpanded,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n          'ds-interaction-fill--on-chrome': true,\n        }}\n        tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}\n        aria-label={labelWithVisibleText(userName, this.accountLabel)}\n        aria-haspopup=\"menu\"\n        aria-expanded={String(this.accountMenuExpanded)}\n        onClick={e => this.handleUserAction(e)}\n        onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}\n        onFocus={() => {\n          this.rovingIndex = this.getUserRovingIndex();\n        }}\n      >\n        <ds-text\n          class=\"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text ds-control--md\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          emphasis\n          color=\"inherit\"\n          lineTruncation={1}\n        >\n          {userName}\n        </ds-text>\n        <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n          <span class=\"panel-nav__footer-icon-expanded\">\n            <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n          </span>\n          <span class=\"panel-nav__footer-icon-collapsed\">\n            <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n            <ds-text\n              class=\"panel-nav__user-initial\"\n              as=\"span\"\n              variant=\"text-caption\"\n              emphasis\n              align=\"center\"\n              color=\"inherit\"\n            >\n              {userInitial}\n            </ds-text>\n          </span>\n        </span>\n      </button>\n    );\n\n    return (\n      <ds-tooltip label={tipLabel} side=\"right\" size=\"sm\">\n        {userButton}\n      </ds-tooltip>\n    );\n  }\n\n  private renderParentItem(item: PanelNavItem, rovingPosition: number, collapsed: boolean) {\n    const isActive = item.id === this.effectiveActiveId;\n    const hasChildRoutes = (item.children?.length ?? 0) > 0;\n    const disclosure = this.presentation === 'nested' && hasChildRoutes;\n    const expanded = disclosure\n      ? collapsed\n        ? this.flyoutParentId === item.id\n        : this.expandedParentId === item.id\n      : false;\n\n    const itemContent = [\n      <span class=\"panel-nav__item-icon\">\n        <ds-icon name={item.icon} size=\"md\" color=\"inherit\" />\n      </span>,\n      <ds-text\n        class=\"panel-nav__item-label panel-nav__item-label-text ds-control--md\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        emphasis={isActive}\n        color=\"inherit\"\n        lineTruncation={1}\n      >\n        {item.label}\n      </ds-text>,\n      item.dot && (\n        <span class=\"panel-nav__item-dot-box\" aria-hidden=\"true\">\n          <ds-badge\n            class=\"panel-nav__item-dot\"\n            variant=\"dot\"\n            hasRing={collapsed}\n            label=\"\"\n            style={{ '--_badge-bg': 'var(--_nav-dot)' }}\n          />\n        </span>\n      ),\n    ];\n\n    const sharedProps = {\n      id: disclosure ? this.parentAnchorId(item.id) : undefined,\n      class: {\n        'panel-nav__item': true,\n        'panel-nav__parent': disclosure,\n        'panel-nav__parent--expanded': expanded,\n        'panel-nav__parent--flyout-active': collapsed && this.flyoutParentId === item.id,\n        'ds-interaction-fill--surface-open': collapsed && this.flyoutParentId === item.id,\n        'panel-nav__parent--muted':\n          this.presentation === 'nested' &&\n          !collapsed &&\n          this.expandedParentId !== '' &&\n          this.expandedParentId !== item.id,\n        'panel-nav__item--active': isActive,\n        'ds-focus-ring-inset': true,\n        'ds-interaction-fill': true,\n        'ds-interaction-fill--on-chrome': true,\n      },\n      'aria-current': !disclosure && isActive ? ('page' as const) : undefined,\n      'aria-expanded': disclosure ? String(expanded) : undefined,\n      'aria-controls': disclosure && expanded ? this.childListId(item.id) : undefined,\n      'aria-haspopup': disclosure && collapsed ? ('menu' as const) : undefined,\n      'data-panel-nav-roving': '',\n      tabIndex: rovingPosition === this.rovingIndex ? 0 : -1,\n      onClick: (event: MouseEvent) =>\n        hasChildRoutes\n          ? this.activateParent(item, event.detail === 0)\n          : this.handleItemClick(item.id),\n      onKeyDown: (e: KeyboardEvent) => this.handleRovingKeyDown(e, rovingPosition),\n      onFocus: () => {\n        this.rovingIndex = rovingPosition;\n      },\n    };\n\n    const href = resolveSafeUrl(\n      hasChildRoutes ? firstEnabledPanelNavChild(item.children)?.href : item.href\n    );\n    const useAnchor = this.routerMode === 'anchor' && href && !(disclosure && collapsed);\n    const control = useAnchor ? (\n      <a {...sharedProps} href={href}>\n        {itemContent}\n      </a>\n    ) : (\n      <button {...sharedProps} type=\"button\">\n        {itemContent}\n      </button>\n    );\n\n    // Always wrap so label fade CSS can transition on a stable item node.\n    // Tip only when collapsed (empty label → ds-tooltip skips show).\n    return (\n      <ds-tooltip label={collapsed ? item.label : ''} side=\"right\" size=\"sm\">\n        {control}\n      </ds-tooltip>\n    );\n  }\n\n  private renderChildItem(\n    parent: PanelNavItem,\n    child: PanelNavChildItem,\n    rovingPosition: number | undefined,\n    childIndex: number,\n    childReverseIndex: number\n  ) {\n    const isActive =\n      parent.id === this.effectiveActiveId && child.id === this.effectiveActiveChildId;\n    const inactive = child.isInactive === true;\n    const content = [\n      <ds-text\n        class=\"panel-nav__item-label panel-nav__item-label-text ds-control--md\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        emphasis={isActive}\n        color=\"inherit\"\n        lineTruncation={1}\n      >\n        {child.label}\n      </ds-text>,\n      child.dot && (\n        <span class=\"panel-nav__child-dot\" aria-hidden=\"true\">\n          <ds-badge\n            variant=\"dot\"\n            background=\"var(--_nav-bg)\"\n            label=\"\"\n            style={{ '--_badge-bg': 'var(--_nav-dot)' }}\n          />\n        </span>\n      ),\n    ];\n    const sharedProps = {\n      class: {\n        'panel-nav__item': true,\n        'panel-nav__child': true,\n        'ds-nav-disclosure__item': true,\n        'panel-nav__child--active': isActive,\n        'panel-nav__child--inactive': inactive,\n        'panel-nav__item--active': isActive,\n        'ds-focus-ring-inset': !inactive,\n        'ds-interaction-fill': !inactive,\n        'ds-interaction-fill--on-chrome': !inactive,\n      },\n      'aria-current': isActive ? ('page' as const) : undefined,\n      'aria-disabled': inactive ? 'true' : undefined,\n      'data-panel-nav-roving': inactive || rovingPosition === undefined ? undefined : '',\n      style: {\n        '--_panel-nav-child-index': String(childIndex),\n        '--_panel-nav-child-reverse-index': String(childReverseIndex),\n        '--ds-nav-disclosure-index': String(childIndex),\n        '--ds-nav-disclosure-reverse-index': String(childReverseIndex),\n      },\n      tabIndex: !inactive && rovingPosition === this.rovingIndex ? 0 : -1,\n      onClick: () => this.emitChildSelect(parent, child),\n      onKeyDown: (event: KeyboardEvent) =>\n        rovingPosition === undefined ? undefined : this.handleRovingKeyDown(event, rovingPosition),\n      onFocus: () => {\n        if (rovingPosition !== undefined) this.rovingIndex = rovingPosition;\n      },\n    };\n    const href = resolveSafeUrl(child.href);\n    const useAnchor = !inactive && this.routerMode === 'anchor' && href;\n\n    return useAnchor ? (\n      <a {...sharedProps} href={href}>\n        {content}\n      </a>\n    ) : (\n      <button {...sharedProps} type=\"button\" disabled={inactive}>\n        {content}\n      </button>\n    );\n  }\n\n  private renderFlyout() {\n    const parent = this.getAllItems().find(item => item.id === this.flyoutParentId);\n    if (!parent?.children?.length) return null;\n    return (\n      <ds-menu\n        id={this.childListId(parent.id)}\n        open={this.flyoutOpen}\n        side={PANEL_NAV_CHILD_MENU_PLACEMENT.side}\n        align={PANEL_NAV_CHILD_MENU_PLACEMENT.align}\n        anchorAlignment={PANEL_NAV_CHILD_MENU_PLACEMENT.anchorAlignment}\n        sideOffset={PANEL_NAV_CHILD_MENU_PLACEMENT.sideOffset}\n        alignOffset={PANEL_NAV_CHILD_MENU_PLACEMENT.alignOffset}\n        anchorId={this.parentAnchorId(parent.id)}\n        selectionMode=\"single\"\n        menuLabel={`${parent.label} sections`}\n        initialFocusVisible={this.flyoutInitialFocusVisible}\n        sections={[\n          {\n            items: parent.children.map(child => ({\n              label: child.label,\n              value: child.id,\n              dot: child.dot,\n              isInactive: child.isInactive,\n              isSelected:\n                parent.id === this.effectiveActiveId && child.id === this.effectiveActiveChildId,\n            })),\n          },\n        ]}\n        onDsSelect={this.handleFlyoutSelect}\n        onDsClose={this.closeFlyout}\n        onDsAfterClose={this.handleFlyoutAfterClose}\n      />\n    );\n  }\n\n  render() {\n    const chromeStyle = this.renderedStyle;\n    const isDashboardChrome = chromeStyle === 'dashboard';\n    const isDashboard = this.navStyle === 'dashboard';\n    const collapsed = this.collapsed || this.viewportNarrow;\n    const { userName, userInitial } = this;\n\n    const navCls: Record<string, boolean> = {\n      'panel-nav': true,\n      'ds-control--md': true,\n      'panel-nav--dashboard': isDashboard,\n      'panel-nav--settings': !isDashboard,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--breakpoint-locked': this.viewportNarrow,\n      'panel-nav--animating': this.isAnimating,\n    };\n\n    return (\n      <Host style={{ display: 'block', position: 'relative' }}>\n        <nav\n          class={navCls}\n          aria-label={\n            isDashboardChrome ? this.dashboardNavigationLabel : this.settingsNavigationLabel\n          }\n        >\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header ds-chrome-row ds-chrome-space--md\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill ds-interaction-fill--on-chrome\"\n              disabled={this.viewportNarrow}\n              tabIndex={!this.viewportNarrow && this.rovingIndex === 0 ? 0 : -1}\n              onClick={() => this.handleToggle()}\n              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, 0)}\n              onFocus={() => {\n                this.rovingIndex = 0;\n              }}\n              aria-label={collapsed ? this.expandNavigationLabel : this.collapseNavigationLabel}\n              aria-expanded={collapsed ? 'false' : 'true'}\n            >\n              {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n              <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n                <svg\n                  class=\"panel-nav__m-mark\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\n              </span>\n              {/* Collapse / expand icon — revealed on hover via CSS */}\n              <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n                <ds-icon\n                  name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n                  size=\"md\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n          </div>\n\n          {/* ── Scrollable body ── */}\n          <div\n            class={{\n              'panel-nav__body': true,\n              'ds-chrome-column': true,\n              'ds-chrome-space--md': true,\n              'ds-scrollbar-hidden': true,\n              'ds-focus-ring': this.bodyScrollable,\n              ...scrollEdgeFadeClassMap({ edges: 'bottom' }),\n            }}\n            ref={element => {\n              const next = (element as HTMLElement) ?? undefined;\n              if (next === this.bodyEl) return;\n              this.bodyEl = next;\n              this.connectScrollRegionObserver();\n            }}\n            role={this.bodyScrollable ? 'region' : undefined}\n            aria-label={this.bodyScrollable ? this.navigationItemsLabel : undefined}\n            tabIndex={this.bodyScrollable ? 0 : undefined}\n          >\n            <div class=\"panel-nav__sections\">\n              {(() => {\n                let rovingPosition = 1;\n                return this.parsedGroups.map(group => (\n                  <div class=\"panel-nav__group\" key={group.id ?? group.label}>\n                    {group.label && (\n                      <ds-text\n                        class=\"panel-nav__group-label ds-control--md\"\n                        as=\"span\"\n                        variant=\"text-caption\"\n                        emphasis\n                        color=\"inherit\"\n                      >\n                        {group.label}\n                      </ds-text>\n                    )}\n                    {group.items.map((item, itemIndex) => {\n                      const parentPosition = rovingPosition++;\n                      const expanded =\n                        !collapsed &&\n                        this.inlineChildrenExpansionReady &&\n                        item.id === this.expandedParentId &&\n                        (item.children?.length ?? 0) > 0;\n                      const hasGroupSiblings = group.items.length > 1;\n                      const hasDividerBefore = hasGroupSiblings && itemIndex > 0;\n                      const hasDividerAfter =\n                        hasGroupSiblings && itemIndex < group.items.length - 1;\n                      const showBranchDividers = expanded && hasGroupSiblings;\n                      const hasInlineChildren =\n                        this.presentation === 'nested' &&\n                        (!collapsed || this.isAnimating) &&\n                        (item.children?.length ?? 0) > 0;\n                      const children = hasInlineChildren\n                        ? item.children?.map((child, childIndex) => {\n                            const childPosition =\n                              !expanded || child.isInactive ? undefined : rovingPosition++;\n                            return this.renderChildItem(\n                              item,\n                              child,\n                              childPosition,\n                              childIndex,\n                              (item.children?.length ?? 0) - childIndex - 1\n                            );\n                          })\n                        : null;\n                      return (\n                        <div class=\"panel-nav__branch\" key={item.id}>\n                          {hasDividerBefore ? (\n                            <div\n                              key={`${item.id}-divider-before`}\n                              class={{\n                                'panel-nav__branch-divider': true,\n                                'panel-nav__branch-divider--before': true,\n                                'panel-nav__branch-divider--open': showBranchDividers,\n                                'ds-nav-disclosure-divider': true,\n                                'ds-nav-disclosure-divider--open': showBranchDividers,\n                              }}\n                              aria-hidden=\"true\"\n                            >\n                              <div class=\"panel-nav__branch-divider-clip ds-nav-disclosure-divider__clip\">\n                                <span class=\"panel-nav__branch-divider-line\"></span>\n                              </div>\n                            </div>\n                          ) : null}\n                          {this.renderParentItem(item, parentPosition, collapsed)}\n                          {hasInlineChildren ? (\n                            <div\n                              key={`${item.id}-children`}\n                              class={{\n                                'panel-nav__children-accordion': true,\n                                'panel-nav__children-accordion--open': expanded,\n                                'ds-nav-disclosure': true,\n                                'ds-nav-disclosure--open': expanded,\n                              }}\n                              aria-hidden={expanded ? undefined : 'true'}\n                              inert={expanded ? undefined : true}\n                            >\n                              <div\n                                id={this.childListId(item.id)}\n                                class=\"panel-nav__children\"\n                                role=\"group\"\n                                aria-labelledby={this.parentAnchorId(item.id)}\n                              >\n                                {children}\n                              </div>\n                            </div>\n                          ) : null}\n                          {hasDividerAfter ? (\n                            <div\n                              key={`${item.id}-divider-after`}\n                              class={{\n                                'panel-nav__branch-divider': true,\n                                'panel-nav__branch-divider--after': true,\n                                'panel-nav__branch-divider--open': showBranchDividers,\n                                'ds-nav-disclosure-divider': true,\n                                'ds-nav-disclosure-divider--open': showBranchDividers,\n                              }}\n                              aria-hidden=\"true\"\n                            >\n                              <div class=\"panel-nav__branch-divider-clip ds-nav-disclosure-divider__clip\">\n                                <span class=\"panel-nav__branch-divider-line\"></span>\n                              </div>\n                            </div>\n                          ) : null}\n                        </div>\n                      );\n                    })}\n                  </div>\n                ));\n              })()}\n            </div>\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            {this.renderFooterAction(isDashboardChrome)}\n            {this.renderFooterUser(collapsed, userName, userInitial)}\n          </div>\n        </nav>\n\n        {this.renderFlyout()}\n\n        {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n        {!this.viewportNarrow && (\n          <div\n            class={{\n              'panel-nav__resize-handle': true,\n              'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n            }}\n            onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n            onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n            onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/types/components/MapClusterMarker/MapClusterMarker.d.ts

@@ -1,6 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class MapClusterMarker {
-    /** Accessible action label. Describe the cluster and what activation does. */
+    /**
+     * Accessible action label. Describe the cluster and what activation does. The visible count is
+     * prefixed when the label does not already contain it.
+     */
     label: string;
     /** Short visible cluster identifier revealed on hover or keyboard focus. */
     caption: string;

package/dist/types/components.d.ts

@@ -2673,7 +2673,7 @@ export namespace Components {
          */
         "dimmed": boolean;
         /**
-          * Accessible action label. Describe the cluster and what activation does.
+          * Accessible action label. Describe the cluster and what activation does. The visible count is prefixed when the label does not already contain it.
          */
         "label": string;
         /**
@@ -10186,7 +10186,7 @@ declare namespace LocalJSX {
          */
         "dimmed"?: boolean;
         /**
-          * Accessible action label. Describe the cluster and what activation does.
+          * Accessible action label. Describe the cluster and what activation does. The visible count is prefixed when the label does not already contain it.
          */
         "label": string;
         /**

package/dist/types/utils/label-in-name.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Builds an accessible name that contains the visible text as a contiguous run of words
+ * (WCAG 2.5.3 Label in Name). Returns `label` unchanged when it already contains the visible
+ * text; otherwise prefixes it, e.g. `("Zain Adeel", "Account")` -> `"Zain Adeel, Account"`.
+ */
+export declare function labelWithVisibleText(visibleText: string, label: string): string;
+//# sourceMappingURL=label-in-name.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "16.3.1",
+  "version": "16.3.2",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/dist/components/p-ClRd39mR.js

@@ -1,2 +0,0 @@
-import{p as e,H as n,c as a,h as i,a as s,t}from"./index.js";import{b as o}from"./p-B0uO3-Dp.js";import{C as r}from"./p-DlsjHRU3.js";import{r as d,p as l,a as c,d as v,s as p,f as h,b as f}from"./p-E0RqkUNq.js";import{c as u}from"./p-mSCnWLhL.js";import{r as m}from"./p-CbrDF2gA.js";import{d as g}from"./p-BEj9uENH.js";import{d as b}from"./p-DKL7n7NM.js";import{d as _}from"./p-C942uiH1.js";import{d as x}from"./p-0XTyQNRG.js";import{d as y}from"./p-C8WKo0sf.js";import{d as w}from"./p-Cn6Ud58k.js";import{d as k}from"./p-CVuSm1Sh.js";import{d as C}from"./p-BQ6p3LFP.js";import{d as z}from"./p-DcwgXLe-.js";import{d as I}from"./p-xHv_RGJh.js";function A(e){const n=Array.isArray(e.edges)?e.edges:[e.edges];const a={"scroll-edge-fade":true,"scroll-edge-fade--scroll-aware":e.scrollAware===true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of n){a[`scroll-edge-fade--${e}`]=true}const{atEnd:i}=e;if(i===true){a["scroll-edge-fade--at-end"]=true}else if(i&&typeof i==="object"){for(const e of n){if(i[e]){a[`scroll-edge-fade--${e}-at-edge`]=true}}}return a}const S={side:"right",align:"end",anchorAlignment:"choice-cell",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:0};const E={side:"right",align:"start",anchorAlignment:"choice-cell",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:0};const D="data-nav-style";function N(e){if(e==="dashboard"||e==="settings")return e;return undefined}function R(e,n,a){const i=N(n);if(i)return i;const s=typeof document!=="undefined"?document.documentElement.getAttribute(D):null;const t=N(s);if(t)return t;return e}function j(e,n){return e!==n}const L="ds-panel-nav-user-menu-anchor";const T=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient(     to bottom,     transparent 0,     #000 var(--ds-scroll-edge-fade-top),     #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),     transparent 100%   );--ds-scroll-edge-fade-inline-mask:linear-gradient(     to right,     transparent 0,     #000 var(--ds-scroll-edge-fade-left),     #000 calc(100% - var(--ds-scroll-edge-fade-right)),     transparent 100%   );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom,       ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,       0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation:none}}}.scroll-edge-fade--at-end.sc-ds-panel-nav,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-panel-nav{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const F=()=>`.sc-ds-panel-nav-h,.sc-ds-panel-nav:where(.ds-table),.sc-ds-panel-nav:where(.tooltip-popup),.sc-ds-panel-nav:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-panel-nav,.ds-control--lg.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav,.ds-control--sm.sc-ds-panel-nav-h,.ds-control--sm.sc-ds-panel-nav,.ds-control--xs.sc-ds-panel-nav-h,.ds-control--xs.sc-ds-panel-nav{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-panel-nav-h,.ds-control--lg.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-panel-nav-h,.ds-control--sm.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-panel-nav-h,.ds-control--xs.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-nav-h,.ds-chrome-space--sm.sc-ds-panel-nav{--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-panel-nav-h,.ds-chrome-space--md.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-nav-h,.ds-chrome-space--lg.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-nav-h,.ds-chrome-row.sc-ds-panel-nav,.ds-chrome-column.sc-ds-panel-nav-h,.ds-chrome-column.sc-ds-panel-nav,.ds-chrome-grid.sc-ds-panel-nav-h,.ds-chrome-grid.sc-ds-panel-nav{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-panel-nav-h,.ds-chrome-row.sc-ds-panel-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-nav-h,.ds-chrome-column.sc-ds-panel-nav{flex-direction:column}.ds-chrome-grid.sc-ds-panel-nav-h,.ds-chrome-grid.sc-ds-panel-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-panel-nav:root,.sc-ds-panel-nav-h,.ds-forced-colors-scope.sc-ds-panel-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-panel-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-panel-nav-h,.ds-focus-ring.sc-ds-panel-nav,.ds-focus-ring-inset.sc-ds-panel-nav-h,.ds-focus-ring-inset.sc-ds-panel-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-panel-nav-h:focus-visible,.ds-focus-ring.sc-ds-panel-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-panel-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-panel-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-panel-nav:root,.sc-ds-panel-nav-h,.ds-forced-colors-scope.sc-ds-panel-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-panel-nav-h::after,.ds-interaction-fill--grouped.sc-ds-panel-nav::after,.ds-interaction-fill--grouped.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-panel-nav-h,.ds-interaction-fill--grouped.sc-ds-panel-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-panel-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-panel-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-panel-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-panel-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-panel-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-panel-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-panel-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-nav{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-panel-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-panel-nav-h,.ds-interaction-fill--on-chrome.sc-ds-panel-nav{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-panel-nav-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-panel-nav:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-panel-nav-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-panel-nav:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.ds-scrollbar-hidden.sc-ds-panel-nav-h,.ds-scrollbar-hidden.sc-ds-panel-nav{scrollbar-width:none}.ds-scrollbar-hidden.sc-ds-panel-nav-h::-webkit-scrollbar,.ds-scrollbar-hidden.sc-ds-panel-nav::-webkit-scrollbar{display:none}.ds-nav-disclosure.sc-ds-panel-nav,.ds-nav-disclosure-divider.sc-ds-panel-nav{--ds-nav-disclosure-duration:calc(     var(--effect-animation-duration-short-3) * 2 + var(--effect-animation-duration-short-2)   );--ds-nav-disclosure-wait:calc(     var(--effect-animation-duration-short-3) + var(--effect-animation-duration-short-1)   );--ds-nav-disclosure-fade:var(--ds-nav-disclosure-duration);--ds-nav-disclosure-stagger:var(--effect-animation-duration-short-1)}.ds-nav-disclosure.sc-ds-panel-nav{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ds-nav-disclosure-duration)     var(--effect-animation-easing-ease-in-out) var(--ds-nav-disclosure-wait)}.ds-nav-disclosure--open.sc-ds-panel-nav{grid-template-rows:1fr;transition-delay:var(--effect-animation-duration-instant)}.ds-nav-disclosure.sc-ds-panel-nav .ds-nav-disclosure__item.sc-ds-panel-nav{opacity:0;pointer-events:none;transition:opacity var(--ds-nav-disclosure-fade) var(--effect-animation-easing-ease-out)       calc(var(--ds-nav-disclosure-reverse-index) * var(--ds-nav-disclosure-stagger)),     color var(--effect-motion-short-1)}.ds-nav-disclosure--open.sc-ds-panel-nav .ds-nav-disclosure__item.sc-ds-panel-nav{opacity:1;pointer-events:auto;transition-delay:calc(       var(--ds-nav-disclosure-wait) + var(--ds-nav-disclosure-index) *         var(--ds-nav-disclosure-stagger)     ),     var(--effect-animation-duration-instant)}.ds-nav-disclosure-divider.sc-ds-panel-nav{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--ds-nav-disclosure-duration) var(--effect-animation-easing-ease-in-out)       var(--ds-nav-disclosure-wait),     opacity var(--ds-nav-disclosure-duration) var(--effect-animation-easing-ease-out)}.ds-nav-disclosure-divider--open.sc-ds-panel-nav{grid-template-rows:1fr;opacity:1;transition-delay:var(--effect-animation-duration-instant), var(--effect-animation-duration-instant)}.ds-nav-disclosure-divider__clip.sc-ds-panel-nav{min-height:0;overflow:hidden}@media (prefers-reduced-motion: reduce){.ds-nav-disclosure.sc-ds-panel-nav,.ds-nav-disclosure-divider.sc-ds-panel-nav,.ds-nav-disclosure.sc-ds-panel-nav .ds-nav-disclosure__item.sc-ds-panel-nav{transition-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(     var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px)   );--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur)     var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(     var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms)   );--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur)     var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-chrome-background-theme);--_nav-border:var(--color-chrome-border-tertiary);--_nav-divider:var(--color-chrome-divider);--_nav-fg-primary:var(--color-chrome-foreground-primary);--_nav-fg-secondary:var(--color-chrome-foreground-secondary);--_nav-fg-tertiary:var(--color-chrome-foreground-tertiary);--_nav-hover:var(--color-chrome-interaction-hover);--_nav-pressed:var(--color-chrome-interaction-pressed);--_nav-focus:var(--color-chrome-interaction-focus);--_nav-dot:var(--color-chrome-foreground-theme);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}ds-shell-app.sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-shell-app .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-chrome-background-theme);--_nav-border:var(--color-chrome-border-tertiary);--_nav-divider:var(--color-chrome-divider);--_nav-fg-primary:var(--color-chrome-foreground-primary);--_nav-fg-secondary:var(--color-chrome-foreground-secondary);--_nav-fg-tertiary:var(--color-chrome-foreground-tertiary);--_nav-hover:var(--color-chrome-interaction-hover);--_nav-pressed:var(--color-chrome-interaction-pressed);--_nav-focus:var(--color-chrome-interaction-focus);--_nav-dot:var(--color-chrome-foreground-theme);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family-ui, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{height:var(--dimension-size-600, 48px);flex-shrink:0;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:default;color:var(--_nav-fg-primary);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav--breakpoint-locked.sc-ds-panel-nav .panel-nav__header-btn.sc-ds-panel-nav{cursor:default}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}@media (hover: hover) and (pointer: fine){.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__body.sc-ds-panel-nav{padding-inline-end:calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012))}.panel-nav__sections.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);width:100%}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__branch.sc-ds-panel-nav{display:flex;flex-direction:column}.panel-nav__branch-divider-line.sc-ds-panel-nav{display:block;height:var(--dimension-stroke-width-012);margin-inline:var(--dimension-space-075);background:var(--_nav-divider)}.panel-nav__branch-divider--before.sc-ds-panel-nav .panel-nav__branch-divider-line.sc-ds-panel-nav{margin-block:var(--dimension-space-050) var(--dimension-space-100)}.panel-nav__branch-divider--after.sc-ds-panel-nav .panel-nav__branch-divider-line.sc-ds-panel-nav{margin-block:var(--dimension-space-100) var(--dimension-space-050)}.panel-nav__children-accordion.sc-ds-panel-nav,.panel-nav__branch-divider.sc-ds-panel-nav{--ds-nav-disclosure-duration:var(     --_panel-nav-nested-section-duration,     calc(var(--effect-animation-duration-short-3) * 2 + var(--effect-animation-duration-short-2))   );--ds-nav-disclosure-wait:var(     --_panel-nav-nested-transition-wait,     calc(var(--effect-animation-duration-short-3) + var(--effect-animation-duration-short-1))   );--ds-nav-disclosure-fade:var(     --_panel-nav-nested-child-fade-duration,     var(--ds-nav-disclosure-duration)   );--ds-nav-disclosure-stagger:var(     --_panel-nav-nested-child-stagger,     var(--effect-animation-duration-short-1)   )}.panel-nav__children.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px);min-height:0;overflow:hidden}.panel-nav__children.sc-ds-panel-nav>.panel-nav__child.sc-ds-panel-nav:first-child{margin-block-start:var(--dimension-space-050, 4px)}ds-text.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;box-sizing:border-box;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:default;color:var(--_nav-fg-secondary);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__parent--muted.sc-ds-panel-nav{color:var(--_nav-fg-secondary)}.panel-nav__child.sc-ds-panel-nav{flex:0 0 var(--_nav-item-height);padding-inline-start:calc(     var(--dimension-space-075, 6px) + var(--dimension-iconography-md) + var(--dimension-space-050)   )}.panel-nav__children-accordion.sc-ds-panel-nav:not(.panel-nav__children-accordion--open) .panel-nav__child.sc-ds-panel-nav{color:var(--_nav-fg-secondary)}.panel-nav__child-dot.sc-ds-panel-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;flex:0 0 var(--dimension-iconography-md);width:var(--dimension-iconography-md);height:var(--dimension-iconography-md)}.panel-nav__child--inactive.sc-ds-panel-nav{color:var(--_nav-fg-tertiary)}.panel-nav__child--inactive.sc-ds-panel-nav::after{display:none}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;flex:1;min-width:0;height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--ds-control-label-inset)}.panel-nav__item-dot-box.sc-ds-panel-nav{position:absolute;z-index:2;right:var(--dimension-space-075, 6px);top:var(--dimension-space-075, 6px);display:flex;align-items:center;justify-content:center;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);pointer-events:none}.panel-nav__item-dot.sc-ds-panel-nav{transition:transform var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{transform:translate(     calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)),     calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px))   )}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.panel-nav--animating.sc-ds-panel-nav .panel-nav__children-accordion.sc-ds-panel-nav{transition-duration:var(--_nav-expand-dur);transition-delay:var(--effect-animation-duration-instant)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__branch-divider.sc-ds-panel-nav{transition-duration:var(--_nav-expand-dur), var(--_nav-expand-dur);transition-delay:var(--effect-animation-duration-instant), var(--effect-animation-duration-instant)}.panel-nav--collapsed.sc-ds-panel-nav:not(.panel-nav--animating) .panel-nav__children.sc-ds-panel-nav{display:none}.panel-nav--collapsed.sc-ds-panel-nav ds-text.panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(     var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px)   )}.panel-nav__footer-btn.sc-ds-panel-nav{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y)}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-100, 8px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:calc(100% - var(--_nav-padding-x) - var(--_nav-item-height));top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(     var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) +       var(--dimension-space-050, 4px)   );top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}ds-text.panel-nav__user-initial.sc-ds-panel-nav,ds-text.panel-nav__user-initial.ds-text--caption.sc-ds-panel-nav{position:absolute;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%, -50%);display:block;width:max-content;max-width:none;min-width:0;text-align:center;color:inherit;pointer-events:none}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-chrome-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:var(--effect-animation-duration-instant) !important;animation-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}`;let H=0;const O=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=a(this,"dsNavSelect",7);this.dsNavChildSelect=a(this,"dsNavChildSelect",7);this.dsNavToggle=a(this,"dsNavToggle",7);this.dsChromeTransitionStart=a(this,"dsChromeTransitionStart",7);this.dsChromeTransitionEnd=a(this,"dsChromeTransitionEnd",7);this.dsNavFooterAction=a(this,"dsNavFooterAction",7);this.dsNavUserAction=a(this,"dsNavUserAction",7);this.instanceId=H++;this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.presentation="flat";this.routerMode="anchor";this.activeId="";this.activeChildId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.accountMenuExpanded=false;this.dashboardNavigationLabel="Dashboard navigation";this.settingsNavigationLabel="Settings navigation";this.expandNavigationLabel="Expand navigation";this.collapseNavigationLabel="Collapse navigation";this.navigationItemsLabel="Navigation items";this.renderedStyle="dashboard";this.parsedGroups=[];this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.urlDerivedActiveChildId="";this.bodyScrollable=false;this.expandedParentId="";this.inlineChildrenExpansionReady=true;this.flyoutParentId="";this.flyoutOpen=false;this.flyoutInitialFocusVisible=false;this.transitionFallbackTimer=null;this.initialRenderComplete=false;this.hasLoaded=false;this.connectionTasks=new r((()=>this.el.isConnected));this.transitionShell=null;this.inlineChildrenExpansionFrame=null;this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false;this.closeFlyout=()=>{this.flyoutOpen=false;this.flyoutInitialFocusVisible=false};this.handleFlyoutAfterClose=()=>{if(!this.flyoutOpen)this.flyoutParentId=""};this.handleFlyoutSelect=e=>{const n=this.getAllItems().find((e=>e.id===this.flyoutParentId));const a=n?.children?.find((n=>n.id===e.detail?.value));if(!n||!a)return;this.emitChildSelect(n,a);this.followFlyoutAnchor(a);this.closeFlyout()}}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveActiveChildId(){return this.urlDerivedActiveChildId||this.activeChildId}get collapsedPresentation(){return this.collapsed||this.viewportNarrow}get effectiveDisableViewTransition(){return d(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,n){if(n===undefined||!this.initialRenderComplete)return;this.stageInlineChildrenExpansion(n&&!e&&!this.viewportNarrow&&this.presentation==="nested");this.flyoutParentId="";this.flyoutOpen=false;this.syncExpandedParent();this.rovingIndex=this.getFirstRovingIndex();this.startCollapseAnimation()}onViewportNarrowChange(e,n){if(n===undefined||!this.initialRenderComplete)return;this.stageInlineChildrenExpansion(n&&!e&&!this.collapsed&&this.presentation==="nested");this.flyoutParentId="";this.flyoutOpen=false;if(e||this.rovingIndex>this.getVisibleRovingEntries().length){this.rovingIndex=this.getFirstRovingIndex()}this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.el.isConnected){this.viewportNarrow=this.isViewportNarrow();if(this.effectiveBreakpoint()>0)this.connectResizeObserver()}}onGroupsChange(e){this.parsedGroups=l(e);this.rovingIndex=0;this.syncActiveFromUrl();this.syncExpandedParent()}onPresentationChange(){this.stageInlineChildrenExpansion(false);this.flyoutParentId="";this.flyoutOpen=false;this.syncExpandedParent();this.rovingIndex=this.getFirstRovingIndex()}onActiveIdChange(){this.syncExpandedParent()}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=R(this.navStyle,this.el.getAttribute("nav-style"));this.viewportNarrow=this.isViewportNarrow();if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}connectedCallback(){if(this.hasLoaded)this.connectResources()}componentDidLoad(){this.hasLoaded=true;this.connectResources()}connectResources(){if(!this.el.isConnected)return;this.syncHostPropsIfNeeded();this.viewportNarrow=this.isViewportNarrow();this.syncExpandedParent();this.rovingIndex=this.getFirstRovingIndex();this.scheduleDeferredHostPropSync();if(this.effectiveBreakpoint()>0)this.connectResizeObserver();this.connectScrollRegionObserver();this.updateBodyScrollable();this.initialRenderComplete=true}componentDidRender(){if(!this.el.isConnected)return;this.updateBodyScrollable();this.scheduleInlineChildrenExpansion()}disconnectedCallback(){this.connectionTasks.cancel();this.initialRenderComplete=false;this.disconnectResizeObserver();this.disconnectScrollRegionObserver();this.clearInlineChildrenExpansionFrame();this.finishCollapseAnimation(this.el.querySelector(".panel-nav"));this.clearEdgeOverlayTimer();this.clearResizeDrag();this.stageInlineChildrenExpansion(false);this.flyoutParentId="";this.flyoutOpen=false}startCollapseAnimation(){if(!this.el.isConnected||this.isAnimating)return;this.isAnimating=true;this.transitionShell=this.el.closest("ds-shell-app");this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");this.clearCollapseAnimationCompletion(e);this.transitionCompletionHandler=n=>{if(n.target===e&&(n.propertyName==="width"||n.propertyName==="min-width")){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionCompletionHandler);e?.addEventListener("transitioncancel",this.transitionCompletionHandler);this.connectionTasks.frame((()=>{this.connectionTasks.frame((()=>{if(!this.isAnimating)return;if(!e){this.finishCollapseAnimation(e);return}const n=c(getComputedStyle(e));if(n<=0){this.finishCollapseAnimation(e);return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishCollapseAnimation(e)}),n)}))}))}stageInlineChildrenExpansion(e){this.clearInlineChildrenExpansionFrame();this.inlineChildrenExpansionReady=!e}scheduleInlineChildrenExpansion(){if(!this.el.isConnected||this.inlineChildrenExpansionReady||this.collapsedPresentation)return;this.clearInlineChildrenExpansionFrame();this.inlineChildrenExpansionFrame=this.connectionTasks.frame((()=>{this.inlineChildrenExpansionFrame=null;if(this.collapsedPresentation)return;this.el.querySelector(".panel-nav__children-accordion")?.getBoundingClientRect();this.inlineChildrenExpansionReady=true}))??null}clearInlineChildrenExpansionFrame(){if(this.inlineChildrenExpansionFrame===null)return;this.connectionTasks.cancelFrame(this.inlineChildrenExpansionFrame);this.inlineChildrenExpansionFrame=null}finishCollapseAnimation(e){const n=this.isAnimating;const a=this.transitionShell;this.transitionShell=null;this.clearCollapseAnimationCompletion(e);if(!n)return;this.isAnimating=false;if(a&&this.el.closest("ds-shell-app")!==a){a.dispatchEvent(new CustomEvent(o,{detail:{source:"panel-nav"},bubbles:true,composed:true}))}else{this.dsChromeTransitionEnd.emit({source:"panel-nav"})}}clearCollapseAnimationCompletion(e){if(this.transitionCompletionHandler){e?.removeEventListener("transitionend",this.transitionCompletionHandler);e?.removeEventListener("transitioncancel",this.transitionCompletionHandler);this.transitionCompletionHandler=undefined}if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}effectiveBreakpoint(){if(this.breakpoint>0)return this.breakpoint;const e=Number(this.el.getAttribute("breakpoint")??0);return Number.isFinite(e)&&e>0?e:0}isViewportNarrow(){const e=this.effectiveBreakpoint();return typeof window!=="undefined"&&e>0&&window.innerWidth<e}connectResizeObserver(){this.disconnectResizeObserver();this.viewportNarrow=this.isViewportNarrow();this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=this.isViewportNarrow()}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}connectScrollRegionObserver(){this.disconnectScrollRegionObserver();if(!this.bodyEl||typeof ResizeObserver==="undefined")return;this.scrollRegionObserver=new ResizeObserver((()=>this.updateBodyScrollable()));this.scrollRegionObserver.observe(this.bodyEl)}disconnectScrollRegionObserver(){this.scrollRegionObserver?.disconnect();this.scrollRegionObserver=undefined}updateBodyScrollable(){if(!this.el.isConnected)return;const e=Boolean(this.bodyEl&&this.bodyEl.scrollHeight>this.bodyEl.clientHeight+1);if(e!==this.bodyScrollable)this.bodyScrollable=e}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";this.urlDerivedActiveChildId="";return}const e=v(this.currentUrl,this.getAllItems());this.urlDerivedActiveId=e.parentId;this.urlDerivedActiveChildId=e.childId}syncExpandedParent(){const e=this.getAllItems().find((e=>e.id===this.effectiveActiveId));this.expandedParentId=this.presentation==="nested"&&e?.children?.length?e.id:""}syncHostPropsIfNeeded(){if(j(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(p(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let n=e.HOST_PROP_SYNC_BUDGET;const a=()=>{this.syncHostPropsIfNeeded();if(--n>0){this.connectionTasks.frame(a)}};this.connectionTasks.microtask(a)}applyToggle(e){if(this.viewportNarrow)return;this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getVisibleRovingEntries(){return this.getAllItems().flatMap((e=>{const n={kind:"parent",item:e};if(this.presentation!=="nested"||this.collapsedPresentation||e.id!==this.expandedParentId||!e.children?.length){return[n]}return[n,...e.children.filter((e=>!e.isInactive)).map((n=>({kind:"child",parent:e,child:n})))]}))}getFirstRovingIndex(){return this.viewportNarrow?1:0}getFooterRovingIndex(){return 1+this.getVisibleRovingEntries().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const n=this.getVisibleRovingEntries().length;if(e===0){return this.viewportNarrow?null:this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=n){const n=this.el.querySelectorAll(".panel-nav__body [data-panel-nav-roving]");return n[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-unfilled")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e,n=false){const a=this.getVisibleRovingEntries();const i=a.length;if(e===0){this.handleToggle();return}if(e>=1&&e<=i){const i=a[e-1];if(!i)return;if(i.kind==="child"){this.emitChildSelect(i.parent,i.child)}else if(i.item.children?.length){this.activateParent(i.item,n)}else{this.handleItemClick(i.item.id)}return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${L}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:S})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n,true);return}const a=this.getFooterRovingIndex();const i=this.getUserRovingIndex();const s=this.getFirstRovingIndex();let t;switch(e.key){case"ArrowDown":if(n===i)return;if(n===a)t=i;else t=n+1;break;case"ArrowUp":if(n===s)return;if(n===i)t=a;else if(n===a)t=a-1;else t=n-1;break;case"ArrowRight":if(n===a)t=i;else return;break;case"ArrowLeft":if(n===i)t=a;else return;break;case"Home":e.preventDefault();t=s;break;case"End":e.preventDefault();t=i;break;default:return}if(t===undefined||t===n)return;e.preventDefault();this.focusRovingAt(t)}handleItemClick(e){this.dsNavSelect.emit(e)}emitChildSelect(e,n){if(n.isInactive)return;this.dsNavChildSelect.emit({parentId:e.id,childId:n.id,href:n.href})}followFlyoutAnchor(e){const n=m(e.href);if(this.routerMode!=="anchor"||!n)return;const a=this.el.ownerDocument.createElement("a");a.href=n;a.hidden=true;this.el.append(a);a.click();a.remove()}activateParent(e,n=false){if(this.presentation==="nested"){this.expandedParentId=e.id;if(this.collapsedPresentation){if(this.flyoutParentId===e.id&&this.flyoutOpen){this.closeFlyout();return}this.flyoutInitialFocusVisible=n;this.flyoutParentId=e.id;this.flyoutOpen=true;return}}const a=h(e.children);if(a)this.emitChildSelect(e,a)}parentAnchorId(e){return`panel-nav-parent-${this.instanceId}-${e.replace(/[^a-zA-Z0-9_-]/g,"-")}`}childListId(e){return`panel-nav-children-${this.instanceId}-${e.replace(/[^a-zA-Z0-9_-]/g,"-")}`}handleToggle(){const e=f(this.collapsed,this.viewportNarrow);if(e!==null)this.applyToggle(e)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const n=e.currentTarget;this.dsNavUserAction.emit({anchor:n,menuPlacement:S})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();if(u()){this.showEdgeOverlay=true;return}this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const n=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;this.dragBodyStyle={cursor:document.body.style.cursor,userSelect:document.body.style.userSelect};document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const a=e=>{const a=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(a);if(this.didSnap)return;if(!n&&a<-8){this.applyToggle(true);this.didSnap=true}else if(n&&a>8){this.applyToggle(false);this.didSnap=true}};const i=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!n)}this.clearResizeDrag()};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=i;window.addEventListener("mousemove",a);window.addEventListener("mouseup",i)}clearResizeDrag(){if(this.globalMouseMoveHandler)window.removeEventListener("mousemove",this.globalMouseMoveHandler);if(this.globalMouseUpHandler)window.removeEventListener("mouseup",this.globalMouseUpHandler);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined;this.isDragging=false;this.showEdgeOverlay=false;if(this.dragBodyStyle){document.body.style.cursor=this.dragBodyStyle.cursor;document.body.style.userSelect=this.dragBodyStyle.userSelect;this.dragBodyStyle=undefined}}renderFooterAction(e){const n=e?this.settingsLabel:this.dashboardLabel;return i("ds-tooltip",{label:n,side:"right",size:"sm"},i("ds-button-unfilled",{variant:"icon",class:"panel-nav__footer-btn",icon:e?"Gear":"Dashboard",activeFill:false,hasBorder:false,background:"chrome",focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,"aria-label":n,onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}))}renderFooterUser(e,n,a){const s=e?this.accountLabel:"";const t=i("button",{type:"button",id:L,class:{"panel-nav__item":true,"panel-nav__footer-user":true,"panel-nav__footer-user--menu-expanded":this.accountMenuExpanded,"ds-interaction-fill--surface-open":this.accountMenuSurfaceOpen??this.accountMenuExpanded,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--on-chrome":true},tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":this.accountLabel,"aria-haspopup":"menu","aria-expanded":String(this.accountMenuExpanded),onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},i("ds-text",{class:"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},n),i("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},i("span",{class:"panel-nav__footer-icon-expanded"},i("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),i("span",{class:"panel-nav__footer-icon-collapsed"},i("ds-icon",{name:"Circle",size:"md",color:"inherit"}),i("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,align:"center",color:"inherit"},a))));return i("ds-tooltip",{label:s,side:"right",size:"sm"},t)}renderParentItem(e,n,a){const s=e.id===this.effectiveActiveId;const t=(e.children?.length??0)>0;const o=this.presentation==="nested"&&t;const r=o?a?this.flyoutParentId===e.id:this.expandedParentId===e.id:false;const d=[i("span",{class:"panel-nav__item-icon"},i("ds-icon",{name:e.icon,size:"md",color:"inherit"})),i("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:s,color:"inherit",lineTruncation:1},e.label),e.dot&&i("span",{class:"panel-nav__item-dot-box","aria-hidden":"true"},i("ds-badge",{class:"panel-nav__item-dot",variant:"dot",hasRing:a,label:"",style:{"--_badge-bg":"var(--_nav-dot)"}}))];const l={id:o?this.parentAnchorId(e.id):undefined,class:{"panel-nav__item":true,"panel-nav__parent":o,"panel-nav__parent--expanded":r,"panel-nav__parent--flyout-active":a&&this.flyoutParentId===e.id,"ds-interaction-fill--surface-open":a&&this.flyoutParentId===e.id,"panel-nav__parent--muted":this.presentation==="nested"&&!a&&this.expandedParentId!==""&&this.expandedParentId!==e.id,"panel-nav__item--active":s,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--on-chrome":true},"aria-current":!o&&s?"page":undefined,"aria-expanded":o?String(r):undefined,"aria-controls":o&&r?this.childListId(e.id):undefined,"aria-haspopup":o&&a?"menu":undefined,"data-panel-nav-roving":"",tabIndex:n===this.rovingIndex?0:-1,onClick:n=>t?this.activateParent(e,n.detail===0):this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,n),onFocus:()=>{this.rovingIndex=n}};const c=m(t?h(e.children)?.href:e.href);const v=this.routerMode==="anchor"&&c&&!(o&&a);const p=v?i("a",{...l,href:c},d):i("button",{...l,type:"button"},d);return i("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},p)}renderChildItem(e,n,a,s,t){const o=e.id===this.effectiveActiveId&&n.id===this.effectiveActiveChildId;const r=n.isInactive===true;const d=[i("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:o,color:"inherit",lineTruncation:1},n.label),n.dot&&i("span",{class:"panel-nav__child-dot","aria-hidden":"true"},i("ds-badge",{variant:"dot",background:"var(--_nav-bg)",label:"",style:{"--_badge-bg":"var(--_nav-dot)"}}))];const l={class:{"panel-nav__item":true,"panel-nav__child":true,"ds-nav-disclosure__item":true,"panel-nav__child--active":o,"panel-nav__child--inactive":r,"panel-nav__item--active":o,"ds-focus-ring-inset":!r,"ds-interaction-fill":!r,"ds-interaction-fill--on-chrome":!r},"aria-current":o?"page":undefined,"aria-disabled":r?"true":undefined,"data-panel-nav-roving":r||a===undefined?undefined:"",style:{"--_panel-nav-child-index":String(s),"--_panel-nav-child-reverse-index":String(t),"--ds-nav-disclosure-index":String(s),"--ds-nav-disclosure-reverse-index":String(t)},tabIndex:!r&&a===this.rovingIndex?0:-1,onClick:()=>this.emitChildSelect(e,n),onKeyDown:e=>a===undefined?undefined:this.handleRovingKeyDown(e,a),onFocus:()=>{if(a!==undefined)this.rovingIndex=a}};const c=m(n.href);const v=!r&&this.routerMode==="anchor"&&c;return v?i("a",{...l,href:c},d):i("button",{...l,type:"button",disabled:r},d)}renderFlyout(){const e=this.getAllItems().find((e=>e.id===this.flyoutParentId));if(!e?.children?.length)return null;return i("ds-menu",{id:this.childListId(e.id),open:this.flyoutOpen,side:E.side,align:E.align,anchorAlignment:E.anchorAlignment,sideOffset:E.sideOffset,alignOffset:E.alignOffset,anchorId:this.parentAnchorId(e.id),selectionMode:"single",menuLabel:`${e.label} sections`,initialFocusVisible:this.flyoutInitialFocusVisible,sections:[{items:e.children.map((n=>({label:n.label,value:n.id,dot:n.dot,isInactive:n.isInactive,isSelected:e.id===this.effectiveActiveId&&n.id===this.effectiveActiveChildId})))}],onDsSelect:this.handleFlyoutSelect,onDsClose:this.closeFlyout,onDsAfterClose:this.handleFlyoutAfterClose})}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const t=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const d={"panel-nav":true,"ds-control--md":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":t,"panel-nav--breakpoint-locked":this.viewportNarrow,"panel-nav--animating":this.isAnimating};return i(s,{key:"66ecb8d96fae938c1312902fdd457212cb560e5a",style:{display:"block",position:"relative"}},i("nav",{key:"5d76442ec0d92b9e73b2264be6bb982d0fb84cc4",class:d,"aria-label":n?this.dashboardNavigationLabel:this.settingsNavigationLabel},i("div",{key:"6eb432243821ea15c810682be5fc78f9300b85a8",class:"panel-nav__header ds-chrome-row ds-chrome-space--md"},i("button",{key:"6ce84af36d13809e8b779ed0ae66838735ab3199",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill ds-interaction-fill--on-chrome",disabled:this.viewportNarrow,tabIndex:!this.viewportNarrow&&this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":t?this.expandNavigationLabel:this.collapseNavigationLabel,"aria-expanded":t?"false":"true"},i("span",{key:"2892309bcb959c2bd74480ca323eb759fa42eac4",class:"panel-nav__header-logo","aria-hidden":"true"},i("svg",{key:"8f56616d834c19ed7d088b6e4532753c5eabbe97",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},i("path",{key:"5cab6db36b88172aabc49167b37c55c66147b8d8",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),i("span",{key:"51514cd775459d2ba94c690c7c5e10f577c43ca0",class:"panel-nav__header-toggle","aria-hidden":"true"},i("ds-icon",{key:"015daabbb182309e61144e522dab1e19c57d9eea",name:t?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),i("div",{key:"ed62aac79c211244ad898e866c2e4fab351c42da",class:{"panel-nav__body":true,"ds-chrome-column":true,"ds-chrome-space--md":true,"ds-scrollbar-hidden":true,"ds-focus-ring":this.bodyScrollable,...A({edges:"bottom"})},ref:e=>{const n=e??undefined;if(n===this.bodyEl)return;this.bodyEl=n;this.connectScrollRegionObserver()},role:this.bodyScrollable?"region":undefined,"aria-label":this.bodyScrollable?this.navigationItemsLabel:undefined,tabIndex:this.bodyScrollable?0:undefined},i("div",{key:"f1e6cf0c4309747f7e5b199ddae06f010df72d1c",class:"panel-nav__sections"},(()=>{let e=1;return this.parsedGroups.map((n=>i("div",{class:"panel-nav__group",key:n.id??n.label},n.label&&i("ds-text",{class:"panel-nav__group-label ds-control--md",as:"span",variant:"text-caption",emphasis:true,color:"inherit"},n.label),n.items.map(((a,s)=>{const o=e++;const r=!t&&this.inlineChildrenExpansionReady&&a.id===this.expandedParentId&&(a.children?.length??0)>0;const d=n.items.length>1;const l=d&&s>0;const c=d&&s<n.items.length-1;const v=r&&d;const p=this.presentation==="nested"&&(!t||this.isAnimating)&&(a.children?.length??0)>0;const h=p?a.children?.map(((n,i)=>{const s=!r||n.isInactive?undefined:e++;return this.renderChildItem(a,n,s,i,(a.children?.length??0)-i-1)})):null;return i("div",{class:"panel-nav__branch",key:a.id},l?i("div",{key:`${a.id}-divider-before`,class:{"panel-nav__branch-divider":true,"panel-nav__branch-divider--before":true,"panel-nav__branch-divider--open":v,"ds-nav-disclosure-divider":true,"ds-nav-disclosure-divider--open":v},"aria-hidden":"true"},i("div",{class:"panel-nav__branch-divider-clip ds-nav-disclosure-divider__clip"},i("span",{class:"panel-nav__branch-divider-line"}))):null,this.renderParentItem(a,o,t),p?i("div",{key:`${a.id}-children`,class:{"panel-nav__children-accordion":true,"panel-nav__children-accordion--open":r,"ds-nav-disclosure":true,"ds-nav-disclosure--open":r},"aria-hidden":r?undefined:"true",inert:r?undefined:true},i("div",{id:this.childListId(a.id),class:"panel-nav__children",role:"group","aria-labelledby":this.parentAnchorId(a.id)},h)):null,c?i("div",{key:`${a.id}-divider-after`,class:{"panel-nav__branch-divider":true,"panel-nav__branch-divider--after":true,"panel-nav__branch-divider--open":v,"ds-nav-disclosure-divider":true,"ds-nav-disclosure-divider--open":v},"aria-hidden":"true"},i("div",{class:"panel-nav__branch-divider-clip ds-nav-disclosure-divider__clip"},i("span",{class:"panel-nav__branch-divider-line"}))):null)})))))})())),i("div",{key:"38bf3bb17a6333f1e6ba60c89de7b444188381d1",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(t,o,r))),this.renderFlyout(),!this.viewportNarrow&&i("div",{key:"e34a33eadd950d59e4dc2b596eda080da10240d5",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],presentation:[{onPresentationChange:0}],activeId:[{onActiveIdChange:0}],activeChildId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],urlDerivedActiveChildId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return T()+F()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],presentation:[513],routerMode:[1,"router-mode"],activeId:[1,"active-id"],activeChildId:[1,"active-child-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],accountMenuExpanded:[4,"account-menu-expanded"],accountMenuSurfaceOpen:[4,"account-menu-surface-open"],dashboardNavigationLabel:[1,"dashboard-navigation-label"],settingsNavigationLabel:[1,"settings-navigation-label"],expandNavigationLabel:[1,"expand-navigation-label"],collapseNavigationLabel:[1,"collapse-navigation-label"],navigationItemsLabel:[1,"navigation-items-label"],renderedStyle:[32],parsedGroups:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],urlDerivedActiveChildId:[32],bodyScrollable:[32],expandedParentId:[32],inlineChildrenExpansionReady:[32],flyoutParentId:[32],flyoutOpen:[32],flyoutInitialFocusVisible:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],presentation:[{onPresentationChange:0}],activeId:[{onActiveIdChange:0}],activeChildId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],urlDerivedActiveChildId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);O.HOST_PROP_SYNC_BUDGET=8;function U(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(t(e))){customElements.define(t(e),O)}break;case"ds-badge":if(!customElements.get(t(e))){g()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){b()}break;case"ds-icon":if(!customElements.get(t(e))){_()}break;case"ds-loader":if(!customElements.get(t(e))){x()}break;case"ds-menu":if(!customElements.get(t(e))){y()}break;case"ds-swatch-picker":if(!customElements.get(t(e))){w()}break;case"ds-switch":if(!customElements.get(t(e))){k()}break;case"ds-tag":if(!customElements.get(t(e))){C()}break;case"ds-text":if(!customElements.get(t(e))){z()}break;case"ds-tooltip":if(!customElements.get(t(e))){I()}break}}))}U();export{O as P,U as d};
-//# sourceMappingURL=p-ClRd39mR.js.map