@ds-mo/ui 14.6.0 → 14.7.0

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

@@ -3,7 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsMenuCustomEvent, type MenuItemData } from "@ds-mo/ui";
+import { type DsMenuCustomEvent, type MenuItemData, type MenuReorderDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsMenu as DsMenuElement } from "@ds-mo/ui/dist/components/ds-menu.js";
 export type DsMenuEvents = {
@@ -11,5 +11,6 @@ export type DsMenuEvents = {
     onDsAfterClose: EventName<DsMenuCustomEvent<void>>;
     onDsSelect: EventName<DsMenuCustomEvent<MenuItemData>>;
     onDsSwatchSelect: EventName<DsMenuCustomEvent<string>>;
+    onDsReorder: EventName<DsMenuCustomEvent<MenuReorderDetail>>;
 };
 export declare const DsMenu: StencilReactComponent<DsMenuElement, DsMenuEvents, Components.DsMenu>;

package/dist/react/ds-menu.js

@@ -11,7 +11,8 @@ export const DsMenu = /*@__PURE__*/ createComponent({
         onDsClose: 'dsClose',
         onDsAfterClose: 'dsAfterClose',
         onDsSelect: 'dsSelect',
-        onDsSwatchSelect: 'dsSwatchSelect'
+        onDsSwatchSelect: 'dsSwatchSelect',
+        onDsReorder: 'dsReorder'
     },
     defineCustomElement: defineDsMenu
 });

package/dist/react/ds-table.d.ts

@@ -3,7 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsTableCustomEvent, type PaginationChangeDetail, type TableCellActionDetail, type TableGroupCollapseChangeDetail, type TableGroupLoadMoreDetail, type TableLoadMoreDetail, type TableRowActivateDetail, type TableSelectionChangeDetail, type TableSortChangeDetail } from "@ds-mo/ui";
+import { type DsTableCustomEvent, type PaginationChangeDetail, type TableCellActionDetail, type TableColumnsConfigChangeDetail, type TableGroupCollapseChangeDetail, type TableGroupLoadMoreDetail, type TableLoadMoreDetail, type TableRowActivateDetail, type TableSelectionChangeDetail, type TableSortChangeDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTable as DsTableElement } from "@ds-mo/ui/dist/components/ds-table.js";
 export type DsTableEvents = {
@@ -15,5 +15,6 @@ export type DsTableEvents = {
     onDsPaginationChange: EventName<DsTableCustomEvent<PaginationChangeDetail>>;
     onDsCellAction: EventName<DsTableCustomEvent<TableCellActionDetail>>;
     onDsRowActivate: EventName<DsTableCustomEvent<TableRowActivateDetail>>;
+    onDsColumnsConfigChange: EventName<DsTableCustomEvent<TableColumnsConfigChangeDetail>>;
 };
 export declare const DsTable: StencilReactComponent<DsTableElement, DsTableEvents, Components.DsTable, 'caption'>;

package/dist/react/ds-table.js

@@ -15,7 +15,8 @@ export const DsTable = /*@__PURE__*/ createComponent({
         onDsGroupLoadMore: 'dsGroupLoadMore',
         onDsPaginationChange: 'dsPaginationChange',
         onDsCellAction: 'dsCellAction',
-        onDsRowActivate: 'dsRowActivate'
+        onDsRowActivate: 'dsRowActivate',
+        onDsColumnsConfigChange: 'dsColumnsConfigChange'
     },
     defineCustomElement: defineDsTable
 });

package/dist/styles/table.css

@@ -285,7 +285,28 @@
   max-inline-size: 100%;
 }
 
-:where(.ds-table__caption-content > slot) {
+:where(.ds-table__caption-content--trailing) {
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: var(--dimension-space-100);
+}
+
+:where(.ds-table__caption-trailing) {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  min-inline-size: 0;
+  gap: var(--dimension-space-100);
+}
+
+:where(.ds-table__caption-leading) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__caption-leading > slot) {
   display: contents;
 }
 

package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts

