@ds-mo/ui 14.36.0 → 15.1.0

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

@@ -0,0 +1,399 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-customize",
+  "title": "DataCustomize",
+  "description": "Trigger and menu that shows, hides and optionally reorders the data points a view renders.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/data-customize",
+    "source": "src/wc/components/DataCustomize/DataCustomize.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Trigger and menu that shows, hides and optionally reorders the data points a view renders.",
+      "useWhen": [
+        "A card list, map overlay or other non-table view lets the viewer choose which data points appear.",
+        "A toolbar needs Customize as a peer of Filter, Sort and Group rather than a tab inside Preferences."
+      ],
+      "avoidWhen": [
+        "The view is a ds-table. Table owns its column customizer through columnCustomizer, which locks the last visible column and reorders columns."
+      ],
+      "alternatives": [
+        {
+          "when": "The choice is one submitted form value.",
+          "component": "component:ds-select",
+          "reason": "Select owns form-value and listbox semantics rather than view customization."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-data-toolbar",
+        "component:ds-menu",
+        "component:ds-button-unfilled"
+      ],
+      "patterns": [
+        "pattern:menu-trigger"
+      ],
+      "accessibility": [
+        "The trigger and menu share an accessible name derived from the visible label unless the application supplies a more contextual name.",
+        "Rows are switches, so each one announces its own checked state."
+      ],
+      "states": [
+        "reorderable is off by default, so rows are switches with no drag handle. Turn it on only where a display order exists.",
+        "minVisible is zero by default, so every field may be hidden. Raise it when the view needs a data point to stay visible.",
+        "catalogHeader labels the field rows; it is omitted unless options supply a second section, in which case it defaults to Data.",
+        "options render as their own Options section and emit dsOptionChange rather than a field config change.",
+        "dsFieldsConfigChange emits hiddenFieldIds and fieldOrder together, so a consumer that never reorders can ignore fieldOrder."
+      ],
+      "responsiveBehavior": [
+        "The owning standalone data toolbar determines when the trigger becomes icon-only; its accessible name and focus tooltip preserve the action label."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign the field catalog and configuration arrays as JavaScript properties. Apply field visibility and order changes to the view, then replace the controlled inputs; handle extra option changes separately."
+        ],
+        "react": [
+          "Keep field visibility and display order in application state, pass new array references after changes, and use the same state to render the view."
+        ],
+        "angular": [
+          "Bind the field catalog and configuration arrays as properties through the generated adapter. Replace the controlled configuration from event.detail and keep extra option state in the application."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook review states",
+          "path": "src/wc/components/DataCustomize/DataCustomize.stories.ts"
+        },
+        {
+          "label": "Toolbar composition owner",
+          "path": "src/wc/components/DataToolbar/DataToolbar.agent.json"
+        },
+        {
+          "label": "Shared catalog state",
+          "path": "src/wc/utils/list-customizer.ts"
+        }
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": [
+              "hasBorder"
+            ]
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "ariaLabel": {
+          "type": "string | null",
+          "resolvedType": "null | string",
+          "attribute": "aria-label",
+          "default": "null",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the trigger and menu."
+        },
+        "catalogHeader": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "catalog-header",
+          "required": false,
+          "mutable": false,
+          "description": "Section header above the catalog rows. Omitted when there is no second section."
+        },
+        "fieldOrder": {
+          "type": "string[]",
+          "resolvedType": "string[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled display order. Ids missing from it keep catalog order."
+        },
+        "fields": {
+          "type": "DataField[]",
+          "resolvedType": "DataField[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Catalog of data points the view can render."
+        },
+        "hasBorder": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "has-border",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Show the trigger border."
+        },
+        "hiddenFieldIds": {
+          "type": "string[]",
+          "resolvedType": "string[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled hidden field ids."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "default": "'Customize'",
+          "required": false,
+          "mutable": false,
+          "description": "Visible trigger label. Collapses to the icon when space is tight."
+        },
+        "minVisible": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "min-visible",
+          "default": "0",
+          "required": false,
+          "mutable": false,
+          "description": "Fields that must stay visible. Zero by default, so a view whose identity\nlives outside this catalog can hide every entry in it."
+        },
+        "options": {
+          "type": "MenuItemData[]",
+          "resolvedType": "MenuItemData[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Extra switch rows rendered in their own Options section."
+        },
+        "optionsHeader": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "options-header",
+          "default": "'Options'",
+          "required": false,
+          "mutable": false,
+          "description": "Header for the options section."
+        },
+        "reorderable": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "reorderable",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Drag-reorder the catalog rows. Off by default: most surfaces only show and\nhide, and a card layout has no column order to express."
+        }
+      },
+      "events": [
+        {
+          "name": "dsFieldsConfigChange",
+          "detail": "DataCustomizeChangeDetail",
+          "bubbles": false,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsOptionChange",
+          "detail": "string",
+          "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."
+      },
+      "catalogHeader": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "catalog-header",
+        "required": false,
+        "mutable": false,
+        "description": "Section header above the catalog rows. Omitted when there is no second section."
+      },
+      "fieldOrder": {
+        "type": "string[]",
+        "resolvedType": "string[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled display order. Ids missing from it keep catalog order."
+      },
+      "fields": {
+        "type": "DataField[]",
+        "resolvedType": "DataField[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Catalog of data points the view can render."
+      },
+      "hasBorder": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "has-border",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Show the trigger border."
+      },
+      "hiddenFieldIds": {
+        "type": "string[]",
+        "resolvedType": "string[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled hidden field ids."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "default": "'Customize'",
+        "required": false,
+        "mutable": false,
+        "description": "Visible trigger label. Collapses to the icon when space is tight."
+      },
+      "minVisible": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "min-visible",
+        "default": "0",
+        "required": false,
+        "mutable": false,
+        "description": "Fields that must stay visible. Zero by default, so a view whose identity\nlives outside this catalog can hide every entry in it."
+      },
+      "options": {
+        "type": "MenuItemData[]",
+        "resolvedType": "MenuItemData[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Extra switch rows rendered in their own Options section."
+      },
+      "optionsHeader": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "options-header",
+        "default": "'Options'",
+        "required": false,
+        "mutable": false,
+        "description": "Header for the options section."
+      },
+      "reorderable": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "reorderable",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Drag-reorder the catalog rows. Off by default: most surfaces only show and\nhide, and a card layout has no column order to express."
+      }
+    },
+    "events": [
+      {
+        "name": "dsFieldsConfigChange",
+        "detail": "DataCustomizeChangeDetail",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsOptionChange",
+        "detail": "string",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [
+      {
+        "name": "setFocus",
+        "signature": "setFocus() => Promise<void>"
+      }
+    ],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-data-customize",
+      "react": "DsDataCustomize",
+      "vue": "DsDataCustomize",
+      "angular": "DsDataCustomize"
+    },
+    "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-customize.js';",
+        "example": "<ds-data-customize></ds-data-customize>"
+      },
+      "react": {
+        "import": "import { DsDataCustomize } from '@ds-mo/ui/react';",
+        "example": "<DsDataCustomize />"
+      },
+      "vue": {
+        "import": "import { DsDataCustomize } from '@ds-mo/ui/vue';",
+        "example": "<DsDataCustomize />"
+      },
+      "angular": {
+        "import": "import { DsDataCustomize } from '@ds-mo/ui/angular/ds-data-customize';",
+        "example": "<ds-data-customize></ds-data-customize>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fieldOrder, fields, hiddenFieldIds, options.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.5.1",
+          "@ds-mo/icons ^8.1.0"
+        ],
+        "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/DataCustomize/DataCustomize.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/DataCustomize/DataCustomize.tsx",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { DataField } from '../../utils/data-field';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n  listCustomizerMenuItems,\n  resolveListOrder,\n  toggleListHidden,\n  type ListCustomizerOptions,\n} from '../../utils/list-customizer';\n\nexport interface DataCustomizeChangeDetail {\n  /** Fields the viewer has hidden, in the order they were hidden. */\n  hiddenFieldIds: string[];\n  /** Field ids in display order. Unchanged unless the catalog reorders. */\n  fieldOrder: string[];\n}\n\nlet dataCustomizeSeq = 0;\n\n/**\n * Show, hide and optionally reorder the data points a view renders.\n *\n * The table owns its own column customizer inside the caption, because a table\n * locks its last visible column and reorders columns. This control is the same\n * catalog for every other surface — a card list, a map overlay — where the\n * fields are independent and usually only show and hide.\n */\n@Component({\n  tag: 'ds-data-customize',\n  styleUrl: 'DataCustomize.css',\n  scoped: true,\n})\nexport class DataCustomize {\n  @Element() private el!: HTMLElement;\n\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  /** Catalog of data points the view can render. */\n  @Prop() fields: DataField[] = [];\n  /** Controlled hidden field ids. */\n  @Prop() hiddenFieldIds: string[] = [];\n  /** Controlled display order. Ids missing from it keep catalog order. */\n  @Prop() fieldOrder: string[] = [];\n  /**\n   * Drag-reorder the catalog rows. Off by default: most surfaces only show and\n   * hide, and a card layout has no column order to express.\n   */\n  @Prop() reorderable: boolean = false;\n  /**\n   * Fields that must stay visible. Zero by default, so a view whose identity\n   * lives outside this catalog can hide every entry in it.\n   */\n  @Prop() minVisible: number = 0;\n  /** Section header above the catalog rows. Omitted when there is no second section. */\n  @Prop() catalogHeader?: string;\n  /** Extra switch rows rendered in their own Options section. */\n  @Prop() options: MenuItemData[] = [];\n  /** Header for the options section. */\n  @Prop() optionsHeader: string = 'Options';\n  /** Accessible name for the trigger and menu. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Visible trigger label. Collapses to the icon when space is tight. */\n  @Prop() label: string = 'Customize';\n\n  @Event({ bubbles: false }) dsFieldsConfigChange!: EventEmitter<DataCustomizeChangeDetail>;\n  @Event({ bubbles: false }) dsOptionChange!: EventEmitter<string>;\n\n  @State() private menuOpen = false;\n  @State() private menuSurfaceOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly componentId = `ds-data-customize-${++dataCustomizeSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly menuId = `${this.componentId}-menu`;\n\n  @Method()\n  async setFocus() {\n    const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n      `#${CSS.escape(this.triggerId)}`\n    );\n    await trigger?.setFocus?.();\n  }\n\n  private get customizerOptions(): ListCustomizerOptions {\n    return { minVisible: this.minVisible, reorderable: this.reorderable };\n  }\n\n  private get catalog(): { id: string; label: string }[] {\n    return this.fields.map(field => ({\n      id: field.id,\n      label: field.label.trim() || field.accessibleLabel?.trim() || field.id,\n    }));\n  }\n\n  private get sections(): MenuSection[] {\n    const rows = listCustomizerMenuItems(\n      this.catalog,\n      this.hiddenFieldIds,\n      this.fieldOrder,\n      this.customizerOptions\n    );\n\n    return [\n      ...(rows.length\n        ? [\n            {\n              header: this.catalogHeader ?? (this.options.length ? 'Data' : undefined),\n              items: rows,\n            },\n          ]\n        : []),\n      ...(this.options.length ? [{ header: this.optionsHeader, items: this.options }] : []),\n    ];\n  }\n\n  render() {\n    const name = this.ariaLabel?.trim() || this.label?.trim() || 'Customize';\n    const empty = this.fields.length === 0 && this.options.length === 0;\n\n    return (\n      <Host hidden={empty ? true : undefined}>\n        {empty ? null : (\n          <ds-button-unfilled\n            hasBorder={this.hasBorder}\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"ViewMenu\"\n            label={this.label}\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label={name}\n            haspopup=\"menu\"\n            collapseLabel={true}\n            expanded={this.menuOpen}\n            surfaceOpen={this.menuSurfaceOpen}\n            controls={this.menuId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              this.toggle(event.detail.detail === 0);\n            }}\n          />\n        )}\n        {empty ? null : (\n          <ds-menu\n            id={this.menuId}\n            open={this.menuOpen}\n            anchorId={this.triggerId}\n            align=\"start\"\n            side=\"bottom\"\n            menuLabel={name}\n            selectionMode=\"none\"\n            initialFocusVisible={this.initialFocusVisible}\n            sections={this.sections}\n            onDsClose={() => this.close()}\n            onDsAfterClose={() => {\n              if (!this.menuOpen) this.menuSurfaceOpen = false;\n            }}\n            onDsSelect={event => this.handleSelect(event.detail)}\n            onDsReorder={event => this.handleReorder(event.detail.items)}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private toggle(fromKeyboard = false): void {\n    if (this.menuOpen) this.close();\n    else this.open(fromKeyboard);\n  }\n\n  private open(fromKeyboard = false): void {\n    if (this.menuOpen) return;\n    this.initialFocusVisible = fromKeyboard;\n    this.menuOpen = true;\n    this.menuSurfaceOpen = true;\n  }\n\n  private close(): void {\n    this.menuOpen = false;\n  }\n\n  private handleSelect(item: MenuItemData): void {\n    const value = item.value;\n    if (!value || item.isInactive) return;\n\n    if (this.options.some(option => option.value === value)) {\n      this.dsOptionChange.emit(value);\n      return;\n    }\n\n    const ids = this.catalog.map(entry => entry.id);\n    this.dsFieldsConfigChange.emit({\n      hiddenFieldIds: toggleListHidden(ids, this.hiddenFieldIds, value, this.customizerOptions),\n      fieldOrder: resolveListOrder(ids, this.fieldOrder),\n    });\n  }\n\n  private handleReorder(items: MenuItemData[]): void {\n    if (!this.reorderable) return;\n\n    // Menu reports the new order of the reorderable run. resolveListOrder\n    // rebuilds the full order from it, appending anything the run omitted.\n    const next = items\n      .filter(item => item.reorderable && item.value)\n      .map(item => item.value as string);\n    if (next.length === 0) return;\n\n    this.dsFieldsConfigChange.emit({\n      hiddenFieldIds: this.hiddenFieldIds,\n      fieldOrder: resolveListOrder(\n        this.catalog.map(entry => entry.id),\n        next\n      ),\n    });\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/{table-filter.json → data-filter.json}

@@ -1,21 +1,21 @@
 {
   "$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, searchable non-date filter options, accessible defaults, and compact-caption behavior while the application controls data and values.",
+  "name": "data-filter",
+  "title": "DataFilter",
+  "description": "Standard data-toolbar Filter control that owns the shared trigger, searchable non-date filter options, 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",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/data-filter",
+    "source": "src/wc/components/DataFilter/DataFilter.tsx",
     "intentStatus": "complete",
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Standard table-toolbar Filter control that owns the shared trigger, searchable non-date filter options, accessible defaults, and compact-caption behavior while the application controls data and values.",
+      "summary": "Standard data-toolbar Filter control that owns the shared trigger, searchable non-date filter options, 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 data 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, category navigation, or responsive treatment."
       ],
       "avoidWhen": [
@@ -25,16 +25,16 @@
       ],
       "alternatives": [
         {
-          "when": "A non-table surface needs the generic filter interaction or custom trigger recipe.",
+          "when": "A surface needs a custom filter trigger recipe.",
           "component": "component:ds-filter-menu",
-          "reason": "FilterMenu exposes generic trigger geometry and popup positioning rather than the fixed table-toolbar recipe."
+          "reason": "FilterMenu exposes generic trigger geometry and popup positioning rather than the standard data-toolbar recipe."
         }
       ],
       "commonlyComposedWith": [
         "component:ds-table",
-        "component:ds-table-toolbar",
-        "component:ds-table-saved-views",
-        "component:ds-table-sort",
+        "component:ds-data-toolbar",
+        "component:ds-data-saved-views",
+        "component:ds-data-sort",
         "component:ds-filter-menu"
       ],
       "patterns": [
@@ -59,8 +59,8 @@
         "Apply-required filtering stages edits locally, including match mode. Clear immediately clears all filters and discards pending edits. The footer appears when filters are selected or applied; Apply stays in place and inactive without pending changes; applying emits controlled changes. Closing discards unapplied edits."
       ],
       "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, exposes its visible label through a hover and keyboard-focus tooltip, and the Filters icon remains neutral with active criteria."
+        "Place the control in the trailing region of ds-data-toolbar.",
+        "In a compact table caption or standalone data toolbar, the trigger becomes icon-only, exposes its visible label through a hover and keyboard-focus tooltip, and the Filters icon remains neutral with active criteria."
       ],
       "frameworkCaveats": {
         "customElements": [
@@ -70,19 +70,44 @@
           "Keep filters, values, and matchModes in application state and replace them from the typed dsChange, dsMatchModeChange, and dsClear events."
         ],
         "angular": [
-          "Import the generated DsTableFilter adapter, bind filters, values, and matchModes, and handle dsChange, dsMatchModeChange, dsClear, and dsActiveFilterChange."
+          "Import the generated DsDataFilter adapter, bind filters, values, and matchModes, and handle dsChange, dsMatchModeChange, dsClear, and dsActiveFilterChange."
         ]
       },
       "references": [
         {
           "label": "Storybook review states",
-          "path": "src/wc/components/TableFilter/TableFilter.stories.ts"
+          "path": "src/wc/components/DataFilter/DataFilter.stories.ts"
         },
         {
           "label": "Toolbar composition owner",
-          "path": "src/wc/components/TableToolbar/TableToolbar.agent.json"
+          "path": "src/wc/components/DataToolbar/DataToolbar.agent.json"
         }
-      ]
+      ],
+      "styling": {
+        "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+            "props": [
+              "hasBorder"
+            ]
+          },
+          {
+            "properties": [
+              "border-radius"
+            ],
+            "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
     },
     "api": {
       "props": {
@@ -435,35 +460,35 @@
     "methods": [],
     "slots": [],
     "exports": {
-      "customElement": "ds-table-filter",
-      "react": "DsTableFilter",
-      "vue": "DsTableFilter",
-      "angular": "DsTableFilter"
+      "customElement": "ds-data-filter",
+      "react": "DsDataFilter",
+      "vue": "DsDataFilter",
+      "angular": "DsDataFilter"
     },
     "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>"
+        "import": "import '@ds-mo/ui/dist/components/ds-data-filter.js';",
+        "example": "<ds-data-filter></ds-data-filter>"
       },
       "react": {
-        "import": "import { DsTableFilter } from '@ds-mo/ui/react';",
-        "example": "<DsTableFilter />"
+        "import": "import { DsDataFilter } from '@ds-mo/ui/react';",
+        "example": "<DsDataFilter />"
       },
       "vue": {
-        "import": "import { DsTableFilter } from '@ds-mo/ui/vue';",
-        "example": "<DsTableFilter />"
+        "import": "import { DsDataFilter } from '@ds-mo/ui/vue';",
+        "example": "<DsDataFilter />"
       },
       "angular": {
-        "import": "import { DsTableFilter } from '@ds-mo/ui/angular/ds-table-filter';",
-        "example": "<ds-table-filter></ds-table-filter>"
+        "import": "import { DsDataFilter } from '@ds-mo/ui/angular/ds-data-filter';",
+        "example": "<ds-data-filter></ds-data-filter>"
       },
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: filters, matchModes, values.",
       "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."
       }
