@ds-mo/ui 8.3.1 → 9.1.0

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "8.3.1",
+  "packageVersion": "9.1.0",
   "kind": "components",
   "entries": [
     {
@@ -29,7 +29,7 @@
           "component:ds-panel-nav",
           "component:ds-bar-nav",
           "component:ds-panel-tools",
-          "component:ds-shell-gradient-picker"
+          "component:ds-swatch-picker"
         ],
         "patterns": [
           "pattern:application-shell"
@@ -672,6 +672,9 @@
           "component:ds-menu",
           "component:ds-panel-tools"
         ],
+        "patterns": [
+          "pattern:menu-trigger"
+        ],
         "accessibility": [
           "Provide an explicit accessible name for every icon-only action.",
           "Use active state only for a persistent toggle or mode, and synchronize pressed semantics unless an owning composite exposes the selection state.",
@@ -2382,14 +2385,17 @@
           "component:ds-button-unfilled",
           "component:ds-panel-nav",
           "component:ds-switch",
-          "component:ds-shell-gradient-picker"
+          "component:ds-swatch-picker"
+        ],
+        "patterns": [
+          "pattern:menu-trigger"
         ],
         "accessibility": [
           "Anchor the menu to the control that opens it and return focus to that control when the menu closes.",
           "Open with visible initial focus only when the trigger was activated from the keyboard.",
           "Keep disabled items discoverable only when their unavailable state is meaningful.",
           "Switch rows use menuitemcheckbox semantics on the row; the nested ds-switch is an aria-hidden md presentation indicator.",
-          "A gradient-picker section changes the popup to a non-modal dialog so its radio group and ordinary preference buttons keep valid nested semantics; Tab moves between its controls, then leaves and closes at the popup boundary.",
+          "A swatch-picker section changes the popup to a non-modal dialog so its radio group and ordinary preference buttons keep valid nested semantics; Tab moves between its controls, then leaves and closes at the popup boundary.",
           "Use notification dots only as supplemental status and not as the sole indication of important information."
         ],
         "states": [
@@ -2397,9 +2403,10 @@
           "Use either flat items or sections, not both.",
           "After dsSelect from a switch row, update switchValue in the items property so the controlled indicator reflects the new state.",
           "Arrays, objects, and element anchors must be assigned as JavaScript properties.",
-          "Use one gradient-picker section in the user or account Appearance or Theme popup for the global AppShell wash preference; apply dsGradientSelect immediately without closing the popup."
+          "Use a swatch-picker section for a small curated visual preference and apply dsSwatchSelect immediately without closing the popup; the legacy gradient-picker section and dsGradientSelect remain compatibility-only."
         ],
         "responsiveBehavior": [
+          "Keep the default choice-cell anchor alignment so the first or last interactive row edge aligns with its trigger, matching Select; use popup-frame only for deliberate custom frame geometry.",
           "Choose placement relative to the trigger and allow the component to clamp the popup to the viewport.",
           "Avoid fixed widths that exceed narrow viewports."
         ],
@@ -2439,6 +2446,10 @@
             "type": "HTMLElement | undefined",
             "required": false
           },
+          "anchorAlignment": {
+            "type": "ChoicePopupAnchorAlignment",
+            "required": false
+          },
           "anchorId": {
             "type": "string | undefined",
             "required": false
@@ -2492,6 +2503,10 @@
           {
             "name": "dsSelect",
             "detail": "MenuItemData"
+          },
+          {
+            "name": "dsSwatchSelect",
+            "detail": "string"
           }
         ],
         "slots": []
@@ -2507,7 +2522,7 @@
       ],
       "componentDependencies": [
         "badge",
-        "shell-gradient-picker",
+        "swatch-picker",
         "switch",
         "text"
       ]
@@ -2560,66 +2575,6 @@
         "text"
       ]
     },
