@ds-mo/ui 11.1.0 → 12.1.0

package/dist/lib/shell/chrome-transition.d.ts

@@ -1,4 +1,4 @@
-/** Bubbling/composed events — `ds-app-shell` and `ds-bar-nav` coordinate during width motion. */
+/** Bubbling/composed events — `ds-shell-app` and `ds-bar-nav` coordinate during width motion. */
 export declare const CHROME_TRANSITION_START = "dsChromeTransitionStart";
 export declare const CHROME_TRANSITION_END = "dsChromeTransitionEnd";
 export type ChromeTransitionSource = 'panel-nav' | 'panel-tools';

package/dist/lib/shell/index.js

@@ -364,7 +364,7 @@ function barGradientPositionFromPanelWidth(panelWidthPx) {
 // src/wc/shell/badge-gradient-ring.ts
 var BADGE_GRADIENT_POSITION_VAR = "--_badge-gradient-position";
 function isShellGradientActive(from) {
-  const shell = from.closest("ds-app-shell");
+  const shell = from.closest("ds-shell-app");
   return shell !== null && shell.getAttribute("gradient-preset") !== "none";
 }
 function findGradientSurface(from) {

package/dist/lib/shell/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/wc/shell/nav-chrome.ts", "../../../src/wc/utils/resolve-css-time-ms.ts", "../../../src/wc/shell/shell-view-transition.ts", "../../../src/wc/shell/shell-gradient-presets.ts", "../../../src/wc/shell/shell-gradient.ts", "../../../src/wc/components/Menu/menu-placement.ts", "../../../src/wc/shell/chrome-transition.ts", "../../../src/wc/shell/shell-chrome-metrics.ts", "../../../src/wc/shell/badge-gradient-ring.ts"],
-  "sourcesContent": ["/** Nav chrome style slot \u2014 dashboard vs settings. Colors unified for now; texture hooks use the class. */\nexport type NavChromeStyle = 'dashboard' | 'settings';\n\n/** Document hint for first paint before framework props land. */\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\nexport function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {\n  if (attr === 'dashboard' || attr === 'settings') return attr;\n  return undefined;\n}\n\nexport function setNavStyleHint(style: NavChromeStyle): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);\n}\n\nexport function clearNavStyleHint(): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);\n}\n\nexport function resolveNavChromeStyle(\n  styleProp: NavChromeStyle,\n  hostAttr: string | null,\n  docHint?: string | null,\n): NavChromeStyle {\n  const fromHost = readNavStyleAttr(hostAttr);\n  if (fromHost) return fromHost;\n\n  const hint =\n    docHint !== undefined\n      ? docHint\n      : typeof document !== 'undefined'\n        ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n        : null;\n  const fromHint = readNavStyleAttr(hint);\n  if (fromHint) return fromHint;\n\n  return styleProp;\n}\n\nexport function shouldResyncNavChromeStyle(\n  renderedStyle: NavChromeStyle,\n  style: NavChromeStyle,\n): boolean {\n  return renderedStyle !== style;\n}\n", "/** Parse a CSS <time> value (or motion shorthand's first token) to milliseconds. */\nexport function parseCssTimeMs(value: string, fallback: number): number {\n  const firstToken = value.trim().split(/\\s+/)[0] ?? '';\n  const num = parseFloat(firstToken);\n  if (Number.isNaN(num)) return fallback;\n  if (/ms\\s*$/.test(firstToken)) return num;\n  if (/s\\s*$/.test(firstToken)) return num * 1000;\n  return num;\n}\n\nfunction extractCssCustomProp(ref: string): string | null {\n  const varMatch = ref.match(/^var\\(\\s*(--[^),]+)/);\n  if (varMatch) return varMatch[1].trim();\n  if (ref.startsWith('--')) return ref.trim();\n  return null;\n}\n\nfunction readTokenTimeMs(token: string, fallback: number): number {\n  if (typeof document === 'undefined') return fallback;\n\n  const prop = extractCssCustomProp(token);\n  if (!prop) return parseCssTimeMs(token, fallback);\n\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();\n  return parseCssTimeMs(raw, fallback);\n}\n\n/**\n * Resolve a duration to milliseconds for JS timers aligned with CSS motion tokens.\n * Accepts numbers (ms), raw times (`200ms`, `0.75s`), or `var(--effect-*)` references.\n */\nexport function resolveCssTimeMs(\n  value: number | string | undefined,\n  fallbackToken: string,\n): number {\n  if (typeof value === 'number') return value;\n\n  const token = typeof value === 'string' && value.trim() ? value.trim() : fallbackToken;\n  const prop = extractCssCustomProp(token);\n\n  if (prop) {\n    return readTokenTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n  }\n\n  return parseCssTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n}\n\n/** Whether the user has requested reduced non-essential motion. */\nexport function prefersReducedMotion(): boolean {\n  return typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function' &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Resolve an animation-coupled duration. Returns zero under reduced motion so\n * JS cleanup stays synchronized with CSS that removes the corresponding motion.\n */\nexport function resolveMotionTimeMs(\n  value: number | string | undefined,\n  fallbackToken: string,\n): number {\n  return prefersReducedMotion() ? 0 : resolveCssTimeMs(value, fallbackToken);\n}\n", "import { parseCssTimeMs, prefersReducedMotion } from '../utils/resolve-css-time-ms';\n\n/** `view-transition-name` on `ds-bar-nav` \u2014 pairs with root reveal in shell apps. */\nexport const SHELL_BAR_NAV_VT_NAME = 'ds-shell-bar-nav';\n\nexport { parseCssTimeMs };\n\nconst VT_STYLE_ID = 'ds-shell-nav-vt-style';\n\n/** TokoMo tokens for the dashboard \u2194 settings radial reveal (WAAPI). */\nexport const SHELL_NAV_REVEAL_DURATION_VAR = '--effect-animation-duration-medium-3';\nexport const SHELL_NAV_REVEAL_EASING_VAR = '--effect-animation-easing-ease-in-out';\nconst SHELL_NAV_REVEAL_DURATION_FALLBACK_MS = 500;\nconst SHELL_NAV_REVEAL_EASING_FALLBACK = 'ease-in-out';\n\nfunction readCssCustomProperty(name: string, fallback: string): string {\n  if (typeof document === 'undefined') return fallback;\n  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n  return value || fallback;\n}\n\n/** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */\nexport function ensureShellNavVtStyle(): void {\n  if (typeof document === 'undefined') return;\n\n  const reduceMotion = prefersReducedMotion();\n  const content = [\n    '::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}',\n    `::view-transition-old(${SHELL_BAR_NAV_VT_NAME}),::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){animation:none;mix-blend-mode:normal}`,\n    `::view-transition-old(${SHELL_BAR_NAV_VT_NAME}){z-index:1}`,\n    `::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){z-index:2${reduceMotion ? '' : ';clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))'}}`,\n    reduceMotion ? '' : '::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}',\n  ].join('\\n');\n\n  const existing = document.getElementById(VT_STYLE_ID) as HTMLStyleElement | null;\n  if (existing) {\n    if (existing.textContent !== content) existing.textContent = content;\n    return;\n  }\n\n  const style = document.createElement('style');\n  style.id = VT_STYLE_ID;\n  style.textContent = content;\n  document.head.appendChild(style);\n}\n\nexport interface ShellNavRevealOrigin {\n  x: number;\n  y: number;\n  maxRadius: number;\n}\n\n/** Origin for the radial reveal \u2014 defaults to panel-nav footer gear, then viewport center. */\nexport function resolveShellNavRevealOrigin(originEl?: HTMLElement | null): ShellNavRevealOrigin {\n  const btn =\n    originEl ??\n    document.querySelector<HTMLElement>('.panel-nav__footer-btn');\n  const rect = btn?.getBoundingClientRect();\n  const x = rect ? Math.round(rect.left + rect.width / 2) : Math.round(window.innerWidth / 2);\n  const y = rect ? Math.round(rect.top + rect.height / 2) : Math.round(window.innerHeight / 2);\n  const maxRadius = Math.ceil(\n    Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)),\n  );\n  return { x, y, maxRadius };\n}\n\nexport function setShellNavRevealOriginVars(origin: ShellNavRevealOrigin): void {\n  document.documentElement.style.setProperty('--vt-x', `${origin.x}px`);\n  document.documentElement.style.setProperty('--vt-y', `${origin.y}px`);\n}\n\n/** Animate root + bar-nav snapshots with the same radial clip-path reveal. */\nexport function animateShellNavRadialReveal(\n  origin: ShellNavRevealOrigin,\n  durationMs?: number,\n): void {\n  if (prefersReducedMotion()) {\n    ensureShellNavVtStyle();\n    return;\n  }\n\n  const duration =\n    durationMs ??\n    parseCssTimeMs(\n      readCssCustomProperty(SHELL_NAV_REVEAL_DURATION_VAR, '400ms'),\n      SHELL_NAV_REVEAL_DURATION_FALLBACK_MS,\n    );\n  const easing = readCssCustomProperty(\n    SHELL_NAV_REVEAL_EASING_VAR,\n    SHELL_NAV_REVEAL_EASING_FALLBACK,\n  );\n  const keyframes = {\n    clipPath: [\n      `circle(0px at ${origin.x}px ${origin.y}px)`,\n      `circle(${origin.maxRadius}px at ${origin.x}px ${origin.y}px)`,\n    ],\n  };\n  const options = {\n    duration,\n    easing,\n    fill: 'forwards' as const,\n  };\n\n  document.documentElement.animate(keyframes, {\n    ...options,\n    pseudoElement: '::view-transition-new(root)',\n  });\n  document.documentElement.animate(keyframes, {\n    ...options,\n    pseudoElement: `::view-transition-new(${SHELL_BAR_NAV_VT_NAME})`,\n  });\n}\n\n/** Run radial reveal when a view transition's `ready` promise settles (app/router driver). */\nexport function runShellNavStyleRevealOnReady(\n  transition: { ready: Promise<void> },\n  originEl?: HTMLElement | null,\n): void {\n  ensureShellNavVtStyle();\n  if (prefersReducedMotion()) {\n    transition.ready.catch(() => {\n      /* transition skipped or superseded */\n    });\n    return;\n  }\n  const origin = resolveShellNavRevealOrigin(originEl);\n  setShellNavRevealOriginVars(origin);\n\n  transition.ready\n    .then(() => animateShellNavRadialReveal(origin))\n    .catch(() => {\n      /* transition skipped or superseded */\n    });\n}\n", "/** Built-in shell chrome wash presets. */\nexport type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';\n\nexport const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = [\n  'none',\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Wash presets shown after the `none` option in pickers. */\nexport const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[] = [\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Default wash when `gradient-preset` is omitted. */\nexport const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset = 'neutral';\n\nexport const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string> = {\n  none: 'None',\n  cool: 'Cool',\n  neutral: 'Neutral',\n  warm: 'Warm',\n  fresh: 'Fresh',\n};\n\nexport interface ShellGradientStop {\n  color: string;\n  position: number;\n}\n\nexport interface ShellGradientRecipe {\n  opacity: number;\n  stops: readonly ShellGradientStop[];\n}\n\nexport interface ShellGradientPickerPreview {\n  backgroundColor: string;\n  backgroundImage?: string;\n  opacity?: number;\n}\n\nexport interface ShellGradientPickerOption {\n  value: ShellGradientPreset;\n  label: string;\n  preview: ShellGradientPickerPreview;\n}\n\nexport interface ShellGradientPickerSection {\n  options: ShellGradientPickerOption[];\n}\n\nconst SHELL_GRADIENT_RECIPES: Record<Exclude<ShellGradientPreset, 'none'>, ShellGradientRecipe> = {\n  cool: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-blue-strong-background)', position: 100 },\n    ],\n  },\n  neutral: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-grey-strong-background)', position: 100 },\n    ],\n  },\n  warm: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-yellow-strong-background)', position: 100 },\n    ],\n  },\n  fresh: {\n    opacity: 0.4,\n    stops: [\n      { color: 'var(--color-color-intent-cyan-faint-background)', position: 0 },\n      { color: 'var(--color-background-transparent)', position: 47 },\n      { color: 'var(--color-background-transparent)', position: 58 },\n      { color: 'var(--color-color-intent-red-faint-background)', position: 83 },\n      { color: 'var(--color-color-intent-pink-faint-background)', position: 100 },\n    ],\n  },\n};\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\nexport function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null {\n  if (preset === 'none') return null;\n  const stops = SHELL_GRADIENT_RECIPES[preset].stops;\n  return stops[stops.length - 1]?.color ?? null;\n}\n\nexport function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null {\n  const normalized = normalizeShellGradientPreset(preset);\n  return normalized === 'none' ? null : SHELL_GRADIENT_RECIPES[normalized];\n}\n\nexport function shellGradientPresetOpacity(preset: ShellGradientPreset): string {\n  return String(shellGradientPresetRecipe(preset)?.opacity ?? 0);\n}\n\nexport function isShellGradientPreset(value: string): value is ShellGradientPreset {\n  return (SHELL_GRADIENT_PRESETS as string[]).includes(value);\n}\n\n/**\n * Coerce unknown/absent presets to the default. Runtime values escape the\n * type: removing the reflected `gradient-preset` attribute (e.g. an Angular\n * `[attr.gradient-preset]=\"null\"` binding) drives the prop to null past its\n * field default \u2014 without normalization the stop lookup interpolates the\n * literal string \"undefined\" into CSS and the wash silently disappears.\n */\nexport function normalizeShellGradientPreset(\n  value: string | null | undefined,\n): ShellGradientPreset {\n  return value != null && isShellGradientPreset(value) ? value : DEFAULT_SHELL_GRADIENT_PRESET;\n}\n\n/** Radial wash for a preset \u2014 transparent at top-left into the intent stop. `none` returns no image. */\nexport function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {\n  const normalized = normalizeShellGradientPreset(preset);\n  if (normalized === 'none') return 'none';\n\n  return buildShellRadialGradientFromStops(SHELL_GRADIENT_RECIPES[normalized].stops);\n}\n\n/** Build the production shell geometry from an ordered set of design-time stops. */\nexport function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string {\n  const serialized = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');\n  return `radial-gradient(${GRADIENT_GEOMETRY}, ${serialized})`;\n}\n\n/** Generic SwatchPicker sections for the fixed shell appearance presets. */\nexport function shellGradientPickerSections(): ShellGradientPickerSection[] {\n  return [\n    {\n      options: [{\n        value: 'none',\n        label: SHELL_GRADIENT_PRESET_LABELS.none,\n        preview: {\n          backgroundColor: 'var(--color-background-secondary)',\n        },\n      }],\n    },\n    {\n      options: SHELL_GRADIENT_WASH_PRESETS.map(preset => ({\n        value: preset,\n        label: SHELL_GRADIENT_PRESET_LABELS[preset],\n        preview: {\n          backgroundColor: 'var(--color-background-secondary)',\n          backgroundImage: buildShellRadialGradientForPreset(preset),\n          opacity: Number(shellGradientPresetOpacity(preset)),\n        },\n      })),\n    },\n  ];\n}\n", "/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\nimport type { ShellGradientPreset } from './shell-gradient-presets';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  buildShellRadialGradientForPreset,\n  normalizeShellGradientPreset,\n} from './shell-gradient-presets';\n\nexport type { ShellGradientPreset } from './shell-gradient-presets';\nexport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  SHELL_GRADIENT_PRESETS,\n  SHELL_GRADIENT_PRESET_LABELS,\n  buildShellRadialGradientForPreset,\n  buildShellRadialGradientFromStops,\n  isShellGradientPreset,\n  shellGradientPresetOpacity,\n  shellGradientPresetRecipe,\n  shellGradientPresetStopToken,\n} from './shell-gradient-presets';\n\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** Per chrome-surface background-position \u2014 offsets wash + grid to shell row origin. */\nexport const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';\n\n/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */\nexport function shellChromeLayerActive(preset: ShellGradientPreset): boolean {\n  return normalizeShellGradientPreset(preset) !== 'none';\n}\n\n/**\n * Shell radial wash \u2014 same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark intent stops).\n */\nexport function buildShellRadialGradient(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradientForPreset(preset);\n}\n\n/** Built-in radial image for the selected shell preset. */\nexport function shellGradientImage(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradient(preset);\n}\n\nexport interface ShellViewportDimensions {\n  width: number;\n  height: number;\n}\n\n/**\n * Viewport size for shell chrome with `background-attachment: fixed`.\n * Must not use the `ds-app-shell` element box \u2014 the shell can be shorter or\n * taller than the viewport when host height chains break or content overflows.\n */\nexport function readShellViewportDimensions(win?: Window): ShellViewportDimensions {\n  const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);\n  if (!w) return { width: 0, height: 0 };\n\n  const visual = w.visualViewport;\n  return {\n    width: Math.round(visual?.width ?? w.innerWidth),\n    height: Math.round(visual?.height ?? w.innerHeight),\n  };\n}\n\nexport interface ShellGradientLayout {\n  width: number;\n  height: number;\n  panelWidth: number;\n}\n\n/** Pixel `background-size` for the fixed-attachment radial wash. */\nexport function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string {\n  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n  return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n  return `${-Math.round(panelWidth)}px 0`;\n}\n\n/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */\nexport function shellChromeSurfacePosition(leftPx: number, topPx: number): string {\n  return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;\n}\n", "import type { ChoicePopupAnchorAlignment } from '../../utils/choice-popup-alignment';\nimport type { MenuAlign, MenuSide } from './menu-position';\n\n/** Placement props bindable on `ds-menu` (side, align, offsets). */\nexport interface MenuPlacement {\n  side: MenuSide;\n  align: MenuAlign;\n  anchorAlignment: ChoicePopupAnchorAlignment;\n  sideOffset: number | string;\n  alignOffset: number | string;\n}\n\n/**\n * Canonical `ds-menu` placement for the **panel-nav footer user menu**.\n * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).\n *\n * Not for BarNav overflow menus \u2014 those use `side=\"bottom\"` / `align=\"end\"` internally.\n * `align: 'end'` bottom-aligns the last choice cell on the anchor; the side offset nudges into the content area:\n * - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).\n * - `anchorAlignment: 'choice-cell'`: the shared section inset puts the last row edge on the footer user row.\n */\nexport const PANEL_NAV_USER_MENU_PLACEMENT = {\n  side: 'right',\n  align: 'end',\n  anchorAlignment: 'choice-cell',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: 0,\n} as const satisfies MenuPlacement;\n\n/**\n * Canonical placement for a menu opened by a PanelTools header action.\n * Matches BarNav overflow: the 32px trigger is 8px inside the 48px header, so\n * a 12px side offset places the popup 4px below the header edge. Choice-cell\n * alignment keeps the final menu item edge aligned with the trigger.\n */\nexport const PANEL_TOOLS_HEADER_MENU_PLACEMENT = {\n  side: 'bottom',\n  align: 'end',\n  anchorAlignment: 'choice-cell',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: 0,\n} as const satisfies MenuPlacement;\n", "/** Bubbling/composed events \u2014 `ds-app-shell` and `ds-bar-nav` coordinate during width motion. */\n\nexport const CHROME_TRANSITION_START = 'dsChromeTransitionStart';\nexport const CHROME_TRANSITION_END = 'dsChromeTransitionEnd';\n\nexport type ChromeTransitionSource = 'panel-nav' | 'panel-tools';\n\nexport interface ChromeTransitionDetail {\n  source: ChromeTransitionSource;\n  /** Panel-tools drawer motion direction; omitted for panel-nav. */\n  phase?: 'opening' | 'closing';\n}\n\n/** Reference-counted gate \u2014 used while panel-nav width is transitioning. */\nexport class ChromeTransitionDepth {\n  private depth = 0;\n\n  enter(): void {\n    this.depth += 1;\n  }\n\n  exit(): void {\n    this.depth = Math.max(0, this.depth - 1);\n  }\n\n  get isActive(): boolean {\n    return this.depth > 0;\n  }\n}\n\n/** Idempotent gate for one physical chrome surface.\n * Duplicate start notifications still require only one matching end. */\nexport class ChromeTransitionGate {\n  private active = false;\n\n  enter(): void {\n    this.active = true;\n  }\n\n  exit(): void {\n    this.active = false;\n  }\n\n  get isActive(): boolean {\n    return this.active;\n  }\n}\n\nexport interface RafCoalescer {\n  schedule(): void;\n  cancel(): void;\n}\n\n/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */\nexport function createRafCoalescer(onFrame: () => void): RafCoalescer {\n  let rafId = 0;\n  return {\n    schedule() {\n      if (rafId !== 0) return;\n      rafId = requestAnimationFrame(() => {\n        rafId = 0;\n        onFrame();\n      });\n    },\n    cancel() {\n      if (rafId !== 0) {\n        cancelAnimationFrame(rafId);\n        rafId = 0;\n      }\n    },\n  };\n}\n\nexport function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined {\n  return (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n}\n\nexport function readChromeTransitionPhase(event: Event): ChromeTransitionDetail['phase'] {\n  return (event as CustomEvent<ChromeTransitionDetail>).detail?.phase;\n}\n", "import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n  if (typeof document === 'undefined') return 0;\n\n  const probe = document.createElement('div');\n  probe.style.cssText =\n    'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n    cssVarName +\n    ');';\n  context.appendChild(probe);\n  const width = probe.getBoundingClientRect().width;\n  context.removeChild(probe);\n  return width;\n}\n\nexport interface PanelNavWidthTokens {\n  expandedPx: number;\n  collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n  return {\n    expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n    collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n  };\n}\n\nexport function isPanelNavCollapsed(\n  panelNavHost: HTMLElement | null,\n  navRoot: HTMLElement | null,\n): boolean {\n  if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n  const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n  return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n  tokens: PanelNavWidthTokens,\n  collapsed: boolean,\n): number {\n  return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n  return shellGradientPositionBar(panelWidthPx);\n}\n", "import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under a shell with an active wash preset. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  // Explicit <HTMLElement>: the inferred HTMLDsAppShellElement type only\n  // resolves where @stencil/core types are installed \u2014 consumers importing\n  // `@ds-mo/ui/shell` (raw TS) compile this without them.\n  const shell = from.closest<HTMLElement>('ds-app-shell');\n  return shell !== null && shell.getAttribute('gradient-preset') !== 'none';\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n  if (barHost) {\n    const root = barHost.shadowRoot ?? barHost;\n    const element = root.querySelector('.bar-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n  if (panelHost) {\n    const root = panelHost.shadowRoot ?? panelHost;\n    const element = root.querySelector('.panel-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  if (!isShellGradientActive(badgeHost)) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n"],
+  "sourcesContent": ["/** Nav chrome style slot \u2014 dashboard vs settings. Colors unified for now; texture hooks use the class. */\nexport type NavChromeStyle = 'dashboard' | 'settings';\n\n/** Document hint for first paint before framework props land. */\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\nexport function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {\n  if (attr === 'dashboard' || attr === 'settings') return attr;\n  return undefined;\n}\n\nexport function setNavStyleHint(style: NavChromeStyle): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);\n}\n\nexport function clearNavStyleHint(): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);\n}\n\nexport function resolveNavChromeStyle(\n  styleProp: NavChromeStyle,\n  hostAttr: string | null,\n  docHint?: string | null,\n): NavChromeStyle {\n  const fromHost = readNavStyleAttr(hostAttr);\n  if (fromHost) return fromHost;\n\n  const hint =\n    docHint !== undefined\n      ? docHint\n      : typeof document !== 'undefined'\n        ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n        : null;\n  const fromHint = readNavStyleAttr(hint);\n  if (fromHint) return fromHint;\n\n  return styleProp;\n}\n\nexport function shouldResyncNavChromeStyle(\n  renderedStyle: NavChromeStyle,\n  style: NavChromeStyle,\n): boolean {\n  return renderedStyle !== style;\n}\n", "/** Parse a CSS <time> value (or motion shorthand's first token) to milliseconds. */\nexport function parseCssTimeMs(value: string, fallback: number): number {\n  const firstToken = value.trim().split(/\\s+/)[0] ?? '';\n  const num = parseFloat(firstToken);\n  if (Number.isNaN(num)) return fallback;\n  if (/ms\\s*$/.test(firstToken)) return num;\n  if (/s\\s*$/.test(firstToken)) return num * 1000;\n  return num;\n}\n\nfunction extractCssCustomProp(ref: string): string | null {\n  const varMatch = ref.match(/^var\\(\\s*(--[^),]+)/);\n  if (varMatch) return varMatch[1].trim();\n  if (ref.startsWith('--')) return ref.trim();\n  return null;\n}\n\nfunction readTokenTimeMs(token: string, fallback: number): number {\n  if (typeof document === 'undefined') return fallback;\n\n  const prop = extractCssCustomProp(token);\n  if (!prop) return parseCssTimeMs(token, fallback);\n\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();\n  return parseCssTimeMs(raw, fallback);\n}\n\n/**\n * Resolve a duration to milliseconds for JS timers aligned with CSS motion tokens.\n * Accepts numbers (ms), raw times (`200ms`, `0.75s`), or `var(--effect-*)` references.\n */\nexport function resolveCssTimeMs(\n  value: number | string | undefined,\n  fallbackToken: string,\n): number {\n  if (typeof value === 'number') return value;\n\n  const token = typeof value === 'string' && value.trim() ? value.trim() : fallbackToken;\n  const prop = extractCssCustomProp(token);\n\n  if (prop) {\n    return readTokenTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n  }\n\n  return parseCssTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n}\n\n/** Whether the user has requested reduced non-essential motion. */\nexport function prefersReducedMotion(): boolean {\n  return typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function' &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Resolve an animation-coupled duration. Returns zero under reduced motion so\n * JS cleanup stays synchronized with CSS that removes the corresponding motion.\n */\nexport function resolveMotionTimeMs(\n  value: number | string | undefined,\n  fallbackToken: string,\n): number {\n  return prefersReducedMotion() ? 0 : resolveCssTimeMs(value, fallbackToken);\n}\n", "import { parseCssTimeMs, prefersReducedMotion } from '../utils/resolve-css-time-ms';\n\n/** `view-transition-name` on `ds-bar-nav` \u2014 pairs with root reveal in shell apps. */\nexport const SHELL_BAR_NAV_VT_NAME = 'ds-shell-bar-nav';\n\nexport { parseCssTimeMs };\n\nconst VT_STYLE_ID = 'ds-shell-nav-vt-style';\n\n/** TokoMo tokens for the dashboard \u2194 settings radial reveal (WAAPI). */\nexport const SHELL_NAV_REVEAL_DURATION_VAR = '--effect-animation-duration-medium-3';\nexport const SHELL_NAV_REVEAL_EASING_VAR = '--effect-animation-easing-ease-in-out';\nconst SHELL_NAV_REVEAL_DURATION_FALLBACK_MS = 500;\nconst SHELL_NAV_REVEAL_EASING_FALLBACK = 'ease-in-out';\n\nfunction readCssCustomProperty(name: string, fallback: string): string {\n  if (typeof document === 'undefined') return fallback;\n  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n  return value || fallback;\n}\n\n/** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */\nexport function ensureShellNavVtStyle(): void {\n  if (typeof document === 'undefined') return;\n\n  const reduceMotion = prefersReducedMotion();\n  const content = [\n    '::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}',\n    `::view-transition-old(${SHELL_BAR_NAV_VT_NAME}),::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){animation:none;mix-blend-mode:normal}`,\n    `::view-transition-old(${SHELL_BAR_NAV_VT_NAME}){z-index:1}`,\n    `::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){z-index:2${reduceMotion ? '' : ';clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))'}}`,\n    reduceMotion ? '' : '::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}',\n  ].join('\\n');\n\n  const existing = document.getElementById(VT_STYLE_ID) as HTMLStyleElement | null;\n  if (existing) {\n    if (existing.textContent !== content) existing.textContent = content;\n    return;\n  }\n\n  const style = document.createElement('style');\n  style.id = VT_STYLE_ID;\n  style.textContent = content;\n  document.head.appendChild(style);\n}\n\nexport interface ShellNavRevealOrigin {\n  x: number;\n  y: number;\n  maxRadius: number;\n}\n\n/** Origin for the radial reveal \u2014 defaults to panel-nav footer gear, then viewport center. */\nexport function resolveShellNavRevealOrigin(originEl?: HTMLElement | null): ShellNavRevealOrigin {\n  const btn =\n    originEl ??\n    document.querySelector<HTMLElement>('.panel-nav__footer-btn');\n  const rect = btn?.getBoundingClientRect();\n  const x = rect ? Math.round(rect.left + rect.width / 2) : Math.round(window.innerWidth / 2);\n  const y = rect ? Math.round(rect.top + rect.height / 2) : Math.round(window.innerHeight / 2);\n  const maxRadius = Math.ceil(\n    Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)),\n  );\n  return { x, y, maxRadius };\n}\n\nexport function setShellNavRevealOriginVars(origin: ShellNavRevealOrigin): void {\n  document.documentElement.style.setProperty('--vt-x', `${origin.x}px`);\n  document.documentElement.style.setProperty('--vt-y', `${origin.y}px`);\n}\n\n/** Animate root + bar-nav snapshots with the same radial clip-path reveal. */\nexport function animateShellNavRadialReveal(\n  origin: ShellNavRevealOrigin,\n  durationMs?: number,\n): void {\n  if (prefersReducedMotion()) {\n    ensureShellNavVtStyle();\n    return;\n  }\n\n  const duration =\n    durationMs ??\n    parseCssTimeMs(\n      readCssCustomProperty(SHELL_NAV_REVEAL_DURATION_VAR, '400ms'),\n      SHELL_NAV_REVEAL_DURATION_FALLBACK_MS,\n    );\n  const easing = readCssCustomProperty(\n    SHELL_NAV_REVEAL_EASING_VAR,\n    SHELL_NAV_REVEAL_EASING_FALLBACK,\n  );\n  const keyframes = {\n    clipPath: [\n      `circle(0px at ${origin.x}px ${origin.y}px)`,\n      `circle(${origin.maxRadius}px at ${origin.x}px ${origin.y}px)`,\n    ],\n  };\n  const options = {\n    duration,\n    easing,\n    fill: 'forwards' as const,\n  };\n\n  document.documentElement.animate(keyframes, {\n    ...options,\n    pseudoElement: '::view-transition-new(root)',\n  });\n  document.documentElement.animate(keyframes, {\n    ...options,\n    pseudoElement: `::view-transition-new(${SHELL_BAR_NAV_VT_NAME})`,\n  });\n}\n\n/** Run radial reveal when a view transition's `ready` promise settles (app/router driver). */\nexport function runShellNavStyleRevealOnReady(\n  transition: { ready: Promise<void> },\n  originEl?: HTMLElement | null,\n): void {\n  ensureShellNavVtStyle();\n  if (prefersReducedMotion()) {\n    transition.ready.catch(() => {\n      /* transition skipped or superseded */\n    });\n    return;\n  }\n  const origin = resolveShellNavRevealOrigin(originEl);\n  setShellNavRevealOriginVars(origin);\n\n  transition.ready\n    .then(() => animateShellNavRadialReveal(origin))\n    .catch(() => {\n      /* transition skipped or superseded */\n    });\n}\n", "/** Built-in shell chrome wash presets. */\nexport type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';\n\nexport const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = [\n  'none',\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Wash presets shown after the `none` option in pickers. */\nexport const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[] = [\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Default wash when `gradient-preset` is omitted. */\nexport const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset = 'neutral';\n\nexport const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string> = {\n  none: 'None',\n  cool: 'Cool',\n  neutral: 'Neutral',\n  warm: 'Warm',\n  fresh: 'Fresh',\n};\n\nexport interface ShellGradientStop {\n  color: string;\n  position: number;\n}\n\nexport interface ShellGradientRecipe {\n  opacity: number;\n  stops: readonly ShellGradientStop[];\n}\n\nexport interface ShellGradientPickerPreview {\n  backgroundColor: string;\n  backgroundImage?: string;\n  opacity?: number;\n}\n\nexport interface ShellGradientPickerOption {\n  value: ShellGradientPreset;\n  label: string;\n  preview: ShellGradientPickerPreview;\n}\n\nexport interface ShellGradientPickerSection {\n  options: ShellGradientPickerOption[];\n}\n\nconst SHELL_GRADIENT_RECIPES: Record<Exclude<ShellGradientPreset, 'none'>, ShellGradientRecipe> = {\n  cool: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-blue-strong-background)', position: 100 },\n    ],\n  },\n  neutral: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-grey-strong-background)', position: 100 },\n    ],\n  },\n  warm: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-yellow-strong-background)', position: 100 },\n    ],\n  },\n  fresh: {\n    opacity: 0.4,\n    stops: [\n      { color: 'var(--color-color-intent-cyan-faint-background)', position: 0 },\n      { color: 'var(--color-background-transparent)', position: 47 },\n      { color: 'var(--color-background-transparent)', position: 58 },\n      { color: 'var(--color-color-intent-red-faint-background)', position: 83 },\n      { color: 'var(--color-color-intent-pink-faint-background)', position: 100 },\n    ],\n  },\n};\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\nexport function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null {\n  if (preset === 'none') return null;\n  const stops = SHELL_GRADIENT_RECIPES[preset].stops;\n  return stops[stops.length - 1]?.color ?? null;\n}\n\nexport function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null {\n  const normalized = normalizeShellGradientPreset(preset);\n  return normalized === 'none' ? null : SHELL_GRADIENT_RECIPES[normalized];\n}\n\nexport function shellGradientPresetOpacity(preset: ShellGradientPreset): string {\n  return String(shellGradientPresetRecipe(preset)?.opacity ?? 0);\n}\n\nexport function isShellGradientPreset(value: string): value is ShellGradientPreset {\n  return (SHELL_GRADIENT_PRESETS as string[]).includes(value);\n}\n\n/**\n * Coerce unknown/absent presets to the default. Runtime values escape the\n * type: removing the reflected `gradient-preset` attribute (e.g. an Angular\n * `[attr.gradient-preset]=\"null\"` binding) drives the prop to null past its\n * field default \u2014 without normalization the stop lookup interpolates the\n * literal string \"undefined\" into CSS and the wash silently disappears.\n */\nexport function normalizeShellGradientPreset(\n  value: string | null | undefined,\n): ShellGradientPreset {\n  return value != null && isShellGradientPreset(value) ? value : DEFAULT_SHELL_GRADIENT_PRESET;\n}\n\n/** Radial wash for a preset \u2014 transparent at top-left into the intent stop. `none` returns no image. */\nexport function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {\n  const normalized = normalizeShellGradientPreset(preset);\n  if (normalized === 'none') return 'none';\n\n  return buildShellRadialGradientFromStops(SHELL_GRADIENT_RECIPES[normalized].stops);\n}\n\n/** Build the production shell geometry from an ordered set of design-time stops. */\nexport function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string {\n  const serialized = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');\n  return `radial-gradient(${GRADIENT_GEOMETRY}, ${serialized})`;\n}\n\n/** Generic SwatchPicker sections for the fixed shell appearance presets. */\nexport function shellGradientPickerSections(): ShellGradientPickerSection[] {\n  return [\n    {\n      options: [{\n        value: 'none',\n        label: SHELL_GRADIENT_PRESET_LABELS.none,\n        preview: {\n          backgroundColor: 'var(--color-background-secondary)',\n        },\n      }],\n    },\n    {\n      options: SHELL_GRADIENT_WASH_PRESETS.map(preset => ({\n        value: preset,\n        label: SHELL_GRADIENT_PRESET_LABELS[preset],\n        preview: {\n          backgroundColor: 'var(--color-background-secondary)',\n          backgroundImage: buildShellRadialGradientForPreset(preset),\n          opacity: Number(shellGradientPresetOpacity(preset)),\n        },\n      })),\n    },\n  ];\n}\n", "/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-shell-app`. */\nimport type { ShellGradientPreset } from './shell-gradient-presets';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  buildShellRadialGradientForPreset,\n  normalizeShellGradientPreset,\n} from './shell-gradient-presets';\n\nexport type { ShellGradientPreset } from './shell-gradient-presets';\nexport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  SHELL_GRADIENT_PRESETS,\n  SHELL_GRADIENT_PRESET_LABELS,\n  buildShellRadialGradientForPreset,\n  buildShellRadialGradientFromStops,\n  isShellGradientPreset,\n  shellGradientPresetOpacity,\n  shellGradientPresetRecipe,\n  shellGradientPresetStopToken,\n} from './shell-gradient-presets';\n\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** Per chrome-surface background-position \u2014 offsets wash + grid to shell row origin. */\nexport const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';\n\n/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */\nexport function shellChromeLayerActive(preset: ShellGradientPreset): boolean {\n  return normalizeShellGradientPreset(preset) !== 'none';\n}\n\n/**\n * Shell radial wash \u2014 same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark intent stops).\n */\nexport function buildShellRadialGradient(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradientForPreset(preset);\n}\n\n/** Built-in radial image for the selected shell preset. */\nexport function shellGradientImage(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradient(preset);\n}\n\nexport interface ShellViewportDimensions {\n  width: number;\n  height: number;\n}\n\n/**\n * Viewport size for shell chrome with `background-attachment: fixed`.\n * Must not use the `ds-shell-app` element box \u2014 the shell can be shorter or\n * taller than the viewport when host height chains break or content overflows.\n */\nexport function readShellViewportDimensions(win?: Window): ShellViewportDimensions {\n  const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);\n  if (!w) return { width: 0, height: 0 };\n\n  const visual = w.visualViewport;\n  return {\n    width: Math.round(visual?.width ?? w.innerWidth),\n    height: Math.round(visual?.height ?? w.innerHeight),\n  };\n}\n\nexport interface ShellGradientLayout {\n  width: number;\n  height: number;\n  panelWidth: number;\n}\n\n/** Pixel `background-size` for the fixed-attachment radial wash. */\nexport function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string {\n  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n  return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n  return `${-Math.round(panelWidth)}px 0`;\n}\n\n/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */\nexport function shellChromeSurfacePosition(leftPx: number, topPx: number): string {\n  return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;\n}\n", "import type { ChoicePopupAnchorAlignment } from '../../utils/choice-popup-alignment';\nimport type { MenuAlign, MenuSide } from './menu-position';\n\n/** Placement props bindable on `ds-menu` (side, align, offsets). */\nexport interface MenuPlacement {\n  side: MenuSide;\n  align: MenuAlign;\n  anchorAlignment: ChoicePopupAnchorAlignment;\n  sideOffset: number | string;\n  alignOffset: number | string;\n}\n\n/**\n * Canonical `ds-menu` placement for the **panel-nav footer user menu**.\n * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).\n *\n * Not for BarNav overflow menus \u2014 those use `side=\"bottom\"` / `align=\"end\"` internally.\n * `align: 'end'` bottom-aligns the last choice cell on the anchor; the side offset nudges into the content area:\n * - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).\n * - `anchorAlignment: 'choice-cell'`: the shared section inset puts the last row edge on the footer user row.\n */\nexport const PANEL_NAV_USER_MENU_PLACEMENT = {\n  side: 'right',\n  align: 'end',\n  anchorAlignment: 'choice-cell',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: 0,\n} as const satisfies MenuPlacement;\n\n/**\n * Canonical placement for a menu opened by a PanelTools header action.\n * Matches BarNav overflow: the 32px trigger is 8px inside the 48px header, so\n * a 12px side offset places the popup 4px below the header edge. Choice-cell\n * alignment keeps the final menu item edge aligned with the trigger.\n */\nexport const PANEL_TOOLS_HEADER_MENU_PLACEMENT = {\n  side: 'bottom',\n  align: 'end',\n  anchorAlignment: 'choice-cell',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: 0,\n} as const satisfies MenuPlacement;\n", "/** Bubbling/composed events \u2014 `ds-shell-app` and `ds-bar-nav` coordinate during width motion. */\n\nexport const CHROME_TRANSITION_START = 'dsChromeTransitionStart';\nexport const CHROME_TRANSITION_END = 'dsChromeTransitionEnd';\n\nexport type ChromeTransitionSource = 'panel-nav' | 'panel-tools';\n\nexport interface ChromeTransitionDetail {\n  source: ChromeTransitionSource;\n  /** Panel-tools drawer motion direction; omitted for panel-nav. */\n  phase?: 'opening' | 'closing';\n}\n\n/** Reference-counted gate \u2014 used while panel-nav width is transitioning. */\nexport class ChromeTransitionDepth {\n  private depth = 0;\n\n  enter(): void {\n    this.depth += 1;\n  }\n\n  exit(): void {\n    this.depth = Math.max(0, this.depth - 1);\n  }\n\n  get isActive(): boolean {\n    return this.depth > 0;\n  }\n}\n\n/** Idempotent gate for one physical chrome surface.\n * Duplicate start notifications still require only one matching end. */\nexport class ChromeTransitionGate {\n  private active = false;\n\n  enter(): void {\n    this.active = true;\n  }\n\n  exit(): void {\n    this.active = false;\n  }\n\n  get isActive(): boolean {\n    return this.active;\n  }\n}\n\nexport interface RafCoalescer {\n  schedule(): void;\n  cancel(): void;\n}\n\n/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */\nexport function createRafCoalescer(onFrame: () => void): RafCoalescer {\n  let rafId = 0;\n  return {\n    schedule() {\n      if (rafId !== 0) return;\n      rafId = requestAnimationFrame(() => {\n        rafId = 0;\n        onFrame();\n      });\n    },\n    cancel() {\n      if (rafId !== 0) {\n        cancelAnimationFrame(rafId);\n        rafId = 0;\n      }\n    },\n  };\n}\n\nexport function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined {\n  return (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n}\n\nexport function readChromeTransitionPhase(event: Event): ChromeTransitionDetail['phase'] {\n  return (event as CustomEvent<ChromeTransitionDetail>).detail?.phase;\n}\n", "import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n  if (typeof document === 'undefined') return 0;\n\n  const probe = document.createElement('div');\n  probe.style.cssText =\n    'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n    cssVarName +\n    ');';\n  context.appendChild(probe);\n  const width = probe.getBoundingClientRect().width;\n  context.removeChild(probe);\n  return width;\n}\n\nexport interface PanelNavWidthTokens {\n  expandedPx: number;\n  collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n  return {\n    expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n    collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n  };\n}\n\nexport function isPanelNavCollapsed(\n  panelNavHost: HTMLElement | null,\n  navRoot: HTMLElement | null,\n): boolean {\n  if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n  const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n  return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n  tokens: PanelNavWidthTokens,\n  collapsed: boolean,\n): number {\n  return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n  return shellGradientPositionBar(panelWidthPx);\n}\n", "import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under a shell with an active wash preset. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  // Explicit <HTMLElement>: the inferred HTMLDsShellAppElement type only\n  // resolves where @stencil/core types are installed \u2014 consumers importing\n  // `@ds-mo/ui/shell` (raw TS) compile this without them.\n  const shell = from.closest<HTMLElement>('ds-shell-app');\n  return shell !== null && shell.getAttribute('gradient-preset') !== 'none';\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n  if (barHost) {\n    const root = barHost.shadowRoot ?? barHost;\n    const element = root.querySelector('.bar-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n  if (panelHost) {\n    const root = panelHost.shadowRoot ?? panelHost;\n    const element = root.querySelector('.panel-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  if (!isShellGradientActive(badgeHost)) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist/lib/shell/shell-gradient.d.ts

@@ -1,4 +1,4 @@
-/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */
+/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-shell-app`. */
 import type { ShellGradientPreset } from './shell-gradient-presets';
 export type { ShellGradientPreset } from './shell-gradient-presets';
 export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, buildShellRadialGradientFromStops, isShellGradientPreset, shellGradientPresetOpacity, shellGradientPresetRecipe, shellGradientPresetStopToken, } from './shell-gradient-presets';
@@ -24,7 +24,7 @@ export interface ShellViewportDimensions {
 }
 /**
  * Viewport size for shell chrome with `background-attachment: fixed`.
- * Must not use the `ds-app-shell` element box — the shell can be shorter or
+ * Must not use the `ds-shell-app` element box — the shell can be shorter or
  * taller than the viewport when host height chains break or content overflows.
  */
 export declare function readShellViewportDimensions(win?: Window): ShellViewportDimensions;

package/dist/mcp-data/registry/agent-activity.json

@@ -127,7 +127,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.3.0"
+          "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/agent-response.json

@@ -178,7 +178,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.3.0"
+          "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/agent-source-list.json

@@ -123,7 +123,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.3.0"
+          "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/agent-tool-call.json

@@ -182,7 +182,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.3.0"
+          "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/attachment-list.json

@@ -107,7 +107,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.3.0"
+          "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -125,7 +125,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.3.0"
+          "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -142,7 +142,7 @@
   "files": [
     {
       "path": "src/wc/components/Avatar/Avatar.css",
-      "content": ":host {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n}\n\n.avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n",
+      "content": ":host {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n}\n\n.avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-015) var(--color-foreground-quaternary);\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -62,7 +62,7 @@
         "Badge keeps one brand treatment; semantic severity belongs to another component or adjacent content.",
         "Use the ring only when Badge overlaps an icon or other content. Disable it in a reserved safe-area slot.",
         "When enabled, the ring matches the immediate backing surface for both variants. Use a direct ring override only for a component-local fill that no surface preset represents.",
-        "Enabled shell gradient rings align automatically inside active AppShell gradient chrome and may be explicitly enabled or disabled when composition requires it."
+        "Enabled shell gradient rings align automatically inside active ShellApp gradient chrome and may be explicitly enabled or disabled when composition requires it."
       ],
       "responsiveBehavior": [
         "The owning control or layout positions Badge and decides whether notification indicators remain visible, condense, or move at responsive breakpoints.",
@@ -112,7 +112,7 @@
           "default": "false",
           "required": false,
           "mutable": false,
-          "description": "Ring samples the shell gradient stack (base fill + wash) instead of a flat\n`box-shadow`. Auto-enabled under an AppShell with an active gradient preset;\nset `gradient-background` to opt in/out explicitly.\n\nThe attribute must NOT start with `on` — Stencil's setAccessor routes any\nunknown `on*` member down the event-listener path during attribute\nreflection, calling addEventListener with a non-listener and throwing."
+          "description": "Ring samples the shell gradient stack (base fill + wash) instead of a flat\n`box-shadow`. Auto-enabled under an ShellApp with an active gradient preset;\nset `gradient-background` to opt in/out explicitly.\n\nThe attribute must NOT start with `on` — Stencil's setAccessor routes any\nunknown `on*` member down the event-listener path during attribute\nreflection, calling addEventListener with a non-listener and throwing."
         },
         "hasRing": {
           "type": "boolean",
@@ -188,7 +188,7 @@
         "default": "false",
         "required": false,
         "mutable": false,
-        "description": "Ring samples the shell gradient stack (base fill + wash) instead of a flat\n`box-shadow`. Auto-enabled under an AppShell with an active gradient preset;\nset `gradient-background` to opt in/out explicitly.\n\nThe attribute must NOT start with `on` — Stencil's setAccessor routes any\nunknown `on*` member down the event-listener path during attribute\nreflection, calling addEventListener with a non-listener and throwing."
+        "description": "Ring samples the shell gradient stack (base fill + wash) instead of a flat\n`box-shadow`. Auto-enabled under an ShellApp with an active gradient preset;\nset `gradient-background` to opt in/out explicitly.\n\nThe attribute must NOT start with `on` — Stencil's setAccessor routes any\nunknown `on*` member down the event-listener path during attribute\nreflection, calling addEventListener with a non-listener and throwing."
       },
       "hasRing": {
         "type": "boolean",
@@ -261,7 +261,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.3.0"
+          "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -282,7 +282,7 @@
     },
     {
       "path": "src/wc/components/Badge/Badge.tsx",
-      "content": "import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  isShellGradientActive,\n} from '../../shell/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'primary'\n  | 'secondary'\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  faint: 'var(--color-background-faint-neutral)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  translucent: 'var(--color-translucent-translucent)',\n  inverted: 'var(--color-inverted-background)',\n  media: 'var(--color-media-background)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"{max}+\". */\n  @Prop() max: number = 9;\n\n  /** Immediate backing surface matched by the ring around either variant. */\n  @Prop() surface: BadgeSurface = 'primary';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /** Show the separation ring when the badge overlaps an icon or other content. */\n  @Prop() hasRing: boolean = true;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled under an AppShell with an active gradient preset;\n   * set `gradient-background` to opt in/out explicitly.\n   *\n   * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n   * unknown `on*` member down the event-listener path during attribute\n   * reflection, calling addEventListener with a non-listener and throwing.\n   */\n  @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Contextual supplemental text. Omit when the owner hides the badge from assistive technology. */\n  @Prop() label: string | undefined;\n\n  /** Bumps on resize/layout so render recomputes gradient ring position. */\n  @State() private gradientLayoutVersion = 0;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n  }\n\n  @Watch('gradientBackground')\n  @Watch('hasRing')\n  gradientBackgroundChanged() {\n    if (!this.hasRing) {\n      this.unbindGradientRingSync();\n      return;\n    }\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n      return;\n    }\n    this.bindGradientRingSync();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.hasRing) return;\n\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n    }\n\n    if (this.gradientBackground) {\n      this.bindGradientRingSync();\n    }\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => {\n      this.gradientLayoutVersion += 1;\n    };\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-app-shell');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  private ringHostStyle(ring: string): Record<string, string> {\n    void this.gradientLayoutVersion;\n\n    const style: Record<string, string> = { '--_badge-ring': ring };\n    if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n    /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n    style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n    return style;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count <= 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? `${this.max}+` : String(this.count);\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--no-ring': !this.hasRing,\n          'badge--on-gradient-background': this.hasRing && this.gradientBackground,\n        }}\n        style={this.ringHostStyle(ring)}\n      >\n        <span class=\"badge__mark\" aria-hidden=\"true\">\n          {!isDot && (\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n              {display}\n            </ds-text>\n          )}\n        </span>\n        {this.label && <span class=\"badge__a11y\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  isShellGradientActive,\n} from '../../shell/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'primary'\n  | 'secondary'\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  faint: 'var(--color-background-faint-neutral)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  translucent: 'var(--color-translucent-translucent)',\n  inverted: 'var(--color-inverted-background)',\n  media: 'var(--color-media-background)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"{max}+\". */\n  @Prop() max: number = 9;\n\n  /** Immediate backing surface matched by the ring around either variant. */\n  @Prop() surface: BadgeSurface = 'primary';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /** Show the separation ring when the badge overlaps an icon or other content. */\n  @Prop() hasRing: boolean = true;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled under an ShellApp with an active gradient preset;\n   * set `gradient-background` to opt in/out explicitly.\n   *\n   * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n   * unknown `on*` member down the event-listener path during attribute\n   * reflection, calling addEventListener with a non-listener and throwing.\n   */\n  @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Contextual supplemental text. Omit when the owner hides the badge from assistive technology. */\n  @Prop() label: string | undefined;\n\n  /** Bumps on resize/layout so render recomputes gradient ring position. */\n  @State() private gradientLayoutVersion = 0;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n  }\n\n  @Watch('gradientBackground')\n  @Watch('hasRing')\n  gradientBackgroundChanged() {\n    if (!this.hasRing) {\n      this.unbindGradientRingSync();\n      return;\n    }\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n      return;\n    }\n    this.bindGradientRingSync();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.hasRing) return;\n\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n    }\n\n    if (this.gradientBackground) {\n      this.bindGradientRingSync();\n    }\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => {\n      this.gradientLayoutVersion += 1;\n    };\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-shell-app');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  private ringHostStyle(ring: string): Record<string, string> {\n    void this.gradientLayoutVersion;\n\n    const style: Record<string, string> = { '--_badge-ring': ring };\n    if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n    /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n    style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n    return style;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count <= 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? `${this.max}+` : String(this.count);\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--no-ring': !this.hasRing,\n          'badge--on-gradient-background': this.hasRing && this.gradientBackground,\n        }}\n        style={this.ringHostStyle(ring)}\n      >\n        <span class=\"badge__mark\" aria-hidden=\"true\">\n          {!isDot && (\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n              {display}\n            </ds-text>\n          )}\n        </span>\n        {this.label && <span class=\"badge__a11y\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "bar-nav",
   "title": "BarNav",
-  "description": "Required secondary route navigation within AppShell, showing peer sections of the active PanelNav destination or its destination label when no section tabs apply.",
+  "description": "Required secondary route navigation within ShellApp, showing peer sections of the active PanelNav destination or its destination label when no section tabs apply.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,9 +13,9 @@
     "intent": {
       "audience": "specialized",
       "status": "stable",
-      "summary": "Required secondary route navigation within AppShell, showing peer sections of the active PanelNav destination or its destination label when no section tabs apply.",
+      "summary": "Required secondary route navigation within ShellApp, showing peer sections of the active PanelNav destination or its destination label when no section tabs apply.",
       "useWhen": [
-        "Rendering the required secondary navigation region inside AppShell.",
+        "Rendering the required secondary navigation region inside ShellApp.",
         "The active primary destination has peer route sections that users can navigate between.",
         "The active primary destination has no route sections or is showing a detail route and its destination label must preserve the BarNav region."
       ],
@@ -24,7 +24,7 @@
         "A third navigation level is needed; BarNav is never tertiary navigation.",
         "The choices switch local content without navigating routes; use TabGroup instead.",
         "Document-style tabs need reordering, pinning, closing, or user customization.",
-        "BarNav would be mounted outside the application's single AppShell."
+        "BarNav would be mounted outside the application's single ShellApp."
       ],
       "alternatives": [
         {
@@ -44,7 +44,7 @@
         }
       ],
       "commonlyComposedWith": [
-        "component:ds-app-shell",
+        "component:ds-shell-app",
         "component:ds-panel-nav",
         "component:ds-panel-tools"
       ],
@@ -73,7 +73,7 @@
         "Keep the BarNav region present so shell height and main-content origin remain stable across routes.",
         "Allow the built-in overflow behavior to move trailing sections into Menu when the available width is insufficient.",
         "The active section does not need to remain visible in the tab row when it moves into overflow because page content supplies the page title.",
-        "Do not infer mobile navigation behavior from desktop BarNav; future AppShell mobile composition may use a different navigation design."
+        "Do not infer mobile navigation behavior from desktop BarNav; future ShellApp mobile composition may use a different navigation design."
       ],
       "frameworkCaveats": {
         "customElements": [
@@ -295,7 +295,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.3.0"
+          "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -314,12 +314,12 @@
   "files": [
     {
       "path": "src/wc/components/BarNav/BarNav.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n}\n\n.bar-nav {\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  gap: var(--dimension-space-100);\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n  background-color: var(--_bar-nav-bg);\n  color: var(--_bar-nav-fg-primary);\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition:\n    background-color var(--effect-motion-short-3),\n    border-color var(--effect-motion-short-3),\n    color var(--effect-motion-short-3);\n  isolation: isolate;\n  /* Default chrome — app surfaces */\n  --_bar-nav-bg: var(--color-background-secondary);\n  --_bar-nav-border: var(--color-border-tertiary);\n  --_bar-nav-fg-primary: var(--color-foreground-primary);\n  --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n  --_bar-nav-hover: var(--color-interaction-hover);\n  --_bar-nav-pressed: var(--color-interaction-pressed);\n  --_bar-nav-focus: var(--color-interaction-focus);\n  --_bar-nav-dot: var(--color-foreground-bold-brand);\n  --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n  --_bar-nav-bg: var(--color-background-secondary);\n  --_bar-nav-border: var(--color-border-tertiary);\n  --_bar-nav-fg-primary: var(--color-foreground-primary);\n  --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n  --_bar-nav-hover: var(--color-interaction-hover);\n  --_bar-nav-pressed: var(--color-interaction-pressed);\n  --_bar-nav-focus: var(--color-interaction-focus);\n  --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash) — bar is a transparent frame. */\n:host-context(ds-app-shell:not([gradient-preset='none'])) .bar-nav {\n  background-color: transparent;\n}\n\n.bar-nav > :not(.bar-nav__tabs-probe) {\n  position: relative;\n  z-index: 3;\n}\n\n/* Overflow — keep fitting tabs visible and pin the overflow trigger to the far edge. */\n.bar-nav--tabs-collapsed {\n  display: flex;\n  gap: var(--dimension-space-100);\n  align-items: center;\n}\n\n/* Expanded tabs — consume full header width */\n.bar-nav__left {\n  position: relative;\n  flex: 1 1 0%;\n  min-width: 0;\n  width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.bar-nav__tabs-visible {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n  position: absolute;\n  left: 0;\n  top: 0;\n  visibility: hidden;\n  pointer-events: none;\n  overflow: visible;\n  width: max-content;\n  max-width: none;\n  z-index: -1;\n}\n\n.bar-nav__tabs-probe > div {\n  width: max-content;\n}\n\n.bar-nav__tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n  width: max-content;\n}\n\n.bar-nav__tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  min-width: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--ds-control-radius);\n  background-color: transparent;\n  color: var(--_bar-nav-fg-secondary);\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  -webkit-user-select: none;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.bar-nav__tab::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  pointer-events: none;\n}\n\n.bar-nav__tab:hover::after {\n  background: var(--_bar-nav-hover);\n}\n\n.bar-nav__tab:active::after {\n  background: var(--_bar-nav-pressed);\n}\n\n.bar-nav__tab--selected {\n  color: var(--_bar-nav-fg-primary);\n}\n\n.bar-nav__tab-label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n}\n\n.bar-nav__tab-label--dot {\n  padding-right: calc(var(--ds-control-label-inset) + var(--ds-control-gap));\n}\n\n.bar-nav__tab-dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.bar-nav__tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-space-100);\n  height: var(--ds-control-height);\n  padding-block: var(--ds-control-padding-inline);\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.bar-nav__tab-divider-line {\n  width: var(--dimension-stroke-width-012);\n  align-self: stretch;\n  background-color: var(--_bar-nav-border);\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n  flex: 1;\n  min-width: 0;\n  height: var(--ds-control-height);\n  visibility: hidden;\n  pointer-events: none;\n}\n\n/* Overflow trigger — compact icon button aligned to the right edge. */\n.bar-nav__overflow-trigger {\n  margin-left: auto;\n  --ds-button-unfilled-fg: var(--_bar-nav-fg-secondary);\n  --ds-button-unfilled-fg-active: var(--_bar-nav-fg-primary);\n  --ds-interaction-hover: var(--_bar-nav-hover);\n  --ds-interaction-pressed: var(--_bar-nav-pressed);\n  --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n   name shares the tab label's type token, color, height and horizontal inset.\n   Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px).\n   Color comes from ds-text color=\"primary\"; beat Text's inline-box display. */\nds-text.bar-nav__heading {\n  display: inline-flex;\n  align-items: center;\n  height: var(--ds-control-height);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-user-select: none;\n  user-select: none;\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n}\n\n.bar-nav {\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  gap: var(--dimension-space-100);\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n  background-color: var(--_bar-nav-bg);\n  color: var(--_bar-nav-fg-primary);\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition:\n    background-color var(--effect-motion-short-3),\n    border-color var(--effect-motion-short-3),\n    color var(--effect-motion-short-3);\n  isolation: isolate;\n  /* Default chrome — app surfaces */\n  --_bar-nav-bg: var(--color-background-secondary);\n  --_bar-nav-border: var(--color-border-tertiary);\n  --_bar-nav-fg-primary: var(--color-foreground-primary);\n  --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n  --_bar-nav-hover: var(--color-interaction-hover);\n  --_bar-nav-pressed: var(--color-interaction-pressed);\n  --_bar-nav-focus: var(--color-interaction-focus);\n  --_bar-nav-dot: var(--color-foreground-bold-brand);\n  --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n  --_bar-nav-bg: var(--color-background-secondary);\n  --_bar-nav-border: var(--color-border-tertiary);\n  --_bar-nav-fg-primary: var(--color-foreground-primary);\n  --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n  --_bar-nav-hover: var(--color-interaction-hover);\n  --_bar-nav-pressed: var(--color-interaction-pressed);\n  --_bar-nav-focus: var(--color-interaction-focus);\n  --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash) — bar is a transparent frame. */\n:host-context(ds-shell-app:not([gradient-preset='none'])) .bar-nav {\n  background-color: transparent;\n}\n\n.bar-nav > :not(.bar-nav__tabs-probe) {\n  position: relative;\n  z-index: 3;\n}\n\n/* Overflow — keep fitting tabs visible and pin the overflow trigger to the far edge. */\n.bar-nav--tabs-collapsed {\n  display: flex;\n  gap: var(--dimension-space-100);\n  align-items: center;\n}\n\n/* Expanded tabs — consume full header width */\n.bar-nav__left {\n  position: relative;\n  flex: 1 1 0%;\n  min-width: 0;\n  width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.bar-nav__tabs-visible {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n  position: absolute;\n  left: 0;\n  top: 0;\n  visibility: hidden;\n  pointer-events: none;\n  overflow: visible;\n  width: max-content;\n  max-width: none;\n  z-index: -1;\n}\n\n.bar-nav__tabs-probe > div {\n  width: max-content;\n}\n\n.bar-nav__tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n  width: max-content;\n}\n\n.bar-nav__tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  min-width: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--ds-control-radius);\n  background-color: transparent;\n  color: var(--_bar-nav-fg-secondary);\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  -webkit-user-select: none;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.bar-nav__tab::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  pointer-events: none;\n}\n\n.bar-nav__tab:hover::after {\n  background: var(--_bar-nav-hover);\n}\n\n.bar-nav__tab:active::after {\n  background: var(--_bar-nav-pressed);\n}\n\n.bar-nav__tab--selected {\n  color: var(--_bar-nav-fg-primary);\n}\n\n.bar-nav__tab-label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n}\n\n.bar-nav__tab-label--dot {\n  padding-right: calc(var(--ds-control-label-inset) + var(--ds-control-gap));\n}\n\n.bar-nav__tab-dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.bar-nav__tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-space-100);\n  height: var(--ds-control-height);\n  padding-block: var(--ds-control-padding-inline);\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.bar-nav__tab-divider-line {\n  width: var(--dimension-stroke-width-012);\n  align-self: stretch;\n  background-color: var(--_bar-nav-border);\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n  flex: 1;\n  min-width: 0;\n  height: var(--ds-control-height);\n  visibility: hidden;\n  pointer-events: none;\n}\n\n/* Overflow trigger — compact icon button aligned to the right edge. */\n.bar-nav__overflow-trigger {\n  margin-left: auto;\n  --ds-button-unfilled-fg: var(--_bar-nav-fg-secondary);\n  --ds-button-unfilled-fg-active: var(--_bar-nav-fg-primary);\n  --ds-interaction-hover: var(--_bar-nav-hover);\n  --ds-interaction-pressed: var(--_bar-nav-pressed);\n  --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n   name shares the tab label's type token, color, height and horizontal inset.\n   Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px).\n   Color comes from ds-text color=\"primary\"; beat Text's inline-box display. */\nds-text.bar-nav__heading {\n  display: inline-flex;\n  align-items: center;\n  height: var(--ds-control-height);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-user-select: none;\n  user-select: none;\n}\n",
       "type": "registry:ui"
     },
     {
       "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 {\n  deriveBarNavValueFromUrl,\n  parseJsonArrayProp,\n  shouldResyncBarNavProps,\n} 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  /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\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('tabsJson')\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('ds-app-shell');\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, this.tabsJson)) {\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    | {\n        itemWidths: number[];\n        itemGap: number;\n        listExtraWidth: number;\n      }\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.tabsJson\n      ? parseJsonArrayProp(this.tabsJson, [])\n      : (this.tabs ?? []);\n  }\n\n  private applyHostProps() {\n    const nextBasePath = this.basePath;\n    const sectionChanged =\n      nextBasePath !== '' &&\n      this.committedSection !== '' &&\n      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(\n      this.currentUrl,\n      this.basePath,\n      tabs,\n    );\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(\n      `[data-tab-id=\"${id}\"]`,\n    ) 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={probe ? undefined : () => {\n          this.overflowRovingFocused = false;\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-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\n                  ? 0\n                  : -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                  '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\"\n                    variant=\"dot\"\n                    hasRing={false}\n                    label=\"\"\n                    aria-hidden=\"true\"\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 =\n      this.basePath === '' || this.committedSection === this.basePath;\n    const hasTabs =\n      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            'bar-nav--dashboard': this.navStyle === 'dashboard',\n            'bar-nav--settings': this.navStyle === 'settings',\n            'bar-nav--tabs-collapsed':\n              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}`}>\n                  {this.renderTabList(this.resolvedTabs, true)}\n                </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                as=\"span\"\n                variant=\"text-body-medium\"\n                emphasis\n                color=\"primary\"\n                wrap=\"nowrap\"\n              >\n                {this.heading}\n              </ds-text>\n            )}\n\n            {hasTabs && this.hasOverflowTabs && (\n              <ds-button-unfilled variant=\"icon\"\n                class={{\n                  'bar-nav__overflow-trigger': true,\n                }}\n                icon=\"Ellipses\"\n                activeFill={false}\n                hasBorder={false}\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.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\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 type { MenuItemData } from '../Menu/menu-types';\nimport { getSelectableTabs, isTabDivider, type TabItemTab } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\nimport {\n  deriveBarNavValueFromUrl,\n  parseJsonArrayProp,\n  shouldResyncBarNavProps,\n} 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  /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\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('tabsJson')\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, this.tabsJson)) {\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    | {\n        itemWidths: number[];\n        itemGap: number;\n        listExtraWidth: number;\n      }\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.tabsJson\n      ? parseJsonArrayProp(this.tabsJson, [])\n      : (this.tabs ?? []);\n  }\n\n  private applyHostProps() {\n    const nextBasePath = this.basePath;\n    const sectionChanged =\n      nextBasePath !== '' &&\n      this.committedSection !== '' &&\n      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(\n      this.currentUrl,\n      this.basePath,\n      tabs,\n    );\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(\n      `[data-tab-id=\"${id}\"]`,\n    ) 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={probe ? undefined : () => {\n          this.overflowRovingFocused = false;\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-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\n                  ? 0\n                  : -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                  '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\"\n                    variant=\"dot\"\n                    hasRing={false}\n                    label=\"\"\n                    aria-hidden=\"true\"\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 =\n      this.basePath === '' || this.committedSection === this.basePath;\n    const hasTabs =\n      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            'bar-nav--dashboard': this.navStyle === 'dashboard',\n            'bar-nav--settings': this.navStyle === 'settings',\n            'bar-nav--tabs-collapsed':\n              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}`}>\n                  {this.renderTabList(this.resolvedTabs, true)}\n                </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                as=\"span\"\n                variant=\"text-body-medium\"\n                emphasis\n                color=\"primary\"\n                wrap=\"nowrap\"\n              >\n                {this.heading}\n              </ds-text>\n            )}\n\n            {hasTabs && this.hasOverflowTabs && (\n              <ds-button-unfilled variant=\"icon\"\n                class={{\n                  'bar-nav__overflow-trigger': true,\n                }}\n                icon=\"Ellipses\"\n                activeFill={false}\n                hasBorder={false}\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.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\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"
     },
     {