@ds-mo/ui 14.36.0 → 15.1.0

package/dist/lint/types.d.ts

@@ -0,0 +1,13 @@
+/** Options for the opt-in CompoMo ESLint flat configuration. */
+export interface LintOptions {
+    /** Consumer policy is the default; authoring preserves library exceptions. */
+    mode?: 'authoring' | 'consumer';
+    /** Promote consumer findings to errors without enabling additional rules. */
+    strict?: boolean;
+    /** Defaults to all CSS files. An empty array disables CSS checks. */
+    cssFiles?: string[];
+    /** Defaults to JS/JSX/TS/TSX. An empty array enables CSS-only adoption. */
+    jsxFiles?: string[];
+    /** Ignore patterns local to these presets, not the application's other rules. */
+    ignores?: string[];
+}

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

@@ -43,7 +43,12 @@
           "label": "Storybook examples",
           "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "Disclosure composition owns its rows; the host remains an application layout box.",
+        "protected": [],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -132,7 +137,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 +161,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

@@ -56,7 +56,12 @@
           "label": "Agent chat composition",
           "path": "agent/patterns/agent-chat/pattern.agent.json"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "Question and action components own their recipes; the questionnaire host remains a responsive layout box.",
+        "protected": [],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -237,7 +242,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 +271,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

@@ -56,7 +56,18 @@
           "label": "Prose distribution decision",
           "path": "docs/prose-foundation.md"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "Structured response parts own their recipes; the host permits application layout and the public prose measure.",