@@ -478,13 +503,13 @@
   ],
   "files": [
     {
-      "path": "src/wc/components/TableFilter/TableFilter.css",
+      "path": "src/wc/components/DataFilter/DataFilter.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  FilterMenuMatchModeChangeDetail,\n  FilterMenuMatchModes,\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  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  @Prop() filters: FilterMenuFilter[] = [];\n  /** Controlled values keyed by filter id. */\n  @Prop() values: FilterMenuValues = {};\n  /** Controlled any/all match mode keyed by multiple-choice filter id. Defaults to any. */\n  @Prop() matchModes: FilterMenuMatchModes = {};\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  /** Placeholder shown in each non-date option search header. */\n  @Prop() searchPlaceholder: string = 'Search';\n  /** Empty-state text shown when an option search has no matches. */\n  @Prop() noResultsText: string = 'No results';\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 any/all mode replacement for a multiple-choice filter. */\n  @Event() dsMatchModeChange!: EventEmitter<FilterMenuMatchModeChangeDetail>;\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          neutralTrigger\n          applyRequired\n          open={this.open}\n          triggerLabel={this.label}\n          showSelectedCount={false}\n          showIndicator={false}\n          icon=\"Filters\"\n          size=\"md\"\n          width=\"hug\"\n          hasBorder={this.hasBorder}\n          activeFill={false}\n          collapseLabel={true}\n          align=\"start\"\n          aria-label={name}\n          filters={this.filters}\n          values={this.values}\n          matchModes={this.matchModes}\n          activeFilterId={this.activeFilterId}\n          menuLabel={menuName}\n          categoriesLabel={this.categoriesLabel}\n          clearLabel={this.clearLabel}\n          searchPlaceholder={this.searchPlaceholder}\n          noResultsText={this.noResultsText}\n          footerLayout=\"categories-clear\"\n          onDsChange={event => this.forward(event, this.dsChange)}\n          onDsClear={event => this.forward(event, this.dsClear)}\n          onDsMatchModeChange={event => this.forward(event, this.dsMatchModeChange)}\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",
+      "path": "src/wc/components/DataFilter/DataFilter.tsx",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type {\n  FilterMenuChangeDetail,\n  FilterMenuFilter,\n  FilterMenuMatchModeChangeDetail,\n  FilterMenuMatchModes,\n  FilterMenuValues,\n} from '../FilterMenu/FilterMenu';\n\n@Component({\n  tag: 'ds-data-filter',\n  styleUrl: 'DataFilter.css',\n  scoped: true,\n})\nexport class DataFilter {\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true }) open: boolean = false;\n  /** Product-owned filter categories and option definitions. */\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  @Prop() filters: FilterMenuFilter[] = [];\n  /** Controlled values keyed by filter id. */\n  @Prop() values: FilterMenuValues = {};\n  /** Controlled any/all match mode keyed by multiple-choice filter id. Defaults to any. */\n  @Prop() matchModes: FilterMenuMatchModes = {};\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  /** Placeholder shown in each non-date option search header. */\n  @Prop() searchPlaceholder: string = 'Search';\n  /** Empty-state text shown when an option search has no matches. */\n  @Prop() noResultsText: string = 'No results';\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 any/all mode replacement for a multiple-choice filter. */\n  @Event() dsMatchModeChange!: EventEmitter<FilterMenuMatchModeChangeDetail>;\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          neutralTrigger\n          applyRequired\n          open={this.open}\n          triggerLabel={this.label}\n          showSelectedCount={false}\n          showIndicator={false}\n          icon=\"Filters\"\n          size=\"md\"\n          width=\"hug\"\n          hasBorder={this.hasBorder}\n          activeFill={false}\n          collapseLabel={true}\n          align=\"start\"\n          aria-label={name}\n          filters={this.filters}\n          values={this.values}\n          matchModes={this.matchModes}\n          activeFilterId={this.activeFilterId}\n          menuLabel={menuName}\n          categoriesLabel={this.categoriesLabel}\n          clearLabel={this.clearLabel}\n          searchPlaceholder={this.searchPlaceholder}\n          noResultsText={this.noResultsText}\n          footerLayout=\"categories-clear\"\n          onDsChange={event => this.forward(event, this.dsChange)}\n          onDsClear={event => this.forward(event, this.dsClear)}\n          onDsMatchModeChange={event => this.forward(event, this.dsMatchModeChange)}\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"
     }
   ]