@ds-mo/ui 14.36.0 → 15.1.0

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

@@ -0,0 +1,279 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-sort",
+  "title": "DataSort",
+  "description": "Toolbar control for one application-owned sort, with separate field and direction choices that can also mirror table-header sorting.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/data-sort",
+    "source": "src/wc/components/DataSort/DataSort.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Toolbar control for one application-owned sort, with separate field and direction choices that can also mirror table-header sorting.",
+      "useWhen": [
+        "A data view needs an explicit Sort control alongside Filter and Group.",
+        "Sortable columns or compound header segments should be choosable without relying only on column-header clicks."
+      ],
+      "avoidWhen": [
+        "The data view has no sortable fields.",
+        "The application expects the control to sort rows internally or persist preferences.",
+        "The popup should submit a form value; use Select."
+      ],
+      "alternatives": [
+        {
+          "when": "The choice is one submitted form value.",
+          "component": "component:ds-select",
+          "reason": "Select owns form-value and listbox semantics, not table sort state."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-table",
+        "component:ds-data-toolbar",
+        "component:ds-data-filter",
+        "component:ds-select",
+        "component:ds-button-unfilled",
+        "component:ds-menu"
+      ],
+      "patterns": [
+        "pattern:menu-trigger"
+      ],
+      "accessibility": [
+        "The trigger is an icon-label menu button named Sort table unless a product aria-label is supplied. Compact caption widths keep that accessible name after the visible label is omitted.",
+        "The start-aligned menu has two sections, Data and Order. Each section presents one selected row through isSelected; the menu is not a single radio group because field and direction are independent.",
+        "Choosing a row applies immediately and keeps the menu open so the other section can be changed. Escape and outside activation close the menu and restore trigger focus."
+      ],
+      "states": [
+        "fields and sort are controlled. dsSortChange reports the next DataSortState and never mutates those inputs. The same sort object is what column headers emit through the table.",
+        "Selecting a different data field keeps the current direction, or starts ascending when no sort exists. Selecting a direction applies it to the current field, or to the first sortable field when no sort exists. Selecting the already-active field or direction is a no-op and does not toggle the way a header click does.",
+        "The trigger stays Sort in regular-weight resting secondary chrome. Field and direction selection live in the menu and on column headers, so the trigger never uses active primary emphasis. It keeps pressed interaction paint without physically scaling inside the stable table caption row.",
+        "Compound sortable headers contribute one Data row per segment. Action columns never appear.",
+        "The trigger automatically holds the shared surface-open wash through menu exit while the selected sort remains independently controlled.",
+        "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback.",
+        "Expanded toolbar triggers use an icon and regular-weight text without a trailing chevron.",
+        "fields accepts a DataField catalog for any data view: a card list or map overlay supplies id, label and sortable without describing itself as a table."
+      ],
+      "responsiveBehavior": [
+        "Place the control in the trailing region of ds-data-toolbar with Filter and Group.",
+        "The owning table caption or standalone data toolbar determines when the trigger becomes icon-only. A hover and keyboard-focus tooltip preserves the label, and the icon keeps the resting secondary foreground.",
+        "Long sortable-field catalogs inherit Menu's collision-aware height cap and internal choice scrolling instead of extending beyond the available viewport space."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign fields and sort as JavaScript properties. Replace sort from both dsSortChange on this control and dsSortChange on the table."
+        ],
+        "react": [
+          "Keep one sort state and pass it to both ds-table and ds-data-sort; update it from either event."
+        ],
+        "angular": [
+          "Import the generated DsDataSort adapter, bind fields and sort, and handle dsSortChange with the same owner that handles table header sorting."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook review states",
+          "path": "src/wc/components/DataSort/DataSort.stories.ts"
+        },
+        {
+          "label": "Toolbar composition owner",
+          "path": "src/wc/components/DataToolbar/DataToolbar.agent.json"
+        },
+        {
+          "label": "Surface ownership and trigger state",
+          "path": "src/docs/SurfaceOwnership.mdx"
+        }
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": [
+              "hasBorder"
+            ]
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "ariaLabel": {
+          "type": "string | null",
+          "resolvedType": "null | string",
+          "attribute": "aria-label",
+          "default": "null",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the trigger and menu."
+        },
+        "fields": {
+          "type": "DataField[]",
+          "resolvedType": "DataField[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false
+        },
+        "hasBorder": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "has-border",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Show the trigger border."
+        },
+        "sort": {
+          "type": "DataSortState | null",
+          "resolvedType": "DataSortState | null",
+          "default": "null",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled table sort. Header sorting and this menu share the same value."
+        }
+      },
+      "events": [
+        {
+          "name": "dsSortChange",
+          "detail": "DataSortChangeDetail",
+          "bubbles": false,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "signature": "setFocus() => Promise<void>"
+        }
+      ],
+      "slots": []
+    },
+    "props": {
+      "ariaLabel": {
+        "type": "string | null",
+        "resolvedType": "null | string",
+        "attribute": "aria-label",
+        "default": "null",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the trigger and menu."
+      },
+      "fields": {
+        "type": "DataField[]",
+        "resolvedType": "DataField[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false
+      },
+      "hasBorder": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "has-border",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Show the trigger border."
+      },
+      "sort": {
+        "type": "DataSortState | null",
+        "resolvedType": "DataSortState | null",
+        "default": "null",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled table sort. Header sorting and this menu share the same value."
+      }
+    },
+    "events": [
+      {
+        "name": "dsSortChange",
+        "detail": "DataSortChangeDetail",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [
+      {
+        "name": "setFocus",
+        "signature": "setFocus() => Promise<void>"
+      }
+    ],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-data-sort",
+      "react": "DsDataSort",
+      "vue": "DsDataSort",
+      "angular": "DsDataSort"
+    },
+    "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-data-sort.js';",
+        "example": "<ds-data-sort></ds-data-sort>"
+      },
+      "react": {
+        "import": "import { DsDataSort } from '@ds-mo/ui/react';",
+        "example": "<DsDataSort />"
+      },
+      "vue": {
+        "import": "import { DsDataSort } from '@ds-mo/ui/vue';",
+        "example": "<DsDataSort />"
+      },
+      "angular": {
+        "import": "import { DsDataSort } from '@ds-mo/ui/angular/ds-data-sort';",
+        "example": "<ds-data-sort></ds-data-sort>"
+      },
+      "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"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "button-unfilled",
+    "menu"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/DataSort/DataSort.css",
+      "content": ":host {\n  display: inline-flex;\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n  display: none;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/DataSort/DataSort.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 } from '../Menu/menu-types';\nimport type { DataSortChangeDetail, DataSortState } from '../Table/table-types';\nimport {\n  nextDataSortStateFromMenuItem,\n  dataSortFields,\n  dataSortMenuSections,\n  dataSortStatesEqual,\n} from './data-sort-menu';\n\nlet tableSortSeq = 0;\n\n@Component({\n  tag: 'ds-data-sort',\n  styleUrl: 'DataSort.css',\n  scoped: true,\n})\nexport class DataSort {\n  @Element() private el!: HTMLElement;\n\n  /** Catalog used to derive sortable fields, including compound header segments. */\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  @Prop() fields: DataField[] = [];\n  /** Controlled table sort. Header sorting and this menu share the same value. */\n  @Prop() sort: DataSortState | null = null;\n  /** Accessible name for the trigger and menu. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event({ bubbles: false }) dsSortChange!: EventEmitter<DataSortChangeDetail>;\n\n  @State() private menuOpen = false;\n  @State() private menuSurfaceOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly componentId = `ds-data-sort-${++tableSortSeq}`;\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  render() {\n    const fields = dataSortFields(this.fields);\n    const name = this.ariaLabel?.trim() || 'Sort table';\n\n    return (\n      <Host hidden={fields.length === 0 ? true : undefined}>\n        {fields.length === 0 ? null : (\n          <ds-button-unfilled\n            hasBorder={this.hasBorder}\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"ArrowsVertical\"\n            label=\"Sort\"\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        {fields.length === 0 ? 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={dataSortMenuSections(this.fields, this.sort)}\n            onDsClose={() => this.close()}\n            onDsAfterClose={() => {\n              if (!this.menuOpen) this.menuSurfaceOpen = false;\n            }}\n            onDsSelect={event => this.handleSelect(event.detail)}\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 next = nextDataSortStateFromMenuItem(this.fields, this.sort, item);\n    if (dataSortStatesEqual(this.sort, next)) return;\n    this.dsSortChange.emit({ sort: next });\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/DataSort/data-sort-menu.ts",
+      "content": "import type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport { isTableActionColumn } from '../Table/table-column-customizer';\nimport type { TableColumn, DataSortState } from '../Table/table-types';\n\nexport const TABLE_SORT_DIRECTION_ASC = 'direction:asc';\nexport const TABLE_SORT_DIRECTION_DESC = 'direction:desc';\nconst TABLE_SORT_FIELD_PREFIX = 'field:';\n\nexport interface TableSortField {\n  id: string;\n  label: string;\n}\n\n/** Sortable data fields from the catalog, including compound header segments. */\nexport function dataSortFields(columns: readonly TableColumn[]): TableSortField[] {\n  const fields: TableSortField[] = [];\n  const seen = new Set<string>();\n\n  for (const column of columns) {\n    if (isTableActionColumn(column) || !column.sortable) continue;\n    const segments = column.segments?.filter(segment => segment.sortKey.trim()) ?? [];\n    if (segments.length > 0) {\n      for (const segment of segments) {\n        if (seen.has(segment.sortKey)) continue;\n        seen.add(segment.sortKey);\n        fields.push({\n          id: segment.sortKey,\n          label: segment.dataLabel?.trim() || segment.label.trim() || segment.sortKey,\n        });\n      }\n      continue;\n    }\n    if (seen.has(column.id)) continue;\n    seen.add(column.id);\n    fields.push({\n      id: column.id,\n      label:\n        column.dataLabel?.trim() ||\n        column.label.trim() ||\n        column.accessibleLabel?.trim() ||\n        column.id,\n    });\n  }\n\n  return fields;\n}\n\nexport function dataSortMenuSections(\n  columns: readonly TableColumn[],\n  sort: DataSortState | null | undefined\n): MenuSection[] {\n  const fields = dataSortFields(columns);\n  return [\n    {\n      header: 'Data',\n      items: fields.map(field => ({\n        label: field.label,\n        value: `${TABLE_SORT_FIELD_PREFIX}${encodeURIComponent(field.id)}`,\n        isSelected: sort?.fieldId === field.id,\n      })),\n    },\n    {\n      header: 'Order',\n      items: [\n        {\n          label: 'Ascending',\n          value: TABLE_SORT_DIRECTION_ASC,\n          icon: 'ArrowUp',\n          isSelected: sort?.direction === 'asc',\n        },\n        {\n          label: 'Descending',\n          value: TABLE_SORT_DIRECTION_DESC,\n          icon: 'ArrowDown',\n          isSelected: sort?.direction === 'desc',\n        },\n      ],\n    },\n  ];\n}\n\nexport function dataSortStatesEqual(\n  left: DataSortState | null | undefined,\n  right: DataSortState | null | undefined\n): boolean {\n  if (left === right) return true;\n  if (!left || !right) return false;\n  return left.fieldId === right.fieldId && left.direction === right.direction;\n}\n\n/** Next controlled sort from a Sort menu selection. Does not toggle like a header click. */\nexport function nextDataSortStateFromMenuItem(\n  columns: readonly TableColumn[],\n  current: DataSortState | null | undefined,\n  item: MenuItemData\n): DataSortState | null {\n  const fields = dataSortFields(columns);\n  if (fields.length === 0) return current ?? null;\n\n  if (item.value === TABLE_SORT_DIRECTION_ASC || item.value === TABLE_SORT_DIRECTION_DESC) {\n    const direction = item.value === TABLE_SORT_DIRECTION_ASC ? 'asc' : 'desc';\n    const fieldId = fields.some(field => field.id === current?.fieldId)\n      ? current!.fieldId\n      : fields[0]!.id;\n    return { fieldId, direction };\n  }\n\n  if (!item.value?.startsWith(TABLE_SORT_FIELD_PREFIX)) return current ?? null;\n  let fieldId: string;\n  try {\n    fieldId = decodeURIComponent(item.value.slice(TABLE_SORT_FIELD_PREFIX.length));\n  } catch {\n    return current ?? null;\n  }\n  if (!fields.some(field => field.id === fieldId)) return current ?? null;\n  if (current?.fieldId === fieldId) return current ?? null;\n  return { fieldId, direction: current?.direction ?? 'asc' };\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,194 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-toolbar",
+  "title": "DataToolbar",
+  "description": "Shared layout for application-owned data-view controls, with a start cluster, optional search, trailing Filter/Sort/Group, and narrow-width horizontal overflow.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/data-toolbar",
+    "source": "src/wc/components/DataToolbar/DataToolbar.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Shared layout for application-owned data-view controls, with a start cluster, optional search, trailing Filter/Sort/Group, and narrow-width horizontal overflow.",
+      "useWhen": [
+        "Several data views repeat the same saved-view cluster, middle discovery and result-shaping controls, and table-owned caption actions.",
+        "A ds-table header slot needs consistent control spacing, alignment, grouping, and narrow-width overflow without moving product behavior into the table."
+      ],
+      "avoidWhen": [
+        "The controls do not operate on a table or structured result set.",
+        "The application expects the toolbar to define filters, saved views, grouping choices, persistence, or data transformations.",
+        "Only one standalone control is present and needs no grouped toolbar semantics."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-table",
+        "component:ds-data-saved-views",
+        "component:ds-divider",
+        "component:ds-input",
+        "component:ds-data-filter",
+        "component:ds-data-group",
+        "component:ds-select",
+        "component:ds-data-sort",
+        "component:ds-data-customize",
+        "component:ds-button-unfilled",
+        "component:ds-data-preferences"
+      ],
+      "patterns": [],
+      "accessibility": [
+        "The component exposes a named toolbar while each slotted control retains its own accessible name and native keyboard behavior.",
+        "Use the start slot for saved views. Use search for the optional discovery field, leading for any additional left-side middle controls, and trailing for Filter, Sort, and Group. Table-owned column customizer and data-mode actions remain in the table caption trailing cluster and participate in the same caption overflow row.",
+        "Tab order follows authored DOM order. The toolbar does not add roving focus because it may contain heterogeneous form and popup controls."
+      ],
+      "states": [
+        "The component owns layout only. It never mutates slotted control props, values, menus, loading, persistence, or consequences. Use ds-data-saved-views and ds-data-filter when those interactions need the shared CompoMo behavior while application data and persistence remain external.",
+        "Buttons in the toolbar keep their hover and pressed interaction paint without physically scaling, so pointer feedback does not disturb the stable caption geometry.",
+        "The start cluster is followed by Search, optional leading controls, and one trailing action cluster. The start cluster hides when nothing is projected. Search is a dedicated slot that hides when nothing is projected and grows to consume available row space. Empty leading or trailing clusters add no placeholder chrome. Search is the only toolbar region that grows and shrinks; all action controls retain their control geometry and align directly before the table-owned actions.",
+        "Data-mode switching remains a table-owned caption action. Column customization normally uses the table caption trigger; compact compositions use the shared ds-data-preferences control and hide that trigger. When slotted into a table header, the table caption owns overflow for the complete toolbar and table-owned action row.",
+        "Standard toolbars omit region dividers. Borderless compositions show dividers after populated start and search regions when another region follows; the application supplies borderless controls."
+      ],
+      "responsiveBehavior": [
+        "The start cluster, search, trailing Filter/Sort/Group, and table caption trailing actions stay on one line. Saved views hug their current trigger content up to the compact menu-width token rather than reserving that full width; long names truncate while the dirty dot stays visible. Filter, Sort, and Group triggers cap at the same token, and Sort and Group popups keep that compact menu-width floor. A standalone toolbar owns its horizontal scrolling; inside a table, the complete caption row is the single overflow owner so table-owned actions never remain pinned over scrolling toolbar controls.",
+        "Search consumes the row space left between fixed control groups and flexes smaller when the complete row needs space. The owning table caption or standalone toolbar determines when data controls omit their labels and chevrons; each exposes its label through a hover and keyboard-focus tooltip. Empty leading and trailing slot groups do not add spacing. Active filtering retains neutral trigger colors. Group and Sort keep resting secondary chrome. Standalone Customize follows the same compact treatment; table-owned Customize remains part of the caption.",
+        "The scrollbar is visually suppressed without removing touch, trackpad, mouse-wheel, or keyboard scrolling from the overflow container.",
+        "For compact toolbars, the application can replace Filter, Sort, Group and the table Customize trigger with ds-data-preferences in the trailing slot. Share the same controlled values and events; the toolbar remains a data-agnostic layout."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Project saved views through slot=start, search through slot=search, additional left-side middle controls through slot=leading, and ds-data-filter, ds-data-group, and ds-data-sort through slot=trailing. Provide a contextual accessible name for the data view."
+        ],
+        "react": [
+          "Set slot=start, slot=search, slot=leading, or slot=trailing on each child control. Use ds-data-filter and ds-data-group for the standard Filter and Group recipes, and keep values and event handlers in the application."
+        ],
+        "angular": [
+          "Set slot=start, slot=search, slot=leading, or slot=trailing on each child control, use DsDataFilter and DsDataGroup for the standard Filter and Group recipes, and import the generated adapters."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook review states",
+          "path": "src/wc/components/DataToolbar/DataToolbar.stories.ts"
+        },
+        {
+          "label": "Table composition owner",
+          "path": "src/wc/components/Table/Table.agent.json"
+        }
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "gap"
+            ],
+            "reason": "The component owns spacing between its immediate content regions; the application controls surrounding margins and placement.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "borderless": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "borderless",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Use separators between regions when composing borderless controls."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "default": "'Controls'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the grouped controls. Pass a contextual name such as Table controls or Map controls."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "borderless": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "borderless",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Use separators between regions when composing borderless controls."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "default": "'Controls'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the grouped controls. Pass a contextual name such as Table controls or Map controls."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-data-toolbar",
+      "react": "DsDataToolbar",
+      "vue": "DsDataToolbar",
+      "angular": "DsDataToolbar"
+    },
+    "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-data-toolbar.js';",
+        "example": "<ds-data-toolbar></ds-data-toolbar>"
+      },
+      "react": {
+        "import": "import { DsDataToolbar } from '@ds-mo/ui/react';",
+        "example": "<DsDataToolbar />"
+      },
+      "vue": {
+        "import": "import { DsDataToolbar } from '@ds-mo/ui/vue';",
+        "example": "<DsDataToolbar />"
+      },
+      "angular": {
+        "import": "import { DsDataToolbar } from '@ds-mo/ui/angular/ds-data-toolbar';",
+        "example": "<ds-data-toolbar></ds-data-toolbar>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.5.1",
+          "@ds-mo/icons ^8.1.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "divider"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/DataToolbar/DataToolbar.css",
+      "content": ":host {\n  --ds-control-press-active-scale: var(--dimension-scale-default);\n\n  display: block;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n}\n\n/* A table caption owns overflow for the complete application + table control row. */\n:host([slot='header']) {\n  display: contents;\n  max-inline-size: none;\n}\n\n.data-toolbar {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  inline-size: 100%;\n  min-inline-size: 0;\n  gap: var(--dimension-space-100);\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n}\n\n:host([slot='header']) .data-toolbar {\n  display: contents;\n}\n\n.data-toolbar::-webkit-scrollbar {\n  display: none;\n}\n\n.data-toolbar__start,\n.data-toolbar__search,\n.data-toolbar__leading,\n.data-toolbar__trailing {\n  display: flex;\n  align-items: center;\n  min-inline-size: 0;\n  gap: var(--dimension-space-100);\n}\n\n.data-toolbar__start {\n  flex: 0 0 auto;\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n  overflow: hidden;\n}\n\n.data-toolbar__rule {\n  flex: 0 0 auto;\n}\n\n.data-toolbar__search {\n  flex: 1 1 0;\n  max-inline-size: none;\n  contain: inline-size;\n}\n\n.data-toolbar__slot--empty {\n  display: none;\n}\n\n.data-toolbar__leading {\n  flex: 0 0 auto;\n}\n\n.data-toolbar__trailing {\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n}\n\n.data-toolbar__trailing > *,\n.data-toolbar [slot='start'],\n.data-toolbar ds-data-filter,\n.data-toolbar ds-filter-menu,\n.data-toolbar ds-select,\n.data-toolbar ds-data-group,\n.data-toolbar ds-data-sort {\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n  --ds-choice-popup-min-inline-size: var(--dimension-menu-width-xs);\n}\n\n.data-toolbar__trailing > * {\n  flex: 0 0 auto;\n}\n\n.data-toolbar__start slot,\n.data-toolbar__search slot,\n.data-toolbar__leading slot,\n.data-toolbar__trailing slot {\n  display: contents;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/DataToolbar/DataToolbar.tsx",
+      "content": "import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nconst TOOLBAR_SLOT_START = 1 << 0;\nconst TOOLBAR_SLOT_SEARCH = 1 << 1;\nconst TOOLBAR_SLOT_LEADING = 1 << 2;\nconst TOOLBAR_SLOT_TRAILING = 1 << 3;\n\n@Component({\n  tag: 'ds-data-toolbar',\n  styleUrl: 'DataToolbar.css',\n  scoped: true,\n})\nexport class DataToolbar {\n  @Element() el!: HTMLElement;\n\n  /** Accessible name for the grouped controls. Pass a contextual name such as Table controls or Map controls. */\n  @Prop() label: string = 'Controls';\n\n  /** Use separators between regions when composing borderless controls. */\n  @Prop() borderless: boolean = false;\n\n  @State() private slotPresence = 0;\n\n  componentWillLoad(): void {\n    this.syncSlotPresence();\n  }\n\n  private hasOwnedSlot(name: string): boolean {\n    return Array.from(this.el.querySelectorAll<HTMLElement>(`[slot=\"${name}\"]`)).some(\n      element => element.closest('ds-data-toolbar') === this.el\n    );\n  }\n\n  private syncSlotPresence = () => {\n    let presence = 0;\n    if (this.hasOwnedSlot('start')) presence |= TOOLBAR_SLOT_START;\n    if (this.hasOwnedSlot('search')) presence |= TOOLBAR_SLOT_SEARCH;\n    if (this.hasOwnedSlot('leading')) presence |= TOOLBAR_SLOT_LEADING;\n    if (this.hasOwnedSlot('trailing')) presence |= TOOLBAR_SLOT_TRAILING;\n    if (presence !== this.slotPresence) this.slotPresence = presence;\n  };\n\n  render() {\n    const hasStart = (this.slotPresence & TOOLBAR_SLOT_START) !== 0;\n    const hasSearch = (this.slotPresence & TOOLBAR_SLOT_SEARCH) !== 0;\n    const hasLeading = (this.slotPresence & TOOLBAR_SLOT_LEADING) !== 0;\n    const hasTrailing = (this.slotPresence & TOOLBAR_SLOT_TRAILING) !== 0;\n\n    return (\n      <Host>\n        <div class=\"data-toolbar\" role=\"toolbar\" aria-label={this.label}>\n          <div\n            class={{\n              'data-toolbar__start': true,\n              'data-toolbar__slot--empty': !hasStart,\n            }}\n          >\n            <slot name=\"start\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <ds-divider\n            class={{\n              'data-toolbar__rule': true,\n              'data-toolbar__slot--empty':\n                !this.borderless || !hasStart || !(hasSearch || hasLeading || hasTrailing),\n            }}\n            orientation=\"vertical\"\n            length=\"var(--dimension-space-250)\"\n          />\n          <div\n            class={{\n              'data-toolbar__search': true,\n              'data-toolbar__slot--empty': !hasSearch,\n            }}\n          >\n            <slot name=\"search\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <ds-divider\n            class={{\n              'data-toolbar__rule': true,\n              'data-toolbar__slot--empty':\n                !this.borderless || !hasSearch || !(hasLeading || hasTrailing),\n            }}\n            orientation=\"vertical\"\n            length=\"var(--dimension-space-250)\"\n          />\n          <div\n            class={{\n              'data-toolbar__leading': true,\n              'data-toolbar__slot--empty': !hasLeading,\n            }}\n          >\n            <slot name=\"leading\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <div\n            class={{\n              'data-toolbar__trailing': true,\n              'data-toolbar__slot--empty': !hasTrailing,\n            }}\n          >\n            <slot name=\"trailing\" onSlotchange={this.syncSlotPresence} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -74,7 +74,12 @@
           "label": "Storybook examples",
           "path": "src/wc/components/Divider/Divider.stories.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "Orientation and length are public props; the host supports application layout around the internal divider.",
+        "protected": [],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -204,7 +209,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/empty-state.json

@@ -85,7 +85,12 @@
           "label": "Shared layout recipe foundation",
           "path": "docs/layout-recipe-foundation.md"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The application explicitly owns available width, height and surrounding padding.",
+        "protected": [],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -177,7 +182,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -81,7 +81,20 @@
           "label": "Cross-browser form and accessibility coverage",
           "path": "tests/e2e/forms.spec.ts"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "gap"
+            ],
+            "reason": "The component owns spacing between its immediate content regions; the application controls surrounding margins and placement.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -205,7 +218,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }