@ds-mo/ui 14.35.0 → 15.0.0

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

@@ -132,7 +132,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -156,7 +156,7 @@
     },
     {
       "path": "src/wc/components/AgentActivity/AgentActivity.tsx",
-      "content": "import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport type { AgentActivityItem } from '../conversation-types';\n\n@Component({\n  tag: 'ds-agent-activity',\n  styleUrl: 'AgentActivity.css',\n  scoped: true,\n})\nexport class AgentActivity {\n  @Prop() items: AgentActivityItem[] = [];\n  @Prop() heading: string = 'Activity';\n  @Prop() open: boolean = false;\n\n  @State() private expanded: boolean = false;\n\n  componentWillLoad() {\n    this.expanded = this.open;\n  }\n\n  @Watch('open')\n  handleOpenChange(open: boolean) {\n    this.expanded = open;\n  }\n\n  private get currentItem(): AgentActivityItem | undefined {\n    return (\n      this.items.find(item => item.state === 'active') ??\n      this.items.find(item => item.state === 'error') ??\n      [...this.items].reverse().find(item => item.state === 'complete') ??\n      this.items.find(item => item.state === 'pending')\n    );\n  }\n\n  private handleToggle = (event: Event) => {\n    this.expanded = (event.currentTarget as HTMLDetailsElement).open;\n  };\n\n  private stateLabel(item: AgentActivityItem): string {\n    if (item.state === 'active') return 'In progress';\n    if (item.state === 'complete') return 'Complete';\n    if (item.state === 'error') return 'Error';\n    return 'Pending';\n  }\n\n  render() {\n    return (\n      <Host>\n        <details class=\"agent-activity\" open={this.open} onToggle={this.handleToggle}>\n          <summary>\n            <ds-icon name=\"ChevronRight\" size=\"xs\" color=\"inherit\" />\n            <ds-text\n              class=\"agent-activity__summary-label\"\n              variant=\"text-body-small\"\n              shimmer={!this.expanded && this.currentItem?.state === 'active'}\n            >\n              {this.expanded ? this.heading : (this.currentItem?.label ?? this.heading)}\n            </ds-text>\n          </summary>\n          <ol>\n            {this.items.map(item => (\n              <li class={`agent-activity__item agent-activity__item--${item.state}`}>\n                <span class=\"agent-activity__marker\" aria-hidden=\"true\">\n                  {item.state === 'active' ? (\n                    <ds-loader size=\"xs\" color=\"inherit\" />\n                  ) : item.state === 'pending' ? (\n                    <span class=\"agent-activity__pending-dot\" />\n                  ) : (\n                    <ds-icon\n                      name={item.state === 'error' ? 'ErrorTriangle' : 'Check'}\n                      size=\"xs\"\n                      color=\"inherit\"\n                    />\n                  )}\n                </span>\n                <span>\n                  <ds-text variant=\"text-body-small\" shimmer={item.state === 'active'}>\n                    {item.label}\n                  </ds-text>\n                  {item.detail ? (\n                    <ds-text variant=\"text-caption\" color=\"secondary\">\n                      {item.detail}\n                    </ds-text>\n                  ) : null}\n                  <span class=\"agent-activity__state ds-visually-hidden\">\n                    {this.stateLabel(item)}\n                  </span>\n                </span>\n              </li>\n            ))}\n          </ol>\n        </details>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport type { AgentActivityItem } from '../conversation-types';\n\n@Component({\n  tag: 'ds-agent-activity',\n  styleUrl: 'AgentActivity.css',\n  scoped: true,\n})\nexport class AgentActivity {\n  @Prop() items: AgentActivityItem[] = [];\n  @Prop() heading: string = 'Activity';\n  @Prop() open: boolean = false;\n\n  @State() private expanded: boolean = false;\n\n  componentWillLoad() {\n    this.expanded = this.open;\n  }\n\n  @Watch('open')\n  handleOpenChange(open: boolean) {\n    this.expanded = open;\n  }\n\n  private get currentItem(): AgentActivityItem | undefined {\n    return (\n      this.items.find(item => item.state === 'active') ??\n      this.items.find(item => item.state === 'error') ??\n      [...this.items].reverse().find(item => item.state === 'complete') ??\n      this.items.find(item => item.state === 'pending')\n    );\n  }\n\n  private handleToggle = (event: Event) => {\n    this.expanded = (event.currentTarget as HTMLDetailsElement).open;\n  };\n\n  private stateLabel(item: AgentActivityItem): string {\n    if (item.state === 'active') return 'In progress';\n    if (item.state === 'complete') return 'Complete';\n    if (item.state === 'error') return 'Error';\n    return 'Pending';\n  }\n\n  render() {\n    return (\n      <Host>\n        <details class=\"agent-activity\" open={this.open} onToggle={this.handleToggle}>\n          <summary>\n            <ds-icon name=\"ChevronRight\" size=\"xs\" color=\"inherit\" />\n            <ds-text\n              class=\"agent-activity__summary-label\"\n              variant=\"text-body-small\"\n              shimmer={!this.expanded && this.currentItem?.state === 'active'}\n            >\n              {this.expanded ? this.heading : (this.currentItem?.label ?? this.heading)}\n            </ds-text>\n          </summary>\n          <ol>\n            {this.items.map(item => (\n              <li class={`agent-activity__item agent-activity__item--${item.state}`}>\n                <span class=\"agent-activity__marker\" aria-hidden=\"true\">\n                  {item.state === 'active' ? (\n                    <ds-loader size=\"xs\" color=\"inherit\" />\n                  ) : item.state === 'pending' ? (\n                    <span class=\"agent-activity__pending-dot\" />\n                  ) : (\n                    <ds-icon\n                      name={item.state === 'error' ? 'ExclamationTriangle' : 'Check'}\n                      size=\"xs\"\n                      color=\"inherit\"\n                    />\n                  )}\n                </span>\n                <span>\n                  <ds-text variant=\"text-body-small\" shimmer={item.state === 'active'}>\n                    {item.label}\n                  </ds-text>\n                  {item.detail ? (\n                    <ds-text variant=\"text-caption\" color=\"secondary\">\n                      {item.detail}\n                    </ds-text>\n                  ) : null}\n                  <span class=\"agent-activity__state ds-visually-hidden\">\n                    {this.stateLabel(item)}\n                  </span>\n                </span>\n              </li>\n            ))}\n          </ol>\n        </details>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -237,7 +237,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -266,7 +266,7 @@
     },
     {
       "path": "src/wc/components/AgentQuestionnaire/AgentQuestionnaire.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type {\n  AgentQuestion,\n  AgentQuestionAnswer,\n  AgentQuestionnaireAnswerEventDetail,\n  AgentQuestionnaireCancelEventDetail,\n  AgentQuestionnaireLabels,\n  AgentQuestionnaireStatus,\n} from '../conversation-types';\nimport {\n  createQuestionnaireDrafts,\n  formatQuestionAnswer,\n  normalizeQuestionAnswer,\n  validateQuestionDraft,\n} from './agent-questionnaire-model';\nimport type { AgentQuestionDraft, AgentQuestionDrafts } from './agent-questionnaire-model';\n\nconst DEFAULT_LABELS: AgentQuestionnaireLabels = {\n  progress: 'Question {current} of {total}',\n  previous: 'Previous',\n  next: 'Next',\n  answer: 'Answer',\n  skip: 'Skip',\n  cancel: 'Cancel',\n  other: 'Other',\n  otherPlaceholder: 'Enter another answer',\n  preparing: 'Preparing questions…',\n};\n\nlet questionnaireId = 0;\n\n@Component({\n  tag: 'ds-agent-questionnaire',\n  styleUrl: 'AgentQuestionnaire.css',\n  scoped: true,\n})\nexport class AgentQuestionnaire {\n  @Element() el!: HTMLElement;\n\n  @Prop() requestId!: string;\n  @Prop() questions!: AgentQuestion[];\n  @Prop() answers: AgentQuestionAnswer[] = [];\n  @Prop() status: AgentQuestionnaireStatus = 'ready';\n  @Prop() errorMessage?: string;\n  @Prop() allowCancel: boolean = false;\n  @Prop() labels?: Partial<AgentQuestionnaireLabels>;\n\n  @Event() dsAnswer!: EventEmitter<AgentQuestionnaireAnswerEventDetail>;\n  @Event() dsCancel!: EventEmitter<AgentQuestionnaireCancelEventDetail>;\n\n  @State() private currentStep = 0;\n  @State() private drafts: AgentQuestionDrafts = {};\n  @State() private validation: Record<string, string> = {};\n\n  private readonly instanceId = ++questionnaireId;\n  private readonly otherValue = `__ds-agent-questionnaire-other-${this.instanceId}`;\n  private answerPending = false;\n  private resetScheduled = false;\n  private draftRequestId?: string;\n  private answersSnapshot: AgentQuestionAnswer[] = [];\n  private waitingForRequestAnswers = false;\n\n  componentWillLoad() {\n    this.draftRequestId = this.requestId;\n    this.answersSnapshot = this.answers;\n    this.resetDraft();\n  }\n\n  @Watch('requestId')\n  @Watch('questions')\n  @Watch('answers')\n  handleQuestionnaireInputChange() {\n    this.scheduleDraftReset();\n  }\n\n  @Watch('status')\n  handleStatusChange(status: AgentQuestionnaireStatus) {\n    if (status !== 'submitting') this.answerPending = false;\n  }\n\n  @Method()\n  async setFocus(): Promise<void> {\n    this.focusCurrentControl();\n  }\n\n  private get copy(): AgentQuestionnaireLabels {\n    return { ...DEFAULT_LABELS, ...this.labels };\n  }\n\n  private get disabled(): boolean {\n    return this.status === 'submitting';\n  }\n\n  private resetDraft(answers = this.answers) {\n    this.currentStep = 0;\n    this.drafts = createQuestionnaireDrafts(this.questions ?? [], answers ?? []);\n    this.validation = {};\n    this.answerPending = false;\n  }\n\n  private scheduleDraftReset() {\n    if (this.resetScheduled) return;\n    this.resetScheduled = true;\n    queueMicrotask(() => {\n      this.resetScheduled = false;\n      const requestChanged = this.requestId !== this.draftRequestId;\n      const answersChanged = this.answers !== this.answersSnapshot;\n      if (requestChanged && !answersChanged) {\n        this.waitingForRequestAnswers = true;\n      } else if (answersChanged) {\n        this.waitingForRequestAnswers = false;\n      }\n      this.resetDraft(this.waitingForRequestAnswers ? [] : this.answers);\n      this.draftRequestId = this.requestId;\n      this.answersSnapshot = this.answers;\n    });\n  }\n\n  private focusCurrentControl(preferInvalid = false) {\n    const focus = () => {\n      const invalidControl = preferInvalid\n        ? this.el.querySelector<HTMLElement>(\n            '[data-question-control][aria-invalid=\"true\"]:not([disabled])'\n          )\n        : null;\n      const control =\n        invalidControl ??\n        this.el.querySelector<HTMLElement>(\n          '[data-question-control]:not([disabled]):not([is-inactive])'\n        );\n      const action = this.el.querySelector<HTMLElement>(\n        '[data-question-action]:not([is-inactive]):not([is-loading])'\n      );\n      const target = (control ?? action) as\n        | (HTMLElement & { setFocus?: () => Promise<void> })\n        | null;\n      if (target?.setFocus) void target.setFocus();\n      else target?.focus();\n    };\n    focus();\n    requestAnimationFrame(focus);\n    setTimeout(focus, 0);\n  }\n\n  private updateDraft(questionId: string, update: Partial<AgentQuestionDraft>) {\n    const previous = this.drafts[questionId] ?? {\n      value: '',\n      otherSelected: false,\n      otherText: '',\n      skipped: false,\n    };\n    this.drafts = {\n      ...this.drafts,\n      [questionId]: { ...previous, ...update, skipped: false },\n    };\n    if (this.validation[questionId]) {\n      const { [questionId]: _removed, ...rest } = this.validation;\n      this.validation = rest;\n    }\n  }\n\n  private validate(question: AgentQuestion): boolean {\n    const message = validateQuestionDraft(question, this.drafts[question.id]);\n    if (!message) return true;\n    this.validation = { ...this.validation, [question.id]: message };\n    this.focusCurrentControl(true);\n    return false;\n  }\n\n  private move(step: number) {\n    this.currentStep = Math.min(Math.max(step, 0), this.questions.length - 1);\n    this.focusCurrentControl();\n  }\n\n  private next(question: AgentQuestion) {\n    if (!this.validate(question)) return;\n    this.move(this.currentStep + 1);\n  }\n\n  private skip(question: AgentQuestion) {\n    if (question.required) return;\n    this.drafts = {\n      ...this.drafts,\n      [question.id]: {\n        ...(this.drafts[question.id] ?? {\n          value: '',\n          otherSelected: false,\n          otherText: '',\n        }),\n        skipped: true,\n      },\n    };\n    if (this.currentStep < this.questions.length - 1) this.move(this.currentStep + 1);\n    else this.submit();\n  }\n\n  private submit() {\n    if (this.disabled || this.answerPending) return;\n    const invalidIndex = this.questions.findIndex(question => !this.validateWithoutFocus(question));\n    if (invalidIndex >= 0) {\n      this.currentStep = invalidIndex;\n      this.focusCurrentControl(true);\n      return;\n    }\n\n    this.answerPending = true;\n    this.dsAnswer.emit({\n      requestId: this.requestId,\n      answers: this.questions.map(question =>\n        normalizeQuestionAnswer(question, this.drafts[question.id])\n      ),\n    });\n  }\n\n  private validateWithoutFocus(question: AgentQuestion): boolean {\n    const message = validateQuestionDraft(question, this.drafts[question.id]);\n    if (!message) return true;\n    this.validation = { ...this.validation, [question.id]: message };\n    return false;\n  }\n\n  private progressLabel(): string {\n    return this.copy.progress\n      .split('{current}')\n      .join(String(this.currentStep + 1))\n      .split('{total}')\n      .join(String(this.questions.length));\n  }\n\n  private selectSingle(question: AgentQuestion, value: string) {\n    const otherSelected = value === this.otherValue;\n    this.updateDraft(question.id, {\n      value: otherSelected ? '' : value,\n      otherSelected,\n    });\n    if (otherSelected) {\n      requestAnimationFrame(() =>\n        this.el.querySelector<HTMLInputElement>('[data-question-other-input]')?.focus()\n      );\n    }\n  }\n\n  private renderSingleChoice(question: AgentQuestion, promptId: string, errorId: string) {\n    const draft = this.drafts[question.id];\n    const value = draft.otherSelected\n      ? this.otherValue\n      : typeof draft.value === 'string'\n        ? draft.value\n        : '';\n    const options = [\n      ...(question.choices ?? []),\n      ...(question.allowOther ? [{ value: this.otherValue, label: this.copy.other }] : []),\n    ];\n    return (\n      <div class=\"questionnaire__single-choice\">\n        <ds-radio\n          data-question-control\n          size=\"lg\"\n          options={options}\n          value={value}\n          disabled={this.disabled}\n          form={`ds-agent-questionnaire-detached-${this.instanceId}`}\n          ariaLabelledby={promptId}\n          aria-describedby={this.validation[question.id] ? errorId : undefined}\n          onDsChange={(event: CustomEvent<string>) => this.selectSingle(question, event.detail)}\n        />\n        {draft.otherSelected ? this.renderOtherInput(question, errorId) : null}\n      </div>\n    );\n  }\n\n  private renderMultipleChoice(question: AgentQuestion, errorId: string) {\n    const draft = this.drafts[question.id];\n    const values = Array.isArray(draft.value) ? draft.value : [];\n    const detachedForm = `ds-agent-questionnaire-detached-${this.instanceId}`;\n    return (\n      <div class=\"questionnaire__multiple-choice\">\n        {question.choices?.map(choice => (\n          <ds-checkbox\n            key={choice.value}\n            data-question-control\n            size=\"lg\"\n            label={choice.label}\n            description={choice.description}\n            value={choice.value}\n            checked={values.includes(choice.value)}\n            disabled={this.disabled}\n            form={detachedForm}\n            onDsChange={(event: CustomEvent<boolean>) => {\n              this.updateDraft(question.id, {\n                value: event.detail\n                  ? [...values, choice.value]\n                  : values.filter(value => value !== choice.value),\n              });\n            }}\n          />\n        ))}\n        {question.allowOther ? (\n          <div class=\"questionnaire__other-choice\">\n            <ds-checkbox\n              data-question-control\n              size=\"lg\"\n              label={this.copy.other}\n              checked={draft.otherSelected}\n              disabled={this.disabled}\n              form={detachedForm}\n              onDsChange={(event: CustomEvent<boolean>) => {\n                this.updateDraft(question.id, { otherSelected: event.detail });\n                if (event.detail) {\n                  requestAnimationFrame(() =>\n                    this.el.querySelector<HTMLInputElement>('[data-question-other-input]')?.focus()\n                  );\n                }\n              }}\n            />\n            {draft.otherSelected ? this.renderOtherInput(question, errorId) : null}\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n\n  private renderOtherInput(question: AgentQuestion, errorId: string) {\n    const draft = this.drafts[question.id];\n    return (\n      <input\n        class=\"questionnaire__other-input\"\n        data-question-control\n        data-question-other-input\n        type=\"text\"\n        form={`ds-agent-questionnaire-detached-${this.instanceId}`}\n        value={draft.otherText}\n        placeholder={this.copy.otherPlaceholder}\n        aria-label={this.copy.other}\n        aria-invalid={this.validation[question.id] ? 'true' : undefined}\n        aria-describedby={this.validation[question.id] ? errorId : undefined}\n        disabled={this.disabled}\n        onInput={(event: Event) =>\n          this.updateDraft(question.id, {\n            otherText: (event.target as HTMLInputElement).value,\n          })\n        }\n      />\n    );\n  }\n\n  private renderQuestion(question: AgentQuestion) {\n    const draft = this.drafts[question.id];\n    const errorId = `ds-agent-questionnaire-${this.instanceId}-${this.currentStep}-error`;\n    const promptId = `ds-agent-questionnaire-${this.instanceId}-${this.currentStep}-prompt`;\n    return (\n      <div class=\"questionnaire__body\">\n        <div class=\"questionnaire__prompt\">\n          <ds-text as=\"h2\" variant=\"text-title-small\" textId={promptId}>\n            {question.question}\n          </ds-text>\n          {question.description ? (\n            <ds-text variant=\"text-body-small\" color=\"secondary\">\n              {question.description}\n            </ds-text>\n          ) : null}\n        </div>\n        {question.type === 'text' ? (\n          <textarea\n            class=\"questionnaire__text-input\"\n            data-question-control\n            value={typeof draft.value === 'string' ? draft.value : ''}\n            form={`ds-agent-questionnaire-detached-${this.instanceId}`}\n            placeholder={question.placeholder}\n            aria-label={question.question}\n            aria-invalid={this.validation[question.id] ? 'true' : undefined}\n            aria-describedby={this.validation[question.id] ? errorId : undefined}\n            disabled={this.disabled}\n            rows={4}\n            onInput={(event: Event) =>\n              this.updateDraft(question.id, {\n                value: (event.target as HTMLTextAreaElement).value,\n              })\n            }\n          />\n        ) : (\n          <fieldset\n            class=\"questionnaire__choices\"\n            aria-describedby={this.validation[question.id] ? errorId : undefined}\n          >\n            <legend class=\"ds-visually-hidden\">{question.question}</legend>\n            {question.type === 'single'\n              ? this.renderSingleChoice(question, promptId, errorId)\n              : this.renderMultipleChoice(question, errorId)}\n          </fieldset>\n        )}\n        {this.validation[question.id] ? (\n          <div id={errorId} class=\"questionnaire__error\" role=\"alert\">\n            <ds-icon name=\"ErrorTriangle\" size=\"xs\" color=\"inherit\" />\n            <ds-text variant=\"text-body-small\" color=\"negative\">\n              {this.validation[question.id]}\n            </ds-text>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n\n  private renderAnswered() {\n    return (\n      <div class=\"questionnaire questionnaire--answered\">\n        <ol class=\"questionnaire__summary\">\n          {this.questions.map(question => (\n            <li>\n              <ds-text variant=\"text-body-small\" emphasis>\n                {question.question}\n              </ds-text>\n              <ds-text variant=\"text-body-small\" color=\"secondary\">\n                {formatQuestionAnswer(\n                  question,\n                  this.answers.find(answer => answer.questionId === question.id)\n                )}\n              </ds-text>\n            </li>\n          ))}\n        </ol>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.status === 'preparing') {\n      return (\n        <Host>\n          <div class=\"questionnaire questionnaire--preparing\" role=\"status\">\n            <ds-loader size=\"sm\" />\n            <ds-text variant=\"text-body-medium\">{this.copy.preparing}</ds-text>\n          </div>\n        </Host>\n      );\n    }\n    if (!this.questions?.length) return null;\n    if (this.status === 'answered') return <Host>{this.renderAnswered()}</Host>;\n\n    const question = this.questions[this.currentStep];\n    const last = this.currentStep === this.questions.length - 1;\n    const canSkip = Boolean(question.skippable && !question.required);\n    return (\n      <Host>\n        <section\n          class={{\n            questionnaire: true,\n            'questionnaire--submitting': this.disabled,\n            'questionnaire--error': this.status === 'error',\n          }}\n          aria-busy={this.disabled ? 'true' : undefined}\n          aria-label={question.question}\n        >\n          <header class=\"questionnaire__header\">\n            <ds-text variant=\"text-caption\" color=\"secondary\">\n              {this.progressLabel()}\n            </ds-text>\n            {this.allowCancel ? (\n              <ds-tooltip label={this.copy.cancel} side=\"top\" size=\"sm\">\n                <ds-button-unfilled\n                  data-question-action\n                  variant=\"icon\"\n                  icon=\"Cross\"\n                  size=\"sm\"\n                  aria-label={this.copy.cancel}\n                  hasBorder={false}\n                  isInactive={this.disabled}\n                  onDsClick={() => this.dsCancel.emit({ requestId: this.requestId })}\n                />\n              </ds-tooltip>\n            ) : null}\n          </header>\n          {this.renderQuestion(question)}\n          {this.status === 'error' && this.errorMessage ? (\n            <div class=\"questionnaire__submission-error\" role=\"alert\">\n              <ds-icon name=\"ErrorTriangle\" size=\"xs\" color=\"inherit\" />\n              <ds-text variant=\"text-body-small\" color=\"negative\">\n                {this.errorMessage}\n              </ds-text>\n            </div>\n          ) : null}\n          <footer class=\"questionnaire__actions\">\n            <div class=\"questionnaire__actions-leading\">\n              {this.currentStep > 0 ? (\n                <div class=\"questionnaire__action-item\">\n                  <ds-button-unfilled\n                    data-question-action\n                    label={this.copy.previous}\n                    size=\"sm\"\n                    width=\"fill\"\n                    isInactive={this.disabled}\n                    onDsClick={() => this.move(this.currentStep - 1)}\n                  />\n                </div>\n              ) : null}\n              {canSkip ? (\n                <div class=\"questionnaire__action-item\">\n                  <ds-button-unfilled\n                    data-question-action\n                    label={this.copy.skip}\n                    size=\"sm\"\n                    width=\"fill\"\n                    hasBorder={false}\n                    isInactive={this.disabled}\n                    onDsClick={() => this.skip(question)}\n                  />\n                </div>\n              ) : null}\n            </div>\n            <div class=\"questionnaire__action-item questionnaire__action-item--primary\">\n              <ds-button-filled\n                data-question-action\n                label={last ? this.copy.answer : this.copy.next}\n                size=\"sm\"\n                width=\"fill\"\n                isLoading={this.disabled}\n                onDsClick={() => (last ? this.submit() : this.next(question))}\n              />\n            </div>\n          </footer>\n        </section>\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  State,\n  Watch,\n} from '@stencil/core';\nimport type {\n  AgentQuestion,\n  AgentQuestionAnswer,\n  AgentQuestionnaireAnswerEventDetail,\n  AgentQuestionnaireCancelEventDetail,\n  AgentQuestionnaireLabels,\n  AgentQuestionnaireStatus,\n} from '../conversation-types';\nimport {\n  createQuestionnaireDrafts,\n  formatQuestionAnswer,\n  normalizeQuestionAnswer,\n  validateQuestionDraft,\n} from './agent-questionnaire-model';\nimport type { AgentQuestionDraft, AgentQuestionDrafts } from './agent-questionnaire-model';\n\nconst DEFAULT_LABELS: AgentQuestionnaireLabels = {\n  progress: 'Question {current} of {total}',\n  previous: 'Previous',\n  next: 'Next',\n  answer: 'Answer',\n  skip: 'Skip',\n  cancel: 'Cancel',\n  other: 'Other',\n  otherPlaceholder: 'Enter another answer',\n  preparing: 'Preparing questions…',\n};\n\nlet questionnaireId = 0;\n\n@Component({\n  tag: 'ds-agent-questionnaire',\n  styleUrl: 'AgentQuestionnaire.css',\n  scoped: true,\n})\nexport class AgentQuestionnaire {\n  @Element() el!: HTMLElement;\n\n  @Prop() requestId!: string;\n  @Prop() questions!: AgentQuestion[];\n  @Prop() answers: AgentQuestionAnswer[] = [];\n  @Prop() status: AgentQuestionnaireStatus = 'ready';\n  @Prop() errorMessage?: string;\n  @Prop() allowCancel: boolean = false;\n  @Prop() labels?: Partial<AgentQuestionnaireLabels>;\n\n  @Event() dsAnswer!: EventEmitter<AgentQuestionnaireAnswerEventDetail>;\n  @Event() dsCancel!: EventEmitter<AgentQuestionnaireCancelEventDetail>;\n\n  @State() private currentStep = 0;\n  @State() private drafts: AgentQuestionDrafts = {};\n  @State() private validation: Record<string, string> = {};\n\n  private readonly instanceId = ++questionnaireId;\n  private readonly otherValue = `__ds-agent-questionnaire-other-${this.instanceId}`;\n  private answerPending = false;\n  private resetScheduled = false;\n  private draftRequestId?: string;\n  private answersSnapshot: AgentQuestionAnswer[] = [];\n  private waitingForRequestAnswers = false;\n\n  componentWillLoad() {\n    this.draftRequestId = this.requestId;\n    this.answersSnapshot = this.answers;\n    this.resetDraft();\n  }\n\n  @Watch('requestId')\n  @Watch('questions')\n  @Watch('answers')\n  handleQuestionnaireInputChange() {\n    this.scheduleDraftReset();\n  }\n\n  @Watch('status')\n  handleStatusChange(status: AgentQuestionnaireStatus) {\n    if (status !== 'submitting') this.answerPending = false;\n  }\n\n  @Method()\n  async setFocus(): Promise<void> {\n    this.focusCurrentControl();\n  }\n\n  private get copy(): AgentQuestionnaireLabels {\n    return { ...DEFAULT_LABELS, ...this.labels };\n  }\n\n  private get disabled(): boolean {\n    return this.status === 'submitting';\n  }\n\n  private resetDraft(answers = this.answers) {\n    this.currentStep = 0;\n    this.drafts = createQuestionnaireDrafts(this.questions ?? [], answers ?? []);\n    this.validation = {};\n    this.answerPending = false;\n  }\n\n  private scheduleDraftReset() {\n    if (this.resetScheduled) return;\n    this.resetScheduled = true;\n    queueMicrotask(() => {\n      this.resetScheduled = false;\n      const requestChanged = this.requestId !== this.draftRequestId;\n      const answersChanged = this.answers !== this.answersSnapshot;\n      if (requestChanged && !answersChanged) {\n        this.waitingForRequestAnswers = true;\n      } else if (answersChanged) {\n        this.waitingForRequestAnswers = false;\n      }\n      this.resetDraft(this.waitingForRequestAnswers ? [] : this.answers);\n      this.draftRequestId = this.requestId;\n      this.answersSnapshot = this.answers;\n    });\n  }\n\n  private focusCurrentControl(preferInvalid = false) {\n    const focus = () => {\n      const invalidControl = preferInvalid\n        ? this.el.querySelector<HTMLElement>(\n            '[data-question-control][aria-invalid=\"true\"]:not([disabled])'\n          )\n        : null;\n      const control =\n        invalidControl ??\n        this.el.querySelector<HTMLElement>(\n          '[data-question-control]:not([disabled]):not([is-inactive])'\n        );\n      const action = this.el.querySelector<HTMLElement>(\n        '[data-question-action]:not([is-inactive]):not([is-loading])'\n      );\n      const target = (control ?? action) as\n        | (HTMLElement & { setFocus?: () => Promise<void> })\n        | null;\n      if (target?.setFocus) void target.setFocus();\n      else target?.focus();\n    };\n    focus();\n    requestAnimationFrame(focus);\n    setTimeout(focus, 0);\n  }\n\n  private updateDraft(questionId: string, update: Partial<AgentQuestionDraft>) {\n    const previous = this.drafts[questionId] ?? {\n      value: '',\n      otherSelected: false,\n      otherText: '',\n      skipped: false,\n    };\n    this.drafts = {\n      ...this.drafts,\n      [questionId]: { ...previous, ...update, skipped: false },\n    };\n    if (this.validation[questionId]) {\n      const { [questionId]: _removed, ...rest } = this.validation;\n      this.validation = rest;\n    }\n  }\n\n  private validate(question: AgentQuestion): boolean {\n    const message = validateQuestionDraft(question, this.drafts[question.id]);\n    if (!message) return true;\n    this.validation = { ...this.validation, [question.id]: message };\n    this.focusCurrentControl(true);\n    return false;\n  }\n\n  private move(step: number) {\n    this.currentStep = Math.min(Math.max(step, 0), this.questions.length - 1);\n    this.focusCurrentControl();\n  }\n\n  private next(question: AgentQuestion) {\n    if (!this.validate(question)) return;\n    this.move(this.currentStep + 1);\n  }\n\n  private skip(question: AgentQuestion) {\n    if (question.required) return;\n    this.drafts = {\n      ...this.drafts,\n      [question.id]: {\n        ...(this.drafts[question.id] ?? {\n          value: '',\n          otherSelected: false,\n          otherText: '',\n        }),\n        skipped: true,\n      },\n    };\n    if (this.currentStep < this.questions.length - 1) this.move(this.currentStep + 1);\n    else this.submit();\n  }\n\n  private submit() {\n    if (this.disabled || this.answerPending) return;\n    const invalidIndex = this.questions.findIndex(question => !this.validateWithoutFocus(question));\n    if (invalidIndex >= 0) {\n      this.currentStep = invalidIndex;\n      this.focusCurrentControl(true);\n      return;\n    }\n\n    this.answerPending = true;\n    this.dsAnswer.emit({\n      requestId: this.requestId,\n      answers: this.questions.map(question =>\n        normalizeQuestionAnswer(question, this.drafts[question.id])\n      ),\n    });\n  }\n\n  private validateWithoutFocus(question: AgentQuestion): boolean {\n    const message = validateQuestionDraft(question, this.drafts[question.id]);\n    if (!message) return true;\n    this.validation = { ...this.validation, [question.id]: message };\n    return false;\n  }\n\n  private progressLabel(): string {\n    return this.copy.progress\n      .split('{current}')\n      .join(String(this.currentStep + 1))\n      .split('{total}')\n      .join(String(this.questions.length));\n  }\n\n  private selectSingle(question: AgentQuestion, value: string) {\n    const otherSelected = value === this.otherValue;\n    this.updateDraft(question.id, {\n      value: otherSelected ? '' : value,\n      otherSelected,\n    });\n    if (otherSelected) {\n      requestAnimationFrame(() =>\n        this.el.querySelector<HTMLInputElement>('[data-question-other-input]')?.focus()\n      );\n    }\n  }\n\n  private renderSingleChoice(question: AgentQuestion, promptId: string, errorId: string) {\n    const draft = this.drafts[question.id];\n    const value = draft.otherSelected\n      ? this.otherValue\n      : typeof draft.value === 'string'\n        ? draft.value\n        : '';\n    const options = [\n      ...(question.choices ?? []),\n      ...(question.allowOther ? [{ value: this.otherValue, label: this.copy.other }] : []),\n    ];\n    return (\n      <div class=\"questionnaire__single-choice\">\n        <ds-radio\n          data-question-control\n          size=\"lg\"\n          options={options}\n          value={value}\n          disabled={this.disabled}\n          form={`ds-agent-questionnaire-detached-${this.instanceId}`}\n          ariaLabelledby={promptId}\n          aria-describedby={this.validation[question.id] ? errorId : undefined}\n          onDsChange={(event: CustomEvent<string>) => this.selectSingle(question, event.detail)}\n        />\n        {draft.otherSelected ? this.renderOtherInput(question, errorId) : null}\n      </div>\n    );\n  }\n\n  private renderMultipleChoice(question: AgentQuestion, errorId: string) {\n    const draft = this.drafts[question.id];\n    const values = Array.isArray(draft.value) ? draft.value : [];\n    const detachedForm = `ds-agent-questionnaire-detached-${this.instanceId}`;\n    return (\n      <div class=\"questionnaire__multiple-choice\">\n        {question.choices?.map(choice => (\n          <ds-checkbox\n            key={choice.value}\n            data-question-control\n            size=\"lg\"\n            label={choice.label}\n            description={choice.description}\n            value={choice.value}\n            checked={values.includes(choice.value)}\n            disabled={this.disabled}\n            form={detachedForm}\n            onDsChange={(event: CustomEvent<boolean>) => {\n              this.updateDraft(question.id, {\n                value: event.detail\n                  ? [...values, choice.value]\n                  : values.filter(value => value !== choice.value),\n              });\n            }}\n          />\n        ))}\n        {question.allowOther ? (\n          <div class=\"questionnaire__other-choice\">\n            <ds-checkbox\n              data-question-control\n              size=\"lg\"\n              label={this.copy.other}\n              checked={draft.otherSelected}\n              disabled={this.disabled}\n              form={detachedForm}\n              onDsChange={(event: CustomEvent<boolean>) => {\n                this.updateDraft(question.id, { otherSelected: event.detail });\n                if (event.detail) {\n                  requestAnimationFrame(() =>\n                    this.el.querySelector<HTMLInputElement>('[data-question-other-input]')?.focus()\n                  );\n                }\n              }}\n            />\n            {draft.otherSelected ? this.renderOtherInput(question, errorId) : null}\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n\n  private renderOtherInput(question: AgentQuestion, errorId: string) {\n    const draft = this.drafts[question.id];\n    return (\n      <input\n        class=\"questionnaire__other-input\"\n        data-question-control\n        data-question-other-input\n        type=\"text\"\n        form={`ds-agent-questionnaire-detached-${this.instanceId}`}\n        value={draft.otherText}\n        placeholder={this.copy.otherPlaceholder}\n        aria-label={this.copy.other}\n        aria-invalid={this.validation[question.id] ? 'true' : undefined}\n        aria-describedby={this.validation[question.id] ? errorId : undefined}\n        disabled={this.disabled}\n        onInput={(event: Event) =>\n          this.updateDraft(question.id, {\n            otherText: (event.target as HTMLInputElement).value,\n          })\n        }\n      />\n    );\n  }\n\n  private renderQuestion(question: AgentQuestion) {\n    const draft = this.drafts[question.id];\n    const errorId = `ds-agent-questionnaire-${this.instanceId}-${this.currentStep}-error`;\n    const promptId = `ds-agent-questionnaire-${this.instanceId}-${this.currentStep}-prompt`;\n    return (\n      <div class=\"questionnaire__body\">\n        <div class=\"questionnaire__prompt\">\n          <ds-text as=\"h2\" variant=\"text-title-small\" textId={promptId}>\n            {question.question}\n          </ds-text>\n          {question.description ? (\n            <ds-text variant=\"text-body-small\" color=\"secondary\">\n              {question.description}\n            </ds-text>\n          ) : null}\n        </div>\n        {question.type === 'text' ? (\n          <textarea\n            class=\"questionnaire__text-input\"\n            data-question-control\n            value={typeof draft.value === 'string' ? draft.value : ''}\n            form={`ds-agent-questionnaire-detached-${this.instanceId}`}\n            placeholder={question.placeholder}\n            aria-label={question.question}\n            aria-invalid={this.validation[question.id] ? 'true' : undefined}\n            aria-describedby={this.validation[question.id] ? errorId : undefined}\n            disabled={this.disabled}\n            rows={4}\n            onInput={(event: Event) =>\n              this.updateDraft(question.id, {\n                value: (event.target as HTMLTextAreaElement).value,\n              })\n            }\n          />\n        ) : (\n          <fieldset\n            class=\"questionnaire__choices\"\n            aria-describedby={this.validation[question.id] ? errorId : undefined}\n          >\n            <legend class=\"ds-visually-hidden\">{question.question}</legend>\n            {question.type === 'single'\n              ? this.renderSingleChoice(question, promptId, errorId)\n              : this.renderMultipleChoice(question, errorId)}\n          </fieldset>\n        )}\n        {this.validation[question.id] ? (\n          <div id={errorId} class=\"questionnaire__error\" role=\"alert\">\n            <ds-icon name=\"ExclamationTriangle\" size=\"xs\" color=\"inherit\" />\n            <ds-text variant=\"text-body-small\" color=\"negative\">\n              {this.validation[question.id]}\n            </ds-text>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n\n  private renderAnswered() {\n    return (\n      <div class=\"questionnaire questionnaire--answered\">\n        <ol class=\"questionnaire__summary\">\n          {this.questions.map(question => (\n            <li>\n              <ds-text variant=\"text-body-small\" emphasis>\n                {question.question}\n              </ds-text>\n              <ds-text variant=\"text-body-small\" color=\"secondary\">\n                {formatQuestionAnswer(\n                  question,\n                  this.answers.find(answer => answer.questionId === question.id)\n                )}\n              </ds-text>\n            </li>\n          ))}\n        </ol>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.status === 'preparing') {\n      return (\n        <Host>\n          <div class=\"questionnaire questionnaire--preparing\" role=\"status\">\n            <ds-loader size=\"sm\" />\n            <ds-text variant=\"text-body-medium\">{this.copy.preparing}</ds-text>\n          </div>\n        </Host>\n      );\n    }\n    if (!this.questions?.length) return null;\n    if (this.status === 'answered') return <Host>{this.renderAnswered()}</Host>;\n\n    const question = this.questions[this.currentStep];\n    const last = this.currentStep === this.questions.length - 1;\n    const canSkip = Boolean(question.skippable && !question.required);\n    return (\n      <Host>\n        <section\n          class={{\n            questionnaire: true,\n            'questionnaire--submitting': this.disabled,\n            'questionnaire--error': this.status === 'error',\n          }}\n          aria-busy={this.disabled ? 'true' : undefined}\n          aria-label={question.question}\n        >\n          <header class=\"questionnaire__header\">\n            <ds-text variant=\"text-caption\" color=\"secondary\">\n              {this.progressLabel()}\n            </ds-text>\n            {this.allowCancel ? (\n              <ds-tooltip label={this.copy.cancel} side=\"top\" size=\"sm\">\n                <ds-button-unfilled\n                  data-question-action\n                  variant=\"icon\"\n                  icon=\"Cross\"\n                  size=\"sm\"\n                  aria-label={this.copy.cancel}\n                  hasBorder={false}\n                  isInactive={this.disabled}\n                  onDsClick={() => this.dsCancel.emit({ requestId: this.requestId })}\n                />\n              </ds-tooltip>\n            ) : null}\n          </header>\n          {this.renderQuestion(question)}\n          {this.status === 'error' && this.errorMessage ? (\n            <div class=\"questionnaire__submission-error\" role=\"alert\">\n              <ds-icon name=\"ExclamationTriangle\" size=\"xs\" color=\"inherit\" />\n              <ds-text variant=\"text-body-small\" color=\"negative\">\n                {this.errorMessage}\n              </ds-text>\n            </div>\n          ) : null}\n          <footer class=\"questionnaire__actions\">\n            <div class=\"questionnaire__actions-leading\">\n              {this.currentStep > 0 ? (\n                <div class=\"questionnaire__action-item\">\n                  <ds-button-unfilled\n                    data-question-action\n                    label={this.copy.previous}\n                    size=\"sm\"\n                    width=\"fill\"\n                    isInactive={this.disabled}\n                    onDsClick={() => this.move(this.currentStep - 1)}\n                  />\n                </div>\n              ) : null}\n              {canSkip ? (\n                <div class=\"questionnaire__action-item\">\n                  <ds-button-unfilled\n                    data-question-action\n                    label={this.copy.skip}\n                    size=\"sm\"\n                    width=\"fill\"\n                    hasBorder={false}\n                    isInactive={this.disabled}\n                    onDsClick={() => this.skip(question)}\n                  />\n                </div>\n              ) : null}\n            </div>\n            <div class=\"questionnaire__action-item questionnaire__action-item--primary\">\n              <ds-button-filled\n                data-question-action\n                label={last ? this.copy.answer : this.copy.next}\n                size=\"sm\"\n                width=\"fill\"\n                isLoading={this.disabled}\n                onDsClick={() => (last ? this.submit() : this.next(question))}\n              />\n            </div>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -229,7 +229,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -148,7 +148,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -228,7 +228,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -252,7 +252,7 @@
     },
     {
       "path": "src/wc/components/AgentToolCall/AgentToolCall.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { AgentToolState } from '../conversation-types';\n\nconst STATUS_LABELS: Record<AgentToolState, string> = {\n  preparing: 'Preparing',\n  queued: 'Queued',\n  running: 'Running',\n  'waiting-for-user': 'Waiting for your response',\n  success: 'Completed',\n  error: 'Failed',\n  denied: 'Permission denied',\n  canceled: 'Canceled',\n};\n\n@Component({ tag: 'ds-agent-tool-call', styleUrl: 'AgentToolCall.css', scoped: true })\nexport class AgentToolCall {\n  @Element() el!: HTMLElement;\n\n  @Prop() name: string = '';\n  @Prop() label: string = '';\n  @Prop() state: AgentToolState = 'queued';\n  @Prop() statusLabel?: string;\n  @Prop() input?: unknown;\n  @Prop() output?: unknown;\n  @Prop() error?: string;\n  @Prop() open: boolean = false;\n\n  @Event() dsOpenChange!: EventEmitter<{ open: boolean }>;\n\n  @State() private hasSummary = false;\n  @State() private hasResult = false;\n  @State() private hasPlainTextResult = false;\n  @State() private hasDetails = false;\n\n  private slotObserver?: MutationObserver;\n\n  componentWillLoad() {\n    this.syncSlots();\n  }\n\n  componentDidLoad() {\n    this.syncSlots();\n    this.slotObserver = new MutationObserver(() => this.syncSlots());\n    this.slotObserver.observe(this.el, {\n      childList: true,\n      subtree: false,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n  }\n\n  disconnectedCallback() {\n    this.slotObserver?.disconnect();\n  }\n\n  private syncSlots() {\n    this.hasSummary = Boolean(this.el.querySelector('[slot=\"summary\"]'));\n    const result = this.el.querySelector<HTMLElement>('[slot=\"result\"]');\n    this.hasResult = Boolean(result);\n    this.hasPlainTextResult = Boolean(\n      result && result.childElementCount === 0 && result.textContent?.trim()\n    );\n    this.hasDetails = Boolean(this.el.querySelector('[slot=\"details\"]'));\n  }\n\n  private serialize(value: unknown) {\n    if (value === undefined) return '';\n    if (typeof value === 'string') return value;\n    try {\n      return JSON.stringify(value, null, 2);\n    } catch {\n      return String(value);\n    }\n  }\n\n  private get active(): boolean {\n    return ['preparing', 'queued', 'running'].includes(this.state);\n  }\n\n  private get expandable(): boolean {\n    return (\n      this.hasDetails ||\n      this.input !== undefined ||\n      this.output !== undefined ||\n      Boolean(this.error)\n    );\n  }\n\n  private renderStatusIcon() {\n    if (this.active) return <ds-loader size=\"xs\" color=\"inherit\" />;\n    if (this.state === 'success') {\n      return <ds-icon name=\"Check\" size=\"xs\" color=\"inherit\" />;\n    }\n    if (this.state === 'waiting-for-user') {\n      return <ds-icon name=\"Clock\" size=\"xs\" color=\"inherit\" />;\n    }\n    return <ds-icon name=\"ErrorTriangle\" size=\"xs\" color=\"inherit\" />;\n  }\n\n  private renderSummary(expandable: boolean) {\n    return (\n      <span class=\"agent-tool__summary-content\">\n        <span class=\"agent-tool__status-icon\" aria-hidden=\"true\">\n          {this.renderStatusIcon()}\n        </span>\n        <span class=\"agent-tool__title\">\n          {this.hasSummary ? (\n            <slot name=\"summary\" />\n          ) : (\n            <ds-text as=\"span\" variant=\"text-body-small\" emphasis>\n              {this.label || this.name}\n            </ds-text>\n          )}\n          <ds-text\n            class=\"agent-tool__state-label\"\n            as=\"span\"\n            variant=\"text-caption\"\n            color={['error', 'denied'].includes(this.state) ? 'negative' : 'secondary'}\n          >\n            {this.statusLabel ?? STATUS_LABELS[this.state]}\n          </ds-text>\n        </span>\n        {expandable ? (\n          <ds-icon class=\"agent-tool__chevron\" name=\"ChevronRight\" size=\"xs\" color=\"inherit\" />\n        ) : null}\n      </span>\n    );\n  }\n\n  private renderGenericDetails() {\n    return (\n      <div class=\"agent-tool__diagnostics\">\n        {this.input !== undefined ? (\n          <section>\n            <ds-text variant=\"text-caption\" emphasis>\n              Input\n            </ds-text>\n            <pre>{this.serialize(this.input)}</pre>\n          </section>\n        ) : null}\n        {this.output !== undefined ? (\n          <section>\n            <ds-text variant=\"text-caption\" emphasis>\n              Output\n            </ds-text>\n            <pre>{this.serialize(this.output)}</pre>\n          </section>\n        ) : null}\n        {this.error ? (\n          <section>\n            <ds-text variant=\"text-caption\" emphasis>\n              Error\n            </ds-text>\n            <pre>{this.error}</pre>\n          </section>\n        ) : null}\n      </div>\n    );\n  }\n\n  private handleToggle = (event: Event) => {\n    this.dsOpenChange.emit({ open: (event.currentTarget as HTMLDetailsElement).open });\n  };\n\n  render() {\n    const expandable = this.expandable;\n    return (\n      <Host>\n        <div class={`agent-tool agent-tool--${this.state}`}>\n          {expandable ? (\n            <details open={this.open} onToggle={this.handleToggle}>\n              <summary>{this.renderSummary(true)}</summary>\n              <div class=\"agent-tool__details\">\n                {this.hasDetails ? <slot name=\"details\" /> : this.renderGenericDetails()}\n              </div>\n            </details>\n          ) : (\n            <div class=\"agent-tool__row\">{this.renderSummary(false)}</div>\n          )}\n          {this.hasResult ? (\n            <div\n              class={{\n                'agent-tool__result': true,\n                'agent-tool__result--plain-text': this.hasPlainTextResult,\n              }}\n            >\n              <slot name=\"result\" />\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { AgentToolState } from '../conversation-types';\n\nconst STATUS_LABELS: Record<AgentToolState, string> = {\n  preparing: 'Preparing',\n  queued: 'Queued',\n  running: 'Running',\n  'waiting-for-user': 'Waiting for your response',\n  success: 'Completed',\n  error: 'Failed',\n  denied: 'Permission denied',\n  canceled: 'Canceled',\n};\n\n@Component({ tag: 'ds-agent-tool-call', styleUrl: 'AgentToolCall.css', scoped: true })\nexport class AgentToolCall {\n  @Element() el!: HTMLElement;\n\n  @Prop() name: string = '';\n  @Prop() label: string = '';\n  @Prop() state: AgentToolState = 'queued';\n  @Prop() statusLabel?: string;\n  @Prop() input?: unknown;\n  @Prop() output?: unknown;\n  @Prop() error?: string;\n  @Prop() open: boolean = false;\n\n  @Event() dsOpenChange!: EventEmitter<{ open: boolean }>;\n\n  @State() private hasSummary = false;\n  @State() private hasResult = false;\n  @State() private hasPlainTextResult = false;\n  @State() private hasDetails = false;\n\n  private slotObserver?: MutationObserver;\n\n  componentWillLoad() {\n    this.syncSlots();\n  }\n\n  componentDidLoad() {\n    this.syncSlots();\n    this.slotObserver = new MutationObserver(() => this.syncSlots());\n    this.slotObserver.observe(this.el, {\n      childList: true,\n      subtree: false,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n  }\n\n  disconnectedCallback() {\n    this.slotObserver?.disconnect();\n  }\n\n  private syncSlots() {\n    this.hasSummary = Boolean(this.el.querySelector('[slot=\"summary\"]'));\n    const result = this.el.querySelector<HTMLElement>('[slot=\"result\"]');\n    this.hasResult = Boolean(result);\n    this.hasPlainTextResult = Boolean(\n      result && result.childElementCount === 0 && result.textContent?.trim()\n    );\n    this.hasDetails = Boolean(this.el.querySelector('[slot=\"details\"]'));\n  }\n\n  private serialize(value: unknown) {\n    if (value === undefined) return '';\n    if (typeof value === 'string') return value;\n    try {\n      return JSON.stringify(value, null, 2);\n    } catch {\n      return String(value);\n    }\n  }\n\n  private get active(): boolean {\n    return ['preparing', 'queued', 'running'].includes(this.state);\n  }\n\n  private get expandable(): boolean {\n    return (\n      this.hasDetails ||\n      this.input !== undefined ||\n      this.output !== undefined ||\n      Boolean(this.error)\n    );\n  }\n\n  private renderStatusIcon() {\n    if (this.active) return <ds-loader size=\"xs\" color=\"inherit\" />;\n    if (this.state === 'success') {\n      return <ds-icon name=\"Check\" size=\"xs\" color=\"inherit\" />;\n    }\n    if (this.state === 'waiting-for-user') {\n      return <ds-icon name=\"Clock\" size=\"xs\" color=\"inherit\" />;\n    }\n    return <ds-icon name=\"ExclamationTriangle\" size=\"xs\" color=\"inherit\" />;\n  }\n\n  private renderSummary(expandable: boolean) {\n    return (\n      <span class=\"agent-tool__summary-content\">\n        <span class=\"agent-tool__status-icon\" aria-hidden=\"true\">\n          {this.renderStatusIcon()}\n        </span>\n        <span class=\"agent-tool__title\">\n          {this.hasSummary ? (\n            <slot name=\"summary\" />\n          ) : (\n            <ds-text as=\"span\" variant=\"text-body-small\" emphasis>\n              {this.label || this.name}\n            </ds-text>\n          )}\n          <ds-text\n            class=\"agent-tool__state-label\"\n            as=\"span\"\n            variant=\"text-caption\"\n            color={['error', 'denied'].includes(this.state) ? 'negative' : 'secondary'}\n          >\n            {this.statusLabel ?? STATUS_LABELS[this.state]}\n          </ds-text>\n        </span>\n        {expandable ? (\n          <ds-icon class=\"agent-tool__chevron\" name=\"ChevronRight\" size=\"xs\" color=\"inherit\" />\n        ) : null}\n      </span>\n    );\n  }\n\n  private renderGenericDetails() {\n    return (\n      <div class=\"agent-tool__diagnostics\">\n        {this.input !== undefined ? (\n          <section>\n            <ds-text variant=\"text-caption\" emphasis>\n              Input\n            </ds-text>\n            <pre>{this.serialize(this.input)}</pre>\n          </section>\n        ) : null}\n        {this.output !== undefined ? (\n          <section>\n            <ds-text variant=\"text-caption\" emphasis>\n              Output\n            </ds-text>\n            <pre>{this.serialize(this.output)}</pre>\n          </section>\n        ) : null}\n        {this.error ? (\n          <section>\n            <ds-text variant=\"text-caption\" emphasis>\n              Error\n            </ds-text>\n            <pre>{this.error}</pre>\n          </section>\n        ) : null}\n      </div>\n    );\n  }\n\n  private handleToggle = (event: Event) => {\n    this.dsOpenChange.emit({ open: (event.currentTarget as HTMLDetailsElement).open });\n  };\n\n  render() {\n    const expandable = this.expandable;\n    return (\n      <Host>\n        <div class={`agent-tool agent-tool--${this.state}`}>\n          {expandable ? (\n            <details open={this.open} onToggle={this.handleToggle}>\n              <summary>{this.renderSummary(true)}</summary>\n              <div class=\"agent-tool__details\">\n                {this.hasDetails ? <slot name=\"details\" /> : this.renderGenericDetails()}\n              </div>\n            </details>\n          ) : (\n            <div class=\"agent-tool__row\">{this.renderSummary(false)}</div>\n          )}\n          {this.hasResult ? (\n            <div\n              class={{\n                'agent-tool__result': true,\n                'agent-tool__result--plain-text': this.hasPlainTextResult,\n              }}\n            >\n              <slot name=\"result\" />\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -112,7 +112,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -149,7 +149,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -264,7 +264,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -309,7 +309,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -214,7 +214,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -287,7 +287,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -399,7 +399,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -540,7 +540,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -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"
     },
     {

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

@@ -357,7 +357,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -177,7 +177,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -629,7 +629,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }