@ds-mo/ui 14.22.1 → 14.23.0

package/dist/mcp-data/registry/message-scroller.json

@@ -38,6 +38,8 @@
         "Wheel, touch, keyboard navigation, selection, and transcript interaction release automatic following; Scroll to latest explicitly restores it.",
         "A newly appended outgoing Message marked scroll-anchor starts a turn near the top with the configurable previous-turn peek; mutations inside existing messages and prepended history do not re-anchor.",
         "Opening saved history, message jumps, and prepended history preserve deliberate position.",
+        "When a persistent scroller receives a cleared or wholly replaced transcript, it releases internal references to the previous message elements, invalidates their pending anchor work, and treats the replacement as a new baseline at defaultPosition rather than as an appended turn.",
+        "MessageScroller bounds its internal element tracking to the currently rendered transcript. The application still owns transcript data and must cap or window the rendered message collection when conversation history can grow without limit.",
         "The scroll-to-latest action is absent at the live edge, appears only after the reader moves away, and disappears again after returning to the newest message.",
         "Scroll to latest uses the shared md control-elevation wrapper with a pointer-transparent top highlight, preserving its transparent backdrop blur and borderless unfilled action while the press-scale modifier moves the complete elevated surface.",
         "Place a pending human-input surface in interaction and a composer container with 8px padding on every side in overlay; the shared scroll-overlay controller measures them as one stack, tracks every growth step, reserves matching transcript clearance, begins the fade before the stack, and keeps scroll-to-latest above it."
