@ds-mo/ui 9.1.0 → 9.2.1

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

@@ -0,0 +1,154 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "title": "Avatar",
+  "description": "Compact icon avatar for visually identifying a person, group, channel, or conversation type.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/avatar",
+    "source": "src/wc/components/Avatar/Avatar.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Compact icon avatar for visually identifying a person, group, channel, or conversation type.",
+      "useWhen": [
+        "A list or message composition needs a consistent 32px circular identity marker represented by an icon."
+      ],
+      "avoidWhen": [
+        "The identity has a supplied photograph, initials, presence state, or editable profile behavior; those variants are not part of this primitive."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-conversation-list-item",
+        "component:ds-message"
+      ],
+      "accessibility": [
+        "Provide label only when the icon communicates meaning that surrounding text does not already convey.",
+        "Omit label when the owning row or message already provides an equivalent accessible name."
+      ],
+      "responsiveBehavior": [
+        "The avatar keeps its fixed 32px circle and 20px icon at every viewport size."
+      ],
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Avatar/Avatar.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "icon": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "icon",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Canonical IcoMo icon name displayed inside the avatar."
+        },
+        "iconColor": {
+          "type": "IconColor",
+          "resolvedType": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})`",
+          "attribute": "icon-color",
+          "default": "'secondary'",
+          "required": false,
+          "mutable": false,
+          "description": "Semantic color for the icon. Use primary to surface unread or current identity state."
+        },
+        "label": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "label",
+          "required": false,
+          "mutable": false,
+          "description": "Optional accessible label. Omit when the surrounding content already conveys the meaning."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "icon": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "icon",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Canonical IcoMo icon name displayed inside the avatar."
+      },
+      "iconColor": {
+        "type": "IconColor",
+        "resolvedType": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})`",
+        "attribute": "icon-color",
+        "default": "'secondary'",
+        "required": false,
+        "mutable": false,
+        "description": "Semantic color for the icon. Use primary to surface unread or current identity state."
+      },
+      "label": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "label",
+        "required": false,
+        "mutable": false,
+        "description": "Optional accessible label. Omit when the surrounding content already conveys the meaning."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-avatar",
+      "react": "DsAvatar",
+      "angular": "DsAvatar"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-avatar.js';",
+        "example": "<ds-avatar></ds-avatar>"
+      },
+      "react": {
+        "import": "import { DsAvatar } from '@ds-mo/ui/react';",
+        "example": "<DsAvatar />"
+      },
+      "angular": {
+        "import": "import { DsAvatar } from '@ds-mo/ui/angular/ds-avatar';",
+        "example": "<ds-avatar></ds-avatar>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens",
+    "@ds-mo/icons"
+  ],
+  "registryDependencies": [
+    "icon"
+  ],
+  "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",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Avatar/Avatar.tsx",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\nimport type { IconColor } from '../Icon/Icon';\n\n@Component({\n  tag: 'ds-avatar',\n  styleUrl: 'Avatar.css',\n  scoped: true,\n})\nexport class Avatar {\n  /** Canonical IcoMo icon name displayed inside the avatar. */\n  @Prop() icon: string = '';\n\n  /** Semantic color for the icon. Use primary to surface unread or current identity state. */\n  @Prop() iconColor: IconColor = 'secondary';\n\n  /** Optional accessible label. Omit when the surrounding content already conveys the meaning. */\n  @Prop() label: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        <span\n          class=\"avatar\"\n          role={this.label ? 'img' : 'presentation'}\n          aria-label={this.label}\n          aria-hidden={!this.label ? 'true' : undefined}\n        >\n          <ds-icon name={this.icon} size=\"md\" color={this.iconColor} />\n        </span>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -314,12 +314,12 @@
   "files": [
     {
       "path": "src/wc/components/BarNav/BarNav.css",
-      "content": "@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(--dimension-space-050);\n  height: var(--dimension-size-400);\n  min-width: var(--dimension-size-400);\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--dimension-radius-025);\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(--dimension-radius-025);\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(--dimension-space-025);\n  white-space: nowrap;\n}\n\n.bar-nav__tab-label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\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(--dimension-size-400);\n  padding-block: var(--dimension-space-075);\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(--dimension-size-400);\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(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\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-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",
       "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  /** 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.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.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      }\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  /** 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.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-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            '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                isActive={this.menuOpen}\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.menuOpen}\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          />\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('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",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/button-unfilled.json

@@ -525,12 +525,12 @@
   "files": [
     {
       "path": "src/wc/components/ButtonUnfilled/ButtonUnfilled.css",
-      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-unfilled-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-unfilled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-unfilled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-unfilled {\n  width: 100%;\n}\n\n.button-unfilled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-button-unfilled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n     Active always promotes foreground to primary (toggle mode). */\n}\n\n.button-unfilled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-unfilled--rounded {\n  --ds-control-radius: var(--dimension-radius-half);\n}\n\n.button-unfilled--active {\n  color: var(--ds-button-unfilled-fg-active);\n}\n\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Fallback if interaction-fill is omitted (should be rare — prefer keep the util class). */\n.button-unfilled--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n  --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n  --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n  --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n  --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n  --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n  --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n  --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n  --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-media-background);\n  --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n  --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n  --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n  --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n\n.button-unfilled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-unfilled__label {\n  position: relative;\n  z-index: 2;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.button-unfilled__label--loading {\n  visibility: hidden;\n}\n\n.button-unfilled > .button-unfilled__loader-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.button-unfilled__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-unfilled-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-unfilled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-unfilled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-unfilled {\n  width: 100%;\n}\n\n.button-unfilled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-button-unfilled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n     Active always promotes foreground to primary (toggle mode). */\n}\n\n.button-unfilled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-unfilled--rounded {\n  --ds-control-radius: var(--dimension-radius-half);\n}\n\n.button-unfilled--active {\n  color: var(--ds-button-unfilled-fg-active);\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. Keep the\n * pressed wash visible for the popup's complete rendered lifecycle even when\n * shell chrome opts out of selected fills with `activeFill=false`.\n */\n.button-unfilled.button-unfilled--expanded::after,\n.button-unfilled.button-unfilled--expanded:hover:not(:disabled)::after {\n  background: var(--ds-interaction-pressed);\n}\n\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Fallback if interaction-fill is omitted (should be rare — prefer keep the util class). */\n.button-unfilled--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n  --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n  --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n  --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n  --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n  --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n  --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n  --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n  --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-media-background);\n  --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n  --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n  --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n  --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n\n.button-unfilled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-unfilled__label {\n  position: relative;\n  z-index: 2;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.button-unfilled__label--loading {\n  visibility: hidden;\n}\n\n.button-unfilled > .button-unfilled__loader-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.button-unfilled__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonUnfilledBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonUnfilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonUnfilledWidth = ControlWidth;\nexport type ButtonUnfilledPopup = 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonUnfilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-unfilled',\n  styleUrl: 'ButtonUnfilled.css',\n  scoped: true,\n})\nexport class ButtonUnfilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonUnfilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonUnfilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonUnfilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Active/selected visual state. Always promotes foreground to primary. */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * When active, render the selected interaction fill.\n   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n   * `false` so selection is foreground-only (primary color, no fill).\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: ButtonUnfilledBackground | undefined;\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: ButtonUnfilledPopup | undefined;\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n    this.dsChange.emit(!this.isActive);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot && !this.isLoading;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if (this.isActive && this.activeFill) {\n      return 'var(--ds-interaction-active)';\n    }\n    return 'var(--ds-button-unfilled-dot-ring)';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const bg = this.background;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected': this.isActive && this.activeFill && !this.isInactive,\n      'ds-interaction-fill--on-faint': bg === 'faint',\n      'ds-interaction-fill--on-medium': bg === 'medium',\n      'ds-interaction-fill--on-bold': bg === 'bold',\n      'ds-interaction-fill--on-strong': bg === 'strong',\n      'ds-interaction-fill--on-translucent': bg === 'translucent',\n      'ds-interaction-fill--on-inverted': bg === 'inverted',\n      'ds-interaction-fill--on-media': bg === 'media',\n      'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n      'button-unfilled--active': this.isActive,\n      'button-unfilled--bordered': this.hasBorder,\n      'button-unfilled--rounded': this.rounded,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-unfilled--icon': this.variant === 'icon',\n      'button-unfilled--label': this.variant === 'label',\n      'button-unfilled--icon-label': this.variant === 'icon-label',\n      'button-unfilled--background-faint': bg === 'faint',\n      'button-unfilled--background-medium': bg === 'medium',\n      'button-unfilled--background-bold': bg === 'bold',\n      'button-unfilled--background-strong': bg === 'strong',\n      'button-unfilled--background-translucent': bg === 'translucent',\n      'button-unfilled--background-inverted': bg === 'inverted',\n      'button-unfilled--background-media': bg === 'media',\n      'button-unfilled--on-always-dark': bg === 'always-dark',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-unfilled-host': true,\n          'button-unfilled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.haspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-unfilled__icon-wrap ds-interaction-fill__content\">\n              {this.isLoading\n                ? <ds-loader size={iconSize} color=\"inherit\" />\n                : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              }\n              {this.showDot && (\n                <ds-badge\n                  class=\"button-unfilled__dot\"\n                  variant=\"dot\"\n                  background={this.dotRing}\n                  label=\"\"\n                  aria-hidden=\"true\"\n                />\n              )}\n            </span>\n          )}\n          {this.showLabel && (\n            <ds-text\n              class={{\n                'button-unfilled__label': true,\n                'button-unfilled__label--loading': this.isLoading && this.variant === 'label',\n                'ds-interaction-fill__content': true,\n              }}\n              as=\"span\"\n              variant={textVariant}\n              emphasis\n              color=\"inherit\"\n            >\n              {this.label}\n            </ds-text>\n          )}\n          {this.isLoading && this.variant === 'label' && (\n            <span class=\"button-unfilled__loader-overlay ds-interaction-fill__content\">\n              <ds-loader size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonUnfilledBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonUnfilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonUnfilledWidth = ControlWidth;\nexport type ButtonUnfilledPopup = 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonUnfilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-unfilled',\n  styleUrl: 'ButtonUnfilled.css',\n  scoped: true,\n})\nexport class ButtonUnfilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonUnfilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonUnfilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonUnfilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Active/selected visual state. Always promotes foreground to primary. */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * When active, render the selected interaction fill.\n   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n   * `false` so selection is foreground-only (primary color, no fill).\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: ButtonUnfilledBackground | undefined;\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: ButtonUnfilledPopup | undefined;\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n    this.dsChange.emit(!this.isActive);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot && !this.isLoading;\n  }\n\n  /** An expanded popup trigger is visually active even when selection is controlled separately. */\n  private get visuallyActive(): boolean {\n    return this.isActive || this.expanded === true;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if (this.isActive && this.activeFill) {\n      return 'var(--ds-interaction-active)';\n    }\n    return 'var(--ds-button-unfilled-dot-ring)';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const bg = this.background;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected': this.isActive && this.activeFill && !this.isInactive,\n      'ds-interaction-fill--on-faint': bg === 'faint',\n      'ds-interaction-fill--on-medium': bg === 'medium',\n      'ds-interaction-fill--on-bold': bg === 'bold',\n      'ds-interaction-fill--on-strong': bg === 'strong',\n      'ds-interaction-fill--on-translucent': bg === 'translucent',\n      'ds-interaction-fill--on-inverted': bg === 'inverted',\n      'ds-interaction-fill--on-media': bg === 'media',\n      'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n      'button-unfilled--active': this.visuallyActive,\n      'button-unfilled--expanded': this.expanded === true && !this.isInactive,\n      'button-unfilled--bordered': this.hasBorder,\n      'button-unfilled--rounded': this.rounded,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-unfilled--icon': this.variant === 'icon',\n      'button-unfilled--label': this.variant === 'label',\n      'button-unfilled--icon-label': this.variant === 'icon-label',\n      'button-unfilled--background-faint': bg === 'faint',\n      'button-unfilled--background-medium': bg === 'medium',\n      'button-unfilled--background-bold': bg === 'bold',\n      'button-unfilled--background-strong': bg === 'strong',\n      'button-unfilled--background-translucent': bg === 'translucent',\n      'button-unfilled--background-inverted': bg === 'inverted',\n      'button-unfilled--background-media': bg === 'media',\n      'button-unfilled--on-always-dark': bg === 'always-dark',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-unfilled-host': true,\n          'button-unfilled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.haspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-unfilled__icon-wrap ds-interaction-fill__content\">\n              {this.isLoading\n                ? <ds-loader size={iconSize} color=\"inherit\" />\n                : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              }\n              {this.showDot && (\n                <ds-badge\n                  class=\"button-unfilled__dot\"\n                  variant=\"dot\"\n                  background={this.dotRing}\n                  label=\"\"\n                  aria-hidden=\"true\"\n                />\n              )}\n            </span>\n          )}\n          {this.showLabel && (\n            <ds-text\n              class={{\n                'button-unfilled__label': true,\n                'button-unfilled__label--loading': this.isLoading && this.variant === 'label',\n                'ds-interaction-fill__content': true,\n              }}\n              as=\"span\"\n              variant={textVariant}\n              emphasis\n              color=\"inherit\"\n            >\n              {this.label}\n            </ds-text>\n          )}\n          {this.isLoading && this.variant === 'label' && (\n            <span class=\"button-unfilled__loader-overlay ds-interaction-fill__content\">\n              <ds-loader size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/code-block.json

@@ -0,0 +1,150 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "code-block",
+  "title": "CodeBlock",
+  "description": "Scrollable monospace code surface with optional language or filename context and copy action.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/code-block",
+    "source": "src/wc/components/CodeBlock/CodeBlock.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Scrollable monospace code surface with optional language or filename context and copy action.",
+      "useWhen": [
+        "A message or document displays fenced code that readers may copy."
+      ],
+      "avoidWhen": [
+        "A live editor, terminal, diff viewer, or syntax-highlighting environment is required."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-markdown",
+        "component:ds-button-unfilled"
+      ],
+      "accessibility": [
+        "The copy action has explicit status wording and the code remains selectable text.",
+        "Language and filename labels supplement rather than replace the code content."
+      ],
+      "responsiveBehavior": [
+        "Long lines scroll horizontally and do not widen the owning transcript."
+      ],
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "code": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "code",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        },
+        "filename": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "filename",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        },
+        "language": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "language",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "code": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "code",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      },
+      "filename": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "filename",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      },
+      "language": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "language",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-code-block",
+      "react": "DsCodeBlock",
+      "angular": "DsCodeBlock"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-code-block.js';",
+        "example": "<ds-code-block></ds-code-block>"
+      },
+      "react": {
+        "import": "import { DsCodeBlock } from '@ds-mo/ui/react';",
+        "example": "<DsCodeBlock />"
+      },
+      "angular": {
+        "import": "import { DsCodeBlock } from '@ds-mo/ui/angular/ds-code-block';",
+        "example": "<ds-code-block></ds-code-block>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "button-unfilled",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/CodeBlock/CodeBlock.css",
+      "content": ":host {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.code-block {\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-background-strong-neutral);\n  color: var(--color-foreground-faint-neutral);\n  box-sizing: border-box;\n}\n\n.code-block__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-height: var(--dimension-size-400);\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n  background: var(--color-background-strong-neutral);\n  box-sizing: border-box;\n}\n\npre {\n  margin: 0;\n  padding: var(--dimension-space-150);\n  overflow: auto;\n  font-family: var(--typography-fontfamily-mono);\n  font-size: var(--typography-fontsize-sm);\n  line-height: var(--typography-lineheight-sm);\n  tab-size: 2;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\ncode {\n  font: inherit;\n  white-space: pre;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/CodeBlock/CodeBlock.tsx",
+      "content": "import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ds-code-block',\n  styleUrl: 'CodeBlock.css',\n  scoped: true,\n})\nexport class CodeBlock {\n  @Prop() code: string = '';\n  @Prop() language: string = '';\n  @Prop() filename: string = '';\n\n  @State() private copied: boolean = false;\n  private copiedTimer?: ReturnType<typeof setTimeout>;\n\n  disconnectedCallback() {\n    if (this.copiedTimer) clearTimeout(this.copiedTimer);\n  }\n\n  private copy = async () => {\n    if (!navigator.clipboard || !this.code) return;\n    await navigator.clipboard.writeText(this.code);\n    this.copied = true;\n    if (this.copiedTimer) clearTimeout(this.copiedTimer);\n    this.copiedTimer = setTimeout(() => {\n      this.copied = false;\n    }, 2000);\n  };\n\n  render() {\n    const label = this.filename || this.language || 'Code';\n    return (\n      <Host>\n        <figure class=\"code-block\">\n          <figcaption class=\"code-block__header\">\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"on-strong\">\n              {label}\n            </ds-text>\n            <ds-button-unfilled\n              variant=\"icon\"\n              icon={this.copied ? 'Check' : 'Copy'}\n              size=\"xs\"\n              aria-label={this.copied ? 'Copied' : 'Copy code'}\n              hasBorder={false}\n              onDsClick={this.copy}\n            />\n          </figcaption>\n          <pre>\n            <code>{this.code}</code>\n          </pre>\n        </figure>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}