{
  "$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"
    }
  ]
}