@@ -76,8 +76,10 @@ export declare class ButtonUnfilled {
      *
      * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries
      *   the affordance.
-     * - `icon` — the button *is* a menu, i.e. the overflow / more-options control.
-     *   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.
+     * - `icon` — the button *is* a menu. No chevron is added, so the glyph must
+     *   convey the menu on its own. Use `Ellipses` for generic more-options;
+     *   use a specific icon when the menu has a named purpose, such as
+     *   `Preferences` for Customize table.
      *
      * Use `haspopup` directly for non-menu popups.
      */

package/dist/types/components/Menu/Menu.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ChoicePopupAnchorAlignment, type ControlSize } from '../../utils';
 import type { MenuAlign, MenuSide } from './menu-position';
-import { type MenuItemData, type MenuSection } from './menu-types';
+import { type MenuItemData, type MenuReorderDetail, type MenuSection } from './menu-types';
 export type MenuSelectionMode = 'none' | 'single';
 export type MenuSize = ControlSize;
 export declare class Menu {
@@ -38,15 +38,22 @@ export declare class Menu {
     private focusedIndex;
     private positionReady;
     private focusRingVisible;
+    private reorderFromFlat;
+    private reorderInsertBefore;
+    private reorderAnnouncement;
     dsClose: EventEmitter<void>;
     /** Emitted after the popup's exit motion is complete and its rendered content is removed. */
     dsAfterClose: EventEmitter<void>;
     dsSelect: EventEmitter<MenuItemData>;
     /** Emitted when a generic `swatch-picker` section option is chosen. */
     dsSwatchSelect: EventEmitter<string>;
+    /** Emitted after a pointer drop or keyboard move; Menu never mutates item order. */
+    dsReorder: EventEmitter<MenuReorderDetail>;
     private clickOutsideHandler;
     private closeTimer;
     private positionReadyCallback;
+    private suppressItemClick;
+    private reorderPointer;
     /**
      * Anchored placement. The choice-cell measurement stays here on purpose: the
      * inner-cell align offset and the `--dimension-menu-width-xs` floor are Menu
@@ -95,6 +102,16 @@ export declare class Menu {
     private focusItem;
     private handleItemClick;
     private handleSwatchSelect;
+    private handleReorderKey;
+    private emitReorder;
+    private flatIndexFor;
+    private announceReorder;
+    private onReorderPointerDown;
+    private onReorderPointerMove;
+    private onReorderPointerUp;
+    private onReorderPointerCancel;
+    private resolveReorderInsertBefore;
+    private clearReorderPointer;
     render(): any;
 }
 //# sourceMappingURL=Menu.d.ts.map

package/dist/types/components/Menu/menu-reorder.d.ts

@@ -0,0 +1,21 @@
+import { type MenuItemData, type MenuReorderDetail, type MenuSection } from './menu-types';
+export interface MenuReorderRange {
+    start: number;
+    end: number;
+}
+/** Contiguous reorderable run containing `index`, or null when that row cannot move. */
+export declare function menuReorderableRange(items: readonly MenuItemData[], index: number): MenuReorderRange | null;
+/**
+ * Move a reorderable row so it would be inserted before `insertBefore`.
+ * `insertBefore` is clamped to the contiguous reorderable run.
+ */
+export declare function moveReorderableMenuItemBefore(items: readonly MenuItemData[], fromIndex: number, insertBefore: number): MenuItemData[] | null;
+/** Keyboard step: move one slot within the reorderable run. */
+export declare function moveReorderableMenuItemBy(items: readonly MenuItemData[], fromIndex: number, offset: number): MenuItemData[] | null;
+export declare function locateMenuItem(sections: readonly MenuSection[], flatIndex: number): {
+    sectionIndex: number;
+    itemIndex: number;
+    items: MenuItemData[];
+} | null;
+export declare function createMenuReorderDetail(items: MenuItemData[], fromIndex: number, nextItems: MenuItemData[], sectionIndex: number): MenuReorderDetail | null;
+//# sourceMappingURL=menu-reorder.d.ts.map

package/dist/types/components/Menu/menu-types.d.ts

@@ -12,6 +12,8 @@ export interface MenuItemData {
     label: string;
     value?: string;
     subtext?: string;
+    /** Leading decorative icon. Ignored when `reorderable` is true. */
+    icon?: string;
     /** Show a supplemental brand notification dot. */
     dot?: boolean;
     /** Show a non-interactive tag at the trailing edge of the row. */
@@ -22,6 +24,16 @@ export interface MenuItemData {
     /** Render a compact switch indicator; the menu row owns interaction. */
     showSwitch?: boolean;
     switchValue?: boolean;
+    /** Prefix a drag handle and allow pointer and keyboard reorder within the contiguous reorderable run. */
+    reorderable?: boolean;
+}
+/** Next section item order after a pointer or keyboard reorder. */
+export interface MenuReorderDetail {
+    item: MenuItemData;
+    fromIndex: number;
+    toIndex: number;
+    sectionIndex: number;
+    items: MenuItemData[];
 }
 export interface MenuItemsSection {
     header?: string;

package/dist/types/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { PaginationChangeDetail } from '../Pagination/pagination-types';
-import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from './table-types';
+import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableColumnsConfigChangeDetail, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from './table-types';
 export declare class Table {
     el: HTMLElement;
     /** Stable column definitions. Assign through JavaScript. */
@@ -19,6 +19,16 @@ export declare class Table {
     caption: string;
     /** Shows a matching presentational title bar above the native table frame. */
     captionVisibility: TableCaptionVisibility;
+    /**
+     * Opt in to the table-owned column customizer. The `columns` prop remains the
+     * catalog; hidden and ordered columns are controlled separately. The trigger
+     * opens the shared Menu of live show/hide switch rows.
+     */
+    columnCustomizer: boolean;
+    /** Controlled hidden data-column identities. Action ids are ignored. */
+    hiddenColumnIds: string[];
+    /** Controlled data-column identities in display order. Omitted ids append in catalog order. */
+    columnOrder: string[];
     /**
      * Optional result summary footer. When both `displayedCount` and `totalCount`
      * are finite numbers, the table shows “Displaying {displayed} of {total}”.
@@ -91,6 +101,7 @@ export declare class Table {
     dsPaginationChange: EventEmitter<PaginationChangeDetail>;
     dsCellAction: EventEmitter<TableCellActionDetail>;
     dsRowActivate: EventEmitter<TableRowActivateDetail>;
+    dsColumnsConfigChange: EventEmitter<TableColumnsConfigChangeDetail>;
     private overflowStart;
     private overflowEnd;
     private scrollable;
@@ -102,7 +113,10 @@ export declare class Table {
     private actionMenu;
     private actionMenuInitialFocusVisible;
     private truncateTooltipLabel;
+    private columnCustomizerOpen;
+    private columnCustomizerInitialFocusVisible;
     private readonly actionMenuElementId;
+    private readonly columnCustomizerElementId;
     private truncateTooltipEl?;
     private truncateAnchor;
     private truncateTooltipBound;
@@ -149,9 +163,13 @@ export declare class Table {
     handleLoadingMoreChange(loading: boolean): void;
     handleLoadMoreErrorChange(error: string | undefined): void;
     handleHasMoreChange(hasMore: boolean, hadMore: boolean): void;
+    handleColumnCustomizerAvailability(): void;
     private get grouped();
     private get hasIncrementalState();
     private get selectable();
+    private get visibleColumns();
+    private get showsColumnCustomizer();
+    private get showsCaptionTrailing();
     private get documentStickyHeader();
     private get fixedHeight();
     private get boundedComposition();
@@ -217,6 +235,15 @@ export declare class Table {
     private get hasResultFooter();
     private renderResultFooter;
     private renderCaptionBar;
+    private renderCaptionTrailing;
+    private renderColumnCustomizerTrigger;
+    private renderColumnCustomizerMenu;
+    private toggleColumnCustomizer;
+    private openColumnCustomizer;
+    private closeColumnCustomizer;
+    private emitColumnsConfigChange;
+    private handleColumnCustomizerReorder;
+    private handleColumnCustomizerSelect;
     render(): any;
 }
 //# sourceMappingURL=Table.d.ts.map

package/dist/types/components/Table/index.d.ts

@@ -1,2 +1,2 @@
-export type { TableCaptionVisibility, TableCellAlign, TableCellAction, TableCellActionDetail, TableCellActionDivider, TableCellActionMenuEntry, TableCellActionMenuItem, TableCellBlank, TableCellEmpty, TableCellLinkTarget, TableCellIcon, TableCellIconText, TableCellImage, TableCellImageTracks, TableCellPrimaryText, TableCellSkeleton, TableCellText, TableCellTextRun, TableCellTextTrack, TableCellTag, TableCellTagVariant, TableCellValue, TableSkeletonWidth, TableColumn, TableColumnSticky, TableColumnWidth, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupIntent, TableHeaderSegment, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortDirection, TableSortState, } from './table-types';
+export type { TableCaptionVisibility, TableCellAlign, TableCellAction, TableCellActionDetail, TableCellActionDivider, TableCellActionMenuEntry, TableCellActionMenuItem, TableCellBlank, TableCellEmpty, TableCellLinkTarget, TableCellIcon, TableCellIconText, TableCellImage, TableCellImageTracks, TableCellPrimaryText, TableCellSkeleton, TableCellText, TableCellTextRun, TableCellTextTrack, TableCellTag, TableCellTagVariant, TableCellValue, TableSkeletonWidth, TableColumn, TableColumnsConfigChangeDetail, TableColumnSticky, TableColumnWidth, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupIntent, TableHeaderSegment, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortDirection, TableSortState, } from './table-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Table/table-column-customizer.d.ts

@@ -0,0 +1,33 @@
+import type { MenuItemData } from '../Menu/menu-types';
+import type { TableColumn } from './table-types';
+export declare function nextTableColumnCustomizerElementId(): string;
+export declare function isTableActionColumn(column: TableColumn): boolean;
+export declare function tableColumnCustomizerLabel(column: TableColumn): string;
+export declare function tableDataColumns(columns: TableColumn[]): TableColumn[];
+/** Data-column ids in display order. Unknown, duplicate, and action ids are ignored. */
+export declare function resolveTableColumnOrder(columns: TableColumn[], columnOrder: string[] | undefined): string[];
+/**
+ * Hidden data-column ids. Action and unknown ids are dropped. At least one data
+ * column remains visible when the catalog has any data columns.
+ */
+export declare function resolveTableHiddenColumnIds(columns: TableColumn[], hiddenColumnIds: string[] | undefined): string[];
+export declare function resolveTableVisibleColumns(columns: TableColumn[], options?: {
+    columnCustomizer?: boolean;
+    hiddenColumnIds?: string[];
+    columnOrder?: string[];
+}): TableColumn[];
+export declare function canToggleTableColumnHidden(columns: TableColumn[], hiddenColumnIds: string[] | undefined, columnId: string): boolean;
+export declare function toggleTableColumnHidden(columns: TableColumn[], hiddenColumnIds: string[] | undefined, columnId: string): string[];
+export declare function moveTableColumnOrder(order: string[], fromId: string, toId: string): string[];
+export declare function moveTableColumnInOrder(order: string[], columnId: string, offset: number): string[];
+export interface TableColumnCustomizerItem {
+    column: TableColumn;
+    label: string;
+    visible: boolean;
+    hideable: boolean;
+    reorderable: boolean;
+}
+export declare function tableColumnCustomizerItems(columns: TableColumn[], hiddenColumnIds: string[] | undefined, columnOrder: string[] | undefined): TableColumnCustomizerItem[];
+/** Menu switch rows for the table-owned column customizer. */
+export declare function tableColumnCustomizerMenuItems(columns: TableColumn[], hiddenColumnIds: string[] | undefined, columnOrder: string[] | undefined): MenuItemData[];
+//# sourceMappingURL=table-column-customizer.d.ts.map

package/dist/types/components/Table/table-types.d.ts

@@ -340,6 +340,11 @@ export interface TableGroupCollapseChangeDetail {
 export interface TableRowActivateDetail {
     rowId: string;
 }
+/** Controlled show/hide and data-column order for the table-owned customizer. */
+export interface TableColumnsConfigChangeDetail {
+    hiddenColumnIds: string[];
+    columnOrder: string[];
+}
 /** Controlled top-level pagination state. Rows or groups contain only the active page. */
 export interface TablePaginationState extends PaginationState {
     /** Change to request one fresh fitted-capacity snapshot for the current query shape. */

package/dist/types/components.d.ts

@@ -35,7 +35,7 @@ import { AnchoredAlign, AnchoredSide } from "./utils/anchored-position";
 import { IconColor as IconColor1, IconSize } from "./components/Icon/Icon";
 import { InputSize, InputType, InputWidth } from "./components/Input/Input";
 import { LoaderColor, LoaderSize } from "./components/Loader/Loader";
-import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
+import { MenuItemData, MenuReorderDetail, MenuSection } from "./components/Menu/menu-types";
 import { MenuSelectionMode, MenuSize } from "./components/Menu/Menu";
 import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ChoicePopupAnchorAlignment, ControlInsetDepth as ControlInsetDepth1 } from "./utils";
@@ -64,7 +64,7 @@ import { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from
 import { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 import { SwitchSize } from "./components/Switch/Switch";
 import { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
-import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
+import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableColumnsConfigChangeDetail, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 import { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -99,7 +99,7 @@ export { AnchoredAlign, AnchoredSide } from "./utils/anchored-position";
 export { IconColor as IconColor1, IconSize } from "./components/Icon/Icon";
 export { InputSize, InputType, InputWidth } from "./components/Input/Input";
 export { LoaderColor, LoaderSize } from "./components/Loader/Loader";
-export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
+export { MenuItemData, MenuReorderDetail, MenuSection } from "./components/Menu/menu-types";
 export { MenuSelectionMode, MenuSize } from "./components/Menu/Menu";
 export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ChoicePopupAnchorAlignment, ControlInsetDepth as ControlInsetDepth1 } from "./utils";
@@ -128,7 +128,7 @@ export { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from
 export { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 export { SwitchSize } from "./components/Switch/Switch";
 export { TabBackground, TabGroupSize as TabGroupSize1, TabGroupWidth } from "./components/TabGroup/TabGroup";
-export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
+export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableColumnsConfigChangeDetail, TableDataMode, TableGroup, TableGroupCollapseChangeDetail, TableGroupingState, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
 export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 export { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -690,7 +690,7 @@ export namespace Components {
          */
         "hasBorder": boolean;
         /**
-          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu, i.e. the overflow / more-options control.   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.  Use `haspopup` directly for non-menu popups.
+          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu. No chevron is added, so the glyph must   convey the menu on its own. Use `Ellipses` for generic more-options;   use a specific icon when the menu has a named purpose, such as   `Preferences` for Customize table.  Use `haspopup` directly for non-menu popups.
           * @default false
          */
         "hasMenu": boolean;
@@ -2859,6 +2859,16 @@ export namespace Components {
           * @default []
          */
         "collapsedGroupIds": string[];
+        /**
+          * Opt in to the table-owned column customizer. The `columns` prop remains the catalog; hidden and ordered columns are controlled separately. The trigger opens the shared Menu of live show/hide switch rows.
+          * @default false
+         */
+        "columnCustomizer": boolean;
+        /**
+          * Controlled data-column identities in display order. Omitted ids append in catalog order.
+          * @default []
+         */
+        "columnOrder": string[];
         /**
           * Stable column definitions. Assign through JavaScript.
           * @default []
@@ -2954,6 +2964,11 @@ export namespace Components {
           * Fixed height for the complete header, table frame, and footer composition.
          */
         "height": string | number | undefined;
+        /**
+          * Controlled hidden data-column identities. Action ids are ignored.
+          * @default []
+         */
+        "hiddenColumnIds": string[];
         /**
           * Reset key for a new query/group/sort dataset.
           * @default 'default'
@@ -3982,6 +3997,7 @@ declare global {
         "dsAfterClose": void;
         "dsSelect": MenuItemData;
         "dsSwatchSelect": string;
+        "dsReorder": MenuReorderDetail;
     }
     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;
@@ -4484,6 +4500,7 @@ declare global {
         "dsPaginationChange": PaginationChangeDetail;
         "dsCellAction": TableCellActionDetail;
         "dsRowActivate": TableRowActivateDetail;
+        "dsColumnsConfigChange": TableColumnsConfigChangeDetail;
     }
     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;
@@ -5262,7 +5279,7 @@ declare namespace LocalJSX {
          */
         "hasBorder"?: boolean;
         /**
-          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu, i.e. the overflow / more-options control.   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.  Use `haspopup` directly for non-menu popups.
+          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu. No chevron is added, so the glyph must   convey the menu on its own. Use `Ellipses` for generic more-options;   use a specific icon when the menu has a named purpose, such as   `Preferences` for Customize table.  Use `haspopup` directly for non-menu popups.
           * @default false
          */
         "hasMenu"?: boolean;
@@ -6105,6 +6122,10 @@ declare namespace LocalJSX {
          */
         "onDsAfterClose"?: (event: DsMenuCustomEvent<void>) => void;
         "onDsClose"?: (event: DsMenuCustomEvent<void>) => void;
+        /**
+          * Emitted after a pointer drop or keyboard move; Menu never mutates item order.
+         */
+        "onDsReorder"?: (event: DsMenuCustomEvent<MenuReorderDetail>) => void;
         "onDsSelect"?: (event: DsMenuCustomEvent<MenuItemData>) => void;
         /**
           * Emitted when a generic `swatch-picker` section option is chosen.
@@ -7645,6 +7666,16 @@ declare namespace LocalJSX {
           * @default []
          */
         "collapsedGroupIds"?: string[];
+        /**
+          * Opt in to the table-owned column customizer. The `columns` prop remains the catalog; hidden and ordered columns are controlled separately. The trigger opens the shared Menu of live show/hide switch rows.
+          * @default false
+         */
+        "columnCustomizer"?: boolean;
+        /**
+          * Controlled data-column identities in display order. Omitted ids append in catalog order.
+          * @default []
+         */
+        "columnOrder"?: string[];
         /**
           * Stable column definitions. Assign through JavaScript.
           * @default []
@@ -7740,6 +7771,11 @@ declare namespace LocalJSX {
           * Fixed height for the complete header, table frame, and footer composition.
          */
         "height"?: string | number | undefined;
+        /**
+          * Controlled hidden data-column identities. Action ids are ignored.
+          * @default []
+         */
+        "hiddenColumnIds"?: string[];
         /**
           * Reset key for a new query/group/sort dataset.
           * @default 'default'
@@ -7777,6 +7813,7 @@ declare namespace LocalJSX {
          */
         "maxHeight"?: string | number | undefined;
         "onDsCellAction"?: (event: DsTableCustomEvent<TableCellActionDetail>) => void;
+        "onDsColumnsConfigChange"?: (event: DsTableCustomEvent<TableColumnsConfigChangeDetail>) => void;
         "onDsGroupCollapseChange"?: (event: DsTableCustomEvent<TableGroupCollapseChangeDetail>) => void;
         "onDsGroupLoadMore"?: (event: DsTableCustomEvent<TableGroupLoadMoreDetail>) => void;
         "onDsLoadMore"?: (event: DsTableCustomEvent<TableLoadMoreDetail>) => void;
@@ -8752,6 +8789,7 @@ declare namespace LocalJSX {
     interface DsTableAttributes {
         "caption": string;
         "captionVisibility": TableCaptionVisibility;
+        "columnCustomizer": boolean;
         "displayedCount": number | undefined;
         "totalCount": number | undefined;
         "resultSummaryLabel": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.6.0",
+  "version": "14.7.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",