@ds-mo/ui 14.35.0 → 15.0.0

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

@@ -1,253 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "table-sort",
-  "title": "TableSort",
-  "description": "Toolbar companion for the table's one controlled member-row sort, with Data and Order menu sections that mirror header sorting.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/table-sort",
-    "source": "src/wc/components/TableSort/TableSort.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "general",
-      "status": "stable",
-      "summary": "Toolbar companion for the table's one controlled member-row sort, with Data and Order menu sections that mirror header sorting.",
-      "useWhen": [
-        "A table toolbar 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 table has no sortable columns; the control hides itself.",
-        "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-table-toolbar",
-        "component:ds-table-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": [
-        "columns and sort are controlled. dsSortChange reports the next TableSortState 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."
-      ],
-      "responsiveBehavior": [
-        "Place the control in the trailing region of ds-table-toolbar with Filter and Group.",
-        "Inside a named ds-table container narrower than 900px, the trigger omits its label and chevron and 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 columns 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-table-sort; update it from either event."
-        ],
-        "angular": [
-          "Import the generated DsTableSort adapter, bind columns and sort, and handle dsSortChange with the same owner that handles table header sorting."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook review states",
-          "path": "src/wc/components/TableSort/TableSort.stories.ts"
-        },
-        {
-          "label": "Toolbar composition owner",
-          "path": "src/wc/components/TableToolbar/TableToolbar.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."
-        },
-        "columns": {
-          "type": "TableColumn[]",
-          "resolvedType": "TableColumn[]",
-          "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": "TableSortState | null",
-          "resolvedType": "TableSortState | null",
-          "default": "null",
-          "required": false,
-          "mutable": false,
-          "description": "Controlled table sort. Header sorting and this menu share the same value."
-        }
-      },
-      "events": [
-        {
-          "name": "dsSortChange",
-          "detail": "TableSortChangeDetail",
-          "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."
-      },
-      "columns": {
-        "type": "TableColumn[]",
-        "resolvedType": "TableColumn[]",
-        "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": "TableSortState | null",
-        "resolvedType": "TableSortState | null",
-        "default": "null",
-        "required": false,
-        "mutable": false,
-        "description": "Controlled table sort. Header sorting and this menu share the same value."
-      }
-    },
-    "events": [
-      {
-        "name": "dsSortChange",
-        "detail": "TableSortChangeDetail",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true
-      }
-    ],
-    "methods": [
-      {
-        "name": "setFocus",
-        "signature": "setFocus() => Promise<void>"
-      }
-    ],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-table-sort",
-      "react": "DsTableSort",
-      "vue": "DsTableSort",
-      "angular": "DsTableSort"
-    },
-    "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-table-sort.js';",
-        "example": "<ds-table-sort></ds-table-sort>"
-      },
-      "react": {
-        "import": "import { DsTableSort } from '@ds-mo/ui/react';",
-        "example": "<DsTableSort />"
-      },
-      "vue": {
-        "import": "import { DsTableSort } from '@ds-mo/ui/vue';",
-        "example": "<DsTableSort />"
-      },
-      "angular": {
-        "import": "import { DsTableSort } from '@ds-mo/ui/angular/ds-table-sort';",
-        "example": "<ds-table-sort></ds-table-sort>"
-      },
-      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: columns, sort.",
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.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/TableSort/TableSort.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/TableSort/TableSort.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 { MenuItemData } from '../Menu/menu-types';\nimport type { TableColumn, TableSortChangeDetail, TableSortState } from '../Table/table-types';\nimport {\n  nextTableSortStateFromMenuItem,\n  tableSortFields,\n  tableSortMenuSections,\n  tableSortStatesEqual,\n} from './table-sort-menu';\n\nlet tableSortSeq = 0;\n\n@Component({\n  tag: 'ds-table-sort',\n  styleUrl: 'TableSort.css',\n  scoped: true,\n})\nexport class TableSort {\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() columns: TableColumn[] = [];\n  /** Controlled table sort. Header sorting and this menu share the same value. */\n  @Prop() sort: TableSortState | 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<TableSortChangeDetail>;\n\n  @State() private menuOpen = false;\n  @State() private menuSurfaceOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly componentId = `ds-table-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 = tableSortFields(this.columns);\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={tableSortMenuSections(this.columns, 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 = nextTableSortStateFromMenuItem(this.columns, this.sort, item);\n    if (tableSortStatesEqual(this.sort, next)) return;\n    this.dsSortChange.emit({ sort: next });\n  }\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/TableSort/table-sort-menu.ts",
-      "content": "import type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport { isTableActionColumn } from '../Table/table-column-customizer';\nimport type { TableColumn, TableSortState } 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 tableSortFields(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.headerSegments?.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() || column.header.trim() || column.headerLabel?.trim() || column.id,\n    });\n  }\n\n  return fields;\n}\n\nexport function tableSortMenuSections(\n  columns: readonly TableColumn[],\n  sort: TableSortState | null | undefined\n): MenuSection[] {\n  const fields = tableSortFields(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?.columnId === 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 tableSortStatesEqual(\n  left: TableSortState | null | undefined,\n  right: TableSortState | null | undefined\n): boolean {\n  if (left === right) return true;\n  if (!left || !right) return false;\n  return left.columnId === right.columnId && left.direction === right.direction;\n}\n\n/** Next controlled sort from a Sort menu selection. Does not toggle like a header click. */\nexport function nextTableSortStateFromMenuItem(\n  columns: readonly TableColumn[],\n  current: TableSortState | null | undefined,\n  item: MenuItemData\n): TableSortState | null {\n  const fields = tableSortFields(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 columnId = fields.some(field => field.id === current?.columnId)\n      ? current!.columnId\n      : fields[0]!.id;\n    return { columnId, direction };\n  }\n\n  if (!item.value?.startsWith(TABLE_SORT_FIELD_PREFIX)) return current ?? null;\n  let columnId: string;\n  try {\n    columnId = decodeURIComponent(item.value.slice(TABLE_SORT_FIELD_PREFIX.length));\n  } catch {\n    return current ?? null;\n  }\n  if (!fields.some(field => field.id === columnId)) return current ?? null;\n  if (current?.columnId === columnId) return current ?? null;\n  return { columnId, direction: current?.direction ?? 'asc' };\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}

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

@@ -1,180 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "table-toolbar",
-  "title": "TableToolbar",
-  "description": "Data-agnostic companion layout for application-owned table caption 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/table-toolbar",
-    "source": "src/wc/components/TableToolbar/TableToolbar.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "general",
-      "status": "stable",
-      "summary": "Data-agnostic companion layout for application-owned table caption controls, with a start cluster, optional search, trailing Filter/Sort/Group, and narrow-width horizontal overflow.",
-      "useWhen": [
-        "Several table pages 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-table-saved-views",
-        "component:ds-divider",
-        "component:ds-input",
-        "component:ds-table-filter",
-        "component:ds-table-group",
-        "component:ds-select",
-        "component:ds-table-sort",
-        "component:ds-button-unfilled",
-        "component:ds-table-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-table-saved-views and ds-table-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-table-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. Inside a named ds-table container narrower than 900px, ds-table-filter, ds-table-group, and ds-table-sort 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. Table-owned Customize also becomes the icon-only Table menu button at that width with the same tooltip behavior.",
-        "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-table-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-table-filter, ds-table-group, and ds-table-sort through slot=trailing. Provide contextual accessible names when Table controls is insufficient."
-        ],
-        "react": [
-          "Set slot=start, slot=search, slot=leading, or slot=trailing on each child control. Use ds-table-filter and ds-table-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 DsTableFilter and DsTableGroup for the standard Filter and Group recipes, and import the generated adapters."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook review states",
-          "path": "src/wc/components/TableToolbar/TableToolbar.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": "'Table controls'",
-          "required": false,
-          "mutable": false,
-          "description": "Accessible name for the grouped table 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": "'Table controls'",
-        "required": false,
-        "mutable": false,
-        "description": "Accessible name for the grouped table controls."
-      }
-    },
-    "events": [],
-    "methods": [],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-table-toolbar",
-      "react": "DsTableToolbar",
-      "vue": "DsTableToolbar",
-      "angular": "DsTableToolbar"
-    },
-    "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-table-toolbar.js';",
-        "example": "<ds-table-toolbar></ds-table-toolbar>"
-      },
-      "react": {
-        "import": "import { DsTableToolbar } from '@ds-mo/ui/react';",
-        "example": "<DsTableToolbar />"
-      },
-      "vue": {
-        "import": "import { DsTableToolbar } from '@ds-mo/ui/vue';",
-        "example": "<DsTableToolbar />"
-      },
-      "angular": {
-        "import": "import { DsTableToolbar } from '@ds-mo/ui/angular/ds-table-toolbar';",
-        "example": "<ds-table-toolbar></ds-table-toolbar>"
-      },
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.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/TableToolbar/TableToolbar.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.table-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']) .table-toolbar {\n  display: contents;\n}\n\n.table-toolbar::-webkit-scrollbar {\n  display: none;\n}\n\n.table-toolbar__start,\n.table-toolbar__search,\n.table-toolbar__leading,\n.table-toolbar__trailing {\n  display: flex;\n  align-items: center;\n  min-inline-size: 0;\n  gap: var(--dimension-space-100);\n}\n\n.table-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.table-toolbar__rule {\n  flex: 0 0 auto;\n}\n\n.table-toolbar__search {\n  flex: 1 1 0;\n  max-inline-size: none;\n  contain: inline-size;\n}\n\n.table-toolbar__slot--empty {\n  display: none;\n}\n\n.table-toolbar__leading {\n  flex: 0 0 auto;\n}\n\n.table-toolbar__trailing {\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n}\n\n.table-toolbar__trailing > *,\n.table-toolbar [slot='start'],\n.table-toolbar ds-table-filter,\n.table-toolbar ds-filter-menu,\n.table-toolbar ds-select,\n.table-toolbar ds-table-group,\n.table-toolbar ds-table-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.table-toolbar__trailing > * {\n  flex: 0 0 auto;\n}\n\n.table-toolbar__start slot,\n.table-toolbar__search slot,\n.table-toolbar__leading slot,\n.table-toolbar__trailing slot {\n  display: contents;\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/TableToolbar/TableToolbar.tsx",
-      "content": "import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nconst TABLE_TOOLBAR_SLOT_START = 1 << 0;\nconst TABLE_TOOLBAR_SLOT_SEARCH = 1 << 1;\nconst TABLE_TOOLBAR_SLOT_LEADING = 1 << 2;\nconst TABLE_TOOLBAR_SLOT_TRAILING = 1 << 3;\n\n@Component({\n  tag: 'ds-table-toolbar',\n  styleUrl: 'TableToolbar.css',\n  scoped: true,\n})\nexport class TableToolbar {\n  @Element() el!: HTMLElement;\n\n  /** Accessible name for the grouped table controls. */\n  @Prop() label: string = 'Table 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-table-toolbar') === this.el\n    );\n  }\n\n  private syncSlotPresence = () => {\n    let presence = 0;\n    if (this.hasOwnedSlot('start')) presence |= TABLE_TOOLBAR_SLOT_START;\n    if (this.hasOwnedSlot('search')) presence |= TABLE_TOOLBAR_SLOT_SEARCH;\n    if (this.hasOwnedSlot('leading')) presence |= TABLE_TOOLBAR_SLOT_LEADING;\n    if (this.hasOwnedSlot('trailing')) presence |= TABLE_TOOLBAR_SLOT_TRAILING;\n    if (presence !== this.slotPresence) this.slotPresence = presence;\n  };\n\n  render() {\n    const hasStart = (this.slotPresence & TABLE_TOOLBAR_SLOT_START) !== 0;\n    const hasSearch = (this.slotPresence & TABLE_TOOLBAR_SLOT_SEARCH) !== 0;\n    const hasLeading = (this.slotPresence & TABLE_TOOLBAR_SLOT_LEADING) !== 0;\n    const hasTrailing = (this.slotPresence & TABLE_TOOLBAR_SLOT_TRAILING) !== 0;\n\n    return (\n      <Host>\n        <div class=\"table-toolbar\" role=\"toolbar\" aria-label={this.label}>\n          <div\n            class={{\n              'table-toolbar__start': true,\n              'table-toolbar__slot--empty': !hasStart,\n            }}\n          >\n            <slot name=\"start\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <ds-divider\n            class={{\n              'table-toolbar__rule': true,\n              'table-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              'table-toolbar__search': true,\n              'table-toolbar__slot--empty': !hasSearch,\n            }}\n          >\n            <slot name=\"search\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <ds-divider\n            class={{\n              'table-toolbar__rule': true,\n              'table-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              'table-toolbar__leading': true,\n              'table-toolbar__slot--empty': !hasLeading,\n            }}\n          >\n            <slot name=\"leading\" onSlotchange={this.syncSlotPresence} />\n          </div>\n          <div\n            class={{\n              'table-toolbar__trailing': true,\n              'table-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/react/ds-table-filter.d.ts

@@ -1,18 +0,0 @@
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsTableFilterCustomEvent, type FilterMenuChangeDetail, type FilterMenuMatchModeChangeDetail } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsTableFilter as DsTableFilterElement } from "@ds-mo/ui/dist/components/ds-table-filter.js";
-export type DsTableFilterEvents = {
-    onDsChange: EventName<DsTableFilterCustomEvent<FilterMenuChangeDetail>>;
-    onDsClear: EventName<DsTableFilterCustomEvent<void>>;
-    onDsMatchModeChange: EventName<DsTableFilterCustomEvent<FilterMenuMatchModeChangeDetail>>;
-    onDsActiveFilterChange: EventName<DsTableFilterCustomEvent<string>>;
-    onDsClose: EventName<DsTableFilterCustomEvent<void>>;
-    onDsOpenChange: EventName<DsTableFilterCustomEvent<boolean>>;
-    onDsAfterClose: EventName<DsTableFilterCustomEvent<void>>;
-};
-export declare const DsTableFilter: StencilReactComponent<DsTableFilterElement, DsTableFilterEvents, Components.DsTableFilter>;

package/dist/react/ds-table-group.d.ts

@@ -1,14 +0,0 @@
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsTableGroupCustomEvent, type TableGroupingState } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsTableGroup as DsTableGroupElement } from "@ds-mo/ui/dist/components/ds-table-group.js";
-export type DsTableGroupEvents = {
-    onDsGroupChange: EventName<DsTableGroupCustomEvent<TableGroupingState>>;
-    onDsClear: EventName<DsTableGroupCustomEvent<void>>;
-    onDsOpenChange: EventName<DsTableGroupCustomEvent<boolean>>;
-};
-export declare const DsTableGroup: StencilReactComponent<DsTableGroupElement, DsTableGroupEvents, Components.DsTableGroup>;

package/dist/react/ds-table-preferences.d.ts

@@ -1,21 +0,0 @@
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsTablePreferencesCustomEvent, type FilterMenuChangeDetail, type FilterMenuMatchModeChangeDetail, type PreferencesTab, type TableColumnsConfigChangeDetail, type TableGroupingState, type TableSortChangeDetail } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsTablePreferences as DsTablePreferencesElement } from "@ds-mo/ui/dist/components/ds-table-preferences.js";
-export type DsTablePreferencesEvents = {
-    onDsCustomizeOptionChange: EventName<DsTablePreferencesCustomEvent<string>>;
-    onDsPreferencesTabChange: EventName<DsTablePreferencesCustomEvent<PreferencesTab>>;
-    onDsFilterChange: EventName<DsTablePreferencesCustomEvent<FilterMenuChangeDetail>>;
-    onDsFilterMatchModeChange: EventName<DsTablePreferencesCustomEvent<FilterMenuMatchModeChangeDetail>>;
-    onDsActiveFilterChange: EventName<DsTablePreferencesCustomEvent<string>>;
-    onDsFiltersClear: EventName<DsTablePreferencesCustomEvent<void>>;
-    onDsSortChange: EventName<DsTablePreferencesCustomEvent<TableSortChangeDetail>>;
-    onDsGroupChange: EventName<DsTablePreferencesCustomEvent<TableGroupingState>>;
-    onDsGroupClear: EventName<DsTablePreferencesCustomEvent<void>>;
-    onDsColumnsConfigChange: EventName<DsTablePreferencesCustomEvent<TableColumnsConfigChangeDetail>>;
-};
-export declare const DsTablePreferences: StencilReactComponent<DsTablePreferencesElement, DsTablePreferencesEvents, Components.DsTablePreferences>;

package/dist/react/ds-table-saved-views.d.ts

@@ -1,17 +0,0 @@
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsTableSavedViewsCustomEvent, type TableSavedViewChangeDetail, type TableSavedViewCreateDetail, type TableSavedViewDiscardDetail, type TableSavedViewRemoveDetail, type TableSavedViewRenameDetail, type TableSavedViewSaveDetail } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsTableSavedViews as DsTableSavedViewsElement } from "@ds-mo/ui/dist/components/ds-table-saved-views.js";
-export type DsTableSavedViewsEvents = {
-    onDsViewChange: EventName<DsTableSavedViewsCustomEvent<TableSavedViewChangeDetail>>;
-    onDsViewCreate: EventName<DsTableSavedViewsCustomEvent<TableSavedViewCreateDetail>>;
-    onDsViewRename: EventName<DsTableSavedViewsCustomEvent<TableSavedViewRenameDetail>>;
-    onDsViewRemove: EventName<DsTableSavedViewsCustomEvent<TableSavedViewRemoveDetail>>;
-    onDsViewSave: EventName<DsTableSavedViewsCustomEvent<TableSavedViewSaveDetail>>;
-    onDsViewDiscard: EventName<DsTableSavedViewsCustomEvent<TableSavedViewDiscardDetail>>;
-};
-export declare const DsTableSavedViews: StencilReactComponent<DsTableSavedViewsElement, DsTableSavedViewsEvents, Components.DsTableSavedViews>;

package/dist/react/ds-table-search.d.ts

@@ -1,14 +0,0 @@
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsTableSearchCustomEvent, type TableSearchFieldsChangeDetail } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsTableSearch as DsTableSearchElement } from "@ds-mo/ui/dist/components/ds-table-search.js";
-export type DsTableSearchEvents = {
-    onDsChange: EventName<DsTableSearchCustomEvent<string>>;
-    onDsFieldsChange: EventName<DsTableSearchCustomEvent<TableSearchFieldsChangeDetail>>;
-    onDsClear: EventName<DsTableSearchCustomEvent<void>>;
-};
-export declare const DsTableSearch: StencilReactComponent<DsTableSearchElement, DsTableSearchEvents, Components.DsTableSearch>;

package/dist/react/ds-table-sort.d.ts

@@ -1,12 +0,0 @@
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsTableSortCustomEvent, type TableSortChangeDetail } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsTableSort as DsTableSortElement } from "@ds-mo/ui/dist/components/ds-table-sort.js";
-export type DsTableSortEvents = {
-    onDsSortChange: EventName<DsTableSortCustomEvent<TableSortChangeDetail>>;
-};
-export declare const DsTableSort: StencilReactComponent<DsTableSortElement, DsTableSortEvents, Components.DsTableSort>;

package/dist/react/ds-table-sort.js

@@ -1,12 +0,0 @@
-'use client';
-import { createComponent } from './react-runtime.js';
-import React from 'react';
-import { DsTableSort as DsTableSortElement, defineCustomElement as defineDsTableSort } from "@ds-mo/ui/dist/components/ds-table-sort.js";
-export const DsTableSort = /*@__PURE__*/ createComponent({
-    tagName: 'ds-table-sort',
-    elementClass: DsTableSortElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onDsSortChange: 'dsSortChange' },
-    defineCustomElement: defineDsTableSort
-});

package/dist/react/ds-table-toolbar.js

@@ -1,12 +0,0 @@
-'use client';
-import { createComponent } from './react-runtime.js';
-import React from 'react';
-import { DsTableToolbar as DsTableToolbarElement, defineCustomElement as defineDsTableToolbar } from "@ds-mo/ui/dist/components/ds-table-toolbar.js";
-export const DsTableToolbar = /*@__PURE__*/ createComponent({
-    tagName: 'ds-table-toolbar',
-    elementClass: DsTableToolbarElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineDsTableToolbar
-});

package/dist/types/components/FilterMenu/filter-menu-calendar.d.ts

@@ -1,13 +0,0 @@
-export interface FilterMenuCalendarDay {
-    value: string;
-    day: number;
-    inMonth: boolean;
-    label: string;
-}
-export declare const FILTER_MENU_WEEKDAYS: string[];
-export declare function filterMenuToday(): string;
-export declare function filterMenuCalendarMonth(value: string): string;
-export declare function shiftFilterMenuCalendarMonth(value: string, offset: number): string;
-export declare function filterMenuCalendarMonthLabel(value: string): string;
-export declare function filterMenuCalendarDays(value: string): FilterMenuCalendarDay[];
-//# sourceMappingURL=filter-menu-calendar.d.ts.map

package/dist/types/components/TableSavedViews/index.d.ts

@@ -1,2 +0,0 @@
-export type { TableSavedView, TableSavedViewChangeDetail, TableSavedViewCreateDetail, TableSavedViewDiscardDetail, TableSavedViewRemoveDetail, TableSavedViewRenameDetail, TableSavedViewSaveDetail, } from './table-saved-views-types';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/components/TableSavedViews/table-saved-views-types.d.ts

@@ -1,24 +0,0 @@
-export interface TableSavedView {
-    id: string;
-    label: string;
-}
-export interface TableSavedViewChangeDetail {
-    viewId: string;
-}
-export interface TableSavedViewCreateDetail {
-    name: string;
-}
-export interface TableSavedViewRenameDetail {
-    viewId: string;
-    name: string;
-}
-export interface TableSavedViewRemoveDetail {
-    viewId: string;
-}
-export interface TableSavedViewSaveDetail {
-    viewId: string;
-}
-export interface TableSavedViewDiscardDetail {
-    viewId: string;
-}
-//# sourceMappingURL=table-saved-views-types.d.ts.map