@ds-mo/ui 15.5.1 → 15.6.0

package/dist/mcp-data/registry/agent-activity.json

@@ -136,7 +136,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/agent-questionnaire.json

@@ -241,7 +241,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: answers, labels, questions.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/agent-response.json

@@ -239,7 +239,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: parts.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/agent-source-list.json

@@ -152,7 +152,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/agent-tool-call.json

@@ -232,7 +232,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: input, output.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/attachment-list.json

@@ -116,7 +116,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -168,7 +168,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -291,7 +291,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -334,7 +334,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/bar-action.json

@@ -236,7 +236,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/bar-nav.json

@@ -291,7 +291,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: tabs.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/bar-page-title.json

@@ -421,7 +421,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: actionItems, actions, primaryAction, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/bar-title.json

@@ -564,7 +564,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: actionItems, actions, breadcrumbs, primaryAction, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/bar-workflow.json

@@ -379,7 +379,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: steps, submitAction.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -181,7 +181,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/button-filled.json

@@ -695,7 +695,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/button-inverted.json

@@ -610,7 +610,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/button-unfilled.json

@@ -775,7 +775,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -251,7 +251,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/card-action-center.json

@@ -198,7 +198,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/card-chart.json

@@ -248,7 +248,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/card-navigation.json

@@ -261,7 +261,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/card-overview.json

@@ -376,7 +376,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: metrics, score.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/card-setting.json

@@ -322,7 +322,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/card-settings-scope.json

@@ -326,7 +326,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/chart-legend.json

@@ -277,7 +277,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -239,7 +239,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: definition.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/checkbox-group.json

@@ -217,7 +217,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -429,7 +429,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -337,7 +337,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/code-block.json

@@ -162,7 +162,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/conversation-list-item.json

@@ -281,7 +281,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/conversation-list-section.json

@@ -128,7 +128,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/conversation-list.json

@@ -90,7 +90,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -369,7 +369,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fieldOrder, fields, hiddenFieldIds, options.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -487,7 +487,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: filters, matchModes, values.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -351,7 +351,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: grouping, options.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -26,9 +26,9 @@
         "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.",
+        "Customize builds its catalog from fields. catalogReorderable defaults to true for a table: each row independently controls visibility and left-side pinning, pinned and unpinned sections constrain drag reorder to their own partition, and the last visible entry stays locked. Pass false for a show-and-hide catalog, where rows are switches with no drag handle or pin action 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."
+        "Both catalog modes emit dsFieldsConfigChange with hiddenFieldIds, fieldOrder, and pinnedFieldIds. Toggle-only catalogs preserve pin state unchanged; table catalogs report pin and partitioned order intent."
       ],
       "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."
@@ -204,6 +204,14 @@
           "required": false,
           "mutable": false
         },
+        "pinnedFieldIds": {
+          "type": "string[]",
+          "resolvedType": "string[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled user-pinned table-column identities. Ignored for toggle-only catalogs."
+        },
         "sort": {
           "type": "DataSortState | null",
           "resolvedType": "DataSortState | null",
@@ -433,6 +441,14 @@
         "required": false,
         "mutable": false
       },
