@ds-mo/ui 14.35.0 → 14.36.0

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

@@ -568,12 +568,12 @@
     },
     {
       "path": "src/wc/components/BarTitle/BarTitle.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { BreadcrumbItem, BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n  type BarTitleActionConfigItem,\n  type BarTitleActionItem,\n  type BarTitlePrimaryAction,\n  type BarTitleSectionItem,\n  type BarTitlePlacement,\n  type BarTitleVariant,\n} from './bar-title-types';\nimport {\n  availableBarTitleActionMenuIds,\n  barTitleActionIdIssues,\n  findBarTitleAction,\n  overflowBarTitleActionSections,\n  resolveBarTitleActionItems,\n  visibleBarTitleActions,\n} from './bar-title-actions';\nimport {\n  type FocusableBarTitleButton,\n  barTitleActionMenuDomId,\n  renderBarTitleActionMenus,\n  renderBarTitleActions,\n  renderBarTitleBack,\n  renderBarTitleOverflowMenu,\n  renderBarTitleSectionTrigger,\n  restoreBarTitleActionFocus,\n} from './bar-title-action-chrome';\nimport {\n  barTitleSectionMenuSections,\n  barTitleSectionTriggerAriaLabel,\n  effectiveBarTitleSectionValue,\n  selectableBarTitleSections,\n  selectedBarTitleSectionLabel,\n} from './bar-title-sections';\n\nlet nextBarTitleId = 0;\n\n@Component({\n  tag: 'ds-bar-title',\n  styleUrl: 'BarTitle.css',\n  scoped: true,\n})\nexport class BarTitle {\n  @Element() el!: HTMLElement;\n\n  /** The page's single visible h1. */\n  @Prop() heading!: string;\n\n  /** Optional supporting copy shown in the expanded presentation. */\n  @Prop() description: string = '';\n\n  /** Show the leading page-level Back action. */\n  @Prop({ attribute: 'show-back' }) showBack: boolean = false;\n\n  /** Accessible name for the leading Back action. */\n  @Prop() backAriaLabel: string = 'Back';\n\n  /** Visible parent-page label used by the expanded breadcrumb when breadcrumbs is empty. */\n  @Prop() backLabel: string = 'Back';\n\n  /** Optional expanded ancestor path. Compact variants continue to use the Back action. */\n  @Prop() breadcrumbs: BreadcrumbItem[] = [];\n\n  /** Accessible name for the expanded breadcrumb navigation landmark. */\n  @Prop() breadcrumbAriaLabel: string = 'Breadcrumb';\n\n  /** Optional page sections exposed through the active-section menu. */\n  @Prop() sections: BarTitleSectionItem[] = [];\n\n  /** Id of the active page section. */\n  @Prop() value: string = '';\n\n  /** Accessible name for the page-section menu. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n\n  /** The one highest-emphasis page action. */\n  @Prop() primaryAction: BarTitlePrimaryAction | null = null;\n\n  /** Secondary page actions shown in the overflow menu. Dividers create groups. */\n  @Prop() actions: BarTitleActionItem[] = [];\n\n  /**\n   * Ordered page-header actions. When supplied, this replaces the legacy\n   * primaryAction/actions presentation while preserving the same dsAction event.\n   */\n  @Prop() actionItems?: BarTitleActionConfigItem[];\n\n  /** Accessible name for the page-actions menu. */\n  @Prop() actionsAriaLabel: string = 'More page actions';\n\n  /** Explicit visual/capacity variant. ShellPage owns automatic selection. */\n  @Prop() variant: BarTitleVariant = 'expanded';\n\n  /** Page-header placement, or compact application-shell bar placement. */\n  @Prop({ reflect: true }) placement: BarTitlePlacement = 'page';\n\n  /** Draw the page-title divider beneath the header. */\n  @Prop() showDivider: boolean = true;\n\n  /** Override divider visibility for compact and constrained variants. */\n  @Prop() showCompactDivider?: boolean;\n\n  /** Emitted when the leading Back action is activated. */\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n\n  /** Emitted when an authored expanded breadcrumb item is activated. */\n  @Event({ cancelable: true }) dsBreadcrumbSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n  /** Emitted with the newly selected page-section id. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n\n  /** Emitted with the activated primary or overflow action id. */\n  @Event() dsAction!: EventEmitter<string>;\n\n  @State() private sectionMenuOpen = false;\n  @State() private openActionMenuId = '';\n  @State() private surfaceActionMenuId = '';\n  @State() private sectionSurfaceOpen = false;\n  @State() private sectionMenuInitialFocusVisible = false;\n  @State() private actionMenuInitialFocusVisible = false;\n\n  private readonly instanceId = nextBarTitleId++;\n  private readonly sectionMenuTriggerId = `bar-title-section-trigger-${this.instanceId}`;\n  private readonly sectionMenuId = `bar-title-section-menu-${this.instanceId}`;\n  private readonly actionMenuTriggerId = `bar-title-action-trigger-${this.instanceId}`;\n  private readonly actionMenuId = `bar-title-action-menu-${this.instanceId}`;\n  private sectionTriggerEl: HTMLButtonElement | null = null;\n  private actionTriggerEl: FocusableBarTitleButton | null = null;\n  private actionTriggerEls = new Map<string, FocusableBarTitleButton>();\n\n  componentWillLoad() {\n    if (this.el.closest('ds-shell-page')) {\n      this.el.setAttribute('data-shell-page-syncing', '');\n    }\n    this.reportActionIdIssues();\n  }\n\n  @Watch('sections')\n  handleSectionsChange() {\n    if (!this.hasSectionSelector) {\n      this.closeSectionMenu();\n      this.sectionSurfaceOpen = false;\n    }\n  }\n\n  @Watch('actions')\n  @Watch('primaryAction')\n  @Watch('actionItems')\n  handleActionsChange() {\n    this.reportActionIdIssues();\n    if (!this.availableActionMenuIds.has(this.openActionMenuId)) this.closeActionMenu();\n    if (!this.availableActionMenuIds.has(this.surfaceActionMenuId)) this.surfaceActionMenuId = '';\n  }\n\n  private reportActionIdIssues() {\n    for (const issue of barTitleActionIdIssues(this.resolvedActionItems)) {\n      console.warn(`[ds-bar-title] ${issue}`);\n    }\n  }\n\n  private get compact(): boolean {\n    return this.effectiveVariant !== 'expanded';\n  }\n\n  private get effectiveVariant(): BarTitleVariant {\n    return this.placement === 'shell-bar' ? 'compact' : this.variant;\n  }\n\n  private get dividerVisible(): boolean {\n    return this.compact ? (this.showCompactDivider ?? this.showDivider) : this.showDivider;\n  }\n\n  private get expandedBreadcrumbItems(): BreadcrumbItem[] {\n    if (this.breadcrumbs.length > 0) return this.breadcrumbs;\n    if (!this.showBack) return [];\n    return [\n      {\n        id: 'back',\n        label: this.backLabel,\n        ariaLabel: this.backAriaLabel,\n      },\n    ];\n  }\n\n  private get primaryCollapsed(): boolean {\n    return (\n      this.actionItems === undefined &&\n      this.effectiveVariant === 'constrained' &&\n      this.primaryAction !== null &&\n      (this.primaryAction.collapse ?? 'auto') === 'auto'\n    );\n  }\n\n  private get selectableSections() {\n    return selectableBarTitleSections(this.sections);\n  }\n\n  private get hasSectionSelector(): boolean {\n    return this.selectableSections.length > 1;\n  }\n\n  private get effectiveValue(): string {\n    return effectiveBarTitleSectionValue(this.sections, this.value);\n  }\n\n  private get selectedSectionLabel(): string {\n    return selectedBarTitleSectionLabel(this.sections, this.value);\n  }\n\n  private get sectionTriggerAriaLabel(): string {\n    return barTitleSectionTriggerAriaLabel(this.sectionsAriaLabel, this.selectedSectionLabel);\n  }\n\n  private get sectionMenuSections() {\n    return barTitleSectionMenuSections(this.sections, this.effectiveValue);\n  }\n\n  private get resolvedActionItems(): BarTitleActionConfigItem[] {\n    return resolveBarTitleActionItems(this.actionItems, this.primaryAction, this.actions);\n  }\n\n  private get visibleActions(): BarTitleActionConfigItem[] {\n    return visibleBarTitleActions(this.resolvedActionItems, this.effectiveVariant);\n  }\n\n  private get actionMenuSections(): MenuSection[] {\n    return overflowBarTitleActionSections(this.resolvedActionItems, this.effectiveVariant);\n  }\n\n  private get showActionMenuTrigger(): boolean {\n    return this.actionMenuSections.length > 0;\n  }\n\n  private get availableActionMenuIds(): Set<string> {\n    return availableBarTitleActionMenuIds(this.visibleActions, this.showActionMenuTrigger);\n  }\n\n  private toggleSectionMenu = (event: MouseEvent) => {\n    this.sectionMenuInitialFocusVisible = event.detail === 0;\n    this.openActionMenuId = '';\n    this.sectionMenuOpen = !this.sectionMenuOpen;\n    if (this.sectionMenuOpen) this.sectionSurfaceOpen = true;\n  };\n\n  private closeSectionMenu = () => {\n    this.sectionMenuOpen = false;\n  };\n\n  private handleSectionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    const selected = this.selectableSections.find(section => section.id === id);\n    if (!selected || selected.isInactive) return;\n    this.closeSectionMenu();\n    this.dsSectionChange.emit(id);\n    requestAnimationFrame(() => this.sectionTriggerEl?.focus());\n  };\n\n  private toggleActionMenu = (id: string, event: MouseEvent) => {\n    this.actionMenuInitialFocusVisible = event.detail === 0;\n    this.sectionMenuOpen = false;\n    this.openActionMenuId = this.openActionMenuId === id ? '' : id;\n    if (this.openActionMenuId) this.surfaceActionMenuId = this.openActionMenuId;\n  };\n\n  private finishActionMenuClose = (event: CustomEvent<void>) => {\n    const id = this.surfaceActionMenuId;\n    const domId =\n      id === '__overflow'\n        ? this.actionMenuId\n        : barTitleActionMenuDomId('bar-title', this.instanceId, this.resolvedActionItems, id);\n    if (this.openActionMenuId !== id && (event.target as HTMLElement).id === domId) {\n      this.surfaceActionMenuId = '';\n    }\n  };\n\n  private closeActionMenu = () => {\n    this.openActionMenuId = '';\n  };\n\n  private handleActionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    const action = findBarTitleAction(this.resolvedActionItems, id);\n    if (!action || action.isInactive || ('isLoading' in action && action.isLoading)) return;\n    const menuId = this.openActionMenuId;\n    this.closeActionMenu();\n    this.dsAction.emit(id);\n    requestAnimationFrame(() => {\n      void restoreBarTitleActionFocus({\n        menuId,\n        overflowTrigger: this.actionTriggerEl,\n        actionTriggers: this.actionTriggerEls,\n        resolvedActionItems: this.resolvedActionItems,\n      });\n    });\n  };\n\n  private chromeActionOptions() {\n    return {\n      classPrefix: 'bar-title',\n      compact: this.compact,\n      visibleActions: this.visibleActions,\n      showOverflowTrigger: this.showActionMenuTrigger,\n      actionItems: this.actionItems,\n      primaryAction: this.primaryAction,\n      resolvedActionItems: this.resolvedActionItems,\n      instanceId: this.instanceId,\n      openActionMenuId: this.openActionMenuId,\n      surfaceActionMenuId: this.surfaceActionMenuId,\n      actionsAriaLabel: this.actionsAriaLabel,\n      actionMenuTriggerId: this.actionMenuTriggerId,\n      actionMenuId: this.actionMenuId,\n      actionTriggers: this.actionTriggerEls,\n      setOverflowTriggerEl: (el: FocusableBarTitleButton | null) => {\n        this.actionTriggerEl = el;\n      },\n      toggleActionMenu: this.toggleActionMenu,\n      emitAction: (id: string) => this.dsAction.emit(id),\n    };\n  }\n\n  private renderSectionSelector() {\n    if (!this.hasSectionSelector) return null;\n    return [\n      <div class=\"bar-title__divider\" aria-hidden=\"true\" />,\n      renderBarTitleSectionTrigger({\n        classPrefix: 'bar-title',\n        triggerId: this.sectionMenuTriggerId,\n        menuId: this.sectionMenuId,\n        open: this.sectionMenuOpen,\n        surfaceOpen: this.sectionSurfaceOpen,\n        ariaLabel: this.sectionTriggerAriaLabel,\n        selectedLabel: this.selectedSectionLabel,\n        setTriggerEl: el => {\n          this.sectionTriggerEl = el;\n        },\n        onToggle: this.toggleSectionMenu,\n      }),\n    ];\n  }\n\n  private renderActions() {\n    return renderBarTitleActions(this.chromeActionOptions());\n  }\n\n  private renderActionMenus() {\n    return renderBarTitleActionMenus({\n      classPrefix: 'bar-title',\n      visibleActions: this.visibleActions,\n      instanceId: this.instanceId,\n      resolvedActionItems: this.resolvedActionItems,\n      openActionMenuId: this.openActionMenuId,\n      actionMenuInitialFocusVisible: this.actionMenuInitialFocusVisible,\n      overflowTrigger: this.actionTriggerEl,\n      actionTriggers: this.actionTriggerEls,\n      closeActionMenu: this.closeActionMenu,\n      finishActionMenuClose: this.finishActionMenuClose,\n      handleActionSelect: this.handleActionSelect,\n    });\n  }\n\n  private handleBreadcrumbSelect = (event: CustomEvent<BreadcrumbSelectDetail>) => {\n    if (this.breadcrumbs.length === 0) {\n      this.dsBack.emit(event.detail.originalEvent);\n      return;\n    }\n    const forwarded = this.dsBreadcrumbSelect.emit(event.detail);\n    if (forwarded.defaultPrevented) event.preventDefault();\n  };\n\n  private renderBreadcrumb() {\n    const items = this.expandedBreadcrumbItems;\n    if (items.length === 0) return null;\n    return (\n      <ds-breadcrumb\n        class=\"bar-title__breadcrumb\"\n        items={items}\n        ariaLabel={this.breadcrumbAriaLabel}\n        onDsSelect={this.handleBreadcrumbSelect}\n      />\n    );\n  }\n\n  private renderBack() {\n    return renderBarTitleBack({\n      classPrefix: 'bar-title',\n      showBack: this.showBack,\n      backAriaLabel: this.backAriaLabel,\n      onBack: event => this.dsBack.emit(event),\n    });\n  }\n\n  render() {\n    const compact = this.compact;\n    return (\n      <Host\n        class={{\n          'bar-title-host--compact': compact,\n          'bar-title-host--expanded': this.effectiveVariant === 'expanded',\n          'bar-title-host--constrained': this.effectiveVariant === 'constrained',\n          'bar-title-host--has-description': !!this.description,\n          'bar-title-host--has-back': this.showBack,\n          'bar-title-host--has-breadcrumb': !compact && this.expandedBreadcrumbItems.length > 0,\n          'bar-title-host--shell-bar': this.placement === 'shell-bar',\n        }}\n      >\n        <div\n          class={{\n            'bar-title': true,\n            'bar-title--divider-hidden': !this.dividerVisible,\n            'ds-chrome-header': compact,\n          }}\n        >\n          <div class=\"bar-title__inner\">\n            {!compact ? this.renderBreadcrumb() : null}\n            <div class=\"bar-title__row\">\n              <div class=\"bar-title__leading\">\n                <div class=\"bar-title__title-row\" data-shell-page-header-anchor>\n                  <div class=\"bar-title__identity\">\n                    {compact ? this.renderBack() : null}\n                    <ds-text\n                      class=\"bar-title__heading ds-control--md\"\n                      variant={compact ? 'text-title-small' : 'text-title-medium'}\n                      emphasis\n                      color=\"primary\"\n                      as=\"h1\"\n                      lineTruncation={1}\n                    >\n                      {this.heading}\n                    </ds-text>\n                  </div>\n                  {this.renderSectionSelector()}\n                </div>\n                {this.description && !compact ? (\n                  <ds-text\n                    class=\"bar-title__description\"\n                    variant=\"text-body-small\"\n                    color=\"secondary\"\n                    lineTruncation={2}\n                    wrap=\"wrap\"\n                    as=\"p\"\n                  >\n                    {this.description}\n                  </ds-text>\n                ) : null}\n              </div>\n              {this.renderActions()}\n            </div>\n          </div>\n        </div>\n\n        {this.hasSectionSelector ? (\n          <ds-menu\n            id={this.sectionMenuId}\n            class=\"bar-title__section-menu\"\n            anchorId={this.sectionMenuTriggerId}\n            menuLabel={this.sectionsAriaLabel}\n            open={this.sectionMenuOpen}\n            initialFocusVisible={this.sectionMenuInitialFocusVisible}\n            sections={this.sectionMenuSections}\n            onDsClose={this.closeSectionMenu}\n            onDsAfterClose={() => {\n              if (!this.sectionMenuOpen) this.sectionSurfaceOpen = false;\n            }}\n            onDsSelect={this.handleSectionSelect}\n          />\n        ) : null}\n\n        {this.renderActionMenus()}\n\n        {renderBarTitleOverflowMenu({\n          classPrefix: 'bar-title',\n          showOverflowTrigger: this.showActionMenuTrigger,\n          actionMenuId: this.actionMenuId,\n          actionMenuTriggerId: this.actionMenuTriggerId,\n          actionsAriaLabel: this.actionsAriaLabel,\n          open: this.openActionMenuId === '__overflow',\n          actionMenuInitialFocusVisible: this.actionMenuInitialFocusVisible,\n          actionMenuSections: this.actionMenuSections,\n          closeActionMenu: this.closeActionMenu,\n          finishActionMenuClose: this.finishActionMenuClose,\n          handleActionSelect: this.handleActionSelect,\n        })}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { BreadcrumbItem, BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n  type BarTitleActionConfigItem,\n  type BarTitleActionItem,\n  type BarTitlePrimaryAction,\n  type BarTitleSectionItem,\n  type BarTitlePlacement,\n  type BarTitleVariant,\n} from './bar-title-types';\nimport {\n  availableBarTitleActionMenuIds,\n  barTitleActionIdIssues,\n  findBarTitleAction,\n  overflowBarTitleActionSections,\n  resolveBarTitleActionItems,\n  visibleBarTitleActions,\n} from './bar-title-actions';\nimport {\n  type FocusableBarTitleButton,\n  barTitleActionMenuDomId,\n  renderBarTitleActionMenus,\n  renderBarTitleActions,\n  renderBarTitleBack,\n  renderBarTitleOverflowMenu,\n  renderBarTitleSectionTrigger,\n  restoreBarTitleActionFocus,\n} from './bar-title-action-chrome';\nimport {\n  barTitleSectionMenuSections,\n  barTitleSectionTriggerAriaLabel,\n  effectiveBarTitleSectionValue,\n  selectableBarTitleSections,\n  selectedBarTitleSectionLabel,\n} from './bar-title-sections';\n\nlet nextBarTitleId = 0;\n\nconst BAR_TITLE_SHELL_BAR_MENU_SIDE_OFFSET =\n  'calc(var(--dimension-space-100) + var(--dimension-space-050))';\n\n@Component({\n  tag: 'ds-bar-title',\n  styleUrl: 'BarTitle.css',\n  scoped: true,\n})\nexport class BarTitle {\n  @Element() el!: HTMLElement;\n\n  /** The page's single visible h1. */\n  @Prop() heading!: string;\n\n  /** Optional supporting copy shown in the expanded presentation. */\n  @Prop() description: string = '';\n\n  /** Show the leading page-level Back action. */\n  @Prop({ attribute: 'show-back' }) showBack: boolean = false;\n\n  /** Accessible name for the leading Back action. */\n  @Prop() backAriaLabel: string = 'Back';\n\n  /** Visible parent-page label used by the expanded breadcrumb when breadcrumbs is empty. */\n  @Prop() backLabel: string = 'Back';\n\n  /** Optional expanded ancestor path. Compact variants continue to use the Back action. */\n  @Prop() breadcrumbs: BreadcrumbItem[] = [];\n\n  /** Accessible name for the expanded breadcrumb navigation landmark. */\n  @Prop() breadcrumbAriaLabel: string = 'Breadcrumb';\n\n  /** Optional page sections exposed through the active-section menu. */\n  @Prop() sections: BarTitleSectionItem[] = [];\n\n  /** Id of the active page section. */\n  @Prop() value: string = '';\n\n  /** Accessible name for the page-section menu. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n\n  /** The one highest-emphasis page action. */\n  @Prop() primaryAction: BarTitlePrimaryAction | null = null;\n\n  /** Secondary page actions shown in the overflow menu. Dividers create groups. */\n  @Prop() actions: BarTitleActionItem[] = [];\n\n  /**\n   * Ordered page-header actions. When supplied, this replaces the legacy\n   * primaryAction/actions presentation while preserving the same dsAction event.\n   */\n  @Prop() actionItems?: BarTitleActionConfigItem[];\n\n  /** Accessible name for the page-actions menu. */\n  @Prop() actionsAriaLabel: string = 'More page actions';\n\n  /** Explicit visual/capacity variant. ShellPage owns automatic selection. */\n  @Prop() variant: BarTitleVariant = 'expanded';\n\n  /** Page-header placement, or compact application-shell bar placement. */\n  @Prop({ reflect: true }) placement: BarTitlePlacement = 'page';\n\n  /** Draw the page-title divider beneath the header. */\n  @Prop() showDivider: boolean = true;\n\n  /** Override divider visibility for compact and constrained variants. */\n  @Prop() showCompactDivider?: boolean;\n\n  /** Emitted when the leading Back action is activated. */\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n\n  /** Emitted when an authored expanded breadcrumb item is activated. */\n  @Event({ cancelable: true }) dsBreadcrumbSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n  /** Emitted with the newly selected page-section id. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n\n  /** Emitted with the activated primary or overflow action id. */\n  @Event() dsAction!: EventEmitter<string>;\n\n  @State() private sectionMenuOpen = false;\n  @State() private openActionMenuId = '';\n  @State() private surfaceActionMenuId = '';\n  @State() private sectionSurfaceOpen = false;\n  @State() private sectionMenuInitialFocusVisible = false;\n  @State() private actionMenuInitialFocusVisible = false;\n\n  private readonly instanceId = nextBarTitleId++;\n  private readonly sectionMenuTriggerId = `bar-title-section-trigger-${this.instanceId}`;\n  private readonly sectionMenuId = `bar-title-section-menu-${this.instanceId}`;\n  private readonly actionMenuTriggerId = `bar-title-action-trigger-${this.instanceId}`;\n  private readonly actionMenuId = `bar-title-action-menu-${this.instanceId}`;\n  private sectionTriggerEl: HTMLButtonElement | null = null;\n  private actionTriggerEl: FocusableBarTitleButton | null = null;\n  private actionTriggerEls = new Map<string, FocusableBarTitleButton>();\n\n  componentWillLoad() {\n    if (this.el.closest('ds-shell-page')) {\n      this.el.setAttribute('data-shell-page-syncing', '');\n    }\n    this.reportActionIdIssues();\n  }\n\n  @Watch('sections')\n  handleSectionsChange() {\n    if (!this.hasSectionSelector) {\n      this.closeSectionMenu();\n      this.sectionSurfaceOpen = false;\n    }\n  }\n\n  @Watch('actions')\n  @Watch('primaryAction')\n  @Watch('actionItems')\n  handleActionsChange() {\n    this.reportActionIdIssues();\n    if (!this.availableActionMenuIds.has(this.openActionMenuId)) this.closeActionMenu();\n    if (!this.availableActionMenuIds.has(this.surfaceActionMenuId)) this.surfaceActionMenuId = '';\n  }\n\n  private reportActionIdIssues() {\n    for (const issue of barTitleActionIdIssues(this.resolvedActionItems)) {\n      console.warn(`[ds-bar-title] ${issue}`);\n    }\n  }\n\n  private get compact(): boolean {\n    return this.effectiveVariant !== 'expanded';\n  }\n\n  private get menuSideOffset(): string | undefined {\n    return this.placement === 'shell-bar' ? BAR_TITLE_SHELL_BAR_MENU_SIDE_OFFSET : undefined;\n  }\n\n  private get effectiveVariant(): BarTitleVariant {\n    return this.placement === 'shell-bar' ? 'compact' : this.variant;\n  }\n\n  private get dividerVisible(): boolean {\n    return this.compact ? (this.showCompactDivider ?? this.showDivider) : this.showDivider;\n  }\n\n  private get expandedBreadcrumbItems(): BreadcrumbItem[] {\n    if (this.breadcrumbs.length > 0) return this.breadcrumbs;\n    if (!this.showBack) return [];\n    return [\n      {\n        id: 'back',\n        label: this.backLabel,\n        ariaLabel: this.backAriaLabel,\n      },\n    ];\n  }\n\n  private get primaryCollapsed(): boolean {\n    return (\n      this.actionItems === undefined &&\n      this.effectiveVariant === 'constrained' &&\n      this.primaryAction !== null &&\n      (this.primaryAction.collapse ?? 'auto') === 'auto'\n    );\n  }\n\n  private get selectableSections() {\n    return selectableBarTitleSections(this.sections);\n  }\n\n  private get hasSectionSelector(): boolean {\n    return this.selectableSections.length > 1;\n  }\n\n  private get effectiveValue(): string {\n    return effectiveBarTitleSectionValue(this.sections, this.value);\n  }\n\n  private get selectedSectionLabel(): string {\n    return selectedBarTitleSectionLabel(this.sections, this.value);\n  }\n\n  private get sectionTriggerAriaLabel(): string {\n    return barTitleSectionTriggerAriaLabel(this.sectionsAriaLabel, this.selectedSectionLabel);\n  }\n\n  private get sectionMenuSections() {\n    return barTitleSectionMenuSections(this.sections, this.effectiveValue);\n  }\n\n  private get resolvedActionItems(): BarTitleActionConfigItem[] {\n    return resolveBarTitleActionItems(this.actionItems, this.primaryAction, this.actions);\n  }\n\n  private get visibleActions(): BarTitleActionConfigItem[] {\n    return visibleBarTitleActions(this.resolvedActionItems, this.effectiveVariant);\n  }\n\n  private get actionMenuSections(): MenuSection[] {\n    return overflowBarTitleActionSections(this.resolvedActionItems, this.effectiveVariant);\n  }\n\n  private get showActionMenuTrigger(): boolean {\n    return this.actionMenuSections.length > 0;\n  }\n\n  private get availableActionMenuIds(): Set<string> {\n    return availableBarTitleActionMenuIds(this.visibleActions, this.showActionMenuTrigger);\n  }\n\n  private toggleSectionMenu = (event: MouseEvent) => {\n    this.sectionMenuInitialFocusVisible = event.detail === 0;\n    this.openActionMenuId = '';\n    this.sectionMenuOpen = !this.sectionMenuOpen;\n    if (this.sectionMenuOpen) this.sectionSurfaceOpen = true;\n  };\n\n  private closeSectionMenu = () => {\n    this.sectionMenuOpen = false;\n  };\n\n  private handleSectionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    const selected = this.selectableSections.find(section => section.id === id);\n    if (!selected || selected.isInactive) return;\n    this.closeSectionMenu();\n    this.dsSectionChange.emit(id);\n    requestAnimationFrame(() => this.sectionTriggerEl?.focus());\n  };\n\n  private toggleActionMenu = (id: string, event: MouseEvent) => {\n    this.actionMenuInitialFocusVisible = event.detail === 0;\n    this.sectionMenuOpen = false;\n    this.openActionMenuId = this.openActionMenuId === id ? '' : id;\n    if (this.openActionMenuId) this.surfaceActionMenuId = this.openActionMenuId;\n  };\n\n  private finishActionMenuClose = (event: CustomEvent<void>) => {\n    const id = this.surfaceActionMenuId;\n    const domId =\n      id === '__overflow'\n        ? this.actionMenuId\n        : barTitleActionMenuDomId('bar-title', this.instanceId, this.resolvedActionItems, id);\n    if (this.openActionMenuId !== id && (event.target as HTMLElement).id === domId) {\n      this.surfaceActionMenuId = '';\n    }\n  };\n\n  private closeActionMenu = () => {\n    this.openActionMenuId = '';\n  };\n\n  private handleActionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    const action = findBarTitleAction(this.resolvedActionItems, id);\n    if (!action || action.isInactive || ('isLoading' in action && action.isLoading)) return;\n    const menuId = this.openActionMenuId;\n    this.closeActionMenu();\n    this.dsAction.emit(id);\n    requestAnimationFrame(() => {\n      void restoreBarTitleActionFocus({\n        menuId,\n        overflowTrigger: this.actionTriggerEl,\n        actionTriggers: this.actionTriggerEls,\n        resolvedActionItems: this.resolvedActionItems,\n      });\n    });\n  };\n\n  private chromeActionOptions() {\n    return {\n      classPrefix: 'bar-title',\n      compact: this.compact,\n      visibleActions: this.visibleActions,\n      showOverflowTrigger: this.showActionMenuTrigger,\n      actionItems: this.actionItems,\n      primaryAction: this.primaryAction,\n      resolvedActionItems: this.resolvedActionItems,\n      instanceId: this.instanceId,\n      openActionMenuId: this.openActionMenuId,\n      surfaceActionMenuId: this.surfaceActionMenuId,\n      actionsAriaLabel: this.actionsAriaLabel,\n      actionMenuTriggerId: this.actionMenuTriggerId,\n      actionMenuId: this.actionMenuId,\n      actionTriggers: this.actionTriggerEls,\n      setOverflowTriggerEl: (el: FocusableBarTitleButton | null) => {\n        this.actionTriggerEl = el;\n      },\n      toggleActionMenu: this.toggleActionMenu,\n      emitAction: (id: string) => this.dsAction.emit(id),\n    };\n  }\n\n  private renderSectionSelector() {\n    if (!this.hasSectionSelector) return null;\n    return [\n      <div class=\"bar-title__divider\" aria-hidden=\"true\" />,\n      renderBarTitleSectionTrigger({\n        classPrefix: 'bar-title',\n        triggerId: this.sectionMenuTriggerId,\n        menuId: this.sectionMenuId,\n        open: this.sectionMenuOpen,\n        surfaceOpen: this.sectionSurfaceOpen,\n        ariaLabel: this.sectionTriggerAriaLabel,\n        selectedLabel: this.selectedSectionLabel,\n        setTriggerEl: el => {\n          this.sectionTriggerEl = el;\n        },\n        onToggle: this.toggleSectionMenu,\n      }),\n    ];\n  }\n\n  private renderActions() {\n    return renderBarTitleActions(this.chromeActionOptions());\n  }\n\n  private renderActionMenus() {\n    return renderBarTitleActionMenus({\n      classPrefix: 'bar-title',\n      visibleActions: this.visibleActions,\n      instanceId: this.instanceId,\n      resolvedActionItems: this.resolvedActionItems,\n      sideOffset: this.menuSideOffset,\n      openActionMenuId: this.openActionMenuId,\n      actionMenuInitialFocusVisible: this.actionMenuInitialFocusVisible,\n      overflowTrigger: this.actionTriggerEl,\n      actionTriggers: this.actionTriggerEls,\n      closeActionMenu: this.closeActionMenu,\n      finishActionMenuClose: this.finishActionMenuClose,\n      handleActionSelect: this.handleActionSelect,\n    });\n  }\n\n  private handleBreadcrumbSelect = (event: CustomEvent<BreadcrumbSelectDetail>) => {\n    if (this.breadcrumbs.length === 0) {\n      this.dsBack.emit(event.detail.originalEvent);\n      return;\n    }\n    const forwarded = this.dsBreadcrumbSelect.emit(event.detail);\n    if (forwarded.defaultPrevented) event.preventDefault();\n  };\n\n  private renderBreadcrumb() {\n    const items = this.expandedBreadcrumbItems;\n    if (items.length === 0) return null;\n    return (\n      <ds-breadcrumb\n        class=\"bar-title__breadcrumb\"\n        items={items}\n        ariaLabel={this.breadcrumbAriaLabel}\n        onDsSelect={this.handleBreadcrumbSelect}\n      />\n    );\n  }\n\n  private renderBack() {\n    return renderBarTitleBack({\n      classPrefix: 'bar-title',\n      showBack: this.showBack,\n      backAriaLabel: this.backAriaLabel,\n      onBack: event => this.dsBack.emit(event),\n    });\n  }\n\n  render() {\n    const compact = this.compact;\n    return (\n      <Host\n        class={{\n          'bar-title-host--compact': compact,\n          'bar-title-host--expanded': this.effectiveVariant === 'expanded',\n          'bar-title-host--constrained': this.effectiveVariant === 'constrained',\n          'bar-title-host--has-description': !!this.description,\n          'bar-title-host--has-back': this.showBack,\n          'bar-title-host--has-breadcrumb': !compact && this.expandedBreadcrumbItems.length > 0,\n          'bar-title-host--shell-bar': this.placement === 'shell-bar',\n        }}\n      >\n        <div\n          class={{\n            'bar-title': true,\n            'bar-title--divider-hidden': !this.dividerVisible,\n            'ds-chrome-header': compact,\n          }}\n        >\n          <div class=\"bar-title__inner\">\n            {!compact ? this.renderBreadcrumb() : null}\n            <div class=\"bar-title__row\">\n              <div class=\"bar-title__leading\">\n                <div class=\"bar-title__title-row\" data-shell-page-header-anchor>\n                  <div class=\"bar-title__identity\">\n                    {compact ? this.renderBack() : null}\n                    <ds-text\n                      class=\"bar-title__heading ds-control--md\"\n                      variant={compact ? 'text-title-small' : 'text-title-medium'}\n                      emphasis\n                      color=\"primary\"\n                      as=\"h1\"\n                      lineTruncation={1}\n                    >\n                      {this.heading}\n                    </ds-text>\n                  </div>\n                  {this.renderSectionSelector()}\n                </div>\n                {this.description && !compact ? (\n                  <ds-text\n                    class=\"bar-title__description\"\n                    variant=\"text-body-small\"\n                    color=\"secondary\"\n                    lineTruncation={2}\n                    wrap=\"wrap\"\n                    as=\"p\"\n                  >\n                    {this.description}\n                  </ds-text>\n                ) : null}\n              </div>\n              {this.renderActions()}\n            </div>\n          </div>\n        </div>\n\n        {this.hasSectionSelector ? (\n          <ds-menu\n            id={this.sectionMenuId}\n            class=\"bar-title__section-menu\"\n            anchorId={this.sectionMenuTriggerId}\n            sideOffset={this.menuSideOffset}\n            menuLabel={this.sectionsAriaLabel}\n            open={this.sectionMenuOpen}\n            initialFocusVisible={this.sectionMenuInitialFocusVisible}\n            sections={this.sectionMenuSections}\n            onDsClose={this.closeSectionMenu}\n            onDsAfterClose={() => {\n              if (!this.sectionMenuOpen) this.sectionSurfaceOpen = false;\n            }}\n            onDsSelect={this.handleSectionSelect}\n          />\n        ) : null}\n\n        {this.renderActionMenus()}\n\n        {renderBarTitleOverflowMenu({\n          classPrefix: 'bar-title',\n          showOverflowTrigger: this.showActionMenuTrigger,\n          actionMenuId: this.actionMenuId,\n          actionMenuTriggerId: this.actionMenuTriggerId,\n          sideOffset: this.menuSideOffset,\n          actionsAriaLabel: this.actionsAriaLabel,\n          open: this.openActionMenuId === '__overflow',\n          actionMenuInitialFocusVisible: this.actionMenuInitialFocusVisible,\n          actionMenuSections: this.actionMenuSections,\n          closeActionMenu: this.closeActionMenu,\n          finishActionMenuClose: this.finishActionMenuClose,\n          handleActionSelect: this.handleActionSelect,\n        })}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/BarTitle/bar-title-action-chrome.tsx",
-      "content": "import { h } from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport { isBarTitleDivider } from './bar-title-types';\nimport type {\n  BarTitleActionConfigItem,\n  BarTitleMenuAction,\n  BarTitlePrimaryAction,\n  BarTitleSplitAction,\n} from './bar-title-types';\nimport { barTitleChoiceSections } from './bar-title-actions';\n\nexport type FocusableBarTitleButton = HTMLElement & {\n  setFocus?: (segment?: 'primary' | 'menu') => Promise<void>;\n};\n\nexport function barTitleActionMenuDomId(\n  classPrefix: string,\n  instanceId: number,\n  resolvedActionItems: BarTitleActionConfigItem[],\n  id: string\n): string {\n  const index = resolvedActionItems.findIndex(item => !isBarTitleDivider(item) && item.id === id);\n  return `${classPrefix}-action-menu-${instanceId}-${index}`;\n}\n\nexport function barTitleActionMenuAnchor(\n  id: string,\n  overflowTrigger: FocusableBarTitleButton | null,\n  actionTriggers: Map<string, FocusableBarTitleButton>\n): HTMLElement | undefined {\n  if (id === '__overflow') return overflowTrigger ?? undefined;\n  const trigger = actionTriggers.get(id);\n  if (!trigger) return undefined;\n  const splitMenu = trigger.querySelector<HTMLElement>('.ds-button-split__menu');\n  return splitMenu ?? trigger;\n}\n\nexport async function restoreBarTitleActionFocus(options: {\n  menuId: string;\n  overflowTrigger: FocusableBarTitleButton | null;\n  actionTriggers: Map<string, FocusableBarTitleButton>;\n  resolvedActionItems: BarTitleActionConfigItem[];\n}): Promise<void> {\n  if (options.menuId === '__overflow') {\n    await options.overflowTrigger?.setFocus?.();\n    return;\n  }\n  const trigger = options.actionTriggers.get(options.menuId);\n  if (!trigger || !('setFocus' in trigger)) return;\n  const split = options.resolvedActionItems.some(\n    item => !isBarTitleDivider(item) && item.id === options.menuId && item.type === 'split'\n  );\n  await trigger.setFocus?.(split ? 'menu' : undefined);\n}\n\nfunction className(prefix: string, part: string): string {\n  return `${prefix}__${part}`;\n}\n\nexport function renderBarTitleBack(options: {\n  classPrefix: string;\n  showBack: boolean;\n  backAriaLabel: string;\n  onBack: (event: MouseEvent) => void;\n}) {\n  if (!options.showBack) return null;\n  return (\n    <ds-tooltip label=\"Go back\" side=\"bottom\" size=\"sm\">\n      <ds-button-unfilled\n        class={className(options.classPrefix, 'back')}\n        variant=\"icon\"\n        icon=\"ChevronLeft\"\n        aria-label={options.backAriaLabel}\n        size=\"md\"\n        activeFill={false}\n        hasBorder={false}\n        onDsClick={(event: CustomEvent<MouseEvent>) => options.onBack(event.detail)}\n      />\n    </ds-tooltip>\n  );\n}\n\nexport function renderBarTitleSectionTrigger(options: {\n  classPrefix: string;\n  triggerId: string;\n  menuId: string;\n  open: boolean;\n  surfaceOpen: boolean;\n  ariaLabel: string;\n  selectedLabel: string;\n  setTriggerEl: (el: HTMLButtonElement | null) => void;\n  onToggle: (event: MouseEvent) => void;\n}) {\n  const prefix = options.classPrefix;\n  return (\n    <div class={className(prefix, 'section-selector')}>\n      <button\n        ref={el => {\n          options.setTriggerEl((el as HTMLButtonElement | null) ?? null);\n        }}\n        id={options.triggerId}\n        class={{\n          [className(prefix, 'section-trigger')]: true,\n          [`${className(prefix, 'section-trigger')}--expanded`]: options.open,\n          'ds-interaction-fill--surface-open': options.surfaceOpen,\n          'ds-control--md': true,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        aria-controls={options.menuId}\n        aria-expanded={String(options.open)}\n        aria-label={options.ariaLabel}\n        onClick={options.onToggle}\n      >\n        <ds-text\n          class={`${className(prefix, 'section-label')} ds-interaction-fill__content`}\n          as=\"span\"\n          variant=\"text-body-medium\"\n          emphasis\n          color=\"primary\"\n          lineTruncation={1}\n        >\n          {options.selectedLabel}\n        </ds-text>\n        <ds-icon\n          class={`${className(prefix, 'section-chevron')} ds-interaction-fill__content`}\n          name=\"ChevronUpDown\"\n          size=\"md\"\n          color=\"inherit\"\n          aria-hidden=\"true\"\n        />\n      </button>\n    </div>\n  );\n}\n\nfunction renderVisibleAction(\n  action: BarTitleActionConfigItem,\n  options: {\n    classPrefix: string;\n    compact: boolean;\n    actionItems: BarTitleActionConfigItem[] | undefined;\n    primaryAction: BarTitlePrimaryAction | null;\n    resolvedActionItems: BarTitleActionConfigItem[];\n    instanceId: number;\n    openActionMenuId: string;\n    surfaceActionMenuId: string;\n    actionTriggers: Map<string, FocusableBarTitleButton>;\n    toggleActionMenu: (id: string, event: MouseEvent) => void;\n    emitAction: (id: string) => void;\n  }\n) {\n  if (isBarTitleDivider(action) || action.type === 'overflow') return null;\n  const appearance = action.appearance ?? (action.type === 'split' ? 'filled' : 'unfilled');\n  const variant: 'icon' | 'icon-label' | 'label' =\n    action.type === 'icon' ? 'icon' : action.icon ? 'icon-label' : 'label';\n  const menu = action.type === 'menu';\n  const menuId = menu\n    ? barTitleActionMenuDomId(\n        options.classPrefix,\n        options.instanceId,\n        options.resolvedActionItems,\n        action.id\n      )\n    : undefined;\n  const prefix = options.classPrefix;\n\n  if (action.type === 'split') {\n    const splitMenuId = barTitleActionMenuDomId(\n      options.classPrefix,\n      options.instanceId,\n      options.resolvedActionItems,\n      action.id\n    );\n    const splitProps = {\n      key: action.id,\n      ref: (el: FocusableBarTitleButton | undefined) => {\n        if (el) options.actionTriggers.set(action.id, el);\n        else options.actionTriggers.delete(action.id);\n      },\n      class: `${className(prefix, 'action')} ${className(prefix, 'split-action')}`,\n      split: true,\n      variant,\n      label: action.label,\n      icon: action.icon ?? '',\n      menuAriaLabel: action.menuAriaLabel,\n      controls: splitMenuId,\n      expanded: options.openActionMenuId === action.id,\n      surfaceOpen: options.surfaceActionMenuId === action.id,\n      size: 'md' as const,\n      type: action.buttonType ?? 'button',\n      isInactive: action.isInactive,\n      isLoading: action.isLoading,\n      onDsClick: () => options.emitAction(action.id),\n      onDsMenuClick: (event: CustomEvent<MouseEvent>) =>\n        options.toggleActionMenu(action.id, event.detail),\n    };\n    return appearance === 'filled' ? (\n      <ds-button-filled\n        {...splitProps}\n        intent={action.intent ?? 'brand'}\n        contrast={action.contrast ?? 'bold'}\n      />\n    ) : (\n      <ds-button-unfilled {...splitProps} />\n    );\n  }\n\n  const buttonProps = {\n    key: action.id,\n    ref: (el: FocusableBarTitleButton | undefined) => {\n      if (el) options.actionTriggers.set(action.id, el);\n      else options.actionTriggers.delete(action.id);\n    },\n    class: `${className(prefix, 'action')} ${className(prefix, 'action')}--${action.type}${\n      options.actionItems === undefined && action.id === options.primaryAction?.id\n        ? ` ${className(prefix, 'primary-action')}`\n        : ''\n    }`,\n    variant,\n    icon: action.icon ?? '',\n    label: action.label,\n    ariaLabel: action.ariaLabel ?? (action.type === 'icon' ? action.label : undefined),\n    size: 'md' as const,\n    type: action.buttonType ?? 'button',\n    isInactive: action.isInactive,\n    isLoading: action.isLoading,\n    controls: menuId,\n    expanded: menu ? options.openActionMenuId === action.id : undefined,\n    surfaceOpen: menu && options.surfaceActionMenuId === action.id,\n    hasMenu: menu,\n    onDsClick: (event: CustomEvent<MouseEvent>) => {\n      if (menu) options.toggleActionMenu(action.id, event.detail);\n      else options.emitAction(action.id);\n    },\n  };\n\n  const button =\n    appearance === 'filled' ? (\n      <ds-button-filled\n        {...buttonProps}\n        intent={action.intent ?? 'brand'}\n        contrast={action.contrast ?? 'bold'}\n      />\n    ) : (\n      <ds-button-unfilled {...buttonProps} />\n    );\n\n  return action.type === 'icon' ? (\n    <ds-tooltip key={action.id} label={action.label} side=\"bottom\" size=\"sm\">\n      {button}\n    </ds-tooltip>\n  ) : (\n    button\n  );\n}\n\nexport function renderBarTitleActions(options: {\n  classPrefix: string;\n  compact: boolean;\n  visibleActions: BarTitleActionConfigItem[];\n  showOverflowTrigger: boolean;\n  actionItems: BarTitleActionConfigItem[] | undefined;\n  primaryAction: BarTitlePrimaryAction | null;\n  resolvedActionItems: BarTitleActionConfigItem[];\n  instanceId: number;\n  openActionMenuId: string;\n  surfaceActionMenuId: string;\n  actionsAriaLabel: string;\n  actionMenuTriggerId: string;\n  actionMenuId: string;\n  actionTriggers: Map<string, FocusableBarTitleButton>;\n  setOverflowTriggerEl: (el: FocusableBarTitleButton | null) => void;\n  toggleActionMenu: (id: string, event: MouseEvent) => void;\n  emitAction: (id: string) => void;\n}) {\n  if (options.visibleActions.length === 0 && !options.showOverflowTrigger) return null;\n  const prefix = options.classPrefix;\n\n  return (\n    <div class={className(prefix, 'actions')}>\n      {options.visibleActions.map(action => renderVisibleAction(action, options))}\n      {options.showOverflowTrigger ? (\n        <ds-tooltip label=\"Page options\" side=\"bottom\" size=\"sm\">\n          <ds-button-unfilled\n            ref={el => {\n              options.setOverflowTriggerEl((el as FocusableBarTitleButton | null) ?? null);\n            }}\n            id={options.actionMenuTriggerId}\n            class={className(prefix, 'more-actions')}\n            variant=\"icon\"\n            icon=\"Ellipses\"\n            aria-label={options.actionsAriaLabel}\n            size=\"md\"\n            activeFill={!options.compact}\n            hasBorder={options.visibleActions.length > 0}\n            haspopup=\"menu\"\n            controls={options.actionMenuId}\n            expanded={options.openActionMenuId === '__overflow'}\n            surfaceOpen={options.surfaceActionMenuId === '__overflow'}\n            onDsClick={(event: CustomEvent<MouseEvent>) =>\n              options.toggleActionMenu('__overflow', event.detail)\n            }\n          />\n        </ds-tooltip>\n      ) : null}\n    </div>\n  );\n}\n\nexport function renderBarTitleActionMenus(options: {\n  classPrefix: string;\n  visibleActions: BarTitleActionConfigItem[];\n  instanceId: number;\n  resolvedActionItems: BarTitleActionConfigItem[];\n  openActionMenuId: string;\n  actionMenuInitialFocusVisible: boolean;\n  overflowTrigger: FocusableBarTitleButton | null;\n  actionTriggers: Map<string, FocusableBarTitleButton>;\n  closeActionMenu: () => void;\n  finishActionMenuClose: (event: CustomEvent<void>) => void;\n  handleActionSelect: (event: CustomEvent<MenuItemData>) => void;\n}) {\n  const prefix = options.classPrefix;\n  return options.visibleActions.flatMap(action => {\n    if (isBarTitleDivider(action) || (action.type !== 'menu' && action.type !== 'split')) {\n      return [];\n    }\n    const menuAction = action as BarTitleMenuAction | BarTitleSplitAction;\n    const menuLabel = menuAction.menuAriaLabel ?? menuAction.ariaLabel ?? menuAction.label;\n    return [\n      <ds-menu\n        key={action.id}\n        id={barTitleActionMenuDomId(\n          options.classPrefix,\n          options.instanceId,\n          options.resolvedActionItems,\n          action.id\n        )}\n        class={className(prefix, 'action-menu')}\n        anchor={barTitleActionMenuAnchor(\n          action.id,\n          options.overflowTrigger,\n          options.actionTriggers\n        )}\n        align=\"end\"\n        menuLabel={menuLabel}\n        open={options.openActionMenuId === action.id}\n        initialFocusVisible={options.actionMenuInitialFocusVisible}\n        sections={barTitleChoiceSections(menuAction.choices)}\n        onDsClose={options.closeActionMenu}\n        onDsAfterClose={options.finishActionMenuClose}\n        onDsSelect={options.handleActionSelect}\n      />,\n    ];\n  });\n}\n\nexport function renderBarTitleOverflowMenu(options: {\n  classPrefix: string;\n  showOverflowTrigger: boolean;\n  actionMenuId: string;\n  actionMenuTriggerId: string;\n  actionsAriaLabel: string;\n  open: boolean;\n  actionMenuInitialFocusVisible: boolean;\n  actionMenuSections: MenuSection[];\n  closeActionMenu: () => void;\n  finishActionMenuClose: (event: CustomEvent<void>) => void;\n  handleActionSelect: (event: CustomEvent<MenuItemData>) => void;\n}) {\n  if (!options.showOverflowTrigger) return null;\n  return (\n    <ds-menu\n      id={options.actionMenuId}\n      class={className(options.classPrefix, 'action-menu')}\n      anchorId={options.actionMenuTriggerId}\n      align=\"end\"\n      menuLabel={options.actionsAriaLabel}\n      open={options.open}\n      initialFocusVisible={options.actionMenuInitialFocusVisible}\n      sections={options.actionMenuSections}\n      onDsClose={options.closeActionMenu}\n      onDsAfterClose={options.finishActionMenuClose}\n      onDsSelect={options.handleActionSelect}\n    />\n  );\n}\n",
+      "content": "import { h } from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport { isBarTitleDivider } from './bar-title-types';\nimport type {\n  BarTitleActionConfigItem,\n  BarTitleMenuAction,\n  BarTitlePrimaryAction,\n  BarTitleSplitAction,\n} from './bar-title-types';\nimport { barTitleChoiceSections } from './bar-title-actions';\n\nexport type FocusableBarTitleButton = HTMLElement & {\n  setFocus?: (segment?: 'primary' | 'menu') => Promise<void>;\n};\n\nexport function barTitleActionMenuDomId(\n  classPrefix: string,\n  instanceId: number,\n  resolvedActionItems: BarTitleActionConfigItem[],\n  id: string\n): string {\n  const index = resolvedActionItems.findIndex(item => !isBarTitleDivider(item) && item.id === id);\n  return `${classPrefix}-action-menu-${instanceId}-${index}`;\n}\n\nexport function barTitleActionMenuAnchor(\n  id: string,\n  overflowTrigger: FocusableBarTitleButton | null,\n  actionTriggers: Map<string, FocusableBarTitleButton>\n): HTMLElement | undefined {\n  if (id === '__overflow') return overflowTrigger ?? undefined;\n  const trigger = actionTriggers.get(id);\n  if (!trigger) return undefined;\n  const splitMenu = trigger.querySelector<HTMLElement>('.ds-button-split__menu');\n  return splitMenu ?? trigger;\n}\n\nexport async function restoreBarTitleActionFocus(options: {\n  menuId: string;\n  overflowTrigger: FocusableBarTitleButton | null;\n  actionTriggers: Map<string, FocusableBarTitleButton>;\n  resolvedActionItems: BarTitleActionConfigItem[];\n}): Promise<void> {\n  if (options.menuId === '__overflow') {\n    await options.overflowTrigger?.setFocus?.();\n    return;\n  }\n  const trigger = options.actionTriggers.get(options.menuId);\n  if (!trigger || !('setFocus' in trigger)) return;\n  const split = options.resolvedActionItems.some(\n    item => !isBarTitleDivider(item) && item.id === options.menuId && item.type === 'split'\n  );\n  await trigger.setFocus?.(split ? 'menu' : undefined);\n}\n\nfunction className(prefix: string, part: string): string {\n  return `${prefix}__${part}`;\n}\n\nexport function renderBarTitleBack(options: {\n  classPrefix: string;\n  showBack: boolean;\n  backAriaLabel: string;\n  onBack: (event: MouseEvent) => void;\n}) {\n  if (!options.showBack) return null;\n  return (\n    <ds-tooltip label=\"Go back\" side=\"bottom\" size=\"sm\">\n      <ds-button-unfilled\n        class={className(options.classPrefix, 'back')}\n        variant=\"icon\"\n        icon=\"ChevronLeft\"\n        aria-label={options.backAriaLabel}\n        size=\"md\"\n        activeFill={false}\n        hasBorder={false}\n        onDsClick={(event: CustomEvent<MouseEvent>) => options.onBack(event.detail)}\n      />\n    </ds-tooltip>\n  );\n}\n\nexport function renderBarTitleSectionTrigger(options: {\n  classPrefix: string;\n  triggerId: string;\n  menuId: string;\n  open: boolean;\n  surfaceOpen: boolean;\n  ariaLabel: string;\n  selectedLabel: string;\n  setTriggerEl: (el: HTMLButtonElement | null) => void;\n  onToggle: (event: MouseEvent) => void;\n}) {\n  const prefix = options.classPrefix;\n  return (\n    <div class={className(prefix, 'section-selector')}>\n      <button\n        ref={el => {\n          options.setTriggerEl((el as HTMLButtonElement | null) ?? null);\n        }}\n        id={options.triggerId}\n        class={{\n          [className(prefix, 'section-trigger')]: true,\n          [`${className(prefix, 'section-trigger')}--expanded`]: options.open,\n          'ds-interaction-fill--surface-open': options.surfaceOpen,\n          'ds-control--md': true,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        aria-controls={options.menuId}\n        aria-expanded={String(options.open)}\n        aria-label={options.ariaLabel}\n        onClick={options.onToggle}\n      >\n        <ds-text\n          class={`${className(prefix, 'section-label')} ds-interaction-fill__content`}\n          as=\"span\"\n          variant=\"text-body-medium\"\n          emphasis\n          color=\"primary\"\n          lineTruncation={1}\n        >\n          {options.selectedLabel}\n        </ds-text>\n        <ds-icon\n          class={`${className(prefix, 'section-chevron')} ds-interaction-fill__content`}\n          name=\"ChevronUpDown\"\n          size=\"md\"\n          color=\"inherit\"\n          aria-hidden=\"true\"\n        />\n      </button>\n    </div>\n  );\n}\n\nfunction renderVisibleAction(\n  action: BarTitleActionConfigItem,\n  options: {\n    classPrefix: string;\n    compact: boolean;\n    actionItems: BarTitleActionConfigItem[] | undefined;\n    primaryAction: BarTitlePrimaryAction | null;\n    resolvedActionItems: BarTitleActionConfigItem[];\n    instanceId: number;\n    openActionMenuId: string;\n    surfaceActionMenuId: string;\n    actionTriggers: Map<string, FocusableBarTitleButton>;\n    toggleActionMenu: (id: string, event: MouseEvent) => void;\n    emitAction: (id: string) => void;\n  }\n) {\n  if (isBarTitleDivider(action) || action.type === 'overflow') return null;\n  const appearance = action.appearance ?? (action.type === 'split' ? 'filled' : 'unfilled');\n  const variant: 'icon' | 'icon-label' | 'label' =\n    action.type === 'icon' ? 'icon' : action.icon ? 'icon-label' : 'label';\n  const menu = action.type === 'menu';\n  const menuId = menu\n    ? barTitleActionMenuDomId(\n        options.classPrefix,\n        options.instanceId,\n        options.resolvedActionItems,\n        action.id\n      )\n    : undefined;\n  const prefix = options.classPrefix;\n\n  if (action.type === 'split') {\n    const splitMenuId = barTitleActionMenuDomId(\n      options.classPrefix,\n      options.instanceId,\n      options.resolvedActionItems,\n      action.id\n    );\n    const splitProps = {\n      key: action.id,\n      ref: (el: FocusableBarTitleButton | undefined) => {\n        if (el) options.actionTriggers.set(action.id, el);\n        else options.actionTriggers.delete(action.id);\n      },\n      class: `${className(prefix, 'action')} ${className(prefix, 'split-action')}`,\n      split: true,\n      variant,\n      label: action.label,\n      icon: action.icon ?? '',\n      menuAriaLabel: action.menuAriaLabel,\n      controls: splitMenuId,\n      expanded: options.openActionMenuId === action.id,\n      surfaceOpen: options.surfaceActionMenuId === action.id,\n      size: 'md' as const,\n      type: action.buttonType ?? 'button',\n      isInactive: action.isInactive,\n      isLoading: action.isLoading,\n      onDsClick: () => options.emitAction(action.id),\n      onDsMenuClick: (event: CustomEvent<MouseEvent>) =>\n        options.toggleActionMenu(action.id, event.detail),\n    };\n    return appearance === 'filled' ? (\n      <ds-button-filled\n        {...splitProps}\n        intent={action.intent ?? 'brand'}\n        contrast={action.contrast ?? 'bold'}\n      />\n    ) : (\n      <ds-button-unfilled {...splitProps} />\n    );\n  }\n\n  const buttonProps = {\n    key: action.id,\n    ref: (el: FocusableBarTitleButton | undefined) => {\n      if (el) options.actionTriggers.set(action.id, el);\n      else options.actionTriggers.delete(action.id);\n    },\n    class: `${className(prefix, 'action')} ${className(prefix, 'action')}--${action.type}${\n      options.actionItems === undefined && action.id === options.primaryAction?.id\n        ? ` ${className(prefix, 'primary-action')}`\n        : ''\n    }`,\n    variant,\n    icon: action.icon ?? '',\n    label: action.label,\n    ariaLabel: action.ariaLabel ?? (action.type === 'icon' ? action.label : undefined),\n    size: 'md' as const,\n    type: action.buttonType ?? 'button',\n    isInactive: action.isInactive,\n    isLoading: action.isLoading,\n    controls: menuId,\n    expanded: menu ? options.openActionMenuId === action.id : undefined,\n    surfaceOpen: menu && options.surfaceActionMenuId === action.id,\n    hasMenu: menu,\n    onDsClick: (event: CustomEvent<MouseEvent>) => {\n      if (menu) options.toggleActionMenu(action.id, event.detail);\n      else options.emitAction(action.id);\n    },\n  };\n\n  const button =\n    appearance === 'filled' ? (\n      <ds-button-filled\n        {...buttonProps}\n        intent={action.intent ?? 'brand'}\n        contrast={action.contrast ?? 'bold'}\n      />\n    ) : (\n      <ds-button-unfilled {...buttonProps} />\n    );\n\n  return action.type === 'icon' ? (\n    <ds-tooltip key={action.id} label={action.label} side=\"bottom\" size=\"sm\">\n      {button}\n    </ds-tooltip>\n  ) : (\n    button\n  );\n}\n\nexport function renderBarTitleActions(options: {\n  classPrefix: string;\n  compact: boolean;\n  visibleActions: BarTitleActionConfigItem[];\n  showOverflowTrigger: boolean;\n  actionItems: BarTitleActionConfigItem[] | undefined;\n  primaryAction: BarTitlePrimaryAction | null;\n  resolvedActionItems: BarTitleActionConfigItem[];\n  instanceId: number;\n  openActionMenuId: string;\n  surfaceActionMenuId: string;\n  actionsAriaLabel: string;\n  actionMenuTriggerId: string;\n  actionMenuId: string;\n  actionTriggers: Map<string, FocusableBarTitleButton>;\n  setOverflowTriggerEl: (el: FocusableBarTitleButton | null) => void;\n  toggleActionMenu: (id: string, event: MouseEvent) => void;\n  emitAction: (id: string) => void;\n}) {\n  if (options.visibleActions.length === 0 && !options.showOverflowTrigger) return null;\n  const prefix = options.classPrefix;\n\n  return (\n    <div class={className(prefix, 'actions')}>\n      {options.visibleActions.map(action => renderVisibleAction(action, options))}\n      {options.showOverflowTrigger ? (\n        <ds-tooltip label=\"Page options\" side=\"bottom\" size=\"sm\">\n          <ds-button-unfilled\n            ref={el => {\n              options.setOverflowTriggerEl((el as FocusableBarTitleButton | null) ?? null);\n            }}\n            id={options.actionMenuTriggerId}\n            class={className(prefix, 'more-actions')}\n            variant=\"icon\"\n            icon=\"Ellipses\"\n            aria-label={options.actionsAriaLabel}\n            size=\"md\"\n            activeFill={!options.compact}\n            hasBorder={options.visibleActions.length > 0}\n            haspopup=\"menu\"\n            controls={options.actionMenuId}\n            expanded={options.openActionMenuId === '__overflow'}\n            surfaceOpen={options.surfaceActionMenuId === '__overflow'}\n            onDsClick={(event: CustomEvent<MouseEvent>) =>\n              options.toggleActionMenu('__overflow', event.detail)\n            }\n          />\n        </ds-tooltip>\n      ) : null}\n    </div>\n  );\n}\n\nexport function renderBarTitleActionMenus(options: {\n  classPrefix: string;\n  visibleActions: BarTitleActionConfigItem[];\n  instanceId: number;\n  resolvedActionItems: BarTitleActionConfigItem[];\n  sideOffset?: number | string;\n  openActionMenuId: string;\n  actionMenuInitialFocusVisible: boolean;\n  overflowTrigger: FocusableBarTitleButton | null;\n  actionTriggers: Map<string, FocusableBarTitleButton>;\n  closeActionMenu: () => void;\n  finishActionMenuClose: (event: CustomEvent<void>) => void;\n  handleActionSelect: (event: CustomEvent<MenuItemData>) => void;\n}) {\n  const prefix = options.classPrefix;\n  return options.visibleActions.flatMap(action => {\n    if (isBarTitleDivider(action) || (action.type !== 'menu' && action.type !== 'split')) {\n      return [];\n    }\n    const menuAction = action as BarTitleMenuAction | BarTitleSplitAction;\n    const menuLabel = menuAction.menuAriaLabel ?? menuAction.ariaLabel ?? menuAction.label;\n    return [\n      <ds-menu\n        key={action.id}\n        id={barTitleActionMenuDomId(\n          options.classPrefix,\n          options.instanceId,\n          options.resolvedActionItems,\n          action.id\n        )}\n        class={className(prefix, 'action-menu')}\n        anchor={barTitleActionMenuAnchor(\n          action.id,\n          options.overflowTrigger,\n          options.actionTriggers\n        )}\n        align=\"end\"\n        sideOffset={options.sideOffset}\n        menuLabel={menuLabel}\n        open={options.openActionMenuId === action.id}\n        initialFocusVisible={options.actionMenuInitialFocusVisible}\n        sections={barTitleChoiceSections(menuAction.choices)}\n        onDsClose={options.closeActionMenu}\n        onDsAfterClose={options.finishActionMenuClose}\n        onDsSelect={options.handleActionSelect}\n      />,\n    ];\n  });\n}\n\nexport function renderBarTitleOverflowMenu(options: {\n  classPrefix: string;\n  showOverflowTrigger: boolean;\n  actionMenuId: string;\n  actionMenuTriggerId: string;\n  sideOffset?: number | string;\n  actionsAriaLabel: string;\n  open: boolean;\n  actionMenuInitialFocusVisible: boolean;\n  actionMenuSections: MenuSection[];\n  closeActionMenu: () => void;\n  finishActionMenuClose: (event: CustomEvent<void>) => void;\n  handleActionSelect: (event: CustomEvent<MenuItemData>) => void;\n}) {\n  if (!options.showOverflowTrigger) return null;\n  return (\n    <ds-menu\n      id={options.actionMenuId}\n      class={className(options.classPrefix, 'action-menu')}\n      anchorId={options.actionMenuTriggerId}\n      align=\"end\"\n      sideOffset={options.sideOffset}\n      menuLabel={options.actionsAriaLabel}\n      open={options.open}\n      initialFocusVisible={options.actionMenuInitialFocusVisible}\n      sections={options.actionMenuSections}\n      onDsClose={options.closeActionMenu}\n      onDsAfterClose={options.finishActionMenuClose}\n      onDsSelect={options.handleActionSelect}\n    />\n  );\n}\n",
       "type": "registry:ui"
     },
     {