@ds-mo/ui 12.6.1 → 12.7.0

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

@@ -38,7 +38,9 @@
         "Area, Help, and Account events express intent while the application owns navigation and product behavior."
       ],
       "responsiveBehavior": [
-        "The pane fills the mobile content stage while the bottom bar remains available."
+        "The pane fills the mobile content stage while the bottom bar remains available.",
+        "The sheet header and scrollable navigation body each use the shared 8px chrome inset; large destination controls retain their independent 40px density.",
+        "Dashboard and Settings preserve their supplied visual groups with an 8px gap between destinations inside a section and a 32px gap between sections."
       ],
       "references": [
         {
@@ -305,12 +307,12 @@
   "files": [
     {
       "path": "src/wc/components/MobileSheetNav/MobileSheetNav.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: var(--color-background-primary);\n}\n\n:host(:not([open])) {\n  display: none;\n}\n\n.mobile-sheet-nav {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  height: 100%;\n  min-height: 0;\n  background: var(--color-background-primary);\n}\n\n.mobile-sheet-nav__header {\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n.mobile-sheet-nav__header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-sheet-nav__brand {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  min-width: 0;\n}\n\n.mobile-sheet-nav__logo {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-500);\n  height: var(--dimension-size-500);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__logo-mark {\n  width: var(--dimension-iconography-lg);\n  height: var(--dimension-iconography-lg);\n  flex: 0 0 auto;\n}\n\n.mobile-sheet-nav__context {\n  justify-self: center;\n}\n\n.mobile-sheet-nav__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-sheet-nav__body {\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  padding: var(--dimension-space-200);\n}\n\n.mobile-sheet-nav__items {\n  display: grid;\n  gap: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__item {\n  appearance: none;\n  width: 100%;\n  height: var(--ds-control-height);\n  min-height: var(--ds-control-height);\n  padding-inline: var(--ds-control-padding-inline);\n  border: 0;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  cursor: pointer;\n  text-align: start;\n  box-sizing: border-box;\n}\n\n.mobile-sheet-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__item-label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-sheet-nav__dot {\n  margin-inline-start: auto;\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: var(--color-background-primary);\n}\n\n:host(:not([open])) {\n  display: none;\n}\n\n.mobile-sheet-nav {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  height: 100%;\n  min-height: 0;\n  background: var(--color-background-primary);\n}\n\n.mobile-sheet-nav__header {\n  position: relative;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.mobile-sheet-nav__header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-sheet-nav__brand {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  min-width: 0;\n}\n\n.mobile-sheet-nav__logo {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-500);\n  height: var(--dimension-size-500);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__logo-mark {\n  width: var(--dimension-iconography-lg);\n  height: var(--dimension-iconography-lg);\n  flex: 0 0 auto;\n}\n\n.mobile-sheet-nav__context {\n  justify-self: center;\n}\n\n.mobile-sheet-nav__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-sheet-nav__body {\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n.mobile-sheet-nav__sections {\n  display: grid;\n  gap: var(--dimension-space-400);\n}\n\n.mobile-sheet-nav__items {\n  display: grid;\n  gap: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__item {\n  appearance: none;\n  width: 100%;\n  height: var(--ds-control-height);\n  min-height: var(--ds-control-height);\n  padding-inline: var(--ds-control-padding-inline);\n  border: 0;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  cursor: default;\n  text-align: start;\n  box-sizing: border-box;\n}\n\n.mobile-sheet-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__item-label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-sheet-nav__dot {\n  margin-inline-start: auto;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/MobileSheetNav/MobileSheetNav.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport { deriveActiveIdFromUrl } from '../PanelNav/panel-nav-utils';\nimport type { PanelNavGroup, PanelNavItem } from '../PanelNav/panel-nav-types';\n\ntype MobileSheetNavHeaderDestinationId = 'account' | 'help';\n\nconst CONTEXT_TABS = [\n  { id: 'dashboard', label: 'Dashboard', icon: 'Dashboard', variant: 'icon' as const },\n  { id: 'settings', label: 'Settings', icon: 'Gear', variant: 'icon' as const },\n];\n\n@Component({\n  tag: 'ds-mobile-sheet-nav',\n  styleUrl: 'MobileSheetNav.css',\n  scoped: true,\n})\nexport class MobileSheetNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ reflect: true }) open: boolean = false;\n  @Prop() browseContext: NavChromeStyle = 'dashboard';\n  @Prop() dashboardGroups: PanelNavGroup[] = [];\n  @Prop() settingsGroups: PanelNavGroup[] = [];\n  @Prop() currentUrl: string = '';\n  @Prop() navigationLabel: string = 'Application navigation';\n  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  @Prop() helpLabel: string = 'Help & Support';\n\n  @Event() dsAreaSelect!: EventEmitter<string>;\n  @Event() dsBrowseContextChange!: EventEmitter<NavChromeStyle>;\n  @Event() dsClose!: EventEmitter<void>;\n\n  private get groups(): PanelNavGroup[] {\n    return this.browseContext === 'settings' ? this.settingsGroups : this.dashboardGroups;\n  }\n\n  private get items(): PanelNavItem[] {\n    return this.groups.flatMap(group => group.items);\n  }\n\n  private get activeId(): string {\n    return deriveActiveIdFromUrl(this.currentUrl, [\n      ...this.dashboardGroups.flatMap(group => group.items),\n      ...this.settingsGroups.flatMap(group => group.items),\n    ]);\n  }\n\n  @Watch('open')\n  handleOpenChange(open: boolean) {\n    if (!open) return;\n    requestAnimationFrame(() => {\n      const selected = this.el.querySelector<HTMLElement>('[aria-current=\"page\"]');\n      const first = this.el.querySelector<HTMLElement>('.mobile-sheet-nav__item');\n      (selected ?? first)?.focus({ preventScroll: true });\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open || event.key !== 'Escape') return;\n    event.preventDefault();\n    this.dsClose.emit();\n  }\n\n  private handleContextChange = (event: CustomEvent<string>) => {\n    const next = event.detail === 'settings' ? 'settings' : 'dashboard';\n    if (next === this.browseContext) return;\n    this.dsBrowseContextChange.emit(next);\n  };\n\n  private renderItem(item: PanelNavItem) {\n    const selected = item.id === this.activeId;\n    return (\n      <button\n        type=\"button\"\n        class={{\n          'mobile-sheet-nav__item': true,\n          'mobile-sheet-nav__item--selected': selected,\n          'ds-control--lg': true,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.dsAreaSelect.emit(item.id)}\n      >\n        <ds-icon\n          class=\"ds-interaction-fill__content\"\n          name={item.icon}\n          size=\"lg\"\n          color=\"inherit\"\n        />\n        <ds-text\n          class=\"mobile-sheet-nav__item-label ds-interaction-fill__content\"\n          as=\"span\"\n          variant=\"text-body-large\"\n          emphasis={selected}\n          color=\"inherit\"\n        >\n          {item.label}\n        </ds-text>\n        {item.dot && (\n          <ds-badge\n            class=\"mobile-sheet-nav__dot ds-interaction-fill__content\"\n            variant=\"dot\"\n            hasRing={false}\n            label=\"\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </button>\n    );\n  }\n\n  private renderLogo() {\n    return (\n      <span class=\"mobile-sheet-nav__logo\" aria-hidden=\"true\">\n        {/* eslint-disable-next-line local/prefer-ds-icon -- Motive brand mark is not part of the IcoMo runtime catalog. */}\n        <svg\n          class=\"mobile-sheet-nav__logo-mark\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          focusable=\"false\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </span>\n    );\n  }\n\n  private renderHeaderDestination(\n    id: MobileSheetNavHeaderDestinationId,\n    icon: string,\n    label: string\n  ) {\n    return (\n      <ds-tooltip label={label} side=\"bottom\" size=\"sm\">\n        <ds-button-unfilled\n          variant=\"icon\"\n          size=\"lg\"\n          icon={icon}\n          aria-label={label}\n          activeFill={false}\n          hasBorder={false}\n          onDsClick={() => this.dsAreaSelect.emit(id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const contextTabs = [\n      { ...CONTEXT_TABS[0], label: this.dashboardLabel },\n      { ...CONTEXT_TABS[1], label: this.settingsLabel },\n    ];\n\n    return (\n      <Host aria-hidden={this.open ? undefined : 'true'} inert={this.open ? undefined : true}>\n        <section\n          id=\"ds-mobile-sheet-nav\"\n          class=\"mobile-sheet-nav\"\n        >\n          <header class=\"mobile-sheet-nav__header\">\n            <div class=\"mobile-sheet-nav__brand\">{this.renderLogo()}</div>\n            <ds-tab-group\n              class=\"mobile-sheet-nav__context\"\n              tabs={contextTabs}\n              value={this.browseContext}\n              aria-label=\"Browse context\"\n              onDsChange={this.handleContextChange}\n            />\n            <div class=\"mobile-sheet-nav__actions\">\n              {this.renderHeaderDestination('help', 'CircleQuestion', this.helpLabel)}\n              {this.renderHeaderDestination('account', 'Avatar', this.accountLabel)}\n            </div>\n          </header>\n\n          <nav class=\"mobile-sheet-nav__body\" aria-label={this.navigationLabel}>\n            <div class=\"mobile-sheet-nav__items\">\n              {this.items.map(item => this.renderItem(item))}\n            </div>\n          </nav>\n        </section>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport { deriveActiveIdFromUrl } from '../PanelNav/panel-nav-utils';\nimport type { PanelNavGroup, PanelNavItem } from '../PanelNav/panel-nav-types';\n\ntype MobileSheetNavHeaderDestinationId = 'account' | 'help';\n\nconst CONTEXT_TABS = [\n  { id: 'dashboard', label: 'Dashboard', icon: 'Dashboard', variant: 'icon' as const },\n  { id: 'settings', label: 'Settings', icon: 'Gear', variant: 'icon' as const },\n];\n\n@Component({\n  tag: 'ds-mobile-sheet-nav',\n  styleUrl: 'MobileSheetNav.css',\n  scoped: true,\n})\nexport class MobileSheetNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ reflect: true }) open: boolean = false;\n  @Prop() browseContext: NavChromeStyle = 'dashboard';\n  @Prop() dashboardGroups: PanelNavGroup[] = [];\n  @Prop() settingsGroups: PanelNavGroup[] = [];\n  @Prop() currentUrl: string = '';\n  @Prop() navigationLabel: string = 'Application navigation';\n  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  @Prop() helpLabel: string = 'Help & Support';\n\n  @Event() dsAreaSelect!: EventEmitter<string>;\n  @Event() dsBrowseContextChange!: EventEmitter<NavChromeStyle>;\n  @Event() dsClose!: EventEmitter<void>;\n\n  private get groups(): PanelNavGroup[] {\n    return this.browseContext === 'settings' ? this.settingsGroups : this.dashboardGroups;\n  }\n\n  private get activeId(): string {\n    return deriveActiveIdFromUrl(this.currentUrl, [\n      ...this.dashboardGroups.flatMap(group => group.items),\n      ...this.settingsGroups.flatMap(group => group.items),\n    ]);\n  }\n\n  @Watch('open')\n  handleOpenChange(open: boolean) {\n    if (!open) return;\n    requestAnimationFrame(() => {\n      const selected = this.el.querySelector<HTMLElement>('[aria-current=\"page\"]');\n      const first = this.el.querySelector<HTMLElement>('.mobile-sheet-nav__item');\n      (selected ?? first)?.focus({ preventScroll: true });\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open || event.key !== 'Escape') return;\n    event.preventDefault();\n    this.dsClose.emit();\n  }\n\n  private handleContextChange = (event: CustomEvent<string>) => {\n    const next = event.detail === 'settings' ? 'settings' : 'dashboard';\n    if (next === this.browseContext) return;\n    this.dsBrowseContextChange.emit(next);\n  };\n\n  private renderItem(item: PanelNavItem) {\n    const selected = item.id === this.activeId;\n    return (\n      <button\n        type=\"button\"\n        class={{\n          'mobile-sheet-nav__item': true,\n          'mobile-sheet-nav__item--selected': selected,\n          'ds-control--lg': true,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.dsAreaSelect.emit(item.id)}\n      >\n        <ds-icon\n          class=\"ds-interaction-fill__content\"\n          name={item.icon}\n          size=\"lg\"\n          color=\"inherit\"\n        />\n        <ds-text\n          class=\"mobile-sheet-nav__item-label ds-interaction-fill__content\"\n          as=\"span\"\n          variant=\"text-body-large\"\n          emphasis={selected}\n          color=\"inherit\"\n        >\n          {item.label}\n        </ds-text>\n        {item.dot && (\n          <ds-badge\n            class=\"mobile-sheet-nav__dot ds-interaction-fill__content\"\n            variant=\"dot\"\n            hasRing={false}\n            label=\"\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </button>\n    );\n  }\n\n  private renderLogo() {\n    return (\n      <span class=\"mobile-sheet-nav__logo\" aria-hidden=\"true\">\n        {/* eslint-disable-next-line local/prefer-ds-icon -- Motive brand mark is not part of the IcoMo runtime catalog. */}\n        <svg\n          class=\"mobile-sheet-nav__logo-mark\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          focusable=\"false\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </span>\n    );\n  }\n\n  private renderHeaderDestination(\n    id: MobileSheetNavHeaderDestinationId,\n    icon: string,\n    label: string\n  ) {\n    return (\n      <ds-tooltip label={label} side=\"bottom\" size=\"sm\">\n        <ds-button-unfilled\n          variant=\"icon\"\n          size=\"lg\"\n          icon={icon}\n          aria-label={label}\n          activeFill={false}\n          hasBorder={false}\n          onDsClick={() => this.dsAreaSelect.emit(id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const contextTabs = [\n      { ...CONTEXT_TABS[0], label: this.dashboardLabel },\n      { ...CONTEXT_TABS[1], label: this.settingsLabel },\n    ];\n\n    return (\n      <Host aria-hidden={this.open ? undefined : 'true'} inert={this.open ? undefined : true}>\n        <section\n          id=\"ds-mobile-sheet-nav\"\n          class=\"mobile-sheet-nav\"\n        >\n          <header class=\"mobile-sheet-nav__header ds-chrome-grid ds-chrome-space--md\">\n            <div class=\"mobile-sheet-nav__brand\">{this.renderLogo()}</div>\n            <ds-tab-group\n              class=\"mobile-sheet-nav__context\"\n              tabs={contextTabs}\n              value={this.browseContext}\n              aria-label=\"Browse context\"\n              onDsChange={this.handleContextChange}\n            />\n            <div class=\"mobile-sheet-nav__actions\">\n              {this.renderHeaderDestination('help', 'CircleQuestion', this.helpLabel)}\n              {this.renderHeaderDestination('account', 'Avatar', this.accountLabel)}\n            </div>\n          </header>\n\n          <nav\n            class=\"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md\"\n            aria-label={this.navigationLabel}\n          >\n            <div class=\"mobile-sheet-nav__sections\">\n              {this.groups\n                .filter(group => group.items.length > 0)\n                .map(group => (\n                  <div class=\"mobile-sheet-nav__items\">\n                    {group.items.map(item => this.renderItem(item))}\n                  </div>\n                ))}\n            </div>\n          </nav>\n        </section>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -269,12 +269,12 @@
   "files": [
     {
       "path": "src/wc/components/Modal/Modal.css",
-      "content": ":host {\n  display: contents;\n}\n\n.modal-dialog {\n  display: none;\n  flex-direction: column;\n  max-width: none;\n  max-height: calc(100vh - 2 * var(--dimension-space-200));\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border: 0;\n  border-radius: var(--dimension-radius-050);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  outline: none;\n  box-sizing: border-box;\n}\n\n.modal-dialog[open] {\n  display: flex;\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog::backdrop {\n  background-color: var(--color-background-shade);\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing {\n  animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n.modal-dialog--closing::backdrop {\n  animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n@keyframes modalDialogIn {\n  from { opacity: 0; transform: scale(0.97) translateY(4px); }\n  to   { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to   { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .modal-dialog[open],\n  .modal-dialog--closing {\n    animation: none;\n    transform: none;\n  }\n\n  .modal-dialog::backdrop {\n    animation: none;\n    opacity: 1;\n  }\n\n  .modal-dialog--closing,\n  .modal-dialog--closing::backdrop {\n    opacity: 0;\n  }\n}\n\n.modal-header {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  height: var(--dimension-size-800);\n  padding: var(--dimension-space-200);\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  color: var(--color-foreground-primary);\n}\n\nds-text.modal-heading {\n  flex: 1 1 0;\n  width: auto;\n  min-width: 0;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.modal-close-tooltip {\n  flex: 0 0 auto;\n}\n\n.modal-content {\n  min-height: 0;\n  padding: var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n}\n\n.modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-800);\n  padding: var(--dimension-space-200);\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.modal-footer--empty {\n  display: none;\n}\n\n.modal-footer slot {\n  display: contents;\n}\n",
+      "content": "@import '../../utils/chrome-layout.css';\n\n:host {\n  display: contents;\n}\n\n.modal-dialog {\n  display: none;\n  flex-direction: column;\n  max-width: none;\n  max-height: calc(100vh - 2 * var(--dimension-space-200));\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border: 0;\n  border-radius: var(--dimension-radius-050);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  outline: none;\n  box-sizing: border-box;\n}\n\n.modal-dialog[open] {\n  display: flex;\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog::backdrop {\n  background-color: var(--color-background-shade);\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing {\n  animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n.modal-dialog--closing::backdrop {\n  animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n@keyframes modalDialogIn {\n  from { opacity: 0; transform: scale(0.97) translateY(4px); }\n  to   { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to   { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .modal-dialog[open],\n  .modal-dialog--closing {\n    animation: none;\n    transform: none;\n  }\n\n  .modal-dialog::backdrop {\n    animation: none;\n    opacity: 1;\n  }\n\n  .modal-dialog--closing,\n  .modal-dialog--closing::backdrop {\n    opacity: 0;\n  }\n}\n\n.modal-header {\n  height: var(--dimension-size-800);\n  flex: 0 0 auto;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  color: var(--color-foreground-primary);\n}\n\nds-text.modal-heading {\n  flex: 1 1 0;\n  width: auto;\n  min-width: 0;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.modal-close-tooltip {\n  flex: 0 0 auto;\n}\n\n.modal-content {\n  min-height: 0;\n  padding: var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n}\n\n.modal-footer {\n  justify-content: flex-start;\n  height: var(--dimension-size-800);\n  flex: 0 0 auto;\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.modal-footer__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.modal-footer--empty {\n  display: none;\n}\n\n.modal-footer__actions slot {\n  display: contents;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Modal/Modal.tsx",
-      "content": "import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\nexport type ModalCloseReason = 'close-button' | 'escape' | 'backdrop';\n\nexport interface ModalCloseDetail {\n  reason: ModalCloseReason;\n  originalEvent: Event;\n}\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n  sm: 'var(--dimension-modal-width-sm)',\n  md: 'var(--dimension-modal-width-md)',\n  lg: 'var(--dimension-modal-width-lg)',\n};\n\nconst FOCUSABLE_SEL = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'iframe',\n  '[contenteditable=\"true\"]',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\n\n@Component({\n  tag: 'ds-modal',\n  styleUrl: 'Modal.css',\n  scoped: true,\n})\nexport class Modal {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() heading!: string;\n  @Prop() closeAriaLabel: string = 'Close';\n  @Prop() modalWidth: ModalWidth | string = 'md';\n  /** Optional id reference for explanatory content in the default slot. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @State() private closing: boolean = false;\n  @State() private hasFooter: boolean = false;\n\n  /** Emitted when an internal dismissal control requests that the modal close. */\n  @Event() dsClose!: EventEmitter<ModalCloseDetail>;\n  /** Emitted after exit motion completes, the top layer closes, and focus is restored. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  private titleId = `ds-modal-title-${++modalIdCounter}`;\n  private dialogEl: HTMLDialogElement | null = null;\n  private previousFocus: HTMLElement | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.updateFooterPresence();\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.clearCloseTimer();\n    if (this.dialogEl?.open) this.dialogEl.close();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.clearCloseTimer();\n      const alreadyOpen = !!this.dialogEl?.open;\n      this.closing = false;\n      if (!this.dialogEl || alreadyOpen) return;\n      this.previousFocus = document.activeElement as HTMLElement | null;\n      this.dialogEl.showModal();\n      requestAnimationFrame(() => {\n        if (this.open && this.dialogEl?.open) this.focusClose();\n      });\n    } else if (this.dialogEl?.open) {\n      this.closing = true;\n      const closeAnimationMs = this.closeAnimationMs;\n      if (closeAnimationMs <= 0) {\n        this.finishClose();\n        return;\n      }\n      this.closeTimer = setTimeout(() => {\n        this.closeTimer = null;\n        this.finishClose();\n      }, closeAnimationMs);\n    }\n  }\n\n  private focusClose() {\n    const close = this.el.querySelector('ds-button-unfilled.modal-close') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    void close?.setFocus?.();\n  }\n\n  private clearCloseTimer() {\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private requestClose(reason: ModalCloseReason, originalEvent: Event) {\n    if (!this.open || this.closing || !this.dialogEl?.open) return;\n    this.dsClose.emit({ reason, originalEvent });\n    this.open = false;\n  }\n\n  private updateFooterPresence(slot?: HTMLSlotElement) {\n    const assignedNodes = slot?.assignedNodes() ?? [];\n    this.hasFooter =\n      assignedNodes.some(node => node.nodeType !== Node.TEXT_NODE || !!node.textContent?.trim()) ||\n      this.el.querySelector('[slot=\"footer\"]') !== null;\n  }\n\n  private handleCancel(event: Event) {\n    event.preventDefault();\n    this.requestClose('escape', event);\n  }\n\n  private handleBackdropPointerDown(event: PointerEvent) {\n    if (event.target === this.dialogEl) this.requestClose('backdrop', event);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== 'Tab' || !this.dialogEl) return;\n    const focusables = Array.from(\n      this.dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)\n    ).filter(element =>\n      !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true'\n    );\n    if (!focusables.length) {\n      event.preventDefault();\n      this.dialogEl.focus();\n      return;\n    }\n    const first = focusables[0];\n    const last = focusables[focusables.length - 1];\n    const active = document.activeElement;\n    if (event.shiftKey && (active === first || active === this.dialogEl)) {\n      event.preventDefault();\n      last.focus();\n    } else if (!event.shiftKey && active === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n\n  private get resolvedWidth(): string {\n    if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n      return WIDTH_MAP[this.modalWidth];\n    }\n    return this.modalWidth as string;\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    if (!this.dialogEl?.open) return;\n    this.dialogEl.close();\n    this.closing = false;\n    this.clearCloseTimer();\n    this.previousFocus?.focus?.();\n    this.previousFocus = null;\n    this.dsAfterClose.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          ref={(element?: HTMLDialogElement) => {\n            this.dialogEl = element ?? null;\n          }}\n          class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n          aria-labelledby={this.titleId}\n          aria-describedby={this.ariaDescribedby}\n          onCancel={(event: Event) => this.handleCancel(event)}\n          onPointerDown={(event: PointerEvent) => this.handleBackdropPointerDown(event)}\n          onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}\n          style={{\n            width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`,\n          }}\n        >\n          <div class=\"modal-header\">\n            <ds-text\n              class=\"modal-heading\"\n              as=\"h2\"\n              variant=\"text-title-medium\"\n              emphasis\n              color=\"primary\"\n              lineTruncation={1}\n              textId={this.titleId}\n            >\n              {this.heading}\n            </ds-text>\n            <ds-tooltip class=\"modal-close-tooltip\" label={this.closeAriaLabel} side=\"bottom\" size=\"sm\">\n              <ds-button-unfilled\n                class=\"modal-close\"\n                variant=\"icon\"\n                icon=\"Cross\"\n                size=\"md\"\n                aria-label={this.closeAriaLabel}\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.requestClose('close-button', event.detail)\n                }\n              />\n            </ds-tooltip>\n          </div>\n          <div class=\"modal-content\">\n            <slot />\n          </div>\n          <div\n            class={{\n              'modal-footer': true,\n              'modal-footer--empty': !this.hasFooter,\n            }}\n          >\n            <slot\n              name=\"footer\"\n              onSlotchange={(event: Event) =>\n                this.updateFooterPresence(event.currentTarget as HTMLSlotElement)\n              }\n            />\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\nexport type ModalCloseReason = 'close-button' | 'escape' | 'backdrop';\n\nexport interface ModalCloseDetail {\n  reason: ModalCloseReason;\n  originalEvent: Event;\n}\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n  sm: 'var(--dimension-modal-width-sm)',\n  md: 'var(--dimension-modal-width-md)',\n  lg: 'var(--dimension-modal-width-lg)',\n};\n\nconst FOCUSABLE_SEL = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'iframe',\n  '[contenteditable=\"true\"]',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\n\n@Component({\n  tag: 'ds-modal',\n  styleUrl: 'Modal.css',\n  scoped: true,\n})\nexport class Modal {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() heading!: string;\n  @Prop() closeAriaLabel: string = 'Close';\n  @Prop() modalWidth: ModalWidth | string = 'md';\n  /** Optional id reference for explanatory content in the default slot. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @State() private closing: boolean = false;\n  @State() private hasFooter: boolean = false;\n\n  /** Emitted when an internal dismissal control requests that the modal close. */\n  @Event() dsClose!: EventEmitter<ModalCloseDetail>;\n  /** Emitted after exit motion completes, the top layer closes, and focus is restored. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  private titleId = `ds-modal-title-${++modalIdCounter}`;\n  private dialogEl: HTMLDialogElement | null = null;\n  private previousFocus: HTMLElement | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.updateFooterPresence();\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.clearCloseTimer();\n    if (this.dialogEl?.open) this.dialogEl.close();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.clearCloseTimer();\n      const alreadyOpen = !!this.dialogEl?.open;\n      this.closing = false;\n      if (!this.dialogEl || alreadyOpen) return;\n      this.previousFocus = document.activeElement as HTMLElement | null;\n      this.dialogEl.showModal();\n      requestAnimationFrame(() => {\n        if (this.open && this.dialogEl?.open) this.focusClose();\n      });\n    } else if (this.dialogEl?.open) {\n      this.closing = true;\n      const closeAnimationMs = this.closeAnimationMs;\n      if (closeAnimationMs <= 0) {\n        this.finishClose();\n        return;\n      }\n      this.closeTimer = setTimeout(() => {\n        this.closeTimer = null;\n        this.finishClose();\n      }, closeAnimationMs);\n    }\n  }\n\n  private focusClose() {\n    const close = this.el.querySelector('ds-button-unfilled.modal-close') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    void close?.setFocus?.();\n  }\n\n  private clearCloseTimer() {\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private requestClose(reason: ModalCloseReason, originalEvent: Event) {\n    if (!this.open || this.closing || !this.dialogEl?.open) return;\n    this.dsClose.emit({ reason, originalEvent });\n    this.open = false;\n  }\n\n  private updateFooterPresence(slot?: HTMLSlotElement) {\n    const assignedNodes = slot?.assignedNodes() ?? [];\n    this.hasFooter =\n      assignedNodes.some(node => node.nodeType !== Node.TEXT_NODE || !!node.textContent?.trim()) ||\n      this.el.querySelector('[slot=\"footer\"]') !== null;\n  }\n\n  private handleCancel(event: Event) {\n    event.preventDefault();\n    this.requestClose('escape', event);\n  }\n\n  private handleBackdropPointerDown(event: PointerEvent) {\n    if (event.target === this.dialogEl) this.requestClose('backdrop', event);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== 'Tab' || !this.dialogEl) return;\n    const focusables = Array.from(\n      this.dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)\n    ).filter(element =>\n      !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true'\n    );\n    if (!focusables.length) {\n      event.preventDefault();\n      this.dialogEl.focus();\n      return;\n    }\n    const first = focusables[0];\n    const last = focusables[focusables.length - 1];\n    const active = document.activeElement;\n    if (event.shiftKey && (active === first || active === this.dialogEl)) {\n      event.preventDefault();\n      last.focus();\n    } else if (!event.shiftKey && active === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n\n  private get resolvedWidth(): string {\n    if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n      return WIDTH_MAP[this.modalWidth];\n    }\n    return this.modalWidth as string;\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    if (!this.dialogEl?.open) return;\n    this.dialogEl.close();\n    this.closing = false;\n    this.clearCloseTimer();\n    this.previousFocus?.focus?.();\n    this.previousFocus = null;\n    this.dsAfterClose.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          ref={(element?: HTMLDialogElement) => {\n            this.dialogEl = element ?? null;\n          }}\n          class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n          aria-labelledby={this.titleId}\n          aria-describedby={this.ariaDescribedby}\n          onCancel={(event: Event) => this.handleCancel(event)}\n          onPointerDown={(event: PointerEvent) => this.handleBackdropPointerDown(event)}\n          onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}\n          style={{\n            width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`,\n          }}\n        >\n          <div class=\"modal-header ds-chrome-row ds-chrome-space--lg\">\n            <ds-text\n              class=\"modal-heading\"\n              as=\"h2\"\n              variant=\"text-title-medium\"\n              emphasis\n              color=\"primary\"\n              lineTruncation={1}\n              textId={this.titleId}\n            >\n              {this.heading}\n            </ds-text>\n            <ds-tooltip class=\"modal-close-tooltip\" label={this.closeAriaLabel} side=\"bottom\" size=\"sm\">\n              <ds-button-unfilled\n                class=\"modal-close\"\n                variant=\"icon\"\n                icon=\"Cross\"\n                size=\"md\"\n                aria-label={this.closeAriaLabel}\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.requestClose('close-button', event.detail)\n                }\n              />\n            </ds-tooltip>\n          </div>\n          <div class=\"modal-content\">\n            <slot />\n          </div>\n          <div\n            class={{\n              'modal-footer': true,\n              'ds-chrome-row': true,\n              'ds-chrome-space--lg': true,\n              'modal-footer--empty': !this.hasFooter,\n            }}\n          >\n            <div class=\"modal-footer__actions\">\n              <slot\n                name=\"footer\"\n                onSlotchange={(event: Event) =>\n                  this.updateFooterPresence(event.currentTarget as HTMLSlotElement)\n                }\n              />\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -619,12 +619,12 @@
   "files": [
     {
       "path": "src/wc/components/PanelNav/PanelNav.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/scrollbar-hidden.css';\n\n/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n  /* ─ Sizes ─ */\n  --_nav-width:              var(--dimension-panel-width-2xs);\n  --_nav-width-collapsed:    var(--dimension-size-600);\n  --_nav-item-height:        var(--dimension-size-400, 32px);\n  --_nav-padding-x:          var(--dimension-space-100, 8px);\n  --_nav-padding-y:          var(--dimension-space-100, 8px);\n  /* gear button outer width = padding*2 + icon */\n  --_nav-footer-btn-w:       calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n  /* ─ Motion ─ */\n  /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n     *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n  --_nav-speed:               var(--ds-panel-nav-speed, 1);\n  --_nav-expand-dur:          calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-expand-motion:       var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-dur:      calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-motion:   var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur:  calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n  /* ─ Colours – default chrome (app surfaces) ─ */\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Default chrome overrides ────────────────────────────────────────────── */\n\n/* Shell-owned chrome (bg + wash) — panel is a transparent frame. */\n:host-context(ds-shell-app:not([gradient-preset='none'])) .panel-nav {\n  background-color: transparent;\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers on these classes later. */\n.panel-nav--dashboard,\n.panel-nav--settings {\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Shell ───────────────────────────────────────────────────────────────── */\n\n.panel-nav {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: var(--_nav-width);\n  min-width: var(--_nav-width);\n  height: 100%;\n  background-color: var(--_nav-bg);\n  border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n  box-sizing: border-box;\n  overflow: visible;\n  transition:\n    width var(--_nav-expand-motion),\n    min-width var(--_nav-expand-motion),\n    background-color var(--effect-motion-short-3, 200ms ease),\n    border-color var(--effect-motion-short-3, 200ms ease);\n  font-family: var(--typography-font-family, system-ui);\n  isolation: isolate;\n}\n\n.panel-nav__header,\n.panel-nav__body,\n.panel-nav__footer {\n  position: relative;\n  z-index: 3;\n}\n\n.panel-nav--collapsed {\n  width: var(--_nav-width-collapsed);\n  min-width: var(--_nav-width-collapsed);\n}\n\n/* ── Header ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__header {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600, 48px);\n  padding: var(--dimension-space-100, 8px);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n  transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n  all: unset;\n  /* Re-assert after unset — required for `.ds-interaction-fill` stacking. */\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025, 2px));\n  cursor: pointer;\n  color: var(--_nav-fg-primary);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n  /* Hover/press: `.ds-interaction-fill` (tokens from --_nav-* via --ds-interaction-*). */\n}\n\n.panel-nav--breakpoint-locked .panel-nav__header-btn {\n  cursor: default;\n}\n\n/* Logo — visible by default; instant swap to toggle on hover (no crossfade overlap) */\n.panel-nav__header-logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 2;\n  opacity: 1;\n}\n\n.panel-nav__m-mark {\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  display: block;\n}\n\n/* Toggle icon — stacked on logo; under hover wash (::after z-index 3) */\n.panel-nav__header-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn:hover .panel-nav__header-toggle { opacity: 1; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  padding: var(--dimension-space-100, 8px);\n  box-sizing: border-box;\n}\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n}\n\n/*\n * Section headers — typography via ds-text (text-caption + emphasis).\n * Element selector so display:flex beats Text's inline-block, and padding\n * isn't clobbered by sharing `.panel-nav__item-label-text` on the same host.\n */\nds-text.panel-nav__group-label {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  text-transform: uppercase;\n  color: var(--_nav-fg-secondary);\n  user-select: none;\n  height: var(--dimension-size-300, 24px);\n  /* Former nested pad: group-label (075) + item-label-text (025). */\n  padding: 0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));\n  white-space: nowrap;\n  overflow: hidden;\n  max-height: var(--dimension-size-300, 24px);\n  opacity: 1;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    max-height var(--_nav-label-fade-motion) 0ms,\n    padding var(--_nav-label-fade-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n  all: unset;\n  /* Re-assert after unset — required for `.ds-interaction-fill` stacking. */\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: 0 var(--dimension-space-075, 6px);\n  height: var(--dimension-size-400, 32px);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025, 2px));\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n  transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n  /* Hover/press: `.ds-interaction-fill` — no --selected (icon/type weight only). */\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n  color: var(--_nav-fg-primary);\n  /* Bold typography via ds-text (text-body-medium + emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  position: relative;\n  z-index: 2;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  position: relative;\n  z-index: 2;\n  flex: 1;\n  min-width: 0;\n  height: var(--typography-lineheight-md, 20px);\n  opacity: 1;\n  /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n  /* stylelint-disable-next-line color-named -- mask luminance stops, not theme colors */\n  mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  /* stylelint-disable-next-line color-named -- mask luminance stops, not theme colors */\n  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  mask-size: 200% 100%;\n  -webkit-mask-size: 200% 100%;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    mask-position var(--_nav-label-fade-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n  padding: 0 var(--ds-control-label-inset);\n}\n\n/* ── Item notification dot — 20px suffix zone matches the icon geometry ──── */\n\n.panel-nav__item-dot-box {\n  position: absolute;\n  z-index: 2;\n  right: var(--dimension-space-075, 6px);\n  top: var(--dimension-space-075, 6px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  pointer-events: none;\n}\n\n.panel-nav__item-dot {\n  transition:\n    transform var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n  transform: translate(\n    calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)),\n    calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px))\n  );\n}\n\n.panel-nav--animating .panel-nav__item-label {\n  text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n  opacity: 0;\n  pointer-events: none;\n  text-overflow: clip;\n  mask-position: 100% 0;\n  -webkit-mask-position: 100% 0;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    mask-position var(--_nav-label-fade-out-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed ds-text.panel-nav__group-label {\n  opacity: 0;\n  max-height: 0;\n  padding: 0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));\n  pointer-events: none;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    max-height var(--_nav-label-fade-out-motion) 0ms,\n    padding var(--_nav-label-fade-out-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n  position: relative;\n  flex-shrink: 0;\n  /* single row: padding*2 + item */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n  transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n  /* two rows: padding*2 + item*2 + gap */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  position: absolute;\n  left: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  --ds-button-unfilled-fg: var(--_nav-fg-secondary);\n  --ds-button-unfilled-fg-active: var(--_nav-fg-primary);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n  position: absolute;\n  /* Expanded row: balanced shell inset with an 8px gear-to-user gap. */\n  left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-100, 8px));\n  right: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  width: auto;\n  min-width: 0;\n  transition:\n    left var(--_nav-expand-motion),\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion);\n}\n\n/* Popup-open state keeps the native footer trigger visibly pressed. */\n.panel-nav__footer-user--menu-expanded::after,\n.panel-nav__footer-user--menu-expanded:hover:not(:disabled)::after {\n  background: var(--_nav-pressed);\n}\n\n.panel-nav__footer-user--menu-expanded {\n  color: var(--_nav-fg-primary);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n  /* Compact column keeps the intentionally tighter 4px vertical gap. */\n  left: var(--_nav-padding-x);\n  top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n  text-align: right;\n  position: absolute;\n  left: var(--dimension-space-075, 6px);\n  right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n  top: 50%;\n  transform: translateY(-50%);\n  flex: none;\n  height: var(--typography-lineheight-md, 20px);\n  mask-image: none;\n  -webkit-mask-image: none;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n  opacity: 0;\n  pointer-events: none;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n  position: absolute;\n  left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n  top: 0;\n  bottom: 0;\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n  left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n/*\n * Center the caption glyph on the Circle icon. Don't use inset:0 + flex — the\n * inner `.ds-text__element { width: 100% }` stretches and left-aligns the letter.\n * Translate-centering keeps the complete caption metric box on the icon center;\n * the caption variant remains the sole owner of its line-height.\n * (Do not set `inset: auto` after top/left — it resets them.)\n */\nds-text.panel-nav__user-initial,\nds-text.panel-nav__user-initial.ds-text--caption {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  transform: translate(-50%, -50%);\n  display: block;\n  width: max-content;\n  max-width: none;\n  min-width: 0;\n  text-align: center;\n  color: inherit;\n  pointer-events: none;\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n/* The resize overlay line — extends past the right edge; keep above workspace content */\n.panel-nav__resize-handle {\n  position: absolute;\n  top: 0;\n  /* Centered on the right edge: --dimension-space-050 outside + inside = --dimension-space-100 hit zone */\n  right: var(--dimension-space-n050, -4px);\n  bottom: 0;\n  width: var(--dimension-space-100, 8px);\n  z-index: 20;\n  cursor: ew-resize;\n  touch-action: none;\n  /* Needs a real background for Safari hit-testing */\n  background: transparent;\n}\n\n/* Safari requires non-transparent fill for hit testing */\n.panel-nav__resize-handle::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  /* stylelint-disable-next-line color-named -- near-invisible hit-test fill; not a theme color */\n  background: rgba(0, 0, 0, 0.001);\n}\n\n/* Resize overlay line */\n.panel-nav__resize-handle::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: var(--dimension-stroke-width-025, 2px);\n  background: var(--color-foreground-primary);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n  opacity: 1;\n}\n\n/* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel-nav,\n  .panel-nav *,\n  .panel-nav *::before,\n  .panel-nav *::after,\n  .panel-nav__resize-handle,\n  .panel-nav__resize-handle::before,\n  .panel-nav__resize-handle::after {\n    /* Near-instant — browsers treat 0 as \"no transition\" and can skip the end state. */\n    transition-duration: var(--effect-animation-duration-instant) !important;\n    animation-duration: var(--effect-animation-duration-instant) !important;\n    transition-delay: var(--effect-animation-duration-instant) !important;\n  }\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/scrollbar-hidden.css';\n\n/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n  /* ─ Sizes ─ */\n  --_nav-width:              var(--dimension-panel-width-2xs);\n  --_nav-width-collapsed:    var(--dimension-size-600);\n  --_nav-item-height:        var(--dimension-size-400, 32px);\n  --_nav-padding-x:          var(--dimension-space-100, 8px);\n  --_nav-padding-y:          var(--dimension-space-100, 8px);\n  /* gear button outer width = padding*2 + icon */\n  --_nav-footer-btn-w:       calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n  /* ─ Motion ─ */\n  /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n     *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n  --_nav-speed:               var(--ds-panel-nav-speed, 1);\n  --_nav-expand-dur:          calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-expand-motion:       var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-dur:      calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-motion:   var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur:  calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n  /* ─ Colours – default chrome (app surfaces) ─ */\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Default chrome overrides ────────────────────────────────────────────── */\n\n/* Shell-owned chrome (bg + wash) — panel is a transparent frame. */\n:host-context(ds-shell-app:not([gradient-preset='none'])) .panel-nav {\n  background-color: transparent;\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers on these classes later. */\n.panel-nav--dashboard,\n.panel-nav--settings {\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Shell ───────────────────────────────────────────────────────────────── */\n\n.panel-nav {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: var(--_nav-width);\n  min-width: var(--_nav-width);\n  height: 100%;\n  background-color: var(--_nav-bg);\n  border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n  box-sizing: border-box;\n  overflow: visible;\n  transition:\n    width var(--_nav-expand-motion),\n    min-width var(--_nav-expand-motion),\n    background-color var(--effect-motion-short-3, 200ms ease),\n    border-color var(--effect-motion-short-3, 200ms ease);\n  font-family: var(--typography-font-family, system-ui);\n  isolation: isolate;\n}\n\n.panel-nav__header,\n.panel-nav__body,\n.panel-nav__footer {\n  position: relative;\n  z-index: 3;\n}\n\n.panel-nav--collapsed {\n  width: var(--_nav-width-collapsed);\n  min-width: var(--_nav-width-collapsed);\n}\n\n/* ── Header ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__header {\n  height: var(--dimension-size-600, 48px);\n  flex-shrink: 0;\n  border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n  transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n  all: unset;\n  /* Re-assert after unset — required for `.ds-interaction-fill` stacking. */\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025, 2px));\n  cursor: default;\n  color: var(--_nav-fg-primary);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n  /* Hover/press: `.ds-interaction-fill` (tokens from --_nav-* via --ds-interaction-*). */\n}\n\n.panel-nav--breakpoint-locked .panel-nav__header-btn {\n  cursor: default;\n}\n\n/* Logo — visible by default; instant swap to toggle on hover (no crossfade overlap) */\n.panel-nav__header-logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 2;\n  opacity: 1;\n}\n\n.panel-nav__m-mark {\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  display: block;\n}\n\n/* Toggle icon — stacked on logo; under hover wash (::after z-index 3) */\n.panel-nav__header-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn:hover .panel-nav__header-toggle { opacity: 1; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.panel-nav__sections {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  width: 100%;\n}\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n}\n\n/*\n * Section headers — typography via ds-text (text-caption + emphasis).\n * Element selector so display:flex beats Text's inline-block, and padding\n * isn't clobbered by sharing `.panel-nav__item-label-text` on the same host.\n */\nds-text.panel-nav__group-label {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  text-transform: uppercase;\n  color: var(--_nav-fg-secondary);\n  user-select: none;\n  height: var(--dimension-size-300, 24px);\n  /* Former nested pad: group-label (075) + item-label-text (025). */\n  padding: 0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));\n  white-space: nowrap;\n  overflow: hidden;\n  max-height: var(--dimension-size-300, 24px);\n  opacity: 1;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    max-height var(--_nav-label-fade-motion) 0ms,\n    padding var(--_nav-label-fade-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n  all: unset;\n  /* Re-assert after unset — required for `.ds-interaction-fill` stacking. */\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: 0 var(--dimension-space-075, 6px);\n  height: var(--dimension-size-400, 32px);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025, 2px));\n  cursor: default;\n  color: var(--_nav-fg-secondary);\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n  transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n  /* Hover/press: `.ds-interaction-fill` — no --selected (icon/type weight only). */\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n  color: var(--_nav-fg-primary);\n  /* Bold typography via ds-text (text-body-medium + emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  position: relative;\n  z-index: 2;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  position: relative;\n  z-index: 2;\n  flex: 1;\n  min-width: 0;\n  height: var(--typography-lineheight-md, 20px);\n  opacity: 1;\n  /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n  /* stylelint-disable-next-line color-named -- mask luminance stops, not theme colors */\n  mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  /* stylelint-disable-next-line color-named -- mask luminance stops, not theme colors */\n  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  mask-size: 200% 100%;\n  -webkit-mask-size: 200% 100%;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    mask-position var(--_nav-label-fade-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n  padding: 0 var(--ds-control-label-inset);\n}\n\n/* ── Item notification dot — 20px suffix zone matches the icon geometry ──── */\n\n.panel-nav__item-dot-box {\n  position: absolute;\n  z-index: 2;\n  right: var(--dimension-space-075, 6px);\n  top: var(--dimension-space-075, 6px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  pointer-events: none;\n}\n\n.panel-nav__item-dot {\n  transition:\n    transform var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n  transform: translate(\n    calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)),\n    calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px))\n  );\n}\n\n.panel-nav--animating .panel-nav__item-label {\n  text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n  opacity: 0;\n  pointer-events: none;\n  text-overflow: clip;\n  mask-position: 100% 0;\n  -webkit-mask-position: 100% 0;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    mask-position var(--_nav-label-fade-out-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed ds-text.panel-nav__group-label {\n  opacity: 0;\n  max-height: 0;\n  padding: 0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));\n  pointer-events: none;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    max-height var(--_nav-label-fade-out-motion) 0ms,\n    padding var(--_nav-label-fade-out-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n  position: relative;\n  flex-shrink: 0;\n  /* single row: padding*2 + item */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n  transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n  /* two rows: padding*2 + item*2 + gap */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  position: absolute;\n  left: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  --ds-button-unfilled-fg: var(--_nav-fg-secondary);\n  --ds-button-unfilled-fg-active: var(--_nav-fg-primary);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n  position: absolute;\n  /* Expanded row: balanced shell inset with an 8px gear-to-user gap. */\n  left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-100, 8px));\n  right: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  width: auto;\n  min-width: 0;\n  transition:\n    left var(--_nav-expand-motion),\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion);\n}\n\n/* Popup-open state keeps the native footer trigger visibly pressed. */\n.panel-nav__footer-user--menu-expanded::after,\n.panel-nav__footer-user--menu-expanded:hover:not(:disabled)::after {\n  background: var(--_nav-pressed);\n}\n\n.panel-nav__footer-user--menu-expanded {\n  color: var(--_nav-fg-primary);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n  /* Compact column keeps the intentionally tighter 4px vertical gap. */\n  left: var(--_nav-padding-x);\n  top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n  text-align: right;\n  position: absolute;\n  left: var(--dimension-space-075, 6px);\n  right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n  top: 50%;\n  transform: translateY(-50%);\n  flex: none;\n  height: var(--typography-lineheight-md, 20px);\n  mask-image: none;\n  -webkit-mask-image: none;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n  opacity: 0;\n  pointer-events: none;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n  position: absolute;\n  left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n  top: 0;\n  bottom: 0;\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n  left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n/*\n * Center the caption glyph on the Circle icon. Don't use inset:0 + flex — the\n * inner `.ds-text__element { width: 100% }` stretches and left-aligns the letter.\n * Translate-centering keeps the complete caption metric box on the icon center;\n * the caption variant remains the sole owner of its line-height.\n * (Do not set `inset: auto` after top/left — it resets them.)\n */\nds-text.panel-nav__user-initial,\nds-text.panel-nav__user-initial.ds-text--caption {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  transform: translate(-50%, -50%);\n  display: block;\n  width: max-content;\n  max-width: none;\n  min-width: 0;\n  text-align: center;\n  color: inherit;\n  pointer-events: none;\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n/* The resize overlay line — extends past the right edge; keep above workspace content */\n.panel-nav__resize-handle {\n  position: absolute;\n  top: 0;\n  /* Centered on the right edge: --dimension-space-050 outside + inside = --dimension-space-100 hit zone */\n  right: var(--dimension-space-n050, -4px);\n  bottom: 0;\n  width: var(--dimension-space-100, 8px);\n  z-index: 20;\n  cursor: ew-resize;\n  touch-action: none;\n  /* Needs a real background for Safari hit-testing */\n  background: transparent;\n}\n\n/* Safari requires non-transparent fill for hit testing */\n.panel-nav__resize-handle::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  /* stylelint-disable-next-line color-named -- near-invisible hit-test fill; not a theme color */\n  background: rgba(0, 0, 0, 0.001);\n}\n\n/* Resize overlay line */\n.panel-nav__resize-handle::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: var(--dimension-stroke-width-025, 2px);\n  background: var(--color-foreground-primary);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n  opacity: 1;\n}\n\n/* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel-nav,\n  .panel-nav *,\n  .panel-nav *::before,\n  .panel-nav *::after,\n  .panel-nav__resize-handle,\n  .panel-nav__resize-handle::before,\n  .panel-nav__resize-handle::after {\n    /* Near-instant — browsers treat 0 as \"no transition\" and can skip the end state. */\n    transition-duration: var(--effect-animation-duration-instant) !important;\n    animation-duration: var(--effect-animation-duration-instant) !important;\n    transition-delay: var(--effect-animation-duration-instant) !important;\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/PanelNav/PanelNav.tsx",
-      "content": "import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  State,\n  Element,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport {\n  deriveActiveIdFromUrl,\n  panelNavWidthTransitionMs,\n  parsePanelNavGroups,\n  resolvePanelNavDisableVt,\n  resolvePanelNavStyle,\n  resolvePanelNavToggle,\n  shouldResyncPanelNavGroups,\n  shouldResyncPanelNavStyle,\n} from './panel-nav-utils';\nimport {\n  PANEL_NAV_USER_MENU_ANCHOR_ID,\n  PANEL_NAV_USER_MENU_PLACEMENT,\n  type PanelNavGroup,\n  type PanelNavItem,\n  type PanelNavRouterMode,\n  type PanelNavUserActionDetail,\n} from './panel-nav-types';\nimport { scrollEdgeFadeClassMap } from '../../utils/scroll-edge-fade';\nimport { prefersReducedMotion } from '../../utils/resolve-css-time-ms';\n\n@Component({\n  tag: 'ds-panel-nav',\n  styleUrl: 'PanelNav.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class PanelNav {\n  /** Style slot: `dashboard` or `settings`. Colors match for now;\n   *  class hooks reserved for texture/glyph layers. Property: `navStyle`. Attribute: `nav-style`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /** When `true`, style changes apply synchronously — host app owns view transitions. */\n  @Prop() disableViewTransition: boolean = false;\n\n  /** Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute. */\n  @Prop() groups: string | PanelNavGroup[] = '[]';\n\n  /** How items with `href` render:\n   *  - `anchor` (default): native `<a href>` — works with routers that intercept anchors.\n   *  - `event`: always `<button>`; host handles navigation via `dsNavSelect`. */\n  @Prop() routerMode: PanelNavRouterMode = 'anchor';\n\n  /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n  @Prop() activeId: string = '';\n\n  /** Whether the nav is in collapsed (icon-only) state.\n   *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */\n  @Prop({ mutable: true }) collapsed: boolean = false;\n\n  /** Viewport width (px) below which the nav locks in icon-only mode. 0 = disabled. */\n  @Prop() breakpoint: number = 0;\n\n  /** `localStorage` key used to persist the collapsed state across page loads.\n   *  When set, collapsed state is restored on mount and written on each toggle. */\n  @Prop() storageKey: string = '';\n\n  /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n   *  When set the component derives the active item by matching item `href` values\n   *  against this string (longest segment-boundary prefix wins), overriding `activeId`. */\n  @Prop() currentUrl: string = '';\n\n  /** Display name for the footer user section */\n  @Prop() userName: string = '';\n\n  /** Single character shown in the collapsed avatar */\n  @Prop() userInitial: string = '';\n\n  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  /** Keep the account-menu trigger visually active while its popup is open or closing. */\n  @Prop() accountMenuExpanded: boolean = false;\n  @Prop() dashboardNavigationLabel: string = 'Dashboard navigation';\n  @Prop() settingsNavigationLabel: string = 'Settings navigation';\n  @Prop() expandNavigationLabel: string = 'Expand navigation';\n  @Prop() collapseNavigationLabel: string = 'Collapse navigation';\n  /** Localized name for the body when overflow makes it a keyboard-scrollable region. */\n  @Prop() navigationItemsLabel: string = 'Navigation items';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Bubbling lifecycle — `ds-shell-app` pauses chrome metrics during width motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Emitted when the footer left button (gear / dashboard) is clicked. */\n  @Event() dsNavFooterAction!: EventEmitter<void>;\n\n  /** Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`. */\n  @Event() dsNavUserAction!: EventEmitter<PanelNavUserActionDetail>;\n\n  @Element() el!: HTMLElement;\n\n  @State() private renderedStyle: NavChromeStyle = 'dashboard';\n  @State() private parsedGroups: PanelNavGroup[] = [];\n  @State() private isAnimating = false;\n  @State() private rovingIndex: number = 0;\n  @State() private viewportNarrow: boolean = false;\n  @State() private urlDerivedActiveId: string = '';\n  @State() private bodyScrollable = false;\n\n  private transitionCompletionHandler?: (e: TransitionEvent) => void;\n  private transitionFallbackTimer: number | null = null;\n  private resizeObserver?: ResizeObserver;\n  private scrollRegionObserver?: ResizeObserver;\n  private bodyEl?: HTMLElement;\n  private initialRenderComplete = false;\n\n  // Drag-to-resize state (not @State — no re-render needed)\n  private isDragging = false;\n  private dragStartX = 0;\n  private didSnap = false;\n  private lastDeltaX = 0;\n  private edgeOverlayTimer: number | null = null;\n  private globalMouseMoveHandler?: (e: MouseEvent) => void;\n  private globalMouseUpHandler?: () => void;\n\n  @State() private showEdgeOverlay = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n\n  /** The ID that should be treated as active. `currentUrl` matching takes precedence\n   *  over `activeId` when both are present. */\n  private get effectiveActiveId(): string {\n    return this.urlDerivedActiveId || this.activeId;\n  }\n\n  private get effectiveDisableViewTransition(): boolean {\n    return resolvePanelNavDisableVt(\n      this.disableViewTransition,\n      this.el.getAttribute('disable-view-transition')\n    );\n  }\n\n  @Watch('collapsed')\n  onCollapsedChange(_next: boolean, prev: boolean | undefined) {\n    if (prev === undefined || !this.initialRenderComplete) return;\n    this.startCollapseAnimation();\n  }\n\n  @Watch('viewportNarrow')\n  onViewportNarrowChange(next: boolean, prev: boolean | undefined) {\n    if (prev === undefined || !this.initialRenderComplete) return;\n    if (next && this.rovingIndex === 0) {\n      this.rovingIndex = this.getFirstRovingIndex();\n    }\n    this.startCollapseAnimation();\n  }\n\n  @Watch('breakpoint')\n  onBreakpointChange() {\n    this.disconnectResizeObserver();\n    if (this.effectiveBreakpoint() > 0) this.connectResizeObserver();\n  }\n\n  @Watch('groups')\n  onGroupsChange(val: string | PanelNavGroup[]) {\n    this.parsedGroups = parsePanelNavGroups(val);\n    this.rovingIndex = 0;\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('activeId')\n  @Watch('urlDerivedActiveId')\n  onActiveIdChange() {\n    /* Active route updates aria-current only — roving tab stop stays user-controlled. */\n  }\n\n  @Watch('currentUrl')\n  onCurrentUrlChange() {\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('navStyle')\n  onNavStyleChange(newVal: NavChromeStyle) {\n    this.renderedStyle = newVal;\n  }\n\n  componentWillLoad() {\n    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));\n    this.viewportNarrow = this.isViewportNarrow();\n    if (this.storageKey) {\n      try {\n        const stored = localStorage.getItem(this.storageKey);\n        if (stored !== null) this.collapsed = stored === 'true';\n      } catch {\n        /* localStorage unavailable */\n      }\n    }\n    this.onGroupsChange(this.groups);\n    this.syncActiveFromUrl();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    if (this.effectiveBreakpoint() > 0) this.connectResizeObserver();\n    this.connectScrollRegionObserver();\n    this.updateBodyScrollable();\n    this.initialRenderComplete = true;\n  }\n\n  componentDidRender() {\n    this.updateBodyScrollable();\n  }\n\n  disconnectedCallback() {\n    this.disconnectResizeObserver();\n    this.disconnectScrollRegionObserver();\n    this.clearCollapseAnimationCompletion(\n      this.el.querySelector('.panel-nav') as HTMLElement | null\n    );\n    this.clearEdgeOverlayTimer();\n    if (this.globalMouseMoveHandler) {\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    }\n    if (this.globalMouseUpHandler) {\n      window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    }\n  }\n\n  private startCollapseAnimation() {\n    if (this.isAnimating) return;\n    this.isAnimating = true;\n    this.dsChromeTransitionStart.emit({ source: 'panel-nav' });\n    const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n    const widthBefore = panel?.getBoundingClientRect().width ?? 0;\n    this.clearCollapseAnimationCompletion(panel);\n    this.transitionCompletionHandler = (e: TransitionEvent) => {\n      if (e.propertyName === 'width' || e.propertyName === 'min-width') {\n        this.finishCollapseAnimation(panel);\n      }\n    };\n    panel?.addEventListener('transitionend', this.transitionCompletionHandler);\n    panel?.addEventListener('transitioncancel', this.transitionCompletionHandler);\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (!this.isAnimating) return;\n        const widthAfter = panel?.getBoundingClientRect().width ?? 0;\n        if (Math.abs(widthAfter - widthBefore) < 1) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n        if (!panel) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n\n        const fallbackMs = panelNavWidthTransitionMs(getComputedStyle(panel));\n        if (fallbackMs <= 0) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishCollapseAnimation(panel);\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private finishCollapseAnimation(panel: HTMLElement | null) {\n    const wasAnimating = this.isAnimating;\n    this.clearCollapseAnimationCompletion(panel);\n    if (!wasAnimating) return;\n    this.isAnimating = false;\n    this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });\n  }\n\n  private clearCollapseAnimationCompletion(panel: HTMLElement | null) {\n    if (this.transitionCompletionHandler) {\n      panel?.removeEventListener('transitionend', this.transitionCompletionHandler);\n      panel?.removeEventListener('transitioncancel', this.transitionCompletionHandler);\n      this.transitionCompletionHandler = undefined;\n    }\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  private effectiveBreakpoint(): number {\n    if (this.breakpoint > 0) return this.breakpoint;\n    const attributeValue = Number(this.el.getAttribute('breakpoint') ?? 0);\n    return Number.isFinite(attributeValue) && attributeValue > 0 ? attributeValue : 0;\n  }\n\n  private isViewportNarrow(): boolean {\n    const breakpoint = this.effectiveBreakpoint();\n    return typeof window !== 'undefined' && breakpoint > 0 && window.innerWidth < breakpoint;\n  }\n\n  private connectResizeObserver() {\n    this.viewportNarrow = this.isViewportNarrow();\n    this.resizeObserver = new ResizeObserver(() => {\n      this.viewportNarrow = this.isViewportNarrow();\n    });\n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  private disconnectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  private connectScrollRegionObserver() {\n    this.disconnectScrollRegionObserver();\n    if (!this.bodyEl || typeof ResizeObserver === 'undefined') return;\n    this.scrollRegionObserver = new ResizeObserver(() => this.updateBodyScrollable());\n    this.scrollRegionObserver.observe(this.bodyEl);\n  }\n\n  private disconnectScrollRegionObserver() {\n    this.scrollRegionObserver?.disconnect();\n    this.scrollRegionObserver = undefined;\n  }\n\n  private updateBodyScrollable() {\n    const next = Boolean(this.bodyEl && this.bodyEl.scrollHeight > this.bodyEl.clientHeight + 1);\n    if (next !== this.bodyScrollable) this.bodyScrollable = next;\n  }\n\n  /** Derive active ID from the current URL by matching item `href` values.\n   *  Uses longest segment-boundary prefix match. */\n  private syncActiveFromUrl() {\n    if (!this.currentUrl) {\n      this.urlDerivedActiveId = '';\n      return;\n    }\n    this.urlDerivedActiveId = deriveActiveIdFromUrl(this.currentUrl, this.getAllItems());\n  }\n\n  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    if (shouldResyncPanelNavStyle(this.renderedStyle, this.navStyle)) {\n      this.renderedStyle = this.navStyle;\n    }\n\n    if (shouldResyncPanelNavGroups(this.parsedGroups, this.groups)) {\n      this.onGroupsChange(this.groups);\n    } else if (this.currentUrl) {\n      this.syncActiveFromUrl();\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = PanelNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(tick);\n  }\n\n  /** Centralised toggle: updates the desktop preference unless breakpoint-locked. */\n  private applyToggle(next: boolean) {\n    if (this.viewportNarrow) return;\n    this.collapsed = next;\n    if (this.storageKey) {\n      try {\n        localStorage.setItem(this.storageKey, String(next));\n      } catch {\n        /* unavailable */\n      }\n    }\n    this.dsNavToggle.emit(next);\n  }\n\n  private getAllItems(): PanelNavItem[] {\n    return this.parsedGroups.flatMap(g => g.items);\n  }\n\n  private getFirstRovingIndex(): number {\n    return this.viewportNarrow ? 1 : 0;\n  }\n\n  private getFooterRovingIndex(): number {\n    return 1 + this.getAllItems().length;\n  }\n\n  private getUserRovingIndex(): number {\n    return this.getFooterRovingIndex() + 1;\n  }\n\n  private getRovingElement(index: number): HTMLElement | null {\n    const itemCount = this.getAllItems().length;\n    if (index === 0) {\n      return this.viewportNarrow ? null : this.el.querySelector('.panel-nav__header-btn');\n    }\n    if (index >= 1 && index <= itemCount) {\n      const items = this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item');\n      return items[index - 1] ?? null;\n    }\n    if (index === this.getFooterRovingIndex()) {\n      return this.el.querySelector('.panel-nav__footer-btn .button-unfilled');\n    }\n    if (index === this.getUserRovingIndex()) {\n      return this.el.querySelector('.panel-nav__footer-user');\n    }\n    return null;\n  }\n\n  private focusRovingAt(index: number) {\n    this.rovingIndex = index;\n    this.getRovingElement(index)?.focus({ preventScroll: true });\n  }\n\n  private activateRovingIndex(index: number) {\n    const itemCount = this.getAllItems().length;\n    const items = this.getAllItems();\n    if (index === 0) {\n      this.handleToggle();\n      return;\n    }\n    if (index >= 1 && index <= itemCount) {\n      this.handleItemClick(items[index - 1].id);\n      return;\n    }\n    if (index === this.getFooterRovingIndex()) {\n      this.handleFooterAction();\n      return;\n    }\n    if (index === this.getUserRovingIndex()) {\n      const anchor = this.el.querySelector(\n        `#${PANEL_NAV_USER_MENU_ANCHOR_ID}`\n      ) as HTMLElement | null;\n      if (anchor)\n        this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n    }\n  }\n\n  private handleRovingKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.activateRovingIndex(index);\n      return;\n    }\n\n    const footerIdx = this.getFooterRovingIndex();\n    const userIdx = this.getUserRovingIndex();\n    const firstIdx = this.getFirstRovingIndex();\n    let next: number | undefined;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        if (index === userIdx) return;\n        if (index === footerIdx) next = userIdx;\n        else next = index + 1;\n        break;\n      case 'ArrowUp':\n        if (index === firstIdx) return;\n        if (index === userIdx) next = footerIdx;\n        else if (index === footerIdx) next = footerIdx - 1;\n        else next = index - 1;\n        break;\n      case 'ArrowRight':\n        if (index === footerIdx) next = userIdx;\n        else return;\n        break;\n      case 'ArrowLeft':\n        if (index === userIdx) next = footerIdx;\n        else return;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = firstIdx;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = userIdx;\n        break;\n      default:\n        return;\n    }\n\n    if (next === undefined || next === index) return;\n    e.preventDefault();\n    this.focusRovingAt(next);\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private handleToggle() {\n    const next = resolvePanelNavToggle(this.collapsed, this.viewportNarrow);\n    if (next !== null) this.applyToggle(next);\n  }\n\n  /** Toggle the desktop preference. No-op while the breakpoint locks the panel collapsed. */\n  @Method()\n  async toggleCollapsed() {\n    this.handleToggle();\n  }\n\n  private handleFooterAction() {\n    this.dsNavFooterAction.emit();\n  }\n\n  private handleUserAction(e: MouseEvent) {\n    const anchor = e.currentTarget as HTMLElement;\n    this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n  }\n\n  private clearEdgeOverlayTimer() {\n    if (this.edgeOverlayTimer !== null) {\n      window.clearTimeout(this.edgeOverlayTimer);\n      this.edgeOverlayTimer = null;\n    }\n  }\n\n  private handleResizeHandleMouseEnter() {\n    this.clearEdgeOverlayTimer();\n    if (prefersReducedMotion()) {\n      this.showEdgeOverlay = true;\n      return;\n    }\n    this.edgeOverlayTimer = window.setTimeout(() => {\n      this.showEdgeOverlay = true;\n      this.edgeOverlayTimer = null;\n    }, 500);\n  }\n\n  private handleResizeHandleMouseLeave() {\n    if (this.isDragging) return;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n  }\n\n  private handleResizeHandleMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const wasCollapsed = this.collapsed || this.viewportNarrow;\n    this.isDragging = true;\n    this.dragStartX = e.clientX;\n    this.didSnap = false;\n    this.lastDeltaX = 0;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n\n    document.body.style.cursor = 'ew-resize';\n    document.body.style.userSelect = 'none';\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      this.lastDeltaX = Math.abs(deltaX);\n      if (this.didSnap) return;\n      if (!wasCollapsed && deltaX < -8) {\n        this.applyToggle(true);\n        this.didSnap = true;\n      } else if (wasCollapsed && deltaX > 8) {\n        this.applyToggle(false);\n        this.didSnap = true;\n      }\n    };\n\n    const onUp = () => {\n      if (!this.didSnap && this.lastDeltaX < 3) {\n        this.applyToggle(!wasCollapsed);\n      }\n      this.isDragging = false;\n      this.showEdgeOverlay = false;\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n      this.globalMouseMoveHandler = undefined;\n      this.globalMouseUpHandler = undefined;\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\n  }\n\n  private renderFooterAction(isDashboardChrome: boolean) {\n    // Short chrome labels — same string for tip + aria (not \"Open/Go to …\").\n    const footerLabel = isDashboardChrome ? this.settingsLabel : this.dashboardLabel;\n    return (\n      <ds-tooltip label={footerLabel} side=\"right\" size=\"sm\">\n        <ds-button-unfilled\n          variant=\"icon\"\n          class=\"panel-nav__footer-btn\"\n          icon={isDashboardChrome ? 'Gear' : 'Dashboard'}\n          activeFill={false}\n          hasBorder={false}\n          focusTabIndex={this.rovingIndex === this.getFooterRovingIndex() ? 0 : -1}\n          aria-label={footerLabel}\n          onDsClick={() => this.handleFooterAction()}\n          onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getFooterRovingIndex())}\n          onFocusin={() => {\n            this.rovingIndex = this.getFooterRovingIndex();\n          }}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  private renderFooterUser(collapsed: boolean, userName: string, userInitial: string) {\n    // Always wrap so collapse morph CSS can transition on a stable button node.\n    // Tip only when collapsed (empty label → ds-tooltip skips show).\n    const tipLabel = collapsed ? this.accountLabel : '';\n    const userButton = (\n      <button\n        type=\"button\"\n        id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n        class={{\n          'panel-nav__item': true,\n          'panel-nav__item--active': this.accountMenuExpanded,\n          'panel-nav__footer-user': true,\n          'panel-nav__footer-user--menu-expanded': this.accountMenuExpanded,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}\n        aria-label={this.accountLabel}\n        aria-haspopup=\"menu\"\n        aria-expanded={String(this.accountMenuExpanded)}\n        onClick={e => this.handleUserAction(e)}\n        onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}\n        onFocus={() => {\n          this.rovingIndex = this.getUserRovingIndex();\n        }}\n      >\n        <ds-text\n          class=\"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text ds-control--md\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          emphasis\n          color=\"inherit\"\n          lineTruncation={1}\n        >\n          {userName}\n        </ds-text>\n        <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n          <span class=\"panel-nav__footer-icon-expanded\">\n            <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n          </span>\n          <span class=\"panel-nav__footer-icon-collapsed\">\n            <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n            <ds-text\n              class=\"panel-nav__user-initial\"\n              as=\"span\"\n              variant=\"text-caption\"\n              emphasis\n              align=\"center\"\n              color=\"inherit\"\n            >\n              {userInitial}\n            </ds-text>\n          </span>\n        </span>\n      </button>\n    );\n\n    return (\n      <ds-tooltip label={tipLabel} side=\"right\" size=\"sm\">\n        {userButton}\n      </ds-tooltip>\n    );\n  }\n\n  private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n    const isActive = item.id === this.effectiveActiveId;\n    const rovingPosition = idx + 1;\n\n    const itemContent = [\n      <span class=\"panel-nav__item-icon\">\n        <ds-icon name={item.icon} size=\"md\" color=\"inherit\" />\n      </span>,\n      <ds-text\n        class=\"panel-nav__item-label panel-nav__item-label-text ds-control--md\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        emphasis={isActive}\n        color=\"inherit\"\n        lineTruncation={1}\n      >\n        {item.label}\n      </ds-text>,\n      item.dot && (\n        <span class=\"panel-nav__item-dot-box\" aria-hidden=\"true\">\n          <ds-badge class=\"panel-nav__item-dot\" variant=\"dot\" hasRing={collapsed} label=\"\" />\n        </span>\n      ),\n    ];\n\n    const sharedProps = {\n      class: {\n        'panel-nav__item': true,\n        'panel-nav__item--active': isActive,\n        'ds-focus-ring-inset': true,\n        'ds-interaction-fill': true,\n      },\n      'aria-current': isActive ? ('page' as const) : undefined,\n      tabIndex: rovingPosition === this.rovingIndex ? 0 : -1,\n      onClick: () => this.handleItemClick(item.id),\n      onKeyDown: (e: KeyboardEvent) => this.handleRovingKeyDown(e, rovingPosition),\n      onFocus: () => {\n        this.rovingIndex = rovingPosition;\n      },\n    };\n\n    const useAnchor = this.routerMode === 'anchor' && item.href;\n    const control = useAnchor ? (\n      <a {...sharedProps} href={item.href}>\n        {itemContent}\n      </a>\n    ) : (\n      <button {...sharedProps} type=\"button\">\n        {itemContent}\n      </button>\n    );\n\n    // Always wrap so label fade CSS can transition on a stable item node.\n    // Tip only when collapsed (empty label → ds-tooltip skips show).\n    return (\n      <ds-tooltip label={collapsed ? item.label : ''} side=\"right\" size=\"sm\">\n        {control}\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const chromeStyle = this.renderedStyle;\n    const isDashboardChrome = chromeStyle === 'dashboard';\n    const isDashboard = this.navStyle === 'dashboard';\n    const collapsed = this.collapsed || this.viewportNarrow;\n    const { userName, userInitial } = this;\n\n    const navCls: Record<string, boolean> = {\n      'panel-nav': true,\n      'ds-control--md': true,\n      'panel-nav--dashboard': isDashboard,\n      'panel-nav--settings': !isDashboard,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--breakpoint-locked': this.viewportNarrow,\n      'panel-nav--animating': this.isAnimating,\n    };\n\n    return (\n      <Host style={{ display: 'block', position: 'relative' }}>\n        <nav\n          class={navCls}\n          aria-label={\n            isDashboardChrome ? this.dashboardNavigationLabel : this.settingsNavigationLabel\n          }\n        >\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill\"\n              disabled={this.viewportNarrow}\n              tabIndex={!this.viewportNarrow && this.rovingIndex === 0 ? 0 : -1}\n              onClick={() => this.handleToggle()}\n              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, 0)}\n              onFocus={() => {\n                this.rovingIndex = 0;\n              }}\n              aria-label={collapsed ? this.expandNavigationLabel : this.collapseNavigationLabel}\n              aria-expanded={collapsed ? 'false' : 'true'}\n            >\n              {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n              <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n                <svg\n                  class=\"panel-nav__m-mark\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\n              </span>\n              {/* Collapse / expand icon — revealed on hover via CSS */}\n              <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n                <ds-icon\n                  name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n                  size=\"md\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n          </div>\n\n          {/* ── Scrollable body ── */}\n          <div\n            class={{\n              'panel-nav__body': true,\n              'ds-scrollbar-hidden': true,\n              'ds-focus-ring': this.bodyScrollable,\n              ...scrollEdgeFadeClassMap({ edges: 'bottom' }),\n            }}\n            ref={element => {\n              const next = (element as HTMLElement) ?? undefined;\n              if (next === this.bodyEl) return;\n              this.bodyEl = next;\n              this.connectScrollRegionObserver();\n            }}\n            role={this.bodyScrollable ? 'region' : undefined}\n            aria-label={this.bodyScrollable ? this.navigationItemsLabel : undefined}\n            tabIndex={this.bodyScrollable ? 0 : undefined}\n          >\n            {(() => {\n              let flatIdx = 0;\n              return this.parsedGroups.map(group => (\n                <div class=\"panel-nav__group\">\n                  {group.label && (\n                    <ds-text\n                      class=\"panel-nav__group-label ds-control--md\"\n                      as=\"span\"\n                      variant=\"text-caption\"\n                      emphasis\n                      color=\"inherit\"\n                    >\n                      {group.label}\n                    </ds-text>\n                  )}\n                  {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}\n                </div>\n              ));\n            })()}\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            {this.renderFooterAction(isDashboardChrome)}\n            {this.renderFooterUser(collapsed, userName, userInitial)}\n          </div>\n        </nav>\n\n        {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n        {!this.viewportNarrow && (\n          <div\n            class={{\n              'panel-nav__resize-handle': true,\n              'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n            }}\n            onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n            onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n            onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  State,\n  Element,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport {\n  deriveActiveIdFromUrl,\n  panelNavWidthTransitionMs,\n  parsePanelNavGroups,\n  resolvePanelNavDisableVt,\n  resolvePanelNavStyle,\n  resolvePanelNavToggle,\n  shouldResyncPanelNavGroups,\n  shouldResyncPanelNavStyle,\n} from './panel-nav-utils';\nimport {\n  PANEL_NAV_USER_MENU_ANCHOR_ID,\n  PANEL_NAV_USER_MENU_PLACEMENT,\n  type PanelNavGroup,\n  type PanelNavItem,\n  type PanelNavRouterMode,\n  type PanelNavUserActionDetail,\n} from './panel-nav-types';\nimport { scrollEdgeFadeClassMap } from '../../utils/scroll-edge-fade';\nimport { prefersReducedMotion } from '../../utils/resolve-css-time-ms';\n\n@Component({\n  tag: 'ds-panel-nav',\n  styleUrl: 'PanelNav.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class PanelNav {\n  /** Style slot: `dashboard` or `settings`. Colors match for now;\n   *  class hooks reserved for texture/glyph layers. Property: `navStyle`. Attribute: `nav-style`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /** When `true`, style changes apply synchronously — host app owns view transitions. */\n  @Prop() disableViewTransition: boolean = false;\n\n  /** Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute. */\n  @Prop() groups: string | PanelNavGroup[] = '[]';\n\n  /** How items with `href` render:\n   *  - `anchor` (default): native `<a href>` — works with routers that intercept anchors.\n   *  - `event`: always `<button>`; host handles navigation via `dsNavSelect`. */\n  @Prop() routerMode: PanelNavRouterMode = 'anchor';\n\n  /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n  @Prop() activeId: string = '';\n\n  /** Whether the nav is in collapsed (icon-only) state.\n   *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */\n  @Prop({ mutable: true }) collapsed: boolean = false;\n\n  /** Viewport width (px) below which the nav locks in icon-only mode. 0 = disabled. */\n  @Prop() breakpoint: number = 0;\n\n  /** `localStorage` key used to persist the collapsed state across page loads.\n   *  When set, collapsed state is restored on mount and written on each toggle. */\n  @Prop() storageKey: string = '';\n\n  /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n   *  When set the component derives the active item by matching item `href` values\n   *  against this string (longest segment-boundary prefix wins), overriding `activeId`. */\n  @Prop() currentUrl: string = '';\n\n  /** Display name for the footer user section */\n  @Prop() userName: string = '';\n\n  /** Single character shown in the collapsed avatar */\n  @Prop() userInitial: string = '';\n\n  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  /** Keep the account-menu trigger visually active while its popup is open or closing. */\n  @Prop() accountMenuExpanded: boolean = false;\n  @Prop() dashboardNavigationLabel: string = 'Dashboard navigation';\n  @Prop() settingsNavigationLabel: string = 'Settings navigation';\n  @Prop() expandNavigationLabel: string = 'Expand navigation';\n  @Prop() collapseNavigationLabel: string = 'Collapse navigation';\n  /** Localized name for the body when overflow makes it a keyboard-scrollable region. */\n  @Prop() navigationItemsLabel: string = 'Navigation items';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Bubbling lifecycle — `ds-shell-app` pauses chrome metrics during width motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Emitted when the footer left button (gear / dashboard) is clicked. */\n  @Event() dsNavFooterAction!: EventEmitter<void>;\n\n  /** Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`. */\n  @Event() dsNavUserAction!: EventEmitter<PanelNavUserActionDetail>;\n\n  @Element() el!: HTMLElement;\n\n  @State() private renderedStyle: NavChromeStyle = 'dashboard';\n  @State() private parsedGroups: PanelNavGroup[] = [];\n  @State() private isAnimating = false;\n  @State() private rovingIndex: number = 0;\n  @State() private viewportNarrow: boolean = false;\n  @State() private urlDerivedActiveId: string = '';\n  @State() private bodyScrollable = false;\n\n  private transitionCompletionHandler?: (e: TransitionEvent) => void;\n  private transitionFallbackTimer: number | null = null;\n  private resizeObserver?: ResizeObserver;\n  private scrollRegionObserver?: ResizeObserver;\n  private bodyEl?: HTMLElement;\n  private initialRenderComplete = false;\n\n  // Drag-to-resize state (not @State — no re-render needed)\n  private isDragging = false;\n  private dragStartX = 0;\n  private didSnap = false;\n  private lastDeltaX = 0;\n  private edgeOverlayTimer: number | null = null;\n  private globalMouseMoveHandler?: (e: MouseEvent) => void;\n  private globalMouseUpHandler?: () => void;\n\n  @State() private showEdgeOverlay = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n\n  /** The ID that should be treated as active. `currentUrl` matching takes precedence\n   *  over `activeId` when both are present. */\n  private get effectiveActiveId(): string {\n    return this.urlDerivedActiveId || this.activeId;\n  }\n\n  private get effectiveDisableViewTransition(): boolean {\n    return resolvePanelNavDisableVt(\n      this.disableViewTransition,\n      this.el.getAttribute('disable-view-transition')\n    );\n  }\n\n  @Watch('collapsed')\n  onCollapsedChange(_next: boolean, prev: boolean | undefined) {\n    if (prev === undefined || !this.initialRenderComplete) return;\n    this.startCollapseAnimation();\n  }\n\n  @Watch('viewportNarrow')\n  onViewportNarrowChange(next: boolean, prev: boolean | undefined) {\n    if (prev === undefined || !this.initialRenderComplete) return;\n    if (next && this.rovingIndex === 0) {\n      this.rovingIndex = this.getFirstRovingIndex();\n    }\n    this.startCollapseAnimation();\n  }\n\n  @Watch('breakpoint')\n  onBreakpointChange() {\n    this.disconnectResizeObserver();\n    if (this.effectiveBreakpoint() > 0) this.connectResizeObserver();\n  }\n\n  @Watch('groups')\n  onGroupsChange(val: string | PanelNavGroup[]) {\n    this.parsedGroups = parsePanelNavGroups(val);\n    this.rovingIndex = 0;\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('activeId')\n  @Watch('urlDerivedActiveId')\n  onActiveIdChange() {\n    /* Active route updates aria-current only — roving tab stop stays user-controlled. */\n  }\n\n  @Watch('currentUrl')\n  onCurrentUrlChange() {\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('navStyle')\n  onNavStyleChange(newVal: NavChromeStyle) {\n    this.renderedStyle = newVal;\n  }\n\n  componentWillLoad() {\n    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));\n    this.viewportNarrow = this.isViewportNarrow();\n    if (this.storageKey) {\n      try {\n        const stored = localStorage.getItem(this.storageKey);\n        if (stored !== null) this.collapsed = stored === 'true';\n      } catch {\n        /* localStorage unavailable */\n      }\n    }\n    this.onGroupsChange(this.groups);\n    this.syncActiveFromUrl();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    if (this.effectiveBreakpoint() > 0) this.connectResizeObserver();\n    this.connectScrollRegionObserver();\n    this.updateBodyScrollable();\n    this.initialRenderComplete = true;\n  }\n\n  componentDidRender() {\n    this.updateBodyScrollable();\n  }\n\n  disconnectedCallback() {\n    this.disconnectResizeObserver();\n    this.disconnectScrollRegionObserver();\n    this.clearCollapseAnimationCompletion(\n      this.el.querySelector('.panel-nav') as HTMLElement | null\n    );\n    this.clearEdgeOverlayTimer();\n    if (this.globalMouseMoveHandler) {\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    }\n    if (this.globalMouseUpHandler) {\n      window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    }\n  }\n\n  private startCollapseAnimation() {\n    if (this.isAnimating) return;\n    this.isAnimating = true;\n    this.dsChromeTransitionStart.emit({ source: 'panel-nav' });\n    const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n    const widthBefore = panel?.getBoundingClientRect().width ?? 0;\n    this.clearCollapseAnimationCompletion(panel);\n    this.transitionCompletionHandler = (e: TransitionEvent) => {\n      if (e.propertyName === 'width' || e.propertyName === 'min-width') {\n        this.finishCollapseAnimation(panel);\n      }\n    };\n    panel?.addEventListener('transitionend', this.transitionCompletionHandler);\n    panel?.addEventListener('transitioncancel', this.transitionCompletionHandler);\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (!this.isAnimating) return;\n        const widthAfter = panel?.getBoundingClientRect().width ?? 0;\n        if (Math.abs(widthAfter - widthBefore) < 1) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n        if (!panel) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n\n        const fallbackMs = panelNavWidthTransitionMs(getComputedStyle(panel));\n        if (fallbackMs <= 0) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishCollapseAnimation(panel);\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private finishCollapseAnimation(panel: HTMLElement | null) {\n    const wasAnimating = this.isAnimating;\n    this.clearCollapseAnimationCompletion(panel);\n    if (!wasAnimating) return;\n    this.isAnimating = false;\n    this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });\n  }\n\n  private clearCollapseAnimationCompletion(panel: HTMLElement | null) {\n    if (this.transitionCompletionHandler) {\n      panel?.removeEventListener('transitionend', this.transitionCompletionHandler);\n      panel?.removeEventListener('transitioncancel', this.transitionCompletionHandler);\n      this.transitionCompletionHandler = undefined;\n    }\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  private effectiveBreakpoint(): number {\n    if (this.breakpoint > 0) return this.breakpoint;\n    const attributeValue = Number(this.el.getAttribute('breakpoint') ?? 0);\n    return Number.isFinite(attributeValue) && attributeValue > 0 ? attributeValue : 0;\n  }\n\n  private isViewportNarrow(): boolean {\n    const breakpoint = this.effectiveBreakpoint();\n    return typeof window !== 'undefined' && breakpoint > 0 && window.innerWidth < breakpoint;\n  }\n\n  private connectResizeObserver() {\n    this.viewportNarrow = this.isViewportNarrow();\n    this.resizeObserver = new ResizeObserver(() => {\n      this.viewportNarrow = this.isViewportNarrow();\n    });\n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  private disconnectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  private connectScrollRegionObserver() {\n    this.disconnectScrollRegionObserver();\n    if (!this.bodyEl || typeof ResizeObserver === 'undefined') return;\n    this.scrollRegionObserver = new ResizeObserver(() => this.updateBodyScrollable());\n    this.scrollRegionObserver.observe(this.bodyEl);\n  }\n\n  private disconnectScrollRegionObserver() {\n    this.scrollRegionObserver?.disconnect();\n    this.scrollRegionObserver = undefined;\n  }\n\n  private updateBodyScrollable() {\n    const next = Boolean(this.bodyEl && this.bodyEl.scrollHeight > this.bodyEl.clientHeight + 1);\n    if (next !== this.bodyScrollable) this.bodyScrollable = next;\n  }\n\n  /** Derive active ID from the current URL by matching item `href` values.\n   *  Uses longest segment-boundary prefix match. */\n  private syncActiveFromUrl() {\n    if (!this.currentUrl) {\n      this.urlDerivedActiveId = '';\n      return;\n    }\n    this.urlDerivedActiveId = deriveActiveIdFromUrl(this.currentUrl, this.getAllItems());\n  }\n\n  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    if (shouldResyncPanelNavStyle(this.renderedStyle, this.navStyle)) {\n      this.renderedStyle = this.navStyle;\n    }\n\n    if (shouldResyncPanelNavGroups(this.parsedGroups, this.groups)) {\n      this.onGroupsChange(this.groups);\n    } else if (this.currentUrl) {\n      this.syncActiveFromUrl();\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = PanelNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(tick);\n  }\n\n  /** Centralised toggle: updates the desktop preference unless breakpoint-locked. */\n  private applyToggle(next: boolean) {\n    if (this.viewportNarrow) return;\n    this.collapsed = next;\n    if (this.storageKey) {\n      try {\n        localStorage.setItem(this.storageKey, String(next));\n      } catch {\n        /* unavailable */\n      }\n    }\n    this.dsNavToggle.emit(next);\n  }\n\n  private getAllItems(): PanelNavItem[] {\n    return this.parsedGroups.flatMap(g => g.items);\n  }\n\n  private getFirstRovingIndex(): number {\n    return this.viewportNarrow ? 1 : 0;\n  }\n\n  private getFooterRovingIndex(): number {\n    return 1 + this.getAllItems().length;\n  }\n\n  private getUserRovingIndex(): number {\n    return this.getFooterRovingIndex() + 1;\n  }\n\n  private getRovingElement(index: number): HTMLElement | null {\n    const itemCount = this.getAllItems().length;\n    if (index === 0) {\n      return this.viewportNarrow ? null : this.el.querySelector('.panel-nav__header-btn');\n    }\n    if (index >= 1 && index <= itemCount) {\n      const items = this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item');\n      return items[index - 1] ?? null;\n    }\n    if (index === this.getFooterRovingIndex()) {\n      return this.el.querySelector('.panel-nav__footer-btn .button-unfilled');\n    }\n    if (index === this.getUserRovingIndex()) {\n      return this.el.querySelector('.panel-nav__footer-user');\n    }\n    return null;\n  }\n\n  private focusRovingAt(index: number) {\n    this.rovingIndex = index;\n    this.getRovingElement(index)?.focus({ preventScroll: true });\n  }\n\n  private activateRovingIndex(index: number) {\n    const itemCount = this.getAllItems().length;\n    const items = this.getAllItems();\n    if (index === 0) {\n      this.handleToggle();\n      return;\n    }\n    if (index >= 1 && index <= itemCount) {\n      this.handleItemClick(items[index - 1].id);\n      return;\n    }\n    if (index === this.getFooterRovingIndex()) {\n      this.handleFooterAction();\n      return;\n    }\n    if (index === this.getUserRovingIndex()) {\n      const anchor = this.el.querySelector(\n        `#${PANEL_NAV_USER_MENU_ANCHOR_ID}`\n      ) as HTMLElement | null;\n      if (anchor)\n        this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n    }\n  }\n\n  private handleRovingKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.activateRovingIndex(index);\n      return;\n    }\n\n    const footerIdx = this.getFooterRovingIndex();\n    const userIdx = this.getUserRovingIndex();\n    const firstIdx = this.getFirstRovingIndex();\n    let next: number | undefined;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        if (index === userIdx) return;\n        if (index === footerIdx) next = userIdx;\n        else next = index + 1;\n        break;\n      case 'ArrowUp':\n        if (index === firstIdx) return;\n        if (index === userIdx) next = footerIdx;\n        else if (index === footerIdx) next = footerIdx - 1;\n        else next = index - 1;\n        break;\n      case 'ArrowRight':\n        if (index === footerIdx) next = userIdx;\n        else return;\n        break;\n      case 'ArrowLeft':\n        if (index === userIdx) next = footerIdx;\n        else return;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = firstIdx;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = userIdx;\n        break;\n      default:\n        return;\n    }\n\n    if (next === undefined || next === index) return;\n    e.preventDefault();\n    this.focusRovingAt(next);\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private handleToggle() {\n    const next = resolvePanelNavToggle(this.collapsed, this.viewportNarrow);\n    if (next !== null) this.applyToggle(next);\n  }\n\n  /** Toggle the desktop preference. No-op while the breakpoint locks the panel collapsed. */\n  @Method()\n  async toggleCollapsed() {\n    this.handleToggle();\n  }\n\n  private handleFooterAction() {\n    this.dsNavFooterAction.emit();\n  }\n\n  private handleUserAction(e: MouseEvent) {\n    const anchor = e.currentTarget as HTMLElement;\n    this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n  }\n\n  private clearEdgeOverlayTimer() {\n    if (this.edgeOverlayTimer !== null) {\n      window.clearTimeout(this.edgeOverlayTimer);\n      this.edgeOverlayTimer = null;\n    }\n  }\n\n  private handleResizeHandleMouseEnter() {\n    this.clearEdgeOverlayTimer();\n    if (prefersReducedMotion()) {\n      this.showEdgeOverlay = true;\n      return;\n    }\n    this.edgeOverlayTimer = window.setTimeout(() => {\n      this.showEdgeOverlay = true;\n      this.edgeOverlayTimer = null;\n    }, 500);\n  }\n\n  private handleResizeHandleMouseLeave() {\n    if (this.isDragging) return;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n  }\n\n  private handleResizeHandleMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const wasCollapsed = this.collapsed || this.viewportNarrow;\n    this.isDragging = true;\n    this.dragStartX = e.clientX;\n    this.didSnap = false;\n    this.lastDeltaX = 0;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n\n    document.body.style.cursor = 'ew-resize';\n    document.body.style.userSelect = 'none';\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      this.lastDeltaX = Math.abs(deltaX);\n      if (this.didSnap) return;\n      if (!wasCollapsed && deltaX < -8) {\n        this.applyToggle(true);\n        this.didSnap = true;\n      } else if (wasCollapsed && deltaX > 8) {\n        this.applyToggle(false);\n        this.didSnap = true;\n      }\n    };\n\n    const onUp = () => {\n      if (!this.didSnap && this.lastDeltaX < 3) {\n        this.applyToggle(!wasCollapsed);\n      }\n      this.isDragging = false;\n      this.showEdgeOverlay = false;\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n      this.globalMouseMoveHandler = undefined;\n      this.globalMouseUpHandler = undefined;\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\n  }\n\n  private renderFooterAction(isDashboardChrome: boolean) {\n    // Short chrome labels — same string for tip + aria (not \"Open/Go to …\").\n    const footerLabel = isDashboardChrome ? this.settingsLabel : this.dashboardLabel;\n    return (\n      <ds-tooltip label={footerLabel} side=\"right\" size=\"sm\">\n        <ds-button-unfilled\n          variant=\"icon\"\n          class=\"panel-nav__footer-btn\"\n          icon={isDashboardChrome ? 'Gear' : 'Dashboard'}\n          activeFill={false}\n          hasBorder={false}\n          focusTabIndex={this.rovingIndex === this.getFooterRovingIndex() ? 0 : -1}\n          aria-label={footerLabel}\n          onDsClick={() => this.handleFooterAction()}\n          onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getFooterRovingIndex())}\n          onFocusin={() => {\n            this.rovingIndex = this.getFooterRovingIndex();\n          }}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  private renderFooterUser(collapsed: boolean, userName: string, userInitial: string) {\n    // Always wrap so collapse morph CSS can transition on a stable button node.\n    // Tip only when collapsed (empty label → ds-tooltip skips show).\n    const tipLabel = collapsed ? this.accountLabel : '';\n    const userButton = (\n      <button\n        type=\"button\"\n        id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n        class={{\n          'panel-nav__item': true,\n          'panel-nav__item--active': this.accountMenuExpanded,\n          'panel-nav__footer-user': true,\n          'panel-nav__footer-user--menu-expanded': this.accountMenuExpanded,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}\n        aria-label={this.accountLabel}\n        aria-haspopup=\"menu\"\n        aria-expanded={String(this.accountMenuExpanded)}\n        onClick={e => this.handleUserAction(e)}\n        onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}\n        onFocus={() => {\n          this.rovingIndex = this.getUserRovingIndex();\n        }}\n      >\n        <ds-text\n          class=\"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text ds-control--md\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          emphasis\n          color=\"inherit\"\n          lineTruncation={1}\n        >\n          {userName}\n        </ds-text>\n        <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n          <span class=\"panel-nav__footer-icon-expanded\">\n            <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n          </span>\n          <span class=\"panel-nav__footer-icon-collapsed\">\n            <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n            <ds-text\n              class=\"panel-nav__user-initial\"\n              as=\"span\"\n              variant=\"text-caption\"\n              emphasis\n              align=\"center\"\n              color=\"inherit\"\n            >\n              {userInitial}\n            </ds-text>\n          </span>\n        </span>\n      </button>\n    );\n\n    return (\n      <ds-tooltip label={tipLabel} side=\"right\" size=\"sm\">\n        {userButton}\n      </ds-tooltip>\n    );\n  }\n\n  private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n    const isActive = item.id === this.effectiveActiveId;\n    const rovingPosition = idx + 1;\n\n    const itemContent = [\n      <span class=\"panel-nav__item-icon\">\n        <ds-icon name={item.icon} size=\"md\" color=\"inherit\" />\n      </span>,\n      <ds-text\n        class=\"panel-nav__item-label panel-nav__item-label-text ds-control--md\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        emphasis={isActive}\n        color=\"inherit\"\n        lineTruncation={1}\n      >\n        {item.label}\n      </ds-text>,\n      item.dot && (\n        <span class=\"panel-nav__item-dot-box\" aria-hidden=\"true\">\n          <ds-badge class=\"panel-nav__item-dot\" variant=\"dot\" hasRing={collapsed} label=\"\" />\n        </span>\n      ),\n    ];\n\n    const sharedProps = {\n      class: {\n        'panel-nav__item': true,\n        'panel-nav__item--active': isActive,\n        'ds-focus-ring-inset': true,\n        'ds-interaction-fill': true,\n      },\n      'aria-current': isActive ? ('page' as const) : undefined,\n      tabIndex: rovingPosition === this.rovingIndex ? 0 : -1,\n      onClick: () => this.handleItemClick(item.id),\n      onKeyDown: (e: KeyboardEvent) => this.handleRovingKeyDown(e, rovingPosition),\n      onFocus: () => {\n        this.rovingIndex = rovingPosition;\n      },\n    };\n\n    const useAnchor = this.routerMode === 'anchor' && item.href;\n    const control = useAnchor ? (\n      <a {...sharedProps} href={item.href}>\n        {itemContent}\n      </a>\n    ) : (\n      <button {...sharedProps} type=\"button\">\n        {itemContent}\n      </button>\n    );\n\n    // Always wrap so label fade CSS can transition on a stable item node.\n    // Tip only when collapsed (empty label → ds-tooltip skips show).\n    return (\n      <ds-tooltip label={collapsed ? item.label : ''} side=\"right\" size=\"sm\">\n        {control}\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const chromeStyle = this.renderedStyle;\n    const isDashboardChrome = chromeStyle === 'dashboard';\n    const isDashboard = this.navStyle === 'dashboard';\n    const collapsed = this.collapsed || this.viewportNarrow;\n    const { userName, userInitial } = this;\n\n    const navCls: Record<string, boolean> = {\n      'panel-nav': true,\n      'ds-control--md': true,\n      'panel-nav--dashboard': isDashboard,\n      'panel-nav--settings': !isDashboard,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--breakpoint-locked': this.viewportNarrow,\n      'panel-nav--animating': this.isAnimating,\n    };\n\n    return (\n      <Host style={{ display: 'block', position: 'relative' }}>\n        <nav\n          class={navCls}\n          aria-label={\n            isDashboardChrome ? this.dashboardNavigationLabel : this.settingsNavigationLabel\n          }\n        >\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header ds-chrome-row ds-chrome-space--md\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill\"\n              disabled={this.viewportNarrow}\n              tabIndex={!this.viewportNarrow && this.rovingIndex === 0 ? 0 : -1}\n              onClick={() => this.handleToggle()}\n              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, 0)}\n              onFocus={() => {\n                this.rovingIndex = 0;\n              }}\n              aria-label={collapsed ? this.expandNavigationLabel : this.collapseNavigationLabel}\n              aria-expanded={collapsed ? 'false' : 'true'}\n            >\n              {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n              <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n                <svg\n                  class=\"panel-nav__m-mark\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\n              </span>\n              {/* Collapse / expand icon — revealed on hover via CSS */}\n              <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n                <ds-icon\n                  name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n                  size=\"md\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n          </div>\n\n          {/* ── Scrollable body ── */}\n          <div\n            class={{\n              'panel-nav__body': true,\n              'ds-chrome-column': true,\n              'ds-chrome-space--md': true,\n              'ds-scrollbar-hidden': true,\n              'ds-focus-ring': this.bodyScrollable,\n              ...scrollEdgeFadeClassMap({ edges: 'bottom' }),\n            }}\n            ref={element => {\n              const next = (element as HTMLElement) ?? undefined;\n              if (next === this.bodyEl) return;\n              this.bodyEl = next;\n              this.connectScrollRegionObserver();\n            }}\n            role={this.bodyScrollable ? 'region' : undefined}\n            aria-label={this.bodyScrollable ? this.navigationItemsLabel : undefined}\n            tabIndex={this.bodyScrollable ? 0 : undefined}\n          >\n            <div class=\"panel-nav__sections\">\n              {(() => {\n                let flatIdx = 0;\n                return this.parsedGroups.map(group => (\n                  <div class=\"panel-nav__group\">\n                    {group.label && (\n                      <ds-text\n                        class=\"panel-nav__group-label ds-control--md\"\n                        as=\"span\"\n                        variant=\"text-caption\"\n                        emphasis\n                        color=\"inherit\"\n                      >\n                        {group.label}\n                      </ds-text>\n                    )}\n                    {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}\n                  </div>\n                ));\n              })()}\n            </div>\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            {this.renderFooterAction(isDashboardChrome)}\n            {this.renderFooterUser(collapsed, userName, userInitial)}\n          </div>\n        </nav>\n\n        {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n        {!this.viewportNarrow && (\n          <div\n            class={{\n              'panel-nav__resize-handle': true,\n              'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n            }}\n            onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n            onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n            onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -232,7 +232,7 @@
   "files": [
     {
       "path": "src/wc/components/PanelSubNav/PanelSubNav.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.panel-sub-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.panel-sub-nav__item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  width: 100%;\n  height: 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: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: pointer;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.panel-sub-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.panel-sub-nav__item--on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-medium-background-primary);\n}\n\n.panel-sub-nav__item--on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.panel-sub-nav__item--on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-strong-background-primary);\n}\n\n.panel-sub-nav__item--on-translucent {\n  color: var(--color-translucent-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected {\n  color: var(--color-translucent-foreground-primary);\n}\n\n.panel-sub-nav__item--on-inverted {\n  color: var(--color-inverted-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected {\n  color: var(--color-inverted-foreground-primary);\n}\n\n.panel-sub-nav__item--on-media {\n  color: var(--color-media-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-media.panel-sub-nav__item--selected {\n  color: var(--color-media-foreground-primary);\n}\n\n.panel-sub-nav__item--on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected {\n  color: var(--color-always-dark-foreground-primary);\n}\n\nds-text.panel-sub-nav__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.panel-sub-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.panel-sub-nav__item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  width: 100%;\n  height: 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: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: default;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.panel-sub-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.panel-sub-nav__item--on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-medium-background-primary);\n}\n\n.panel-sub-nav__item--on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.panel-sub-nav__item--on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-strong-background-primary);\n}\n\n.panel-sub-nav__item--on-translucent {\n  color: var(--color-translucent-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected {\n  color: var(--color-translucent-foreground-primary);\n}\n\n.panel-sub-nav__item--on-inverted {\n  color: var(--color-inverted-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected {\n  color: var(--color-inverted-foreground-primary);\n}\n\n.panel-sub-nav__item--on-media {\n  color: var(--color-media-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-media.panel-sub-nav__item--selected {\n  color: var(--color-media-foreground-primary);\n}\n\n.panel-sub-nav__item--on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected {\n  color: var(--color-always-dark-foreground-primary);\n}\n\nds-text.panel-sub-nav__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -331,12 +331,12 @@
   "files": [
     {
       "path": "src/wc/components/PanelToolHeader/PanelToolHeader.css",
-      "content": "@import '../../utils/control-density.css';\n\n:host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n}\n\n.panel-tool-header {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  color: var(--color-foreground-primary);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.panel-tool-header__leading,\n.panel-tool-header__trailing {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.panel-tool-header__leading:empty,\n.panel-tool-header__trailing:empty {\n  display: none;\n}\n\n.panel-tool-header__leading {\n  flex: 0 0 auto;\n}\n\n.panel-tool-header__trailing {\n  flex: 0 0 auto;\n  gap: var(--dimension-space-050);\n  justify-content: flex-end;\n}\n\nds-text.panel-tool-header__heading {\n  display: inline-flex;\n  flex: 1 1 0;\n  align-items: center;\n  width: auto;\n  min-width: 0;\n  height: var(--ds-control-height);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n\n:host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n}\n\n.panel-tool-header {\n  height: var(--dimension-size-600);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  color: var(--color-foreground-primary);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.panel-tool-header__leading,\n.panel-tool-header__trailing {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.panel-tool-header__leading:empty,\n.panel-tool-header__trailing:empty {\n  display: none;\n}\n\n.panel-tool-header__leading {\n  flex: 0 0 auto;\n}\n\n.panel-tool-header__trailing {\n  flex: 0 0 auto;\n  gap: var(--dimension-space-050);\n  justify-content: flex-end;\n}\n\nds-text.panel-tool-header__heading {\n  display: inline-flex;\n  flex: 1 1 0;\n  align-items: center;\n  width: auto;\n  min-width: 0;\n  height: var(--ds-control-height);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/PanelToolHeader/PanelToolHeader.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport type { PanelToolsHeaderAction } from '../PanelTools/panel-tools-types';\n\n@Component({\n  tag: 'ds-panel-tool-header',\n  styleUrl: 'PanelToolHeader.css',\n  scoped: true,\n})\nexport class PanelToolHeader {\n  @Element() el!: HTMLElement;\n\n  /** Visible heading for the active tool view. */\n  @Prop() heading: string = '';\n  /** Show the leading Back action. */\n  @Prop() showBack: boolean = false;\n  /** Canonical icon for the leading navigation or dismiss action. */\n  @Prop() backIcon: string = 'ChevronLeft';\n  /** Accessible name for the leading navigation or dismiss action. */\n  @Prop() backAriaLabel: string = 'Back';\n  /** Show the trailing options-menu trigger. */\n  @Prop() showMenu: boolean = true;\n  /** Accessible name for the options-menu trigger. */\n  @Prop() menuAriaLabel: string = 'More options';\n  /** Stable id placed on the menu trigger host for ds-menu anchoring. */\n  @Prop() menuTriggerId: string = '';\n  /** Id of the menu controlled by the trigger. */\n  @Prop() menuControls: string | undefined;\n  /** Whether the controlled menu is open. */\n  @Prop() menuExpanded: boolean = false;\n  /** Trailing application-owned icon actions. When present, these replace the legacy menu action. */\n  @Prop() actions: PanelToolsHeaderAction[] = [];\n\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n  @Event() dsMenuToggle!: EventEmitter<MouseEvent>;\n  @Event() dsAction!: EventEmitter<{ id: string; originalEvent: MouseEvent }>;\n\n  @Method()\n  async focusMenuTrigger() {\n    const trigger = this.el.querySelector(\n      'ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id=\"menu\"]'\n    ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n    await trigger?.setFocus?.();\n  }\n\n  render() {\n    const authoredActions = this.actions.length > 0;\n    const actions: PanelToolsHeaderAction[] = authoredActions\n      ? this.actions\n      : this.showMenu\n      ? [\n          {\n            id: 'menu',\n            icon: 'Ellipses',\n            ariaLabel: this.menuAriaLabel,\n            triggerId: this.menuTriggerId,\n            controls: this.menuControls,\n            expanded: this.menuExpanded,\n            haspopup: 'menu',\n          },\n        ]\n      : [];\n\n    return (\n      <Host>\n        <header class=\"panel-tool-header\">\n          <div class=\"panel-tool-header__leading\">\n            {this.showBack ? (\n              <ds-tooltip label={this.backAriaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  class=\"panel-tool-header__back\"\n                  variant=\"icon\"\n                  icon={this.backIcon}\n                  size=\"md\"\n                  aria-label={this.backAriaLabel}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n                />\n              </ds-tooltip>\n            ) : null}\n          </div>\n          <ds-text\n            class=\"panel-tool-header__heading ds-control--md\"\n            as=\"h2\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"primary\"\n            lineTruncation={1}\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"panel-tool-header__trailing\">\n            {actions.map(action => (\n              <ds-tooltip key={action.id} label={action.ariaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  id={action.triggerId || undefined}\n                  data-header-action-id={action.id}\n                  class={{\n                    'panel-tool-header__action': true,\n                    'panel-tool-header__menu': action.id === 'menu',\n                  }}\n                  variant=\"icon\"\n                  icon={action.icon}\n                  size=\"md\"\n                  aria-label={action.ariaLabel}\n                  haspopup={action.haspopup}\n                  controls={action.controls}\n                  expanded={action.expanded}\n                  pressed={action.pressed}\n                  isActive={!!action.expanded}\n                  isInactive={action.isInactive}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => {\n                    if (!authoredActions && action.id === 'menu')\n                      this.dsMenuToggle.emit(event.detail);\n                    this.dsAction.emit({ id: action.id, originalEvent: event.detail });\n                  }}\n                />\n              </ds-tooltip>\n            ))}\n          </div>\n        </header>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport type { PanelToolsHeaderAction } from '../PanelTools/panel-tools-types';\n\n@Component({\n  tag: 'ds-panel-tool-header',\n  styleUrl: 'PanelToolHeader.css',\n  scoped: true,\n})\nexport class PanelToolHeader {\n  @Element() el!: HTMLElement;\n\n  /** Visible heading for the active tool view. */\n  @Prop() heading: string = '';\n  /** Show the leading Back action. */\n  @Prop() showBack: boolean = false;\n  /** Canonical icon for the leading navigation or dismiss action. */\n  @Prop() backIcon: string = 'ChevronLeft';\n  /** Accessible name for the leading navigation or dismiss action. */\n  @Prop() backAriaLabel: string = 'Back';\n  /** Show the trailing options-menu trigger. */\n  @Prop() showMenu: boolean = true;\n  /** Accessible name for the options-menu trigger. */\n  @Prop() menuAriaLabel: string = 'More options';\n  /** Stable id placed on the menu trigger host for ds-menu anchoring. */\n  @Prop() menuTriggerId: string = '';\n  /** Id of the menu controlled by the trigger. */\n  @Prop() menuControls: string | undefined;\n  /** Whether the controlled menu is open. */\n  @Prop() menuExpanded: boolean = false;\n  /** Trailing application-owned icon actions. When present, these replace the legacy menu action. */\n  @Prop() actions: PanelToolsHeaderAction[] = [];\n\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n  @Event() dsMenuToggle!: EventEmitter<MouseEvent>;\n  @Event() dsAction!: EventEmitter<{ id: string; originalEvent: MouseEvent }>;\n\n  @Method()\n  async focusMenuTrigger() {\n    const trigger = this.el.querySelector(\n      'ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id=\"menu\"]'\n    ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n    await trigger?.setFocus?.();\n  }\n\n  render() {\n    const authoredActions = this.actions.length > 0;\n    const actions: PanelToolsHeaderAction[] = authoredActions\n      ? this.actions\n      : this.showMenu\n      ? [\n          {\n            id: 'menu',\n            icon: 'Ellipses',\n            ariaLabel: this.menuAriaLabel,\n            triggerId: this.menuTriggerId,\n            controls: this.menuControls,\n            expanded: this.menuExpanded,\n            haspopup: 'menu',\n          },\n        ]\n      : [];\n\n    return (\n      <Host>\n        <header class=\"panel-tool-header ds-chrome-row ds-chrome-space--md\">\n          <div class=\"panel-tool-header__leading\">\n            {this.showBack ? (\n              <ds-tooltip label={this.backAriaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  class=\"panel-tool-header__back\"\n                  variant=\"icon\"\n                  icon={this.backIcon}\n                  size=\"md\"\n                  aria-label={this.backAriaLabel}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n                />\n              </ds-tooltip>\n            ) : null}\n          </div>\n          <ds-text\n            class=\"panel-tool-header__heading ds-control--md\"\n            as=\"h2\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"primary\"\n            lineTruncation={1}\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"panel-tool-header__trailing\">\n            {actions.map(action => (\n              <ds-tooltip key={action.id} label={action.ariaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  id={action.triggerId || undefined}\n                  data-header-action-id={action.id}\n                  class={{\n                    'panel-tool-header__action': true,\n                    'panel-tool-header__menu': action.id === 'menu',\n                  }}\n                  variant=\"icon\"\n                  icon={action.icon}\n                  size=\"md\"\n                  aria-label={action.ariaLabel}\n                  haspopup={action.haspopup}\n                  controls={action.controls}\n                  expanded={action.expanded}\n                  pressed={action.pressed}\n                  isActive={!!action.expanded}\n                  isInactive={action.isInactive}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => {\n                    if (!authoredActions && action.id === 'menu')\n                      this.dsMenuToggle.emit(event.detail);\n                    this.dsAction.emit({ id: action.id, originalEvent: event.detail });\n                  }}\n                />\n              </ds-tooltip>\n            ))}\n          </div>\n        </header>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -376,12 +376,12 @@
   "files": [
     {
       "path": "src/wc/components/PanelToolSearch/PanelToolSearch.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/search-control.css';\n@import '../../utils/typography.css';\n\n:host {\n  display: block;\n  flex: 0 0 var(--dimension-size-600);\n  width: 100%;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  box-sizing: border-box;\n  background: transparent;\n}\n\n.panel-tool-search {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  width: 100%;\n  height: 100%;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  background: transparent;\n}\n\n.panel-tool-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.select-search {\n  flex: 1 1 auto;\n  width: auto;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  padding: 0;\n}\n\n.select-search::after {\n  display: none;\n}\n\n.panel-tool-search__filter-group {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.panel-tool-search__divider,\n.panel-tool-search__filter {\n  flex: 0 0 auto;\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/search-control.css';\n@import '../../utils/typography.css';\n\n:host {\n  display: block;\n  flex: 0 0 var(--dimension-size-600);\n  width: 100%;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  box-sizing: border-box;\n  background: transparent;\n}\n\n.panel-tool-search {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n}\n\n.panel-tool-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.select-search {\n  flex: 1 1 auto;\n  width: auto;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  padding: 0;\n}\n\n.select-search::after {\n  display: none;\n}\n\n.panel-tool-search__filter-group {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.panel-tool-search__divider,\n.panel-tool-search__filter {\n  flex: 0 0 auto;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/PanelToolSearch/PanelToolSearch.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport { ChoiceSearch } from '../../utils/choice-list-parts';\n\n@Component({\n  tag: 'ds-panel-tool-search',\n  styleUrl: 'PanelToolSearch.css',\n  scoped: true,\n})\nexport class PanelToolSearch {\n  @Element() el!: HTMLElement;\n\n  /** Current search query. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Search guidance shown while the query is empty. */\n  @Prop() placeholder: string = 'Search';\n  /** Accessible name for the search field. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'Search';\n  /** Optional ID of the results region filtered by this search. */\n  @Prop() controls: string | undefined;\n  /** Prevents search interaction while keeping the row visible. */\n  @Prop() isInactive: boolean = false;\n  /** Show the optional trailing filter-menu trigger. */\n  @Prop() showFilter: boolean = false;\n  /** Accessible name for the filter-menu trigger. */\n  @Prop() filterAriaLabel: string = 'Filter';\n  /** Stable id placed on the filter trigger for ds-menu anchoring. */\n  @Prop() filterTriggerId: string = '';\n  /** Id of the menu controlled by the filter trigger. */\n  @Prop() filterControls: string | undefined;\n  /** Whether the controlled filter menu is open. */\n  @Prop() filterExpanded: boolean = false;\n  /** Promote the trigger foreground when one or more filters are applied. */\n  @Prop() filterActive: boolean = false;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n  @Event() dsFilterToggle!: EventEmitter<MouseEvent>;\n\n  componentDidRender() {\n    const input = this.el.querySelector('input');\n    if (input && input.value !== this.value) input.value = this.value;\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  @Method()\n  async focusFilterTrigger() {\n    const trigger = this.el.querySelector('ds-button-unfilled.panel-tool-search__filter') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await trigger?.setFocus?.();\n  }\n\n  private handleChange = (value: string) => {\n    this.value = value;\n    this.dsChange.emit(value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-tool-search\">\n          <ChoiceSearch\n            value={this.value}\n            placeholder={this.placeholder}\n            ariaLabel={this.ariaLabel}\n            controls={this.controls}\n            disabled={this.isInactive}\n            inputRef={() => undefined}\n            clearLabel=\"Clear\"\n            onValueChange={this.handleChange}\n            onClear={() => this.dsClear.emit()}\n            onKeyDown={() => undefined}\n          />\n          {this.showFilter ? (\n            <div class=\"panel-tool-search__filter-group\">\n              <ds-divider\n                class=\"panel-tool-search__divider\"\n                orientation=\"vertical\"\n                length=\"var(--dimension-size-200)\"\n              />\n              <ds-tooltip label={this.filterAriaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  id={this.filterTriggerId || undefined}\n                  class=\"panel-tool-search__filter\"\n                  variant=\"icon\"\n                  icon=\"Filters\"\n                  size=\"md\"\n                  aria-label={this.filterAriaLabel}\n                  haspopup=\"menu\"\n                  controls={this.filterControls}\n                  expanded={this.filterExpanded}\n                  isActive={this.filterActive}\n                  isInactive={this.isInactive}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsChange={(event: CustomEvent<boolean>) => {\n                    event.stopPropagation();\n                  }}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => {\n                    event.stopPropagation();\n                    this.dsFilterToggle.emit(event.detail);\n                  }}\n                />\n              </ds-tooltip>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport { ChoiceSearch } from '../../utils/choice-list-parts';\n\n@Component({\n  tag: 'ds-panel-tool-search',\n  styleUrl: 'PanelToolSearch.css',\n  scoped: true,\n})\nexport class PanelToolSearch {\n  @Element() el!: HTMLElement;\n\n  /** Current search query. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Search guidance shown while the query is empty. */\n  @Prop() placeholder: string = 'Search';\n  /** Accessible name for the search field. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'Search';\n  /** Optional ID of the results region filtered by this search. */\n  @Prop() controls: string | undefined;\n  /** Prevents search interaction while keeping the row visible. */\n  @Prop() isInactive: boolean = false;\n  /** Show the optional trailing filter-menu trigger. */\n  @Prop() showFilter: boolean = false;\n  /** Accessible name for the filter-menu trigger. */\n  @Prop() filterAriaLabel: string = 'Filter';\n  /** Stable id placed on the filter trigger for ds-menu anchoring. */\n  @Prop() filterTriggerId: string = '';\n  /** Id of the menu controlled by the filter trigger. */\n  @Prop() filterControls: string | undefined;\n  /** Whether the controlled filter menu is open. */\n  @Prop() filterExpanded: boolean = false;\n  /** Promote the trigger foreground when one or more filters are applied. */\n  @Prop() filterActive: boolean = false;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n  @Event() dsFilterToggle!: EventEmitter<MouseEvent>;\n\n  componentDidRender() {\n    const input = this.el.querySelector('input');\n    if (input && input.value !== this.value) input.value = this.value;\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  @Method()\n  async focusFilterTrigger() {\n    const trigger = this.el.querySelector('ds-button-unfilled.panel-tool-search__filter') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await trigger?.setFocus?.();\n  }\n\n  private handleChange = (value: string) => {\n    this.value = value;\n    this.dsChange.emit(value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-tool-search ds-chrome-row ds-chrome-space--md\">\n          <ChoiceSearch\n            value={this.value}\n            placeholder={this.placeholder}\n            ariaLabel={this.ariaLabel}\n            controls={this.controls}\n            disabled={this.isInactive}\n            inputRef={() => undefined}\n            clearLabel=\"Clear\"\n            onValueChange={this.handleChange}\n            onClear={() => this.dsClear.emit()}\n            onKeyDown={() => undefined}\n          />\n          {this.showFilter ? (\n            <div class=\"panel-tool-search__filter-group\">\n              <ds-divider\n                class=\"panel-tool-search__divider\"\n                orientation=\"vertical\"\n                length=\"var(--dimension-size-200)\"\n              />\n              <ds-tooltip label={this.filterAriaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  id={this.filterTriggerId || undefined}\n                  class=\"panel-tool-search__filter\"\n                  variant=\"icon\"\n                  icon=\"Filters\"\n                  size=\"md\"\n                  aria-label={this.filterAriaLabel}\n                  haspopup=\"menu\"\n                  controls={this.filterControls}\n                  expanded={this.filterExpanded}\n                  isActive={this.filterActive}\n                  isInactive={this.isInactive}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsChange={(event: CustomEvent<boolean>) => {\n                    event.stopPropagation();\n                  }}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => {\n                    event.stopPropagation();\n                    this.dsFilterToggle.emit(event.detail);\n                  }}\n                />\n              </ds-tooltip>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]