+      "pinnedFieldIds": {
+        "type": "string[]",
+        "resolvedType": "string[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled user-pinned table-column identities. Ignored for toggle-only catalogs."
+      },
       "sort": {
         "type": "DataSortState | null",
         "resolvedType": "DataSortState | null",
@@ -554,10 +570,10 @@
         "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.",
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: customizeOptions, customizeSections, fieldOrder, fields, filters, grouping, groupingOptions, hiddenFieldIds, matchModes, pinnedFieldIds, sort, sortColumns, values.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
@@ -579,12 +595,12 @@
   "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",
+      "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  background: transparent;\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 { ConnectionTasks } from '../../utils/connection-tasks';\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 tasks = new ConnectionTasks(() => this.el.isConnected);\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.close(false);\n  }\n  private close(restoreFocus = true) {\n    this.tasks.cancel();\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.popup?.matches(':popover-open')) this.popup.hidePopover();\n    this.open = false;\n    this.ready = false;\n    if (restoreFocus) void this.trigger?.setFocus();\n  }\n  private toggle() {\n    if (!this.el.isConnected) return;\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      const focus = this.tasks.guard(() => {\n        this.tasks.frame(() => {\n          if (this.open)\n            this.popup?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')?.focus();\n        });\n      });\n      await this.popup?.querySelector('ds-tab-group')?.componentOnReady?.();\n      focus();\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",
+      "content": "import type { DataField } from '../../utils/data-field';\nimport type { MenuItemData, MenuItemToggleDetail, 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  tableColumnCustomizerSections,\n  tableDataColumns,\n  toggleTableColumnHidden,\n  reorderTableColumnPartition,\n  resolveTableFieldsConfiguration,\n  toggleTableColumnPinned,\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 { ConnectionTasks } from '../../utils/connection-tasks';\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  /** Controlled user-pinned table-column identities. Ignored for toggle-only catalogs. */\n  @Prop() pinnedFieldIds: 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\n  private customizeMenuSections(): MenuSection[] {\n    const catalogSections: MenuSection[] = !this.fields.length\n      ? []\n      : this.catalogReorderable\n        ? tableColumnCustomizerSections(\n            this.fields,\n            this.hiddenFieldIds,\n            this.fieldOrder,\n            this.pinnedFieldIds\n          ).map((section, index, sections) =>\n            index === 0 && sections.length === 1 && this.catalogHeader\n              ? { ...section, header: this.catalogHeader }\n              : section\n          )\n        : [\n            {\n              header: this.catalogHeader ?? (this.customizeOptions.length ? 'Columns' : undefined),\n              items: listCustomizerMenuItems(\n                this.catalogItems(),\n                this.hiddenFieldIds,\n                this.fieldOrder,\n                TOGGLE_ONLY_CATALOG\n              ),\n            },\n          ];\n    return [\n      ...catalogSections,\n      ...this.customizeSections,\n      ...(this.customizeOptions.length\n        ? [{ header: 'Options', items: this.customizeOptions }]\n        : []),\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 tasks = new ConnectionTasks(() => this.el.isConnected);\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.close(false);\n  }\n  private close(restoreFocus = true) {\n    this.tasks.cancel();\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.popup?.matches(':popover-open')) this.popup.hidePopover();\n    this.open = false;\n    this.ready = false;\n    if (restoreFocus) void this.trigger?.setFocus();\n  }\n  private toggle() {\n    if (!this.el.isConnected) return;\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      const focus = this.tasks.guard(() => {\n        this.tasks.frame(() => {\n          if (this.open)\n            this.popup?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')?.focus();\n        });\n      });\n      await this.popup?.querySelector('ds-tab-group')?.componentOnReady?.();\n      focus();\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={this.customizeMenuSections()}\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                        pinnedFieldIds: this.pinnedFieldIds,\n                      });\n                      return;\n                    }\n                    this.dsFieldsConfigChange.emit(\n                      resolveTableFieldsConfiguration(\n                        this.fields,\n                        toggleTableColumnHidden(this.fields, this.hiddenFieldIds, e.detail.value),\n                        this.fieldOrder,\n                        this.pinnedFieldIds\n                      )\n                    );\n                  }}\n                  onDsItemToggle={(e: CustomEvent<MenuItemToggleDetail>) => {\n                    e.stopPropagation();\n                    if (!this.catalogReorderable || !e.detail.item.value) return;\n                    if (e.detail.action?.id === 'visibility') {\n                      this.dsFieldsConfigChange.emit(\n                        resolveTableFieldsConfiguration(\n                          this.fields,\n                          toggleTableColumnHidden(\n                            this.fields,\n                            this.hiddenFieldIds,\n                            e.detail.item.value\n                          ),\n                          this.fieldOrder,\n                          this.pinnedFieldIds\n                        )\n                      );\n                      return;\n                    }\n                    if (e.detail.action?.id !== 'pin') return;\n                    this.dsFieldsConfigChange.emit(\n                      toggleTableColumnPinned(\n                        this.fields,\n                        this.hiddenFieldIds,\n                        this.fieldOrder,\n                        this.pinnedFieldIds,\n                        e.detail.item.value\n                      )\n                    );\n                  }}\n                  onDsReorder={e => {\n                    e.stopPropagation();\n                    if (!this.catalogReorderable) return;\n                    this.dsFieldsConfigChange.emit(\n                      reorderTableColumnPartition(\n                        this.fields,\n                        this.hiddenFieldIds,\n                        this.fieldOrder,\n                        this.pinnedFieldIds,\n                        e.detail.items\n                          .filter(item => item.reorderable)\n                          .map(item => item.value!)\n                          .filter(Boolean)\n                      )\n                    );\n                  }}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -418,7 +418,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: views.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -348,7 +348,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fields, selectedFieldIds.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -244,7 +244,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fields, sort.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -165,7 +165,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

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

@@ -208,7 +208,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."

package/dist/mcp-data/registry/empty-state.json

@@ -194,7 +194,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/tokens ^6.7.0",
           "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."