@ds-mo/ui 14.35.0 → 15.0.0

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

@@ -0,0 +1,254 @@
+{
+  "$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"
+        }
+      ]
+    },
+    "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,181 @@
+{
+  "$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"
+        }
+      ]
+    },
+    "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

@@ -204,7 +204,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

@@ -177,7 +177,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

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "field",
   "title": "Field",
-  "description": "Accessible form-field composition that gives one Input, Textarea, or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
+  "description": "Accessible form-field composition that gives one Input, InputDate, InputTime, Textarea, or Select an optional visible label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,9 +13,10 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Accessible form-field composition that gives one Input, Textarea, or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
+      "summary": "Accessible form-field composition that gives one Input, InputDate, InputTime, Textarea, or Select an optional visible label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
       "useWhen": [
-        "An Input, Textarea, or Select needs a persistent visible label in a form.",
+        "An Input, InputDate, InputTime, Textarea, or Select needs a persistent visible label in a form.",
+        "A nearby heading already names the field, and the control still needs Field's error association and message rhythm.",
         "Help text or an error message must be programmatically associated with one control.",
         "A form layout needs one consistent label-control-message rhythm."
       ],
@@ -33,19 +34,23 @@
       ],
       "commonlyComposedWith": [
         "component:ds-input",
+        "component:ds-input-date",
+        "component:ds-input-time",
         "component:ds-textarea",
         "component:ds-select",
         "component:ds-text"
       ],
       "accessibility": [
-        "Slot exactly one form control. Field assigns its stable control ID and connects the visible label automatically.",
+        "Slot exactly one form control. When a visible label is provided, Field assigns its stable control ID and connects that label automatically.",
+        "Omit the visible label when a nearby heading already names the field. Keep a programmatic name on the slotted control, such as aria-label, and do not set aria-labelledby to an empty value.",
         "The visible description or error ID is merged with any authored aria-describedby references; a rendered error replaces the description.",
         "The error prop forwards aria-invalid and supported design-system control error styling; put visible error text on Field, not again on the child control.",
         "Clicking the label focuses the slotted design-system control without opening a Select popup.",
         "Do not use placeholder text as the only label. Keep label text concise and put format or consequence guidance in description."
       ],
       "states": [
-        "Label, control, description, and error content follow the shared 4px vertical field flow without changing the slotted control's width or semantics.",
+        "The visible label is optional. Omit it when a nearby heading already names the field; Field still associates description and error text with the slotted control.",
+        "Label, control, description, and error content follow the shared 4px vertical field flow without changing the slotted control's width or semantics. When the slotted control is borderless, description and error copy inset to that control's text origin instead of the resting bordered edge.",
         "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.",
@@ -61,7 +66,7 @@
           "Assign child component values and option arrays through their normal JavaScript properties."
         ],
         "react": [
-          "Compose one DsInput, DsTextarea, or DsSelect child and control validation timing in the form owner."
+          "Compose one DsInput, DsInputDate, DsInputTime, DsTextarea, or DsSelect child and control validation timing in the form owner."
         ],
         "angular": [
           "Compose the generated Field adapter around the control adapter and its matching Angular value accessor."
@@ -115,11 +120,11 @@
         },
         "label": {
           "type": "string",
-          "resolvedType": "string",
+          "resolvedType": "string | undefined",
           "attribute": "label",
-          "required": true,
+          "required": false,
           "mutable": false,
-          "description": "Persistent visible label for the single slotted control."
+          "description": "Visible label for the slotted control. Omit when a nearby heading already names the field."
         }
       },
       "events": [],
@@ -162,11 +167,11 @@
       },
       "label": {
         "type": "string",
-        "resolvedType": "string",
+        "resolvedType": "string | undefined",
         "attribute": "label",
-        "required": true,
+        "required": false,
         "mutable": false,
-        "description": "Persistent visible label for the single slotted control."
+        "description": "Visible label for the slotted control. Omit when a nearby heading already names the field."
       }
     },
     "events": [],
@@ -200,7 +205,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."
       }
@@ -216,12 +221,12 @@
   "files": [
     {
       "path": "src/wc/components/Field/Field.css",
-      "content": "@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/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  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\n@Component({\n  tag: 'ds-field',\n  styleUrl: 'Field.css',\n  scoped: true,\n})\nexport class Field {\n  @Element() el!: HTMLElement;\n\n  /** Persistent visible label for the single slotted control. */\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  /** 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 didLoad = false;\n\n  connectedCallback() {\n    if (this.didLoad) this.observeLateControls();\n  }\n\n  disconnectedCallback() {\n    this.childObserver?.disconnect();\n    this.childObserver = 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('description')\n  @Watch('error')\n  @Watch('errorMessage')\n  onFieldContractChange() {\n    this.syncControl();\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    }\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.labelId]).join(' ');\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);\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  };\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 class=\"field ds-field-stack\">\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          <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  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",
       "type": "registry:ui"
     }
   ]