@ds-mo/ui 14.35.0 → 15.0.0

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

@@ -0,0 +1,566 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-preferences",
+  "title": "DataPreferences",
+  "description": "Compact data-view preferences dialog with Filters, Sort, Group, and Customize tabs.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/data-preferences",
+    "source": "src/wc/components/DataPreferences/DataPreferences.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Compact data-view preferences dialog with Filters, Sort, Group, and Customize tabs.",
+      "useWhen": [
+        "A narrow data toolbar or a user preference calls for one result-shaping control."
+      ],
+      "avoidWhen": [
+        "The application needs unrelated actions or a submitted form."
+      ],
+      "states": [
+        "The application owns all filter, sort, grouping, and field configuration values. Apply emitted changes to the data view and replace the matching preferences inputs.",
+        "The component owns popup visibility, active tab, positioning, and dismissal; embedded controls reuse the same content as their standalone popups.",
+        "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback.",
+        "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.",
+        "Embedded presentation delegates its active tab, draft state, Apply, Reset, and dismissal to the owning panel; it renders vertical filter and grouping content without a popup trigger.",
+        "Customize builds its catalog from fields. catalogReorderable defaults to true for a table: rows drag to reorder and the last visible entry stays locked. Pass false for a show-and-hide catalog, where rows are switches with no drag handle and every entry may be hidden.",
+        "catalogHeader overrides the catalog section header, which otherwise reads Columns whenever customizeOptions supply a second section. customizeLabel names the Customize menu, so a non-table surface can announce Customize view rather than Customize table.",
+        "Both catalog modes emit dsFieldsConfigChange with hiddenFieldIds and fieldOrder, so a consumer that never reorders can ignore fieldOrder and keep using hiddenFieldIds."
+      ],
+      "accessibility": [
+        "An icon-only Preferences trigger opens a named dialog. TabGroup owns section keyboard navigation; Escape and outside activation dismiss, returning focus to the trigger."
+      ],
+      "responsiveBehavior": [
+        "The popup fits the viewport and scrolls internally. The application chooses whether to show it instead of separate controls. Hide the table-owned Customize trigger while retaining column customization."
+      ],
+      "patterns": [],
+      "commonlyComposedWith": [
+        "component:ds-table",
+        "component:ds-data-toolbar",
+        "component:ds-filter-menu",
+        "component:ds-menu",
+        "component:ds-data-group",
+        "component:ds-tab-group"
+      ]
+    },
+    "api": {
+      "props": {
+        "activeFilterId": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "active-filter-id",
+          "required": false,
+          "mutable": false
+        },
+        "activeTab": {
+          "type": "PreferencesTab",
+          "resolvedType": "\"customize\" | \"filters\" | \"group\" | \"sort\"",
+          "attribute": "active-tab",
+          "default": "'filters'",
+          "required": false,
+          "mutable": false
+        },
+        "catalogHeader": {
+          "type": "string",
+          "resolvedType": "string | undefined",
+          "attribute": "catalog-header",
+          "required": false,
+          "mutable": false,
+          "description": "Section header above the catalog rows. Defaults to Columns when\ncustomizeOptions supply a second section, matching the table."
+        },
+        "catalogReorderable": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "catalog-reorderable",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Drag-reorder the catalog rows and keep the last visible entry locked, as a\ntable requires. Pass false for a catalog that only shows and hides, where\nevery entry may be hidden and rows carry no drag handle."
+        },
+        "customizeLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "customize-label",
+          "default": "'Customize table'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the Customize menu."
+        },
+        "customizeOptions": {
+          "type": "MenuItemData[]",
+          "resolvedType": "MenuItemData[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Additional toggle options in the column customizer."
+        },
+        "customizeSections": {
+          "type": "MenuSection[]",
+          "resolvedType": "MenuSection[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false
+        },
+        "embedded": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "embedded",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Render shared content without its popup or trigger."
+        },
+        "fieldOrder": {
+          "type": "string[]",
+          "resolvedType": "string[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false
+        },
+        "fields": {
+          "type": "DataField[]",
+          "resolvedType": "DataField[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false
+        },
+        "filters": {
+          "type": "FilterMenuFilter[]",
+          "resolvedType": "FilterMenuFilter[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false
+        },
+        "grouping": {
+          "type": "DataGroupingState | null",
+          "resolvedType": "DataGroupingState | null",
+          "default": "null",
+          "required": false,
+          "mutable": false
+        },
+        "groupingOptions": {
+          "type": "DataGroupOption[]",
+          "resolvedType": "DataGroupOption[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false
+        },
+        "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
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "default": "'Configure view'",
+          "required": false,
+          "mutable": false
+        },
+        "matchModes": {
+          "type": "FilterMenuMatchModes",
+          "resolvedType": "{ [x: string]: FilterMenuMatchMode | undefined; }",
+          "default": "{}",
+          "required": false,
+          "mutable": false
+        },
+        "sort": {
+          "type": "DataSortState | null",
+          "resolvedType": "DataSortState | null",
+          "default": "null",
+          "required": false,
+          "mutable": false
+        },
+        "sortColumns": {
+          "type": "TableColumn[]",
+          "resolvedType": "TableColumn[] | undefined",
+          "required": false,
+          "mutable": false,
+          "description": "Optional sort fields when they differ from customizable content."
+        },
+        "values": {
+          "type": "FilterMenuValues",
+          "resolvedType": "{ [x: string]: FilterMenuValue | undefined; }",
+          "default": "{}",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [
+        {
+          "name": "dsActiveFilterChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsCustomizeOptionChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsFieldsConfigChange",
+          "detail": "DataFieldsConfigChangeDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsFilterChange",
+          "detail": "FilterMenuChangeDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsFilterMatchModeChange",
+          "detail": "FilterMenuMatchModeChangeDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsFiltersClear",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsGroupChange",
+          "detail": "DataGroupingState",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsGroupClear",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsPreferencesTabChange",
+          "detail": "PreferencesTab",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsSortChange",
+          "detail": "DataSortChangeDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "activeFilterId": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "active-filter-id",
+        "required": false,
+        "mutable": false
+      },
+      "activeTab": {
+        "type": "PreferencesTab",
+        "resolvedType": "\"customize\" | \"filters\" | \"group\" | \"sort\"",
+        "attribute": "active-tab",
+        "default": "'filters'",
+        "required": false,
+        "mutable": false
+      },
+      "catalogHeader": {
+        "type": "string",
+        "resolvedType": "string | undefined",
+        "attribute": "catalog-header",
+        "required": false,
+        "mutable": false,
+        "description": "Section header above the catalog rows. Defaults to Columns when\ncustomizeOptions supply a second section, matching the table."
+      },
+      "catalogReorderable": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "catalog-reorderable",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Drag-reorder the catalog rows and keep the last visible entry locked, as a\ntable requires. Pass false for a catalog that only shows and hides, where\nevery entry may be hidden and rows carry no drag handle."
+      },
+      "customizeLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "customize-label",
+        "default": "'Customize table'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the Customize menu."
+      },
+      "customizeOptions": {
+        "type": "MenuItemData[]",
+        "resolvedType": "MenuItemData[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Additional toggle options in the column customizer."
+      },
+      "customizeSections": {
+        "type": "MenuSection[]",
+        "resolvedType": "MenuSection[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false
+      },
+      "embedded": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "embedded",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Render shared content without its popup or trigger."
+      },
+      "fieldOrder": {
+        "type": "string[]",
+        "resolvedType": "string[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false
+      },
+      "fields": {
+        "type": "DataField[]",
+        "resolvedType": "DataField[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false
+      },
+      "filters": {
+        "type": "FilterMenuFilter[]",
+        "resolvedType": "FilterMenuFilter[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false
+      },
+      "grouping": {
+        "type": "DataGroupingState | null",
+        "resolvedType": "DataGroupingState | null",
+        "default": "null",
+        "required": false,
+        "mutable": false
+      },
+      "groupingOptions": {
+        "type": "DataGroupOption[]",
+        "resolvedType": "DataGroupOption[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false
+      },
+      "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
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "default": "'Configure view'",
+        "required": false,
+        "mutable": false
+      },
+      "matchModes": {
+        "type": "FilterMenuMatchModes",
+        "resolvedType": "{ [x: string]: FilterMenuMatchMode | undefined; }",
+        "default": "{}",
+        "required": false,
+        "mutable": false
+      },
+      "sort": {
+        "type": "DataSortState | null",
+        "resolvedType": "DataSortState | null",
+        "default": "null",
+        "required": false,
+        "mutable": false
+      },
+      "sortColumns": {
+        "type": "TableColumn[]",
+        "resolvedType": "TableColumn[] | undefined",
+        "required": false,
+        "mutable": false,
+        "description": "Optional sort fields when they differ from customizable content."
+      },
+      "values": {
+        "type": "FilterMenuValues",
+        "resolvedType": "{ [x: string]: FilterMenuValue | undefined; }",
+        "default": "{}",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [
+      {
+        "name": "dsActiveFilterChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsCustomizeOptionChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsFieldsConfigChange",
+        "detail": "DataFieldsConfigChangeDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsFilterChange",
+        "detail": "FilterMenuChangeDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsFilterMatchModeChange",
+        "detail": "FilterMenuMatchModeChangeDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsFiltersClear",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsGroupChange",
+        "detail": "DataGroupingState",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsGroupClear",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsPreferencesTabChange",
+        "detail": "PreferencesTab",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsSortChange",
+        "detail": "DataSortChangeDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-data-preferences",
+      "react": "DsDataPreferences",
+      "vue": "DsDataPreferences",
+      "angular": "DsDataPreferences"
+    },
+    "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-preferences.js';",
+        "example": "<ds-data-preferences></ds-data-preferences>"
+      },
+      "react": {
+        "import": "import { DsDataPreferences } from '@ds-mo/ui/react';",
+        "example": "<DsDataPreferences />"
+      },
+      "vue": {
+        "import": "import { DsDataPreferences } from '@ds-mo/ui/vue';",
+        "example": "<DsDataPreferences />"
+      },
+      "angular": {
+        "import": "import { DsDataPreferences } from '@ds-mo/ui/angular/ds-data-preferences';",
+        "example": "<ds-data-preferences></ds-data-preferences>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: customizeOptions, customizeSections, fieldOrder, fields, filters, grouping, groupingOptions, hiddenFieldIds, matchModes, sort, sortColumns, values.",
+      "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",
+    "data-group",
+    "filter-menu",
+    "menu",
+    "tab-group",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/DataPreferences/DataPreferences.css",
+      "content": "@import '../../utils/radius.css';\n\n:host {\n  display: inline-flex;\n}\n\n.data-preferences {\n  position: fixed;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--ds-radius-menu);\n  width: min(var(--dimension-menu-width-lg), calc(100vw - var(--dimension-space-200)));\n  max-height: calc(100dvh - var(--dimension-space-400));\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-secondary);\n  box-shadow: var(--effect-shadow-elevated-floating);\n}\n\n.data-preferences::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-floating);\n  pointer-events: none;\n  z-index: 4;\n}\n\n.data-preferences__tabs {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  box-sizing: border-box;\n  flex: 0 0 var(--dimension-size-500);\n  min-block-size: var(--dimension-size-500);\n  padding: var(--dimension-space-050);\n  background: var(--color-background-primary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.data-preferences__body {\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n:host:has(.data-preferences-panel) {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n.data-preferences-panel {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  min-width: 0;\n}\n.data-preferences-panel .data-preferences__tabs {\n  flex: 0 0 auto;\n  padding: var(--dimension-space-200);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/DataPreferences/DataPreferences.tsx",
+      "content": "import type { DataField } from '../../utils/data-field';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type {\n  FilterMenuFilter,\n  FilterMenuValues,\n  FilterMenuMatchModes,\n  FilterMenuChangeDetail,\n  FilterMenuMatchModeChangeDetail,\n} from '../FilterMenu/FilterMenu';\nimport type {\n  TableColumn,\n  DataSortState,\n  DataSortChangeDetail,\n  DataGroupingState,\n  DataFieldsConfigChangeDetail,\n} from '../Table/table-types';\nimport type { DataGroupOption } from '../DataGroup/DataGroup';\nimport { dataSortMenuSections, nextDataSortStateFromMenuItem } from '../DataSort/data-sort-menu';\nimport {\n  tableColumnCustomizerLabel,\n  tableColumnCustomizerMenuItems,\n  tableDataColumns,\n  toggleTableColumnHidden,\n  resolveTableColumnOrder,\n} from '../Table/table-column-customizer';\nimport {\n  listCustomizerMenuItems,\n  resolveListOrder,\n  toggleListHidden,\n  type ListCustomizerOptions,\n} from '../../utils/list-customizer';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport { TOKEN_DEFAULTS } from '../../utils/token-defaults';\n\n/** Toggle-only catalog: every entry may hide and no row carries a drag handle. */\nconst TOGGLE_ONLY_CATALOG: ListCustomizerOptions = { minVisible: 0, reorderable: false };\n\nexport type PreferencesTab = 'filters' | 'sort' | 'group' | 'customize';\nlet preferencesSequence = 0;\n\n@Component({ tag: 'ds-data-preferences', styleUrl: 'DataPreferences.css', scoped: true })\nexport class DataPreferences {\n  @Element() el!: HTMLElement;\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  @Prop() filters: FilterMenuFilter[] = [];\n  @Prop() values: FilterMenuValues = {};\n  @Prop() matchModes: FilterMenuMatchModes = {};\n  @Prop() activeFilterId: string | undefined;\n  @Prop() fields: DataField[] = [];\n  /** Additional toggle options in the column customizer. */\n  @Prop() customizeOptions: MenuItemData[] = [];\n  @Prop() customizeSections: MenuSection[] = [];\n  /** Accessible name for the Customize menu. */\n  @Prop() customizeLabel: string = 'Customize table';\n  /**\n   * Section header above the catalog rows. Defaults to Columns when\n   * customizeOptions supply a second section, matching the table.\n   */\n  @Prop() catalogHeader?: string;\n  /**\n   * Drag-reorder the catalog rows and keep the last visible entry locked, as a\n   * table requires. Pass false for a catalog that only shows and hides, where\n   * every entry may be hidden and rows carry no drag handle.\n   */\n  @Prop() catalogReorderable: boolean = true;\n  @Event() dsCustomizeOptionChange!: EventEmitter<string>;\n  /** Optional sort fields when they differ from customizable content. */\n  @Prop() sortColumns?: TableColumn[];\n  @Prop() sort: DataSortState | null = null;\n  @Prop() groupingOptions: DataGroupOption[] = [];\n  @Prop() grouping: DataGroupingState | null = null;\n  @Prop() hiddenFieldIds: string[] = [];\n  @Prop() fieldOrder: string[] = [];\n  /** Render shared content without its popup or trigger. */\n  @Prop() embedded = false;\n  @Prop() activeTab: PreferencesTab = 'filters';\n  @Event() dsPreferencesTabChange!: EventEmitter<PreferencesTab>;\n  @Prop() label = 'Configure view';\n  @Event() dsFilterChange!: EventEmitter<FilterMenuChangeDetail>;\n  @Event() dsFilterMatchModeChange!: EventEmitter<FilterMenuMatchModeChangeDetail>;\n  @Event() dsActiveFilterChange!: EventEmitter<string>;\n  @Event() dsFiltersClear!: EventEmitter<void>;\n  @Event() dsSortChange!: EventEmitter<DataSortChangeDetail>;\n  @Event() dsGroupChange!: EventEmitter<DataGroupingState>;\n  @Event() dsGroupClear!: EventEmitter<void>;\n  @Event() dsFieldsConfigChange!: EventEmitter<DataFieldsConfigChangeDetail>;\n\n  /** Catalog rows as domain-neutral items, so a non-table catalog needs no column shape. */\n  private catalogItems(): { id: string; label: string }[] {\n    return tableDataColumns(this.fields).map(column => ({\n      id: column.id,\n      label: tableColumnCustomizerLabel(column),\n    }));\n  }\n  @State() private open = false;\n  @State() private tab: PreferencesTab = 'filters';\n  @State() private pos = { x: 0, y: 0 };\n  @State() private ready = false;\n  private readonly popupId = `ds-data-preferences-${++preferencesSequence}`;\n  private trigger?: HTMLDsButtonUnfilledElement;\n  private popup?: HTMLElement;\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.trigger ?? null,\n    getPopup: () => this.popup ?? null,\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchor, popup) => {\n      const collisionRect = resolveAnchoredOverlayBoundaryRect(anchor);\n      const pad = resolveCssLengthPx(TOKEN_DEFAULTS.space100, 8);\n      popup.style.maxWidth = `${Math.max(0, Math.min(window.innerWidth, collisionRect?.width ?? window.innerWidth) - pad * 2)}px`;\n      popup.style.maxHeight = `${Math.max(0, Math.min(window.innerHeight, collisionRect?.height ?? window.innerHeight) - pad * 2)}px`;\n      return {\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: popup.offsetWidth,\n        popupHeight: popup.offsetHeight,\n        side: 'bottom',\n        align: 'end',\n        sideOffsetPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, 4),\n        alignOffsetPx: 0,\n        viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space100, 8),\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect,\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.ready = true;\n    },\n    topLayer: true,\n    observeResize: true,\n    observeAnchorMotion: true,\n    liveUpdate: 'double-frame',\n  });\n  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.trigger ?? null,\n    getPopup: () => this.popup ?? null,\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.close(),\n  });\n  disconnectedCallback() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n  }\n  private close() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.popup?.matches(':popover-open')) this.popup.hidePopover();\n    this.open = false;\n    void this.trigger?.setFocus();\n  }\n  private toggle() {\n    if (this.open) {\n      this.close();\n      return;\n    }\n    this.open = true;\n    this.ready = false;\n    this.position.observe();\n    this.interaction.connect();\n    this.position.schedule(async () => {\n      await this.popup?.querySelector('ds-tab-group')?.componentOnReady?.();\n      requestAnimationFrame(() => {\n        if (this.open)\n          this.popup?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')?.focus();\n      });\n    });\n  }\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent) {\n    if (this.embedded || !this.open || event.defaultPrevented) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.close();\n    } else if (event.key === 'Tab' && this.interaction.tabLeavesPopup(event)) {\n      event.preventDefault();\n      this.close();\n      this.interaction.moveFocusAfterTab(event.shiftKey);\n    }\n  }\n  private forward<T>(event: CustomEvent<T>, emitter: EventEmitter<T>) {\n    event.stopPropagation();\n    emitter.emit(event.detail);\n  }\n  render() {\n    const currentTab = this.embedded ? this.activeTab : this.tab;\n    const tabs = ['filters', 'sort', 'group', 'customize'].map(id => ({\n      id,\n      label: id === 'filters' ? 'Filters' : id[0].toUpperCase() + id.slice(1),\n      panelId: `${this.popupId}-${id}`,\n    }));\n    return (\n      <Host>\n        {!this.embedded && (\n          <ds-tooltip label={this.label} side=\"bottom\" size=\"sm\">\n            <ds-button-unfilled\n              hasBorder={this.hasBorder}\n              ref={el => {\n                this.trigger = el;\n              }}\n              variant=\"icon\"\n              icon=\"Preferences\"\n              size=\"md\"\n              ariaLabel={this.label}\n              haspopup=\"dialog\"\n              expanded={this.open}\n              surfaceOpen={this.open}\n              controls={this.popupId}\n              onDsClick={() => this.toggle()}\n            />\n          </ds-tooltip>\n        )}\n        {(this.open || this.embedded) && (\n          <div\n            ref={el => {\n              this.popup = el;\n            }}\n            id={this.popupId}\n            popover={this.embedded ? undefined : 'manual'}\n            role={this.embedded ? undefined : 'dialog'}\n            aria-label={this.label}\n            class={{\n              'data-preferences': !this.embedded,\n              'data-preferences-panel': this.embedded,\n            }}\n            style={\n              this.embedded\n                ? undefined\n                : {\n                    left: `${this.pos.x}px`,\n                    top: `${this.pos.y}px`,\n                    visibility: this.ready ? 'visible' : 'hidden',\n                  }\n            }\n          >\n            <div class=\"data-preferences__tabs\">\n              <ds-tab-group\n                ariaLabel=\"Table preference sections\"\n                size=\"md\"\n                presentation={this.embedded ? 'segmented' : 'tabs'}\n                width={this.embedded ? 'fill' : 'hug'}\n                tabs={tabs}\n                value={currentTab}\n                onDsChange={event => {\n                  event.stopPropagation();\n                  this.tab = event.detail as PreferencesTab;\n                  this.dsPreferencesTabChange.emit(this.tab);\n                }}\n              />\n            </div>\n            <div\n              class=\"data-preferences__body\"\n              id={`${this.popupId}-${currentTab}`}\n              role=\"tabpanel\"\n              aria-label={tabs.find(tab => tab.id === currentTab)?.label}\n            >\n              <div hidden={currentTab !== 'filters'}>\n                <ds-filter-menu\n                  embedded\n                  vertical={this.embedded}\n                  applyRequired={!this.embedded}\n                  filters={this.filters}\n                  values={this.values}\n                  matchModes={this.matchModes}\n                  activeFilterId={this.activeFilterId}\n                  footerLayout=\"categories-clear\"\n                  onDsChange={e => this.forward(e, this.dsFilterChange)}\n                  onDsMatchModeChange={e => this.forward(e, this.dsFilterMatchModeChange)}\n                  onDsActiveFilterChange={e => this.forward(e, this.dsActiveFilterChange)}\n                  onDsClear={e => this.forward(e, this.dsFiltersClear)}\n                />\n              </div>\n              {currentTab === 'sort' && (\n                <ds-menu\n                  embedded\n                  menuLabel=\"Sort table\"\n                  sections={dataSortMenuSections(this.sortColumns ?? this.fields, this.sort)}\n                  onDsSelect={e => {\n                    e.stopPropagation();\n                    this.dsSortChange.emit({\n                      sort: nextDataSortStateFromMenuItem(\n                        this.sortColumns ?? this.fields,\n                        this.sort,\n                        e.detail\n                      ),\n                    });\n                  }}\n                />\n              )}\n              {currentTab === 'group' && (\n                <ds-data-group\n                  embedded\n                  vertical={this.embedded}\n                  options={this.groupingOptions}\n                  grouping={this.grouping}\n                  onDsGroupChange={e => this.forward(e, this.dsGroupChange)}\n                  onDsClear={e => this.forward(e, this.dsGroupClear)}\n                />\n              )}\n              {currentTab === 'customize' && (\n                <ds-menu\n                  embedded\n                  menuLabel={this.customizeLabel}\n                  sections={[\n                    ...(this.fields.length\n                      ? [\n                          {\n                            header:\n                              this.catalogHeader ??\n                              (this.customizeOptions.length ? 'Columns' : undefined),\n                            items: this.catalogReorderable\n                              ? tableColumnCustomizerMenuItems(\n                                  this.fields,\n                                  this.hiddenFieldIds,\n                                  this.fieldOrder\n                                )\n                              : listCustomizerMenuItems(\n                                  this.catalogItems(),\n                                  this.hiddenFieldIds,\n                                  this.fieldOrder,\n                                  TOGGLE_ONLY_CATALOG\n                                ),\n                          },\n                        ]\n                      : []),\n                    ...this.customizeSections,\n                    ...(this.customizeOptions.length\n                      ? [{ header: 'Options', items: this.customizeOptions }]\n                      : []),\n                  ]}\n                  onDsSelect={e => {\n                    e.stopPropagation();\n                    if (!e.detail.value || e.detail.isInactive) return;\n                    if (\n                      [\n                        ...this.customizeOptions,\n                        ...this.customizeSections.flatMap(section =>\n                          'items' in section ? section.items : []\n                        ),\n                      ].some(option => option.value === e.detail.value)\n                    ) {\n                      this.dsCustomizeOptionChange.emit(e.detail.value);\n                      return;\n                    }\n                    if (!this.catalogReorderable) {\n                      const ids = this.catalogItems().map(item => item.id);\n                      this.dsFieldsConfigChange.emit({\n                        hiddenFieldIds: toggleListHidden(\n                          ids,\n                          this.hiddenFieldIds,\n                          e.detail.value,\n                          TOGGLE_ONLY_CATALOG\n                        ),\n                        fieldOrder: resolveListOrder(ids, this.fieldOrder),\n                      });\n                      return;\n                    }\n                    this.dsFieldsConfigChange.emit({\n                      hiddenFieldIds: toggleTableColumnHidden(\n                        this.fields,\n                        this.hiddenFieldIds,\n                        e.detail.value\n                      ),\n                      fieldOrder: resolveTableColumnOrder(this.fields, this.fieldOrder),\n                    });\n                  }}\n                  onDsReorder={e => {\n                    e.stopPropagation();\n                    if (!this.catalogReorderable) return;\n                    this.dsFieldsConfigChange.emit({\n                      hiddenFieldIds: this.hiddenFieldIds,\n                      fieldOrder: e.detail.items\n                        .filter(item => item.reorderable)\n                        .map(item => item.value!)\n                        .filter(Boolean),\n                    });\n                  }}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}