@ds-mo/ui 15.2.0 → 15.4.0

package/dist/mcp-data/registry/code-block.json

@@ -162,8 +162,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/conversation-list-item.json

@@ -281,8 +281,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/conversation-list-section.json

@@ -128,8 +128,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/conversation-list.json

@@ -90,8 +90,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/data-customize.json

@@ -369,8 +369,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fieldOrder, fields, hiddenFieldIds, options.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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."
       }
@@ -392,7 +392,7 @@
     },
     {
       "path": "src/wc/components/DataCustomize/DataCustomize.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { DataField } from '../../utils/data-field';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n  listCustomizerMenuItems,\n  resolveListOrder,\n  toggleListHidden,\n  type ListCustomizerOptions,\n} from '../../utils/list-customizer';\n\nexport interface DataCustomizeChangeDetail {\n  /** Fields the viewer has hidden, in the order they were hidden. */\n  hiddenFieldIds: string[];\n  /** Field ids in display order. Unchanged unless the catalog reorders. */\n  fieldOrder: string[];\n}\n\nlet dataCustomizeSeq = 0;\n\n/**\n * Show, hide and optionally reorder the data points a view renders.\n *\n * The table owns its own column customizer inside the caption, because a table\n * locks its last visible column and reorders columns. This control is the same\n * catalog for every other surface — a card list, a map overlay — where the\n * fields are independent and usually only show and hide.\n */\n@Component({\n  tag: 'ds-data-customize',\n  styleUrl: 'DataCustomize.css',\n  scoped: true,\n})\nexport class DataCustomize {\n  @Element() private el!: HTMLElement;\n\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  /** Catalog of data points the view can render. */\n  @Prop() fields: DataField[] = [];\n  /** Controlled hidden field ids. */\n  @Prop() hiddenFieldIds: string[] = [];\n  /** Controlled display order. Ids missing from it keep catalog order. */\n  @Prop() fieldOrder: string[] = [];\n  /**\n   * Drag-reorder the catalog rows. Off by default: most surfaces only show and\n   * hide, and a card layout has no column order to express.\n   */\n  @Prop() reorderable: boolean = false;\n  /**\n   * Fields that must stay visible. Zero by default, so a view whose identity\n   * lives outside this catalog can hide every entry in it.\n   */\n  @Prop() minVisible: number = 0;\n  /** Section header above the catalog rows. Omitted when there is no second section. */\n  @Prop() catalogHeader?: string;\n  /** Extra switch rows rendered in their own Options section. */\n  @Prop() options: MenuItemData[] = [];\n  /** Header for the options section. */\n  @Prop() optionsHeader: string = 'Options';\n  /** Accessible name for the trigger and menu. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Visible trigger label. Collapses to the icon when space is tight. */\n  @Prop() label: string = 'Customize';\n\n  @Event({ bubbles: false }) dsFieldsConfigChange!: EventEmitter<DataCustomizeChangeDetail>;\n  @Event({ bubbles: false }) dsOptionChange!: EventEmitter<string>;\n\n  @State() private menuOpen = false;\n  @State() private menuSurfaceOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly componentId = `ds-data-customize-${++dataCustomizeSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly menuId = `${this.componentId}-menu`;\n\n  @Method()\n  async setFocus() {\n    const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n      `#${CSS.escape(this.triggerId)}`\n    );\n    await trigger?.setFocus?.();\n  }\n\n  private get customizerOptions(): ListCustomizerOptions {\n    return { minVisible: this.minVisible, reorderable: this.reorderable };\n  }\n\n  private get catalog(): { id: string; label: string }[] {\n    return this.fields.map(field => ({\n      id: field.id,\n      label: field.label.trim() || field.accessibleLabel?.trim() || field.id,\n    }));\n  }\n\n  private get sections(): MenuSection[] {\n    const rows = listCustomizerMenuItems(\n      this.catalog,\n      this.hiddenFieldIds,\n      this.fieldOrder,\n      this.customizerOptions\n    );\n\n    return [\n      ...(rows.length\n        ? [\n            {\n              header: this.catalogHeader ?? (this.options.length ? 'Data' : undefined),\n              items: rows,\n            },\n          ]\n        : []),\n      ...(this.options.length ? [{ header: this.optionsHeader, items: this.options }] : []),\n    ];\n  }\n\n  render() {\n    const name = this.ariaLabel?.trim() || this.label?.trim() || 'Customize';\n    const empty = this.fields.length === 0 && this.options.length === 0;\n\n    return (\n      <Host hidden={empty ? true : undefined}>\n        {empty ? null : (\n          <ds-button-unfilled\n            hasBorder={this.hasBorder}\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"ViewMenu\"\n            label={this.label}\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label={name}\n            haspopup=\"menu\"\n            collapseLabel={true}\n            expanded={this.menuOpen}\n            surfaceOpen={this.menuSurfaceOpen}\n            controls={this.menuId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              this.toggle(event.detail.detail === 0);\n            }}\n          />\n        )}\n        {empty ? null : (\n          <ds-menu\n            id={this.menuId}\n            open={this.menuOpen}\n            anchorId={this.triggerId}\n            align=\"start\"\n            side=\"bottom\"\n            menuLabel={name}\n            selectionMode=\"none\"\n            initialFocusVisible={this.initialFocusVisible}\n            sections={this.sections}\n            onDsClose={() => this.close()}\n            onDsAfterClose={() => {\n              if (!this.menuOpen) this.menuSurfaceOpen = false;\n            }}\n            onDsSelect={event => this.handleSelect(event.detail)}\n            onDsReorder={event => this.handleReorder(event.detail.items)}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private toggle(fromKeyboard = false): void {\n    if (this.menuOpen) this.close();\n    else this.open(fromKeyboard);\n  }\n\n  private open(fromKeyboard = false): void {\n    if (this.menuOpen) return;\n    this.initialFocusVisible = fromKeyboard;\n    this.menuOpen = true;\n    this.menuSurfaceOpen = true;\n  }\n\n  private close(): void {\n    this.menuOpen = false;\n  }\n\n  private handleSelect(item: MenuItemData): void {\n    const value = item.value;\n    if (!value || item.isInactive) return;\n\n    if (this.options.some(option => option.value === value)) {\n      this.dsOptionChange.emit(value);\n      return;\n    }\n\n    const ids = this.catalog.map(entry => entry.id);\n    this.dsFieldsConfigChange.emit({\n      hiddenFieldIds: toggleListHidden(ids, this.hiddenFieldIds, value, this.customizerOptions),\n      fieldOrder: resolveListOrder(ids, this.fieldOrder),\n    });\n  }\n\n  private handleReorder(items: MenuItemData[]): void {\n    if (!this.reorderable) return;\n\n    // Menu reports the new order of the reorderable run. resolveListOrder\n    // rebuilds the full order from it, appending anything the run omitted.\n    const next = items\n      .filter(item => item.reorderable && item.value)\n      .map(item => item.value as string);\n    if (next.length === 0) return;\n\n    this.dsFieldsConfigChange.emit({\n      hiddenFieldIds: this.hiddenFieldIds,\n      fieldOrder: resolveListOrder(\n        this.catalog.map(entry => entry.id),\n        next\n      ),\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} from '@stencil/core';\nimport type { DataField } from '../../utils/data-field';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n  listCustomizerMenuItems,\n  resolveListOrder,\n  toggleListHidden,\n  type ListCustomizerOptions,\n} from '../../utils/list-customizer';\n\nexport interface DataCustomizeChangeDetail {\n  /** Fields the viewer has hidden, in the order they were hidden. */\n  hiddenFieldIds: string[];\n  /** Field ids in display order. Unchanged unless the catalog reorders. */\n  fieldOrder: string[];\n}\n\nlet dataCustomizeSeq = 0;\n\n/**\n * Show, hide and optionally reorder the data points a view renders.\n *\n * The table owns its own column customizer inside the caption, because a table\n * locks its last visible column and reorders columns. This control is the same\n * catalog for every other surface — a card list, a map overlay — where the\n * fields are independent and usually only show and hide.\n */\n@Component({\n  tag: 'ds-data-customize',\n  styleUrl: 'DataCustomize.css',\n  scoped: true,\n})\nexport class DataCustomize {\n  @Element() private el!: HTMLElement;\n\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  /** Catalog of data points the view can render. */\n  @Prop() fields: DataField[] = [];\n  /** Controlled hidden field ids. */\n  @Prop() hiddenFieldIds: string[] = [];\n  /** Controlled display order. Ids missing from it keep catalog order. */\n  @Prop() fieldOrder: string[] = [];\n  /**\n   * Drag-reorder the catalog rows. Off by default: most surfaces only show and\n   * hide, and a card layout has no column order to express.\n   */\n  @Prop() reorderable: boolean = false;\n  /**\n   * Fields that must stay visible. Zero by default, so a view whose identity\n   * lives outside this catalog can hide every entry in it.\n   */\n  @Prop() minVisible: number = 0;\n  /** Section header above the catalog rows. Omitted when there is no second section. */\n  @Prop() catalogHeader?: string;\n  /** Extra switch rows rendered in their own Options section. */\n  @Prop() options: MenuItemData[] = [];\n  /** Header for the options section. */\n  @Prop() optionsHeader: string = 'Options';\n  /** Accessible name for the trigger and menu. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Visible trigger label. Collapses to the icon when space is tight. */\n  @Prop() label: string = 'Customize';\n\n  @Event({ bubbles: false }) dsFieldsConfigChange!: EventEmitter<DataCustomizeChangeDetail>;\n  @Event({ bubbles: false }) dsOptionChange!: EventEmitter<string>;\n\n  @State() private menuOpen = false;\n  @State() private menuSurfaceOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly componentId = `ds-data-customize-${++dataCustomizeSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly menuId = `${this.componentId}-menu`;\n\n  @Method()\n  async setFocus() {\n    const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n      `#${CSS.escape(this.triggerId)}`\n    );\n    await trigger?.setFocus?.();\n  }\n\n  private get customizerOptions(): ListCustomizerOptions {\n    return { minVisible: this.minVisible, reorderable: this.reorderable };\n  }\n\n  private get catalog(): { id: string; label: string }[] {\n    return this.fields.map(field => ({\n      id: field.id,\n      label: field.label.trim() || field.accessibleLabel?.trim() || field.id,\n    }));\n  }\n\n  private get sections(): MenuSection[] {\n    const rows = listCustomizerMenuItems(\n      this.catalog,\n      this.hiddenFieldIds,\n      this.fieldOrder,\n      this.customizerOptions\n    );\n\n    return [\n      ...(rows.length\n        ? [\n            {\n              header: this.catalogHeader ?? (this.options.length ? 'Data' : undefined),\n              items: rows,\n            },\n          ]\n        : []),\n      ...(this.options.length ? [{ header: this.optionsHeader, items: this.options }] : []),\n    ];\n  }\n\n  render() {\n    const name = this.ariaLabel?.trim() || this.label?.trim() || 'Customize';\n    const empty = this.fields.length === 0 && this.options.length === 0;\n\n    return (\n      <Host hidden={empty ? true : undefined}>\n        {empty ? null : (\n          <ds-button-unfilled\n            hasBorder={this.hasBorder}\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"Preferences\"\n            label={this.label}\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label={name}\n            haspopup=\"menu\"\n            collapseLabel={true}\n            expanded={this.menuOpen}\n            surfaceOpen={this.menuSurfaceOpen}\n            controls={this.menuId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              this.toggle(event.detail.detail === 0);\n            }}\n          />\n        )}\n        {empty ? null : (\n          <ds-menu\n            id={this.menuId}\n            open={this.menuOpen}\n            anchorId={this.triggerId}\n            align=\"start\"\n            side=\"bottom\"\n            menuLabel={name}\n            selectionMode=\"none\"\n            initialFocusVisible={this.initialFocusVisible}\n            sections={this.sections}\n            onDsClose={() => this.close()}\n            onDsAfterClose={() => {\n              if (!this.menuOpen) this.menuSurfaceOpen = false;\n            }}\n            onDsSelect={event => this.handleSelect(event.detail)}\n            onDsReorder={event => this.handleReorder(event.detail.items)}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private toggle(fromKeyboard = false): void {\n    if (this.menuOpen) this.close();\n    else this.open(fromKeyboard);\n  }\n\n  private open(fromKeyboard = false): void {\n    if (this.menuOpen) return;\n    this.initialFocusVisible = fromKeyboard;\n    this.menuOpen = true;\n    this.menuSurfaceOpen = true;\n  }\n\n  private close(): void {\n    this.menuOpen = false;\n  }\n\n  private handleSelect(item: MenuItemData): void {\n    const value = item.value;\n    if (!value || item.isInactive) return;\n\n    if (this.options.some(option => option.value === value)) {\n      this.dsOptionChange.emit(value);\n      return;\n    }\n\n    const ids = this.catalog.map(entry => entry.id);\n    this.dsFieldsConfigChange.emit({\n      hiddenFieldIds: toggleListHidden(ids, this.hiddenFieldIds, value, this.customizerOptions),\n      fieldOrder: resolveListOrder(ids, this.fieldOrder),\n    });\n  }\n\n  private handleReorder(items: MenuItemData[]): void {\n    if (!this.reorderable) return;\n\n    // Menu reports the new order of the reorderable run. resolveListOrder\n    // rebuilds the full order from it, appending anything the run omitted.\n    const next = items\n      .filter(item => item.reorderable && item.value)\n      .map(item => item.value as string);\n    if (next.length === 0) return;\n\n    this.dsFieldsConfigChange.emit({\n      hiddenFieldIds: this.hiddenFieldIds,\n      fieldOrder: resolveListOrder(\n        this.catalog.map(entry => entry.id),\n        next\n      ),\n    });\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -487,8 +487,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: filters, matchModes, values.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/data-group.json

@@ -351,8 +351,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: grouping, options.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/data-preferences.json

@@ -557,8 +557,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: customizeOptions, customizeSections, fieldOrder, fields, filters, grouping, groupingOptions, hiddenFieldIds, matchModes, sort, sortColumns, values.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/data-saved-views.json

@@ -418,8 +418,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: views.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/data-search.json

@@ -348,8 +348,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fields, selectedFieldIds.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/data-sort.json

@@ -244,8 +244,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fields, sort.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/data-toolbar.json

@@ -165,8 +165,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/divider.json

@@ -208,8 +208,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/empty-state.json

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "empty-state",
   "title": "EmptyState",
-  "description": "Centered empty-content message composed as icon plus title plus body, title plus body, or compact body-only content.",
+  "description": "Centered empty-content message with optional consumer-owned recovery actions.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,16 +13,16 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Centered empty-content message composed as icon plus title plus body, title plus body, or compact body-only content.",
+      "summary": "Centered empty-content message with optional consumer-owned recovery actions.",
       "useWhen": [
         "A bounded content area is in a first-use, no-content, filtered no-results, or no-access state and needs a calm explanatory message tailored to that cause.",
         "A prominent empty region benefits from a decorative icon, visual title, and supporting body copy.",
-        "A compact owner such as a Select popup needs only centered body copy."
+        "A compact owner such as a Select popup needs only centered body copy.",
+        "An empty region needs a concise recovery action that helps the user reveal or create content."
       ],
       "avoidWhen": [
         "Content is still loading; use Skeleton for predictable structure or Loader for an indeterminate operation.",
         "The state is an error, warning, or confirmation that needs semantic intent and announcement from the owning workflow.",
-        "The state needs a recovery action, link, or other interactive content; the current EmptyState pattern is intentionally message-only.",
         "A decorative illustration, arbitrary rich content, or custom layout is required."
       ],
       "alternatives": [
@@ -46,20 +46,23 @@
         "component:ds-table",
         "component:ds-select",
         "component:ds-text",
-        "component:ds-icon"
+        "component:ds-icon",
+        "component:ds-button-unfilled"
       ],
       "accessibility": [
         "The optional icon is decorative; the title and body provide all meaning in text.",
         "EmptyState does not create a live region or alert automatically. The owner decides whether a dynamic transition requires announcement.",
         "The visual title does not impose a document heading level because the correct hierarchy belongs to the consuming page or region.",
-        "Keep localized body copy concise and sufficient when using the body-only variant."
+        "Keep localized body copy concise and sufficient when using the body-only variant.",
+        "Give recovery controls explicit accessible names and keep their behavior with the owning workflow."
       ],
       "states": [
         "Supported compositions are icon plus title plus body, title plus body, and body only; body copy is present in every supported composition.",
         "The decorative icon renders at xl in the primary foreground with an 8px gap before the text group and only when a title is also provided.",
         "The visual title uses title-small primary text; body uses body-medium secondary text with a 4px title-to-body gap.",
-        "All content is centered. The owner supplies container size and surrounding padding; repeated panel and master-detail owners should share one empty-region geometry instead of wrapping each EmptyState differently. Do not compose actions into or immediately alongside the current EmptyState pattern.",
-        "First-use, no-content, no-results, and no-access states reuse this primitive with cause-specific localized messages rather than visual variants."
+        "All content is centered. The owner supplies container size and surrounding padding; repeated panel and master-detail owners should share one empty-region geometry instead of wrapping each EmptyState differently.",
+        "First-use, no-content, no-results, and no-access states reuse this primitive with cause-specific localized messages rather than visual variants.",
+        "Recovery actions are optional. The consumer owns the action labels, control choice, and behavior; the component centers them below the message and wraps multiple actions when needed."
       ],
       "responsiveBehavior": [
         "The owner controls available width and height; text wraps naturally while remaining centered.",
@@ -122,7 +125,12 @@
       },
       "events": [],
       "methods": [],
-      "slots": []
+      "slots": [
+        {
+          "name": "actions",
+          "description": "Optional recovery buttons or links. The consumer owns their labels and behavior."
+        }
+      ]
     },
     "props": {
       "body": {
@@ -153,7 +161,12 @@
     },
     "events": [],
     "methods": [],
-    "slots": [],
+    "slots": [
+      {
+        "name": "actions",
+        "description": "Optional recovery buttons or links. The consumer owns their labels and behavior."
+      }
+    ],
     "exports": {
       "customElement": "ds-empty-state",
       "react": "DsEmptyState",
@@ -181,8 +194,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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."
       }
@@ -200,12 +213,12 @@
   "files": [
     {
       "path": "src/wc/components/EmptyState/EmptyState.css",
-      "content": ":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n:host,\n.empty-state,\n.empty-state__text {\n  box-sizing: border-box;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-100);\n  height: 100%;\n  width: 100%;\n  text-align: center;\n}\n\n.empty-state__icon {\n  flex: 0 0 auto;\n}\n\n.empty-state__text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n",
+      "content": ":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n:host,\n.empty-state,\n.empty-state__text {\n  box-sizing: border-box;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  text-align: center;\n}\n\n.empty-state__icon {\n  margin-block-end: var(--dimension-space-100);\n  flex: 0 0 auto;\n}\n\n.empty-state__text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.empty-state__actions {\n  margin-block-start: var(--dimension-space-200);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-100);\n}\n\n.empty-state__actions:not(:has([slot='actions'])) {\n  display: none;\n}\n\n.empty-state__title,\n.empty-state__body {\n  text-wrap: balance;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/EmptyState/EmptyState.tsx",
-      "content": "import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ds-empty-state',\n  styleUrl: 'EmptyState.css',\n  scoped: true,\n})\nexport class EmptyState {\n  /** Optional decorative prefix glyph for the complete icon + title + body variant. */\n  @Prop() icon: string | undefined;\n  /** Optional visual title. Use with body; required when icon is provided. */\n  @Prop() heading: string | undefined;\n  /** Explanatory empty-state copy. Every supported variant includes body text. */\n  @Prop() body: string = '';\n\n  render() {\n    const showHeading = Boolean(this.heading?.trim());\n    const showIcon = showHeading && Boolean(this.icon);\n\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          {showIcon && (\n            <ds-icon class=\"empty-state__icon\" name={this.icon} size=\"xl\" color=\"primary\" />\n          )}\n          <div class=\"empty-state__text\">\n            {showHeading && (\n              <ds-text\n                class=\"empty-state__title\"\n                as=\"div\"\n                variant=\"text-title-small\"\n                color=\"primary\"\n                align=\"center\"\n              >\n                {this.heading}\n              </ds-text>\n            )}\n            {this.body && (\n              <ds-text\n                class=\"empty-state__body\"\n                as=\"p\"\n                variant=\"text-body-medium\"\n                color=\"secondary\"\n                align=\"center\"\n              >\n                {this.body}\n              </ds-text>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot actions - Optional recovery buttons or links. The consumer owns their labels and behavior.\n */\n@Component({\n  tag: 'ds-empty-state',\n  styleUrl: 'EmptyState.css',\n  scoped: true,\n})\nexport class EmptyState {\n  /** Optional decorative prefix glyph for the complete icon + title + body variant. */\n  @Prop() icon: string | undefined;\n  /** Optional visual title. Use with body; required when icon is provided. */\n  @Prop() heading: string | undefined;\n  /** Explanatory empty-state copy. Every supported variant includes body text. */\n  @Prop() body: string = '';\n\n  render() {\n    const showHeading = Boolean(this.heading?.trim());\n    const showIcon = showHeading && Boolean(this.icon);\n\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          {showIcon && (\n            <ds-icon class=\"empty-state__icon\" name={this.icon} size=\"xl\" color=\"primary\" />\n          )}\n          <div class=\"empty-state__text\">\n            {showHeading && (\n              <ds-text\n                class=\"empty-state__title\"\n                as=\"div\"\n                variant=\"text-title-small\"\n                color=\"primary\"\n                align=\"center\"\n              >\n                {this.heading}\n              </ds-text>\n            )}\n            {this.body && (\n              <ds-text\n                class=\"empty-state__body\"\n                as=\"p\"\n                variant=\"text-body-medium\"\n                color=\"secondary\"\n                align=\"center\"\n              >\n                {this.body}\n              </ds-text>\n            )}\n          </div>\n          <div class=\"empty-state__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -54,7 +54,8 @@
         "Field exposes data-focused, data-filled, data-dirty, data-touched, data-invalid, data-disabled, and data-required hooks while the slotted control remains the source of value and interaction behavior.",
         "A rendered error replaces the description; preserve essential guidance in the error message so users retain what they need to correct the field.",
         "Field owns validation presentation but not validation timing; the form decides when to set error and errorMessage.",
-        "The label uses primary body-small emphasis, description uses secondary body-small text, and error uses negative body-small text."
+        "The label uses primary body-small emphasis, description uses secondary body-small text, and error uses negative body-small text.",
+        "Input and Textarea contribute constraint messages and character counts to the supporting row. Helper text yields to an error, with the count at the opposite edge; a count alone begins at the text origin."
       ],
       "responsiveBehavior": [
         "Field fills the width supplied by its parent and makes the slotted control fill that field width.",
@@ -217,8 +218,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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."
       }
@@ -234,12 +235,12 @@
   "files": [
     {
       "path": "src/wc/components/Field/Field.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/field-stack.css';\n\n:host {\n  display: block;\n}\n\n.field__control {\n  display: flex;\n  min-width: 0;\n}\n\n.field__control > * {\n  width: 100%;\n}\n",
+      "content": "@import '../../utils/text-field-support.css';\n@import '../../utils/control-density.css';\n@import '../../utils/field-stack.css';\n\n:host {\n  display: block;\n}\n\n.field__control {\n  display: flex;\n  min-width: 0;\n}\n\n.field__control > * {\n  width: 100%;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Field/Field.tsx",
-      "content": "import { Component, Element, Prop, State, Watch, h, Host } from '@stencil/core';\n\ninterface FieldControl extends HTMLElement {\n  value?: string | string[];\n  inputId?: string;\n  error?: boolean;\n  disabled?: boolean;\n  isInactive?: boolean;\n  required?: boolean;\n  hasBorder?: boolean;\n  size?: string;\n  setFocus?: () => Promise<void> | void;\n}\n\ninterface AuthoredAria {\n  labelledby: string[];\n  describedby: string[];\n}\n\nlet fieldCounter = 0;\n\nconst tokens = (value: string | null | undefined): string[] =>\n  value?.split(/\\s+/).filter(Boolean) ?? [];\n\nconst uniqueTokens = (...groups: string[][]): string[] => [...new Set(groups.flat())];\n\nconst CONTROL_SIZES = ['lg', 'md', 'sm', 'xs'] as const;\ntype FieldControlSize = (typeof CONTROL_SIZES)[number];\n\nconst readControlSize = (control: FieldControl): FieldControlSize =>\n  CONTROL_SIZES.includes(control.size as FieldControlSize)\n    ? (control.size as FieldControlSize)\n    : 'md';\n\n@Component({\n  tag: 'ds-field',\n  styleUrl: 'Field.css',\n  scoped: true,\n})\nexport class Field {\n  @Element() el!: HTMLElement;\n\n  /** Visible label for the slotted control. Omit when a nearby heading already names the field. */\n  @Prop() label?: string;\n  /** Explicit ID for the slotted control; generated when omitted. */\n  @Prop() fieldId: string | undefined;\n  /** Optional guidance associated with the slotted control while no visible error is shown. */\n  @Prop() description: string | undefined;\n  /** Invalid visual and accessible state forwarded to supported ds controls. */\n  @Prop() error: boolean = false;\n  /** Visible error associated with the slotted control while error is true. */\n  @Prop() errorMessage: string | undefined;\n\n  @State() private focused = false;\n  @State() private filled = false;\n  @State() private dirty = false;\n  @State() private touched = false;\n  @State() private controlDisabled = false;\n  @State() private controlRequired = false;\n  @State() private controlBorderless = false;\n  @State() private controlSize: 'lg' | 'md' | 'sm' | 'xs' = 'md';\n  /** Bumped to let Stencil relocate a control added after the initial render. */\n  @State() private slotRevision = 0;\n\n  private readonly generatedId = `ds-field-${++fieldCounter}`;\n  private controlContainer?: HTMLDivElement;\n  private control?: FieldControl;\n  private initialValue = '';\n  private authoredAria = new WeakMap<FieldControl, AuthoredAria>();\n  private childObserver?: MutationObserver;\n  private controlAttrObserver?: MutationObserver;\n  private didLoad = false;\n\n  connectedCallback() {\n    if (this.didLoad) this.observeLateControls();\n  }\n\n  disconnectedCallback() {\n    this.childObserver?.disconnect();\n    this.childObserver = undefined;\n    this.controlAttrObserver?.disconnect();\n    this.controlAttrObserver = undefined;\n  }\n\n  componentDidLoad() {\n    this.syncControl();\n    this.didLoad = true;\n    this.observeLateControls();\n    requestAnimationFrame(() => this.syncControl());\n  }\n\n  componentDidRender() {\n    this.syncControl();\n  }\n\n  @Watch('fieldId')\n  @Watch('label')\n  @Watch('description')\n  @Watch('error')\n  @Watch('errorMessage')\n  onFieldContractChange() {\n    this.syncControl();\n  }\n\n  private get hasLabel(): boolean {\n    return Boolean(this.label?.trim());\n  }\n\n  private get controlId(): string {\n    return this.fieldId || this.generatedId;\n  }\n\n  private get labelId(): string {\n    return `${this.controlId}-label`;\n  }\n\n  private get descriptionId(): string {\n    return `${this.controlId}-description`;\n  }\n\n  private get errorId(): string {\n    return `${this.controlId}-error`;\n  }\n\n  private get renderedDescription(): boolean {\n    return Boolean(this.description) && !this.renderedError;\n  }\n\n  private get renderedError(): boolean {\n    return this.error && Boolean(this.errorMessage);\n  }\n\n  private readValue(control: FieldControl): string {\n    const value = control.value;\n    return Array.isArray(value) ? value.join('\\u001f') : String(value ?? '');\n  }\n\n  private updateControlAttribute(control: FieldControl, name: string, value: string | undefined) {\n    if (value === undefined) {\n      if (control.hasAttribute(name)) control.removeAttribute(name);\n      return;\n    }\n    if (control.getAttribute(name) !== value) control.setAttribute(name, value);\n  }\n\n  private findControl(): FieldControl | undefined {\n    return this.controlContainer?.querySelector<FieldControl>(':scope > :not(slot)') ?? undefined;\n  }\n\n  private observeLateControls() {\n    if (this.childObserver || typeof MutationObserver === 'undefined') return;\n    this.childObserver = new MutationObserver(records => {\n      const addedControl = records.some(record =>\n        Array.from(record.addedNodes).some(node => node.nodeType === 1)\n      );\n      if (addedControl) this.slotRevision++;\n    });\n    this.childObserver.observe(this.el, { childList: true });\n  }\n\n  private syncControl = () => {\n    const control = this.findControl();\n    if (!control) return;\n\n    if (control !== this.control) {\n      this.control = control;\n      this.initialValue = this.readValue(control);\n      this.authoredAria.set(control, {\n        labelledby: tokens(control.getAttribute('aria-labelledby')),\n        describedby: tokens(control.getAttribute('aria-describedby')),\n      });\n      this.observeControlAttributes(control);\n    }\n\n    const isDsControl = control.tagName.startsWith('DS-');\n    if (isDsControl && 'inputId' in control) control.inputId = this.controlId;\n    else this.updateControlAttribute(control, 'id', this.controlId);\n\n    const authored = this.authoredAria.get(control) ?? { labelledby: [], describedby: [] };\n    const labelledby = uniqueTokens(authored.labelledby, this.hasLabel ? [this.labelId] : []).join(\n      ' '\n    );\n    const describedby = uniqueTokens(\n      authored.describedby,\n      this.renderedDescription ? [this.descriptionId] : [],\n      this.renderedError ? [this.errorId] : []\n    ).join(' ');\n\n    this.updateControlAttribute(control, 'aria-labelledby', labelledby || undefined);\n    this.updateControlAttribute(control, 'aria-describedby', describedby || undefined);\n    this.updateControlAttribute(control, 'aria-invalid', this.error ? 'true' : undefined);\n\n    if (isDsControl && 'error' in control && control.error !== this.error)\n      control.error = this.error;\n\n    const value = this.readValue(control);\n    this.filled = value.length > 0;\n    this.dirty = value !== this.initialValue;\n    this.controlDisabled = Boolean(\n      control.disabled || control.isInactive || control.hasAttribute('disabled')\n    );\n    this.controlRequired = Boolean(control.required || control.hasAttribute('required'));\n    this.controlBorderless = control.hasBorder === false;\n    this.controlSize = readControlSize(control);\n  };\n\n  private observeControlAttributes(control: FieldControl) {\n    this.controlAttrObserver?.disconnect();\n    this.controlAttrObserver = new MutationObserver(() => this.syncControl());\n    this.controlAttrObserver.observe(control, {\n      attributes: true,\n      attributeFilter: ['has-border', 'size', 'class'],\n    });\n  }\n\n  private handleLabelClick = (event: MouseEvent) => {\n    if (!this.control?.tagName.startsWith('DS-')) return;\n    event.preventDefault();\n    this.control.setFocus?.();\n  };\n\n  private handleFocusIn = () => {\n    this.focused = true;\n  };\n\n  private handleFocusOut = (event: FocusEvent) => {\n    if (event.relatedTarget instanceof Node && this.el.contains(event.relatedTarget)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleValueChange = () => {\n    this.syncControl();\n  };\n\n  render() {\n    return (\n      <Host\n        data-focused={this.focused ? '' : undefined}\n        data-filled={this.filled ? '' : undefined}\n        data-dirty={this.dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-disabled={this.controlDisabled ? '' : undefined}\n        data-required={this.controlRequired ? '' : undefined}\n        onFocusin={this.handleFocusIn}\n        onFocusout={this.handleFocusOut}\n        onInput={this.handleValueChange}\n        onChange={this.handleValueChange}\n        onDsChange={this.handleValueChange}\n      >\n        <div\n          class={{\n            field: true,\n            'ds-field-stack': true,\n            'ds-field-stack--supporting-inset': this.controlBorderless,\n            [`ds-control--${this.controlSize}`]: true,\n          }}\n        >\n          {this.hasLabel ? (\n            <ds-text\n              class=\"field__label\"\n              as=\"label\"\n              variant=\"text-body-small\"\n              color=\"primary\"\n              emphasis\n              for={this.controlId}\n              textId={this.labelId}\n              onClick={this.handleLabelClick}\n            >\n              {this.label}\n            </ds-text>\n          ) : null}\n          <div class=\"field__control\" ref={el => (this.controlContainer = el)}>\n            <slot onSlotchange={this.syncControl} />\n          </div>\n          {this.renderedDescription && (\n            <ds-text\n              class=\"field__description\"\n              as=\"div\"\n              variant=\"text-body-small\"\n              color=\"secondary\"\n              textId={this.descriptionId}\n            >\n              {this.description}\n            </ds-text>\n          )}\n          {this.renderedError && (\n            <ds-text\n              class=\"field__error\"\n              as=\"div\"\n              variant=\"text-body-small\"\n              color=\"negative\"\n              textId={this.errorId}\n              role=\"alert\"\n            >\n              {this.errorMessage}\n            </ds-text>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Prop, State, Watch, h, Host } from '@stencil/core';\n\ninterface FieldControl extends HTMLElement {\n  value?: string | string[];\n  tokens?: string[];\n  tokenized?: boolean;\n  inputId?: string;\n  error?: boolean;\n  disabled?: boolean;\n  isInactive?: boolean;\n  required?: boolean;\n  hasBorder?: boolean;\n  size?: string;\n  setFocus?: () => Promise<void> | void;\n}\n\ninterface AuthoredAria {\n  labelledby: string[];\n  describedby: string[];\n}\n\nlet fieldCounter = 0;\n\nconst tokens = (value: string | null | undefined): string[] =>\n  value?.split(/\\s+/).filter(Boolean) ?? [];\n\nconst uniqueTokens = (...groups: string[][]): string[] => [...new Set(groups.flat())];\n\nconst CONTROL_SIZES = ['lg', 'md', 'sm', 'xs'] as const;\ntype FieldControlSize = (typeof CONTROL_SIZES)[number];\n\nconst readControlSize = (control: FieldControl): FieldControlSize =>\n  CONTROL_SIZES.includes(control.size as FieldControlSize)\n    ? (control.size as FieldControlSize)\n    : 'md';\n\n@Component({\n  tag: 'ds-field',\n  styleUrl: 'Field.css',\n  scoped: true,\n})\nexport class Field {\n  @Element() el!: HTMLElement;\n\n  /** Visible label for the slotted control. Omit when a nearby heading already names the field. */\n  @Prop() label?: string;\n  /** Explicit ID for the slotted control; generated when omitted. */\n  @Prop() fieldId: string | undefined;\n  /** Optional guidance associated with the slotted control while no visible error is shown. */\n  @Prop() description: string | undefined;\n  /** Invalid visual and accessible state forwarded to supported ds controls. */\n  @Prop() error: boolean = false;\n  /** Visible error associated with the slotted control while error is true. */\n  @Prop() errorMessage: string | undefined;\n\n  @State() private constraintMessage = '';\n  @State() private characterCount: string | undefined;\n  @State() private characterLimit: string | undefined;\n  @State() private focused = false;\n  @State() private filled = false;\n  @State() private dirty = false;\n  @State() private touched = false;\n  @State() private controlDisabled = false;\n  @State() private controlRequired = false;\n  @State() private controlBorderless = false;\n  @State() private controlSize: 'lg' | 'md' | 'sm' | 'xs' = 'md';\n  /** Bumped to let Stencil relocate a control added after the initial render. */\n  @State() private slotRevision = 0;\n\n  private readonly generatedId = `ds-field-${++fieldCounter}`;\n  private controlContainer?: HTMLDivElement;\n  private control?: FieldControl;\n  private initialValue = '';\n  private authoredAria = new WeakMap<FieldControl, AuthoredAria>();\n  private childObserver?: MutationObserver;\n  private controlAttrObserver?: MutationObserver;\n  private didLoad = false;\n\n  connectedCallback() {\n    if (this.didLoad) this.observeLateControls();\n  }\n\n  disconnectedCallback() {\n    this.childObserver?.disconnect();\n    this.childObserver = undefined;\n    this.controlAttrObserver?.disconnect();\n    this.controlAttrObserver = undefined;\n  }\n\n  componentDidLoad() {\n    this.syncControl();\n    this.didLoad = true;\n    this.observeLateControls();\n    requestAnimationFrame(() => this.syncControl());\n  }\n\n  componentDidRender() {\n    this.syncControl();\n  }\n\n  @Watch('fieldId')\n  @Watch('label')\n  @Watch('description')\n  @Watch('error')\n  @Watch('errorMessage')\n  onFieldContractChange() {\n    this.syncControl();\n  }\n\n  private get hasLabel(): boolean {\n    return Boolean(this.label?.trim());\n  }\n\n  private get controlId(): string {\n    return this.fieldId || this.generatedId;\n  }\n\n  private get labelId(): string {\n    return `${this.controlId}-label`;\n  }\n\n  private get descriptionId(): string {\n    return `${this.controlId}-description`;\n  }\n\n  private get errorId(): string {\n    return `${this.controlId}-error`;\n  }\n\n  private get renderedDescription(): boolean {\n    return Boolean(this.description) && !this.renderedError;\n  }\n\n  private get renderedError(): boolean {\n    return Boolean(this.visibleError);\n  }\n\n  private get visibleError(): string {\n    return this.error && this.errorMessage ? this.errorMessage : this.constraintMessage;\n  }\n\n  private readValue(control: FieldControl): string {\n    if (control.tokenized)\n      return [...(control.tokens ?? []), String(control.value ?? '')]\n        .filter(Boolean)\n        .join('\\u001f');\n    const value = control.value;\n    return Array.isArray(value) ? value.join('\\u001f') : String(value ?? '');\n  }\n\n  private updateControlAttribute(control: FieldControl, name: string, value: string | undefined) {\n    if (value === undefined) {\n      if (control.hasAttribute(name)) control.removeAttribute(name);\n      return;\n    }\n    if (control.getAttribute(name) !== value) control.setAttribute(name, value);\n  }\n\n  private findControl(): FieldControl | undefined {\n    return this.controlContainer?.querySelector<FieldControl>(':scope > :not(slot)') ?? undefined;\n  }\n\n  private observeLateControls() {\n    if (this.childObserver || typeof MutationObserver === 'undefined') return;\n    this.childObserver = new MutationObserver(records => {\n      const addedControl = records.some(record =>\n        Array.from(record.addedNodes).some(node => node.nodeType === 1)\n      );\n      if (addedControl) this.slotRevision++;\n    });\n    this.childObserver.observe(this.el, { childList: true });\n  }\n\n  private syncControl = () => {\n    const control = this.findControl();\n    if (!control) return;\n\n    if (control !== this.control) {\n      this.control = control;\n      this.initialValue = this.readValue(control);\n      this.authoredAria.set(control, {\n        labelledby: tokens(control.getAttribute('aria-labelledby')),\n        describedby: tokens(control.getAttribute('aria-describedby')),\n      });\n      this.observeControlAttributes(control);\n    }\n\n    this.constraintMessage = control.getAttribute('data-constraint-message') ?? '';\n    this.characterCount = control.getAttribute('data-character-count') ?? undefined;\n    this.characterLimit = control.getAttribute('data-character-limit') ?? undefined;\n\n    const isDsControl = control.tagName.startsWith('DS-');\n    if (isDsControl && 'inputId' in control) control.inputId = this.controlId;\n    else this.updateControlAttribute(control, 'id', this.controlId);\n\n    const authored = this.authoredAria.get(control) ?? { labelledby: [], describedby: [] };\n    const labelledby = uniqueTokens(authored.labelledby, this.hasLabel ? [this.labelId] : []).join(\n      ' '\n    );\n    const describedby = uniqueTokens(\n      authored.describedby,\n      this.renderedDescription ? [this.descriptionId] : [],\n      this.renderedError ? [this.errorId] : [],\n      this.characterCount !== undefined ? [`${this.controlId}-count`] : []\n    ).join(' ');\n\n    this.updateControlAttribute(control, 'aria-labelledby', labelledby || undefined);\n    this.updateControlAttribute(control, 'aria-describedby', describedby || undefined);\n    this.updateControlAttribute(control, 'aria-invalid', this.error ? 'true' : undefined);\n\n    if (isDsControl && 'error' in control && control.error !== this.error)\n      control.error = this.error;\n\n    const value = this.readValue(control);\n    this.filled = value.length > 0;\n    this.dirty = value !== this.initialValue;\n    this.controlDisabled = Boolean(\n      control.disabled || control.isInactive || control.hasAttribute('disabled')\n    );\n    this.controlRequired = Boolean(control.required || control.hasAttribute('required'));\n    this.controlBorderless = control.hasBorder === false;\n    this.controlSize = readControlSize(control);\n  };\n\n  private observeControlAttributes(control: FieldControl) {\n    this.controlAttrObserver?.disconnect();\n    this.controlAttrObserver = new MutationObserver(() => this.syncControl());\n    this.controlAttrObserver.observe(control, {\n      attributes: true,\n      attributeFilter: [\n        'has-border',\n        'size',\n        'class',\n        'data-constraint-message',\n        'data-character-count',\n        'data-character-limit',\n      ],\n    });\n  }\n\n  private handleLabelClick = (event: MouseEvent) => {\n    if (!this.control?.tagName.startsWith('DS-')) return;\n    event.preventDefault();\n    this.control.setFocus?.();\n  };\n\n  private handleFocusIn = () => {\n    this.focused = true;\n  };\n\n  private handleFocusOut = (event: FocusEvent) => {\n    if (event.relatedTarget instanceof Node && this.el.contains(event.relatedTarget)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleValueChange = () => {\n    this.syncControl();\n  };\n\n  render() {\n    return (\n      <Host\n        data-focused={this.focused ? '' : undefined}\n        data-filled={this.filled ? '' : undefined}\n        data-dirty={this.dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-invalid={this.error || this.constraintMessage ? '' : undefined}\n        data-disabled={this.controlDisabled ? '' : undefined}\n        data-required={this.controlRequired ? '' : undefined}\n        onFocusin={this.handleFocusIn}\n        onFocusout={this.handleFocusOut}\n        onInput={this.handleValueChange}\n        onChange={this.handleValueChange}\n        onDsChange={this.handleValueChange}\n        onDsTokensChange={this.handleValueChange}\n      >\n        <div\n          class={{\n            field: true,\n            'ds-field-stack': true,\n            'ds-field-stack--supporting-inset': this.controlBorderless,\n            [`ds-control--${this.controlSize}`]: true,\n          }}\n        >\n          {this.hasLabel ? (\n            <ds-text\n              class=\"field__label\"\n              as=\"label\"\n              variant=\"text-body-small\"\n              color=\"primary\"\n              emphasis\n              for={this.controlId}\n              textId={this.labelId}\n              onClick={this.handleLabelClick}\n            >\n              {this.label}\n            </ds-text>\n          ) : null}\n          <div class=\"field__control\" ref={el => (this.controlContainer = el)}>\n            <slot onSlotchange={this.syncControl} />\n          </div>\n          {(this.renderedDescription ||\n            this.renderedError ||\n            this.characterCount !== undefined) && (\n            <div class=\"text-field-support\">\n              {this.renderedDescription && (\n                <ds-text\n                  class=\"field__description\"\n                  as=\"div\"\n                  variant=\"text-body-small\"\n                  color=\"secondary\"\n                  textId={this.descriptionId}\n                >\n                  {this.description}\n                </ds-text>\n              )}\n              {this.renderedError && (\n                <ds-text\n                  class=\"field__error\"\n                  as=\"div\"\n                  variant=\"text-body-small\"\n                  color=\"negative\"\n                  textId={this.errorId}\n                  role=\"alert\"\n                >\n                  {this.visibleError}\n                </ds-text>\n              )}\n              {this.characterCount !== undefined && (\n                <ds-text\n                  class=\"text-field-count\"\n                  as=\"span\"\n                  variant=\"text-body-small\"\n                  color={this.error || this.constraintMessage ? 'negative' : 'secondary'}\n                  textId={`${this.controlId}-count`}\n                >\n                  {this.characterCount}/{this.characterLimit}\n                </ds-text>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -899,8 +899,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: anchor, boundary, filters, matchModes, values.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/icon.json

@@ -220,8 +220,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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/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,8 +532,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@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."
       }