-    {
-      "id": "component:ds-pagination",
-      "tag": "ds-pagination",
-      "name": "pagination",
-      "title": "Pagination",
-      "summary": "Standalone page navigation with ellipsis for large ranges, sibling count control, and keyboard-accessible buttons.",
-      "intentStatus": "migration-pending",
-      "intent": null,
-      "api": {
-        "props": {
-          "isInactive": {
-            "type": "boolean",
-            "required": false
-          },
-          "nextPageLabel": {
-            "type": "string",
-            "required": false
-          },
-          "page": {
-            "type": "number",
-            "required": false
-          },
-          "paginationLabel": {
-            "type": "string",
-            "required": false
-          },
-          "previousPageLabel": {
-            "type": "string",
-            "required": false
-          },
-          "siblingCount": {
-            "type": "number",
-            "required": false
-          },
-          "totalPages": {
-            "type": "number",
-            "required": false
-          }
-        },
-        "events": [
-          {
-            "name": "dsPageChange",
-            "detail": "number"
-          }
-        ],
-        "slots": []
-      },
-      "exports": {
-        "customElement": "ds-pagination",
-        "react": "DsPagination",
-        "angular": "DsPagination"
-      },
-      "dependencies": [
-        "@ds-mo/ui",
-        "@ds-mo/tokens"
-      ],
-      "componentDependencies": [
-        "text"
-      ]
-    },
     {
       "id": "component:ds-panel-nav",
       "tag": "ds-panel-nav",
@@ -3817,12 +3772,14 @@
       "tag": "ds-shell-gradient-picker",
       "name": "shell-gradient-picker",
       "title": "ShellGradientPicker",
-      "summary": "The canonical compact control for selecting the single global AppShell chrome wash preference from fixed token-based presets.",
+      "summary": "Deprecated compatibility wrapper that maps the fixed AppShell wash presets into SwatchPicker.",
       "intentStatus": "complete",
       "intent": {
         "audience": "specialized",
-        "status": "stable",
-        "summary": "The canonical compact control for selecting the single global AppShell chrome wash preference from fixed token-based presets.",
+        "status": "deprecated",
+        "replacedBy": "component:ds-swatch-picker",
+        "replacementReason": "SwatchPicker now owns the same accessible interaction with a generic option model that supports both flat colors and gradients.",
+        "summary": "Deprecated compatibility wrapper that maps the fixed AppShell wash presets into SwatchPicker.",
         "useWhen": [
           "Adding the Appearance or Theme section to the application's user or account menu.",
           "Users must choose the global AppShell chrome treatment from none, cool, neutral, warm, or fresh."
@@ -3876,8 +3833,8 @@
         },
         "references": [
           {
-            "label": "Executable stories",
-            "path": "src/wc/components/ShellGradientPicker/ShellGradientPicker.stories.ts"
+            "label": "Replacement stories",
+            "path": "src/wc/components/SwatchPicker/SwatchPicker.stories.ts"
           },
           {
             "label": "AppShell gradient contract",
@@ -3918,7 +3875,7 @@
         "@ds-mo/tokens"
       ],
       "componentDependencies": [
-        "shell-gradient-swatch"
+        "swatch-picker"
       ]
     },
     {
@@ -3926,12 +3883,14 @@
       "tag": "ds-shell-gradient-swatch",
       "name": "shell-gradient-swatch",
       "title": "ShellGradientSwatch",
-      "summary": "Internal radio swatch used by ShellGradientPicker to preview one fixed AppShell chrome preset.",
+      "summary": "Deprecated internal compatibility component for one legacy AppShell gradient swatch.",
       "intentStatus": "complete",
       "intent": {
         "audience": "internal",
-        "status": "stable",
-        "summary": "Internal radio swatch used by ShellGradientPicker to preview one fixed AppShell chrome preset.",
+        "status": "deprecated",
+        "replacedBy": "component:ds-swatch-picker",
+        "replacementReason": "SwatchPicker renders its option buttons internally so an individually published radio swatch is no longer needed.",
+        "summary": "Deprecated internal compatibility component for one legacy AppShell gradient swatch.",
         "useWhen": [
           "Maintaining or extending ShellGradientPicker inside CompoMo."
         ],
@@ -3943,12 +3902,12 @@
         "alternatives": [
           {
             "when": "An application needs the supported global shell appearance control.",
-            "component": "component:ds-shell-gradient-picker",
-            "reason": "The picker provides the complete preset set, radio semantics, keyboard behavior, and selection event."
+            "component": "component:ds-swatch-picker",
+            "reason": "SwatchPicker provides the complete radio-group semantics, keyboard behavior, generic previews, and selection event."
           }
         ],
         "commonlyComposedWith": [
-          "component:ds-shell-gradient-picker"
+          "component:ds-swatch-picker"
         ],
         "accessibility": [
           "Keep radio semantics, aria-checked state, and a preset-specific accessible name on the internal button.",
@@ -4060,7 +4019,6 @@
         ],
         "commonlyComposedWith": [
           "component:ds-card",
-          "component:ds-table",
           "component:ds-text",
           "component:ds-icon"
         ],
@@ -4207,6 +4165,7 @@
           "Focused, filled, dirty, touched, dragging, valid, disabled, read-only, and orientation data hooks expose interaction state without changing the value contract."
         ],
         "responsiveBehavior": [
+          "The visible label uses the same primary emphasized text-body-small recipe as Field at every density; the value uses the same primary metric without emphasis.",
           "Horizontal Slider fills the width supplied by its parent; the parent chooses an appropriate readable track length.",
           "Vertical Slider owns a token-based default length that may be overridden with --ds-slider-vertical-length in layout-specific compositions.",
           "Use md in ordinary forms and sm or xs only when the surrounding control density uses the same recipe.",
@@ -4376,6 +4335,121 @@
         "text"
       ]
     },
+    {
+      "id": "component:ds-swatch-picker",
+      "tag": "ds-swatch-picker",
+      "name": "swatch-picker",
+      "title": "SwatchPicker",
+      "summary": "Compact one-of-many picker for curated flat-color, gradient, or visually absent presets with optional section separators and roving radio-group interaction.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "general",
+        "status": "stable",
+        "summary": "Compact one-of-many picker for curated flat-color, gradient, or visually absent presets with optional section separators and roving radio-group interaction.",
+        "useWhen": [
+          "Users choose exactly one visual preset from a small curated set.",
+          "Options are best compared through compact flat-color or gradient previews.",
+          "A settings surface or richer menu needs an immediately applied visual preference."
+        ],
+        "avoidWhen": [
+          "Users need an unrestricted spectrum, numeric channels, opacity editing, or custom CSS gradient construction.",
+          "Text labels are the primary distinction between choices; use Radio instead.",
+          "The choice is a submitted form value with validation or a long compact list; use Radio or Select.",
+          "Color or gradient is the only indication of status, meaning, or required action."
+        ],
+        "alternatives": [
+          {
+            "when": "The user needs an arbitrary color rather than a curated preset.",
+            "component": "component:ds-input",
+            "reason": "SwatchPicker intentionally does not provide spectrum, channel, or free-form value editing."
+          },
+          {
+            "when": "Visible text labels are more important than visual previews.",
+            "component": "component:ds-radio",
+            "reason": "Radio presents explicit one-of-many option labels and native form behavior."
+          },
+          {
+            "when": "The option set is long or must remain compact.",
+            "component": "component:ds-select",
+            "reason": "Select scales a larger named choice set into an anchored listbox."
+          }
+        ],
+        "commonlyComposedWith": [
+          "component:ds-menu",
+          "component:ds-app-shell"
+        ],
+        "accessibility": [
+          "Provide a localized groupLabel describing the complete choice.",
+          "Give every option a meaningful label because its visual preview is never its accessible name.",
+          "The options form one radio group with one Tab stop; Arrow keys wrap across active options while Home and End select the boundaries.",
+          "Inactive options remain named and disabled, and keyboard movement skips them."
+        ],
+        "states": [
+          "value is the selected option value and updates when the user chooses an active option.",
+          "options provides one flat list; sections takes precedence and adds visual separators while preserving one radio group.",
+          "A preview may use a token-based backgroundColor, a CSS gradient backgroundImage, and an optional opacity from zero through one.",
+          "The parent owns persistence and application of the selected value; SwatchPicker owns only choice interaction and dsChange."
+        ],
+        "responsiveBehavior": [
+          "Options wrap within the width supplied by the parent while retaining compact fixed swatch geometry.",
+          "Keep the set small enough for direct visual comparison; switch to a named list when wrapping harms comprehension."
+        ],
+        "frameworkCaveats": {
+          "customElements": [
+            "Assign options or sections as JavaScript properties, bind value, and listen for dsChange."
+          ],
+          "react": [
+            "Use DsSwatchPicker, pass option arrays as props, and handle onDsChange."
+          ],
+          "angular": [
+            "Use property bindings for options or sections and handle dsChange to update application state."
+          ]
+        },
+        "references": [
+          {
+            "label": "Executable stories",
+            "path": "src/wc/components/SwatchPicker/SwatchPicker.stories.ts"
+          }
+        ]
+      },
+      "api": {
+        "props": {
+          "groupLabel": {
+            "type": "string",
+            "required": false
+          },
+          "options": {
+            "type": "SwatchPickerOption[]",
+            "required": false
+          },
+          "sections": {
+            "type": "SwatchPickerSection[]",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "string"
+          }
+        ],
+        "slots": []
+      },
+      "exports": {
+        "customElement": "ds-swatch-picker",
+        "react": "DsSwatchPicker",
+        "angular": "DsSwatchPicker"
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "componentDependencies": []
+    },
     {
       "id": "component:ds-switch",
       "tag": "ds-switch",
@@ -4668,99 +4742,6 @@
         "text"
       ]
     },
-    {
-      "id": "component:ds-table",
-      "tag": "ds-table",
-      "name": "table",
-      "title": "Table",
-      "summary": "Data table with CSS grid layout, sorting, pagination, loading skeleton, row selection, and custom cell rendering.",
-      "intentStatus": "migration-pending",
-      "intent": null,
-      "api": {
-        "props": {
-          "columns": {
-            "type": "TableColumn[]",
-            "required": false
-          },
-          "data": {
-            "type": "unknown[]",
-            "required": false
-          },
-          "emptyMessage": {
-            "type": "string",
-            "required": false
-          },
-          "loading": {
-            "type": "boolean",
-            "required": false
-          },
-          "loadingLabel": {
-            "type": "string",
-            "required": false
-          },
-          "locale": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "nextPageLabel": {
-            "type": "string",
-            "required": false
-          },
-          "pageIndex": {
-            "type": "number | undefined",
-            "required": false
-          },
-          "pageSize": {
-            "type": "number",
-            "required": false
-          },
-          "pageStatusLabel": {
-            "type": "string",
-            "required": false
-          },
-          "previousPageLabel": {
-            "type": "string",
-            "required": false
-          },
-          "selectedRows": {
-            "type": "string",
-            "required": false
-          },
-          "sortState": {
-            "type": "SortState | undefined",
-            "required": false
-          }
-        },
-        "events": [
-          {
-            "name": "dsPageChange",
-            "detail": "{ pageIndex: number }"
-          },
-          {
-            "name": "dsRowClick",
-            "detail": "{ row: unknown; rowIndex: number }"
-          },
-          {
-            "name": "dsSort",
-            "detail": "{ columnId: string }"
-          }
-        ],
-        "slots": []
-      },
-      "exports": {
-        "customElement": "ds-table",
-        "react": "DsTable",
-        "angular": "DsTable"
-      },
-      "dependencies": [
-        "@ds-mo/ui",
-        "@ds-mo/tokens"
-      ],
-      "componentDependencies": [
-        "skeleton",
-        "text"
-      ]
-    },
     {
       "id": "component:ds-tag",
       "tag": "ds-tag",
@@ -4804,9 +4785,9 @@
         ],
         "commonlyComposedWith": [
           "component:ds-card",
-          "component:ds-table",
           "component:ds-text",
-          "component:ds-icon"
+          "component:ds-icon",
+          "component:ds-menu"
         ],
         "accessibility": [
           "The visible label provides Tag's accessible name; a separate aria-label is normally unnecessary.",

package/dist/angular/ds-menu.d.ts

@@ -10,9 +10,10 @@ export declare class DsMenu {
     dsClose: EventEmitter<DsMenuCustomEvent<void>>;
     dsSelect: EventEmitter<DsMenuCustomEvent<IDsMenuMenuItemData>>;
     dsGradientSelect: EventEmitter<DsMenuCustomEvent<IDsMenuShellGradientPreset>>;
+    dsSwatchSelect: EventEmitter<DsMenuCustomEvent<string>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsMenu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsMenu, "ds-menu", never, { "align": { "alias": "align"; "required": false; }; "alignOffset": { "alias": "alignOffset"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorId": { "alias": "anchorId"; "required": false; }; "initialFocusVisible": { "alias": "initialFocusVisible"; "required": false; }; "items": { "alias": "items"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "menuWidth": { "alias": "menuWidth"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "open": { "alias": "open"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "side": { "alias": "side"; "required": false; }; "sideOffset": { "alias": "sideOffset"; "required": false; }; }, { "dsClose": "dsClose"; "dsSelect": "dsSelect"; "dsGradientSelect": "dsGradientSelect"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsMenu, "ds-menu", never, { "align": { "alias": "align"; "required": false; }; "alignOffset": { "alias": "alignOffset"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlignment": { "alias": "anchorAlignment"; "required": false; }; "anchorId": { "alias": "anchorId"; "required": false; }; "initialFocusVisible": { "alias": "initialFocusVisible"; "required": false; }; "items": { "alias": "items"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "menuWidth": { "alias": "menuWidth"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "open": { "alias": "open"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "side": { "alias": "side"; "required": false; }; "sideOffset": { "alias": "sideOffset"; "required": false; }; }, { "dsClose": "dsClose"; "dsSelect": "dsSelect"; "dsGradientSelect": "dsGradientSelect"; "dsSwatchSelect": "dsSwatchSelect"; }, never, ["*"], true, never>;
 }
 export declare interface DsMenu extends Components.DsMenu {
     dsClose: EventEmitter<DsMenuCustomEvent<void>>;
@@ -21,4 +22,8 @@ export declare interface DsMenu extends Components.DsMenu {
      * Emitted when a `gradient-picker` section swatch is chosen.
      */
     dsGradientSelect: EventEmitter<DsMenuCustomEvent<IDsMenuShellGradientPreset>>;
+    /**
+     * Emitted when a generic `swatch-picker` section option is chosen.
+     */
+    dsSwatchSelect: EventEmitter<DsMenuCustomEvent<string>>;
 }

package/dist/angular/ds-menu.js

@@ -16,16 +16,17 @@ let DsMenu = class DsMenu {
         this.dsClose = new EventEmitter();
         this.dsSelect = new EventEmitter();
         this.dsGradientSelect = new EventEmitter();
+        this.dsSwatchSelect = new EventEmitter();
         c.detach();
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsMenu, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsMenu, isStandalone: true, selector: "ds-menu", inputs: { align: "align", alignOffset: "alignOffset", anchor: "anchor", anchorId: "anchorId", initialFocusVisible: "initialFocusVisible", items: "items", menuLabel: "menuLabel", menuWidth: "menuWidth", minWidth: "minWidth", open: "open", sections: "sections", side: "side", sideOffset: "sideOffset" }, outputs: { dsClose: "dsClose", dsSelect: "dsSelect", dsGradientSelect: "dsGradientSelect" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsMenu, isStandalone: true, selector: "ds-menu", inputs: { align: "align", alignOffset: "alignOffset", anchor: "anchor", anchorAlignment: "anchorAlignment", anchorId: "anchorId", initialFocusVisible: "initialFocusVisible", items: "items", menuLabel: "menuLabel", menuWidth: "menuWidth", minWidth: "minWidth", open: "open", sections: "sections", side: "side", sideOffset: "sideOffset" }, outputs: { dsClose: "dsClose", dsSelect: "dsSelect", dsGradientSelect: "dsGradientSelect", dsSwatchSelect: "dsSwatchSelect" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsMenu = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsMenu,
-        inputs: ['align', 'alignOffset', 'anchor', 'anchorId', 'initialFocusVisible', 'items', 'menuLabel', 'menuWidth', 'minWidth', 'open', 'sections', 'side', 'sideOffset']
+        inputs: ['align', 'alignOffset', 'anchor', 'anchorAlignment', 'anchorId', 'initialFocusVisible', 'items', 'menuLabel', 'menuWidth', 'minWidth', 'open', 'sections', 'side', 'sideOffset']
     })
 ], DsMenu);
 export { DsMenu };
@@ -36,8 +37,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['align', 'alignOffset', 'anchor', 'anchorId', 'initialFocusVisible', 'items', 'menuLabel', 'menuWidth', 'minWidth', 'open', 'sections', 'side', 'sideOffset'],
-                    outputs: ['dsClose', 'dsSelect', 'dsGradientSelect'],
+                    inputs: ['align', 'alignOffset', 'anchor', 'anchorAlignment', 'anchorId', 'initialFocusVisible', 'items', 'menuLabel', 'menuWidth', 'minWidth', 'open', 'sections', 'side', 'sideOffset'],
+                    outputs: ['dsClose', 'dsSelect', 'dsGradientSelect', 'dsSwatchSelect'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsClose: [{
                 type: Output
@@ -45,4 +46,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 type: Output
             }], dsGradientSelect: [{
                 type: Output
+            }], dsSwatchSelect: [{
+                type: Output
             }] } });

package/dist/angular/ds-swatch-picker.d.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import type { Components } from '@ds-mo/ui/components';
+import type { DsSwatchPickerCustomEvent } from '@ds-mo/ui/components';
+import * as i0 from "@angular/core";
+export declare class DsSwatchPicker {
+    protected z: NgZone;
+    protected el: HTMLDsSwatchPickerElement;
+    dsChange: EventEmitter<DsSwatchPickerCustomEvent<string>>;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DsSwatchPicker, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsSwatchPicker, "ds-swatch-picker", never, { "groupLabel": { "alias": "groupLabel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dsChange": "dsChange"; }, never, ["*"], true, never>;
+}
+export declare interface DsSwatchPicker extends Components.DsSwatchPicker {
+    dsChange: EventEmitter<DsSwatchPickerCustomEvent<string>>;
+}

package/dist/angular/{ds-pagination.js → ds-swatch-picker.js}

@@ -8,35 +8,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /* auto-generated angular directive proxies */
 import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
 import { ProxyCmp } from './angular-component-lib/utils.js';
-import { defineCustomElement as defineDsPagination } from '@ds-mo/ui/components/ds-pagination.js';
+import { defineCustomElement as defineDsSwatchPicker } from '@ds-mo/ui/components/ds-swatch-picker.js';
 import * as i0 from "@angular/core";
-let DsPagination = class DsPagination {
+let DsSwatchPicker = class DsSwatchPicker {
     constructor(c, r, z) {
         this.z = z;
-        this.dsPageChange = new EventEmitter();
+        this.dsChange = new EventEmitter();
         c.detach();
         this.el = r.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsPagination, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsPagination, isStandalone: true, selector: "ds-pagination", inputs: { isInactive: "isInactive", nextPageLabel: "nextPageLabel", page: "page", paginationLabel: "paginationLabel", previousPageLabel: "previousPageLabel", siblingCount: "siblingCount", totalPages: "totalPages" }, outputs: { dsPageChange: "dsPageChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsSwatchPicker, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsSwatchPicker, isStandalone: true, selector: "ds-swatch-picker", inputs: { groupLabel: "groupLabel", options: "options", sections: "sections", value: "value" }, outputs: { dsChange: "dsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
-DsPagination = __decorate([
+DsSwatchPicker = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineDsPagination,
-        inputs: ['isInactive', 'nextPageLabel', 'page', 'paginationLabel', 'previousPageLabel', 'siblingCount', 'totalPages']
+        defineCustomElementFn: defineDsSwatchPicker,
+        inputs: ['groupLabel', 'options', 'sections', 'value']
     })
-], DsPagination);
-export { DsPagination };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsPagination, decorators: [{
+], DsSwatchPicker);
+export { DsSwatchPicker };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsSwatchPicker, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ds-pagination',
+                    selector: 'ds-swatch-picker',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['isInactive', 'nextPageLabel', 'page', 'paginationLabel', 'previousPageLabel', 'siblingCount', 'totalPages'],
-                    outputs: ['dsPageChange'],
+                    inputs: ['groupLabel', 'options', 'sections', 'value'],
+                    outputs: ['dsChange'],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsPageChange: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsChange: [{
                 type: Output
             }] } });

package/dist/angular/index.d.ts

@@ -1,2 +1,2 @@
 import * as d from './proxies';
-export declare const DIRECTIVES: (typeof d.DsAppShell | typeof d.DsBadge | typeof d.DsBanner | typeof d.DsBarNav | typeof d.DsButtonFilled | typeof d.DsButtonUnfilled | typeof d.DsCardDataVizDonut | typeof d.DsCardSetting | typeof d.DsCardShellDataViz | typeof d.DsCard | typeof d.DsChartBar | typeof d.DsChartDonut | typeof d.DsChartLegend | typeof d.DsChartLine | typeof d.DsCheckbox | typeof d.DsChip | typeof d.DsDivider | typeof d.DsEmptyState | typeof d.DsField | typeof d.DsIcon | typeof d.DsInput | typeof d.DsLoader | typeof d.DsMenu | typeof d.DsModal | typeof d.DsPagination | typeof d.DsPanelNav | typeof d.DsPanelSubNav | typeof d.DsPanelTools | typeof d.DsRadio | typeof d.DsSelectMulti | typeof d.DsSelect | typeof d.DsShellGradientPicker | typeof d.DsShellGradientSwatch | typeof d.DsSkeleton | typeof d.DsSlider | typeof d.DsSwitch | typeof d.DsTabGroup | typeof d.DsTable | typeof d.DsTag | typeof d.DsText | typeof d.DsTooltipDataViz | typeof d.DsTooltip)[];
+export declare const DIRECTIVES: (typeof d.DsAppShell | typeof d.DsBadge | typeof d.DsBanner | typeof d.DsBarNav | typeof d.DsButtonFilled | typeof d.DsButtonUnfilled | typeof d.DsCardDataVizDonut | typeof d.DsCardSetting | typeof d.DsCardShellDataViz | typeof d.DsCard | typeof d.DsChartBar | typeof d.DsChartDonut | typeof d.DsChartLegend | typeof d.DsChartLine | typeof d.DsCheckbox | typeof d.DsChip | typeof d.DsDivider | typeof d.DsEmptyState | typeof d.DsField | typeof d.DsIcon | typeof d.DsInput | typeof d.DsLoader | typeof d.DsMenu | typeof d.DsModal | typeof d.DsPanelNav | typeof d.DsPanelSubNav | typeof d.DsPanelTools | typeof d.DsRadio | typeof d.DsSelectMulti | typeof d.DsSelect | typeof d.DsShellGradientPicker | typeof d.DsShellGradientSwatch | typeof d.DsSkeleton | typeof d.DsSlider | typeof d.DsSwatchPicker | typeof d.DsSwitch | typeof d.DsTabGroup | typeof d.DsTag | typeof d.DsText | typeof d.DsTooltipDataViz | typeof d.DsTooltip)[];

package/dist/angular/index.js

@@ -24,7 +24,6 @@ export const DIRECTIVES = [
     d.DsLoader,
     d.DsMenu,
     d.DsModal,
-    d.DsPagination,
     d.DsPanelNav,
     d.DsPanelSubNav,
     d.DsPanelTools,
@@ -35,9 +34,9 @@ export const DIRECTIVES = [
     d.DsShellGradientSwatch,
     d.DsSkeleton,
     d.DsSlider,
+    d.DsSwatchPicker,
     d.DsSwitch,
     d.DsTabGroup,
-    d.DsTable,
     d.DsTag,
     d.DsText,
     d.DsTooltip,