+        "protected": [],
+        "customProperties": [
+          {
+            "name": "--ds-prose-text-max-inline-size",
+            "source": "src/wc/styles/prose.css",
+            "reason": "Application-owned readable prose measure."
+          }
+        ]
+      }
     },
     "api": {
       "props": {
@@ -229,7 +240,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

@@ -43,7 +43,12 @@
           "label": "Source safety and disclosure stories",
           "path": "src/wc/components/AgentSourceList/AgentSourceList.stories.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "Source rows own their recipes; the disclosure host remains an application layout box.",
+        "protected": [],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -148,7 +153,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

@@ -53,7 +53,12 @@
           "label": "Font ownership and loading",
           "path": "docs/font-ownership.md"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "Slotted tool summaries and results retain application-owned styling and layout.",
+        "protected": [],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -228,7 +233,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 +257,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

@@ -39,7 +39,12 @@
           "label": "Storybook examples",
           "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "Attachment items own their recipes; the list host permits application layout.",
+        "protected": [],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -112,7 +117,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

@@ -37,7 +37,27 @@
           "label": "Storybook examples",
           "path": "src/wc/components/Avatar/Avatar.stories.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "width",
+              "height",
+              "min-width",
+              "min-height",
+              "max-width",
+              "max-height"
+            ],
+            "reason": "The primitive owns its size recipe; select size and position it through the parent layout.",
+            "props": [
+              "size"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -149,7 +169,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

@@ -84,7 +84,35 @@
           "label": "Storybook examples",
           "path": "src/wc/components/Badge/Badge.stories.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": [
+              "background",
+              "surface",
+              "variant",
+              "hasRing"
+            ]
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -264,7 +292,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."
       }
@@ -280,7 +308,7 @@
   "files": [
     {
       "path": "src/wc/components/Badge/Badge.css",
-      "content": "@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  container-name: ds-badge-gradient;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n  --_badge-gradient-context: var(--ds-shell-gradient-context, flat);\n}\n\n:host(.badge--force-gradient-background) {\n  --_badge-gradient-context: gradient;\n}\n\n:host(.badge--force-flat-background) {\n  --_badge-gradient-context: flat;\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n  --_badge-ring-width: 0;\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: auto;\n  min-width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n@container ds-badge-gradient style(--_badge-gradient-context: gradient) {\n  /* Match the scoped base rule's specificity; Stencil does not yet scope style-query selectors. */\n  .badge__mark.badge__mark {\n    position: relative;\n    z-index: 0;\n    box-shadow: none;\n    isolation: isolate;\n  }\n\n  .badge__mark::before,\n  .badge__mark::after {\n    content: '';\n    position: absolute;\n    inset: calc(-1 * var(--_badge-ring-width));\n    border-radius: inherit;\n    box-sizing: border-box;\n    padding: var(--_badge-ring-width);\n    pointer-events: none;\n    /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n    -webkit-mask:\n      linear-gradient(#fff 0 0) content-box,\n      linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask:\n      linear-gradient(#fff 0 0) content-box,\n      linear-gradient(#fff 0 0);\n    /* stylelint-enable color-no-hex */\n    mask-composite: exclude;\n  }\n\n  .badge__mark::before {\n    z-index: -2;\n    background-color: var(--_badge-ring);\n  }\n\n  .badge__mark::after {\n    z-index: -1;\n    background-image: var(--ds-shell-gradient-image, none);\n    background-size: var(--ds-shell-gradient-size, auto);\n    background-position: 0 0;\n    background-repeat: no-repeat;\n    background-attachment: fixed;\n    opacity: var(--ds-shell-gradient-opacity, 1);\n  }\n}\n\n@media (forced-colors: active) {\n  .badge__mark {\n    color: var(--ds-forced-color-on-selected);\n    background: var(--ds-forced-color-selected);\n    box-shadow: none;\n    outline: var(--_badge-ring-width) solid var(--ds-forced-color-surface);\n  }\n\n  .badge__mark::before,\n  .badge__mark::after {\n    display: none;\n  }\n}\n",
+      "content": "@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  container-name: ds-badge-gradient;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n  --_badge-gradient-context: var(--ds-shell-gradient-context, flat);\n}\n\n:host(.badge--force-gradient-background) {\n  --_badge-gradient-context: gradient;\n}\n\n:host(.badge--force-flat-background) {\n  --_badge-gradient-context: flat;\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n  --_badge-ring-width: 0;\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: auto;\n  min-width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n@container ds-badge-gradient style(--_badge-gradient-context: gradient) {\n  /* Match the scoped base rule's specificity; Stencil does not yet scope style-query selectors. */\n  .badge__mark.badge__mark {\n    position: relative;\n    z-index: 0;\n    box-shadow: none;\n    isolation: isolate;\n  }\n\n  .badge__mark::before,\n  .badge__mark::after {\n    content: '';\n    position: absolute;\n    inset: calc(-1 * var(--_badge-ring-width));\n    border-radius: inherit;\n    box-sizing: border-box;\n    padding: var(--_badge-ring-width);\n    pointer-events: none;\n    /* eslint-disable compomo/color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n    -webkit-mask:\n      linear-gradient(#fff 0 0) content-box,\n      linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask:\n      linear-gradient(#fff 0 0) content-box,\n      linear-gradient(#fff 0 0);\n    /* eslint-enable compomo/color-no-hex */\n    mask-composite: exclude;\n  }\n\n  .badge__mark::before {\n    z-index: -2;\n    background-color: var(--_badge-ring);\n  }\n\n  .badge__mark::after {\n    z-index: -1;\n    background-image: var(--ds-shell-gradient-image, none);\n    background-size: var(--ds-shell-gradient-size, auto);\n    background-position: 0 0;\n    background-repeat: no-repeat;\n    background-attachment: fixed;\n    opacity: var(--ds-shell-gradient-opacity, 1);\n  }\n}\n\n@media (forced-colors: active) {\n  .badge__mark {\n    color: var(--ds-forced-color-on-selected);\n    background: var(--ds-forced-color-selected);\n    box-shadow: none;\n    outline: var(--_badge-ring-width) solid var(--ds-forced-color-surface);\n  }\n\n  .badge__mark::before,\n  .badge__mark::after {\n    display: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -91,7 +91,33 @@
           "label": "Application shell contract",
           "path": "agent/patterns/application-shell/pattern.agent.json"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": [
+              "intent",
+              "contrast"
+            ]
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -309,7 +335,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."
       }
@@ -332,7 +358,7 @@
     },
     {
       "path": "src/wc/components/Banner/Banner.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 { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent = 'neutral' | 'brand' | 'positive' | 'warning' | 'caution' | 'negative';\n\nexport type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';\nexport type BannerAnnouncement = 'none' | 'polite' | 'assertive';\nexport type BannerOrientation = 'horizontal' | 'vertical';\n\ntype BannerPhase = 'closed' | 'open' | 'closing';\n\n@Component({\n  tag: 'ds-banner',\n  styleUrl: 'Banner.css',\n  scoped: true,\n})\nexport class Banner {\n  @Element() el!: HTMLElement;\n\n  /** Required explanatory copy. */\n  @Prop() description!: string;\n  /** Optional visual heading rendered before the description. */\n  @Prop() heading: string = '';\n  /** Semantic color family. */\n  @Prop({ reflect: true }) intent: BannerIntent = 'neutral';\n  /** Surface fill weight. */\n  @Prop({ reflect: true }) contrast: BannerContrast = 'faint';\n  /** Copy and action-lane arrangement, selected by the application. */\n  @Prop({ reflect: true }) orientation: BannerOrientation = 'horizontal';\n  /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */\n  @Prop({ reflect: true }) open: boolean = true;\n  /** Localized accessible label for the close control. */\n  @Prop() dismissLabel: string = 'Dismiss banner';\n  /** Live-region urgency, independent of visual intent. */\n  @Prop() announcement: BannerAnnouncement = 'none';\n\n  /** Emitted when the close control requests dismissal. The application controls open. */\n  @Event() dsClose!: EventEmitter<MouseEvent>;\n  /** Emitted once after controlled exit motion and layout collapse complete. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  @State() private rendered = false;\n  @State() private phase: BannerPhase = 'closed';\n  @State() private hasActions = false;\n\n  private loaded = false;\n  private transitionTimer: ReturnType<typeof setTimeout> | null = null;\n  private closePending = false;\n\n  componentWillLoad() {\n    this.rendered = this.open;\n    this.phase = this.open ? 'open' : 'closed';\n  }\n\n  componentDidLoad() {\n    this.loaded = true;\n    this.updateActionsPresence();\n  }\n\n  disconnectedCallback() {\n    this.clearTransitionWork();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (!this.loaded) return;\n    if (isOpen) this.startOpen();\n    else this.startClose();\n  }\n\n  private get closeMotionMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private clearTransitionWork() {\n    if (this.transitionTimer) clearTimeout(this.transitionTimer);\n    this.transitionTimer = null;\n  }\n\n  private startOpen() {\n    this.clearTransitionWork();\n    this.closePending = false;\n    this.rendered = true;\n    this.phase = 'open';\n  }\n\n  private startClose() {\n    this.clearTransitionWork();\n    if (!this.rendered || this.phase === 'closed') {\n      this.rendered = false;\n      return;\n    }\n\n    this.closePending = true;\n    this.phase = 'closing';\n    const duration = this.closeMotionMs;\n    if (duration <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.transitionTimer = setTimeout(() => {\n      this.transitionTimer = null;\n      this.finishClose();\n    }, duration);\n  }\n\n  private finishClose() {\n    if (this.open || !this.closePending) return;\n    this.closePending = false;\n    this.rendered = false;\n    this.phase = 'closed';\n    this.dsAfterClose.emit();\n  }\n\n  private updateActionsPresence(slot?: HTMLSlotElement) {\n    const actions = slot\n      ? slot.assignedElements().filter(element => element.tagName === 'DS-BUTTON-UNFILLED')\n      : Array.from(this.el.querySelectorAll('ds-button-unfilled[slot=\"actions\"]'));\n    this.hasActions = actions.length > 0;\n  }\n\n  private requestClose(event: CustomEvent<MouseEvent>) {\n    if (!this.open || this.phase === 'closing') return;\n    this.dsClose.emit(event.detail);\n  }\n\n  private get role(): 'status' | 'alert' | undefined {\n    if (this.announcement === 'polite') return 'status';\n    if (this.announcement === 'assertive') return 'alert';\n    return undefined;\n  }\n\n  private get ariaLive(): 'polite' | 'assertive' | undefined {\n    return this.announcement === 'none' ? undefined : this.announcement;\n  }\n\n  render() {\n    const closing = this.phase === 'closing';\n    const hostClass = {\n      banner: true,\n      'banner--open': this.phase === 'open',\n      'banner--closing': closing,\n      'banner--hidden': !this.rendered,\n      'banner--has-actions': this.hasActions,\n      [`banner--orientation-${this.orientation}`]: true,\n      [`banner--intent-${this.intent}`]: true,\n      [`banner--contrast-${this.contrast}`]: true,\n    };\n\n    return (\n      <Host class={hostClass}>\n        <div class=\"banner-browser-edge\" aria-hidden=\"true\" />\n        <div class=\"banner-overflow\">\n          <section\n            class=\"banner-surface ds-chrome-header ds-chrome-header--wrapping\"\n            role={this.role}\n            aria-live={this.ariaLive}\n            aria-atomic={this.announcement === 'none' ? undefined : 'true'}\n            aria-hidden={closing ? 'true' : undefined}\n            inert={closing ? true : undefined}\n            data-phase={this.phase}\n          >\n            {/* eslint-disable-next-line local/prefer-direct-ds-text -- The header-copy lane owns the 6px container inset separately from the inline text flow's 2px inset. */}\n            <div class=\"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md\">\n              <ds-text class=\"banner-copy-flow\" as=\"div\" variant=\"text-body-medium\" color=\"inherit\">\n                {this.heading && (\n                  <ds-text\n                    class=\"banner-heading\"\n                    as=\"span\"\n                    variant=\"text-title-small\"\n                    color=\"inherit\"\n                  >\n                    {this.heading}\n                  </ds-text>\n                )}\n                <span class=\"banner-description\">{this.description}</span>\n              </ds-text>\n            </div>\n            <div class=\"banner-trailing ds-chrome-header__trailing\">\n              <div class={{ 'banner-actions': true, 'banner-actions--empty': !this.hasActions }}>\n                <slot\n                  name=\"actions\"\n                  onSlotchange={(event: Event) =>\n                    this.updateActionsPresence(event.currentTarget as HTMLSlotElement)\n                  }\n                />\n              </div>\n              <div class=\"banner-dismiss\">\n                <ds-tooltip label={this.dismissLabel} side=\"bottom\" size=\"sm\">\n                  <ds-button-unfilled\n                    class=\"banner-close\"\n                    variant=\"icon\"\n                    icon=\"Cross\"\n                    size=\"md\"\n                    type=\"button\"\n                    background={this.contrast}\n                    aria-label={this.dismissLabel}\n                    hasBorder={false}\n                    activeFill={false}\n                    onDsClick={(event: CustomEvent<MouseEvent>) => this.requestClose(event)}\n                  />\n                </ds-tooltip>\n              </div>\n            </div>\n          </section>\n        </div>\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 { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent = 'neutral' | 'brand' | 'positive' | 'warning' | 'caution' | 'negative';\n\nexport type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';\nexport type BannerAnnouncement = 'none' | 'polite' | 'assertive';\nexport type BannerOrientation = 'horizontal' | 'vertical';\n\ntype BannerPhase = 'closed' | 'open' | 'closing';\n\n@Component({\n  tag: 'ds-banner',\n  styleUrl: 'Banner.css',\n  scoped: true,\n})\nexport class Banner {\n  @Element() el!: HTMLElement;\n\n  /** Required explanatory copy. */\n  @Prop() description!: string;\n  /** Optional visual heading rendered before the description. */\n  @Prop() heading: string = '';\n  /** Semantic color family. */\n  @Prop({ reflect: true }) intent: BannerIntent = 'neutral';\n  /** Surface fill weight. */\n  @Prop({ reflect: true }) contrast: BannerContrast = 'faint';\n  /** Copy and action-lane arrangement, selected by the application. */\n  @Prop({ reflect: true }) orientation: BannerOrientation = 'horizontal';\n  /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */\n  @Prop({ reflect: true }) open: boolean = true;\n  /** Localized accessible label for the close control. */\n  @Prop() dismissLabel: string = 'Dismiss banner';\n  /** Live-region urgency, independent of visual intent. */\n  @Prop() announcement: BannerAnnouncement = 'none';\n\n  /** Emitted when the close control requests dismissal. The application controls open. */\n  @Event() dsClose!: EventEmitter<MouseEvent>;\n  /** Emitted once after controlled exit motion and layout collapse complete. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  @State() private rendered = false;\n  @State() private phase: BannerPhase = 'closed';\n  @State() private hasActions = false;\n\n  private loaded = false;\n  private transitionTimer: ReturnType<typeof setTimeout> | null = null;\n  private closePending = false;\n\n  componentWillLoad() {\n    this.rendered = this.open;\n    this.phase = this.open ? 'open' : 'closed';\n  }\n\n  componentDidLoad() {\n    this.loaded = true;\n    this.updateActionsPresence();\n  }\n\n  disconnectedCallback() {\n    this.clearTransitionWork();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (!this.loaded) return;\n    if (isOpen) this.startOpen();\n    else this.startClose();\n  }\n\n  private get closeMotionMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private clearTransitionWork() {\n    if (this.transitionTimer) clearTimeout(this.transitionTimer);\n    this.transitionTimer = null;\n  }\n\n  private startOpen() {\n    this.clearTransitionWork();\n    this.closePending = false;\n    this.rendered = true;\n    this.phase = 'open';\n  }\n\n  private startClose() {\n    this.clearTransitionWork();\n    if (!this.rendered || this.phase === 'closed') {\n      this.rendered = false;\n      return;\n    }\n\n    this.closePending = true;\n    this.phase = 'closing';\n    const duration = this.closeMotionMs;\n    if (duration <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.transitionTimer = setTimeout(() => {\n      this.transitionTimer = null;\n      this.finishClose();\n    }, duration);\n  }\n\n  private finishClose() {\n    if (this.open || !this.closePending) return;\n    this.closePending = false;\n    this.rendered = false;\n    this.phase = 'closed';\n    this.dsAfterClose.emit();\n  }\n\n  private updateActionsPresence(slot?: HTMLSlotElement) {\n    const actions = slot\n      ? slot.assignedElements().filter(element => element.tagName === 'DS-BUTTON-UNFILLED')\n      : Array.from(this.el.querySelectorAll('ds-button-unfilled[slot=\"actions\"]'));\n    this.hasActions = actions.length > 0;\n  }\n\n  private requestClose(event: CustomEvent<MouseEvent>) {\n    if (!this.open || this.phase === 'closing') return;\n    this.dsClose.emit(event.detail);\n  }\n\n  private get role(): 'status' | 'alert' | undefined {\n    if (this.announcement === 'polite') return 'status';\n    if (this.announcement === 'assertive') return 'alert';\n    return undefined;\n  }\n\n  private get ariaLive(): 'polite' | 'assertive' | undefined {\n    return this.announcement === 'none' ? undefined : this.announcement;\n  }\n\n  render() {\n    const closing = this.phase === 'closing';\n    const hostClass = {\n      banner: true,\n      'banner--open': this.phase === 'open',\n      'banner--closing': closing,\n      'banner--hidden': !this.rendered,\n      'banner--has-actions': this.hasActions,\n      [`banner--orientation-${this.orientation}`]: true,\n      [`banner--intent-${this.intent}`]: true,\n      [`banner--contrast-${this.contrast}`]: true,\n    };\n\n    return (\n      <Host class={hostClass}>\n        <div class=\"banner-browser-edge\" aria-hidden=\"true\" />\n        <div class=\"banner-overflow\">\n          <section\n            class=\"banner-surface ds-chrome-header ds-chrome-header--wrapping\"\n            role={this.role}\n            aria-live={this.ariaLive}\n            aria-atomic={this.announcement === 'none' ? undefined : 'true'}\n            aria-hidden={closing ? 'true' : undefined}\n            inert={closing ? true : undefined}\n            data-phase={this.phase}\n          >\n            {/* eslint-disable-next-line compomo/prefer-direct-ds-text -- The header-copy lane owns the 6px container inset separately from the inline text flow's 2px inset. */}\n            <div class=\"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md\">\n              <ds-text class=\"banner-copy-flow\" as=\"div\" variant=\"text-body-medium\" color=\"inherit\">\n                {this.heading && (\n                  <ds-text\n                    class=\"banner-heading\"\n                    as=\"span\"\n                    variant=\"text-title-small\"\n                    color=\"inherit\"\n                  >\n                    {this.heading}\n                  </ds-text>\n                )}\n                <span class=\"banner-description\">{this.description}</span>\n              </ds-text>\n            </div>\n            <div class=\"banner-trailing ds-chrome-header__trailing\">\n              <div class={{ 'banner-actions': true, 'banner-actions--empty': !this.hasActions }}>\n                <slot\n                  name=\"actions\"\n                  onSlotchange={(event: Event) =>\n                    this.updateActionsPresence(event.currentTarget as HTMLSlotElement)\n                  }\n                />\n              </div>\n              <div class=\"banner-dismiss\">\n                <ds-tooltip label={this.dismissLabel} side=\"bottom\" size=\"sm\">\n                  <ds-button-unfilled\n                    class=\"banner-close\"\n                    variant=\"icon\"\n                    icon=\"Cross\"\n                    size=\"md\"\n                    type=\"button\"\n                    background={this.contrast}\n                    aria-label={this.dismissLabel}\n                    hasBorder={false}\n                    activeFill={false}\n                    onDsClick={(event: CustomEvent<MouseEvent>) => this.requestClose(event)}\n                  />\n                </ds-tooltip>\n              </div>\n            </div>\n          </section>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -82,7 +82,30 @@
           "label": "Rendered behavior coverage",
           "path": "tests/e2e/bar-action.spec.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": []
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -214,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."
       }

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

@@ -106,7 +106,12 @@
           "label": "Surface ownership and trigger state",
           "path": "src/docs/SurfaceOwnership.mdx"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The host participates in shell-owned layout; internal tabs and chrome own their recipes.",
+        "protected": [],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -287,7 +292,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

@@ -104,7 +104,30 @@
           "label": "Surface ownership and trigger state",
           "path": "src/docs/SurfaceOwnership.mdx"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": []
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -399,7 +422,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."
       }