@ds-mo/ui 15.4.0 → 15.5.0

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

@@ -316,7 +316,7 @@
     },
     {
       "path": "src/wc/components/BarNav/BarNav.tsx",
-      "content": "import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  State,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { getSelectableTabs, isTabDivider, type TabItemTab } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\nimport { deriveBarNavValueFromUrl, shouldResyncBarNavProps } from './bar-nav-utils';\nimport {\n  tabsOverflowContainer,\n  tabsToOverflowMenuSections,\n  trimTrailingDividers,\n  visibleTabCountForWidth,\n} from './bar-nav-tabs-menu-utils';\nimport {\n  CHROME_TRANSITION_END,\n  CHROME_TRANSITION_START,\n  ChromeTransitionGate,\n  createRafCoalescer,\n  readChromeTransitionSource,\n  readChromeTransitionPhase,\n} from '../../shell/chrome-transition';\n\n@Component({\n  tag: 'ds-bar-nav',\n  styleUrl: 'BarNav.css',\n  scoped: true,\n})\nexport class BarNav {\n  /** Style slot: `dashboard` or `settings`. Colors match for now. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * Tab items for the left section.\n   * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n   */\n  @Prop() tabs: BarNavTab[] = [];\n\n  /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Fallback heading shown when no tabs are provided.\n   * When tabs are present the heading is hidden.\n   */\n  @Prop() heading: string | undefined;\n\n  /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n  @Prop() basePath: string = '';\n\n  /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n  @Prop() currentUrl: string = '';\n  @Prop() moreTabsLabel: string = 'More tabs';\n\n  /** Emitted when the active tab changes. Detail = tab id. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  @State() private resolvedTabs: BarNavTab[] = [];\n  @State() private urlDerivedValue: string = '';\n  @State() private hideTabsForDetailRoute = false;\n  @State() private tabsCollapsed = false;\n  @State() private menuOpen = false;\n  @State() private menuTriggerActive = false;\n  /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n  @State() private tabLayoutCommitted = false;\n  @State() private visibleTabs: BarNavTab[] = [];\n  @State() private overflowTabs: BarNavTab[] = [];\n  @State() private menuInitialFocusVisible = false;\n  @State() private overflowRovingFocused = false;\n  @State() private focusedTabId = '';\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n  private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n  private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;\n  private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n  private headerEl: HTMLElement | null = null;\n  private triggerEl: (HTMLElement & { setFocus?: () => Promise<void> }) | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n  private visibleTabListEl: HTMLElement | null = null;\n  private probeTabListEl: HTMLElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private intrinsicWidthRetryCount = 0;\n  private tabLayoutPendingFrames = 0;\n  private readonly panelNavTransition = new ChromeTransitionGate();\n  private readonly panelToolsTransition = new ChromeTransitionGate();\n  private readonly overflowCoalescer = createRafCoalescer(() => {\n    this.updateTabsCollapsed();\n  });\n  private chromeTransitionShell: HTMLElement | null = null;\n  /** Matches `basePath` once tabs + URL are reconciled for the active section. */\n  @State() private committedSection = '';\n  /** Section waiting for URL + tabs to catch up after a cross-area navigation. */\n  @State() private pendingSection = '';\n\n  private get effectiveValue(): string {\n    if (this.currentUrl && this.basePath) {\n      return this.urlDerivedValue;\n    }\n    return this.value;\n  }\n\n  private get renderedSelectableTabs(): TabItemTab[] {\n    const tabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n    return getSelectableTabs(tabs);\n  }\n\n  private get hasOverflowTabs(): boolean {\n    return this.tabLayoutCommitted && this.tabsCollapsed && this.overflowTabs.length > 0;\n  }\n\n  private syncFocusedTabId(preferred: string, tabs: TabItemTab[]) {\n    if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {\n      this.focusedTabId = preferred;\n      return;\n    }\n    const first = tabs.find(tab => !tab.isInactive);\n    this.focusedTabId = first?.id ?? '';\n  }\n\n  private digestTabsConfig(tabs: BarNavTab[]): string {\n    return tabs.map(t => (isTabDivider(t) ? '|' : t.id)).join(',');\n  }\n\n  private resetTabOverflowLayout() {\n    this.tabLayoutCommitted = false;\n    this.tabsCollapsed = false;\n    this.menuOpen = false;\n    this.menuTriggerActive = false;\n    this.menuInitialFocusVisible = false;\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n    this.visibleTabs = [];\n    this.overflowTabs = [];\n  }\n\n  @Watch('tabs')\n  @Watch('currentUrl')\n  @Watch('basePath')\n  onHostPropsChange() {\n    this.applyHostProps();\n  }\n\n  @Watch('value')\n  @Watch('urlDerivedValue')\n  onSelectionChange() {\n    this.syncFocusedTabId(this.effectiveValue, this.renderedSelectableTabs);\n    this.syncMenuSections();\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('menuOpen')\n  onMenuOpenChange(open: boolean) {\n    if (this.menuEl) {\n      this.menuEl.open = open;\n    }\n  }\n\n  @Watch('tabsCollapsed')\n  onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n    if (!collapsed) {\n      this.menuOpen = false;\n      this.menuTriggerActive = false;\n      this.menuInitialFocusVisible = false;\n      this.menuEl = null;\n    }\n    this.scheduleOverflowCheck();\n    if (collapsed) {\n      requestAnimationFrame(() => {\n        this.scheduleOverflowCheck();\n      });\n    }\n    if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n    requestAnimationFrame(() => this.scheduleOverflowCheck());\n    queueMicrotask(() => this.focusVisibleSelectedTab());\n  }\n\n  componentWillLoad() {\n    this.applyHostProps();\n    this.syncFocusedTabId(this.effectiveValue, getSelectableTabs(this.resolvedTabs));\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.setupOverflowObserver();\n    this.bindChromeTransitionListeners();\n    this.scheduleOverflowCheck();\n  }\n\n  componentDidRender() {\n    if (this.chromeOverflowPaused()) {\n      this.syncMenuAnchor();\n      return;\n    }\n    this.scheduleOverflowCheck();\n    this.syncMenuAnchor();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.overflowCoalescer.cancel();\n    this.unbindChromeTransitionListeners();\n  }\n\n  private bindChromeTransitionListeners() {\n    const shell = this.el.closest<HTMLElement>('ds-shell-app');\n    if (!shell) return;\n    this.chromeTransitionShell = shell;\n    shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n  }\n\n  private unbindChromeTransitionListeners() {\n    if (!this.chromeTransitionShell) return;\n    this.chromeTransitionShell.removeEventListener(\n      CHROME_TRANSITION_START,\n      this.onChromeTransitionStart\n    );\n    this.chromeTransitionShell.removeEventListener(\n      CHROME_TRANSITION_END,\n      this.onChromeTransitionEnd\n    );\n    this.chromeTransitionShell = null;\n  }\n\n  private onChromeTransitionStart = (event: Event) => {\n    const source = readChromeTransitionSource(event);\n    if (source === 'panel-nav') {\n      this.panelNavTransition.enter();\n      return;\n    }\n    if (source === 'panel-tools') {\n      const phase = readChromeTransitionPhase(event) ?? 'opening';\n      if (phase === 'closing') {\n        this.panelToolsTransition.enter();\n      }\n    }\n  };\n\n  private chromeOverflowPaused(): boolean {\n    return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;\n  }\n\n  private onChromeTransitionEnd = (event: Event) => {\n    const source = readChromeTransitionSource(event);\n    if (source === 'panel-nav') {\n      this.panelNavTransition.exit();\n      if (!this.panelNavTransition.isActive) {\n        this.scheduleOverflowCheck();\n      }\n      return;\n    }\n    if (source === 'panel-tools') {\n      this.panelToolsTransition.exit();\n      this.scheduleOverflowCheck();\n    }\n  };\n\n  /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    if (shouldResyncBarNavProps(this.resolvedTabs, this.tabs)) {\n      this.applyHostProps();\n    } else if (this.currentUrl && this.basePath) {\n      this.syncValueFromUrl();\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = BarNav.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  private setupOverflowObserver() {\n    if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.chromeOverflowPaused()) return;\n      this.scheduleOverflowCheck();\n    });\n    this.resizeObserver.observe(this.headerEl);\n  }\n\n  private scheduleOverflowCheck() {\n    if (this.chromeOverflowPaused()) return;\n    this.overflowCoalescer.schedule();\n  }\n\n  /** Width available for the tab row or collapsed trigger. */\n  private getLeftZoneAvailableWidth(): number {\n    if (!this.headerEl) return 0;\n\n    const headerStyle = getComputedStyle(this.headerEl);\n    const horizontalPadding =\n      (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n\n    return Math.max(0, this.headerEl.clientWidth - horizontalPadding);\n  }\n\n  private getTabsIntrinsicWidth(): number {\n    return this.probeTabListEl?.scrollWidth ?? 0;\n  }\n\n  private getHeaderGap(): number {\n    if (!this.headerEl) return 0;\n    const style = getComputedStyle(this.headerEl);\n    return parseFloat(style.columnGap || style.gap) || 0;\n  }\n\n  private getOverflowTriggerReserveWidth(): number {\n    if (!this.triggerEl) {\n      return 40;\n    }\n    return this.triggerEl.getBoundingClientRect().width + this.getHeaderGap();\n  }\n\n  private getProbeTabMetrics(): {\n    itemWidths: number[];\n    itemGap: number;\n    listExtraWidth: number;\n  } | null {\n    const tabList = this.probeTabListEl;\n    if (!tabList) return null;\n\n    const children = Array.from(tabList.children) as HTMLElement[];\n    const itemWidths = children.map(child => child.getBoundingClientRect().width);\n    if (itemWidths.length === 0 || itemWidths.some(width => width === 0)) return null;\n\n    const style = getComputedStyle(tabList);\n    const itemGap = parseFloat(style.columnGap || style.gap) || 0;\n    const childrenWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n    const gapWidth = itemGap * Math.max(0, itemWidths.length - 1);\n    const listExtraWidth = Math.max(0, tabList.scrollWidth - childrenWidth - gapWidth);\n\n    return { itemWidths, itemGap, listExtraWidth };\n  }\n\n  private setOverflowTabLayout(visibleTabs: BarNavTab[], overflowTabs: BarNavTab[]) {\n    const nextCollapsed = overflowTabs.length > 0;\n    const visibleChanged =\n      this.digestTabsConfig(visibleTabs) !== this.digestTabsConfig(this.visibleTabs);\n    const overflowChanged =\n      this.digestTabsConfig(overflowTabs) !== this.digestTabsConfig(this.overflowTabs);\n\n    if (visibleChanged) {\n      this.visibleTabs = visibleTabs;\n    }\n    if (overflowChanged) {\n      this.overflowTabs = overflowTabs;\n    }\n    if (nextCollapsed !== this.tabsCollapsed) {\n      this.tabsCollapsed = nextCollapsed;\n      if (!nextCollapsed) {\n        this.menuOpen = false;\n        this.menuTriggerActive = false;\n      }\n    }\n    this.syncFocusedTabId(\n      this.effectiveValue,\n      getSelectableTabs(nextCollapsed ? visibleTabs : this.resolvedTabs)\n    );\n  }\n\n  private scheduleIntrinsicWidthRetry() {\n    if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n    this.intrinsicWidthRetryCount++;\n    requestAnimationFrame(() => this.scheduleOverflowCheck());\n  }\n\n  private forceTabLayoutCommit(fallbackCollapsed: boolean) {\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n    this.setOverflowTabLayout(\n      fallbackCollapsed ? [] : this.resolvedTabs,\n      fallbackCollapsed ? this.resolvedTabs : []\n    );\n    this.tabLayoutCommitted = true;\n  }\n\n  private updateTabsCollapsed() {\n    if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n      if (this.tabsCollapsed) {\n        this.setOverflowTabLayout([], []);\n      }\n      this.intrinsicWidthRetryCount = 0;\n      this.tabLayoutPendingFrames = 0;\n      this.tabLayoutCommitted = true;\n      return;\n    }\n\n    const metrics = this.getProbeTabMetrics();\n    const intrinsicWidth = this.getTabsIntrinsicWidth();\n    if (!metrics || intrinsicWidth === 0) {\n      this.tabLayoutPendingFrames += 1;\n      if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {\n        this.forceTabLayoutCommit(false);\n      } else if (this.tabLayoutPendingFrames >= BarNav.TAB_LAYOUT_COMMIT_MAX_FRAMES) {\n        this.forceTabLayoutCommit(false);\n      } else {\n        this.scheduleIntrinsicWidthRetry();\n      }\n      return;\n    }\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n\n    const shouldCollapse = tabsOverflowContainer(\n      intrinsicWidth,\n      this.getLeftZoneAvailableWidth(),\n      this.tabsCollapsed,\n      BarNav.OVERFLOW_HYSTERESIS_PX\n    );\n\n    if (!shouldCollapse) {\n      this.setOverflowTabLayout(this.resolvedTabs, []);\n      this.tabLayoutCommitted = true;\n      return;\n    }\n\n    const visibleCount = visibleTabCountForWidth(\n      metrics.itemWidths,\n      this.getLeftZoneAvailableWidth(),\n      this.getOverflowTriggerReserveWidth(),\n      metrics.itemGap,\n      metrics.listExtraWidth\n    );\n    const visibleTabs = trimTrailingDividers(this.resolvedTabs.slice(0, visibleCount));\n    const overflowTabs = this.resolvedTabs.slice(visibleTabs.length);\n    this.setOverflowTabLayout(visibleTabs, overflowTabs);\n    this.tabLayoutCommitted = true;\n  }\n\n  private syncMenuAnchor() {\n    if (!this.menuEl || !this.triggerEl || !this.hasOverflowTabs) return;\n    this.menuEl.anchor = this.triggerEl;\n    this.syncMenuSections();\n  }\n\n  private handleMenuSelect(e: Event) {\n    const detail = (e as CustomEvent<MenuItemData>).detail;\n    if (detail?.value !== undefined) {\n      this.selectTab(String(detail.value));\n    }\n    this.menuOpen = false;\n    this.menuInitialFocusVisible = false;\n  }\n\n  private handleMenuClose() {\n    this.menuOpen = false;\n    this.menuInitialFocusVisible = false;\n  }\n\n  private handleMenuAfterClose() {\n    if (!this.menuOpen) this.menuTriggerActive = false;\n  }\n\n  /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */\n  private incomingTabs(): BarNavTab[] {\n    return this.tabs ?? [];\n  }\n\n  private applyHostProps() {\n    const nextBasePath = this.basePath;\n    const sectionChanged =\n      nextBasePath !== '' && this.committedSection !== '' && nextBasePath !== this.committedSection;\n\n    if (sectionChanged) {\n      this.urlDerivedValue = '';\n      this.committedSection = '';\n      this.pendingSection = nextBasePath;\n      this.resolvedTabs = [];\n      this.resetTabOverflowLayout();\n      return;\n    }\n\n    if (this.pendingSection) {\n      if (!nextBasePath || nextBasePath !== this.pendingSection) {\n        return;\n      }\n      if (!this.currentUrl.startsWith(this.pendingSection)) {\n        return;\n      }\n      const tabs = this.incomingTabs();\n      if (tabs.length === 0) {\n        return;\n      }\n      this.pendingSection = '';\n    }\n\n    const tabs = this.incomingTabs();\n    const tabsConfigChanged =\n      this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);\n\n    this.resolvedTabs = tabs;\n    this.syncValueFromUrl();\n    this.committedSection = nextBasePath;\n    if (tabsConfigChanged) {\n      this.resetTabOverflowLayout();\n    }\n    this.scheduleOverflowCheck();\n  }\n\n  private syncMenuSections() {\n    if (!this.menuEl) return;\n    this.menuEl.sections = tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue);\n  }\n\n  private syncValueFromUrl() {\n    const tabs = this.incomingTabs();\n\n    if (!this.currentUrl || !this.basePath) {\n      this.urlDerivedValue = '';\n      this.hideTabsForDetailRoute = false;\n      return;\n    }\n\n    if (!this.currentUrl.startsWith(this.basePath)) {\n      this.urlDerivedValue = '';\n      this.hideTabsForDetailRoute = false;\n      return;\n    }\n\n    const { value, hideTabs } = deriveBarNavValueFromUrl(this.currentUrl, this.basePath, tabs);\n    this.urlDerivedValue = value;\n    this.hideTabsForDetailRoute = hideTabs;\n  }\n\n  private selectTab(id: string) {\n    this.value = id;\n    this.dsTabChange.emit(id);\n  }\n\n  /** Move focus to the selected tab in the visible tab group (after expand). */\n  private focusVisibleSelectedTab() {\n    const tab = this.visibleTabListEl?.querySelector(\n      `[data-tab-id=\"${this.effectiveValue}\"]`\n    ) as HTMLElement | null;\n    tab?.focus({ preventScroll: true });\n  }\n\n  private focusVisibleTab(id: string) {\n    this.focusedTabId = id;\n    const tab = this.visibleTabListEl?.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    tab?.focus({ preventScroll: true });\n  }\n\n  private focusLastVisibleTab() {\n    const last = [...this.renderedSelectableTabs].reverse().find(tab => !tab.isInactive);\n    if (last) this.focusVisibleTab(last.id);\n  }\n\n  private findEnabledVisibleTab(from: number, step: 1 | -1): number | null {\n    const tabs = this.renderedSelectableTabs;\n    for (let index = from + step; index >= 0 && index < tabs.length; index += step) {\n      if (!tabs[index]?.isInactive) return index;\n    }\n    return null;\n  }\n\n  private handleTabKeyDown(e: KeyboardEvent) {\n    const tabs = this.renderedSelectableTabs;\n    if (!tabs.length) return;\n    const targetId = (e.target as HTMLElement | null)?.getAttribute('data-tab-id');\n    const focusedId = targetId ?? this.focusedTabId;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      const focused = tabs.find(tab => tab.id === focusedId);\n      if (!focused || focused.isInactive) return;\n      e.preventDefault();\n      this.selectTab(focused.id);\n      return;\n    }\n\n    const currentIndex = tabs.findIndex(tab => tab.id === focusedId);\n    if (currentIndex < 0) return;\n\n    let nextIndex: number | null;\n    if (e.key === 'ArrowRight') {\n      nextIndex = this.findEnabledVisibleTab(currentIndex, 1);\n      if (nextIndex === null && this.hasOverflowTabs) {\n        e.preventDefault();\n        this.overflowRovingFocused = true;\n        void this.triggerEl?.setFocus?.();\n        return;\n      }\n    } else if (e.key === 'ArrowLeft') {\n      nextIndex = this.findEnabledVisibleTab(currentIndex, -1);\n    } else if (e.key === 'Home') {\n      nextIndex = tabs.findIndex(tab => !tab.isInactive);\n    } else if (e.key === 'End') {\n      const reversedIndex = [...tabs].reverse().findIndex(tab => !tab.isInactive);\n      nextIndex = reversedIndex < 0 ? null : tabs.length - 1 - reversedIndex;\n    } else {\n      return;\n    }\n\n    if (nextIndex === null || nextIndex < 0 || nextIndex === currentIndex) return;\n    e.preventDefault();\n    this.focusVisibleTab(tabs[nextIndex].id);\n  }\n\n  private toggleTabMenu(options?: { focusVisible?: boolean }) {\n    if (this.menuOpen) {\n      this.menuOpen = false;\n      this.menuInitialFocusVisible = false;\n      return;\n    }\n\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n      this.menuEl.minWidth = '';\n      this.syncMenuSections();\n    }\n\n    this.menuInitialFocusVisible = options?.focusVisible ?? false;\n    this.menuTriggerActive = true;\n    this.menuOpen = true;\n  }\n\n  private handleOverflowFocus = () => {\n    this.overflowRovingFocused = true;\n  };\n\n  private handleOverflowBlur = () => {\n    this.overflowRovingFocused = false;\n  };\n\n  private handleTriggerKeyDown(e: KeyboardEvent) {\n    if (!this.hasOverflowTabs) return;\n\n    if (!this.menuOpen) {\n      if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        this.overflowRovingFocused = false;\n        this.focusLastVisibleTab();\n        return;\n      }\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        this.toggleTabMenu({ focusVisible: true });\n      }\n      return;\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.menuOpen = false;\n      this.menuInitialFocusVisible = false;\n      void this.triggerEl?.setFocus?.();\n    }\n  }\n\n  private renderTabList(tabs: BarNavTab[], probe: boolean) {\n    return (\n      <div\n        role=\"tablist\"\n        class=\"bar-nav__tab-list\"\n        aria-label={this.heading}\n        ref={el => {\n          if (probe) {\n            const next = (el as HTMLElement) ?? null;\n            if (next === this.probeTabListEl) return;\n            this.probeTabListEl = next;\n            if (next) {\n              this.intrinsicWidthRetryCount = 0;\n              this.tabLayoutPendingFrames = 0;\n              this.scheduleOverflowCheck();\n            }\n          } else {\n            this.visibleTabListEl = (el as HTMLElement) ?? null;\n          }\n        }}\n        onKeyDown={probe ? undefined : (e: KeyboardEvent) => this.handleTabKeyDown(e)}\n        onFocusin={\n          probe\n            ? undefined\n            : () => {\n                this.overflowRovingFocused = false;\n              }\n        }\n      >\n        {tabs.map((tab, index) => {\n          if (isTabDivider(tab)) {\n            return (\n              <div class=\"bar-nav__tab-divider\" key={`divider-${index}`} aria-hidden=\"true\">\n                <div class=\"bar-nav__tab-divider-line\" />\n              </div>\n            );\n          }\n\n          const isSelected = tab.id === this.effectiveValue;\n          return (\n            <button\n              key={tab.id}\n              type=\"button\"\n              role=\"tab\"\n              data-tab-id={tab.id}\n              class={{\n                'bar-nav__tab': true,\n                'bar-nav__tab--selected': isSelected,\n                'ds-control--md': true,\n                'ds-focus-ring-inset': true,\n                'ds-interaction-fill--on-chrome': true,\n                'ds-control-inactive': !!tab.isInactive,\n              }}\n              aria-selected={isSelected ? 'true' : 'false'}\n              aria-disabled={tab.isInactive ? 'true' : undefined}\n              aria-controls={tab.panelId ?? undefined}\n              disabled={tab.isInactive}\n              tabIndex={\n                !probe && !this.overflowRovingFocused && tab.id === this.focusedTabId ? 0 : -1\n              }\n              onClick={() => !probe && !tab.isInactive && this.selectTab(tab.id)}\n              onFocus={() => {\n                if (!probe) this.focusedTabId = tab.id;\n              }}\n            >\n              <span\n                class={{\n                  'bar-nav__tab-label': true,\n                  'ds-control-label-box': true,\n                  'ds-control-label-dot': !!tab.dot,\n                  'bar-nav__tab-label--dot': !!tab.dot,\n                }}\n              >\n                <ds-text as=\"span\" variant=\"text-body-medium\" emphasis={isSelected} color=\"inherit\">\n                  {tab.label}\n                </ds-text>\n                {tab.dot && (\n                  <ds-badge\n                    class=\"bar-nav__tab-dot ds-control-label-dot__badge\"\n                    variant=\"dot\"\n                    hasRing={false}\n                    label=\"\"\n                    aria-hidden=\"true\"\n                    style={{ '--_badge-bg': 'var(--_bar-nav-dot)' }}\n                  />\n                )}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n\n  render() {\n    // Section gating only applies when `basePath` is set (SPA section sync).\n    // Tabs without a base path must still render — otherwise a single-tab bar\n    // (or any non-routed tabs) silently falls through to an empty header.\n    const sectionReady = this.basePath === '' || this.committedSection === this.basePath;\n    const hasTabs = sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n    const tabGroupKey = this.basePath || 'no-section';\n    const renderedTabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n\n    return (\n      <Host>\n        <header\n          class={{\n            'bar-nav': true,\n            'ds-control--md': true,\n            'ds-chrome-row': true,\n            'ds-chrome-space--md': true,\n            'ds-interaction-fill--on-chrome': true,\n            'bar-nav--dashboard': this.navStyle === 'dashboard',\n            'bar-nav--settings': this.navStyle === 'settings',\n            'bar-nav--tabs-collapsed': hasTabs && this.hasOverflowTabs,\n          }}\n          ref={el => {\n            this.headerEl = el as HTMLElement;\n            if (el && !this.resizeObserver) {\n              this.setupOverflowObserver();\n            }\n          }}\n        >\n          {hasTabs && (\n            <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n              <div key={`probe-${tabGroupKey}`}>{this.renderTabList(this.resolvedTabs, true)}</div>\n            </div>\n          )}\n\n          {hasTabs && this.tabLayoutCommitted && renderedTabs.length > 0 && (\n            <div class=\"bar-nav__left\">\n              <div key={`visible-${tabGroupKey}`} class=\"bar-nav__tabs-visible\">\n                {this.renderTabList(renderedTabs, false)}\n              </div>\n            </div>\n          )}\n\n          {hasTabs && !this.tabLayoutCommitted && (\n            <div class=\"bar-nav__tabs-pending\" aria-hidden=\"true\" />\n          )}\n\n          {!hasTabs && this.heading && (\n            <ds-text\n              class=\"bar-nav__heading\"\n              lineTruncation={1}\n              as=\"span\"\n              variant=\"text-body-medium\"\n              emphasis\n              color=\"inherit\"\n              wrap=\"nowrap\"\n            >\n              {this.heading}\n            </ds-text>\n          )}\n\n          {hasTabs && this.hasOverflowTabs && (\n            <ds-button-unfilled\n              variant=\"icon\"\n              class={{\n                'bar-nav__overflow-trigger': true,\n              }}\n              icon=\"ChevronDown\"\n              activeFill={false}\n              hasBorder={false}\n              background=\"chrome\"\n              focusTabIndex={this.overflowRovingFocused ? 0 : -1}\n              ref={(el?: HTMLDsButtonUnfilledElement) => {\n                this.triggerEl = (el as HTMLElement & { setFocus?: () => Promise<void> }) ?? null;\n              }}\n              haspopup=\"menu\"\n              expanded={this.menuOpen}\n              surfaceOpen={this.menuTriggerActive}\n              aria-label={this.moreTabsLabel}\n              onDsClick={() => this.toggleTabMenu({ focusVisible: false })}\n              onFocusin={this.handleOverflowFocus}\n              onFocusout={this.handleOverflowBlur}\n              onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n            />\n          )}\n        </header>\n\n        {hasTabs && this.hasOverflowTabs && (\n          <ds-menu\n            ref={el => {\n              this.menuEl = (el as HTMLDsMenuElement) ?? null;\n            }}\n            open={this.menuOpen}\n            sections={tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue)}\n            side=\"bottom\"\n            align=\"end\"\n            sideOffset=\"calc(var(--dimension-space-100) + var(--dimension-space-050))\"\n            initialFocusVisible={this.menuInitialFocusVisible}\n            onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n            onDsClose={() => this.handleMenuClose()}\n            onDsAfterClose={() => this.handleMenuAfterClose()}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  State,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { getSelectableTabs, isTabDivider, type TabItemTab } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\nimport { deriveBarNavValueFromUrl, shouldResyncBarNavProps } from './bar-nav-utils';\nimport {\n  tabsOverflowContainer,\n  tabsToOverflowMenuSections,\n  trimTrailingDividers,\n  visibleTabCountForWidth,\n} from './bar-nav-tabs-menu-utils';\nimport {\n  CHROME_TRANSITION_END,\n  CHROME_TRANSITION_START,\n  ChromeTransitionGate,\n  createRafCoalescer,\n  readChromeTransitionSource,\n  readChromeTransitionPhase,\n} from '../../shell/chrome-transition';\n\n@Component({\n  tag: 'ds-bar-nav',\n  styleUrl: 'BarNav.css',\n  scoped: true,\n})\nexport class BarNav {\n  /** Style slot: `dashboard` or `settings`. Colors match for now. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * Tab items for the left section.\n   * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n   */\n  @Prop() tabs: BarNavTab[] = [];\n\n  /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Fallback heading shown when no tabs are provided.\n   * When tabs are present the heading is hidden.\n   */\n  @Prop() heading: string | undefined;\n\n  /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n  @Prop() basePath: string = '';\n\n  /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n  @Prop() currentUrl: string = '';\n  @Prop() moreTabsLabel: string = 'More tabs';\n\n  /** Emitted when the active tab changes. Detail = tab id. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  @State() private resolvedTabs: BarNavTab[] = [];\n  @State() private urlDerivedValue: string = '';\n  @State() private hideTabsForDetailRoute = false;\n  @State() private tabsCollapsed = false;\n  @State() private menuOpen = false;\n  @State() private menuTriggerActive = false;\n  /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n  @State() private tabLayoutCommitted = false;\n  @State() private visibleTabs: BarNavTab[] = [];\n  @State() private overflowTabs: BarNavTab[] = [];\n  @State() private menuInitialFocusVisible = false;\n  @State() private overflowRovingFocused = false;\n  @State() private focusedTabId = '';\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n  private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n  private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;\n  private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n  private headerEl: HTMLElement | null = null;\n  private triggerEl: (HTMLElement & { setFocus?: () => Promise<void> }) | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n  private visibleTabListEl: HTMLElement | null = null;\n  private probeTabListEl: HTMLElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private hasLoaded = false;\n  private readonly connectionTasks = new ConnectionTasks(() => this.el.isConnected);\n  private intrinsicWidthRetryCount = 0;\n  private tabLayoutPendingFrames = 0;\n  private readonly panelNavTransition = new ChromeTransitionGate();\n  private readonly panelToolsTransition = new ChromeTransitionGate();\n  private readonly overflowCoalescer = createRafCoalescer(() => {\n    this.updateTabsCollapsed();\n  });\n  private chromeTransitionShell: HTMLElement | null = null;\n  /** Matches `basePath` once tabs + URL are reconciled for the active section. */\n  @State() private committedSection = '';\n  /** Section waiting for URL + tabs to catch up after a cross-area navigation. */\n  @State() private pendingSection = '';\n\n  private get effectiveValue(): string {\n    if (this.currentUrl && this.basePath) {\n      return this.urlDerivedValue;\n    }\n    return this.value;\n  }\n\n  private get renderedSelectableTabs(): TabItemTab[] {\n    const tabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n    return getSelectableTabs(tabs);\n  }\n\n  private get hasOverflowTabs(): boolean {\n    return this.tabLayoutCommitted && this.tabsCollapsed && this.overflowTabs.length > 0;\n  }\n\n  private syncFocusedTabId(preferred: string, tabs: TabItemTab[]) {\n    if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {\n      this.focusedTabId = preferred;\n      return;\n    }\n    const first = tabs.find(tab => !tab.isInactive);\n    this.focusedTabId = first?.id ?? '';\n  }\n\n  private digestTabsConfig(tabs: BarNavTab[]): string {\n    return tabs.map(t => (isTabDivider(t) ? '|' : t.id)).join(',');\n  }\n\n  private resetTabOverflowLayout() {\n    this.tabLayoutCommitted = false;\n    this.tabsCollapsed = false;\n    this.menuOpen = false;\n    this.menuTriggerActive = false;\n    this.menuInitialFocusVisible = false;\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n    this.visibleTabs = [];\n    this.overflowTabs = [];\n  }\n\n  @Watch('tabs')\n  @Watch('currentUrl')\n  @Watch('basePath')\n  onHostPropsChange() {\n    this.applyHostProps();\n  }\n\n  @Watch('value')\n  @Watch('urlDerivedValue')\n  onSelectionChange() {\n    this.syncFocusedTabId(this.effectiveValue, this.renderedSelectableTabs);\n    this.syncMenuSections();\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('menuOpen')\n  onMenuOpenChange(open: boolean) {\n    if (this.menuEl) {\n      this.menuEl.open = open;\n    }\n  }\n\n  @Watch('tabsCollapsed')\n  onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n    if (!collapsed) {\n      this.menuOpen = false;\n      this.menuTriggerActive = false;\n      this.menuInitialFocusVisible = false;\n      this.menuEl = null;\n    }\n    this.scheduleOverflowCheck();\n    if (collapsed) {\n      this.connectionTasks.frame(() => {\n        this.scheduleOverflowCheck();\n      });\n    }\n    if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n    this.connectionTasks.frame(() => this.scheduleOverflowCheck());\n    this.connectionTasks.microtask(() => this.focusVisibleSelectedTab());\n  }\n\n  componentWillLoad() {\n    this.applyHostProps();\n    this.syncFocusedTabId(this.effectiveValue, getSelectableTabs(this.resolvedTabs));\n  }\n\n  connectedCallback() {\n    if (this.hasLoaded) this.connectResources();\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.connectResources();\n  }\n\n  private connectResources() {\n    if (!this.el.isConnected) return;\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.setupOverflowObserver();\n    this.bindChromeTransitionListeners();\n    this.scheduleOverflowCheck();\n  }\n\n  componentDidRender() {\n    if (this.chromeOverflowPaused()) {\n      this.syncMenuAnchor();\n      return;\n    }\n    this.scheduleOverflowCheck();\n    this.syncMenuAnchor();\n  }\n\n  disconnectedCallback() {\n    this.connectionTasks.cancel();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.overflowCoalescer.cancel();\n    this.unbindChromeTransitionListeners();\n    this.panelNavTransition.exit();\n    this.panelToolsTransition.exit();\n  }\n\n  private bindChromeTransitionListeners() {\n    this.unbindChromeTransitionListeners();\n    const shell = this.el.closest<HTMLElement>('ds-shell-app');\n    if (!shell) return;\n    this.chromeTransitionShell = shell;\n    shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n  }\n\n  private unbindChromeTransitionListeners() {\n    if (!this.chromeTransitionShell) return;\n    this.chromeTransitionShell.removeEventListener(\n      CHROME_TRANSITION_START,\n      this.onChromeTransitionStart\n    );\n    this.chromeTransitionShell.removeEventListener(\n      CHROME_TRANSITION_END,\n      this.onChromeTransitionEnd\n    );\n    this.chromeTransitionShell = null;\n  }\n\n  private onChromeTransitionStart = (event: Event) => {\n    const source = readChromeTransitionSource(event);\n    if (source === 'panel-nav') {\n      this.panelNavTransition.enter();\n      return;\n    }\n    if (source === 'panel-tools') {\n      const phase = readChromeTransitionPhase(event) ?? 'opening';\n      if (phase === 'closing') {\n        this.panelToolsTransition.enter();\n      }\n    }\n  };\n\n  private chromeOverflowPaused(): boolean {\n    return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;\n  }\n\n  private onChromeTransitionEnd = (event: Event) => {\n    const source = readChromeTransitionSource(event);\n    if (source === 'panel-nav') {\n      this.panelNavTransition.exit();\n      if (!this.panelNavTransition.isActive) {\n        this.scheduleOverflowCheck();\n      }\n      return;\n    }\n    if (source === 'panel-tools') {\n      this.panelToolsTransition.exit();\n      this.scheduleOverflowCheck();\n    }\n  };\n\n  /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    if (shouldResyncBarNavProps(this.resolvedTabs, this.tabs)) {\n      this.applyHostProps();\n    } else if (this.currentUrl && this.basePath) {\n      this.syncValueFromUrl();\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        this.connectionTasks.frame(tick);\n      }\n    };\n    this.connectionTasks.microtask(tick);\n  }\n\n  private setupOverflowObserver() {\n    if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.chromeOverflowPaused()) return;\n      this.scheduleOverflowCheck();\n    });\n    this.resizeObserver.observe(this.headerEl);\n  }\n\n  private scheduleOverflowCheck() {\n    if (!this.el.isConnected || this.chromeOverflowPaused()) return;\n    this.overflowCoalescer.schedule();\n  }\n\n  /** Width available for the tab row or collapsed trigger. */\n  private getLeftZoneAvailableWidth(): number {\n    if (!this.headerEl) return 0;\n\n    const headerStyle = getComputedStyle(this.headerEl);\n    const horizontalPadding =\n      (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n\n    return Math.max(0, this.headerEl.clientWidth - horizontalPadding);\n  }\n\n  private getTabsIntrinsicWidth(): number {\n    return this.probeTabListEl?.scrollWidth ?? 0;\n  }\n\n  private getHeaderGap(): number {\n    if (!this.headerEl) return 0;\n    const style = getComputedStyle(this.headerEl);\n    return parseFloat(style.columnGap || style.gap) || 0;\n  }\n\n  private getOverflowTriggerReserveWidth(): number {\n    if (!this.triggerEl) {\n      return 40;\n    }\n    return this.triggerEl.getBoundingClientRect().width + this.getHeaderGap();\n  }\n\n  private getProbeTabMetrics(): {\n    itemWidths: number[];\n    itemGap: number;\n    listExtraWidth: number;\n  } | null {\n    const tabList = this.probeTabListEl;\n    if (!tabList) return null;\n\n    const children = Array.from(tabList.children) as HTMLElement[];\n    const itemWidths = children.map(child => child.getBoundingClientRect().width);\n    if (itemWidths.length === 0 || itemWidths.some(width => width === 0)) return null;\n\n    const style = getComputedStyle(tabList);\n    const itemGap = parseFloat(style.columnGap || style.gap) || 0;\n    const childrenWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n    const gapWidth = itemGap * Math.max(0, itemWidths.length - 1);\n    const listExtraWidth = Math.max(0, tabList.scrollWidth - childrenWidth - gapWidth);\n\n    return { itemWidths, itemGap, listExtraWidth };\n  }\n\n  private setOverflowTabLayout(visibleTabs: BarNavTab[], overflowTabs: BarNavTab[]) {\n    const nextCollapsed = overflowTabs.length > 0;\n    const visibleChanged =\n      this.digestTabsConfig(visibleTabs) !== this.digestTabsConfig(this.visibleTabs);\n    const overflowChanged =\n      this.digestTabsConfig(overflowTabs) !== this.digestTabsConfig(this.overflowTabs);\n\n    if (visibleChanged) {\n      this.visibleTabs = visibleTabs;\n    }\n    if (overflowChanged) {\n      this.overflowTabs = overflowTabs;\n    }\n    if (nextCollapsed !== this.tabsCollapsed) {\n      this.tabsCollapsed = nextCollapsed;\n      if (!nextCollapsed) {\n        this.menuOpen = false;\n        this.menuTriggerActive = false;\n      }\n    }\n    this.syncFocusedTabId(\n      this.effectiveValue,\n      getSelectableTabs(nextCollapsed ? visibleTabs : this.resolvedTabs)\n    );\n  }\n\n  private scheduleIntrinsicWidthRetry() {\n    if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n    this.intrinsicWidthRetryCount++;\n    this.connectionTasks.frame(() => this.scheduleOverflowCheck());\n  }\n\n  private forceTabLayoutCommit(fallbackCollapsed: boolean) {\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n    this.setOverflowTabLayout(\n      fallbackCollapsed ? [] : this.resolvedTabs,\n      fallbackCollapsed ? this.resolvedTabs : []\n    );\n    this.tabLayoutCommitted = true;\n  }\n\n  private updateTabsCollapsed() {\n    if (!this.el.isConnected || this.chromeOverflowPaused()) return;\n    if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n      if (this.tabsCollapsed) {\n        this.setOverflowTabLayout([], []);\n      }\n      this.intrinsicWidthRetryCount = 0;\n      this.tabLayoutPendingFrames = 0;\n      this.tabLayoutCommitted = true;\n      return;\n    }\n\n    const metrics = this.getProbeTabMetrics();\n    const intrinsicWidth = this.getTabsIntrinsicWidth();\n    if (!metrics || intrinsicWidth === 0) {\n      this.tabLayoutPendingFrames += 1;\n      if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {\n        this.forceTabLayoutCommit(false);\n      } else if (this.tabLayoutPendingFrames >= BarNav.TAB_LAYOUT_COMMIT_MAX_FRAMES) {\n        this.forceTabLayoutCommit(false);\n      } else {\n        this.scheduleIntrinsicWidthRetry();\n      }\n      return;\n    }\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n\n    const shouldCollapse = tabsOverflowContainer(\n      intrinsicWidth,\n      this.getLeftZoneAvailableWidth(),\n      this.tabsCollapsed,\n      BarNav.OVERFLOW_HYSTERESIS_PX\n    );\n\n    if (!shouldCollapse) {\n      this.setOverflowTabLayout(this.resolvedTabs, []);\n      this.tabLayoutCommitted = true;\n      return;\n    }\n\n    const visibleCount = visibleTabCountForWidth(\n      metrics.itemWidths,\n      this.getLeftZoneAvailableWidth(),\n      this.getOverflowTriggerReserveWidth(),\n      metrics.itemGap,\n      metrics.listExtraWidth\n    );\n    const visibleTabs = trimTrailingDividers(this.resolvedTabs.slice(0, visibleCount));\n    const overflowTabs = this.resolvedTabs.slice(visibleTabs.length);\n    this.setOverflowTabLayout(visibleTabs, overflowTabs);\n    this.tabLayoutCommitted = true;\n  }\n\n  private syncMenuAnchor() {\n    if (!this.menuEl || !this.triggerEl || !this.hasOverflowTabs) return;\n    this.menuEl.anchor = this.triggerEl;\n    this.syncMenuSections();\n  }\n\n  private handleMenuSelect(e: Event) {\n    const detail = (e as CustomEvent<MenuItemData>).detail;\n    if (detail?.value !== undefined) {\n      this.selectTab(String(detail.value));\n    }\n    this.menuOpen = false;\n    this.menuInitialFocusVisible = false;\n  }\n\n  private handleMenuClose() {\n    this.menuOpen = false;\n    this.menuInitialFocusVisible = false;\n  }\n\n  private handleMenuAfterClose() {\n    if (!this.menuOpen) this.menuTriggerActive = false;\n  }\n\n  /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */\n  private incomingTabs(): BarNavTab[] {\n    return this.tabs ?? [];\n  }\n\n  private applyHostProps() {\n    const nextBasePath = this.basePath;\n    const sectionChanged =\n      nextBasePath !== '' && this.committedSection !== '' && nextBasePath !== this.committedSection;\n\n    if (sectionChanged) {\n      this.urlDerivedValue = '';\n      this.committedSection = '';\n      this.pendingSection = nextBasePath;\n      this.resolvedTabs = [];\n      this.resetTabOverflowLayout();\n      return;\n    }\n\n    if (this.pendingSection) {\n      if (!nextBasePath || nextBasePath !== this.pendingSection) {\n        return;\n      }\n      if (!this.currentUrl.startsWith(this.pendingSection)) {\n        return;\n      }\n      const tabs = this.incomingTabs();\n      if (tabs.length === 0) {\n        return;\n      }\n      this.pendingSection = '';\n    }\n\n    const tabs = this.incomingTabs();\n    const tabsConfigChanged =\n      this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);\n\n    this.resolvedTabs = tabs;\n    this.syncValueFromUrl();\n    this.committedSection = nextBasePath;\n    if (tabsConfigChanged) {\n      this.resetTabOverflowLayout();\n    }\n    this.scheduleOverflowCheck();\n  }\n\n  private syncMenuSections() {\n    if (!this.menuEl) return;\n    this.menuEl.sections = tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue);\n  }\n\n  private syncValueFromUrl() {\n    const tabs = this.incomingTabs();\n\n    if (!this.currentUrl || !this.basePath) {\n      this.urlDerivedValue = '';\n      this.hideTabsForDetailRoute = false;\n      return;\n    }\n\n    if (!this.currentUrl.startsWith(this.basePath)) {\n      this.urlDerivedValue = '';\n      this.hideTabsForDetailRoute = false;\n      return;\n    }\n\n    const { value, hideTabs } = deriveBarNavValueFromUrl(this.currentUrl, this.basePath, tabs);\n    this.urlDerivedValue = value;\n    this.hideTabsForDetailRoute = hideTabs;\n  }\n\n  private selectTab(id: string) {\n    this.value = id;\n    this.dsTabChange.emit(id);\n  }\n\n  /** Move focus to the selected tab in the visible tab group (after expand). */\n  private focusVisibleSelectedTab() {\n    const tab = this.visibleTabListEl?.querySelector(\n      `[data-tab-id=\"${this.effectiveValue}\"]`\n    ) as HTMLElement | null;\n    tab?.focus({ preventScroll: true });\n  }\n\n  private focusVisibleTab(id: string) {\n    this.focusedTabId = id;\n    const tab = this.visibleTabListEl?.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    tab?.focus({ preventScroll: true });\n  }\n\n  private focusLastVisibleTab() {\n    const last = [...this.renderedSelectableTabs].reverse().find(tab => !tab.isInactive);\n    if (last) this.focusVisibleTab(last.id);\n  }\n\n  private findEnabledVisibleTab(from: number, step: 1 | -1): number | null {\n    const tabs = this.renderedSelectableTabs;\n    for (let index = from + step; index >= 0 && index < tabs.length; index += step) {\n      if (!tabs[index]?.isInactive) return index;\n    }\n    return null;\n  }\n\n  private handleTabKeyDown(e: KeyboardEvent) {\n    const tabs = this.renderedSelectableTabs;\n    if (!tabs.length) return;\n    const targetId = (e.target as HTMLElement | null)?.getAttribute('data-tab-id');\n    const focusedId = targetId ?? this.focusedTabId;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      const focused = tabs.find(tab => tab.id === focusedId);\n      if (!focused || focused.isInactive) return;\n      e.preventDefault();\n      this.selectTab(focused.id);\n      return;\n    }\n\n    const currentIndex = tabs.findIndex(tab => tab.id === focusedId);\n    if (currentIndex < 0) return;\n\n    let nextIndex: number | null;\n    if (e.key === 'ArrowRight') {\n      nextIndex = this.findEnabledVisibleTab(currentIndex, 1);\n      if (nextIndex === null && this.hasOverflowTabs) {\n        e.preventDefault();\n        this.overflowRovingFocused = true;\n        void this.triggerEl?.setFocus?.();\n        return;\n      }\n    } else if (e.key === 'ArrowLeft') {\n      nextIndex = this.findEnabledVisibleTab(currentIndex, -1);\n    } else if (e.key === 'Home') {\n      nextIndex = tabs.findIndex(tab => !tab.isInactive);\n    } else if (e.key === 'End') {\n      const reversedIndex = [...tabs].reverse().findIndex(tab => !tab.isInactive);\n      nextIndex = reversedIndex < 0 ? null : tabs.length - 1 - reversedIndex;\n    } else {\n      return;\n    }\n\n    if (nextIndex === null || nextIndex < 0 || nextIndex === currentIndex) return;\n    e.preventDefault();\n    this.focusVisibleTab(tabs[nextIndex].id);\n  }\n\n  private toggleTabMenu(options?: { focusVisible?: boolean }) {\n    if (this.menuOpen) {\n      this.menuOpen = false;\n      this.menuInitialFocusVisible = false;\n      return;\n    }\n\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n      this.menuEl.minWidth = '';\n      this.syncMenuSections();\n    }\n\n    this.menuInitialFocusVisible = options?.focusVisible ?? false;\n    this.menuTriggerActive = true;\n    this.menuOpen = true;\n  }\n\n  private handleOverflowFocus = () => {\n    this.overflowRovingFocused = true;\n  };\n\n  private handleOverflowBlur = () => {\n    this.overflowRovingFocused = false;\n  };\n\n  private handleTriggerKeyDown(e: KeyboardEvent) {\n    if (!this.hasOverflowTabs) return;\n\n    if (!this.menuOpen) {\n      if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        this.overflowRovingFocused = false;\n        this.focusLastVisibleTab();\n        return;\n      }\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        this.toggleTabMenu({ focusVisible: true });\n      }\n      return;\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.menuOpen = false;\n      this.menuInitialFocusVisible = false;\n      void this.triggerEl?.setFocus?.();\n    }\n  }\n\n  private renderTabList(tabs: BarNavTab[], probe: boolean) {\n    return (\n      <div\n        role=\"tablist\"\n        class=\"bar-nav__tab-list\"\n        aria-label={this.heading}\n        ref={el => {\n          if (probe) {\n            const next = (el as HTMLElement) ?? null;\n            if (next === this.probeTabListEl) return;\n            this.probeTabListEl = next;\n            if (next) {\n              this.intrinsicWidthRetryCount = 0;\n              this.tabLayoutPendingFrames = 0;\n              this.scheduleOverflowCheck();\n            }\n          } else {\n            this.visibleTabListEl = (el as HTMLElement) ?? null;\n          }\n        }}\n        onKeyDown={probe ? undefined : (e: KeyboardEvent) => this.handleTabKeyDown(e)}\n        onFocusin={\n          probe\n            ? undefined\n            : () => {\n                this.overflowRovingFocused = false;\n              }\n        }\n      >\n        {tabs.map((tab, index) => {\n          if (isTabDivider(tab)) {\n            return (\n              <div class=\"bar-nav__tab-divider\" key={`divider-${index}`} aria-hidden=\"true\">\n                <div class=\"bar-nav__tab-divider-line\" />\n              </div>\n            );\n          }\n\n          const isSelected = tab.id === this.effectiveValue;\n          return (\n            <button\n              key={tab.id}\n              type=\"button\"\n              role=\"tab\"\n              data-tab-id={tab.id}\n              class={{\n                'bar-nav__tab': true,\n                'bar-nav__tab--selected': isSelected,\n                'ds-control--md': true,\n                'ds-focus-ring-inset': true,\n                'ds-interaction-fill--on-chrome': true,\n                'ds-control-inactive': !!tab.isInactive,\n              }}\n              aria-selected={isSelected ? 'true' : 'false'}\n              aria-disabled={tab.isInactive ? 'true' : undefined}\n              aria-controls={tab.panelId ?? undefined}\n              disabled={tab.isInactive}\n              tabIndex={\n                !probe && !this.overflowRovingFocused && tab.id === this.focusedTabId ? 0 : -1\n              }\n              onClick={() => !probe && !tab.isInactive && this.selectTab(tab.id)}\n              onFocus={() => {\n                if (!probe) this.focusedTabId = tab.id;\n              }}\n            >\n              <span\n                class={{\n                  'bar-nav__tab-label': true,\n                  'ds-control-label-box': true,\n                  'ds-control-label-dot': !!tab.dot,\n                  'bar-nav__tab-label--dot': !!tab.dot,\n                }}\n              >\n                <ds-text as=\"span\" variant=\"text-body-medium\" emphasis={isSelected} color=\"inherit\">\n                  {tab.label}\n                </ds-text>\n                {tab.dot && (\n                  <ds-badge\n                    class=\"bar-nav__tab-dot ds-control-label-dot__badge\"\n                    variant=\"dot\"\n                    hasRing={false}\n                    label=\"\"\n                    aria-hidden=\"true\"\n                    style={{ '--_badge-bg': 'var(--_bar-nav-dot)' }}\n                  />\n                )}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n\n  render() {\n    // Section gating only applies when `basePath` is set (SPA section sync).\n    // Tabs without a base path must still render — otherwise a single-tab bar\n    // (or any non-routed tabs) silently falls through to an empty header.\n    const sectionReady = this.basePath === '' || this.committedSection === this.basePath;\n    const hasTabs = sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n    const tabGroupKey = this.basePath || 'no-section';\n    const renderedTabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n\n    return (\n      <Host>\n        <header\n          class={{\n            'bar-nav': true,\n            'ds-control--md': true,\n            'ds-chrome-row': true,\n            'ds-chrome-space--md': true,\n            'ds-interaction-fill--on-chrome': true,\n            'bar-nav--dashboard': this.navStyle === 'dashboard',\n            'bar-nav--settings': this.navStyle === 'settings',\n            'bar-nav--tabs-collapsed': hasTabs && this.hasOverflowTabs,\n          }}\n          ref={el => {\n            this.headerEl = el as HTMLElement;\n            if (el && !this.resizeObserver) {\n              this.setupOverflowObserver();\n            }\n          }}\n        >\n          {hasTabs && (\n            <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n              <div key={`probe-${tabGroupKey}`}>{this.renderTabList(this.resolvedTabs, true)}</div>\n            </div>\n          )}\n\n          {hasTabs && this.tabLayoutCommitted && renderedTabs.length > 0 && (\n            <div class=\"bar-nav__left\">\n              <div key={`visible-${tabGroupKey}`} class=\"bar-nav__tabs-visible\">\n                {this.renderTabList(renderedTabs, false)}\n              </div>\n            </div>\n          )}\n\n          {hasTabs && !this.tabLayoutCommitted && (\n            <div class=\"bar-nav__tabs-pending\" aria-hidden=\"true\" />\n          )}\n\n          {!hasTabs && this.heading && (\n            <ds-text\n              class=\"bar-nav__heading\"\n              lineTruncation={1}\n              as=\"span\"\n              variant=\"text-body-medium\"\n              emphasis\n              color=\"inherit\"\n              wrap=\"nowrap\"\n            >\n              {this.heading}\n            </ds-text>\n          )}\n\n          {hasTabs && this.hasOverflowTabs && (\n            <ds-button-unfilled\n              variant=\"icon\"\n              class={{\n                'bar-nav__overflow-trigger': true,\n              }}\n              icon=\"ChevronDown\"\n              activeFill={false}\n              hasBorder={false}\n              background=\"chrome\"\n              focusTabIndex={this.overflowRovingFocused ? 0 : -1}\n              ref={(el?: HTMLDsButtonUnfilledElement) => {\n                this.triggerEl = (el as HTMLElement & { setFocus?: () => Promise<void> }) ?? null;\n              }}\n              haspopup=\"menu\"\n              expanded={this.menuOpen}\n              surfaceOpen={this.menuTriggerActive}\n              aria-label={this.moreTabsLabel}\n              onDsClick={() => this.toggleTabMenu({ focusVisible: false })}\n              onFocusin={this.handleOverflowFocus}\n              onFocusout={this.handleOverflowBlur}\n              onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n            />\n          )}\n        </header>\n\n        {hasTabs && this.hasOverflowTabs && (\n          <ds-menu\n            ref={el => {\n              this.menuEl = (el as HTMLDsMenuElement) ?? null;\n            }}\n            open={this.menuOpen}\n            sections={tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue)}\n            side=\"bottom\"\n            align=\"end\"\n            sideOffset=\"calc(var(--dimension-space-100) + var(--dimension-space-050))\"\n            initialFocusVisible={this.menuInitialFocusVisible}\n            onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n            onDsClose={() => this.handleMenuClose()}\n            onDsAfterClose={() => this.handleMenuAfterClose()}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/bar-page-title.json

@@ -449,7 +449,7 @@
     },
     {
       "path": "src/wc/components/BarPageTitle/BarPageTitle.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  CHROME_TRANSITION_END,\n  CHROME_TRANSITION_START,\n  ChromeTransitionGate,\n  createRafCoalescer,\n  readChromeTransitionPhase,\n  readChromeTransitionSource,\n} from '../../shell/chrome-transition';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { tabsOverflowContainer } from '../BarNav/bar-nav-tabs-menu-utils';\nimport { getSelectableTabs, isTabDivider, type TabItemTab } from '../TabGroup/tab-item-utils';\nimport {\n  availableBarTitleActionMenuIds,\n  barTitleActionIdIssues,\n  findBarTitleAction,\n  overflowBarTitleActionSections,\n  resolveBarTitleActionItems,\n  visibleBarTitleActions,\n} from '../BarTitle/bar-title-actions';\nimport {\n  type FocusableBarTitleButton,\n  barTitleActionMenuDomId,\n  renderBarTitleActionMenus,\n  renderBarTitleActions,\n  renderBarTitleBack,\n  renderBarTitleOverflowMenu,\n  renderBarTitleSectionTrigger,\n  restoreBarTitleActionFocus,\n} from '../BarTitle/bar-title-action-chrome';\nimport {\n  barTitleSectionMenuSections,\n  barTitleSectionTriggerAriaLabel,\n  barTitleSectionsDigest,\n  barTitleSectionsToTabs,\n  effectiveBarTitleSectionValue,\n  selectableBarTitleSections,\n  selectedBarTitleSectionLabel,\n} from '../BarTitle/bar-title-sections';\nimport type {\n  BarTitleActionConfigItem,\n  BarTitleActionItem,\n  BarTitlePrimaryAction,\n  BarTitleSectionItem,\n} from '../BarTitle/bar-title-types';\n\nlet nextBarPageTitleId = 0;\n\n@Component({\n  tag: 'ds-bar-page-title',\n  styleUrl: 'BarPageTitle.css',\n  scoped: true,\n})\nexport class BarPageTitle {\n  private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n  private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;\n  private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n  @Element() el!: HTMLElement;\n\n  /** The page's single visible h1. */\n  @Prop() heading!: string;\n\n  /** Show the leading page-level Back action. */\n  @Prop({ attribute: 'show-back' }) showBack: boolean = false;\n\n  /** Accessible name for the leading Back action. */\n  @Prop() backAriaLabel: string = 'Back';\n\n  /** Optional page sections shown as an all-or-nothing tab row, or the compact section button. */\n  @Prop() sections: BarTitleSectionItem[] = [];\n\n  /** Id of the active page section. */\n  @Prop() value: string = '';\n\n  /** Accessible name for the page-section tablist and menu. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n\n  /** The one highest-emphasis page action. */\n  @Prop() primaryAction: BarTitlePrimaryAction | null = null;\n\n  /** Secondary page actions shown in the overflow menu. Dividers create groups. */\n  @Prop() actions: BarTitleActionItem[] = [];\n\n  /**\n   * Ordered page-header actions. When supplied, this replaces the legacy\n   * primaryAction/actions presentation while preserving the same dsAction event.\n   */\n  @Prop() actionItems?: BarTitleActionConfigItem[];\n\n  /** Accessible name for the page-actions menu. */\n  @Prop() actionsAriaLabel: string = 'More page actions';\n\n  /** Draw the compact bottom divider beneath the header. */\n  @Prop() showDivider: boolean = true;\n\n  /** Override divider visibility for the compact shell-bar presentation. */\n  @Prop() showCompactDivider?: boolean;\n\n  /** Emitted when the leading Back action is activated. */\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n\n  /** Emitted with the newly selected page-section id. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n\n  /** Emitted with the activated primary or overflow action id. */\n  @Event() dsAction!: EventEmitter<string>;\n\n  @State() private sectionMenuOpen = false;\n  @State() private openActionMenuId = '';\n  @State() private surfaceActionMenuId = '';\n  @State() private sectionSurfaceOpen = false;\n  @State() private sectionMenuInitialFocusVisible = false;\n  @State() private actionMenuInitialFocusVisible = false;\n  @State() private sectionsCollapsed = false;\n  @State() private layoutCommitted = false;\n  @State() private focusedTabId = '';\n\n  private readonly instanceId = nextBarPageTitleId++;\n  private readonly sectionMenuTriggerId = `bar-page-title-section-trigger-${this.instanceId}`;\n  private readonly sectionMenuId = `bar-page-title-section-menu-${this.instanceId}`;\n  private readonly actionMenuTriggerId = `bar-page-title-action-trigger-${this.instanceId}`;\n  private readonly actionMenuId = `bar-page-title-action-menu-${this.instanceId}`;\n  private sectionTriggerEl: HTMLButtonElement | null = null;\n  private actionTriggerEl: FocusableBarTitleButton | null = null;\n  private actionTriggerEls = new Map<string, FocusableBarTitleButton>();\n  private chromeEl: HTMLElement | null = null;\n  private rowEl: HTMLElement | null = null;\n  private probeRowEl: HTMLElement | null = null;\n  private visibleTabListEl: HTMLElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private intrinsicWidthRetryCount = 0;\n  private tabLayoutPendingFrames = 0;\n  private readonly panelNavTransition = new ChromeTransitionGate();\n  private readonly panelToolsTransition = new ChromeTransitionGate();\n  private readonly overflowCoalescer = createRafCoalescer(() => {\n    this.updateSectionsCollapsed();\n  });\n  private chromeTransitionShell: HTMLElement | null = null;\n\n  componentWillLoad() {\n    this.reportActionIdIssues();\n    this.syncFocusedTabId(this.effectiveValue, this.selectableTabs);\n  }\n\n  componentDidLoad() {\n    this.setupOverflowObserver();\n    this.bindChromeTransitionListeners();\n    this.scheduleOverflowCheck();\n  }\n\n  componentDidRender() {\n    if (this.chromeOverflowPaused()) return;\n    this.scheduleOverflowCheck();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.overflowCoalescer.cancel();\n    this.unbindChromeTransitionListeners();\n  }\n\n  @Watch('sections')\n  handleSectionsChange(next: BarTitleSectionItem[], prev: BarTitleSectionItem[]) {\n    if (!this.hasSectionSelector) {\n      this.closeSectionMenu();\n      this.sectionSurfaceOpen = false;\n      this.sectionsCollapsed = false;\n      this.layoutCommitted = true;\n      this.intrinsicWidthRetryCount = 0;\n      this.tabLayoutPendingFrames = 0;\n      return;\n    }\n    if (barTitleSectionsDigest(next) === barTitleSectionsDigest(prev)) {\n      this.syncFocusedTabId(this.effectiveValue, this.selectableTabs);\n      return;\n    }\n    this.resetSectionLayout();\n    this.syncFocusedTabId(this.effectiveValue, this.selectableTabs);\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.syncFocusedTabId(this.effectiveValue, this.selectableTabs);\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('heading')\n  @Watch('showBack')\n  @Watch('primaryAction')\n  @Watch('actions')\n  @Watch('actionItems')\n  handleLayoutInputsChange() {\n    this.reportActionIdIssues();\n    if (!this.availableActionMenuIds.has(this.openActionMenuId)) this.closeActionMenu();\n    if (!this.availableActionMenuIds.has(this.surfaceActionMenuId)) this.surfaceActionMenuId = '';\n    this.scheduleOverflowCheck();\n  }\n\n  private reportActionIdIssues() {\n    for (const issue of barTitleActionIdIssues(this.resolvedActionItems)) {\n      console.warn(`[ds-bar-page-title] ${issue}`);\n    }\n  }\n\n  private get dividerVisible(): boolean {\n    return this.showCompactDivider ?? this.showDivider;\n  }\n\n  private get usesChromeTokens(): boolean {\n    return this.el.hasAttribute('data-shell-bar');\n  }\n\n  private get shellBarButtonBackground(): 'chrome' | undefined {\n    return this.usesChromeTokens ? 'chrome' : undefined;\n  }\n\n  private get selectableSections() {\n    return selectableBarTitleSections(this.sections);\n  }\n\n  private get hasSectionSelector(): boolean {\n    return this.selectableSections.length > 1;\n  }\n\n  private get sectionTabs() {\n    return barTitleSectionsToTabs(this.sections);\n  }\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.sectionTabs);\n  }\n\n  private get effectiveValue(): string {\n    return effectiveBarTitleSectionValue(this.sections, this.value);\n  }\n\n  private get selectedSectionLabel(): string {\n    return selectedBarTitleSectionLabel(this.sections, this.value);\n  }\n\n  private get sectionTriggerAriaLabel(): string {\n    return barTitleSectionTriggerAriaLabel(this.sectionsAriaLabel, this.selectedSectionLabel);\n  }\n\n  private get sectionMenuSections() {\n    return barTitleSectionMenuSections(this.sections, this.effectiveValue);\n  }\n\n  private get resolvedActionItems(): BarTitleActionConfigItem[] {\n    return resolveBarTitleActionItems(this.actionItems, this.primaryAction, this.actions);\n  }\n\n  private get visibleActions(): BarTitleActionConfigItem[] {\n    return visibleBarTitleActions(this.resolvedActionItems, 'compact');\n  }\n\n  private get actionMenuSections() {\n    return overflowBarTitleActionSections(this.resolvedActionItems, 'compact');\n  }\n\n  private get showActionMenuTrigger(): boolean {\n    return this.actionMenuSections.length > 0;\n  }\n\n  private get availableActionMenuIds(): Set<string> {\n    return availableBarTitleActionMenuIds(this.visibleActions, this.showActionMenuTrigger);\n  }\n\n  private get showSectionTabs(): boolean {\n    return this.hasSectionSelector && this.layoutCommitted && !this.sectionsCollapsed;\n  }\n\n  private get showSectionButton(): boolean {\n    return this.hasSectionSelector && this.layoutCommitted && this.sectionsCollapsed;\n  }\n\n  private resetSectionLayout() {\n    this.layoutCommitted = false;\n    this.sectionsCollapsed = false;\n    this.sectionMenuOpen = false;\n    this.sectionMenuInitialFocusVisible = false;\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n  }\n\n  private bindChromeTransitionListeners() {\n    const shell = this.el.closest<HTMLElement>('ds-shell-app');\n    if (!shell) return;\n    this.chromeTransitionShell = shell;\n    shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n  }\n\n  private unbindChromeTransitionListeners() {\n    if (!this.chromeTransitionShell) return;\n    this.chromeTransitionShell.removeEventListener(\n      CHROME_TRANSITION_START,\n      this.onChromeTransitionStart\n    );\n    this.chromeTransitionShell.removeEventListener(\n      CHROME_TRANSITION_END,\n      this.onChromeTransitionEnd\n    );\n    this.chromeTransitionShell = null;\n  }\n\n  private onChromeTransitionStart = (event: Event) => {\n    const source = readChromeTransitionSource(event);\n    if (source === 'panel-nav') {\n      this.panelNavTransition.enter();\n      return;\n    }\n    if (source === 'panel-tools') {\n      const phase = readChromeTransitionPhase(event) ?? 'opening';\n      if (phase === 'closing') {\n        this.panelToolsTransition.enter();\n      }\n    }\n  };\n\n  private chromeOverflowPaused(): boolean {\n    return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;\n  }\n\n  private onChromeTransitionEnd = (event: Event) => {\n    const source = readChromeTransitionSource(event);\n    if (source === 'panel-nav') {\n      this.panelNavTransition.exit();\n      if (!this.panelNavTransition.isActive) {\n        this.scheduleOverflowCheck();\n      }\n      return;\n    }\n    if (source === 'panel-tools') {\n      this.panelToolsTransition.exit();\n      this.scheduleOverflowCheck();\n    }\n  };\n\n  private setupOverflowObserver() {\n    if (typeof ResizeObserver === 'undefined' || !this.chromeEl) return;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.chromeOverflowPaused()) return;\n      this.scheduleOverflowCheck();\n    });\n    this.resizeObserver.observe(this.chromeEl);\n  }\n\n  private scheduleOverflowCheck() {\n    if (this.chromeOverflowPaused()) return;\n    this.overflowCoalescer.schedule();\n  }\n\n  private scheduleIntrinsicWidthRetry() {\n    if (this.intrinsicWidthRetryCount >= BarPageTitle.INTRINSIC_WIDTH_RETRY_MAX) return;\n    this.intrinsicWidthRetryCount++;\n    requestAnimationFrame(() => this.scheduleOverflowCheck());\n  }\n\n  private forceTabLayoutCommit(collapsed: boolean) {\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n    const collapsedChanged = this.sectionsCollapsed !== collapsed;\n    if (collapsedChanged) this.sectionsCollapsed = collapsed;\n    if (!collapsed && collapsedChanged) {\n      this.closeSectionMenu();\n      this.sectionSurfaceOpen = false;\n    }\n    this.layoutCommitted = true;\n  }\n\n  private getAvailableWidth(): number {\n    if (!this.rowEl) return 0;\n    const rowWidth = this.rowEl.clientWidth;\n    const actions = this.rowEl.querySelector<HTMLElement>('.bar-page-title__actions');\n    const actionsWidth = actions?.getBoundingClientRect().width ?? 0;\n    const style = getComputedStyle(this.rowEl);\n    const gap = parseFloat(style.columnGap || style.gap) || 0;\n    return Math.max(0, rowWidth - actionsWidth - (actionsWidth > 0 ? gap : 0));\n  }\n\n  private updateSectionsCollapsed() {\n    if (!this.hasSectionSelector) {\n      if (this.sectionsCollapsed) this.sectionsCollapsed = false;\n      this.intrinsicWidthRetryCount = 0;\n      this.tabLayoutPendingFrames = 0;\n      this.layoutCommitted = true;\n      return;\n    }\n\n    const probeWidth = this.probeRowEl?.scrollWidth ?? 0;\n    const available = this.getAvailableWidth();\n    if (!this.probeRowEl || !this.rowEl || probeWidth === 0) {\n      if (this.layoutCommitted) {\n        this.scheduleIntrinsicWidthRetry();\n        return;\n      }\n      this.tabLayoutPendingFrames += 1;\n      if (\n        this.intrinsicWidthRetryCount >= BarPageTitle.INTRINSIC_WIDTH_RETRY_MAX ||\n        this.tabLayoutPendingFrames >= BarPageTitle.TAB_LAYOUT_COMMIT_MAX_FRAMES\n      ) {\n        this.forceTabLayoutCommit(false);\n      } else {\n        this.scheduleIntrinsicWidthRetry();\n      }\n      return;\n    }\n\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n    const shouldCollapse = tabsOverflowContainer(\n      probeWidth,\n      available,\n      this.sectionsCollapsed,\n      BarPageTitle.OVERFLOW_HYSTERESIS_PX\n    );\n    this.forceTabLayoutCommit(shouldCollapse);\n  }\n\n  private syncFocusedTabId(preferred: string, tabs: TabItemTab[]) {\n    if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {\n      this.focusedTabId = preferred;\n      return;\n    }\n    const first = tabs.find(tab => !tab.isInactive);\n    this.focusedTabId = first?.id ?? '';\n  }\n\n  private selectSection(id: string) {\n    const selected = this.selectableSections.find(section => section.id === id);\n    if (!selected || selected.isInactive) return;\n    this.dsSectionChange.emit(id);\n  }\n\n  private toggleSectionMenu = (event: MouseEvent) => {\n    this.sectionMenuInitialFocusVisible = event.detail === 0;\n    this.openActionMenuId = '';\n    this.sectionMenuOpen = !this.sectionMenuOpen;\n    if (this.sectionMenuOpen) this.sectionSurfaceOpen = true;\n  };\n\n  private closeSectionMenu = () => {\n    this.sectionMenuOpen = false;\n  };\n\n  private handleSectionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    this.closeSectionMenu();\n    this.selectSection(id);\n    requestAnimationFrame(() => this.sectionTriggerEl?.focus());\n  };\n\n  private toggleActionMenu = (id: string, event: MouseEvent) => {\n    this.actionMenuInitialFocusVisible = event.detail === 0;\n    this.sectionMenuOpen = false;\n    this.openActionMenuId = this.openActionMenuId === id ? '' : id;\n    if (this.openActionMenuId) this.surfaceActionMenuId = this.openActionMenuId;\n  };\n\n  private finishActionMenuClose = (event: CustomEvent<void>) => {\n    const id = this.surfaceActionMenuId;\n    const domId =\n      id === '__overflow'\n        ? this.actionMenuId\n        : barTitleActionMenuDomId('bar-page-title', this.instanceId, this.resolvedActionItems, id);\n    if (this.openActionMenuId !== id && (event.target as HTMLElement).id === domId) {\n      this.surfaceActionMenuId = '';\n    }\n  };\n\n  private closeActionMenu = () => {\n    this.openActionMenuId = '';\n  };\n\n  private handleActionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    const action = findBarTitleAction(this.resolvedActionItems, id);\n    if (!action || action.isInactive || ('isLoading' in action && action.isLoading)) return;\n    const menuId = this.openActionMenuId;\n    this.closeActionMenu();\n    this.dsAction.emit(id);\n    requestAnimationFrame(() => {\n      void restoreBarTitleActionFocus({\n        menuId,\n        overflowTrigger: this.actionTriggerEl,\n        actionTriggers: this.actionTriggerEls,\n        resolvedActionItems: this.resolvedActionItems,\n      });\n    });\n  };\n\n  private focusVisibleTab(id: string) {\n    this.focusedTabId = id;\n    const tab = this.visibleTabListEl?.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    tab?.focus({ preventScroll: true });\n  }\n\n  private findEnabledTab(from: number, step: 1 | -1): number | null {\n    const tabs = this.selectableTabs;\n    for (let index = from + step; index >= 0 && index < tabs.length; index += step) {\n      if (!tabs[index]?.isInactive) return index;\n    }\n    return null;\n  }\n\n  private handleTabKeyDown(event: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n    const targetId = (event.target as HTMLElement | null)?.getAttribute('data-tab-id');\n    const focusedId = targetId ?? this.focusedTabId;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      const focused = tabs.find(tab => tab.id === focusedId);\n      if (!focused || focused.isInactive) return;\n      event.preventDefault();\n      this.selectSection(focused.id);\n      return;\n    }\n\n    const currentIndex = tabs.findIndex(tab => tab.id === focusedId);\n    if (currentIndex < 0) return;\n\n    let nextIndex: number | null;\n    if (event.key === 'ArrowRight') {\n      nextIndex = this.findEnabledTab(currentIndex, 1);\n    } else if (event.key === 'ArrowLeft') {\n      nextIndex = this.findEnabledTab(currentIndex, -1);\n    } else if (event.key === 'Home') {\n      nextIndex = tabs.findIndex(tab => !tab.isInactive);\n    } else if (event.key === 'End') {\n      const reversedIndex = [...tabs].reverse().findIndex(tab => !tab.isInactive);\n      nextIndex = reversedIndex < 0 ? null : tabs.length - 1 - reversedIndex;\n    } else {\n      return;\n    }\n\n    if (nextIndex === null || nextIndex < 0 || nextIndex === currentIndex) return;\n    event.preventDefault();\n    this.focusVisibleTab(tabs[nextIndex].id);\n  }\n\n  private chromeActionOptions() {\n    return {\n      classPrefix: 'bar-page-title',\n      compact: true,\n      visibleActions: this.visibleActions,\n      showOverflowTrigger: this.showActionMenuTrigger,\n      actionItems: this.actionItems,\n      primaryAction: this.primaryAction,\n      resolvedActionItems: this.resolvedActionItems,\n      instanceId: this.instanceId,\n      openActionMenuId: this.openActionMenuId,\n      surfaceActionMenuId: this.surfaceActionMenuId,\n      actionsAriaLabel: this.actionsAriaLabel,\n      actionMenuTriggerId: this.actionMenuTriggerId,\n      actionMenuId: this.actionMenuId,\n      actionTriggers: this.actionTriggerEls,\n      buttonBackground: this.shellBarButtonBackground,\n      setOverflowTriggerEl: (el: FocusableBarTitleButton | null) => {\n        this.actionTriggerEl = el;\n      },\n      toggleActionMenu: this.toggleActionMenu,\n      emitAction: (id: string) => this.dsAction.emit(id),\n    };\n  }\n\n  private renderHeading(probe: boolean) {\n    return (\n      <ds-text\n        class=\"bar-page-title__heading ds-control--md\"\n        variant=\"text-title-small\"\n        emphasis\n        color=\"inherit\"\n        as={probe ? 'span' : 'h1'}\n        wrap={probe ? 'nowrap' : undefined}\n        lineTruncation={probe ? 'none' : 1}\n      >\n        {this.heading}\n      </ds-text>\n    );\n  }\n\n  private renderTabList(probe: boolean) {\n    return (\n      <div\n        role={probe ? undefined : 'tablist'}\n        class=\"bar-page-title__tab-list\"\n        aria-label={probe ? undefined : this.sectionsAriaLabel}\n        ref={el => {\n          if (!probe) this.visibleTabListEl = (el as HTMLElement) ?? null;\n        }}\n        onKeyDown={probe ? undefined : (event: KeyboardEvent) => this.handleTabKeyDown(event)}\n      >\n        {this.sectionTabs.map((tab, index) => {\n          if (isTabDivider(tab)) {\n            return (\n              <div class=\"bar-page-title__tab-divider\" key={`divider-${index}`} aria-hidden=\"true\">\n                <div class=\"bar-page-title__tab-divider-line\" />\n              </div>\n            );\n          }\n\n          const isSelected = tab.id === this.effectiveValue;\n          return (\n            <button\n              key={tab.id}\n              type=\"button\"\n              role={probe ? undefined : 'tab'}\n              data-tab-id={tab.id}\n              class={{\n                'bar-page-title__tab': true,\n                'bar-page-title__tab--selected': isSelected,\n                'ds-control--md': true,\n                'ds-focus-ring-inset': true,\n                'ds-control-inactive': !!tab.isInactive,\n                'ds-interaction-fill--on-chrome': this.usesChromeTokens,\n              }}\n              aria-selected={isSelected ? 'true' : 'false'}\n              aria-disabled={tab.isInactive ? 'true' : undefined}\n              disabled={tab.isInactive}\n              tabIndex={!probe && tab.id === this.focusedTabId ? 0 : -1}\n              onClick={() => !probe && this.selectSection(tab.id)}\n              onFocus={() => {\n                if (!probe) this.focusedTabId = tab.id;\n              }}\n            >\n              <ds-text\n                class=\"bar-page-title__tab-label ds-control-label-box\"\n                as=\"span\"\n                variant=\"text-body-medium\"\n                emphasis={isSelected}\n                color=\"inherit\"\n              >\n                {tab.label}\n              </ds-text>\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n\n  private renderIdentity(probe: boolean) {\n    return (\n      <div class=\"bar-page-title__identity\">\n        {renderBarTitleBack({\n          classPrefix: 'bar-page-title',\n          showBack: this.showBack,\n          backAriaLabel: this.backAriaLabel,\n          background: this.shellBarButtonBackground,\n          onBack: event => this.dsBack.emit(event),\n        })}\n        {this.renderHeading(probe)}\n      </div>\n    );\n  }\n\n  private renderSectionRegion() {\n    if (!this.hasSectionSelector) return null;\n    if (!this.layoutCommitted) {\n      return [\n        <div class=\"bar-page-title__divider\" aria-hidden=\"true\" />,\n        <div class=\"bar-page-title__tabs-pending\" aria-hidden=\"true\" />,\n      ];\n    }\n    if (this.showSectionTabs) {\n      return [\n        <div class=\"bar-page-title__divider\" aria-hidden=\"true\" />,\n        this.renderTabList(false),\n      ];\n    }\n    return [\n      <div class=\"bar-page-title__divider\" aria-hidden=\"true\" />,\n      renderBarTitleSectionTrigger({\n        classPrefix: 'bar-page-title',\n        triggerId: this.sectionMenuTriggerId,\n        menuId: this.sectionMenuId,\n        open: this.sectionMenuOpen,\n        surfaceOpen: this.sectionSurfaceOpen,\n        ariaLabel: this.sectionTriggerAriaLabel,\n        selectedLabel: this.selectedSectionLabel,\n        background: this.shellBarButtonBackground,\n        labelColor: this.usesChromeTokens ? 'inherit' : undefined,\n        setTriggerEl: el => {\n          this.sectionTriggerEl = el;\n        },\n        onToggle: this.toggleSectionMenu,\n      }),\n    ];\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'bar-page-title': true,\n            'bar-page-title--divider-hidden': !this.dividerVisible,\n            'ds-chrome-header': true,\n          }}\n          ref={el => {\n            this.chromeEl = (el as HTMLElement) ?? null;\n            if (el && !this.resizeObserver) this.setupOverflowObserver();\n          }}\n        >\n          {this.hasSectionSelector ? (\n            <div class=\"bar-page-title__probe\" aria-hidden=\"true\" inert>\n              <div\n                class=\"bar-page-title__probe-row\"\n                ref={el => {\n                  const next = (el as HTMLElement) ?? null;\n                  if (next === this.probeRowEl) return;\n                  this.probeRowEl = next;\n                  if (next) {\n                    this.intrinsicWidthRetryCount = 0;\n                    this.tabLayoutPendingFrames = 0;\n                    this.scheduleOverflowCheck();\n                  }\n                }}\n              >\n                {this.renderIdentity(true)}\n                <div class=\"bar-page-title__divider\" />\n                {this.renderTabList(true)}\n              </div>\n            </div>\n          ) : null}\n\n          <div class=\"bar-page-title__inner\">\n            <div\n              class=\"bar-page-title__row\"\n              ref={el => {\n                this.rowEl = (el as HTMLElement) ?? null;\n              }}\n            >\n              <div class=\"bar-page-title__title-row\">\n                {this.renderIdentity(false)}\n                {this.renderSectionRegion()}\n              </div>\n              {renderBarTitleActions(this.chromeActionOptions())}\n            </div>\n          </div>\n        </div>\n\n        {this.showSectionButton ? (\n          <ds-menu\n            id={this.sectionMenuId}\n            class=\"bar-page-title__section-menu\"\n            anchorId={this.sectionMenuTriggerId}\n            menuLabel={this.sectionsAriaLabel}\n            open={this.sectionMenuOpen}\n            initialFocusVisible={this.sectionMenuInitialFocusVisible}\n            sections={this.sectionMenuSections}\n            onDsClose={this.closeSectionMenu}\n            onDsAfterClose={() => {\n              if (!this.sectionMenuOpen) this.sectionSurfaceOpen = false;\n            }}\n            onDsSelect={this.handleSectionSelect}\n          />\n        ) : null}\n\n        {renderBarTitleActionMenus({\n          classPrefix: 'bar-page-title',\n          visibleActions: this.visibleActions,\n          instanceId: this.instanceId,\n          resolvedActionItems: this.resolvedActionItems,\n          openActionMenuId: this.openActionMenuId,\n          actionMenuInitialFocusVisible: this.actionMenuInitialFocusVisible,\n          overflowTrigger: this.actionTriggerEl,\n          actionTriggers: this.actionTriggerEls,\n          closeActionMenu: this.closeActionMenu,\n          finishActionMenuClose: this.finishActionMenuClose,\n          handleActionSelect: this.handleActionSelect,\n        })}\n\n        {renderBarTitleOverflowMenu({\n          classPrefix: 'bar-page-title',\n          showOverflowTrigger: this.showActionMenuTrigger,\n          actionMenuId: this.actionMenuId,\n          actionMenuTriggerId: this.actionMenuTriggerId,\n          actionsAriaLabel: this.actionsAriaLabel,\n          open: this.openActionMenuId === '__overflow',\n          actionMenuInitialFocusVisible: this.actionMenuInitialFocusVisible,\n          actionMenuSections: this.actionMenuSections,\n          closeActionMenu: this.closeActionMenu,\n          finishActionMenuClose: this.finishActionMenuClose,\n          handleActionSelect: this.handleActionSelect,\n        })}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  CHROME_TRANSITION_END,\n  CHROME_TRANSITION_START,\n  ChromeTransitionGate,\n  createRafCoalescer,\n  readChromeTransitionPhase,\n  readChromeTransitionSource,\n} from '../../shell/chrome-transition';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport { tabsOverflowContainer } from '../BarNav/bar-nav-tabs-menu-utils';\nimport { getSelectableTabs, isTabDivider, type TabItemTab } from '../TabGroup/tab-item-utils';\nimport {\n  availableBarTitleActionMenuIds,\n  barTitleActionIdIssues,\n  findBarTitleAction,\n  overflowBarTitleActionSections,\n  resolveBarTitleActionItems,\n  visibleBarTitleActions,\n} from '../BarTitle/bar-title-actions';\nimport {\n  type FocusableBarTitleButton,\n  barTitleActionMenuDomId,\n  renderBarTitleActionMenus,\n  renderBarTitleActions,\n  renderBarTitleBack,\n  renderBarTitleOverflowMenu,\n  renderBarTitleSectionTrigger,\n  restoreBarTitleActionFocus,\n} from '../BarTitle/bar-title-action-chrome';\nimport {\n  barTitleSectionMenuSections,\n  barTitleSectionTriggerAriaLabel,\n  barTitleSectionsDigest,\n  barTitleSectionsToTabs,\n  effectiveBarTitleSectionValue,\n  selectableBarTitleSections,\n  selectedBarTitleSectionLabel,\n} from '../BarTitle/bar-title-sections';\nimport type {\n  BarTitleActionConfigItem,\n  BarTitleActionItem,\n  BarTitlePrimaryAction,\n  BarTitleSectionItem,\n} from '../BarTitle/bar-title-types';\n\nlet nextBarPageTitleId = 0;\n\n@Component({\n  tag: 'ds-bar-page-title',\n  styleUrl: 'BarPageTitle.css',\n  scoped: true,\n})\nexport class BarPageTitle {\n  private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n  private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;\n  private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n  @Element() el!: HTMLElement;\n\n  /** The page's single visible h1. */\n  @Prop() heading!: string;\n\n  /** Show the leading page-level Back action. */\n  @Prop({ attribute: 'show-back' }) showBack: boolean = false;\n\n  /** Accessible name for the leading Back action. */\n  @Prop() backAriaLabel: string = 'Back';\n\n  /** Optional page sections shown as an all-or-nothing tab row, or the compact section button. */\n  @Prop() sections: BarTitleSectionItem[] = [];\n\n  /** Id of the active page section. */\n  @Prop() value: string = '';\n\n  /** Accessible name for the page-section tablist and menu. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n\n  /** The one highest-emphasis page action. */\n  @Prop() primaryAction: BarTitlePrimaryAction | null = null;\n\n  /** Secondary page actions shown in the overflow menu. Dividers create groups. */\n  @Prop() actions: BarTitleActionItem[] = [];\n\n  /**\n   * Ordered page-header actions. When supplied, this replaces the legacy\n   * primaryAction/actions presentation while preserving the same dsAction event.\n   */\n  @Prop() actionItems?: BarTitleActionConfigItem[];\n\n  /** Accessible name for the page-actions menu. */\n  @Prop() actionsAriaLabel: string = 'More page actions';\n\n  /** Draw the compact bottom divider beneath the header. */\n  @Prop() showDivider: boolean = true;\n\n  /** Override divider visibility for the compact shell-bar presentation. */\n  @Prop() showCompactDivider?: boolean;\n\n  /** Emitted when the leading Back action is activated. */\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n\n  /** Emitted with the newly selected page-section id. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n\n  /** Emitted with the activated primary or overflow action id. */\n  @Event() dsAction!: EventEmitter<string>;\n\n  @State() private sectionMenuOpen = false;\n  @State() private openActionMenuId = '';\n  @State() private surfaceActionMenuId = '';\n  @State() private sectionSurfaceOpen = false;\n  @State() private sectionMenuInitialFocusVisible = false;\n  @State() private actionMenuInitialFocusVisible = false;\n  @State() private sectionsCollapsed = false;\n  @State() private layoutCommitted = false;\n  @State() private focusedTabId = '';\n\n  private readonly instanceId = nextBarPageTitleId++;\n  private readonly sectionMenuTriggerId = `bar-page-title-section-trigger-${this.instanceId}`;\n  private readonly sectionMenuId = `bar-page-title-section-menu-${this.instanceId}`;\n  private readonly actionMenuTriggerId = `bar-page-title-action-trigger-${this.instanceId}`;\n  private readonly actionMenuId = `bar-page-title-action-menu-${this.instanceId}`;\n  private sectionTriggerEl: HTMLButtonElement | null = null;\n  private actionTriggerEl: FocusableBarTitleButton | null = null;\n  private actionTriggerEls = new Map<string, FocusableBarTitleButton>();\n  private chromeEl: HTMLElement | null = null;\n  private rowEl: HTMLElement | null = null;\n  private probeRowEl: HTMLElement | null = null;\n  private visibleTabListEl: HTMLElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private hasLoaded = false;\n  private readonly connectionTasks = new ConnectionTasks(() => this.el.isConnected);\n  private intrinsicWidthRetryCount = 0;\n  private tabLayoutPendingFrames = 0;\n  private readonly panelNavTransition = new ChromeTransitionGate();\n  private readonly panelToolsTransition = new ChromeTransitionGate();\n  private readonly overflowCoalescer = createRafCoalescer(() => {\n    this.updateSectionsCollapsed();\n  });\n  private chromeTransitionShell: HTMLElement | null = null;\n\n  componentWillLoad() {\n    this.reportActionIdIssues();\n    this.syncFocusedTabId(this.effectiveValue, this.selectableTabs);\n  }\n\n  connectedCallback() {\n    if (this.hasLoaded) this.connectResources();\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.connectResources();\n  }\n\n  private connectResources() {\n    if (!this.el.isConnected) return;\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n    this.setupOverflowObserver();\n    this.bindChromeTransitionListeners();\n    this.scheduleOverflowCheck();\n  }\n\n  componentDidRender() {\n    if (this.chromeOverflowPaused()) return;\n    this.scheduleOverflowCheck();\n  }\n\n  disconnectedCallback() {\n    this.connectionTasks.cancel();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.overflowCoalescer.cancel();\n    this.unbindChromeTransitionListeners();\n    this.panelNavTransition.exit();\n    this.panelToolsTransition.exit();\n  }\n\n  @Watch('sections')\n  handleSectionsChange(next: BarTitleSectionItem[], prev: BarTitleSectionItem[]) {\n    if (!this.hasSectionSelector) {\n      this.closeSectionMenu();\n      this.sectionSurfaceOpen = false;\n      this.sectionsCollapsed = false;\n      this.layoutCommitted = true;\n      this.intrinsicWidthRetryCount = 0;\n      this.tabLayoutPendingFrames = 0;\n      return;\n    }\n    if (barTitleSectionsDigest(next) === barTitleSectionsDigest(prev)) {\n      this.syncFocusedTabId(this.effectiveValue, this.selectableTabs);\n      return;\n    }\n    this.resetSectionLayout();\n    this.syncFocusedTabId(this.effectiveValue, this.selectableTabs);\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.syncFocusedTabId(this.effectiveValue, this.selectableTabs);\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('heading')\n  @Watch('showBack')\n  @Watch('primaryAction')\n  @Watch('actions')\n  @Watch('actionItems')\n  handleLayoutInputsChange() {\n    this.reportActionIdIssues();\n    if (!this.availableActionMenuIds.has(this.openActionMenuId)) this.closeActionMenu();\n    if (!this.availableActionMenuIds.has(this.surfaceActionMenuId)) this.surfaceActionMenuId = '';\n    this.scheduleOverflowCheck();\n  }\n\n  private reportActionIdIssues() {\n    for (const issue of barTitleActionIdIssues(this.resolvedActionItems)) {\n      console.warn(`[ds-bar-page-title] ${issue}`);\n    }\n  }\n\n  private get dividerVisible(): boolean {\n    return this.showCompactDivider ?? this.showDivider;\n  }\n\n  private get usesChromeTokens(): boolean {\n    return this.el.hasAttribute('data-shell-bar');\n  }\n\n  private get shellBarButtonBackground(): 'chrome' | undefined {\n    return this.usesChromeTokens ? 'chrome' : undefined;\n  }\n\n  private get selectableSections() {\n    return selectableBarTitleSections(this.sections);\n  }\n\n  private get hasSectionSelector(): boolean {\n    return this.selectableSections.length > 1;\n  }\n\n  private get sectionTabs() {\n    return barTitleSectionsToTabs(this.sections);\n  }\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.sectionTabs);\n  }\n\n  private get effectiveValue(): string {\n    return effectiveBarTitleSectionValue(this.sections, this.value);\n  }\n\n  private get selectedSectionLabel(): string {\n    return selectedBarTitleSectionLabel(this.sections, this.value);\n  }\n\n  private get sectionTriggerAriaLabel(): string {\n    return barTitleSectionTriggerAriaLabel(this.sectionsAriaLabel, this.selectedSectionLabel);\n  }\n\n  private get sectionMenuSections() {\n    return barTitleSectionMenuSections(this.sections, this.effectiveValue);\n  }\n\n  private get resolvedActionItems(): BarTitleActionConfigItem[] {\n    return resolveBarTitleActionItems(this.actionItems, this.primaryAction, this.actions);\n  }\n\n  private get visibleActions(): BarTitleActionConfigItem[] {\n    return visibleBarTitleActions(this.resolvedActionItems, 'compact');\n  }\n\n  private get actionMenuSections() {\n    return overflowBarTitleActionSections(this.resolvedActionItems, 'compact');\n  }\n\n  private get showActionMenuTrigger(): boolean {\n    return this.actionMenuSections.length > 0;\n  }\n\n  private get availableActionMenuIds(): Set<string> {\n    return availableBarTitleActionMenuIds(this.visibleActions, this.showActionMenuTrigger);\n  }\n\n  private get showSectionTabs(): boolean {\n    return this.hasSectionSelector && this.layoutCommitted && !this.sectionsCollapsed;\n  }\n\n  private get showSectionButton(): boolean {\n    return this.hasSectionSelector && this.layoutCommitted && this.sectionsCollapsed;\n  }\n\n  private resetSectionLayout() {\n    this.layoutCommitted = false;\n    this.sectionsCollapsed = false;\n    this.sectionMenuOpen = false;\n    this.sectionMenuInitialFocusVisible = false;\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n  }\n\n  private bindChromeTransitionListeners() {\n    this.unbindChromeTransitionListeners();\n    const shell = this.el.closest<HTMLElement>('ds-shell-app');\n    if (!shell) return;\n    this.chromeTransitionShell = shell;\n    shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n  }\n\n  private unbindChromeTransitionListeners() {\n    if (!this.chromeTransitionShell) return;\n    this.chromeTransitionShell.removeEventListener(\n      CHROME_TRANSITION_START,\n      this.onChromeTransitionStart\n    );\n    this.chromeTransitionShell.removeEventListener(\n      CHROME_TRANSITION_END,\n      this.onChromeTransitionEnd\n    );\n    this.chromeTransitionShell = null;\n  }\n\n  private onChromeTransitionStart = (event: Event) => {\n    const source = readChromeTransitionSource(event);\n    if (source === 'panel-nav') {\n      this.panelNavTransition.enter();\n      return;\n    }\n    if (source === 'panel-tools') {\n      const phase = readChromeTransitionPhase(event) ?? 'opening';\n      if (phase === 'closing') {\n        this.panelToolsTransition.enter();\n      }\n    }\n  };\n\n  private chromeOverflowPaused(): boolean {\n    return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;\n  }\n\n  private onChromeTransitionEnd = (event: Event) => {\n    const source = readChromeTransitionSource(event);\n    if (source === 'panel-nav') {\n      this.panelNavTransition.exit();\n      if (!this.panelNavTransition.isActive) {\n        this.scheduleOverflowCheck();\n      }\n      return;\n    }\n    if (source === 'panel-tools') {\n      this.panelToolsTransition.exit();\n      this.scheduleOverflowCheck();\n    }\n  };\n\n  private setupOverflowObserver() {\n    if (typeof ResizeObserver === 'undefined' || !this.chromeEl) return;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.chromeOverflowPaused()) return;\n      this.scheduleOverflowCheck();\n    });\n    this.resizeObserver.observe(this.chromeEl);\n  }\n\n  private scheduleOverflowCheck() {\n    if (!this.el.isConnected || this.chromeOverflowPaused()) return;\n    this.overflowCoalescer.schedule();\n  }\n\n  private scheduleIntrinsicWidthRetry() {\n    if (this.intrinsicWidthRetryCount >= BarPageTitle.INTRINSIC_WIDTH_RETRY_MAX) return;\n    this.intrinsicWidthRetryCount++;\n    this.connectionTasks.frame(() => this.scheduleOverflowCheck());\n  }\n\n  private forceTabLayoutCommit(collapsed: boolean) {\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n    const collapsedChanged = this.sectionsCollapsed !== collapsed;\n    if (collapsedChanged) this.sectionsCollapsed = collapsed;\n    if (!collapsed && collapsedChanged) {\n      this.closeSectionMenu();\n      this.sectionSurfaceOpen = false;\n    }\n    this.layoutCommitted = true;\n  }\n\n  private getAvailableWidth(): number {\n    if (!this.rowEl) return 0;\n    const rowWidth = this.rowEl.clientWidth;\n    const actions = this.rowEl.querySelector<HTMLElement>('.bar-page-title__actions');\n    const actionsWidth = actions?.getBoundingClientRect().width ?? 0;\n    const style = getComputedStyle(this.rowEl);\n    const gap = parseFloat(style.columnGap || style.gap) || 0;\n    return Math.max(0, rowWidth - actionsWidth - (actionsWidth > 0 ? gap : 0));\n  }\n\n  private updateSectionsCollapsed() {\n    if (!this.el.isConnected || this.chromeOverflowPaused()) return;\n    if (!this.hasSectionSelector) {\n      if (this.sectionsCollapsed) this.sectionsCollapsed = false;\n      this.intrinsicWidthRetryCount = 0;\n      this.tabLayoutPendingFrames = 0;\n      this.layoutCommitted = true;\n      return;\n    }\n\n    const probeWidth = this.probeRowEl?.scrollWidth ?? 0;\n    const available = this.getAvailableWidth();\n    if (!this.probeRowEl || !this.rowEl || probeWidth === 0) {\n      if (this.layoutCommitted) {\n        this.scheduleIntrinsicWidthRetry();\n        return;\n      }\n      this.tabLayoutPendingFrames += 1;\n      if (\n        this.intrinsicWidthRetryCount >= BarPageTitle.INTRINSIC_WIDTH_RETRY_MAX ||\n        this.tabLayoutPendingFrames >= BarPageTitle.TAB_LAYOUT_COMMIT_MAX_FRAMES\n      ) {\n        this.forceTabLayoutCommit(false);\n      } else {\n        this.scheduleIntrinsicWidthRetry();\n      }\n      return;\n    }\n\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n    const shouldCollapse = tabsOverflowContainer(\n      probeWidth,\n      available,\n      this.sectionsCollapsed,\n      BarPageTitle.OVERFLOW_HYSTERESIS_PX\n    );\n    this.forceTabLayoutCommit(shouldCollapse);\n  }\n\n  private syncFocusedTabId(preferred: string, tabs: TabItemTab[]) {\n    if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {\n      this.focusedTabId = preferred;\n      return;\n    }\n    const first = tabs.find(tab => !tab.isInactive);\n    this.focusedTabId = first?.id ?? '';\n  }\n\n  private selectSection(id: string) {\n    const selected = this.selectableSections.find(section => section.id === id);\n    if (!selected || selected.isInactive) return;\n    this.dsSectionChange.emit(id);\n  }\n\n  private toggleSectionMenu = (event: MouseEvent) => {\n    this.sectionMenuInitialFocusVisible = event.detail === 0;\n    this.openActionMenuId = '';\n    this.sectionMenuOpen = !this.sectionMenuOpen;\n    if (this.sectionMenuOpen) this.sectionSurfaceOpen = true;\n  };\n\n  private closeSectionMenu = () => {\n    this.sectionMenuOpen = false;\n  };\n\n  private handleSectionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    this.closeSectionMenu();\n    this.selectSection(id);\n    this.connectionTasks.frame(() => this.sectionTriggerEl?.focus());\n  };\n\n  private toggleActionMenu = (id: string, event: MouseEvent) => {\n    this.actionMenuInitialFocusVisible = event.detail === 0;\n    this.sectionMenuOpen = false;\n    this.openActionMenuId = this.openActionMenuId === id ? '' : id;\n    if (this.openActionMenuId) this.surfaceActionMenuId = this.openActionMenuId;\n  };\n\n  private finishActionMenuClose = (event: CustomEvent<void>) => {\n    const id = this.surfaceActionMenuId;\n    const domId =\n      id === '__overflow'\n        ? this.actionMenuId\n        : barTitleActionMenuDomId('bar-page-title', this.instanceId, this.resolvedActionItems, id);\n    if (this.openActionMenuId !== id && (event.target as HTMLElement).id === domId) {\n      this.surfaceActionMenuId = '';\n    }\n  };\n\n  private closeActionMenu = () => {\n    this.openActionMenuId = '';\n  };\n\n  private handleActionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    const action = findBarTitleAction(this.resolvedActionItems, id);\n    if (!action || action.isInactive || ('isLoading' in action && action.isLoading)) return;\n    const menuId = this.openActionMenuId;\n    this.closeActionMenu();\n    this.dsAction.emit(id);\n    this.connectionTasks.frame(() => {\n      void restoreBarTitleActionFocus({\n        menuId,\n        overflowTrigger: this.actionTriggerEl,\n        actionTriggers: this.actionTriggerEls,\n        resolvedActionItems: this.resolvedActionItems,\n      });\n    });\n  };\n\n  private focusVisibleTab(id: string) {\n    this.focusedTabId = id;\n    const tab = this.visibleTabListEl?.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    tab?.focus({ preventScroll: true });\n  }\n\n  private findEnabledTab(from: number, step: 1 | -1): number | null {\n    const tabs = this.selectableTabs;\n    for (let index = from + step; index >= 0 && index < tabs.length; index += step) {\n      if (!tabs[index]?.isInactive) return index;\n    }\n    return null;\n  }\n\n  private handleTabKeyDown(event: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n    const targetId = (event.target as HTMLElement | null)?.getAttribute('data-tab-id');\n    const focusedId = targetId ?? this.focusedTabId;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      const focused = tabs.find(tab => tab.id === focusedId);\n      if (!focused || focused.isInactive) return;\n      event.preventDefault();\n      this.selectSection(focused.id);\n      return;\n    }\n\n    const currentIndex = tabs.findIndex(tab => tab.id === focusedId);\n    if (currentIndex < 0) return;\n\n    let nextIndex: number | null;\n    if (event.key === 'ArrowRight') {\n      nextIndex = this.findEnabledTab(currentIndex, 1);\n    } else if (event.key === 'ArrowLeft') {\n      nextIndex = this.findEnabledTab(currentIndex, -1);\n    } else if (event.key === 'Home') {\n      nextIndex = tabs.findIndex(tab => !tab.isInactive);\n    } else if (event.key === 'End') {\n      const reversedIndex = [...tabs].reverse().findIndex(tab => !tab.isInactive);\n      nextIndex = reversedIndex < 0 ? null : tabs.length - 1 - reversedIndex;\n    } else {\n      return;\n    }\n\n    if (nextIndex === null || nextIndex < 0 || nextIndex === currentIndex) return;\n    event.preventDefault();\n    this.focusVisibleTab(tabs[nextIndex].id);\n  }\n\n  private chromeActionOptions() {\n    return {\n      classPrefix: 'bar-page-title',\n      compact: true,\n      visibleActions: this.visibleActions,\n      showOverflowTrigger: this.showActionMenuTrigger,\n      actionItems: this.actionItems,\n      primaryAction: this.primaryAction,\n      resolvedActionItems: this.resolvedActionItems,\n      instanceId: this.instanceId,\n      openActionMenuId: this.openActionMenuId,\n      surfaceActionMenuId: this.surfaceActionMenuId,\n      actionsAriaLabel: this.actionsAriaLabel,\n      actionMenuTriggerId: this.actionMenuTriggerId,\n      actionMenuId: this.actionMenuId,\n      actionTriggers: this.actionTriggerEls,\n      buttonBackground: this.shellBarButtonBackground,\n      setOverflowTriggerEl: (el: FocusableBarTitleButton | null) => {\n        this.actionTriggerEl = el;\n      },\n      toggleActionMenu: this.toggleActionMenu,\n      emitAction: (id: string) => this.dsAction.emit(id),\n    };\n  }\n\n  private renderHeading(probe: boolean) {\n    return (\n      <ds-text\n        class=\"bar-page-title__heading ds-control--md\"\n        variant=\"text-title-small\"\n        emphasis\n        color=\"inherit\"\n        as={probe ? 'span' : 'h1'}\n        wrap={probe ? 'nowrap' : undefined}\n        lineTruncation={probe ? 'none' : 1}\n      >\n        {this.heading}\n      </ds-text>\n    );\n  }\n\n  private renderTabList(probe: boolean) {\n    return (\n      <div\n        role={probe ? undefined : 'tablist'}\n        class=\"bar-page-title__tab-list\"\n        aria-label={probe ? undefined : this.sectionsAriaLabel}\n        ref={el => {\n          if (!probe) this.visibleTabListEl = (el as HTMLElement) ?? null;\n        }}\n        onKeyDown={probe ? undefined : (event: KeyboardEvent) => this.handleTabKeyDown(event)}\n      >\n        {this.sectionTabs.map((tab, index) => {\n          if (isTabDivider(tab)) {\n            return (\n              <div class=\"bar-page-title__tab-divider\" key={`divider-${index}`} aria-hidden=\"true\">\n                <div class=\"bar-page-title__tab-divider-line\" />\n              </div>\n            );\n          }\n\n          const isSelected = tab.id === this.effectiveValue;\n          return (\n            <button\n              key={tab.id}\n              type=\"button\"\n              role={probe ? undefined : 'tab'}\n              data-tab-id={tab.id}\n              class={{\n                'bar-page-title__tab': true,\n                'bar-page-title__tab--selected': isSelected,\n                'ds-control--md': true,\n                'ds-focus-ring-inset': true,\n                'ds-control-inactive': !!tab.isInactive,\n                'ds-interaction-fill--on-chrome': this.usesChromeTokens,\n              }}\n              aria-selected={isSelected ? 'true' : 'false'}\n              aria-disabled={tab.isInactive ? 'true' : undefined}\n              disabled={tab.isInactive}\n              tabIndex={!probe && tab.id === this.focusedTabId ? 0 : -1}\n              onClick={() => !probe && this.selectSection(tab.id)}\n              onFocus={() => {\n                if (!probe) this.focusedTabId = tab.id;\n              }}\n            >\n              <ds-text\n                class=\"bar-page-title__tab-label ds-control-label-box\"\n                as=\"span\"\n                variant=\"text-body-medium\"\n                emphasis={isSelected}\n                color=\"inherit\"\n              >\n                {tab.label}\n              </ds-text>\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n\n  private renderIdentity(probe: boolean) {\n    return (\n      <div class=\"bar-page-title__identity\">\n        {renderBarTitleBack({\n          classPrefix: 'bar-page-title',\n          showBack: this.showBack,\n          backAriaLabel: this.backAriaLabel,\n          background: this.shellBarButtonBackground,\n          onBack: event => this.dsBack.emit(event),\n        })}\n        {this.renderHeading(probe)}\n      </div>\n    );\n  }\n\n  private renderSectionRegion() {\n    if (!this.hasSectionSelector) return null;\n    if (!this.layoutCommitted) {\n      return [\n        <div class=\"bar-page-title__divider\" aria-hidden=\"true\" />,\n        <div class=\"bar-page-title__tabs-pending\" aria-hidden=\"true\" />,\n      ];\n    }\n    if (this.showSectionTabs) {\n      return [\n        <div class=\"bar-page-title__divider\" aria-hidden=\"true\" />,\n        this.renderTabList(false),\n      ];\n    }\n    return [\n      <div class=\"bar-page-title__divider\" aria-hidden=\"true\" />,\n      renderBarTitleSectionTrigger({\n        classPrefix: 'bar-page-title',\n        triggerId: this.sectionMenuTriggerId,\n        menuId: this.sectionMenuId,\n        open: this.sectionMenuOpen,\n        surfaceOpen: this.sectionSurfaceOpen,\n        ariaLabel: this.sectionTriggerAriaLabel,\n        selectedLabel: this.selectedSectionLabel,\n        background: this.shellBarButtonBackground,\n        labelColor: this.usesChromeTokens ? 'inherit' : undefined,\n        setTriggerEl: el => {\n          this.sectionTriggerEl = el;\n        },\n        onToggle: this.toggleSectionMenu,\n      }),\n    ];\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'bar-page-title': true,\n            'bar-page-title--divider-hidden': !this.dividerVisible,\n            'ds-chrome-header': true,\n          }}\n          ref={el => {\n            this.chromeEl = (el as HTMLElement) ?? null;\n            if (el && !this.resizeObserver) this.setupOverflowObserver();\n          }}\n        >\n          {this.hasSectionSelector ? (\n            <div class=\"bar-page-title__probe\" aria-hidden=\"true\" inert>\n              <div\n                class=\"bar-page-title__probe-row\"\n                ref={el => {\n                  const next = (el as HTMLElement) ?? null;\n                  if (next === this.probeRowEl) return;\n                  this.probeRowEl = next;\n                  if (next) {\n                    this.intrinsicWidthRetryCount = 0;\n                    this.tabLayoutPendingFrames = 0;\n                    this.scheduleOverflowCheck();\n                  }\n                }}\n              >\n                {this.renderIdentity(true)}\n                <div class=\"bar-page-title__divider\" />\n                {this.renderTabList(true)}\n              </div>\n            </div>\n          ) : null}\n\n          <div class=\"bar-page-title__inner\">\n            <div\n              class=\"bar-page-title__row\"\n              ref={el => {\n                this.rowEl = (el as HTMLElement) ?? null;\n              }}\n            >\n              <div class=\"bar-page-title__title-row\">\n                {this.renderIdentity(false)}\n                {this.renderSectionRegion()}\n              </div>\n              {renderBarTitleActions(this.chromeActionOptions())}\n            </div>\n          </div>\n        </div>\n\n        {this.showSectionButton ? (\n          <ds-menu\n            id={this.sectionMenuId}\n            class=\"bar-page-title__section-menu\"\n            anchorId={this.sectionMenuTriggerId}\n            menuLabel={this.sectionsAriaLabel}\n            open={this.sectionMenuOpen}\n            initialFocusVisible={this.sectionMenuInitialFocusVisible}\n            sections={this.sectionMenuSections}\n            onDsClose={this.closeSectionMenu}\n            onDsAfterClose={() => {\n              if (!this.sectionMenuOpen) this.sectionSurfaceOpen = false;\n            }}\n            onDsSelect={this.handleSectionSelect}\n          />\n        ) : null}\n\n        {renderBarTitleActionMenus({\n          classPrefix: 'bar-page-title',\n          visibleActions: this.visibleActions,\n          instanceId: this.instanceId,\n          resolvedActionItems: this.resolvedActionItems,\n          openActionMenuId: this.openActionMenuId,\n          actionMenuInitialFocusVisible: this.actionMenuInitialFocusVisible,\n          overflowTrigger: this.actionTriggerEl,\n          actionTriggers: this.actionTriggerEls,\n          closeActionMenu: this.closeActionMenu,\n          finishActionMenuClose: this.finishActionMenuClose,\n          handleActionSelect: this.handleActionSelect,\n        })}\n\n        {renderBarTitleOverflowMenu({\n          classPrefix: 'bar-page-title',\n          showOverflowTrigger: this.showActionMenuTrigger,\n          actionMenuId: this.actionMenuId,\n          actionMenuTriggerId: this.actionMenuTriggerId,\n          actionsAriaLabel: this.actionsAriaLabel,\n          open: this.openActionMenuId === '__overflow',\n          actionMenuInitialFocusVisible: this.actionMenuInitialFocusVisible,\n          actionMenuSections: this.actionMenuSections,\n          closeActionMenu: this.closeActionMenu,\n          finishActionMenuClose: this.finishActionMenuClose,\n          handleActionSelect: this.handleActionSelect,\n        })}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -203,7 +203,7 @@
     },
     {
       "path": "src/wc/components/Breadcrumb/Breadcrumb.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveSafeUrl } from '../../utils';\nimport type { BreadcrumbItem, BreadcrumbSelectDetail } from './breadcrumb-types';\n\n@Component({\n  tag: 'ds-breadcrumb',\n  styleUrl: 'Breadcrumb.css',\n  scoped: true,\n})\nexport class Breadcrumb {\n  /** Ordered path from the broadest ancestor to the nearest page. */\n  @Prop() items: BreadcrumbItem[] = [];\n\n  /** Accessible name for the breadcrumb navigation landmark. */\n  @Prop() ariaLabel: string = 'Breadcrumb';\n\n  /** Emitted when an interactive breadcrumb item is activated. Prevent to cancel native navigation. */\n  @Event({ cancelable: true }) dsSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n  @State() private labelWidths: number[] = [];\n  @State() private collapsedLabels: boolean[] = [];\n\n  private navElement?: HTMLElement;\n  private listElement?: HTMLOListElement;\n  private measurementElements: HTMLElement[] = [];\n  private separatorElements: HTMLElement[] = [];\n  private ellipsisMeasurement?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private observedElement?: HTMLElement;\n  private measurementFrame?: number;\n\n  componentDidLoad() {\n    this.observeContainer();\n    this.scheduleMeasurement();\n    void document.fonts?.ready.then(() => this.scheduleMeasurement());\n  }\n\n  componentDidRender() {\n    this.observeContainer();\n    this.scheduleMeasurement();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.observedElement = undefined;\n    if (this.measurementFrame !== undefined) cancelAnimationFrame(this.measurementFrame);\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.labelWidths = [];\n    this.collapsedLabels = [];\n    this.scheduleMeasurement();\n  }\n\n  private observeContainer() {\n    if (!this.navElement || this.observedElement === this.navElement) return;\n    this.resizeObserver ??= new ResizeObserver(() => this.scheduleMeasurement());\n    this.resizeObserver.disconnect();\n    this.resizeObserver.observe(this.navElement);\n    this.observedElement = this.navElement;\n  }\n\n  private scheduleMeasurement() {\n    if (this.measurementFrame !== undefined) return;\n    this.measurementFrame = requestAnimationFrame(() => {\n      this.measurementFrame = undefined;\n      this.measureLabels();\n    });\n  }\n\n  private measureLabels() {\n    if (\n      !this.navElement ||\n      !this.listElement ||\n      !this.ellipsisMeasurement ||\n      this.items.length === 0\n    )\n      return;\n\n    const naturalWidths = this.items.map(\n      (_, index) => this.measurementElements[index]?.getBoundingClientRect().width ?? 0\n    );\n    const ellipsisWidth = this.ellipsisMeasurement.getBoundingClientRect().width;\n    if (naturalWidths.some(width => width === 0) || ellipsisWidth === 0) return;\n\n    const separatorWidth = this.separatorElements.reduce((total, separator) => {\n      const styles = getComputedStyle(separator);\n      return (\n        total +\n        separator.getBoundingClientRect().width +\n        Number.parseFloat(styles.marginInlineStart) +\n        Number.parseFloat(styles.marginInlineEnd)\n      );\n    }, 0);\n    const availableWidth = Math.max(0, this.navElement.clientWidth - separatorWidth);\n    const minimumWidths = naturalWidths.map(width => Math.min(width, ellipsisWidth));\n    const nextWidths = [...minimumWidths];\n    let remainingWidth = Math.max(\n      0,\n      availableWidth - minimumWidths.reduce((total, width) => total + width, 0)\n    );\n\n    // Protect the current/newest location. Extra width is granted newest-to-oldest,\n    // so ancestors collapse in path order as the available space decreases.\n    for (let index = naturalWidths.length - 1; index >= 0 && remainingWidth > 0; index -= 1) {\n      const extraWidth = Math.min(remainingWidth, naturalWidths[index] - minimumWidths[index]);\n      nextWidths[index] += extraWidth;\n      remainingWidth -= extraWidth;\n    }\n\n    const widthsChanged =\n      nextWidths.length !== this.labelWidths.length ||\n      nextWidths.some((width, index) => Math.abs(width - (this.labelWidths[index] ?? 0)) > 0.25);\n    const nextCollapsedLabels = nextWidths.map(\n      (width, index) =>\n        naturalWidths[index] > minimumWidths[index] &&\n        Math.abs(width - minimumWidths[index]) <= 0.25\n    );\n    const collapsedLabelsChanged =\n      nextCollapsedLabels.length !== this.collapsedLabels.length ||\n      nextCollapsedLabels.some((isCollapsed, index) => isCollapsed !== this.collapsedLabels[index]);\n    if (widthsChanged) this.labelWidths = nextWidths;\n    if (collapsedLabelsChanged) this.collapsedLabels = nextCollapsedLabels;\n  }\n\n  private handleSelect(item: BreadcrumbItem, originalEvent: MouseEvent) {\n    const event = this.dsSelect.emit({ item, originalEvent });\n    if (event.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderItem(item: BreadcrumbItem, index: number) {\n    const allocatedWidth = this.labelWidths[index];\n    const isCollapsed = this.collapsedLabels[index] ?? false;\n    const label = [\n      <ds-text\n        class=\"breadcrumb__label ds-text-decoration\"\n        as=\"span\"\n        variant=\"text-caption\"\n        color=\"inherit\"\n        lineTruncation={isCollapsed ? 'none' : 1}\n        aria-hidden={isCollapsed ? 'true' : undefined}\n        style={\n          allocatedWidth === undefined\n            ? undefined\n            : { '--breadcrumb-label-width': `${allocatedWidth}px` }\n        }\n      >\n        {isCollapsed ? '…' : item.label}\n      </ds-text>,\n      isCollapsed ? (\n        <span class=\"breadcrumb__accessible-label ds-visually-hidden\">{item.label}</span>\n      ) : null,\n    ];\n\n    if (item.isCurrent) {\n      return (\n        <span class=\"breadcrumb__current\" aria-current=\"page\" aria-label={item.ariaLabel}>\n          {label}\n        </span>\n      );\n    }\n\n    const href = resolveSafeUrl(item.href);\n    if (href) {\n      return (\n        <a\n          class=\"breadcrumb__link ds-focus-ring\"\n          href={href}\n          aria-label={item.ariaLabel}\n          onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n        >\n          {label}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        class=\"breadcrumb__link ds-focus-ring\"\n        type=\"button\"\n        aria-label={item.ariaLabel}\n        onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n      >\n        {label}\n      </button>\n    );\n  }\n\n  render() {\n    if (this.items.length === 0) return null;\n\n    this.measurementElements = [];\n    this.separatorElements = [];\n\n    return (\n      <Host>\n        <nav\n          class=\"breadcrumb\"\n          aria-label={this.ariaLabel}\n          ref={element => {\n            this.navElement = element;\n          }}\n        >\n          <div class=\"breadcrumb__measurements\" aria-hidden=\"true\">\n            {this.items.map((item, index) => (\n              <ds-text\n                class=\"breadcrumb__measurement\"\n                as=\"span\"\n                variant=\"text-caption\"\n                color=\"inherit\"\n                ref={element => {\n                  if (element) this.measurementElements[index] = element;\n                }}\n              >\n                {item.label}\n              </ds-text>\n            ))}\n            <ds-text\n              class=\"breadcrumb__measurement\"\n              as=\"span\"\n              variant=\"text-caption\"\n              color=\"inherit\"\n              ref={element => {\n                this.ellipsisMeasurement = element;\n              }}\n            >\n              …\n            </ds-text>\n          </div>\n          <ol\n            class=\"breadcrumb__list\"\n            ref={element => {\n              this.listElement = element;\n            }}\n          >\n            {this.items.map((item, index) => (\n              <li class=\"breadcrumb__item\" key={item.id}>\n                {index > 0 ? (\n                  <ds-text\n                    class=\"breadcrumb__separator\"\n                    as=\"span\"\n                    variant=\"text-caption\"\n                    color=\"tertiary\"\n                    aria-hidden=\"true\"\n                    ref={element => {\n                      if (element) this.separatorElements[index - 1] = element;\n                    }}\n                  >\n                    /\n                  </ds-text>\n                ) : null}\n                {this.renderItem(item, index)}\n              </li>\n            ))}\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { resolveSafeUrl } from '../../utils';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport type { BreadcrumbItem, BreadcrumbSelectDetail } from './breadcrumb-types';\n\n@Component({\n  tag: 'ds-breadcrumb',\n  styleUrl: 'Breadcrumb.css',\n  scoped: true,\n})\nexport class Breadcrumb {\n  @Element() el!: HTMLElement;\n\n  /** Ordered path from the broadest ancestor to the nearest page. */\n  @Prop() items: BreadcrumbItem[] = [];\n\n  /** Accessible name for the breadcrumb navigation landmark. */\n  @Prop() ariaLabel: string = 'Breadcrumb';\n\n  /** Emitted when an interactive breadcrumb item is activated. Prevent to cancel native navigation. */\n  @Event({ cancelable: true }) dsSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n  @State() private labelWidths: number[] = [];\n  @State() private collapsedLabels: boolean[] = [];\n\n  private navElement?: HTMLElement;\n  private listElement?: HTMLOListElement;\n  private measurementElements: HTMLElement[] = [];\n  private separatorElements: HTMLElement[] = [];\n  private ellipsisMeasurement?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private observedElement?: HTMLElement;\n  private measurementFrame?: number;\n  private hasLoaded = false;\n  private readonly connectionTasks = new ConnectionTasks(() => this.el.isConnected);\n\n  connectedCallback() {\n    if (this.hasLoaded) this.connectResources();\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.connectResources();\n  }\n\n  private connectResources() {\n    if (!this.el.isConnected) return;\n    this.observeContainer();\n    this.scheduleMeasurement();\n    void document.fonts?.ready.then(this.connectionTasks.guard(() => this.scheduleMeasurement()));\n  }\n\n  componentDidRender() {\n    this.observeContainer();\n    this.scheduleMeasurement();\n  }\n\n  disconnectedCallback() {\n    this.connectionTasks.cancel();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n    this.observedElement = undefined;\n    this.measurementFrame = undefined;\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.labelWidths = [];\n    this.collapsedLabels = [];\n    this.scheduleMeasurement();\n  }\n\n  private observeContainer() {\n    if (!this.el.isConnected || !this.navElement || this.observedElement === this.navElement)\n      return;\n    this.resizeObserver ??= new ResizeObserver(() => this.scheduleMeasurement());\n    this.resizeObserver.disconnect();\n    this.resizeObserver.observe(this.navElement);\n    this.observedElement = this.navElement;\n  }\n\n  private scheduleMeasurement() {\n    if (!this.el.isConnected || this.measurementFrame !== undefined) return;\n    this.measurementFrame = this.connectionTasks.frame(() => {\n      this.measurementFrame = undefined;\n      this.measureLabels();\n    });\n  }\n\n  private measureLabels() {\n    if (\n      !this.navElement ||\n      !this.listElement ||\n      !this.ellipsisMeasurement ||\n      this.items.length === 0\n    )\n      return;\n\n    const naturalWidths = this.items.map(\n      (_, index) => this.measurementElements[index]?.getBoundingClientRect().width ?? 0\n    );\n    const ellipsisWidth = this.ellipsisMeasurement.getBoundingClientRect().width;\n    if (naturalWidths.some(width => width === 0) || ellipsisWidth === 0) return;\n\n    const separatorWidth = this.separatorElements.reduce((total, separator) => {\n      const styles = getComputedStyle(separator);\n      return (\n        total +\n        separator.getBoundingClientRect().width +\n        Number.parseFloat(styles.marginInlineStart) +\n        Number.parseFloat(styles.marginInlineEnd)\n      );\n    }, 0);\n    const availableWidth = Math.max(0, this.navElement.clientWidth - separatorWidth);\n    const minimumWidths = naturalWidths.map(width => Math.min(width, ellipsisWidth));\n    const nextWidths = [...minimumWidths];\n    let remainingWidth = Math.max(\n      0,\n      availableWidth - minimumWidths.reduce((total, width) => total + width, 0)\n    );\n\n    // Protect the current/newest location. Extra width is granted newest-to-oldest,\n    // so ancestors collapse in path order as the available space decreases.\n    for (let index = naturalWidths.length - 1; index >= 0 && remainingWidth > 0; index -= 1) {\n      const extraWidth = Math.min(remainingWidth, naturalWidths[index] - minimumWidths[index]);\n      nextWidths[index] += extraWidth;\n      remainingWidth -= extraWidth;\n    }\n\n    const widthsChanged =\n      nextWidths.length !== this.labelWidths.length ||\n      nextWidths.some((width, index) => Math.abs(width - (this.labelWidths[index] ?? 0)) > 0.25);\n    const nextCollapsedLabels = nextWidths.map(\n      (width, index) =>\n        naturalWidths[index] > minimumWidths[index] &&\n        Math.abs(width - minimumWidths[index]) <= 0.25\n    );\n    const collapsedLabelsChanged =\n      nextCollapsedLabels.length !== this.collapsedLabels.length ||\n      nextCollapsedLabels.some((isCollapsed, index) => isCollapsed !== this.collapsedLabels[index]);\n    if (widthsChanged) this.labelWidths = nextWidths;\n    if (collapsedLabelsChanged) this.collapsedLabels = nextCollapsedLabels;\n  }\n\n  private handleSelect(item: BreadcrumbItem, originalEvent: MouseEvent) {\n    const event = this.dsSelect.emit({ item, originalEvent });\n    if (event.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderItem(item: BreadcrumbItem, index: number) {\n    const allocatedWidth = this.labelWidths[index];\n    const isCollapsed = this.collapsedLabels[index] ?? false;\n    const label = [\n      <ds-text\n        class=\"breadcrumb__label ds-text-decoration\"\n        as=\"span\"\n        variant=\"text-caption\"\n        color=\"inherit\"\n        lineTruncation={isCollapsed ? 'none' : 1}\n        aria-hidden={isCollapsed ? 'true' : undefined}\n        style={\n          allocatedWidth === undefined\n            ? undefined\n            : { '--breadcrumb-label-width': `${allocatedWidth}px` }\n        }\n      >\n        {isCollapsed ? '…' : item.label}\n      </ds-text>,\n      isCollapsed ? (\n        <span class=\"breadcrumb__accessible-label ds-visually-hidden\">{item.label}</span>\n      ) : null,\n    ];\n\n    if (item.isCurrent) {\n      return (\n        <span class=\"breadcrumb__current\" aria-current=\"page\" aria-label={item.ariaLabel}>\n          {label}\n        </span>\n      );\n    }\n\n    const href = resolveSafeUrl(item.href);\n    if (href) {\n      return (\n        <a\n          class=\"breadcrumb__link ds-focus-ring\"\n          href={href}\n          aria-label={item.ariaLabel}\n          onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n        >\n          {label}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        class=\"breadcrumb__link ds-focus-ring\"\n        type=\"button\"\n        aria-label={item.ariaLabel}\n        onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n      >\n        {label}\n      </button>\n    );\n  }\n\n  render() {\n    if (this.items.length === 0) return null;\n\n    this.measurementElements = [];\n    this.separatorElements = [];\n\n    return (\n      <Host>\n        <nav\n          class=\"breadcrumb\"\n          aria-label={this.ariaLabel}\n          ref={element => {\n            this.navElement = element;\n          }}\n        >\n          <div class=\"breadcrumb__measurements\" aria-hidden=\"true\">\n            {this.items.map((item, index) => (\n              <ds-text\n                class=\"breadcrumb__measurement\"\n                as=\"span\"\n                variant=\"text-caption\"\n                color=\"inherit\"\n                ref={element => {\n                  if (element) this.measurementElements[index] = element;\n                }}\n              >\n                {item.label}\n              </ds-text>\n            ))}\n            <ds-text\n              class=\"breadcrumb__measurement\"\n              as=\"span\"\n              variant=\"text-caption\"\n              color=\"inherit\"\n              ref={element => {\n                this.ellipsisMeasurement = element;\n              }}\n            >\n              …\n            </ds-text>\n          </div>\n          <ol\n            class=\"breadcrumb__list\"\n            ref={element => {\n              this.listElement = element;\n            }}\n          >\n            {this.items.map((item, index) => (\n              <li class=\"breadcrumb__item\" key={item.id}>\n                {index > 0 ? (\n                  <ds-text\n                    class=\"breadcrumb__separator\"\n                    as=\"span\"\n                    variant=\"text-caption\"\n                    color=\"tertiary\"\n                    aria-hidden=\"true\"\n                    ref={element => {\n                      if (element) this.separatorElements[index - 1] = element;\n                    }}\n                  >\n                    /\n                  </ds-text>\n                ) : null}\n                {this.renderItem(item, index)}\n              </li>\n            ))}\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -49,14 +49,14 @@
       ],
       "accessibility": [
         "The month grid is labelled with the visible month and year. Days are grid cells with an accessible date name.",
-        "The grid keeps one tab stop. Arrow keys move by day or week, Home and End move within the week, and Page Up or Page Down change month.",
+        "The grid keeps one enabled day in the tab order when the visible month has available dates. Arrow keys move by day or week, Home and End move within the week, and Page Up or Page Down change month. Keyboard traversal reveals the target month before focusing its date and respects the available date bounds.",
         "In range mode, the first chosen day applies immediately as a one-day range. Hovering or focusing another day previews the inclusive span without changing the value until the second activation.",
         "Month navigation buttons are named Previous month and Next month. Inactive calendars disable day and month controls."
       ],
       "states": [
         "Single selection paints the current value with the shared interaction-fill selected wash and primary text. A committed range paints inclusive days with the faint brand fill and both edges boldly.",
         "Today uses emphasized primary text without becoming selected on its own.",
-        "Days outside the visible month remain in the six-week grid and use tertiary text. Optional min and max dates disable days outside that inclusive bound.",
+        "Days outside the visible month remain as inactive context in the grid. They cannot be selected or preview a range; navigate to their month to choose them. Optional min and max dates disable days outside that inclusive bound.",
         "After the first range day is chosen, that day keeps the shared pressed overlay. Hovering or focusing toward another day paints the inclusive span with the shared hover overlay on top of the previous committed range, which stays visible until the replacement is completed. Completing the end day orders the two dates inclusively and replaces those overlays with brand fill."
       ],
       "responsiveBehavior": [
@@ -274,12 +274,12 @@
     },
     {
       "path": "src/wc/components/Calendar/Calendar.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  dateFilterRangeValue,\n  isIsoCalendarDate,\n  parseDateFilterValue,\n  shiftIsoCalendarDate,\n} from '../../utils';\nimport {\n  CALENDAR_WEEKDAYS,\n  calendarDays,\n  calendarMonth,\n  calendarMonthLabel,\n  calendarPaintedRange,\n  calendarToday,\n  shiftCalendarMonth,\n  type CalendarDateRange,\n} from './calendar-grid';\n\nexport type CalendarSelectionMode = 'single' | 'range';\n\n@Component({\n  tag: 'ds-calendar',\n  styleUrl: 'Calendar.css',\n  scoped: true,\n})\nexport class Calendar {\n  @Element() el!: HTMLElement;\n\n  /** Single date emits YYYY-MM-DD. Range emits the shared `range:start/end` string. */\n  @Prop() selectionMode: CalendarSelectionMode = 'single';\n  @Prop() value: string = '';\n  @Prop() min: string | undefined;\n  @Prop() max: string | undefined;\n  @Prop() isInactive: boolean = false;\n  /** Move keyboard focus into the grid after the calendar is rendered. */\n  @Prop() autoFocus: boolean = false;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private month = calendarMonth(calendarToday());\n  @State() private pendingStart = '';\n  @State() private previewEnd = '';\n  @State() private heldRange: CalendarDateRange | null = null;\n\n  componentWillLoad() {\n    this.month = calendarMonth(this.anchorDate());\n  }\n\n  componentDidLoad() {\n    if (this.autoFocus) void this.setFocus();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.month = calendarMonth(this.anchorDate());\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector<HTMLElement>('.calendar-day[tabindex=\"0\"]')?.focus();\n  }\n\n  private anchorDate(): string {\n    if (this.selectionMode === 'range') {\n      const parsed = parseDateFilterValue(this.value);\n      if (parsed?.kind === 'range') return parsed.start;\n      return calendarToday();\n    }\n    return isIsoCalendarDate(this.value) ? this.value : calendarToday();\n  }\n\n  private isDisabled(day: string): boolean {\n    if (this.isInactive) return true;\n    if (this.min && isIsoCalendarDate(this.min) && day < this.min) return true;\n    if (this.max && isIsoCalendarDate(this.max) && day > this.max) return true;\n    return false;\n  }\n\n  private moveMonth = (offset: number) => {\n    this.previewEnd = '';\n    this.month = shiftCalendarMonth(this.month, offset);\n  };\n\n  private selectDate = (day: string) => {\n    if (this.isDisabled(day)) return;\n    this.previewEnd = '';\n    if (this.selectionMode === 'single') {\n      this.pendingStart = '';\n      this.heldRange = null;\n      this.dsChange.emit(day);\n      return;\n    }\n    const pending = this.pendingStart;\n    if (pending) {\n      this.pendingStart = '';\n      this.heldRange = null;\n      this.dsChange.emit(dateFilterRangeValue(pending, day));\n      return;\n    }\n    const current = parseDateFilterValue(this.value);\n    this.heldRange = current?.kind === 'range' ? { start: current.start, end: current.end } : null;\n    this.pendingStart = day;\n    this.dsChange.emit(dateFilterRangeValue(day, day));\n  };\n\n  private previewRange = (day: string) => {\n    if (!this.pendingStart || this.previewEnd === day) return;\n    this.previewEnd = day;\n  };\n\n  private clearPreview = () => {\n    if (!this.previewEnd) return;\n    this.previewEnd = '';\n  };\n\n  private focusDate(day: string) {\n    this.previewRange(day);\n    const targetMonth = calendarMonth(day);\n    if (this.month !== targetMonth) this.month = targetMonth;\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLElement>(`[data-date-option=\"${day}\"]`)?.focus();\n    });\n  }\n\n  private handleDayKeyDown = (event: KeyboardEvent, day: string) => {\n    let offset: number | null = null;\n    if (event.key === 'ArrowLeft') offset = -1;\n    else if (event.key === 'ArrowRight') offset = 1;\n    else if (event.key === 'ArrowUp') offset = -7;\n    else if (event.key === 'ArrowDown') offset = 7;\n    else if (event.key === 'Home') {\n      offset = -new Date(`${day}T00:00:00Z`).getUTCDay();\n    } else if (event.key === 'End') {\n      offset = 6 - new Date(`${day}T00:00:00Z`).getUTCDay();\n    } else if (event.key === 'PageUp' || event.key === 'PageDown') {\n      const month = shiftCalendarMonth(calendarMonth(day), event.key === 'PageUp' ? -1 : 1);\n      const candidate = `${month}-${day.slice(8, 10)}`;\n      event.preventDefault();\n      this.focusDate(isIsoCalendarDate(candidate) ? candidate : `${month}-01`);\n      return;\n    }\n    if (offset === null) return;\n    event.preventDefault();\n    this.focusDate(shiftIsoCalendarDate(day, offset));\n  };\n\n  render() {\n    const liveRange = this.selectionMode === 'range' ? parseDateFilterValue(this.value) : null;\n    const liveRangeValue = liveRange?.kind === 'range' ? liveRange : null;\n    const rangeValue = calendarPaintedRange(this.pendingStart, this.heldRange, liveRangeValue);\n    const days = calendarDays(this.month);\n    const weeks = Array.from({ length: 6 }, (_, index) => days.slice(index * 7, index * 7 + 7));\n    const today = calendarToday();\n    const previewStart =\n      this.pendingStart && this.previewEnd ? [this.pendingStart, this.previewEnd].sort()[0] : null;\n    const previewFinish =\n      this.pendingStart && this.previewEnd ? [this.pendingStart, this.previewEnd].sort()[1] : null;\n    const selectedSingle =\n      this.selectionMode === 'single' && isIsoCalendarDate(this.value) ? this.value : '';\n    const preferredFocus =\n      this.pendingStart ||\n      selectedSingle ||\n      rangeValue?.end ||\n      (this.month === today.slice(0, 7) ? today : '');\n    const focusDate = days.some(day => day.value === preferredFocus)\n      ? preferredFocus\n      : (days.find(day => day.inMonth)?.value ?? days[0]?.value);\n\n    return (\n      <Host>\n        <div class=\"calendar\">\n          <div class=\"calendar-heading ds-control--md\">\n            <ds-button-unfilled\n              class=\"calendar-nav calendar-nav--previous\"\n              variant=\"icon\"\n              icon=\"ChevronLeft\"\n              size=\"md\"\n              hasBorder={false}\n              isInactive={this.isInactive}\n              ariaLabel=\"Previous month\"\n              onDsClick={() => this.moveMonth(-1)}\n            />\n            <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"primary\">\n              {calendarMonthLabel(this.month)}\n            </ds-text>\n            <ds-button-unfilled\n              class=\"calendar-nav calendar-nav--next\"\n              variant=\"icon\"\n              icon=\"ChevronRight\"\n              size=\"md\"\n              hasBorder={false}\n              isInactive={this.isInactive}\n              ariaLabel=\"Next month\"\n              onDsClick={() => this.moveMonth(1)}\n            />\n          </div>\n          <div class=\"calendar-weekdays\" aria-hidden=\"true\">\n            {CALENDAR_WEEKDAYS.map(day => (\n              <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n                {day}\n              </ds-text>\n            ))}\n          </div>\n          <div\n            class=\"calendar-grid\"\n            role=\"grid\"\n            aria-label={calendarMonthLabel(this.month)}\n            onMouseLeave={this.clearPreview}\n          >\n            {weeks.map((week, weekIndex) => (\n              <div class=\"calendar-grid__row\" role=\"row\" key={`week-${weekIndex}`}>\n                {week.map(day => {\n                  const selectedInRange = Boolean(\n                    liveRangeValue &&\n                    day.value >= liveRangeValue.start &&\n                    day.value <= liveRangeValue.end\n                  );\n                  const paintedInRange = Boolean(\n                    rangeValue && day.value >= rangeValue.start && day.value <= rangeValue.end\n                  );\n                  const pendingStartDay =\n                    this.selectionMode === 'range' &&\n                    Boolean(this.pendingStart) &&\n                    day.value === this.pendingStart;\n                  const previewInRange = Boolean(\n                    this.pendingStart &&\n                    previewStart &&\n                    previewFinish &&\n                    day.value >= previewStart &&\n                    day.value <= previewFinish &&\n                    day.value !== this.pendingStart\n                  );\n                  const inRange = this.selectionMode === 'range' && paintedInRange;\n                  const rangeEdge = Boolean(\n                    this.selectionMode === 'range' &&\n                    rangeValue &&\n                    (day.value === rangeValue.start || day.value === rangeValue.end)\n                  );\n                  const selected = this.selectionMode === 'single' && day.value === selectedSingle;\n                  const textColor = rangeEdge\n                    ? 'on-bold'\n                    : selected ||\n                        inRange ||\n                        pendingStartDay ||\n                        previewInRange ||\n                        day.value === today\n                      ? 'primary'\n                      : day.inMonth\n                        ? 'secondary'\n                        : 'tertiary';\n                  return (\n                    <button\n                      type=\"button\"\n                      role=\"gridcell\"\n                      data-date-option={day.value}\n                      class={{\n                        'calendar-day': true,\n                        'calendar-day--outside': !day.inMonth,\n                        'calendar-day--today': day.value === today,\n                        'calendar-day--in-range': inRange,\n                        'calendar-day--range-preview': previewInRange,\n                        'calendar-day--range-edge': rangeEdge,\n                        'calendar-day--selected': selected,\n                        'ds-focus-ring-inset': true,\n                        'ds-interaction-fill': true,\n                        'ds-interaction-fill--on-bold': rangeEdge,\n                        'ds-interaction-fill--surface-open':\n                          pendingStartDay && !this.isDisabled(day.value),\n                        'ds-interaction-fill--selected': selected && !this.isDisabled(day.value),\n                      }}\n                      disabled={this.isDisabled(day.value)}\n                      aria-label={day.label}\n                      aria-selected={selectedInRange || selected ? 'true' : 'false'}\n                      tabIndex={day.value === focusDate ? 0 : -1}\n                      onMouseEnter={() => this.previewRange(day.value)}\n                      onFocus={() => this.previewRange(day.value)}\n                      onClick={() => this.selectDate(day.value)}\n                      onKeyDown={event => this.handleDayKeyDown(event, day.value)}\n                    >\n                      {/* eslint-disable compomo/no-selected-fill-emphasis-change -- Today emphasis is date-driven and remains unchanged when selection changes. */}\n                      <ds-text\n                        class=\"ds-interaction-fill__content\"\n                        as=\"span\"\n                        variant=\"text-body-medium\"\n                        color={textColor}\n                        emphasis={day.value === today}\n                      >\n                        {day.day}\n                      </ds-text>\n                      {/* eslint-enable compomo/no-selected-fill-emphasis-change */}\n                    </button>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  dateFilterRangeValue,\n  isIsoCalendarDate,\n  parseDateFilterValue,\n  shiftIsoCalendarDate,\n} from '../../utils';\nimport {\n  CALENDAR_WEEKDAYS,\n  calendarDays,\n  calendarMonth,\n  calendarMonthLabel,\n  calendarPaintedRange,\n  calendarToday,\n  shiftCalendarMonth,\n  type CalendarDateRange,\n} from './calendar-grid';\n\nexport type CalendarSelectionMode = 'single' | 'range';\n\n@Component({\n  tag: 'ds-calendar',\n  styleUrl: 'Calendar.css',\n  scoped: true,\n})\nexport class Calendar {\n  @Element() el!: HTMLElement;\n\n  /** Single date emits YYYY-MM-DD. Range emits the shared `range:start/end` string. */\n  @Prop() selectionMode: CalendarSelectionMode = 'single';\n  @Prop() value: string = '';\n  @Prop() min: string | undefined;\n  @Prop() max: string | undefined;\n  @Prop() isInactive: boolean = false;\n  /** Move keyboard focus into the grid after the calendar is rendered. */\n  @Prop() autoFocus: boolean = false;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private month = calendarMonth(calendarToday());\n  @State() private focusedDay = '';\n  @State() private pendingStart = '';\n  @State() private previewEnd = '';\n  @State() private heldRange: CalendarDateRange | null = null;\n\n  componentWillLoad() {\n    this.month = calendarMonth(this.anchorDate());\n  }\n\n  componentDidLoad() {\n    if (this.autoFocus) void this.setFocus();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.month = calendarMonth(this.anchorDate());\n    this.focusedDay = '';\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector<HTMLElement>('.calendar-day[tabindex=\"0\"]')?.focus();\n  }\n\n  private anchorDate(): string {\n    if (this.selectionMode === 'range') {\n      const parsed = parseDateFilterValue(this.value);\n      if (parsed?.kind === 'range') return parsed.start;\n      return calendarToday();\n    }\n    return isIsoCalendarDate(this.value) ? this.value : calendarToday();\n  }\n\n  private isUnavailable(day: string): boolean {\n    if (this.isInactive || !isIsoCalendarDate(day)) return true;\n    if (this.min && isIsoCalendarDate(this.min) && day < this.min) return true;\n    if (this.max && isIsoCalendarDate(this.max) && day > this.max) return true;\n    return false;\n  }\n\n  private isDisabled(day: string): boolean {\n    return !day.startsWith(`${this.month}-`) || this.isUnavailable(day);\n  }\n\n  private moveMonth = (offset: number) => {\n    const nextMonth = shiftCalendarMonth(this.month, offset);\n    if (this.isInactive || !nextMonth) return;\n    this.previewEnd = '';\n    this.month = nextMonth;\n  };\n\n  private selectDate = (day: string) => {\n    if (this.isDisabled(day)) return;\n    this.previewEnd = '';\n    if (this.selectionMode === 'single') {\n      this.pendingStart = '';\n      this.heldRange = null;\n      this.dsChange.emit(day);\n      return;\n    }\n    const pending = this.pendingStart;\n    if (pending) {\n      this.pendingStart = '';\n      this.heldRange = null;\n      this.dsChange.emit(dateFilterRangeValue(pending, day));\n      return;\n    }\n    const current = parseDateFilterValue(this.value);\n    this.heldRange = current?.kind === 'range' ? { start: current.start, end: current.end } : null;\n    this.pendingStart = day;\n    this.dsChange.emit(dateFilterRangeValue(day, day));\n  };\n\n  private previewRange = (day: string) => {\n    if (this.isDisabled(day)) {\n      this.clearPreview();\n      return;\n    }\n    if (!this.pendingStart || this.previewEnd === day) return;\n    this.previewEnd = day;\n  };\n\n  private clearPreview = () => {\n    if (!this.previewEnd) return;\n    this.previewEnd = '';\n  };\n\n  private focusDate(day: string) {\n    if (this.isUnavailable(day)) return;\n    const targetMonth = calendarMonth(day);\n    if (this.month !== targetMonth) this.month = targetMonth;\n    this.focusedDay = day;\n    this.previewRange(day);\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLElement>(`[data-date-option=\"${day}\"]`)?.focus();\n    });\n  }\n\n  private handleDayKeyDown = (event: KeyboardEvent, day: string) => {\n    let offset: number | null = null;\n    if (event.key === 'ArrowLeft') offset = -1;\n    else if (event.key === 'ArrowRight') offset = 1;\n    else if (event.key === 'ArrowUp') offset = -7;\n    else if (event.key === 'ArrowDown') offset = 7;\n    else if (event.key === 'Home') {\n      offset = -new Date(`${day}T00:00:00Z`).getUTCDay();\n    } else if (event.key === 'End') {\n      offset = 6 - new Date(`${day}T00:00:00Z`).getUTCDay();\n    } else if (event.key === 'PageUp' || event.key === 'PageDown') {\n      const month = shiftCalendarMonth(calendarMonth(day), event.key === 'PageUp' ? -1 : 1);\n      const candidate = `${month}-${day.slice(8, 10)}`;\n      event.preventDefault();\n      this.focusDate(isIsoCalendarDate(candidate) ? candidate : `${month}-01`);\n      return;\n    }\n    if (offset === null) return;\n    event.preventDefault();\n    this.focusDate(shiftIsoCalendarDate(day, offset));\n  };\n\n  render() {\n    const liveRange = this.selectionMode === 'range' ? parseDateFilterValue(this.value) : null;\n    const liveRangeValue = liveRange?.kind === 'range' ? liveRange : null;\n    const rangeValue = calendarPaintedRange(this.pendingStart, this.heldRange, liveRangeValue);\n    const days = calendarDays(this.month);\n    const weeks = Array.from({ length: 6 }, (_, index) => days.slice(index * 7, index * 7 + 7));\n    const today = calendarToday();\n    const previewStart =\n      this.pendingStart && this.previewEnd ? [this.pendingStart, this.previewEnd].sort()[0] : null;\n    const previewFinish =\n      this.pendingStart && this.previewEnd ? [this.pendingStart, this.previewEnd].sort()[1] : null;\n    const selectedSingle =\n      this.selectionMode === 'single' && isIsoCalendarDate(this.value) ? this.value : '';\n    const enabledDays = days.filter(day => !this.isDisabled(day.value));\n    const focusDate =\n      [this.focusedDay, this.pendingStart, selectedSingle, rangeValue?.end, today].find(value =>\n        enabledDays.some(day => day.value === value)\n      ) ?? enabledDays[0]?.value;\n\n    return (\n      <Host>\n        <div class=\"calendar\">\n          <div class=\"calendar-heading ds-control--md\">\n            <ds-button-unfilled\n              class=\"calendar-nav calendar-nav--previous\"\n              variant=\"icon\"\n              icon=\"ChevronLeft\"\n              size=\"md\"\n              hasBorder={false}\n              isInactive={this.isInactive || !shiftCalendarMonth(this.month, -1)}\n              ariaLabel=\"Previous month\"\n              onDsClick={() => this.moveMonth(-1)}\n            />\n            <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"primary\">\n              {calendarMonthLabel(this.month)}\n            </ds-text>\n            <ds-button-unfilled\n              class=\"calendar-nav calendar-nav--next\"\n              variant=\"icon\"\n              icon=\"ChevronRight\"\n              size=\"md\"\n              hasBorder={false}\n              isInactive={this.isInactive || !shiftCalendarMonth(this.month, 1)}\n              ariaLabel=\"Next month\"\n              onDsClick={() => this.moveMonth(1)}\n            />\n          </div>\n          <div class=\"calendar-weekdays\" aria-hidden=\"true\">\n            {CALENDAR_WEEKDAYS.map(day => (\n              <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n                {day}\n              </ds-text>\n            ))}\n          </div>\n          <div\n            class=\"calendar-grid\"\n            role=\"grid\"\n            aria-label={calendarMonthLabel(this.month)}\n            onMouseLeave={this.clearPreview}\n          >\n            {weeks.map((week, weekIndex) => (\n              <div class=\"calendar-grid__row\" role=\"row\" key={`week-${weekIndex}`}>\n                {week.map(day => {\n                  const disabled = this.isDisabled(day.value);\n                  const selectedInRange = Boolean(\n                    liveRangeValue &&\n                    day.value >= liveRangeValue.start &&\n                    day.value <= liveRangeValue.end\n                  );\n                  const paintedInRange = Boolean(\n                    rangeValue && day.value >= rangeValue.start && day.value <= rangeValue.end\n                  );\n                  const pendingStartDay =\n                    this.selectionMode === 'range' &&\n                    Boolean(this.pendingStart) &&\n                    day.value === this.pendingStart;\n                  const previewInRange = Boolean(\n                    this.pendingStart &&\n                    previewStart &&\n                    previewFinish &&\n                    day.value >= previewStart &&\n                    day.value <= previewFinish &&\n                    day.value !== this.pendingStart\n                  );\n                  const inRange = this.selectionMode === 'range' && paintedInRange;\n                  const rangeEdge = Boolean(\n                    this.selectionMode === 'range' &&\n                    rangeValue &&\n                    (day.value === rangeValue.start || day.value === rangeValue.end)\n                  );\n                  const selected =\n                    this.selectionMode === 'single' &&\n                    Boolean(day.value) &&\n                    day.value === selectedSingle;\n                  const textColor = rangeEdge\n                    ? 'on-bold'\n                    : selected ||\n                        inRange ||\n                        pendingStartDay ||\n                        previewInRange ||\n                        day.value === today\n                      ? 'primary'\n                      : day.inMonth\n                        ? 'secondary'\n                        : 'tertiary';\n                  return (\n                    <button\n                      type=\"button\"\n                      role=\"gridcell\"\n                      data-date-option={day.value}\n                      class={{\n                        'calendar-day': true,\n                        'calendar-day--outside': !day.inMonth,\n                        'calendar-day--today': day.value === today,\n                        'calendar-day--in-range': inRange,\n                        'calendar-day--range-preview': previewInRange,\n                        'calendar-day--range-edge': rangeEdge,\n                        'calendar-day--selected': selected,\n                        'ds-focus-ring-inset': true,\n                        'ds-interaction-fill': true,\n                        'ds-interaction-fill--on-bold': rangeEdge,\n                        'ds-interaction-fill--surface-open': pendingStartDay && !disabled,\n                        'ds-interaction-fill--selected': selected && !disabled,\n                      }}\n                      disabled={disabled}\n                      aria-label={day.label}\n                      aria-selected={selectedInRange || selected ? 'true' : 'false'}\n                      tabIndex={day.value === focusDate ? 0 : -1}\n                      onMouseEnter={() => this.previewRange(day.value)}\n                      onFocus={() => {\n                        this.focusedDay = day.value;\n                        this.previewRange(day.value);\n                      }}\n                      onClick={() => this.selectDate(day.value)}\n                      onKeyDown={event => this.handleDayKeyDown(event, day.value)}\n                    >\n                      {/* eslint-disable compomo/no-selected-fill-emphasis-change -- Today emphasis is date-driven and remains unchanged when selection changes. */}\n                      <ds-text\n                        class=\"ds-interaction-fill__content\"\n                        as=\"span\"\n                        variant=\"text-body-medium\"\n                        color={textColor}\n                        emphasis={day.value === today}\n                      >\n                        {day.day}\n                      </ds-text>\n                      {/* eslint-enable compomo/no-selected-fill-emphasis-change */}\n                    </button>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Calendar/calendar-grid.ts",
-      "content": "import { isIsoCalendarDate, shiftIsoCalendarDate } from '../../utils';\n\nexport interface CalendarDateRange {\n  start: string;\n  end: string;\n}\n\nexport interface CalendarDay {\n  value: string;\n  day: number;\n  inMonth: boolean;\n  label: string;\n}\n\nexport const CALENDAR_WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\nconst MONTH_FORMATTER = new Intl.DateTimeFormat('en-US', {\n  month: 'long',\n  year: 'numeric',\n  timeZone: 'UTC',\n});\nconst DATE_FORMATTER = new Intl.DateTimeFormat('en-US', {\n  weekday: 'long',\n  month: 'long',\n  day: 'numeric',\n  year: 'numeric',\n  timeZone: 'UTC',\n});\n\nexport function calendarToday(): string {\n  const today = new Date();\n  const year = today.getFullYear();\n  const month = String(today.getMonth() + 1).padStart(2, '0');\n  const day = String(today.getDate()).padStart(2, '0');\n  return `${year}-${month}-${day}`;\n}\n\nexport function calendarMonth(value: string): string {\n  return isIsoCalendarDate(value) ? value.slice(0, 7) : calendarToday().slice(0, 7);\n}\n\nexport function shiftCalendarMonth(value: string, offset: number): string {\n  const [year, month] = value.split('-').map(Number);\n  const date = new Date(Date.UTC(year, month - 1 + offset, 1));\n  return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}`;\n}\n\nexport function calendarMonthLabel(value: string): string {\n  const [year, month] = value.split('-').map(Number);\n  return MONTH_FORMATTER.format(new Date(Date.UTC(year, month - 1, 1)));\n}\n\nexport function calendarDays(value: string): CalendarDay[] {\n  const [year, month] = value.split('-').map(Number);\n  const firstOfMonth = `${year}-${String(month).padStart(2, '0')}-01`;\n  const firstWeekday = new Date(`${firstOfMonth}T00:00:00Z`).getUTCDay();\n  const gridStart = shiftIsoCalendarDate(firstOfMonth, -firstWeekday);\n  return Array.from({ length: 42 }, (_, index) => {\n    const dateValue = shiftIsoCalendarDate(gridStart, index);\n    const date = new Date(`${dateValue}T00:00:00Z`);\n    return {\n      value: dateValue,\n      day: date.getUTCDate(),\n      inMonth: dateValue.startsWith(`${value}-`),\n      label: DATE_FORMATTER.format(date),\n    };\n  });\n}\n\n/** Keep the previous committed range visible while a replacement range is being chosen. */\nexport function calendarPaintedRange(\n  pendingStart: string,\n  heldRange: CalendarDateRange | null,\n  valueRange: CalendarDateRange | null\n): CalendarDateRange | null {\n  return pendingStart ? heldRange : valueRange;\n}\n",
+      "content": "import { isIsoCalendarDate } from '../../utils';\n\nexport interface CalendarDateRange {\n  start: string;\n  end: string;\n}\n\nexport interface CalendarDay {\n  value: string;\n  day: number;\n  inMonth: boolean;\n  label: string;\n}\n\nexport const CALENDAR_WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\nconst MONTH_FORMATTER = new Intl.DateTimeFormat('en-US', {\n  month: 'long',\n  year: 'numeric',\n  timeZone: 'UTC',\n});\nconst DATE_FORMATTER = new Intl.DateTimeFormat('en-US', {\n  weekday: 'long',\n  month: 'long',\n  day: 'numeric',\n  year: 'numeric',\n  timeZone: 'UTC',\n});\n\nexport function calendarToday(): string {\n  const today = new Date();\n  const year = String(today.getFullYear()).padStart(4, '0');\n  const month = String(today.getMonth() + 1).padStart(2, '0');\n  const day = String(today.getDate()).padStart(2, '0');\n  return `${year}-${month}-${day}`;\n}\n\nexport function calendarMonth(value: string): string {\n  return isIsoCalendarDate(value) ? value.slice(0, 7) : calendarToday().slice(0, 7);\n}\n\nexport function shiftCalendarMonth(value: string, offset: number): string {\n  if (!isIsoCalendarDate(`${value}-01`) || !Number.isSafeInteger(offset)) return '';\n  const date = new Date(`${value}-01T00:00:00Z`);\n  date.setUTCMonth(date.getUTCMonth() + offset);\n  const year = date.getUTCFullYear();\n  return year >= 1 && year <= 9999 ? date.toISOString().slice(0, 7) : '';\n}\n\nexport function calendarMonthLabel(value: string): string {\n  if (!isIsoCalendarDate(`${value}-01`)) return '';\n  return MONTH_FORMATTER.format(new Date(`${value}-01T00:00:00Z`));\n}\n\nexport function calendarDays(value: string): CalendarDay[] {\n  if (!isIsoCalendarDate(`${value}-01`)) return [];\n  const first = new Date(`${value}-01T00:00:00Z`);\n  const firstWeekday = first.getUTCDay();\n  return Array.from({ length: 42 }, (_, index) => {\n    const date = new Date(first);\n    date.setUTCDate(1 - firstWeekday + index);\n    const year = date.getUTCFullYear();\n    const dateValue = year >= 1 && year <= 9999 ? date.toISOString().slice(0, 10) : '';\n    return {\n      value: dateValue,\n      day: date.getUTCDate(),\n      inMonth: dateValue.startsWith(`${value}-`),\n      label: dateValue ? DATE_FORMATTER.format(date) : 'Unavailable date',\n    };\n  });\n}\n\n/** Keep the previous committed range visible while a replacement range is being chosen. */\nexport function calendarPaintedRange(\n  pendingStart: string,\n  heldRange: CalendarDateRange | null,\n  valueRange: CalendarDateRange | null\n): CalendarDateRange | null {\n  return pendingStart ? heldRange : valueRange;\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/card-overview.json

@@ -401,7 +401,7 @@
     },
     {
       "path": "src/wc/components/CardOverview/CardOverview.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\nimport type { TextColor, TextVariant } from '../Text/text-types';\nimport type { MetricTrend } from '../../utils/metric-change';\nimport type {\n  CardOverviewLayout,\n  CardOverviewVariant,\n  OverviewMetric,\n  OverviewScore,\n} from './card-overview-types';\nimport {\n  findNextOverviewMetricIndex,\n  resolveCardOverviewCollapseGeometry,\n  resolveOverviewGridColumns,\n  resolveOverviewRovingIndex,\n} from './card-overview-controller';\n\n/**\n * Metric cells below this width drop a grid column rather than compress further.\n *\n * A literal rather than a token: this is a layout threshold for a grid cell, and\n * the dimension scale has no token for that. The 200px tokens it could borrow\n * (`menu-width-xs`, `form-width-xs`, `panel-width-2xs`) all name other\n * components, so binding to one would couple this grid to an unrelated contract.\n * Consumers override with the `metricMinWidth` prop.\n */\nconst DEFAULT_METRIC_MIN_WIDTH = '200px';\n\n/** Skeleton cells rendered while loading with no metrics supplied yet. */\nconst DEFAULT_LOADING_METRIC_COUNT = 5;\n\n/** Maximum number of comparable measures the summary bar presents at once. */\nconst MAX_METRIC_COUNT = 7;\n\nconst TREND_COLORS: Record<MetricTrend['tone'], TextColor> = {\n  positive: 'var(--color-always-dark-foreground-positive)',\n  negative: 'var(--color-always-dark-foreground-negative)',\n  neutral: 'var(--color-always-dark-foreground-secondary)',\n};\n\nconst ALWAYS_DARK_PRIMARY: TextColor = 'var(--color-always-dark-foreground-primary)';\nconst ALWAYS_DARK_SECONDARY: TextColor = 'var(--color-always-dark-foreground-secondary)';\n\n@Component({\n  tag: 'ds-card-overview',\n  styleUrl: 'CardOverview.css',\n  scoped: true,\n})\nexport class CardOverview {\n  @Element() el!: HTMLElement;\n\n  /** Full summary card, or the condensed 48px summary bar. */\n  @Prop() variant: CardOverviewVariant = 'default';\n\n  /** Intrinsic responsive layout, or a page-owned single-column stack. */\n  @Prop() layout: CardOverviewLayout = 'auto';\n\n  /** Optional nonselectable safety score rendered as the first grid cell. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Fixed current date or range. Replaced by content in the `period` slot. */\n  @Prop() periodLabel: string = '';\n\n  /** Copy between the current period and comparison control, usually `vs.`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. Only the first seven are shown. */\n  @Prop() metrics: OverviewMetric[] = [];\n\n  /**\n   * Width a metric cell may shrink to before the grid drops a column. The grid\n   * uses this threshold while choosing an evenly distributed column count.\n   */\n  @Prop() metricMinWidth: string = DEFAULT_METRIC_MIN_WIDTH;\n\n  /** Replace the score and metrics with skeletons while data resolves. */\n  @Prop() isLoading: boolean = false;\n\n  /** Message shown in place of the score when its figure cannot be resolved. */\n  @Prop() scoreErrorMessage: string | undefined;\n\n  /** Accessible name for the region. */\n  @Prop() overviewLabel: string = 'Overview';\n\n  /**\n   * Page-controlled visual collapse from the full card (`0`) toward its 48px\n   * compact handoff height (`1`). The component preserves its expanded flow\n   * height, keeps the period bar stationary, and moves/clips the grid beneath\n   * it. The page still owns sticky positioning and the final compact handoff.\n   */\n  @Prop() scrollCollapseProgress: number = 0;\n\n  /** Emitted when a metric that is not inactive is activated. */\n  @Event() dsMetricSelect!: EventEmitter<OverviewMetric>;\n\n  /** Roving tab stop across selectable metrics. */\n  @State() private focusedMetricIndex: number = 0;\n  @State() private expandedHeight: number = 0;\n  @State() private gridColumns: number | undefined;\n\n  private layoutEl?: HTMLElement;\n  private layoutResizeObserver: ResizeObserver | null = null;\n  private layoutResizeFrame: number | undefined;\n  /** The node the observer is bound to, which a later render can replace. */\n  private observedLayoutEl?: HTMLElement;\n\n  componentDidLoad() {\n    this.observeLayout();\n  }\n\n  componentDidRender() {\n    // Re-bind after HMR when DidLoad's observer was dropped, and whenever a\n    // render swapped the layout node out from under the observer: the ref points\n    // at the new node while the observer still watches the detached one, which\n    // never resizes again. The grid would then keep its first measured column\n    // count for the life of the component.\n    if (!this.layoutResizeObserver || this.observedLayoutEl !== this.layoutEl) {\n      this.observeLayout();\n    } else {\n      this.updateLayoutGeometry();\n    }\n  }\n\n  disconnectedCallback() {\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n    if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n    this.layoutResizeFrame = undefined;\n    this.observedLayoutEl = undefined;\n  }\n\n  private get visibleMetrics(): OverviewMetric[] {\n    return this.metrics.slice(0, MAX_METRIC_COUNT);\n  }\n\n  private get visibleCellCount(): number {\n    const metricCount = this.isLoading ? this.loadingMetricCount : this.visibleMetrics.length;\n    return 1 + metricCount;\n  }\n\n  /** Preserve an authored data shape while loading, or use the standard six-cell grid. */\n  private get loadingMetricCount(): number {\n    return this.visibleMetrics.length || DEFAULT_LOADING_METRIC_COUNT;\n  }\n\n  private get resolvedScrollCollapseProgress(): number {\n    if (this.variant === 'compact' || !Number.isFinite(this.scrollCollapseProgress)) return 0;\n    return Math.min(1, Math.max(0, this.scrollCollapseProgress));\n  }\n\n  private get scrollCollapseGeometry() {\n    const compactHeight = resolveCssLengthPx(TOKEN_DEFAULTS.size600, 48);\n    return resolveCardOverviewCollapseGeometry({\n      variant: this.variant,\n      progress: this.resolvedScrollCollapseProgress,\n      expandedHeight: this.expandedHeight,\n      compactHeight,\n    });\n  }\n\n  private observeLayout() {\n    const layout = this.layoutEl;\n    if (!layout) return;\n\n    const bounds = layout.getBoundingClientRect();\n    this.updateLayoutGeometry(bounds.width, bounds.height);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = new ResizeObserver(entries => {\n      const rect = entries[0]?.contentRect;\n      if (!rect) return;\n      if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n      this.layoutResizeFrame = requestAnimationFrame(() => {\n        this.layoutResizeFrame = undefined;\n        this.updateLayoutGeometry(rect.width, rect.height);\n      });\n    });\n    this.layoutResizeObserver.observe(layout);\n    this.observedLayoutEl = layout;\n  }\n\n  private updateLayoutGeometry(width?: number, height?: number) {\n    const layout = this.layoutEl;\n    if (!layout) return;\n\n    const bounds =\n      width === undefined || height === undefined ? layout.getBoundingClientRect() : null;\n    const resolvedWidth = width ?? bounds?.width ?? 0;\n    const resolvedHeight = height ?? bounds?.height ?? 0;\n\n    let changed = false;\n\n    if (resolvedHeight > 0 && Math.abs(resolvedHeight - this.expandedHeight) >= 0.5) {\n      this.expandedHeight = resolvedHeight;\n      changed = true;\n    }\n\n    const columns = resolveOverviewGridColumns({\n      cellCount: this.visibleCellCount,\n      availableWidth: resolvedWidth,\n      minCellWidth: resolveCssLengthPx(this.metricMinWidth, DEFAULT_METRIC_MIN_WIDTH),\n    });\n    if (columns !== this.gridColumns) {\n      this.gridColumns = columns;\n      changed = true;\n    }\n\n    // The column count is written straight to the host rather than through the\n    // rendered style object. Measurement happens in `componentDidLoad` and in the\n    // ResizeObserver callback, both outside a render cycle, and the host's style\n    // is not patched again after the first render — so a rendered value would stay\n    // pinned to whatever the first paint produced, before any width was known.\n    if (this.gridColumns) {\n      this.el.style.setProperty('--ds-card-overview-grid-columns', String(this.gridColumns));\n    } else {\n      this.el.style.removeProperty('--ds-card-overview-grid-columns');\n    }\n\n    if (changed) forceUpdate(this);\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    return resolveOverviewRovingIndex(this.visibleMetrics, this.focusedMetricIndex);\n  }\n\n  private selectMetric(metric: OverviewMetric, index: number) {\n    if (metric.isInactive) return;\n    this.focusedMetricIndex = index;\n    this.dsMetricSelect.emit(metric);\n  }\n\n  /** Move the roving tab stop, wrapping and skipping inactive metrics. */\n  private moveFocus(from: number, step: number) {\n    const metrics = this.visibleMetrics;\n    const next = findNextOverviewMetricIndex(metrics, from, step < 0 ? -1 : 1);\n    if (next < 0) return;\n\n    this.focusedMetricIndex = next;\n    const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric-action');\n    cells[next]?.focus();\n  }\n\n  private handleMetricKeyDown = (event: KeyboardEvent, index: number) => {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(index, 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(index, -1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /**\n   * A skeleton bar matching the type metrics of the text it stands in for, so the\n   * loading state holds the same shape and rhythm as the resolved content.\n   *\n   * `background` is always passed so the base and shimmer follow the card's\n   * permanently dark surface in both themes.\n   */\n  private bar(textVariant: TextVariant, width: string, className?: string) {\n    return (\n      <ds-skeleton\n        class={className}\n        variant=\"text\"\n        textVariant={textVariant}\n        width={width}\n        background=\"always-dark\"\n      />\n    );\n  }\n\n  /**\n   * Arrow and change in one text node.\n   *\n   * The arrow is a typeface glyph rather than an icon so it inherits the exact\n   * size, weight, and baseline of the value beside it; an icon would need its\n   * own size scale and would drift whenever the type scale changed.\n   *\n   * Tone is supplied by the caller and never inferred here.\n   */\n  private renderTrend(trend: MetricTrend | undefined, variant: TextVariant) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          'ds-control-label-box': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        color={TREND_COLORS[trend.tone]}\n        fontFeature=\"tabular-nums\"\n      >\n        {trend.direction === 'up' ? '↑' : '↓'} {trend.value}\n      </ds-text>\n    );\n  }\n\n  private renderScore() {\n    if (this.isLoading) {\n      return (\n        <div class=\"card-overview__score\" part=\"score\">\n          <div class=\"card-overview__score-content\">\n            <ds-score size=\"lg\" variant=\"dense\" isLoading></ds-score>\n            <div class=\"card-overview__score-copy\">\n              {this.bar('text-body-small', '64px', 'card-overview__score-label-spacer')}\n              {this.bar('text-body-medium', '28px')}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    const unavailableMessage =\n      this.scoreErrorMessage || (!this.score ? 'Score unavailable' : undefined);\n    if (unavailableMessage) {\n      return (\n        /* eslint-disable-next-line compomo/prefer-direct-ds-text -- The score track owns the grid divider and 8px outer inset. */\n        <div class=\"card-overview__score\" part=\"score\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-content card-overview__score-content--error\"\n            variant=\"text-body-medium\"\n            color=\"inherit\"\n            role=\"alert\"\n          >\n            {unavailableMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n\n    return (\n      <div class=\"card-overview__score\" part=\"score\">\n        <div class=\"card-overview__score-content\">\n          <ds-score\n            size=\"lg\"\n            variant=\"dense\"\n            value={score.value}\n            level={score.level}\n            label=\"Safety score\"\n          />\n          <div class=\"card-overview__score-copy\">\n            <ds-text\n              as=\"span\"\n              class=\"card-overview__score-label-spacer ds-control-label-box\"\n              variant=\"text-body-small\"\n              color={ALWAYS_DARK_SECONDARY}\n              aria-hidden=\"true\"\n            >\n              &nbsp;\n            </ds-text>\n            {this.renderTrend(score.trend, 'text-body-medium')}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetric(metric: OverviewMetric, index: number) {\n    const selectable = !metric.isInactive;\n    const label = (\n      <ds-text\n        as=\"span\"\n        class=\"card-overview__metric-label ds-control-label-box\"\n        variant=\"text-body-small\"\n        color={ALWAYS_DARK_SECONDARY}\n      >\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div class=\"card-overview__metric\" part=\"metric\">\n        <div\n          class={{\n            'card-overview__metric-action': true,\n            'card-overview__metric-action--inactive': !selectable,\n            // Selection targets get the shared wash; press scaling is not used here\n            // so the grid keeps its columns aligned. See docs/control-press-policy.md.\n            'ds-interaction-fill': selectable,\n            'ds-interaction-fill--on-always-dark': selectable,\n            'ds-focus-ring-inset': selectable,\n          }}\n          role={selectable ? 'button' : undefined}\n          tabIndex={selectable && index === this.rovingIndex ? 0 : -1}\n          onClick={() => this.selectMetric(metric, index)}\n          onKeyDown={event => this.handleMetricKeyDown(event, index)}\n          onFocusin={() => {\n            if (selectable) this.focusedMetricIndex = index;\n          }}\n        >\n          <div class=\"ds-interaction-fill__content card-overview__metric-content\">\n            {metric.labelTooltip ? (\n              <ds-tooltip label={metric.labelTooltip} side=\"top\" size=\"sm\">\n                {label}\n              </ds-tooltip>\n            ) : (\n              label\n            )}\n            <div class=\"card-overview__metric-figure\">\n              <ds-text\n                as=\"span\"\n                class=\"card-overview__metric-value ds-control-label-box\"\n                variant=\"text-body-medium\"\n                color={ALWAYS_DARK_PRIMARY}\n                fontFeature=\"tabular-nums\"\n              >\n                {metric.value}\n              </ds-text>\n              {this.renderTrend(metric.trend, 'text-body-medium')}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading) {\n      return [\n        this.renderScore(),\n        ...Array.from({ length: this.loadingMetricCount }, (_, index) => (\n          <div class=\"card-overview__metric\" key={`loading-${index}`}>\n            <div class=\"card-overview__metric-action card-overview__metric-action--inactive\">\n              <div class=\"card-overview__metric-content\">\n                {this.bar('text-body-small', '35%', 'card-overview__metric-label')}\n                <div class=\"card-overview__metric-figure\">\n                  {this.bar('text-body-medium', '40px')}\n                  {/* Match renderTrend's type canvas and the score trend's 28px width. */}\n                  {this.bar('text-body-medium', '28px')}\n                </div>\n              </div>\n            </div>\n          </div>\n        )),\n      ];\n    }\n\n    return [\n      this.renderScore(),\n      ...this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index)),\n    ];\n  }\n\n  render() {\n    const compact = this.variant === 'compact';\n    const collapse = this.scrollCollapseGeometry;\n\n    // Omit absent custom properties rather than handing them an undefined value.\n    // Stencil serialises undefined to the string \"undefined\", which is invalid in\n    // `repeat()` and voids the whole grid-template-columns declaration — the grid\n    // then collapses to one implicit column instead of using the `auto-fit`\n    // fallback baked into the stylesheet.\n    const customProperties: Record<string, string> = {\n      '--ds-card-overview-metric-min': this.metricMinWidth,\n    };\n    if (this.gridColumns) {\n      customProperties['--ds-card-overview-grid-columns'] = String(this.gridColumns);\n    }\n    if (collapse.active) {\n      customProperties['--ds-card-overview-expanded-height'] = `${collapse.expandedHeight}px`;\n      customProperties['--ds-card-overview-visible-height'] = `${collapse.visibleHeight}px`;\n      customProperties['--ds-card-overview-content-offset'] = `${collapse.offset}px`;\n    }\n\n    return (\n      <Host\n        class={{\n          'card-overview': true,\n          'card-overview--compact': compact,\n          'card-overview--stacked': !compact && this.layout === 'stacked',\n          'card-overview--scroll-collapsing': collapse.active,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={customProperties}\n      >\n        <div\n          class={{\n            'card-overview__surface': true,\n            // Split shadow and inset highlight, so the opaque surface cannot cover\n            // the highlight the way a combined elevation shadow would.\n            'ds-control-elevation': true,\n            'ds-control-elevation--sm': !compact,\n            'ds-control-elevation--floating': compact,\n          }}\n        >\n          <div class=\"card-overview__clip\">\n            <div\n              ref={element => {\n                this.layoutEl = (element as HTMLElement) ?? undefined;\n              }}\n              class={{\n                'card-overview__layout': true,\n              }}\n            >\n              <div class=\"card-overview__summary\">\n                <div class=\"card-overview__header ds-control--md\">\n                  <div class=\"card-overview__period\">\n                    <div class=\"card-overview__period-current\">\n                      <slot name=\"period\">\n                        {this.periodLabel && (\n                          /* eslint-disable-next-line compomo/prefer-direct-ds-text -- Fixed copy uses the same structural frame and label inset as a slotted Select. */\n                          <div class=\"card-overview__period-fixed ds-control-frame\">\n                            <ds-text\n                              as=\"span\"\n                              class=\"ds-control-label-box\"\n                              variant=\"text-body-medium\"\n                              emphasis\n                              color={ALWAYS_DARK_PRIMARY}\n                            >\n                              {this.periodLabel}\n                            </ds-text>\n                          </div>\n                        )}\n                      </slot>\n                    </div>\n                    {this.comparisonLabel && (\n                      <ds-text\n                        as=\"span\"\n                        class=\"card-overview__period-comparison ds-control-label-box\"\n                        variant=\"text-body-medium\"\n                        color={ALWAYS_DARK_SECONDARY}\n                      >\n                        {this.comparisonLabel}\n                      </ds-text>\n                    )}\n                  </div>\n                  <div class=\"card-overview__filter\">\n                    <slot name=\"filter\" />\n                  </div>\n                </div>\n              </div>\n\n              {!compact && (\n                <div class=\"card-overview__body\">\n                  <div class=\"card-overview__metrics\" part=\"metrics\">\n                    {this.renderMetrics()}\n                  </div>\n\n                  <slot name=\"footer\" />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport type { TextColor, TextVariant } from '../Text/text-types';\nimport type { MetricTrend } from '../../utils/metric-change';\nimport type {\n  CardOverviewLayout,\n  CardOverviewVariant,\n  OverviewMetric,\n  OverviewScore,\n} from './card-overview-types';\nimport {\n  findNextOverviewMetricIndex,\n  resolveCardOverviewCollapseGeometry,\n  resolveOverviewGridColumns,\n  resolveOverviewRovingIndex,\n} from './card-overview-controller';\n\n/**\n * Metric cells below this width drop a grid column rather than compress further.\n *\n * A literal rather than a token: this is a layout threshold for a grid cell, and\n * the dimension scale has no token for that. The 200px tokens it could borrow\n * (`menu-width-xs`, `form-width-xs`, `panel-width-2xs`) all name other\n * components, so binding to one would couple this grid to an unrelated contract.\n * Consumers override with the `metricMinWidth` prop.\n */\nconst DEFAULT_METRIC_MIN_WIDTH = '200px';\n\n/** Skeleton cells rendered while loading with no metrics supplied yet. */\nconst DEFAULT_LOADING_METRIC_COUNT = 5;\n\n/** Maximum number of comparable measures the summary bar presents at once. */\nconst MAX_METRIC_COUNT = 7;\n\nconst TREND_COLORS: Record<MetricTrend['tone'], TextColor> = {\n  positive: 'var(--color-always-dark-foreground-positive)',\n  negative: 'var(--color-always-dark-foreground-negative)',\n  neutral: 'var(--color-always-dark-foreground-secondary)',\n};\n\nconst ALWAYS_DARK_PRIMARY: TextColor = 'var(--color-always-dark-foreground-primary)';\nconst ALWAYS_DARK_SECONDARY: TextColor = 'var(--color-always-dark-foreground-secondary)';\n\n@Component({\n  tag: 'ds-card-overview',\n  styleUrl: 'CardOverview.css',\n  scoped: true,\n})\nexport class CardOverview {\n  @Element() el!: HTMLElement;\n\n  /** Full summary card, or the condensed 48px summary bar. */\n  @Prop() variant: CardOverviewVariant = 'default';\n\n  /** Intrinsic responsive layout, or a page-owned single-column stack. */\n  @Prop() layout: CardOverviewLayout = 'auto';\n\n  /** Optional nonselectable safety score rendered as the first grid cell. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Fixed current date or range. Replaced by content in the `period` slot. */\n  @Prop() periodLabel: string = '';\n\n  /** Copy between the current period and comparison control, usually `vs.`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. Only the first seven are shown. */\n  @Prop() metrics: OverviewMetric[] = [];\n\n  /**\n   * Width a metric cell may shrink to before the grid drops a column. The grid\n   * uses this threshold while choosing an evenly distributed column count.\n   */\n  @Prop() metricMinWidth: string = DEFAULT_METRIC_MIN_WIDTH;\n\n  /** Replace the score and metrics with skeletons while data resolves. */\n  @Prop() isLoading: boolean = false;\n\n  /** Message shown in place of the score when its figure cannot be resolved. */\n  @Prop() scoreErrorMessage: string | undefined;\n\n  /** Accessible name for the region. */\n  @Prop() overviewLabel: string = 'Overview';\n\n  /**\n   * Page-controlled visual collapse from the full card (`0`) toward its 48px\n   * compact handoff height (`1`). The component preserves its expanded flow\n   * height, keeps the period bar stationary, and moves/clips the grid beneath\n   * it. The page still owns sticky positioning and the final compact handoff.\n   */\n  @Prop() scrollCollapseProgress: number = 0;\n\n  /** Emitted when a metric that is not inactive is activated. */\n  @Event() dsMetricSelect!: EventEmitter<OverviewMetric>;\n\n  /** Roving tab stop across selectable metrics. */\n  @State() private focusedMetricIndex: number = 0;\n  @State() private expandedHeight: number = 0;\n  @State() private gridColumns: number | undefined;\n\n  private layoutEl?: HTMLElement;\n  private layoutResizeObserver: ResizeObserver | null = null;\n  private layoutResizeFrame: number | undefined;\n  private hasLoaded = false;\n  private readonly connectionTasks = new ConnectionTasks(() => this.el.isConnected);\n  /** The node the observer is bound to, which a later render can replace. */\n  private observedLayoutEl?: HTMLElement;\n\n  connectedCallback() {\n    if (this.hasLoaded) this.observeLayout();\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.observeLayout();\n  }\n\n  componentDidRender() {\n    if (!this.el.isConnected) return;\n    // Re-bind after HMR when DidLoad's observer was dropped, and whenever a\n    // render swapped the layout node out from under the observer: the ref points\n    // at the new node while the observer still watches the detached one, which\n    // never resizes again. The grid would then keep its first measured column\n    // count for the life of the component.\n    if (!this.layoutResizeObserver || this.observedLayoutEl !== this.layoutEl) {\n      this.observeLayout();\n    } else {\n      this.updateLayoutGeometry();\n    }\n  }\n\n  disconnectedCallback() {\n    this.connectionTasks.cancel();\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n    this.layoutResizeFrame = undefined;\n    this.observedLayoutEl = undefined;\n  }\n\n  private get visibleMetrics(): OverviewMetric[] {\n    return this.metrics.slice(0, MAX_METRIC_COUNT);\n  }\n\n  private get visibleCellCount(): number {\n    const metricCount = this.isLoading ? this.loadingMetricCount : this.visibleMetrics.length;\n    return 1 + metricCount;\n  }\n\n  /** Preserve an authored data shape while loading, or use the standard six-cell grid. */\n  private get loadingMetricCount(): number {\n    return this.visibleMetrics.length || DEFAULT_LOADING_METRIC_COUNT;\n  }\n\n  private get resolvedScrollCollapseProgress(): number {\n    if (this.variant === 'compact' || !Number.isFinite(this.scrollCollapseProgress)) return 0;\n    return Math.min(1, Math.max(0, this.scrollCollapseProgress));\n  }\n\n  private get scrollCollapseGeometry() {\n    const compactHeight = resolveCssLengthPx(TOKEN_DEFAULTS.size600, 48);\n    return resolveCardOverviewCollapseGeometry({\n      variant: this.variant,\n      progress: this.resolvedScrollCollapseProgress,\n      expandedHeight: this.expandedHeight,\n      compactHeight,\n    });\n  }\n\n  private observeLayout() {\n    const layout = this.layoutEl;\n    if (!this.el.isConnected || !layout) return;\n\n    this.connectionTasks.cancelFrame(this.layoutResizeFrame);\n    this.layoutResizeFrame = undefined;\n\n    const bounds = layout.getBoundingClientRect();\n    this.updateLayoutGeometry(bounds.width, bounds.height);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = new ResizeObserver(entries => {\n      const rect = entries[0]?.contentRect;\n      if (!rect) return;\n      this.connectionTasks.cancelFrame(this.layoutResizeFrame);\n      this.layoutResizeFrame = this.connectionTasks.frame(() => {\n        this.layoutResizeFrame = undefined;\n        if (this.layoutEl !== layout) return;\n        this.updateLayoutGeometry(rect.width, rect.height);\n      });\n    });\n    this.layoutResizeObserver.observe(layout);\n    this.observedLayoutEl = layout;\n  }\n\n  private updateLayoutGeometry(width?: number, height?: number) {\n    const layout = this.layoutEl;\n    if (!this.el.isConnected || !layout) return;\n\n    const bounds =\n      width === undefined || height === undefined ? layout.getBoundingClientRect() : null;\n    const resolvedWidth = width ?? bounds?.width ?? 0;\n    const resolvedHeight = height ?? bounds?.height ?? 0;\n\n    let changed = false;\n\n    if (resolvedHeight > 0 && Math.abs(resolvedHeight - this.expandedHeight) >= 0.5) {\n      this.expandedHeight = resolvedHeight;\n      changed = true;\n    }\n\n    const columns = resolveOverviewGridColumns({\n      cellCount: this.visibleCellCount,\n      availableWidth: resolvedWidth,\n      minCellWidth: resolveCssLengthPx(this.metricMinWidth, DEFAULT_METRIC_MIN_WIDTH),\n    });\n    if (columns !== this.gridColumns) {\n      this.gridColumns = columns;\n      changed = true;\n    }\n\n    // The column count is written straight to the host rather than through the\n    // rendered style object. Measurement happens in `componentDidLoad` and in the\n    // ResizeObserver callback, both outside a render cycle, and the host's style\n    // is not patched again after the first render — so a rendered value would stay\n    // pinned to whatever the first paint produced, before any width was known.\n    if (this.gridColumns) {\n      this.el.style.setProperty('--ds-card-overview-grid-columns', String(this.gridColumns));\n    } else {\n      this.el.style.removeProperty('--ds-card-overview-grid-columns');\n    }\n\n    if (changed) forceUpdate(this);\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    return resolveOverviewRovingIndex(this.visibleMetrics, this.focusedMetricIndex);\n  }\n\n  private selectMetric(metric: OverviewMetric, index: number) {\n    if (metric.isInactive) return;\n    this.focusedMetricIndex = index;\n    this.dsMetricSelect.emit(metric);\n  }\n\n  /** Move the roving tab stop, wrapping and skipping inactive metrics. */\n  private moveFocus(from: number, step: number) {\n    const metrics = this.visibleMetrics;\n    const next = findNextOverviewMetricIndex(metrics, from, step < 0 ? -1 : 1);\n    if (next < 0) return;\n\n    this.focusedMetricIndex = next;\n    const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric-action');\n    cells[next]?.focus();\n  }\n\n  private handleMetricKeyDown = (event: KeyboardEvent, index: number) => {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(index, 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(index, -1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /**\n   * A skeleton bar matching the type metrics of the text it stands in for, so the\n   * loading state holds the same shape and rhythm as the resolved content.\n   *\n   * `background` is always passed so the base and shimmer follow the card's\n   * permanently dark surface in both themes.\n   */\n  private bar(textVariant: TextVariant, width: string, className?: string) {\n    return (\n      <ds-skeleton\n        class={className}\n        variant=\"text\"\n        textVariant={textVariant}\n        width={width}\n        background=\"always-dark\"\n      />\n    );\n  }\n\n  /**\n   * Arrow and change in one text node.\n   *\n   * The arrow is a typeface glyph rather than an icon so it inherits the exact\n   * size, weight, and baseline of the value beside it; an icon would need its\n   * own size scale and would drift whenever the type scale changed.\n   *\n   * Tone is supplied by the caller and never inferred here.\n   */\n  private renderTrend(trend: MetricTrend | undefined, variant: TextVariant) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          'ds-control-label-box': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        color={TREND_COLORS[trend.tone]}\n        fontFeature=\"tabular-nums\"\n      >\n        {trend.direction === 'up' ? '↑' : '↓'} {trend.value}\n      </ds-text>\n    );\n  }\n\n  private renderScore() {\n    if (this.isLoading) {\n      return (\n        <div class=\"card-overview__score\" part=\"score\">\n          <div class=\"card-overview__score-content\">\n            <ds-score size=\"lg\" variant=\"dense\" isLoading></ds-score>\n            <div class=\"card-overview__score-copy\">\n              {this.bar('text-body-small', '64px', 'card-overview__score-label-spacer')}\n              {this.bar('text-body-medium', '28px')}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    const unavailableMessage =\n      this.scoreErrorMessage || (!this.score ? 'Score unavailable' : undefined);\n    if (unavailableMessage) {\n      return (\n        /* eslint-disable-next-line compomo/prefer-direct-ds-text -- The score track owns the grid divider and 8px outer inset. */\n        <div class=\"card-overview__score\" part=\"score\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-content card-overview__score-content--error\"\n            variant=\"text-body-medium\"\n            color=\"inherit\"\n            role=\"alert\"\n          >\n            {unavailableMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n\n    return (\n      <div class=\"card-overview__score\" part=\"score\">\n        <div class=\"card-overview__score-content\">\n          <ds-score\n            size=\"lg\"\n            variant=\"dense\"\n            value={score.value}\n            level={score.level}\n            label=\"Safety score\"\n          />\n          <div class=\"card-overview__score-copy\">\n            <ds-text\n              as=\"span\"\n              class=\"card-overview__score-label-spacer ds-control-label-box\"\n              variant=\"text-body-small\"\n              color={ALWAYS_DARK_SECONDARY}\n              aria-hidden=\"true\"\n            >\n              &nbsp;\n            </ds-text>\n            {this.renderTrend(score.trend, 'text-body-medium')}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetric(metric: OverviewMetric, index: number) {\n    const selectable = !metric.isInactive;\n    const label = (\n      <ds-text\n        as=\"span\"\n        class=\"card-overview__metric-label ds-control-label-box\"\n        variant=\"text-body-small\"\n        color={ALWAYS_DARK_SECONDARY}\n      >\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div class=\"card-overview__metric\" part=\"metric\">\n        <div\n          class={{\n            'card-overview__metric-action': true,\n            'card-overview__metric-action--inactive': !selectable,\n            // Selection targets get the shared wash; press scaling is not used here\n            // so the grid keeps its columns aligned. See docs/control-press-policy.md.\n            'ds-interaction-fill': selectable,\n            'ds-interaction-fill--on-always-dark': selectable,\n            'ds-focus-ring-inset': selectable,\n          }}\n          role={selectable ? 'button' : undefined}\n          tabIndex={selectable && index === this.rovingIndex ? 0 : -1}\n          onClick={() => this.selectMetric(metric, index)}\n          onKeyDown={event => this.handleMetricKeyDown(event, index)}\n          onFocusin={() => {\n            if (selectable) this.focusedMetricIndex = index;\n          }}\n        >\n          <div class=\"ds-interaction-fill__content card-overview__metric-content\">\n            {metric.labelTooltip ? (\n              <ds-tooltip label={metric.labelTooltip} side=\"top\" size=\"sm\">\n                {label}\n              </ds-tooltip>\n            ) : (\n              label\n            )}\n            <div class=\"card-overview__metric-figure\">\n              <ds-text\n                as=\"span\"\n                class=\"card-overview__metric-value ds-control-label-box\"\n                variant=\"text-body-medium\"\n                color={ALWAYS_DARK_PRIMARY}\n                fontFeature=\"tabular-nums\"\n              >\n                {metric.value}\n              </ds-text>\n              {this.renderTrend(metric.trend, 'text-body-medium')}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading) {\n      return [\n        this.renderScore(),\n        ...Array.from({ length: this.loadingMetricCount }, (_, index) => (\n          <div class=\"card-overview__metric\" key={`loading-${index}`}>\n            <div class=\"card-overview__metric-action card-overview__metric-action--inactive\">\n              <div class=\"card-overview__metric-content\">\n                {this.bar('text-body-small', '35%', 'card-overview__metric-label')}\n                <div class=\"card-overview__metric-figure\">\n                  {this.bar('text-body-medium', '40px')}\n                  {/* Match renderTrend's type canvas and the score trend's 28px width. */}\n                  {this.bar('text-body-medium', '28px')}\n                </div>\n              </div>\n            </div>\n          </div>\n        )),\n      ];\n    }\n\n    return [\n      this.renderScore(),\n      ...this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index)),\n    ];\n  }\n\n  render() {\n    const compact = this.variant === 'compact';\n    const collapse = this.scrollCollapseGeometry;\n\n    // Omit absent custom properties rather than handing them an undefined value.\n    // Stencil serialises undefined to the string \"undefined\", which is invalid in\n    // `repeat()` and voids the whole grid-template-columns declaration — the grid\n    // then collapses to one implicit column instead of using the `auto-fit`\n    // fallback baked into the stylesheet.\n    const customProperties: Record<string, string> = {\n      '--ds-card-overview-metric-min': this.metricMinWidth,\n    };\n    if (this.gridColumns) {\n      customProperties['--ds-card-overview-grid-columns'] = String(this.gridColumns);\n    }\n    if (collapse.active) {\n      customProperties['--ds-card-overview-expanded-height'] = `${collapse.expandedHeight}px`;\n      customProperties['--ds-card-overview-visible-height'] = `${collapse.visibleHeight}px`;\n      customProperties['--ds-card-overview-content-offset'] = `${collapse.offset}px`;\n    }\n\n    return (\n      <Host\n        class={{\n          'card-overview': true,\n          'card-overview--compact': compact,\n          'card-overview--stacked': !compact && this.layout === 'stacked',\n          'card-overview--scroll-collapsing': collapse.active,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={customProperties}\n      >\n        <div\n          class={{\n            'card-overview__surface': true,\n            // Split shadow and inset highlight, so the opaque surface cannot cover\n            // the highlight the way a combined elevation shadow would.\n            'ds-control-elevation': true,\n            'ds-control-elevation--sm': !compact,\n            'ds-control-elevation--floating': compact,\n          }}\n        >\n          <div class=\"card-overview__clip\">\n            <div\n              ref={element => {\n                this.layoutEl = (element as HTMLElement) ?? undefined;\n              }}\n              class={{\n                'card-overview__layout': true,\n              }}\n            >\n              <div class=\"card-overview__summary\">\n                <div class=\"card-overview__header ds-control--md\">\n                  <div class=\"card-overview__period\">\n                    <div class=\"card-overview__period-current\">\n                      <slot name=\"period\">\n                        {this.periodLabel && (\n                          /* eslint-disable-next-line compomo/prefer-direct-ds-text -- Fixed copy uses the same structural frame and label inset as a slotted Select. */\n                          <div class=\"card-overview__period-fixed ds-control-frame\">\n                            <ds-text\n                              as=\"span\"\n                              class=\"ds-control-label-box\"\n                              variant=\"text-body-medium\"\n                              emphasis\n                              color={ALWAYS_DARK_PRIMARY}\n                            >\n                              {this.periodLabel}\n                            </ds-text>\n                          </div>\n                        )}\n                      </slot>\n                    </div>\n                    {this.comparisonLabel && (\n                      <ds-text\n                        as=\"span\"\n                        class=\"card-overview__period-comparison ds-control-label-box\"\n                        variant=\"text-body-medium\"\n                        color={ALWAYS_DARK_SECONDARY}\n                      >\n                        {this.comparisonLabel}\n                      </ds-text>\n                    )}\n                  </div>\n                  <div class=\"card-overview__filter\">\n                    <slot name=\"filter\" />\n                  </div>\n                </div>\n              </div>\n\n              {!compact && (\n                <div class=\"card-overview__body\">\n                  <div class=\"card-overview__metrics\" part=\"metrics\">\n                    {this.renderMetrics()}\n                  </div>\n\n                  <slot name=\"footer\" />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {