@ds-mo/ui 8.3.1 → 9.1.0

package/dist/types/components.d.ts

@@ -26,6 +26,7 @@ import { InputSize, InputType, InputWidth } from "./components/Input/Input";
 import { LoaderColor, LoaderSize } from "./components/Loader/Loader";
 import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
+import { ChoicePopupAnchorAlignment } from "./utils";
 import { ModalWidth } from "./components/Modal/Modal";
 import { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 import { ChromeTransitionDetail } from "./shell/chrome-transition";
@@ -41,10 +42,10 @@ import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, Text
 import { IconSize as IconSize1 } from "./components/Icon/Icon";
 import { ControlSize } from "./utils/control-text";
 import { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
+import { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 import { SwitchSize } from "./components/Switch/Switch";
 import { TabGroupItem } from "./components/TabGroup/tab-item-utils";
 import { TabBackground } from "./components/TabGroup/TabGroup";
-import { SortState, TableColumn } from "./components/Table/Table";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
 export { NavChromeStyle } from "./shell/nav-chrome";
@@ -68,6 +69,7 @@ export { InputSize, InputType, InputWidth } from "./components/Input/Input";
 export { LoaderColor, LoaderSize } from "./components/Loader/Loader";
 export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
+export { ChoicePopupAnchorAlignment } from "./utils";
 export { ModalWidth } from "./components/Modal/Modal";
 export { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 export { ChromeTransitionDetail } from "./shell/chrome-transition";
@@ -83,10 +85,10 @@ export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, Text
 export { IconSize as IconSize1 } from "./components/Icon/Icon";
 export { ControlSize } from "./utils/control-text";
 export { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
+export { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 export { SwitchSize } from "./components/Switch/Switch";
 export { TabGroupItem } from "./components/TabGroup/tab-item-utils";
 export { TabBackground } from "./components/TabGroup/TabGroup";
-export { SortState, TableColumn } from "./components/Table/Table";
 export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
 export namespace Components {
@@ -859,6 +861,11 @@ export namespace Components {
           * External trigger element to position against. Set via JS: menuEl.anchor = buttonEl
          */
         "anchor": HTMLElement | undefined;
+        /**
+          * Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry.
+          * @default 'choice-cell'
+         */
+        "anchorAlignment": ChoicePopupAnchorAlignment;
         /**
           * ID of the external trigger element for positioning
          */
@@ -909,36 +916,6 @@ export namespace Components {
         "open": boolean;
         "subtitle": string | undefined;
     }
-    interface DsPagination {
-        /**
-          * @default false
-         */
-        "isInactive": boolean;
-        /**
-          * @default 'Next page'
-         */
-        "nextPageLabel": string;
-        /**
-          * @default 1
-         */
-        "page": number;
-        /**
-          * @default 'Pagination'
-         */
-        "paginationLabel": string;
-        /**
-          * @default 'Previous page'
-         */
-        "previousPageLabel": string;
-        /**
-          * @default 1
-         */
-        "siblingCount": number;
-        /**
-          * @default 1
-         */
-        "totalPages": number;
-    }
     interface DsPanelNav {
         /**
           * @default 'Account'
@@ -1443,6 +1420,9 @@ export namespace Components {
          */
         "width": SelectMultiWidth;
     }
+    /**
+     * @deprecated Use `ds-swatch-picker` with shell preset options.
+     */
     interface DsShellGradientPicker {
         /**
           * @default 'Shell gradient theme'
@@ -1454,6 +1434,9 @@ export namespace Components {
          */
         "value": ShellGradientPreset1;
     }
+    /**
+     * @deprecated Use `ds-swatch-picker`; individual swatches are implementation detail.
+     */
     interface DsShellGradientSwatch {
         /**
           * @default null
@@ -1631,6 +1614,28 @@ export namespace Components {
          */
         "valueTexts": string[];
     }
+    interface DsSwatchPicker {
+        /**
+          * Accessible name for the complete one-of-many choice.
+          * @default 'Swatch options'
+         */
+        "groupLabel": string;
+        /**
+          * Flat option list. Sections take precedence when supplied. Assign as a JavaScript property.
+          * @default []
+         */
+        "options": SwatchPickerOption[];
+        /**
+          * Visually separated option groups that remain one radio group. Assign as a JavaScript property.
+          * @default []
+         */
+        "sections": SwatchPickerSection[];
+        /**
+          * Selected option value.
+          * @default ''
+         */
+        "value": string;
+    }
     interface DsSwitch {
         /**
           * Current on/off state. The initial value is restored when the owning form resets.
@@ -1697,56 +1702,6 @@ export namespace Components {
          */
         "value": string;
     }
-    interface DsTable {
-        /**
-          * @default []
-         */
-        "columns": TableColumn[];
-        /**
-          * @default []
-         */
-        "data": unknown[];
-        /**
-          * @default 'No results found.'
-         */
-        "emptyMessage": string;
-        /**
-          * @default false
-         */
-        "loading": boolean;
-        /**
-          * @default 'Loading'
-         */
-        "loadingLabel": string;
-        "locale": string | undefined;
-        /**
-          * @default 'Next'
-         */
-        "nextPageLabel": string;
-        /**
-          * Page index (0-based). Enables built-in pagination when set alongside pageSize.
-         */
-        "pageIndex": number | undefined;
-        /**
-          * @default 20
-         */
-        "pageSize": number;
-        /**
-          * Use `{page}` and `{total}` placeholders.
-          * @default 'Page {page} of {total}'
-         */
-        "pageStatusLabel": string;
-        /**
-          * @default 'Previous'
-         */
-        "previousPageLabel": string;
-        /**
-          * Comma-separated zero-based row indices that are selected.
-          * @default ''
-         */
-        "selectedRows": string;
-        "sortState": SortState | undefined;
-    }
     interface DsTag {
         /**
           * ID of the menu controlled by an interactive Tag.
@@ -1977,10 +1932,6 @@ export interface DsModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsModalElement;
 }
-export interface DsPaginationCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsPaginationElement;
-}
 export interface DsPanelNavCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsPanelNavElement;
@@ -2017,6 +1968,10 @@ export interface DsSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsSliderElement;
 }
+export interface DsSwatchPickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsSwatchPickerElement;
+}
 export interface DsSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsSwitchElement;
@@ -2025,10 +1980,6 @@ export interface DsTabGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTabGroupElement;
 }
-export interface DsTableCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsTableElement;
-}
 export interface DsTagCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTagElement;
@@ -2319,6 +2270,7 @@ declare global {
         "dsClose": void;
         "dsSelect": MenuItemData;
         "dsGradientSelect": ShellGradientPreset;
+        "dsSwatchSelect": string;
     }
     interface HTMLDsMenuElement extends Components.DsMenu, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsMenuElementEventMap>(type: K, listener: (this: HTMLDsMenuElement, ev: DsMenuCustomEvent<HTMLDsMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2351,23 +2303,6 @@ declare global {
         prototype: HTMLDsModalElement;
         new (): HTMLDsModalElement;
     };
-    interface HTMLDsPaginationElementEventMap {
-        "dsPageChange": number;
-    }
-    interface HTMLDsPaginationElement extends Components.DsPagination, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsPaginationElementEventMap>(type: K, listener: (this: HTMLDsPaginationElement, ev: DsPaginationCustomEvent<HTMLDsPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLDsPaginationElementEventMap>(type: K, listener: (this: HTMLDsPaginationElement, ev: DsPaginationCustomEvent<HTMLDsPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLDsPaginationElement: {
-        prototype: HTMLDsPaginationElement;
-        new (): HTMLDsPaginationElement;
-    };
     interface HTMLDsPanelNavElementEventMap {
         "dsNavSelect": string;
         "dsNavToggle": boolean;
@@ -2487,6 +2422,9 @@ declare global {
     interface HTMLDsShellGradientPickerElementEventMap {
         "dsChange": ShellGradientPreset1;
     }
+    /**
+     * @deprecated Use `ds-swatch-picker` with shell preset options.
+     */
     interface HTMLDsShellGradientPickerElement extends Components.DsShellGradientPicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsShellGradientPickerElementEventMap>(type: K, listener: (this: HTMLDsShellGradientPickerElement, ev: DsShellGradientPickerCustomEvent<HTMLDsShellGradientPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2504,6 +2442,9 @@ declare global {
     interface HTMLDsShellGradientSwatchElementEventMap {
         "dsSelect": ShellGradientPreset1;
     }
+    /**
+     * @deprecated Use `ds-swatch-picker`; individual swatches are implementation detail.
+     */
     interface HTMLDsShellGradientSwatchElement extends Components.DsShellGradientSwatch, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsShellGradientSwatchElementEventMap>(type: K, listener: (this: HTMLDsShellGradientSwatchElement, ev: DsShellGradientSwatchCustomEvent<HTMLDsShellGradientSwatchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2542,6 +2483,23 @@ declare global {
         prototype: HTMLDsSliderElement;
         new (): HTMLDsSliderElement;
     };
+    interface HTMLDsSwatchPickerElementEventMap {
+        "dsChange": string;
+    }
+    interface HTMLDsSwatchPickerElement extends Components.DsSwatchPicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsSwatchPickerElementEventMap>(type: K, listener: (this: HTMLDsSwatchPickerElement, ev: DsSwatchPickerCustomEvent<HTMLDsSwatchPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsSwatchPickerElementEventMap>(type: K, listener: (this: HTMLDsSwatchPickerElement, ev: DsSwatchPickerCustomEvent<HTMLDsSwatchPickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsSwatchPickerElement: {
+        prototype: HTMLDsSwatchPickerElement;
+        new (): HTMLDsSwatchPickerElement;
+    };
     interface HTMLDsSwitchElementEventMap {
         "dsChange": boolean;
     }
@@ -2576,25 +2534,6 @@ declare global {
         prototype: HTMLDsTabGroupElement;
         new (): HTMLDsTabGroupElement;
     };
-    interface HTMLDsTableElementEventMap {
-        "dsSort": { columnId: string };
-        "dsRowClick": { row: unknown; rowIndex: number };
-        "dsPageChange": { pageIndex: number };
-    }
-    interface HTMLDsTableElement extends Components.DsTable, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsTableElementEventMap>(type: K, listener: (this: HTMLDsTableElement, ev: DsTableCustomEvent<HTMLDsTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLDsTableElementEventMap>(type: K, listener: (this: HTMLDsTableElement, ev: DsTableCustomEvent<HTMLDsTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLDsTableElement: {
-        prototype: HTMLDsTableElement;
-        new (): HTMLDsTableElement;
-    };
     interface HTMLDsTagElementEventMap {
         "dsClick": MouseEvent;
     }
@@ -2674,7 +2613,6 @@ declare global {
         "ds-loader": HTMLDsLoaderElement;
         "ds-menu": HTMLDsMenuElement;
         "ds-modal": HTMLDsModalElement;
-        "ds-pagination": HTMLDsPaginationElement;
         "ds-panel-nav": HTMLDsPanelNavElement;
         "ds-panel-sub-nav": HTMLDsPanelSubNavElement;
         "ds-panel-tools": HTMLDsPanelToolsElement;
@@ -2685,9 +2623,9 @@ declare global {
         "ds-shell-gradient-swatch": HTMLDsShellGradientSwatchElement;
         "ds-skeleton": HTMLDsSkeletonElement;
         "ds-slider": HTMLDsSliderElement;
+        "ds-swatch-picker": HTMLDsSwatchPickerElement;
         "ds-switch": HTMLDsSwitchElement;
         "ds-tab-group": HTMLDsTabGroupElement;
-        "ds-table": HTMLDsTableElement;
         "ds-tag": HTMLDsTagElement;
         "ds-text": HTMLDsTextElement;
         "ds-tooltip": HTMLDsTooltipElement;
@@ -3505,6 +3443,11 @@ declare namespace LocalJSX {
           * External trigger element to position against. Set via JS: menuEl.anchor = buttonEl
          */
         "anchor"?: HTMLElement | undefined;
+        /**
+          * Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry.
+          * @default 'choice-cell'
+         */
+        "anchorAlignment"?: ChoicePopupAnchorAlignment;
         /**
           * ID of the external trigger element for positioning
          */
@@ -3531,6 +3474,10 @@ declare namespace LocalJSX {
          */
         "onDsGradientSelect"?: (event: DsMenuCustomEvent<ShellGradientPreset>) => void;
         "onDsSelect"?: (event: DsMenuCustomEvent<MenuItemData>) => void;
+        /**
+          * Emitted when a generic `swatch-picker` section option is chosen.
+         */
+        "onDsSwatchSelect"?: (event: DsMenuCustomEvent<string>) => void;
         /**
           * @default false
          */
@@ -3562,37 +3509,6 @@ declare namespace LocalJSX {
         "open"?: boolean;
         "subtitle"?: string | undefined;
     }
-    interface DsPagination {
-        /**
-          * @default false
-         */
-        "isInactive"?: boolean;
-        /**
-          * @default 'Next page'
-         */
-        "nextPageLabel"?: string;
-        "onDsPageChange"?: (event: DsPaginationCustomEvent<number>) => void;
-        /**
-          * @default 1
-         */
-        "page"?: number;
-        /**
-          * @default 'Pagination'
-         */
-        "paginationLabel"?: string;
-        /**
-          * @default 'Previous page'
-         */
-        "previousPageLabel"?: string;
-        /**
-          * @default 1
-         */
-        "siblingCount"?: number;
-        /**
-          * @default 1
-         */
-        "totalPages"?: number;
-    }
     interface DsPanelNav {
         /**
           * @default 'Account'
@@ -4153,6 +4069,9 @@ declare namespace LocalJSX {
          */
         "width"?: SelectMultiWidth;
     }
+    /**
+     * @deprecated Use `ds-swatch-picker` with shell preset options.
+     */
     interface DsShellGradientPicker {
         /**
           * @default 'Shell gradient theme'
@@ -4165,6 +4084,9 @@ declare namespace LocalJSX {
          */
         "value"?: ShellGradientPreset1;
     }
+    /**
+     * @deprecated Use `ds-swatch-picker`; individual swatches are implementation detail.
+     */
     interface DsShellGradientSwatch {
         /**
           * @default null
@@ -4350,6 +4272,29 @@ declare namespace LocalJSX {
          */
         "valueTexts"?: string[];
     }
+    interface DsSwatchPicker {
+        /**
+          * Accessible name for the complete one-of-many choice.
+          * @default 'Swatch options'
+         */
+        "groupLabel"?: string;
+        "onDsChange"?: (event: DsSwatchPickerCustomEvent<string>) => void;
+        /**
+          * Flat option list. Sections take precedence when supplied. Assign as a JavaScript property.
+          * @default []
+         */
+        "options"?: SwatchPickerOption[];
+        /**
+          * Visually separated option groups that remain one radio group. Assign as a JavaScript property.
+          * @default []
+         */
+        "sections"?: SwatchPickerSection[];
+        /**
+          * Selected option value.
+          * @default ''
+         */
+        "value"?: string;
+    }
     interface DsSwitch {
         /**
           * Current on/off state. The initial value is restored when the owning form resets.
@@ -4418,59 +4363,6 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    interface DsTable {
-        /**
-          * @default []
-         */
-        "columns"?: TableColumn[];
-        /**
-          * @default []
-         */
-        "data"?: unknown[];
-        /**
-          * @default 'No results found.'
-         */
-        "emptyMessage"?: string;
-        /**
-          * @default false
-         */
-        "loading"?: boolean;
-        /**
-          * @default 'Loading'
-         */
-        "loadingLabel"?: string;
-        "locale"?: string | undefined;
-        /**
-          * @default 'Next'
-         */
-        "nextPageLabel"?: string;
-        "onDsPageChange"?: (event: DsTableCustomEvent<{ pageIndex: number }>) => void;
-        "onDsRowClick"?: (event: DsTableCustomEvent<{ row: unknown; rowIndex: number }>) => void;
-        "onDsSort"?: (event: DsTableCustomEvent<{ columnId: string }>) => void;
-        /**
-          * Page index (0-based). Enables built-in pagination when set alongside pageSize.
-         */
-        "pageIndex"?: number | undefined;
-        /**
-          * @default 20
-         */
-        "pageSize"?: number;
-        /**
-          * Use `{page}` and `{total}` placeholders.
-          * @default 'Page {page} of {total}'
-         */
-        "pageStatusLabel"?: string;
-        /**
-          * @default 'Previous'
-         */
-        "previousPageLabel"?: string;
-        /**
-          * Comma-separated zero-based row indices that are selected.
-          * @default ''
-         */
-        "selectedRows"?: string;
-        "sortState"?: SortState | undefined;
-    }
     interface DsTag {
         /**
           * ID of the menu controlled by an interactive Tag.
@@ -4854,6 +4746,7 @@ declare namespace LocalJSX {
         "open": boolean;
         "side": MenuSide;
         "align": MenuAlign;
+        "anchorAlignment": ChoicePopupAnchorAlignment;
         "sideOffset": string;
         "alignOffset": string;
         "menuWidth": string | undefined;
@@ -4868,15 +4761,6 @@ declare namespace LocalJSX {
         "subtitle": string | undefined;
         "modalWidth": ModalWidth | string;
     }
-    interface DsPaginationAttributes {
-        "page": number;
-        "totalPages": number;
-        "siblingCount": number;
-        "isInactive": boolean;
-        "paginationLabel": string;
-        "previousPageLabel": string;
-        "nextPageLabel": string;
-    }
     interface DsPanelNavAttributes {
         "navStyle": NavChromeStyle;
         "disableViewTransition": boolean;
@@ -5031,6 +4915,10 @@ declare namespace LocalJSX {
         "rangeSeparator": string;
         "inputId": string | undefined;
     }
+    interface DsSwatchPickerAttributes {
+        "value": string;
+        "groupLabel": string;
+    }
     interface DsSwitchAttributes {
         "checked": boolean;
         "name": string | undefined;
@@ -5051,18 +4939,6 @@ declare namespace LocalJSX {
         "ariaLabel": string | null;
         "ariaLabelledby": string | undefined;
     }
-    interface DsTableAttributes {
-        "loading": boolean;
-        "emptyMessage": string;
-        "loadingLabel": string;
-        "previousPageLabel": string;
-        "nextPageLabel": string;
-        "pageStatusLabel": string;
-        "locale": string | undefined;
-        "selectedRows": string;
-        "pageIndex": number | undefined;
-        "pageSize": number;
-    }
     interface DsTagAttributes {
         "label": string;
         "icon": string;
@@ -5135,7 +5011,6 @@ declare namespace LocalJSX {
         "ds-loader": Omit<DsLoader, keyof DsLoaderAttributes> & { [K in keyof DsLoader & keyof DsLoaderAttributes]?: DsLoader[K] } & { [K in keyof DsLoader & keyof DsLoaderAttributes as `attr:${K}`]?: DsLoaderAttributes[K] } & { [K in keyof DsLoader & keyof DsLoaderAttributes as `prop:${K}`]?: DsLoader[K] };
         "ds-menu": Omit<DsMenu, keyof DsMenuAttributes> & { [K in keyof DsMenu & keyof DsMenuAttributes]?: DsMenu[K] } & { [K in keyof DsMenu & keyof DsMenuAttributes as `attr:${K}`]?: DsMenuAttributes[K] } & { [K in keyof DsMenu & keyof DsMenuAttributes as `prop:${K}`]?: DsMenu[K] };
         "ds-modal": Omit<DsModal, keyof DsModalAttributes> & { [K in keyof DsModal & keyof DsModalAttributes]?: DsModal[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `attr:${K}`]?: DsModalAttributes[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `prop:${K}`]?: DsModal[K] } & OneOf<"heading", DsModal["heading"], DsModalAttributes["heading"]>;
-        "ds-pagination": Omit<DsPagination, keyof DsPaginationAttributes> & { [K in keyof DsPagination & keyof DsPaginationAttributes]?: DsPagination[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `attr:${K}`]?: DsPaginationAttributes[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `prop:${K}`]?: DsPagination[K] };
         "ds-panel-nav": Omit<DsPanelNav, keyof DsPanelNavAttributes> & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes]?: DsPanelNav[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `attr:${K}`]?: DsPanelNavAttributes[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `prop:${K}`]?: DsPanelNav[K] };
         "ds-panel-sub-nav": Omit<DsPanelSubNav, keyof DsPanelSubNavAttributes> & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes]?: DsPanelSubNav[K] } & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes as `attr:${K}`]?: DsPanelSubNavAttributes[K] } & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes as `prop:${K}`]?: DsPanelSubNav[K] };
         "ds-panel-tools": Omit<DsPanelTools, keyof DsPanelToolsAttributes> & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes]?: DsPanelTools[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `attr:${K}`]?: DsPanelToolsAttributes[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `prop:${K}`]?: DsPanelTools[K] };
@@ -5146,9 +5021,9 @@ declare namespace LocalJSX {
         "ds-shell-gradient-swatch": Omit<DsShellGradientSwatch, keyof DsShellGradientSwatchAttributes> & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes]?: DsShellGradientSwatch[K] } & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes as `attr:${K}`]?: DsShellGradientSwatchAttributes[K] } & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes as `prop:${K}`]?: DsShellGradientSwatch[K] };
         "ds-skeleton": Omit<DsSkeleton, keyof DsSkeletonAttributes> & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes]?: DsSkeleton[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `attr:${K}`]?: DsSkeletonAttributes[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `prop:${K}`]?: DsSkeleton[K] };
         "ds-slider": Omit<DsSlider, keyof DsSliderAttributes> & { [K in keyof DsSlider & keyof DsSliderAttributes]?: DsSlider[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `attr:${K}`]?: DsSliderAttributes[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `prop:${K}`]?: DsSlider[K] };
+        "ds-swatch-picker": Omit<DsSwatchPicker, keyof DsSwatchPickerAttributes> & { [K in keyof DsSwatchPicker & keyof DsSwatchPickerAttributes]?: DsSwatchPicker[K] } & { [K in keyof DsSwatchPicker & keyof DsSwatchPickerAttributes as `attr:${K}`]?: DsSwatchPickerAttributes[K] } & { [K in keyof DsSwatchPicker & keyof DsSwatchPickerAttributes as `prop:${K}`]?: DsSwatchPicker[K] };
         "ds-switch": Omit<DsSwitch, keyof DsSwitchAttributes> & { [K in keyof DsSwitch & keyof DsSwitchAttributes]?: DsSwitch[K] } & { [K in keyof DsSwitch & keyof DsSwitchAttributes as `attr:${K}`]?: DsSwitchAttributes[K] } & { [K in keyof DsSwitch & keyof DsSwitchAttributes as `prop:${K}`]?: DsSwitch[K] };
         "ds-tab-group": Omit<DsTabGroup, keyof DsTabGroupAttributes> & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes]?: DsTabGroup[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `attr:${K}`]?: DsTabGroupAttributes[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `prop:${K}`]?: DsTabGroup[K] };
-        "ds-table": Omit<DsTable, keyof DsTableAttributes> & { [K in keyof DsTable & keyof DsTableAttributes]?: DsTable[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `attr:${K}`]?: DsTableAttributes[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `prop:${K}`]?: DsTable[K] };
         "ds-tag": Omit<DsTag, keyof DsTagAttributes> & { [K in keyof DsTag & keyof DsTagAttributes]?: DsTag[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `attr:${K}`]?: DsTagAttributes[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `prop:${K}`]?: DsTag[K] } & OneOf<"label", DsTag["label"], DsTagAttributes["label"]>;
         "ds-text": Omit<DsText, keyof DsTextAttributes> & { [K in keyof DsText & keyof DsTextAttributes]?: DsText[K] } & { [K in keyof DsText & keyof DsTextAttributes as `attr:${K}`]?: DsTextAttributes[K] } & { [K in keyof DsText & keyof DsTextAttributes as `prop:${K}`]?: DsText[K] };
         "ds-tooltip": Omit<DsTooltip, keyof DsTooltipAttributes> & { [K in keyof DsTooltip & keyof DsTooltipAttributes]?: DsTooltip[K] } & { [K in keyof DsTooltip & keyof DsTooltipAttributes as `attr:${K}`]?: DsTooltipAttributes[K] } & { [K in keyof DsTooltip & keyof DsTooltipAttributes as `prop:${K}`]?: DsTooltip[K] } & OneOf<"label", DsTooltip["label"], DsTooltipAttributes["label"]>;
@@ -5208,20 +5083,25 @@ declare module "@stencil/core" {
             "ds-loader": LocalJSX.IntrinsicElements["ds-loader"] & JSXBase.HTMLAttributes<HTMLDsLoaderElement>;
             "ds-menu": LocalJSX.IntrinsicElements["ds-menu"] & JSXBase.HTMLAttributes<HTMLDsMenuElement>;
             "ds-modal": LocalJSX.IntrinsicElements["ds-modal"] & JSXBase.HTMLAttributes<HTMLDsModalElement>;
-            "ds-pagination": LocalJSX.IntrinsicElements["ds-pagination"] & JSXBase.HTMLAttributes<HTMLDsPaginationElement>;
             "ds-panel-nav": LocalJSX.IntrinsicElements["ds-panel-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelNavElement>;
             "ds-panel-sub-nav": LocalJSX.IntrinsicElements["ds-panel-sub-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelSubNavElement>;
             "ds-panel-tools": LocalJSX.IntrinsicElements["ds-panel-tools"] & JSXBase.HTMLAttributes<HTMLDsPanelToolsElement>;
             "ds-radio": LocalJSX.IntrinsicElements["ds-radio"] & JSXBase.HTMLAttributes<HTMLDsRadioElement>;
             "ds-select": LocalJSX.IntrinsicElements["ds-select"] & JSXBase.HTMLAttributes<HTMLDsSelectElement>;
             "ds-select-multi": LocalJSX.IntrinsicElements["ds-select-multi"] & JSXBase.HTMLAttributes<HTMLDsSelectMultiElement>;
+            /**
+             * @deprecated Use `ds-swatch-picker` with shell preset options.
+             */
             "ds-shell-gradient-picker": LocalJSX.IntrinsicElements["ds-shell-gradient-picker"] & JSXBase.HTMLAttributes<HTMLDsShellGradientPickerElement>;
+            /**
+             * @deprecated Use `ds-swatch-picker`; individual swatches are implementation detail.
+             */
             "ds-shell-gradient-swatch": LocalJSX.IntrinsicElements["ds-shell-gradient-swatch"] & JSXBase.HTMLAttributes<HTMLDsShellGradientSwatchElement>;
             "ds-skeleton": LocalJSX.IntrinsicElements["ds-skeleton"] & JSXBase.HTMLAttributes<HTMLDsSkeletonElement>;
             "ds-slider": LocalJSX.IntrinsicElements["ds-slider"] & JSXBase.HTMLAttributes<HTMLDsSliderElement>;
+            "ds-swatch-picker": LocalJSX.IntrinsicElements["ds-swatch-picker"] & JSXBase.HTMLAttributes<HTMLDsSwatchPickerElement>;
             "ds-switch": LocalJSX.IntrinsicElements["ds-switch"] & JSXBase.HTMLAttributes<HTMLDsSwitchElement>;
             "ds-tab-group": LocalJSX.IntrinsicElements["ds-tab-group"] & JSXBase.HTMLAttributes<HTMLDsTabGroupElement>;
-            "ds-table": LocalJSX.IntrinsicElements["ds-table"] & JSXBase.HTMLAttributes<HTMLDsTableElement>;
             "ds-tag": LocalJSX.IntrinsicElements["ds-tag"] & JSXBase.HTMLAttributes<HTMLDsTagElement>;
             "ds-text": LocalJSX.IntrinsicElements["ds-text"] & JSXBase.HTMLAttributes<HTMLDsTextElement>;
             /**

package/dist/types/shell/index.d.ts

@@ -6,8 +6,8 @@ export { SHELL_GRADIENT_IMAGE_VAR, SHELL_GRADIENT_SIZE_VAR, SHELL_GRADIENT_POSIT
 export type { ShellGradientLayout, ShellViewportDimensions } from './shell-gradient';
 export type { MenuPlacement } from '../components/Menu/menu-placement';
 export { PANEL_NAV_USER_MENU_PLACEMENT, } from '../components/Menu/menu-placement';
-export type { ShellGradientPreset } from './shell-gradient-presets';
-export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, isShellGradientPreset, normalizeShellGradientPreset, shellGradientPresetStopToken, } from './shell-gradient-presets';
+export type { ShellGradientPickerOption, ShellGradientPickerPreview, ShellGradientPickerSection, ShellGradientPreset, } from './shell-gradient-presets';
+export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, isShellGradientPreset, normalizeShellGradientPreset, shellGradientPickerSections, shellGradientPresetStopToken, } from './shell-gradient-presets';
 export type { ChromeTransitionDetail, ChromeTransitionSource } from './chrome-transition';
 export { CHROME_TRANSITION_END, CHROME_TRANSITION_START, ChromeTransitionDepth, createRafCoalescer, readChromeTransitionSource, readChromeTransitionPhase, } from './chrome-transition';
 export { barGradientPositionFromPanelWidth, isPanelNavCollapsed, panelWidthPxFromTokens, readCssVarWidthPx, readPanelNavWidthTokens, } from './shell-chrome-metrics';

package/dist/types/shell/shell-gradient-presets.d.ts

@@ -14,6 +14,19 @@ export interface ShellGradientRecipe {
     opacity: number;
     stops: readonly ShellGradientStop[];
 }
+export interface ShellGradientPickerPreview {
+    backgroundColor: string;
+    backgroundImage?: string;
+    opacity?: number;
+}
+export interface ShellGradientPickerOption {
+    value: ShellGradientPreset;
+    label: string;
+    preview: ShellGradientPickerPreview;
+}
+export interface ShellGradientPickerSection {
+    options: ShellGradientPickerOption[];
+}
 export declare function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null;
 export declare function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null;
 export declare function shellGradientPresetOpacity(preset: ShellGradientPreset): string;
@@ -30,4 +43,6 @@ export declare function normalizeShellGradientPreset(value: string | null | unde
 export declare function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string;
 /** Build the production shell geometry from an ordered set of design-time stops. */
 export declare function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string;
+/** Generic SwatchPicker sections for the fixed shell appearance presets. */
+export declare function shellGradientPickerSections(): ShellGradientPickerSection[];
 //# sourceMappingURL=shell-gradient-presets.d.ts.map