@@ -199,7 +201,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
@@ -227,7 +229,12 @@
     },
     {
       "path": "src/wc/components/MessageScroller/MessageScroller.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { MessageScrollerPosition } from '../conversation-types';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\n\nconst LIVE_EDGE_THRESHOLD = 24;\n\n@Component({\n  tag: 'ds-message-scroller',\n  styleUrl: 'MessageScroller.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class MessageScroller {\n  @Element() el!: HTMLElement;\n\n  @Prop() busy: boolean = false;\n  @Prop() autoFollow: boolean = true;\n  @Prop() defaultPosition: MessageScrollerPosition = 'last-anchor';\n  @Prop() messagesLabel: string = 'Messages';\n\n  @Event() dsReachStart!: EventEmitter<void>;\n\n  @State() private showScrollToLatest = false;\n\n  private viewport?: HTMLElement;\n  private content?: HTMLElement;\n  private overlay?: HTMLElement;\n  private transcriptSlot?: HTMLSlotElement;\n  private scrollOverlayController?: ScrollOverlayController;\n  private mutationObserver?: MutationObserver;\n  private following = true;\n  private followReleased = false;\n  private releasePendingAtLiveEdge = false;\n  private atStart = false;\n  private programmatic = false;\n  private programmaticTimer?: ReturnType<typeof setTimeout>;\n  private transcriptChildren: HTMLElement[] = [];\n  private knownTranscriptElements = new Set<HTMLElement>();\n  private knownTurnAnchors = new Set<HTMLElement>();\n  private firstChildViewportTop?: number;\n  private activeTurnAnchor?: HTMLElement;\n  private activeTurnAnchorViewportTop?: number;\n  private turnClearance = 0;\n  private prependReconciliation = 0;\n\n  componentDidLoad() {\n    this.transcriptChildren = this.getTranscriptChildren();\n    this.transcriptChildren.forEach(element => {\n      this.knownTranscriptElements.add(element);\n      if (element.matches('ds-message[scroll-anchor]')) {\n        this.knownTurnAnchors.add(element);\n      }\n    });\n    this.rememberFirstChildTop();\n    this.connectObservers();\n    requestAnimationFrame(() => this.applyDefaultPosition());\n    document.addEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  disconnectedCallback() {\n    this.prependReconciliation += 1;\n    this.scrollOverlayController?.disconnect();\n    this.mutationObserver?.disconnect();\n    if (this.programmaticTimer) clearTimeout(this.programmaticTimer);\n    document.removeEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  @Method()\n  async scrollToMessage(id: string): Promise<boolean> {\n    const message = Array.from(\n      this.el.querySelectorAll<HTMLElement & { messageId?: string }>('ds-message')\n    ).find(item => item.messageId === id || item.getAttribute('message-id') === id);\n    if (!message) return false;\n    this.releasePendingAtLiveEdge = false;\n    this.following = false;\n    this.followReleased = true;\n    this.showScrollToLatest = true;\n    message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n    return true;\n  }\n\n  @Method()\n  async scrollToStart() {\n    this.releasePendingAtLiveEdge = false;\n    this.scrollTo(0);\n    this.following = false;\n    this.followReleased = true;\n    this.showScrollToLatest = Boolean(\n      this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n    );\n  }\n\n  @Method()\n  async scrollToEnd() {\n    this.releasePendingAtLiveEdge = false;\n    this.following = true;\n    this.followReleased = false;\n    this.showScrollToLatest = false;\n    this.scrollTo(this.viewport?.scrollHeight ?? 0);\n  }\n\n  private motionBehavior(): ScrollBehavior {\n    return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n  }\n\n  private scrollTo(top: number) {\n    if (!this.viewport) return;\n    this.programmatic = true;\n    const behavior = this.motionBehavior();\n    this.viewport.scrollTo({ top, behavior });\n    if (this.programmaticTimer) clearTimeout(this.programmaticTimer);\n    this.programmaticTimer = setTimeout(\n      () => {\n        this.programmatic = false;\n        this.programmaticTimer = undefined;\n        if (this.following) {\n          this.viewport!.scrollTop = top;\n          this.showScrollToLatest = false;\n        }\n      },\n      behavior === 'smooth' ? 600 : 0\n    );\n  }\n\n  private connectObservers() {\n    if (!this.viewport || !this.content || !this.overlay) return;\n    this.scrollOverlayController = new ScrollOverlayController({\n      host: this.el,\n      viewport: this.viewport,\n      content: this.content,\n      overlay: this.overlay,\n      overlayContentSelector: '.message-scroller__overlay-stack',\n      onGeometryChange: () => this.handleContentGrowth(),\n    });\n    this.scrollOverlayController.connect();\n    this.mutationObserver = new MutationObserver(() => {\n      this.handleTranscriptChange();\n      this.handleContentGrowth();\n    });\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n\n  private handleContentGrowth() {\n    if (!this.viewport) return;\n    this.syncTurnClearance();\n    const nextHeight = this.viewport.scrollHeight;\n    if (this.autoFollow && this.following && !this.followReleased) {\n      this.viewport.scrollTop = nextHeight;\n    }\n    if (this.releasePendingAtLiveEdge && !this.isAtLiveEdge()) {\n      this.releasePendingAtLiveEdge = false;\n    }\n    this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n    this.scrollOverlayController?.sync();\n  }\n\n  private rememberFirstChildTop() {\n    if (!this.viewport) return;\n    const first = this.getTranscriptChildren()[0];\n    this.firstChildViewportTop = first\n      ? first.getBoundingClientRect().top - this.viewport.getBoundingClientRect().top\n      : undefined;\n  }\n\n  private getTranscriptChildren(): HTMLElement[] {\n    const assigned = this.transcriptSlot?.assignedElements() ?? [];\n    const assignedTranscript = assigned.filter(\n      (element): element is HTMLElement =>\n        element instanceof HTMLElement &&\n        (element.matches('ds-message') || element.matches('ds-agent-response'))\n    );\n    const queriedTranscript = Array.from(\n      this.el.querySelectorAll<HTMLElement>('ds-message, ds-agent-response')\n    ).filter(element => {\n      if (element.closest('.message-scroller__interaction, .message-scroller__overlay-content')) {\n        return false;\n      }\n      if (element.matches('ds-agent-response')) return true;\n      return !element.closest('ds-agent-response');\n    });\n    return queriedTranscript.length > assignedTranscript.length\n      ? queriedTranscript\n      : assignedTranscript;\n  }\n\n  private handleTranscriptChange = () => {\n    const current = this.getTranscriptChildren();\n    const previous = this.transcriptChildren;\n    const hadKnownTranscript = this.knownTranscriptElements.size > 0;\n    const previouslyKnown = new Set(this.knownTranscriptElements);\n    const appendedAnchor = [...current].reverse().find((element, reverseIndex) => {\n      if (!element.matches('ds-message[scroll-anchor]') || this.knownTurnAnchors.has(element)) {\n        return false;\n      }\n      const index = current.length - reverseIndex - 1;\n      return current.slice(index + 1).every(next => !this.knownTranscriptElements.has(next));\n    });\n    current.forEach(element => {\n      this.knownTranscriptElements.add(element);\n      if (element.matches('ds-message[scroll-anchor]')) {\n        this.knownTurnAnchors.add(element);\n      }\n    });\n    if (!previous.length) {\n      this.transcriptChildren = current;\n      if (appendedAnchor && hadKnownTranscript) {\n        requestAnimationFrame(() => this.positionNewTurn(appendedAnchor));\n      }\n      return;\n    }\n\n    const firstKnownIndex = current.findIndex(element => previouslyKnown.has(element));\n    const newTranscript = current.filter(element => !previouslyKnown.has(element));\n    const prepended =\n      (current.length > previous.length &&\n        previous.every(\n          (element, index) => current[current.length - previous.length + index] === element\n        )) ||\n      (!appendedAnchor &&\n        newTranscript.length > 0 &&\n        firstKnownIndex > 0 &&\n        newTranscript.every(element => current.indexOf(element) < firstKnownIndex));\n\n    this.transcriptChildren = current;\n    if (prepended) {\n      if (this.viewport) {\n        const preservedElement = this.activeTurnAnchor?.isConnected\n          ? this.activeTurnAnchor\n          : previous[0];\n        const preservedTop = this.activeTurnAnchor?.isConnected\n          ? this.activeTurnAnchorViewportTop\n          : this.firstChildViewportTop;\n        if (preservedElement && preservedTop !== undefined) {\n          this.reconcilePrependPosition(preservedElement, preservedTop);\n          this.schedulePrependReconciliation(preservedElement, preservedTop, newTranscript);\n        }\n      }\n      this.rememberFirstChildTop();\n      this.rememberActiveTurnAnchorTop();\n      this.scrollOverlayController?.sync();\n      return;\n    }\n    if (appendedAnchor) {\n      requestAnimationFrame(() => this.positionNewTurn(appendedAnchor));\n    }\n  };\n\n  private reconcilePrependPosition(element: HTMLElement, viewportTop: number) {\n    if (!this.viewport || !element.isConnected) return;\n    const nextTop = element.getBoundingClientRect().top - this.viewport.getBoundingClientRect().top;\n    this.viewport.scrollTop += nextTop - viewportTop;\n  }\n\n  private schedulePrependReconciliation(\n    element: HTMLElement,\n    viewportTop: number,\n    prepended: HTMLElement[]\n  ) {\n    const generation = ++this.prependReconciliation;\n    // Prepended custom elements can gain height after their child-list mutation.\n    // Reconcile against the original coordinate after their layouts settle.\n    const pending = prepended\n      .flatMap(item => [item, ...Array.from(item.querySelectorAll<HTMLElement>('*'))])\n      .map(item => {\n        const componentOnReady = (\n          item as HTMLElement & { componentOnReady?: () => Promise<unknown> }\n        ).componentOnReady;\n        return componentOnReady ? componentOnReady.call(item).catch(() => undefined) : null;\n      })\n      .filter((promise): promise is Promise<unknown> => Boolean(promise));\n\n    void Promise.all(pending).then(() => {\n      requestAnimationFrame(() => {\n        if (generation !== this.prependReconciliation) return;\n        this.reconcilePrependPosition(element, viewportTop);\n        requestAnimationFrame(() => {\n          if (generation !== this.prependReconciliation) return;\n          this.reconcilePrependPosition(element, viewportTop);\n          this.rememberFirstChildTop();\n          this.rememberActiveTurnAnchorTop();\n          this.scrollOverlayController?.sync();\n        });\n      });\n    });\n  }\n\n  private handleTranscriptSlotChange = () => this.handleTranscriptChange();\n\n  private positionNewTurn(anchor: HTMLElement) {\n    if (!this.viewport) return;\n    this.activeTurnAnchor = anchor;\n    this.syncTurnClearance();\n    requestAnimationFrame(() => this.finishPositionNewTurn(anchor));\n  }\n\n  private finishPositionNewTurn(anchor: HTMLElement) {\n    if (!this.viewport || !anchor.isConnected) return;\n    const viewportRect = this.viewport.getBoundingClientRect();\n    const anchorTop =\n      anchor.getBoundingClientRect().top - viewportRect.top + this.viewport.scrollTop;\n    const customOffset = getComputedStyle(this.el)\n      .getPropertyValue('--ds-message-scroller-anchor-offset')\n      .trim();\n    const offset = resolveCssLengthPx(customOffset, 'var(--dimension-space-800)');\n    const max = Math.max(this.viewport.scrollHeight - this.viewport.clientHeight, 0);\n    const target = Math.min(Math.max(anchorTop - offset, 0), max);\n    this.following = max - target <= LIVE_EDGE_THRESHOLD;\n    this.followReleased = !this.following;\n    this.showScrollToLatest = !this.following;\n    this.programmatic = true;\n    this.viewport.scrollTop = target;\n    requestAnimationFrame(() => {\n      this.programmatic = false;\n      this.following = this.isAtLiveEdge();\n      this.followReleased = !this.following;\n      this.showScrollToLatest = !this.following;\n      this.rememberFirstChildTop();\n      this.rememberActiveTurnAnchorTop();\n    });\n    this.scrollOverlayController?.sync();\n  }\n\n  private rememberActiveTurnAnchorTop() {\n    if (!this.viewport || !this.activeTurnAnchor?.isConnected) return;\n    this.activeTurnAnchorViewportTop =\n      this.activeTurnAnchor.getBoundingClientRect().top - this.viewport.getBoundingClientRect().top;\n  }\n\n  private syncTurnClearance() {\n    if (!this.viewport || !this.activeTurnAnchor?.isConnected) return;\n    const children = this.getTranscriptChildren();\n    const last = children[children.length - 1];\n    if (!last) return;\n    const anchorRect = this.activeTurnAnchor.getBoundingClientRect();\n    const lastRect = last.getBoundingClientRect();\n    const customOffset = getComputedStyle(this.el)\n      .getPropertyValue('--ds-message-scroller-anchor-offset')\n      .trim();\n    const offset = resolveCssLengthPx(customOffset, 'var(--dimension-space-800)');\n    const contentAfterAnchor = Math.max(lastRect.bottom - anchorRect.top, 0);\n    const clearance = Math.max(\n      Math.ceil(this.viewport.clientHeight - offset - contentAfterAnchor),\n      0\n    );\n    if (clearance === this.turnClearance) return;\n    this.turnClearance = clearance;\n    this.el.style.setProperty('--ds-message-scroller-turn-clearance', `${clearance}px`);\n  }\n\n  private applyDefaultPosition() {\n    if (!this.viewport) return;\n    this.releasePendingAtLiveEdge = false;\n    if (this.defaultPosition === 'start') {\n      this.viewport.scrollTop = 0;\n      this.following = false;\n      this.followReleased = true;\n      this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\n      this.scrollOverlayController?.sync();\n      return;\n    }\n    if (this.defaultPosition === 'last-anchor') {\n      const anchors = this.el.querySelectorAll<HTMLElement>('ds-message[scroll-anchor]');\n      const last = anchors.item(anchors.length - 1);\n      if (last) {\n        last.scrollIntoView({ block: 'start' });\n        this.following = this.isAtLiveEdge();\n        this.followReleased = !this.following;\n        this.showScrollToLatest = !this.following;\n        this.scrollOverlayController?.sync();\n        return;\n      }\n    }\n    this.viewport.scrollTop = this.viewport.scrollHeight;\n    this.following = true;\n    this.followReleased = false;\n    this.showScrollToLatest = false;\n    this.scrollOverlayController?.sync();\n  }\n\n  private isAtLiveEdge(): boolean {\n    if (!this.viewport) return true;\n    return (\n      this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop <=\n      LIVE_EDGE_THRESHOLD\n    );\n  }\n\n  private handleScroll = () => {\n    if (!this.viewport) return;\n    this.scrollOverlayController?.sync();\n    this.rememberFirstChildTop();\n    this.rememberActiveTurnAnchorTop();\n    if (this.programmatic) return;\n    const atLiveEdge = this.isAtLiveEdge();\n    if (this.releasePendingAtLiveEdge && atLiveEdge) {\n      // A scroll event queued by the previous auto-follow can arrive after\n      // reader input. Keep that stale event from restoring follow mode.\n      this.following = false;\n      this.followReleased = true;\n      this.showScrollToLatest = false;\n      return;\n    }\n    this.releasePendingAtLiveEdge = false;\n    this.following = atLiveEdge;\n    this.followReleased = !this.following;\n    this.showScrollToLatest = !this.following;\n    const nextAtStart = this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD;\n    if (nextAtStart && !this.atStart) this.dsReachStart.emit();\n    this.atStart = nextAtStart;\n  };\n\n  private releaseFollow = () => {\n    this.prependReconciliation += 1;\n    this.releasePendingAtLiveEdge = this.isAtLiveEdge();\n    this.following = false;\n    this.followReleased = true;\n    this.showScrollToLatest = !this.releasePendingAtLiveEdge;\n  };\n\n  private handleSelectionChange = () => {\n    const selection = document.getSelection();\n    if (\n      selection &&\n      !selection.isCollapsed &&\n      selection.anchorNode &&\n      this.el.contains(selection.anchorNode)\n    ) {\n      this.releaseFollow();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"message-scroller\">\n          <div\n            class=\"message-scroller__viewport\"\n            ref={element => {\n              this.viewport = element;\n            }}\n            role=\"region\"\n            aria-label={this.messagesLabel}\n            tabIndex={0}\n            onScroll={this.handleScroll}\n            onPointerDown={(event: PointerEvent) => {\n              if (event.pointerType === 'touch') this.releaseFollow();\n            }}\n            onWheel={this.releaseFollow}\n            onKeyDown={(event: KeyboardEvent) => {\n              if (\n                ['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '].includes(\n                  event.key\n                )\n              ) {\n                this.releaseFollow();\n              }\n            }}\n          >\n            <div\n              class=\"message-scroller__content scroll-edge-fade--block-window\"\n              ref={element => {\n                this.content = element;\n              }}\n              role=\"log\"\n              aria-live=\"polite\"\n              aria-relevant=\"additions\"\n              aria-busy={this.busy ? 'true' : undefined}\n            >\n              <slot\n                ref={element => {\n                  this.transcriptSlot = element;\n                }}\n                onSlotchange={this.handleTranscriptSlotChange}\n              />\n            </div>\n          </div>\n          <div\n            class=\"message-scroller__overlay\"\n            ref={element => {\n              this.overlay = element;\n            }}\n          >\n            <div class=\"message-scroller__overlay-stack\">\n              <div class=\"message-scroller__interaction\">\n                <slot name=\"interaction\" />\n              </div>\n              <div class=\"message-scroller__overlay-content\">\n                <slot name=\"overlay\" />\n              </div>\n            </div>\n          </div>\n          {this.showScrollToLatest ? (\n            <div class=\"message-scroller__control ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale\">\n              <ds-tooltip label=\"Scroll to latest message\" side=\"top\" size=\"sm\">\n                <ds-button-unfilled\n                  variant=\"icon\"\n                  icon=\"ChevronDown\"\n                  size=\"md\"\n                  rounded\n                  hasBorder={false}\n                  aria-label=\"Scroll to latest message\"\n                  onDsClick={() => void this.scrollToEnd()}\n                />\n              </ds-tooltip>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { MessageScrollerPosition } from '../conversation-types';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport {\n  isMessageScrollerTranscriptReset,\n  pruneMessageScrollerTranscriptSet,\n} from './message-scroller-transcript';\n\nconst LIVE_EDGE_THRESHOLD = 24;\n\n@Component({\n  tag: 'ds-message-scroller',\n  styleUrl: 'MessageScroller.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class MessageScroller {\n  @Element() el!: HTMLElement;\n\n  @Prop() busy: boolean = false;\n  @Prop() autoFollow: boolean = true;\n  @Prop() defaultPosition: MessageScrollerPosition = 'last-anchor';\n  @Prop() messagesLabel: string = 'Messages';\n\n  @Event() dsReachStart!: EventEmitter<void>;\n\n  @State() private showScrollToLatest = false;\n\n  private viewport?: HTMLElement;\n  private content?: HTMLElement;\n  private overlay?: HTMLElement;\n  private transcriptSlot?: HTMLSlotElement;\n  private scrollOverlayController?: ScrollOverlayController;\n  private mutationObserver?: MutationObserver;\n  private following = true;\n  private followReleased = false;\n  private releasePendingAtLiveEdge = false;\n  private atStart = false;\n  private programmatic = false;\n  private programmaticTimer?: ReturnType<typeof setTimeout>;\n  private transcriptChildren: HTMLElement[] = [];\n  private knownTranscriptElements = new Set<HTMLElement>();\n  private knownTurnAnchors = new Set<HTMLElement>();\n  private firstChildViewportTop?: number;\n  private activeTurnAnchor?: HTMLElement;\n  private activeTurnAnchorViewportTop?: number;\n  private turnClearance = 0;\n  private prependReconciliation = 0;\n  private turnPositionGeneration = 0;\n  private defaultPositionGeneration = 0;\n  private transcriptResetPending = false;\n  private hasLoaded = false;\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.seedTranscriptBaseline();\n    this.connectObservers();\n    this.scheduleDefaultPosition();\n    document.removeEventListener('selectionchange', this.handleSelectionChange);\n    document.addEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  connectedCallback() {\n    if (!this.hasLoaded) return;\n    this.seedTranscriptBaseline();\n    this.connectObservers();\n    this.scheduleDefaultPosition();\n    document.removeEventListener('selectionchange', this.handleSelectionChange);\n    document.addEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  disconnectedCallback() {\n    this.invalidateTranscriptWork();\n    this.scrollOverlayController?.disconnect();\n    this.scrollOverlayController = undefined;\n    this.mutationObserver?.disconnect();\n    this.mutationObserver = undefined;\n    this.resetTranscriptTracking();\n    this.resetTranscriptPositionState();\n    this.transcriptResetPending = false;\n    document.removeEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  @Method()\n  async scrollToMessage(id: string): Promise<boolean> {\n    const message = Array.from(\n      this.el.querySelectorAll<HTMLElement & { messageId?: string }>('ds-message')\n    ).find(item => item.messageId === id || item.getAttribute('message-id') === id);\n    if (!message) return false;\n    this.releasePendingAtLiveEdge = false;\n    this.following = false;\n    this.followReleased = true;\n    this.showScrollToLatest = true;\n    message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n    return true;\n  }\n\n  @Method()\n  async scrollToStart() {\n    this.releasePendingAtLiveEdge = false;\n    this.scrollTo(0);\n    this.following = false;\n    this.followReleased = true;\n    this.showScrollToLatest = Boolean(\n      this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n    );\n  }\n\n  @Method()\n  async scrollToEnd() {\n    this.releasePendingAtLiveEdge = false;\n    this.following = true;\n    this.followReleased = false;\n    this.showScrollToLatest = false;\n    this.scrollTo(this.viewport?.scrollHeight ?? 0);\n  }\n\n  private motionBehavior(): ScrollBehavior {\n    return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n  }\n\n  private scrollTo(top: number) {\n    if (!this.viewport) return;\n    this.programmatic = true;\n    const behavior = this.motionBehavior();\n    this.viewport.scrollTo({ top, behavior });\n    if (this.programmaticTimer) clearTimeout(this.programmaticTimer);\n    this.programmaticTimer = setTimeout(\n      () => {\n        this.programmatic = false;\n        this.programmaticTimer = undefined;\n        if (this.following) {\n          this.viewport!.scrollTop = top;\n          this.showScrollToLatest = false;\n        }\n      },\n      behavior === 'smooth' ? 600 : 0\n    );\n  }\n\n  private invalidateTranscriptWork() {\n    this.prependReconciliation += 1;\n    this.turnPositionGeneration += 1;\n    this.defaultPositionGeneration += 1;\n    if (this.programmaticTimer) clearTimeout(this.programmaticTimer);\n    this.programmaticTimer = undefined;\n    this.programmatic = false;\n  }\n\n  private clearActiveTurnAnchor() {\n    this.activeTurnAnchor = undefined;\n    this.activeTurnAnchorViewportTop = undefined;\n    this.turnClearance = 0;\n    this.el.style.removeProperty('--ds-message-scroller-turn-clearance');\n  }\n\n  private resetTranscriptTracking() {\n    this.transcriptChildren = [];\n    this.knownTranscriptElements.clear();\n    this.knownTurnAnchors.clear();\n    this.firstChildViewportTop = undefined;\n    this.clearActiveTurnAnchor();\n  }\n\n  private resetTranscriptPositionState() {\n    this.following = true;\n    this.followReleased = false;\n    this.releasePendingAtLiveEdge = false;\n    this.atStart = false;\n    this.showScrollToLatest = false;\n  }\n\n  private trackTranscript(elements: readonly HTMLElement[]) {\n    elements.forEach(element => {\n      this.knownTranscriptElements.add(element);\n      if (element.matches('ds-message[scroll-anchor]')) {\n        this.knownTurnAnchors.add(element);\n      }\n    });\n  }\n\n  private seedTranscriptBaseline() {\n    this.resetTranscriptTracking();\n    this.transcriptChildren = this.getTranscriptChildren();\n    this.trackTranscript(this.transcriptChildren);\n    this.transcriptResetPending = false;\n    this.rememberFirstChildTop();\n  }\n\n  private pruneTranscriptTracking(current: readonly HTMLElement[]) {\n    pruneMessageScrollerTranscriptSet(this.knownTranscriptElements, current);\n    pruneMessageScrollerTranscriptSet(this.knownTurnAnchors, current);\n    if (this.activeTurnAnchor && !current.includes(this.activeTurnAnchor)) {\n      this.clearActiveTurnAnchor();\n    }\n  }\n\n  private scheduleDefaultPosition() {\n    const generation = ++this.defaultPositionGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.defaultPositionGeneration || !this.el.isConnected) return;\n      this.applyDefaultPosition();\n    });\n  }\n\n  private connectObservers() {\n    if (!this.viewport || !this.content || !this.overlay) return;\n    this.scrollOverlayController?.disconnect();\n    this.mutationObserver?.disconnect();\n    this.scrollOverlayController = new ScrollOverlayController({\n      host: this.el,\n      viewport: this.viewport,\n      content: this.content,\n      overlay: this.overlay,\n      overlayContentSelector: '.message-scroller__overlay-stack',\n      onGeometryChange: () => this.handleContentGrowth(),\n    });\n    this.scrollOverlayController.connect();\n    this.mutationObserver = new MutationObserver(() => {\n      this.handleTranscriptChange();\n      this.handleContentGrowth();\n    });\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n\n  private handleContentGrowth() {\n    if (!this.viewport) return;\n    this.syncTurnClearance();\n    const nextHeight = this.viewport.scrollHeight;\n    if (this.autoFollow && this.following && !this.followReleased) {\n      this.viewport.scrollTop = nextHeight;\n    }\n    if (this.releasePendingAtLiveEdge && !this.isAtLiveEdge()) {\n      this.releasePendingAtLiveEdge = false;\n    }\n    this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n    this.scrollOverlayController?.sync();\n  }\n\n  private rememberFirstChildTop() {\n    if (!this.viewport) return;\n    const first = this.getTranscriptChildren()[0];\n    this.firstChildViewportTop = first\n      ? first.getBoundingClientRect().top - this.viewport.getBoundingClientRect().top\n      : undefined;\n  }\n\n  private getTranscriptChildren(): HTMLElement[] {\n    const assigned = this.transcriptSlot?.assignedElements() ?? [];\n    const assignedTranscript = assigned.filter(\n      (element): element is HTMLElement =>\n        element instanceof HTMLElement &&\n        (element.matches('ds-message') || element.matches('ds-agent-response'))\n    );\n    const queriedTranscript = Array.from(\n      this.el.querySelectorAll<HTMLElement>('ds-message, ds-agent-response')\n    ).filter(element => {\n      if (element.closest('.message-scroller__interaction, .message-scroller__overlay-content')) {\n        return false;\n      }\n      if (element.matches('ds-agent-response')) return true;\n      return !element.closest('ds-agent-response');\n    });\n    return queriedTranscript.length > assignedTranscript.length\n      ? queriedTranscript\n      : assignedTranscript;\n  }\n\n  private handleTranscriptChange = () => {\n    const current = this.getTranscriptChildren();\n    const previous = this.transcriptChildren;\n    const transcriptReset =\n      isMessageScrollerTranscriptReset(previous, current) ||\n      (this.transcriptResetPending && current.length > 0);\n    if (transcriptReset) {\n      this.invalidateTranscriptWork();\n      this.resetTranscriptTracking();\n      this.resetTranscriptPositionState();\n      this.transcriptChildren = current;\n      this.trackTranscript(current);\n      this.transcriptResetPending = current.length === 0;\n      this.rememberFirstChildTop();\n      this.scrollOverlayController?.sync();\n      if (current.length) this.scheduleDefaultPosition();\n      return;\n    }\n\n    const hadKnownTranscript = this.knownTranscriptElements.size > 0;\n    const previouslyKnown = new Set(this.knownTranscriptElements);\n    const appendedAnchor = [...current].reverse().find((element, reverseIndex) => {\n      if (!element.matches('ds-message[scroll-anchor]') || this.knownTurnAnchors.has(element)) {\n        return false;\n      }\n      const index = current.length - reverseIndex - 1;\n      return current.slice(index + 1).every(next => !this.knownTranscriptElements.has(next));\n    });\n    this.trackTranscript(current);\n    this.pruneTranscriptTracking(current);\n    if (!previous.length) {\n      this.transcriptChildren = current;\n      if (appendedAnchor && hadKnownTranscript) {\n        this.scheduleNewTurnPosition(appendedAnchor);\n      }\n      return;\n    }\n\n    const firstKnownIndex = current.findIndex(element => previouslyKnown.has(element));\n    const newTranscript = current.filter(element => !previouslyKnown.has(element));\n    const prepended =\n      (current.length > previous.length &&\n        previous.every(\n          (element, index) => current[current.length - previous.length + index] === element\n        )) ||\n      (!appendedAnchor &&\n        newTranscript.length > 0 &&\n        firstKnownIndex > 0 &&\n        newTranscript.every(element => current.indexOf(element) < firstKnownIndex));\n\n    this.transcriptChildren = current;\n    if (prepended) {\n      if (this.viewport) {\n        const preservedElement = this.activeTurnAnchor?.isConnected\n          ? this.activeTurnAnchor\n          : previous[0];\n        const preservedTop = this.activeTurnAnchor?.isConnected\n          ? this.activeTurnAnchorViewportTop\n          : this.firstChildViewportTop;\n        if (preservedElement && preservedTop !== undefined) {\n          this.reconcilePrependPosition(preservedElement, preservedTop);\n          this.schedulePrependReconciliation(preservedElement, preservedTop, newTranscript);\n        }\n      }\n      this.rememberFirstChildTop();\n      this.rememberActiveTurnAnchorTop();\n      this.scrollOverlayController?.sync();\n      return;\n    }\n    if (appendedAnchor) {\n      this.scheduleNewTurnPosition(appendedAnchor);\n    }\n  };\n\n  private reconcilePrependPosition(element: HTMLElement, viewportTop: number) {\n    if (!this.viewport || !element.isConnected) return;\n    const nextTop = element.getBoundingClientRect().top - this.viewport.getBoundingClientRect().top;\n    this.viewport.scrollTop += nextTop - viewportTop;\n  }\n\n  private schedulePrependReconciliation(\n    element: HTMLElement,\n    viewportTop: number,\n    prepended: HTMLElement[]\n  ) {\n    const generation = ++this.prependReconciliation;\n    // Prepended custom elements can gain height after their child-list mutation.\n    // Reconcile against the original coordinate after their layouts settle.\n    const pending = prepended\n      .flatMap(item => [item, ...Array.from(item.querySelectorAll<HTMLElement>('*'))])\n      .map(item => {\n        const componentOnReady = (\n          item as HTMLElement & { componentOnReady?: () => Promise<unknown> }\n        ).componentOnReady;\n        return componentOnReady ? componentOnReady.call(item).catch(() => undefined) : null;\n      })\n      .filter((promise): promise is Promise<unknown> => Boolean(promise));\n\n    void Promise.all(pending).then(() => {\n      requestAnimationFrame(() => {\n        if (generation !== this.prependReconciliation) return;\n        this.reconcilePrependPosition(element, viewportTop);\n        requestAnimationFrame(() => {\n          if (generation !== this.prependReconciliation) return;\n          this.reconcilePrependPosition(element, viewportTop);\n          this.rememberFirstChildTop();\n          this.rememberActiveTurnAnchorTop();\n          this.scrollOverlayController?.sync();\n        });\n      });\n    });\n  }\n\n  private handleTranscriptSlotChange = () => this.handleTranscriptChange();\n\n  private scheduleNewTurnPosition(anchor: HTMLElement) {\n    const generation = ++this.turnPositionGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.turnPositionGeneration || !anchor.isConnected || !this.viewport) {\n        return;\n      }\n      this.positionNewTurn(anchor, generation);\n    });\n  }\n\n  private positionNewTurn(anchor: HTMLElement, generation: number) {\n    if (generation !== this.turnPositionGeneration || !this.viewport || !anchor.isConnected) return;\n    this.activeTurnAnchor = anchor;\n    this.syncTurnClearance();\n    requestAnimationFrame(() => {\n      if (generation !== this.turnPositionGeneration) return;\n      this.finishPositionNewTurn(anchor, generation);\n    });\n  }\n\n  private finishPositionNewTurn(anchor: HTMLElement, generation: number) {\n    if (generation !== this.turnPositionGeneration || !this.viewport || !anchor.isConnected) {\n      return;\n    }\n    const viewportRect = this.viewport.getBoundingClientRect();\n    const anchorTop =\n      anchor.getBoundingClientRect().top - viewportRect.top + this.viewport.scrollTop;\n    const customOffset = getComputedStyle(this.el)\n      .getPropertyValue('--ds-message-scroller-anchor-offset')\n      .trim();\n    const offset = resolveCssLengthPx(customOffset, 'var(--dimension-space-800)');\n    const max = Math.max(this.viewport.scrollHeight - this.viewport.clientHeight, 0);\n    const target = Math.min(Math.max(anchorTop - offset, 0), max);\n    this.following = max - target <= LIVE_EDGE_THRESHOLD;\n    this.followReleased = !this.following;\n    this.showScrollToLatest = !this.following;\n    this.programmatic = true;\n    this.viewport.scrollTop = target;\n    requestAnimationFrame(() => {\n      if (generation !== this.turnPositionGeneration) return;\n      this.programmatic = false;\n      this.following = this.isAtLiveEdge();\n      this.followReleased = !this.following;\n      this.showScrollToLatest = !this.following;\n      this.rememberFirstChildTop();\n      this.rememberActiveTurnAnchorTop();\n    });\n    this.scrollOverlayController?.sync();\n  }\n\n  private rememberActiveTurnAnchorTop() {\n    if (!this.viewport || !this.activeTurnAnchor?.isConnected) return;\n    this.activeTurnAnchorViewportTop =\n      this.activeTurnAnchor.getBoundingClientRect().top - this.viewport.getBoundingClientRect().top;\n  }\n\n  private syncTurnClearance() {\n    if (!this.viewport || !this.activeTurnAnchor?.isConnected) return;\n    const children = this.getTranscriptChildren();\n    const last = children[children.length - 1];\n    if (!last) return;\n    const anchorRect = this.activeTurnAnchor.getBoundingClientRect();\n    const lastRect = last.getBoundingClientRect();\n    const customOffset = getComputedStyle(this.el)\n      .getPropertyValue('--ds-message-scroller-anchor-offset')\n      .trim();\n    const offset = resolveCssLengthPx(customOffset, 'var(--dimension-space-800)');\n    const contentAfterAnchor = Math.max(lastRect.bottom - anchorRect.top, 0);\n    const clearance = Math.max(\n      Math.ceil(this.viewport.clientHeight - offset - contentAfterAnchor),\n      0\n    );\n    if (clearance === this.turnClearance) return;\n    this.turnClearance = clearance;\n    this.el.style.setProperty('--ds-message-scroller-turn-clearance', `${clearance}px`);\n  }\n\n  private applyDefaultPosition() {\n    if (!this.viewport) return;\n    this.releasePendingAtLiveEdge = false;\n    if (this.defaultPosition === 'start') {\n      this.viewport.scrollTop = 0;\n      this.following = false;\n      this.followReleased = true;\n      this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\n      this.scrollOverlayController?.sync();\n      return;\n    }\n    if (this.defaultPosition === 'last-anchor') {\n      const anchors = this.el.querySelectorAll<HTMLElement>('ds-message[scroll-anchor]');\n      const last = anchors.item(anchors.length - 1);\n      if (last) {\n        last.scrollIntoView({ block: 'start' });\n        this.following = this.isAtLiveEdge();\n        this.followReleased = !this.following;\n        this.showScrollToLatest = !this.following;\n        this.scrollOverlayController?.sync();\n        return;\n      }\n    }\n    this.viewport.scrollTop = this.viewport.scrollHeight;\n    this.following = true;\n    this.followReleased = false;\n    this.showScrollToLatest = false;\n    this.scrollOverlayController?.sync();\n  }\n\n  private isAtLiveEdge(): boolean {\n    if (!this.viewport) return true;\n    return (\n      this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop <=\n      LIVE_EDGE_THRESHOLD\n    );\n  }\n\n  private handleScroll = () => {\n    if (!this.viewport) return;\n    this.scrollOverlayController?.sync();\n    this.rememberFirstChildTop();\n    this.rememberActiveTurnAnchorTop();\n    if (this.programmatic) return;\n    const atLiveEdge = this.isAtLiveEdge();\n    if (this.releasePendingAtLiveEdge && atLiveEdge) {\n      // A scroll event queued by the previous auto-follow can arrive after\n      // reader input. Keep that stale event from restoring follow mode.\n      this.following = false;\n      this.followReleased = true;\n      this.showScrollToLatest = false;\n      return;\n    }\n    this.releasePendingAtLiveEdge = false;\n    this.following = atLiveEdge;\n    this.followReleased = !this.following;\n    this.showScrollToLatest = !this.following;\n    const nextAtStart = this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD;\n    if (nextAtStart && !this.atStart) this.dsReachStart.emit();\n    this.atStart = nextAtStart;\n  };\n\n  private releaseFollow = () => {\n    this.prependReconciliation += 1;\n    this.releasePendingAtLiveEdge = this.isAtLiveEdge();\n    this.following = false;\n    this.followReleased = true;\n    this.showScrollToLatest = !this.releasePendingAtLiveEdge;\n  };\n\n  private handleSelectionChange = () => {\n    const selection = document.getSelection();\n    if (\n      selection &&\n      !selection.isCollapsed &&\n      selection.anchorNode &&\n      this.el.contains(selection.anchorNode)\n    ) {\n      this.releaseFollow();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"message-scroller\">\n          <div\n            class=\"message-scroller__viewport\"\n            ref={element => {\n              this.viewport = element;\n            }}\n            role=\"region\"\n            aria-label={this.messagesLabel}\n            tabIndex={0}\n            onScroll={this.handleScroll}\n            onPointerDown={(event: PointerEvent) => {\n              if (event.pointerType === 'touch') this.releaseFollow();\n            }}\n            onWheel={this.releaseFollow}\n            onKeyDown={(event: KeyboardEvent) => {\n              if (\n                ['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '].includes(\n                  event.key\n                )\n              ) {\n                this.releaseFollow();\n              }\n            }}\n          >\n            <div\n              class=\"message-scroller__content scroll-edge-fade--block-window\"\n              ref={element => {\n                this.content = element;\n              }}\n              role=\"log\"\n              aria-live=\"polite\"\n              aria-relevant=\"additions\"\n              aria-busy={this.busy ? 'true' : undefined}\n            >\n              <slot\n                ref={element => {\n                  this.transcriptSlot = element;\n                }}\n                onSlotchange={this.handleTranscriptSlotChange}\n              />\n            </div>\n          </div>\n          <div\n            class=\"message-scroller__overlay\"\n            ref={element => {\n              this.overlay = element;\n            }}\n          >\n            <div class=\"message-scroller__overlay-stack\">\n              <div class=\"message-scroller__interaction\">\n                <slot name=\"interaction\" />\n              </div>\n              <div class=\"message-scroller__overlay-content\">\n                <slot name=\"overlay\" />\n              </div>\n            </div>\n          </div>\n          {this.showScrollToLatest ? (\n            <div class=\"message-scroller__control ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale\">\n              <ds-tooltip label=\"Scroll to latest message\" side=\"top\" size=\"sm\">\n                <ds-button-unfilled\n                  variant=\"icon\"\n                  icon=\"ChevronDown\"\n                  size=\"md\"\n                  rounded\n                  hasBorder={false}\n                  aria-label=\"Scroll to latest message\"\n                  onDsClick={() => void this.scrollToEnd()}\n                />\n              </ds-tooltip>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/MessageScroller/message-scroller-transcript.ts",
+      "content": "/**\n * A transcript reset replaces the current baseline instead of appending or\n * prepending around surviving nodes. Emptying a populated transcript also\n * starts a reset that completes when its next baseline is supplied.\n */\nexport function isMessageScrollerTranscriptReset<T>(\n  previous: readonly T[],\n  current: readonly T[]\n): boolean {\n  if (!previous.length) return false;\n  if (!current.length) return true;\n  const previousElements = new Set(previous);\n  return !current.some(element => previousElements.has(element));\n}\n\n/** Keep identity tracking bounded to nodes in the current transcript. */\nexport function pruneMessageScrollerTranscriptSet<T>(known: Set<T>, current: readonly T[]): void {\n  const currentElements = new Set(current);\n  for (const element of known) {\n    if (!currentElements.has(element)) known.delete(element);\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -254,7 +254,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -387,7 +387,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: currentArea.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -323,7 +323,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: sections, subsections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -158,7 +158,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -328,7 +328,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: dashboardGroups, settingsGroups.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -275,7 +275,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -405,7 +405,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: pageSizeOptions.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -663,7 +663,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
@@ -691,7 +691,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 type { ChromeTransitionDetail } from '../../shell/chrome-transition';\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  /** Keep the account-menu trigger visually pressed while its popup is open or closing. */\n  @Prop() accountMenuExpanded: boolean = false;\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 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\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\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.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.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.effectiveBreakpoint() > 0) this.connectResizeObserver();\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.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  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\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    this.updateBodyScrollable();\n  }\n\n  disconnectedCallback() {\n    this.disconnectResizeObserver();\n    this.disconnectScrollRegionObserver();\n    this.clearCollapseAnimationCompletion(\n      this.el.querySelector('.panel-nav') as HTMLElement | null\n    );\n    this.clearEdgeOverlayTimer();\n    if (this.globalMouseMoveHandler) {\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    }\n    if (this.globalMouseUpHandler) {\n      window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    }\n  }\n\n  private startCollapseAnimation() {\n    if (this.isAnimating) return;\n    this.isAnimating = true;\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    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\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 finishCollapseAnimation(panel: HTMLElement | null) {\n    const wasAnimating = this.isAnimating;\n    this.clearCollapseAnimationCompletion(panel);\n    if (!wasAnimating) return;\n    this.isAnimating = false;\n    this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });\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.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    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        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(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    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.isDragging = false;\n      this.showEdgeOverlay = false;\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n      this.globalMouseMoveHandler = undefined;\n      this.globalMouseUpHandler = undefined;\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\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          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-focus-ring-inset': true,\n          'ds-interaction-fill': 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 class=\"panel-nav__item-dot\" variant=\"dot\" hasRing={collapsed} label=\"\" />\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        '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      },\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 variant=\"dot\" label=\"\" />\n        </span>\n      ),\n    ];\n    const sharedProps = {\n      class: {\n        'panel-nav__item': true,\n        'panel-nav__child': 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      },\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      },\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\"\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                        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                              }}\n                              aria-hidden=\"true\"\n                            >\n                              <div class=\"panel-nav__branch-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                              }}\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                              }}\n                              aria-hidden=\"true\"\n                            >\n                              <div class=\"panel-nav__branch-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 type { ChromeTransitionDetail } from '../../shell/chrome-transition';\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  /** Keep the account-menu trigger visually pressed while its popup is open or closing. */\n  @Prop() accountMenuExpanded: boolean = false;\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 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\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.effectiveBreakpoint() > 0) this.connectResizeObserver();\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  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\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    this.updateBodyScrollable();\n    this.scheduleInlineChildrenExpansion();\n  }\n\n  disconnectedCallback() {\n    this.disconnectResizeObserver();\n    this.disconnectScrollRegionObserver();\n    this.clearInlineChildrenExpansionFrame();\n    this.clearCollapseAnimationCompletion(\n      this.el.querySelector('.panel-nav') as HTMLElement | null\n    );\n    this.clearEdgeOverlayTimer();\n    if (this.globalMouseMoveHandler) {\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    }\n    if (this.globalMouseUpHandler) {\n      window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    }\n  }\n\n  private startCollapseAnimation() {\n    if (this.isAnimating) return;\n    this.isAnimating = true;\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    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\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.inlineChildrenExpansionReady || this.collapsedPresentation) return;\n    this.clearInlineChildrenExpansionFrame();\n    this.inlineChildrenExpansionFrame = requestAnimationFrame(() => {\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.querySelector<HTMLElement>('.panel-nav__children-accordion')?.getBoundingClientRect();\n      this.inlineChildrenExpansionReady = true;\n    });\n  }\n\n  private clearInlineChildrenExpansionFrame() {\n    if (this.inlineChildrenExpansionFrame === null) return;\n    cancelAnimationFrame(this.inlineChildrenExpansionFrame);\n    this.inlineChildrenExpansionFrame = null;\n  }\n\n  private finishCollapseAnimation(panel: HTMLElement | null) {\n    const wasAnimating = this.isAnimating;\n    this.clearCollapseAnimationCompletion(panel);\n    if (!wasAnimating) return;\n    this.isAnimating = false;\n    this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });\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.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    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        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(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    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.isDragging = false;\n      this.showEdgeOverlay = false;\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n      this.globalMouseMoveHandler = undefined;\n      this.globalMouseUpHandler = undefined;\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\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          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-focus-ring-inset': true,\n          'ds-interaction-fill': 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 class=\"panel-nav__item-dot\" variant=\"dot\" hasRing={collapsed} label=\"\" />\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        '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      },\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 variant=\"dot\" label=\"\" />\n        </span>\n      ),\n    ];\n    const sharedProps = {\n      class: {\n        'panel-nav__item': true,\n        'panel-nav__child': 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      },\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      },\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\"\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                              }}\n                              aria-hidden=\"true\"\n                            >\n                              <div class=\"panel-nav__branch-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                              }}\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                              }}\n                              aria-hidden=\"true\"\n                            >\n                              <div class=\"panel-nav__branch-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/mcp-data/registry/panel-sub-nav.json

@@ -220,7 +220,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/panel-tool-header.json

@@ -317,7 +317,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: actions.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/panel-tool-search.json

@@ -359,7 +359,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.0",
+          "@ds-mo/tokens ^6.5.1",
           "@ds-mo/icons ^7.0.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."