@ds-mo/ui 15.0.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": {

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": {

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": {

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": {

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": {

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": {

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": {

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": {
@@ -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": {
@@ -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": {

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": {

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": {

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

@@ -123,7 +123,32 @@
           "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": [
+              "variant"
+            ]
+          },
+          {
+            "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": {

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

@@ -90,7 +90,30 @@
           "label": "Cross-browser workflow behavior",
           "path": "tests/e2e/bar-workflow.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": {

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

@@ -82,7 +82,12 @@
           "label": "Expanded page-header composition",
           "path": "src/wc/components/BarTitle/BarTitle.tsx"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The breadcrumb owns internal truncation; the application supplies the host width and placement.",
+        "protected": [],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {

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

@@ -107,7 +107,74 @@
           "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": [
+              "font",
+              "font-size",
+              "font-weight",
+              "font-family",
+              "line-height",
+              "letter-spacing",
+              "height",
+              "min-height",
+              "max-height",
+              "padding",
+              "gap"
+            ],
+            "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+            "props": [
+              "size",
+              "isInset",
+              "insetDepth",
+              "labelEmphasis"
+            ]
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its corner treatment; select the supported radius treatment.",
+            "props": [
+              "rounded",
+              "size"
+            ]
+          },
+          {
+            "properties": [
+              "width",
+              "min-width",
+              "max-width"
+            ],
+            "reason": "The button owns hug/fill sizing and its minimum square geometry; use width and constrain the surrounding layout.",
+            "props": [
+              "width",
+              "size"
+            ]
+          },
+          {
+            "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",
+              "background",
+              "variant",
+              "hasBorder",
+              "size"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {

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

@@ -96,7 +96,70 @@
           "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": [
+              "font",
+              "font-size",
+              "font-weight",
+              "font-family",
+              "line-height",
+              "letter-spacing",
+              "height",
+              "min-height",
+              "max-height",
+              "padding",
+              "gap"
+            ],
+            "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+            "props": [
+              "size",
+              "isInset",
+              "insetDepth",
+              "labelEmphasis"
+            ]
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its corner treatment; select the supported radius treatment.",
+            "props": [
+              "rounded",
+              "size"
+            ]
+          },
+          {
+            "properties": [
+              "width",
+              "min-width",
+              "max-width"
+            ],
+            "reason": "The button owns hug/fill sizing and its minimum square geometry; use width and constrain the surrounding layout.",
+            "props": [
+              "width",
+              "size"
+            ]
+          },
+          {
+            "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": [
+              "variant",
+              "size"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {