@ds-mo/ui 15.3.0 → 15.4.0

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

@@ -0,0 +1,175 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "inline-banner-settings",
+  "title": "InlineBannerSettings",
+  "description": "Compact non-interactive informational copy row for settings cards.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/inline-banner-settings",
+    "source": "src/wc/components/InlineBannerSettings/InlineBannerSettings.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Compact non-interactive informational copy row for settings cards.",
+      "useWhen": [
+        "A settings card needs persistent informational copy above its content.",
+        "The message should remain visible in both read-only and editing presentations of the settings card.",
+        "The message needs body-small typography, compact spacing, and a single tertiary bottom boundary."
+      ],
+      "avoidWhen": [
+        "The message belongs in general bounded content outside a settings card; reserve the general inline-banner component for that use case.",
+        "The message is application-wide or needs dismissal, actions, or announcement urgency; use Banner.",
+        "The message is transient or follows a completed action; use Toast."
+      ],
+      "alternatives": [
+        {
+          "when": "A persistent application-wide condition needs optional actions or dismissal.",
+          "component": "component:ds-banner",
+          "reason": "Banner owns shell-level messaging, actions, dismissal, and announcement behavior."
+        },
+        {
+          "when": "A field needs supporting or validation copy tied to its control.",
+          "component": "component:ds-field",
+          "reason": "Field owns the control relationship and supporting-message semantics."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-card-setting",
+        "component:ds-text"
+      ],
+      "accessibility": [
+        "Keep the description concise and authored; InlineBannerSettings does not transform, truncate, or announce the copy.",
+        "Use InlineBannerSettings for static context. Applications must choose a live-region component when a dynamic announcement is required.",
+        "The informational copy remains plain text and has no interactive controls or dismissal affordance."
+      ],
+      "states": [
+        "The description renders verbatim in every state in which the owning settings card projects the component.",
+        "The component has no internal visibility, editing, or dismissal state; the owning settings card controls whether it is present.",
+        "The content height is intrinsic: the banner contributes 8px block padding and its inner content container contributes 4px block padding. A single body-small line is 24px inside that container (4px + 16px line-height + 4px), followed by the tertiary bottom boundary."
+      ],
+      "responsiveBehavior": [
+        "The component fills the available inline size and lets body-small copy wrap naturally.",
+        "The effective inline inset remains 16px: 8px banner padding, 6px inner content padding, and 2px text-side padding."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Pass the complete authored message through description, assign slot=\"banner\" on CardSetting, and do not apply a CSS casing transform or mutate the text for presentation."
+        ],
+        "react": [
+          "Pass the complete authored message through the description prop, set slot=\"banner\" on CardSetting, and keep the component mounted for every settings-card state that needs the context."
+        ],
+        "angular": [
+          "Bind [description] from the settings card's stable copy source and project the component into CardSetting's banner slot for every state that needs the context."
+        ]
+      },
+      "references": [
+        {
+          "label": "Settings inline banner examples",
+          "path": "src/wc/components/InlineBannerSettings/InlineBannerSettings.stories.ts"
+        },
+        {
+          "label": "Rendered geometry coverage",
+          "path": "tests/e2e/inline-banner-settings.spec.ts"
+        }
+      ],
+      "styling": {
+        "rationale": "The component owns only the compact settings informational row recipe; its card owns the surrounding surface and layout.",
+        "protected": [
+          {
+            "properties": [
+              "border-bottom",
+              "color",
+              "padding"
+            ],
+            "reason": "The component owns the readable informational row treatment and keeps its spacing consistent across settings cards.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "description": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "description",
+          "required": true,
+          "mutable": false,
+          "description": "Authored informational copy rendered without transformation."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "description": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "description",
+        "required": true,
+        "mutable": false,
+        "description": "Authored informational copy rendered without transformation."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-inline-banner-settings",
+      "react": "DsInlineBannerSettings",
+      "vue": "DsInlineBannerSettings",
+      "angular": "DsInlineBannerSettings"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-inline-banner-settings.js';",
+        "example": "<ds-inline-banner-settings></ds-inline-banner-settings>"
+      },
+      "react": {
+        "import": "import { DsInlineBannerSettings } from '@ds-mo/ui/react';",
+        "example": "<DsInlineBannerSettings />"
+      },
+      "vue": {
+        "import": "import { DsInlineBannerSettings } from '@ds-mo/ui/vue';",
+        "example": "<DsInlineBannerSettings />"
+      },
+      "angular": {
+        "import": "import { DsInlineBannerSettings } from '@ds-mo/ui/angular/ds-inline-banner-settings';",
+        "example": "<ds-inline-banner-settings></ds-inline-banner-settings>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/InlineBannerSettings/InlineBannerSettings.css",
+      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  border-block-end: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.inline-banner-settings__content {\n  padding-block: var(--dimension-space-050);\n  padding-inline: var(--dimension-space-075);\n}\n\nds-text.inline-banner-settings__description {\n  overflow-wrap: anywhere;\n  padding-inline: var(--dimension-space-025);\n}\n\n@media (forced-colors: active) {\n  :host {\n    border-block-end-color: var(--ds-forced-color-content);\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/InlineBannerSettings/InlineBannerSettings.tsx",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ds-inline-banner-settings',\n  styleUrl: 'InlineBannerSettings.css',\n  scoped: true,\n})\nexport class InlineBannerSettings {\n  /** Authored informational copy rendered without transformation. */\n  @Prop() description!: string;\n\n  render() {\n    return (\n      <Host>\n        {/* eslint-disable-next-line compomo/prefer-direct-ds-text -- This structural layer owns the banner's inner padding separately from the ds-text balance padding. */}\n        <div class=\"inline-banner-settings__content\">\n          <ds-text\n            class=\"inline-banner-settings__description\"\n            as=\"p\"\n            variant=\"text-body-small\"\n            color=\"secondary\"\n          >\n            {this.description}\n          </ds-text>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/input-date.json

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

package/dist/mcp-data/registry/input-time.json

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

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

@@ -1037,7 +1037,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: suggestions, tokens.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/tokens ^6.6.1",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

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

package/dist/mcp-data/registry/map-cluster-marker.json

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

package/dist/mcp-data/registry/map-entity-marker.json

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

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

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

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

@@ -563,7 +563,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: anchor, boundary, items, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/tokens ^6.6.1",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/message-actions.json

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

package/dist/mcp-data/registry/message-bubble.json

@@ -33,8 +33,8 @@
         "Surface styling does not add semantics; failed delivery belongs in Message metadata below the unchanged bubble rather than in an error bubble treatment."
       ],
       "states": [
-        "The user variant represents user-sent copy in agent and person-to-person channels and uses secondary foreground.",
-        "The received variant represents ordinary incoming person-to-person copy.",
+        "The user variant represents user-sent copy in agent and person-to-person channels, uses primary foreground, and uses the Chrome primary background so body-medium copy meets contrast on that surface.",
+        "The received variant represents ordinary incoming person-to-person copy, uses secondary foreground, and uses the Chrome secondary background.",
         "Typing and rich agent output are not MessageBubble variants."
       ],
       "responsiveBehavior": [
@@ -127,7 +127,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/tokens ^6.6.1",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
@@ -142,7 +142,7 @@
   "files": [
     {
       "path": "src/wc/components/MessageBubble/MessageBubble.css",
-      "content": ":host {\n  display: inline-flex;\n  max-width: 80%;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n.message-bubble {\n  min-width: 0;\n  padding-block: var(--dimension-space-100);\n  padding-inline: calc(var(--dimension-space-100) + var(--dimension-space-025));\n  border-radius: var(--dimension-radius-050);\n  background: transparent;\n  color: var(--color-foreground-primary);\n  font-family: var(--typography-font-family-ui);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\n\n:host(.message-bubble--user) .message-bubble {\n  background: var(--color-translucent-translucent);\n  color: var(--color-foreground-secondary);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.message-bubble--received) .message-bubble {\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n",
+      "content": ":host {\n  display: inline-flex;\n  max-width: 80%;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n.message-bubble {\n  min-width: 0;\n  padding-block: var(--dimension-space-100);\n  padding-inline: calc(var(--dimension-space-100) + var(--dimension-space-025));\n  border-radius: var(--dimension-radius-100);\n  background: var(--color-chrome-background-secondary);\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family-ui);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\n\n:host(.message-bubble--user) .message-bubble {\n  background: var(--color-chrome-background-primary);\n  color: var(--color-foreground-primary);\n}\n\n@media (max-width: 767px) {\n  .message-bubble {\n    background: var(--color-background-secondary);\n  }\n\n  :host(.message-bubble--user) .message-bubble {\n    background: var(--color-background-faint-neutral);\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/message-composer.json

@@ -37,10 +37,10 @@
       "states": [
         "The owner controls draft value and transport state; the composer emits intent without performing transport.",
         "Error status never clears or disables the draft; the application supplies recovery actions through error-actions and owns retry semantics. The negative support surface appears above and attached to the composer box, within the component's measured ownership.",
-        "Use the tools slot for leading actions such as add and the actions slot for trailing actions such as dictation; the built-in submit or stop action remains last with an 8px gap from the preceding action. These icon buttons use the standard non-rounded control radius, and the application supplies tooltips for slotted icon actions.",
-        "The composer surface uses the 10px --dimension-radius-125 token.",
+        "Use the tools slot for leading actions such as add and the actions slot for trailing actions such as dictation; the built-in submit or stop action remains last with an 8px gap from the preceding action. The built-in and application-provided composer buttons use the standard rounded control treatment, and the application supplies tooltips for slotted icon actions.",
+        "The composer surface uses the 4px --dimension-radius-050 token.",
         "Mouse or keyboard focus on the textarea gives the complete composer surface the same bold-brand inset stroke width and color as an active Input; the native textarea never draws a separate outline.",
-        "The empty or otherwise inactive submit action is a disabled bordered ButtonUnfilled. Ready submit actions use submitIntent, while the streaming stop action remains a bold-brand ButtonFilled.",
+        "The empty or otherwise inactive submit action is a disabled bordered, rounded ButtonUnfilled. Ready submit actions use submitIntent and the rounded control treatment, while the streaming stop action remains a rounded bold-brand ButtonFilled.",
         "The attached error unit keeps a real boundary in forced colors and lets message text and application-owned recovery actions wrap at narrow widths."
       ],
       "responsiveBehavior": [
@@ -285,7 +285,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/tokens ^6.6.1",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
@@ -307,12 +307,12 @@
   "files": [
     {
       "path": "src/wc/components/MessageComposer/MessageComposer.css",
-      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.message-composer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  margin: 0;\n}\n\n.message-composer__attachments:empty,\n.message-composer__tools:empty,\n.message-composer__error-actions:empty {\n  display: none;\n}\n\n.message-composer__error-support,\n.message-composer__error-message,\n.message-composer__error-actions {\n  display: flex;\n  align-items: center;\n}\n\n.message-composer__error-support {\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-075) var(--dimension-space-100);\n  min-width: 0;\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  background: var(--color-background-faint-negative);\n}\n\n.message-composer__error-message {\n  flex: 1 1 var(--dimension-panel-width-xs);\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  color: var(--color-foreground-bold-negative);\n}\n\n.message-composer__error-actions {\n  flex: 0 1 auto;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-050);\n}\n\n.message-composer__stack {\n  min-width: 0;\n}\n\n.message-composer--error .message-composer__stack {\n  overflow: hidden;\n  border: var(--dimension-stroke-width-012) solid var(--color-border-bold-negative);\n  border-radius: var(--dimension-radius-125);\n  background: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-md);\n}\n\n.message-composer__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-100);\n  border-radius: var(--dimension-radius-125);\n  background: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-md);\n  overflow: hidden;\n}\n\n.message-composer:not(.message-composer--error) .message-composer__field:focus-within {\n  box-shadow:\n    var(--effect-elevation-elevated-md),\n    inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand);\n}\n\n.message-composer--error .message-composer__field {\n  border-radius: 0;\n  box-shadow: none;\n}\n\ntextarea {\n  field-sizing: content;\n  width: 100%;\n  min-height: calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));\n  max-height: calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));\n  padding: var(--dimension-space-075);\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background: transparent;\n  color: var(--color-foreground-primary);\n  font-family: var(--typography-font-family-ui);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  -webkit-user-select: text;\n  user-select: text;\n}\n\ntextarea::placeholder {\n  color: var(--color-foreground-secondary);\n}\n\ntextarea:focus::placeholder {\n  color: var(--color-foreground-quaternary);\n}\n\ntextarea:focus,\ntextarea:focus-visible {\n  outline: none;\n}\n\n.message-composer__tools {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-height: var(--dimension-size-400);\n}\n\n.message-composer__controls {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  min-width: 0;\n}\n\n.message-composer__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n}\n\n@media (forced-colors: active) {\n  .message-composer__field {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);\n    box-shadow: none;\n  }\n\n  .message-composer--error .message-composer__field {\n    border: 0;\n  }\n\n  .message-composer--error .message-composer__stack {\n    border: var(--dimension-stroke-width-025) dashed var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .message-composer__error-support {\n    border-block-end: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    background: var(--ds-forced-color-surface);\n  }\n}\n",
+      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.message-composer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  margin: 0;\n}\n\n.message-composer__attachments:empty,\n.message-composer__tools:empty,\n.message-composer__error-actions:empty {\n  display: none;\n}\n\n.message-composer__error-support,\n.message-composer__error-message,\n.message-composer__error-actions {\n  display: flex;\n  align-items: center;\n}\n\n.message-composer__error-support {\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-075) var(--dimension-space-100);\n  min-width: 0;\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  background: var(--color-background-faint-negative);\n}\n\n.message-composer__error-message {\n  flex: 1 1 var(--dimension-panel-width-xs);\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  color: var(--color-foreground-bold-negative);\n}\n\n.message-composer__error-actions {\n  flex: 0 1 auto;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-050);\n}\n\n.message-composer__stack {\n  min-width: 0;\n}\n\n.message-composer--error .message-composer__stack {\n  overflow: hidden;\n  border: var(--dimension-stroke-width-012) solid var(--color-border-bold-negative);\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-md);\n}\n\n.message-composer__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-100);\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-md);\n  overflow: hidden;\n}\n\n.message-composer:not(.message-composer--error) .message-composer__field:focus-within {\n  box-shadow:\n    var(--effect-elevation-elevated-md),\n    inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand);\n}\n\n.message-composer--error .message-composer__field {\n  border-radius: 0;\n  box-shadow: none;\n}\n\ntextarea {\n  field-sizing: content;\n  width: 100%;\n  min-height: calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));\n  max-height: calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));\n  padding: var(--dimension-space-075);\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background: transparent;\n  color: var(--color-foreground-primary);\n  font-family: var(--typography-font-family-ui);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  -webkit-user-select: text;\n  user-select: text;\n}\n\ntextarea::placeholder {\n  color: var(--color-foreground-secondary);\n}\n\ntextarea:focus::placeholder {\n  color: var(--color-foreground-quaternary);\n}\n\ntextarea:focus,\ntextarea:focus-visible {\n  outline: none;\n}\n\n.message-composer__tools {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-height: var(--dimension-size-400);\n}\n\n.message-composer__controls {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  min-width: 0;\n}\n\n.message-composer__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n}\n\n@media (forced-colors: active) {\n  .message-composer__field {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);\n    box-shadow: none;\n  }\n\n  .message-composer--error .message-composer__field {\n    border: 0;\n  }\n\n  .message-composer--error .message-composer__stack {\n    border: var(--dimension-stroke-width-025) dashed var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .message-composer__error-support {\n    border-block-end: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    background: var(--ds-forced-color-surface);\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/MessageComposer/MessageComposer.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport type { ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';\nimport type { MessageComposerStatus } from '../conversation-types';\n\nlet composerId = 0;\n\n@Component({\n  tag: 'ds-message-composer',\n  styleUrl: 'MessageComposer.css',\n  scoped: true,\n})\nexport class MessageComposer {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() placeholder: string = 'Write a message';\n  @Prop() label: string = 'Message';\n  @Prop() status: MessageComposerStatus = 'ready';\n  /** Submission failure shown while status is error. */\n  @Prop() errorMessage?: string;\n  @Prop() isInactive: boolean = false;\n  @Prop() submitIntent: ButtonFilledIntent = 'brand';\n\n  @Event() dsInput!: EventEmitter<string>;\n  @Event() dsSubmit!: EventEmitter<{ text: string }>;\n  @Event() dsStop!: EventEmitter<void>;\n\n  private textarea?: HTMLTextAreaElement;\n  private readonly errorId = `ds-message-composer-error-${++composerId}`;\n\n  @Method()\n  async setFocus() {\n    this.textarea?.focus();\n  }\n\n  private get streaming(): boolean {\n    return this.status === 'submitted' || this.status === 'streaming';\n  }\n\n  private handleInput = (event: Event) => {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    this.dsInput.emit(this.value);\n  };\n\n  private submit() {\n    const text = this.value.trim();\n    if (!text || this.isInactive || this.streaming) return;\n    this.dsSubmit.emit({ text });\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Enter' || event.shiftKey || event.isComposing) return;\n    event.preventDefault();\n    this.submit();\n  };\n\n  private handleAction = () => {\n    if (this.streaming) this.dsStop.emit();\n    else this.submit();\n  };\n\n  render() {\n    const error = this.status === 'error';\n    const visibleErrorMessage = this.errorMessage || 'Message could not be sent.';\n    const actionInactive = !this.streaming && (this.isInactive || !this.value.trim());\n    return (\n      <Host>\n        <form\n          class={{ 'message-composer': true, 'message-composer--error': error }}\n          aria-busy={this.streaming ? 'true' : undefined}\n          onSubmit={(event: Event) => {\n            event.preventDefault();\n            this.submit();\n          }}\n        >\n          <div class=\"message-composer__attachments\">\n            <slot name=\"attachments\" />\n          </div>\n          <div class=\"message-composer__stack\">\n            {error ? (\n              <div class=\"message-composer__error-support\">\n                <div id={this.errorId} class=\"message-composer__error-message\" role=\"alert\">\n                  <ds-icon name=\"ExclamationTriangle\" size=\"xs\" color=\"inherit\" />\n                  <ds-text variant=\"text-body-small\" color=\"negative\">\n                    {visibleErrorMessage}\n                  </ds-text>\n                </div>\n                <div class=\"message-composer__error-actions\">\n                  <slot name=\"error-actions\" />\n                </div>\n              </div>\n            ) : null}\n            <div class=\"message-composer__field\">\n              <textarea\n                ref={element => {\n                  this.textarea = element;\n                }}\n                value={this.value}\n                placeholder={this.placeholder}\n                aria-label={this.label}\n                aria-invalid={error ? 'true' : undefined}\n                aria-describedby={error ? this.errorId : undefined}\n                disabled={this.isInactive}\n                onInput={this.handleInput}\n                onKeyDown={this.handleKeyDown}\n              />\n              <div class=\"message-composer__controls\">\n                <div class=\"message-composer__tools\">\n                  <slot name=\"tools\" />\n                </div>\n                <div class=\"message-composer__actions\">\n                  <slot name=\"actions\" />\n                  {actionInactive ? (\n                    <ds-tooltip label=\"Send message\" side=\"top\" size=\"sm\">\n                      <ds-button-unfilled\n                        class=\"message-composer__action\"\n                        variant=\"icon\"\n                        icon=\"ArrowUp\"\n                        size=\"md\"\n                        aria-label=\"Send message\"\n                        hasBorder\n                        isInactive\n                        onDsClick={this.handleAction}\n                      />\n                    </ds-tooltip>\n                  ) : (\n                    <ds-tooltip\n                      label={this.streaming ? 'Stop response' : 'Send message'}\n                      side=\"top\"\n                      size=\"sm\"\n                    >\n                      <ds-button-filled\n                        class=\"message-composer__action\"\n                        variant=\"icon\"\n                        icon={this.streaming ? 'SquareFilled' : 'ArrowUp'}\n                        intent={this.streaming ? 'brand' : this.submitIntent}\n                        contrast=\"bold\"\n                        size=\"md\"\n                        aria-label={this.streaming ? 'Stop response' : 'Send message'}\n                        onDsClick={this.handleAction}\n                      />\n                    </ds-tooltip>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport type { ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';\nimport type { MessageComposerStatus } from '../conversation-types';\n\nlet composerId = 0;\n\n@Component({\n  tag: 'ds-message-composer',\n  styleUrl: 'MessageComposer.css',\n  scoped: true,\n})\nexport class MessageComposer {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() placeholder: string = 'Write a message';\n  @Prop() label: string = 'Message';\n  @Prop() status: MessageComposerStatus = 'ready';\n  /** Submission failure shown while status is error. */\n  @Prop() errorMessage?: string;\n  @Prop() isInactive: boolean = false;\n  @Prop() submitIntent: ButtonFilledIntent = 'brand';\n\n  @Event() dsInput!: EventEmitter<string>;\n  @Event() dsSubmit!: EventEmitter<{ text: string }>;\n  @Event() dsStop!: EventEmitter<void>;\n\n  private textarea?: HTMLTextAreaElement;\n  private readonly errorId = `ds-message-composer-error-${++composerId}`;\n\n  @Method()\n  async setFocus() {\n    this.textarea?.focus();\n  }\n\n  private get streaming(): boolean {\n    return this.status === 'submitted' || this.status === 'streaming';\n  }\n\n  private handleInput = (event: Event) => {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    this.dsInput.emit(this.value);\n  };\n\n  private submit() {\n    const text = this.value.trim();\n    if (!text || this.isInactive || this.streaming) return;\n    this.dsSubmit.emit({ text });\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Enter' || event.shiftKey || event.isComposing) return;\n    event.preventDefault();\n    this.submit();\n  };\n\n  private handleAction = () => {\n    if (this.streaming) this.dsStop.emit();\n    else this.submit();\n  };\n\n  render() {\n    const error = this.status === 'error';\n    const visibleErrorMessage = this.errorMessage || 'Message could not be sent.';\n    const actionInactive = !this.streaming && (this.isInactive || !this.value.trim());\n    return (\n      <Host>\n        <form\n          class={{ 'message-composer': true, 'message-composer--error': error }}\n          aria-busy={this.streaming ? 'true' : undefined}\n          onSubmit={(event: Event) => {\n            event.preventDefault();\n            this.submit();\n          }}\n        >\n          <div class=\"message-composer__attachments\">\n            <slot name=\"attachments\" />\n          </div>\n          <div class=\"message-composer__stack\">\n            {error ? (\n              <div class=\"message-composer__error-support\">\n                <div id={this.errorId} class=\"message-composer__error-message\" role=\"alert\">\n                  <ds-icon name=\"ExclamationTriangle\" size=\"xs\" color=\"inherit\" />\n                  <ds-text variant=\"text-body-small\" color=\"negative\">\n                    {visibleErrorMessage}\n                  </ds-text>\n                </div>\n                <div class=\"message-composer__error-actions\">\n                  <slot name=\"error-actions\" />\n                </div>\n              </div>\n            ) : null}\n            <div class=\"message-composer__field\">\n              <textarea\n                ref={element => {\n                  this.textarea = element;\n                }}\n                value={this.value}\n                placeholder={this.placeholder}\n                aria-label={this.label}\n                aria-invalid={error ? 'true' : undefined}\n                aria-describedby={error ? this.errorId : undefined}\n                disabled={this.isInactive}\n                onInput={this.handleInput}\n                onKeyDown={this.handleKeyDown}\n              />\n              <div class=\"message-composer__controls\">\n                <div class=\"message-composer__tools\">\n                  <slot name=\"tools\" />\n                </div>\n                <div class=\"message-composer__actions\">\n                  <slot name=\"actions\" />\n                  {actionInactive ? (\n                    <ds-tooltip label=\"Send message\" side=\"top\" size=\"sm\">\n                      <ds-button-unfilled\n                        class=\"message-composer__action\"\n                        variant=\"icon\"\n                        icon=\"ArrowUp\"\n                        size=\"md\"\n                        rounded\n                        aria-label=\"Send message\"\n                        hasBorder\n                        isInactive\n                        onDsClick={this.handleAction}\n                      />\n                    </ds-tooltip>\n                  ) : (\n                    <ds-tooltip\n                      label={this.streaming ? 'Stop response' : 'Send message'}\n                      side=\"top\"\n                      size=\"sm\"\n                    >\n                      <ds-button-filled\n                        class=\"message-composer__action\"\n                        variant=\"icon\"\n                        icon={this.streaming ? 'SquareFilled' : 'ArrowUp'}\n                        intent={this.streaming ? 'brand' : this.submitIntent}\n                        contrast=\"bold\"\n                        size=\"md\"\n                        rounded\n                        aria-label={this.streaming ? 'Stop response' : 'Send message'}\n                        onDsClick={this.handleAction}\n                      />\n                    </ds-tooltip>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/message-scroller.json

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

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

@@ -259,7 +259,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/tokens ^6.6.1",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
@@ -276,7 +276,7 @@
   "files": [
     {
       "path": "src/wc/components/Message/Message.css",
-      "content": ":host {\n  display: block;\n  box-sizing: border-box;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--dimension-size-800);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(.message-host--group-middle),\n:host(.message-host--group-last) {\n  margin-block-start: calc(var(--dimension-space-050) - var(--dimension-space-300));\n}\n\n.message {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.message--outgoing {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.message__header:empty,\n.message__footer:empty,\n.message__metadata-actions:empty,\n.message__actions:empty {\n  display: none;\n}\n\n.message__actions:not(:empty) {\n  margin-inline-start: var(--dimension-space-075);\n}\n\n.message__body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n}\n\n.message--incoming .message__body {\n  width: 100%;\n}\n\n.message--outgoing .message__body {\n  align-items: flex-end;\n}\n\n.message--outgoing .message__header {\n  display: none;\n}\n\n.message--system .message__body {\n  align-items: center;\n}\n\n.message__header,\n.message__footer,\n.message__metadata-actions,\n.message__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .message--metadata-hover .message__footer {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--effect-motion-short-2);\n  }\n\n  .message--metadata-hover:hover .message__footer,\n  .message--metadata-hover:focus-within .message__footer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .message--metadata-hover .message__footer {\n    transition: none;\n  }\n}\n\n.message__content {\n  width: 100%;\n  min-width: 0;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n.message--outgoing .message__content {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.message__footer time {\n  display: inline-flex;\n}\n\n.message--group-middle .message__header,\n.message--group-last .message__header {\n  display: none;\n}\n\n.message--group-first .message__footer,\n.message--group-middle .message__footer {\n  display: none;\n}\n",
+      "content": ":host {\n  display: block;\n  box-sizing: border-box;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--dimension-size-800);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(.message-host--group-middle),\n:host(.message-host--group-last) {\n  margin-block-start: calc(var(--dimension-space-050) - var(--dimension-space-300));\n}\n\n.message {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.message--outgoing {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.message__header:empty,\n.message__footer:empty,\n.message__metadata-actions:empty,\n.message__actions:empty {\n  display: none;\n}\n\n.message__actions:not(:empty) {\n  margin-inline-start: var(--dimension-space-075);\n}\n\n.message__body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n}\n\n.message--incoming .message__body {\n  width: 100%;\n}\n\n.message__body:has(.message__content > ds-message-bubble) .message__header {\n  padding-inline-start: calc(var(--dimension-space-100) + var(--dimension-space-025));\n}\n\n.message--outgoing .message__body {\n  align-items: flex-end;\n}\n\n.message--outgoing .message__header {\n  display: none;\n}\n\n.message--system .message__body {\n  align-items: center;\n}\n\n.message__header,\n.message__footer,\n.message__metadata-actions,\n.message__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .message--metadata-hover .message__footer {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--effect-motion-short-2);\n  }\n\n  .message--metadata-hover:hover .message__footer,\n  .message--metadata-hover:focus-within .message__footer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .message--metadata-hover .message__footer {\n    transition: none;\n  }\n}\n\n.message__content {\n  width: 100%;\n  min-width: 0;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n.message--outgoing .message__content {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.message__footer time {\n  display: inline-flex;\n}\n\n.message--group-middle .message__header,\n.message--group-last .message__header {\n  display: none;\n}\n\n.message--group-first .message__footer,\n.message--group-middle .message__footer {\n  display: none;\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -429,7 +429,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: currentArea.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/tokens ^6.6.1",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/mobile-header.json

@@ -368,7 +368,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: sections, subsections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/tokens ^6.6.1",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/mobile-section-switcher.json

@@ -228,7 +228,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/tokens ^6.6.1",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -390,7 +390,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: dashboardGroups, settingsGroups.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/tokens ^6.6.1",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

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

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

@@ -410,7 +410,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: pageSizeOptions.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/tokens ^6.6.1",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."