@ds-mo/ui 14.16.0 → 14.17.0

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

@@ -0,0 +1,399 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table-filter",
+  "title": "TableFilter",
+  "description": "Standard table-toolbar Filter control that owns the shared trigger, filter menu UI, accessible defaults, and compact-caption behavior while the application controls data and values.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/table-filter",
+    "source": "src/wc/components/TableFilter/TableFilter.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Standard table-toolbar Filter control that owns the shared trigger, filter menu UI, accessible defaults, and compact-caption behavior while the application controls data and values.",
+      "useWhen": [
+        "A table toolbar should expose the standard singular Filter control and shared filter-menu interaction.",
+        "A product supplies filter definitions and controlled values but should not recreate the toolbar trigger, selected count, category navigation, or responsive treatment."
+      ],
+      "avoidWhen": [
+        "Filtering is unrelated to a table or structured result set; use ds-filter-menu directly.",
+        "The application expects the component to filter, fetch, persist, or otherwise transform rows.",
+        "A filter requires a product-specific editor that the shared filter category kinds cannot represent."
+      ],
+      "alternatives": [
+        {
+          "when": "A non-table surface needs the generic filter interaction or custom trigger recipe.",
+          "component": "component:ds-filter-menu",
+          "reason": "FilterMenu exposes generic trigger geometry and popup positioning rather than the fixed table-toolbar recipe."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-table",
+        "component:ds-table-toolbar",
+        "component:ds-table-saved-views",
+        "component:ds-table-sort",
+        "component:ds-filter-menu"
+      ],
+      "patterns": [
+        "pattern:menu-trigger"
+      ],
+      "accessibility": [
+        "The trigger is an icon-label combobox named Filter table unless a product aria-label supplies the table context. Compact caption widths preserve that accessible name after the visible label and chevron are omitted.",
+        "The popup retains ds-filter-menu category navigation, option semantics, focus entry, dismissal, and focus return.",
+        "Localize label, menuLabel, categoriesLabel, and clearLabel together so visible and accessible wording remains consistent."
+      ],
+      "states": [
+        "filters, values, and activeFilterId are controlled. dsChange, dsClear, and dsActiveFilterChange report intent without changing those inputs; the application applies query consequences and returns replacement values.",
+        "The visible trigger label defaults to singular Filter and appends the selected criterion count. The trigger uses resting secondary chrome at typical widths; active criteria promote only the visible label, without redefining generic button active semantics.",
+        "Popup visibility follows the same mutable open and dsOpenChange contract as ds-filter-menu."
+      ],
+      "responsiveBehavior": [
+        "Place the control in the trailing region of ds-table-toolbar.",
+        "Inside a named ds-table container narrower than 900px, the trigger becomes icon-only and active criteria promote the Filters icon to primary."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign filters, values, and activeFilterId as JavaScript properties. Replace controlled values in response to dsChange and dsClear."
+        ],
+        "react": [
+          "Keep filters and values in application state and replace values from the typed dsChange and dsClear events."
+        ],
+        "angular": [
+          "Import the generated DsTableFilter adapter, bind filters and values, and handle dsChange, dsClear, and dsActiveFilterChange."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook review states",
+          "path": "src/wc/components/TableFilter/TableFilter.stories.ts"
+        },
+        {
+          "label": "Toolbar composition owner",
+          "path": "src/wc/components/TableToolbar/TableToolbar.agent.json"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "activeFilterId": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "active-filter-id",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled category shown in the option pane."
+        },
+        "ariaLabel": {
+          "type": "string | null",
+          "resolvedType": "null | string",
+          "attribute": "aria-label",
+          "default": "null",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the trigger. Defaults to Filter table."
+        },
+        "categoriesLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "categories-label",
+          "default": "'Filter categories'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the category tab list."
+        },
+        "clearLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "clear-label",
+          "default": "'Clear'",
+          "required": false,
+          "mutable": false,
+          "description": "Footer action and date-clear accessible label."
+        },
+        "filters": {
+          "type": "FilterMenuFilter[]",
+          "resolvedType": "FilterMenuFilter[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Product-owned filter categories and option definitions."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "default": "'Filter'",
+          "required": false,
+          "mutable": false,
+          "description": "Visible trigger label."
+        },
+        "menuLabel": {
+          "type": "string | null",
+          "resolvedType": "null | string",
+          "attribute": "menu-label",
+          "default": "null",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the non-modal filter dialog. Defaults to the trigger name."
+        },
+        "open": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "open",
+          "default": "false",
+          "required": false,
+          "mutable": true,
+          "description": "Controlled popup visibility."
+        },
+        "values": {
+          "type": "FilterMenuValues",
+          "resolvedType": "{ [x: string]: FilterMenuValue | undefined; }",
+          "default": "{}",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled values keyed by filter id."
+        }
+      },
+      "events": [
+        {
+          "name": "dsActiveFilterChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Requests a controlled active-category replacement."
+        },
+        {
+          "name": "dsAfterClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted after exit motion and rendered popup removal complete."
+        },
+        {
+          "name": "dsChange",
+          "detail": "FilterMenuChangeDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Requests a controlled value replacement without closing the popup."
+        },
+        {
+          "name": "dsClear",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Requests that the consumer clear every filter value."
+        },
+        {
+          "name": "dsClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Requests that the controlled popup close."
+        },
+        {
+          "name": "dsOpenChange",
+          "detail": "boolean",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted whenever trigger activation changes popup visibility."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "activeFilterId": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "active-filter-id",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled category shown in the option pane."
+      },
+      "ariaLabel": {
+        "type": "string | null",
+        "resolvedType": "null | string",
+        "attribute": "aria-label",
+        "default": "null",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the trigger. Defaults to Filter table."
+      },
+      "categoriesLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "categories-label",
+        "default": "'Filter categories'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the category tab list."
+      },
+      "clearLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "clear-label",
+        "default": "'Clear'",
+        "required": false,
+        "mutable": false,
+        "description": "Footer action and date-clear accessible label."
+      },
+      "filters": {
+        "type": "FilterMenuFilter[]",
+        "resolvedType": "FilterMenuFilter[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Product-owned filter categories and option definitions."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "default": "'Filter'",
+        "required": false,
+        "mutable": false,
+        "description": "Visible trigger label."
+      },
+      "menuLabel": {
+        "type": "string | null",
+        "resolvedType": "null | string",
+        "attribute": "menu-label",
+        "default": "null",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the non-modal filter dialog. Defaults to the trigger name."
+      },
+      "open": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "open",
+        "default": "false",
+        "required": false,
+        "mutable": true,
+        "description": "Controlled popup visibility."
+      },
+      "values": {
+        "type": "FilterMenuValues",
+        "resolvedType": "{ [x: string]: FilterMenuValue | undefined; }",
+        "default": "{}",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled values keyed by filter id."
+      }
+    },
+    "events": [
+      {
+        "name": "dsActiveFilterChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Requests a controlled active-category replacement."
+      },
+      {
+        "name": "dsAfterClose",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted after exit motion and rendered popup removal complete."
+      },
+      {
+        "name": "dsChange",
+        "detail": "FilterMenuChangeDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Requests a controlled value replacement without closing the popup."
+      },
+      {
+        "name": "dsClear",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Requests that the consumer clear every filter value."
+      },
+      {
+        "name": "dsClose",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Requests that the controlled popup close."
+      },
+      {
+        "name": "dsOpenChange",
+        "detail": "boolean",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted whenever trigger activation changes popup visibility."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-table-filter",
+      "react": "DsTableFilter",
+      "vue": "DsTableFilter",
+      "angular": "DsTableFilter"
+    },
+    "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-filter.js';",
+        "example": "<ds-table-filter></ds-table-filter>"
+      },
+      "react": {
+        "import": "import { DsTableFilter } from '@ds-mo/ui/react';",
+        "example": "<DsTableFilter />"
+      },
+      "vue": {
+        "import": "import { DsTableFilter } from '@ds-mo/ui/vue';",
+        "example": "<DsTableFilter />"
+      },
+      "angular": {
+        "import": "import { DsTableFilter } from '@ds-mo/ui/angular/ds-table-filter';",
+        "example": "<ds-table-filter></ds-table-filter>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: filters, values.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.5.0",
+          "@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": [
+    "filter-menu"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/TableFilter/TableFilter.css",
+      "content": ":host {\n  display: inline-flex;\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n}\n\nds-filter-menu {\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  --ds-choice-popup-min-inline-size: var(--dimension-menu-width-xs);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/TableFilter/TableFilter.tsx",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type {\n  FilterMenuChangeDetail,\n  FilterMenuFilter,\n  FilterMenuValues,\n} from '../FilterMenu/FilterMenu';\n\n@Component({\n  tag: 'ds-table-filter',\n  styleUrl: 'TableFilter.css',\n  scoped: true,\n})\nexport class TableFilter {\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true }) open: boolean = false;\n  /** Product-owned filter categories and option definitions. */\n  @Prop() filters: FilterMenuFilter[] = [];\n  /** Controlled values keyed by filter id. */\n  @Prop() values: FilterMenuValues = {};\n  /** Controlled category shown in the option pane. */\n  @Prop() activeFilterId: string | undefined;\n  /** Visible trigger label. */\n  @Prop() label: string = 'Filter';\n  /** Accessible name for the trigger. Defaults to Filter table. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Accessible name for the non-modal filter dialog. Defaults to the trigger name. */\n  @Prop() menuLabel: string | null = null;\n  /** Accessible name for the category tab list. */\n  @Prop() categoriesLabel: string = 'Filter categories';\n  /** Footer action and date-clear accessible label. */\n  @Prop() clearLabel: string = 'Clear';\n\n  /** Requests a controlled value replacement without closing the popup. */\n  @Event() dsChange!: EventEmitter<FilterMenuChangeDetail>;\n  /** Requests that the consumer clear every filter value. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Requests a controlled active-category replacement. */\n  @Event() dsActiveFilterChange!: EventEmitter<string>;\n  /** Requests that the controlled popup close. */\n  @Event() dsClose!: EventEmitter<void>;\n  /** Emitted whenever trigger activation changes popup visibility. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n  /** Emitted after exit motion and rendered popup removal complete. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  render() {\n    const name = this.ariaLabel?.trim() || 'Filter table';\n    const menuName = this.menuLabel?.trim() || name;\n\n    return (\n      <Host>\n        <ds-filter-menu\n          open={this.open}\n          triggerLabel={this.label}\n          icon=\"Filters\"\n          size=\"md\"\n          width=\"hug\"\n          hasBorder={true}\n          activeFill={false}\n          collapseLabel={true}\n          aria-label={name}\n          filters={this.filters}\n          values={this.values}\n          activeFilterId={this.activeFilterId}\n          menuLabel={menuName}\n          categoriesLabel={this.categoriesLabel}\n          clearLabel={this.clearLabel}\n          onDsChange={event => this.forward(event, this.dsChange)}\n          onDsClear={event => this.forward(event, this.dsClear)}\n          onDsActiveFilterChange={event => this.forward(event, this.dsActiveFilterChange)}\n          onDsClose={event => this.forward(event, this.dsClose)}\n          onDsOpenChange={event => {\n            event.stopPropagation();\n            this.open = event.detail;\n            this.dsOpenChange.emit(event.detail);\n          }}\n          onDsAfterClose={event => this.forward(event, this.dsAfterClose)}\n        />\n      </Host>\n    );\n  }\n\n  private forward<T>(event: CustomEvent<T>, emitter: EventEmitter<T>): void {\n    event.stopPropagation();\n    emitter.emit(event.detail);\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/table-saved-views.json

@@ -43,7 +43,7 @@
         "The default view is a non-editable template. Application-owned custom views appear in a separate section with Rename and Remove actions. New view opens the naming dialog. When an editable selected view is dirty, that view row shows Save and negative Discard supporting actions while the footer remains dedicated to New view. The application decides which table state to capture, restore, and persist."
       ],
       "responsiveBehavior": [
-        "The control remains a single toolbar item and relies on Select, Menu, and Modal collision and viewport behavior. Its trigger is capped at the compact menu-width token so long view names truncate while the dirty dot stays visible. Its choice popup keeps that same token as the minimum width.",
+        "The control remains a single toolbar item and relies on Select, Menu, and Modal collision and viewport behavior. Its trigger hugs short view names and is capped at the compact menu-width token so long names truncate while the dirty dot stays visible. Its choice popup keeps that same token as the minimum width.",
         "Place it in the start region of ds-table-toolbar so the middle region can keep left-side and right-side controls on one spanning cluster."
       ],
       "frameworkCaveats": {

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

@@ -33,7 +33,7 @@
       "commonlyComposedWith": [
         "component:ds-table",
         "component:ds-table-toolbar",
-        "component:ds-filter-menu",
+        "component:ds-table-filter",
         "component:ds-select",
         "component:ds-button-unfilled",
         "component:ds-menu"
@@ -222,7 +222,7 @@
     },
     {
       "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';\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.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: 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: field.id,\n        isSelected: sort?.columnId === field.id,\n      })),\n    },\n    {\n      header: 'Direction',\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 = current?.columnId ?? fields[0]!.id;\n    return { columnId, direction };\n  }\n\n  if (!item.value || !fields.some(field => field.id === item.value)) return current ?? null;\n  if (current?.columnId === item.value) return current ?? null;\n  return { columnId: item.value, direction: current?.direction ?? 'asc' };\n}\n",
+      "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.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: 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: 'Direction',\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

@@ -28,7 +28,7 @@
         "component:ds-table-saved-views",
         "component:ds-divider",
         "component:ds-input",
-        "component:ds-filter-menu",
+        "component:ds-table-filter",
         "component:ds-select",
         "component:ds-table-sort",
         "component:ds-button-unfilled"
@@ -40,25 +40,25 @@
         "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. Slotted controls, values, menus, loading, persistence, and consequences remain controlled by the application. Use ds-table-saved-views when saved-view interaction needs the shared CompoMo behavior while application storage remains external.",
+        "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.",
         "The start cluster is followed by a decorative vertical divider, then the spanning middle region. The start cluster and divider hide when nothing is projected. Search is a dedicated slot that hides when nothing is projected. Empty leading or trailing clusters add no placeholder chrome. The middle region occupies remaining width so trailing controls stay at its inline end.",
         "Column customizer and data-mode switching stay table-owned caption actions. Do not recreate those menus in the toolbar."
       ],
       "responsiveBehavior": [
-        "The start cluster, search, trailing Filter/Group/Sort, and table caption trailing actions stay on one line. Saved views, Filter, Group, and Sort triggers cap at the compact menu-width token and truncate their labels, keeping a saved-view dirty dot visible. Group and Sort popups keep that same compact menu-width floor. The toolbar horizontally scrolls when its complete controls no longer fit.",
-        "Inside a named ds-table container narrower than 900px, Filter, Group, and Sort omit their labels and chevrons and become icon-only. Active filtering or grouping promotes the prefix icon to primary. Sort keeps resting secondary chrome. Table-owned Customize also becomes the icon-only Table menu button at that width.",
+        "The start cluster, search, trailing Filter/Group/Sort, 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, Group, and Sort triggers cap at the same token, and Group and Sort popups keep that compact menu-width floor. The toolbar horizontally scrolls when its complete controls no longer fit.",
+        "Inside a named ds-table container narrower than 900px, ds-table-filter and ds-table-sort omit their labels and chevrons and become icon-only. Group controls explicitly opt into the same treatment with collapseLabel. Active filtering or grouping promotes the prefix icon to primary. Sort keeps resting secondary chrome. Table-owned Customize also becomes the icon-only Table menu button at that width.",
         "The scrollbar is visually suppressed without removing touch, trackpad, mouse-wheel, or keyboard scrolling from the overflow container.",
         "Trailing controls remain grouped after leading controls; the toolbar does not collapse controls into an application-specific overflow menu."
       ],
       "frameworkCaveats": {
         "customElements": [
-          "Project saved views through slot=start, search through slot=search, additional left-side middle controls through slot=leading, and Filter, Group, and Sort through slot=trailing. Provide a label that names their table context when Table controls is insufficient."
+          "Project saved views through slot=start, search through slot=search, additional left-side middle controls through slot=leading, and ds-table-filter, Group, and ds-table-sort through slot=trailing. Set collapseLabel on the Group control and provide contextual accessible names when Table controls is insufficient."
         ],
         "react": [
-          "Set slot=start, slot=search, slot=leading, or slot=trailing on each child control; keep values and event handlers in the application."
+          "Set slot=start, slot=search, slot=leading, or slot=trailing on each child control. Use ds-table-filter for the standard Filter recipe, opt Group into collapseLabel, and keep values and event handlers in the application."
         ],
         "angular": [
-          "Set slot=start, slot=search, slot=leading, or slot=trailing on each child control and import the generated DsTableToolbar adapter alongside those controls."
+          "Set slot=start, slot=search, slot=leading, or slot=trailing on each child control, use DsTableFilter for the standard Filter recipe, opt Group into collapseLabel, and import the generated adapters."
         ]
       },
       "references": [
@@ -146,12 +146,12 @@
   "files": [
     {
       "path": "src/wc/components/TableToolbar/TableToolbar.css",
-      "content": ":host {\n  display: block;\n  min-inline-size: 0;\n  max-inline-size: 100%;\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.table-toolbar::-webkit-scrollbar {\n  display: none;\n}\n\n.table-toolbar__start,\n.table-toolbar__search,\n.table-toolbar__main,\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 1 var(--dimension-menu-width-xs);\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__main {\n  flex: 1 1 auto;\n  min-inline-size: min-content;\n}\n\n.table-toolbar__search {\n  flex: 0 1 var(--dimension-panel-width-xs);\n  max-inline-size: var(--dimension-panel-width-xs);\n}\n\n:host(:not(:has([slot='search']))) .table-toolbar__search {\n  display: none;\n}\n\n:host(:not(:has([slot='start']))) .table-toolbar__start,\n:host(:not(:has([slot='start']))) .table-toolbar__rule {\n  display: none;\n}\n\n.table-toolbar__leading {\n  flex: 1 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-filter-menu,\n.table-toolbar ds-select,\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__start slot,\n.table-toolbar__search slot,\n.table-toolbar__leading slot,\n.table-toolbar__trailing slot {\n  display: contents;\n}\n",
+      "content": ":host {\n  display: block;\n  min-inline-size: 0;\n  max-inline-size: 100%;\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.table-toolbar::-webkit-scrollbar {\n  display: none;\n}\n\n.table-toolbar__start,\n.table-toolbar__search,\n.table-toolbar__main,\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__main {\n  flex: 1 1 auto;\n  min-inline-size: min-content;\n}\n\n.table-toolbar__search {\n  flex: 0 1 var(--dimension-panel-width-xs);\n  max-inline-size: var(--dimension-panel-width-xs);\n}\n\n:host(:not(:has([slot='search']))) .table-toolbar__search {\n  display: none;\n}\n\n:host(:not(:has([slot='start']))) .table-toolbar__start,\n:host(:not(:has([slot='start']))) .table-toolbar__rule {\n  display: none;\n}\n\n.table-toolbar__leading {\n  flex: 1 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-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__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 } from '@stencil/core';\n\nconst CAPTION_CONTROL_SELECTOR = 'ds-filter-menu, ds-select';\n\n@Component({\n  tag: 'ds-table-toolbar',\n  styleUrl: 'TableToolbar.css',\n  scoped: true,\n})\nexport class TableToolbar {\n  @Element() private el!: HTMLElement;\n\n  /** Accessible name for the grouped table controls. */\n  @Prop() label: string = 'Table controls';\n\n  private captionControlObserver: MutationObserver | undefined;\n\n  componentDidLoad(): void {\n    this.connectCaptionControlObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.captionControlObserver?.disconnect();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"table-toolbar\" role=\"toolbar\" aria-label={this.label}>\n          <div class=\"table-toolbar__start\">\n            <slot name=\"start\" />\n          </div>\n          <ds-divider class=\"table-toolbar__rule\" orientation=\"vertical\" length=\"32px\" />\n          <div class=\"table-toolbar__main\">\n            <div class=\"table-toolbar__search\">\n              <slot name=\"search\" />\n            </div>\n            <div class=\"table-toolbar__leading\">\n              <slot name=\"leading\" />\n            </div>\n            <div class=\"table-toolbar__trailing\">\n              <slot name=\"trailing\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  private connectCaptionControlObserver(): void {\n    if (this.captionControlObserver || typeof MutationObserver === 'undefined') return;\n    this.captionControlObserver = new MutationObserver(this.syncCaptionControls);\n    this.captionControlObserver.observe(this.el, { childList: true, subtree: true });\n    this.syncCaptionControls();\n  }\n\n  private syncCaptionControls = () => {\n    for (const control of this.el.querySelectorAll<\n      HTMLElement & { collapseLabel?: boolean }\n    >(CAPTION_CONTROL_SELECTOR)) {\n      if (control.closest('ds-table-saved-views')) continue;\n      if (control.collapseLabel) continue;\n      control.collapseLabel = true;\n    }\n  };\n}\n",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ds-table-toolbar',\n  styleUrl: 'TableToolbar.css',\n  scoped: true,\n})\nexport class TableToolbar {\n  /** Accessible name for the grouped table controls. */\n  @Prop() label: string = 'Table controls';\n\n  render() {\n    return (\n      <Host>\n        <div class=\"table-toolbar\" role=\"toolbar\" aria-label={this.label}>\n          <div class=\"table-toolbar__start\">\n            <slot name=\"start\" />\n          </div>\n          <ds-divider class=\"table-toolbar__rule\" orientation=\"vertical\" length=\"32px\" />\n          <div class=\"table-toolbar__main\">\n            <div class=\"table-toolbar__search\">\n              <slot name=\"search\" />\n            </div>\n            <div class=\"table-toolbar__leading\">\n              <slot name=\"leading\" />\n            </div>\n            <div class=\"table-toolbar__trailing\">\n              <slot name=\"trailing\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -32,6 +32,7 @@
         "component:ds-pagination",
         "component:ds-table-toolbar",
         "component:ds-table-saved-views",
+        "component:ds-table-filter",
         "component:ds-table-sort",
         "component:ds-bar-action",
         "component:ds-button-unfilled",

package/dist/react/components.d.ts

@@ -66,6 +66,7 @@ export { DsSlider } from "./ds-slider.js";
 export { DsSwatchPicker } from "./ds-swatch-picker.js";
 export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
+export { DsTableFilter } from "./ds-table-filter.js";
 export { DsTableSavedViews } from "./ds-table-saved-views.js";
 export { DsTableSort } from "./ds-table-sort.js";
 export { DsTableToolbar } from "./ds-table-toolbar.js";

package/dist/react/components.js

@@ -67,6 +67,7 @@ export { DsSlider } from "./ds-slider.js";
 export { DsSwatchPicker } from "./ds-swatch-picker.js";
 export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
+export { DsTableFilter } from "./ds-table-filter.js";
 export { DsTableSavedViews } from "./ds-table-saved-views.js";
 export { DsTableSort } from "./ds-table-sort.js";
 export { DsTableToolbar } from "./ds-table-toolbar.js";

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

@@ -0,0 +1,17 @@
+/**
+ * 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 } 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>>;
+    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-filter.js

@@ -0,0 +1,19 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsTableFilter as DsTableFilterElement, defineCustomElement as defineDsTableFilter } from "@ds-mo/ui/dist/components/ds-table-filter.js";
+export const DsTableFilter = /*@__PURE__*/ createComponent({
+    tagName: 'ds-table-filter',
+    elementClass: DsTableFilterElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsChange: 'dsChange',
+        onDsClear: 'dsClear',
+        onDsActiveFilterChange: 'dsActiveFilterChange',
+        onDsClose: 'dsClose',
+        onDsOpenChange: 'dsOpenChange',
+        onDsAfterClose: 'dsAfterClose'
+    },
+    defineCustomElement: defineDsTableFilter
+});

package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts

@@ -100,7 +100,9 @@ export declare class ButtonUnfilled {
     private captionCompact;
     private buttonEl;
     private captionCompactDisconnect;
+    private hasLoaded;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     onCollapseLabelChange(): void;
     setFocus(): Promise<void>;

package/dist/types/components/FilterMenu/FilterMenu.d.ts

@@ -104,9 +104,11 @@ export declare class FilterMenu {
     private pendingInitialFocusVisible;
     private closeTimer;
     private captionCompactDisconnect;
+    private hasLoaded;
     private closingSnapshot;
     private readonly position;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     onCollapseLabelChange(): void;
     onOpenChange(isOpen: boolean): void;

package/dist/types/components/Select/Select.d.ts

@@ -133,9 +133,11 @@ export declare class Select {
     private observedFooterContentElement?;
     private footerMeasurementFrame?;
     private captionCompactDisconnect;
+    private hasLoaded;
     private createController;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
     componentDidRender(): void;
     disconnectedCallback(): void;
     onCollapseLabelChange(): void;