@ds-mo/ui 14.6.0 → 14.8.0

package/dist/react/components.d.ts

@@ -65,6 +65,8 @@ export { DsSlider } from "./ds-slider.js";
 export { DsSwatchPicker } from "./ds-swatch-picker.js";
 export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
+export { DsTableSavedViews } from "./ds-table-saved-views.js";
+export { DsTableToolbar } from "./ds-table-toolbar.js";
 export { DsTable } from "./ds-table.js";
 export { DsTag } from "./ds-tag.js";
 export { DsText } from "./ds-text.js";

package/dist/react/components.js

@@ -66,6 +66,8 @@ export { DsSlider } from "./ds-slider.js";
 export { DsSwatchPicker } from "./ds-swatch-picker.js";
 export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
+export { DsTableSavedViews } from "./ds-table-saved-views.js";
+export { DsTableToolbar } from "./ds-table-toolbar.js";
 export { DsTable } from "./ds-table.js";
 export { DsTag } from "./ds-tag.js";
 export { DsText } from "./ds-text.js";

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-select.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 DsSelectCustomEvent, type SelectOptionActionDetail, type SelectValue } from "@ds-mo/ui";
+import { type DsSelectCustomEvent, type SelectOptionActionDetail, type SelectOptionSubtextActionDetail, type SelectValue } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsSelect as DsSelectElement } from "@ds-mo/ui/dist/components/ds-select.js";
 export type DsSelectEvents = {
@@ -12,5 +12,6 @@ export type DsSelectEvents = {
     onDsOpenChange: EventName<DsSelectCustomEvent<boolean>>;
     onDsFooterAction: EventName<DsSelectCustomEvent<void>>;
     onDsOptionAction: EventName<DsSelectCustomEvent<SelectOptionActionDetail>>;
+    onDsOptionSubtextAction: EventName<DsSelectCustomEvent<SelectOptionSubtextActionDetail>>;
 };
 export declare const DsSelect: StencilReactComponent<DsSelectElement, DsSelectEvents, Components.DsSelect>;

package/dist/react/ds-select.js

@@ -12,7 +12,8 @@ export const DsSelect = /*@__PURE__*/ createComponent({
         onDsClear: 'dsClear',
         onDsOpenChange: 'dsOpenChange',
         onDsFooterAction: 'dsFooterAction',
-        onDsOptionAction: 'dsOptionAction'
+        onDsOptionAction: 'dsOptionAction',
+        onDsOptionSubtextAction: 'dsOptionSubtextAction'
     },
     defineCustomElement: defineDsSelect
 });

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

@@ -0,0 +1,17 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * 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 DsTableSavedViewsCustomEvent, type TableSavedViewChangeDetail, type TableSavedViewCreateDetail, type TableSavedViewDiscardDetail, type TableSavedViewRemoveDetail, type TableSavedViewRenameDetail, type TableSavedViewSaveDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTableSavedViews as DsTableSavedViewsElement } from "@ds-mo/ui/dist/components/ds-table-saved-views.js";
+export type DsTableSavedViewsEvents = {
+    onDsViewChange: EventName<DsTableSavedViewsCustomEvent<TableSavedViewChangeDetail>>;
+    onDsViewCreate: EventName<DsTableSavedViewsCustomEvent<TableSavedViewCreateDetail>>;
+    onDsViewRename: EventName<DsTableSavedViewsCustomEvent<TableSavedViewRenameDetail>>;
+    onDsViewRemove: EventName<DsTableSavedViewsCustomEvent<TableSavedViewRemoveDetail>>;
+    onDsViewSave: EventName<DsTableSavedViewsCustomEvent<TableSavedViewSaveDetail>>;
+    onDsViewDiscard: EventName<DsTableSavedViewsCustomEvent<TableSavedViewDiscardDetail>>;
+};
+export declare const DsTableSavedViews: StencilReactComponent<DsTableSavedViewsElement, DsTableSavedViewsEvents, Components.DsTableSavedViews>;

package/dist/react/ds-table-saved-views.js

@@ -0,0 +1,19 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsTableSavedViews as DsTableSavedViewsElement, defineCustomElement as defineDsTableSavedViews } from "@ds-mo/ui/dist/components/ds-table-saved-views.js";
+export const DsTableSavedViews = /*@__PURE__*/ createComponent({
+    tagName: 'ds-table-saved-views',
+    elementClass: DsTableSavedViewsElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsViewChange: 'dsViewChange',
+        onDsViewCreate: 'dsViewCreate',
+        onDsViewRename: 'dsViewRename',
+        onDsViewRemove: 'dsViewRemove',
+        onDsViewSave: 'dsViewSave',
+        onDsViewDiscard: 'dsViewDiscard'
+    },
+    defineCustomElement: defineDsTableSavedViews
+});

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

@@ -0,0 +1,9 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { StencilReactComponent } from './react-runtime.js';
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTableToolbar as DsTableToolbarElement } from "@ds-mo/ui/dist/components/ds-table-toolbar.js";
+export type DsTableToolbarEvents = NonNullable<unknown>;
+export declare const DsTableToolbar: StencilReactComponent<DsTableToolbarElement, DsTableToolbarEvents, Components.DsTableToolbar>;

package/dist/react/ds-table-toolbar.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsTableToolbar as DsTableToolbarElement, defineCustomElement as defineDsTableToolbar } from "@ds-mo/ui/dist/components/ds-table-toolbar.js";
+export const DsTableToolbar = /*@__PURE__*/ createComponent({
+    tagName: 'ds-table-toolbar',
+    elementClass: DsTableToolbarElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineDsTableToolbar
+});

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 TableDataModeChangeDetail, 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,7 @@ export type DsTableEvents = {
     onDsPaginationChange: EventName<DsTableCustomEvent<PaginationChangeDetail>>;
     onDsCellAction: EventName<DsTableCustomEvent<TableCellActionDetail>>;
     onDsRowActivate: EventName<DsTableCustomEvent<TableRowActivateDetail>>;
+    onDsColumnsConfigChange: EventName<DsTableCustomEvent<TableColumnsConfigChangeDetail>>;
+    onDsDataModeChange: EventName<DsTableCustomEvent<TableDataModeChangeDetail>>;
 };
 export declare const DsTable: StencilReactComponent<DsTableElement, DsTableEvents, Components.DsTable, 'caption'>;

package/dist/react/ds-table.js

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

package/dist/styles/table.css

@@ -25,6 +25,18 @@
     + var(--dimension-space-025)
     + var(--dimension-size-250)
   );
+  --_table-image-column-inline-size: calc(
+    ((var(--_table-image-block-size) * 16) / 9)
+    + (var(--_table-cell-padding-inline) * 2)
+  );
+  --_table-image-column-inline-size-multi: calc(
+    ((var(--_table-image-block-size-multi) * 16) / 9)
+    + (var(--_table-cell-padding-inline) * 2)
+  );
+  --_table-image-column-inline-size-triple: calc(
+    ((var(--_table-image-block-size-triple) * 16) / 9)
+    + (var(--_table-cell-padding-inline) * 2)
+  );
   /*
    * Wrapping primary on a 1-track cell occupies later tracks instead of a
    * private leading scale. Keep body-medium size; add the 2px stack gap to
@@ -285,7 +297,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/Select/Select.d.ts

@@ -14,6 +14,11 @@ export interface SelectOptionActionDetail {
     anchorId: string;
     originalEvent: MouseEvent;
 }
+export interface SelectOptionSubtextActionDetail {
+    value: string;
+    actionValue: string;
+    originalEvent: MouseEvent;
+}
 export declare class Select {
     el: HTMLElement;
     internals: ElementInternals;
@@ -101,6 +106,8 @@ export declare class Select {
     dsFooterAction: EventEmitter<void>;
     /** Emitted when an option's contextual ellipsis action is activated. */
     dsOptionAction: EventEmitter<SelectOptionActionDetail>;
+    /** Emitted when an option's supporting text action is activated. */
+    dsOptionSubtextAction: EventEmitter<SelectOptionSubtextActionDetail>;
     private activeIndex;
     private searchTerm;
     private formDisabled;

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

@@ -1,2 +1,2 @@
-export type { SelectBackground, SelectIndicator, SelectOption, SelectSection, SelectSize, SelectValue, SelectWidth, } from './Select';
+export type { SelectBackground, SelectIndicator, SelectOption, SelectOptionActionDetail, SelectOptionSubtextActionDetail, SelectSection, SelectSize, SelectValue, SelectWidth, } from './Select';
 //# sourceMappingURL=index.d.ts.map

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, TableDataModeChangeDetail, 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}”.
@@ -56,6 +66,12 @@ export declare class Table {
     emptyCellLabel: string;
     /** Top-level data-window strategy. Group member loading remains group-owned. */
     dataMode: TableDataMode;
+    /** Opt in to the table-owned control for choosing between supported data modes. */
+    dataModeSwitcher: boolean;
+    dataModeSwitcherLabel: string;
+    dataModeMenuLabel: string;
+    infiniteModeLabel: string;
+    paginationModeLabel: string;
     /** Controlled top-level pagination state. Required when dataMode is pagination. */
     pagination: TablePaginationState | null;
     loadMoreMode: TableLoadMoreMode;
@@ -91,6 +107,8 @@ export declare class Table {
     dsPaginationChange: EventEmitter<PaginationChangeDetail>;
     dsCellAction: EventEmitter<TableCellActionDetail>;
     dsRowActivate: EventEmitter<TableRowActivateDetail>;
+    dsColumnsConfigChange: EventEmitter<TableColumnsConfigChangeDetail>;
+    dsDataModeChange: EventEmitter<TableDataModeChangeDetail>;
     private overflowStart;
     private overflowEnd;
     private scrollable;
@@ -102,7 +120,13 @@ export declare class Table {
     private actionMenu;
     private actionMenuInitialFocusVisible;
     private truncateTooltipLabel;
+    private columnCustomizerOpen;
+    private columnCustomizerInitialFocusVisible;
+    private dataModeSwitcherOpen;
+    private dataModeSwitcherInitialFocusVisible;
     private readonly actionMenuElementId;
+    private readonly columnCustomizerElementId;
+    private readonly dataModeSwitcherElementId;
     private truncateTooltipEl?;
     private truncateAnchor;
     private truncateTooltipBound;
@@ -149,9 +173,15 @@ export declare class Table {
     handleLoadingMoreChange(loading: boolean): void;
     handleLoadMoreErrorChange(error: string | undefined): void;
     handleHasMoreChange(hasMore: boolean, hadMore: boolean): void;
+    handleColumnCustomizerAvailability(): void;
+    handleDataModeSwitcherAvailability(): void;
     private get grouped();
     private get hasIncrementalState();
     private get selectable();
+    private get visibleColumns();
+    private get showsColumnCustomizer();
+    private get showsDataModeSwitcher();
+    private get showsCaptionTrailing();
     private get documentStickyHeader();
     private get fixedHeight();
     private get boundedComposition();
@@ -217,6 +247,21 @@ export declare class Table {
     private get hasResultFooter();
     private renderResultFooter;
     private renderCaptionBar;
+    private renderCaptionTrailing;
+    private renderDataModeSwitcherTrigger;
+    private renderDataModeSwitcherMenu;
+    private toggleDataModeSwitcher;
+    private openDataModeSwitcher;
+    private closeDataModeSwitcher;
+    private handleDataModeSwitcherSelect;
+    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, TableDataModeChangeDetail, 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-data-mode-switcher.d.ts

@@ -0,0 +1,9 @@
+import type { MenuItemData } from '../Menu/menu-types';
+import type { TableDataMode } from './table-types';
+export declare function nextTableDataModeSwitcherElementId(): string;
+export declare function tableDataModeMenuItems(dataMode: TableDataMode, labels: {
+    infinite: string;
+    pagination: string;
+}): MenuItemData[];
+export declare function tableDataModeFromMenuItem(item: MenuItemData): TableDataMode | null;
+//# sourceMappingURL=table-data-mode-switcher.d.ts.map

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

@@ -10,6 +10,9 @@ export type TableColumnSticky = 'start' | 'end';
 export type TableCaptionVisibility = 'visible' | 'hidden';
 export type TableLoadMoreMode = 'auto' | 'manual';
 export type TableDataMode = 'infinite' | 'pagination';
+export interface TableDataModeChangeDetail {
+    dataMode: TableDataMode;
+}
 export type TableLoadMoreReason = 'auto' | 'manual' | 'retry';
 export type TableColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /** Visible line budget before a text track ellipsizes. */
@@ -251,6 +254,8 @@ export interface TableColumn {
     sortable?: boolean;
     /** Preferred TokoMo table-column width. Numbers remain available for exceptional custom pixel widths. */
     size?: TableColumnWidth | number;
+    /** Derive a fixed image-column width from the matching 1, 2, or 3 track cell geometry. Ignored when size is set. */
+    imageTracks?: TableCellImageTracks;
     /** Minimum accepted preferred width in CSS pixels. */
     minSize?: number;
     /** Maximum accepted preferred width in CSS pixels. */
@@ -340,6 +345,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/TableSavedViews/TableSavedViews.d.ts

@@ -0,0 +1,61 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { TableSavedView, TableSavedViewChangeDetail, TableSavedViewCreateDetail, TableSavedViewDiscardDetail, TableSavedViewRemoveDetail, TableSavedViewRenameDetail, TableSavedViewSaveDetail } from './table-saved-views-types';
+export declare class TableSavedViews {
+    el: HTMLElement;
+    /** Application-owned custom saved views. Assign arrays through the JavaScript property. */
+    views: TableSavedView[];
+    /** ID of the controlled active view, including the default view ID. */
+    value: string;
+    /** Whether the current table state differs from the selected view. */
+    dirty: boolean;
+    /** ID used for the built-in default view. */
+    defaultViewId: string;
+    /** Label used for the built-in default view. */
+    defaultViewLabel: string;
+    /** Accessible name for the saved-views select. */
+    label: string;
+    /** Trigger label shown while the default view is selected. */
+    triggerLabel: string;
+    /** Footer action label that opens the create-view dialog. */
+    createLabel: string;
+    /** Emitted when a view selection is requested. */
+    dsViewChange: EventEmitter<TableSavedViewChangeDetail>;
+    /** Emitted after a valid create-view name is submitted. */
+    dsViewCreate: EventEmitter<TableSavedViewCreateDetail>;
+    /** Emitted after a valid renamed view name is submitted. */
+    dsViewRename: EventEmitter<TableSavedViewRenameDetail>;
+    /** Emitted when a custom view removal is requested. */
+    dsViewRemove: EventEmitter<TableSavedViewRemoveDetail>;
+    /** Emitted when changes to the active custom view should replace its stored payload. */
+    dsViewSave: EventEmitter<TableSavedViewSaveDetail>;
+    /** Emitted when the active custom view's stored payload should be restored. */
+    dsViewDiscard: EventEmitter<TableSavedViewDiscardDetail>;
+    private actionViewId;
+    private actionAnchorId;
+    private actionMenuOpen;
+    private actionMenuInitialFocusVisible;
+    private dialogOpen;
+    private dialogMode;
+    private dialogViewId;
+    private nameDraft;
+    private nameError;
+    private readonly componentId;
+    private readonly selectId;
+    private readonly actionMenuId;
+    private readonly fieldId;
+    private readonly inputId;
+    private readonly actionItems;
+    private get selectedCustomView();
+    private get dialogView();
+    private get sections();
+    private handleViewChange;
+    private handleSubtextAction;
+    private handleOptionAction;
+    private handleActionSelect;
+    private openDialog;
+    private validateName;
+    private submitDialog;
+    private finishDialogClose;
+    render(): any;
+}
+//# sourceMappingURL=TableSavedViews.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { TableSavedView, TableSavedViewChangeDetail, TableSavedViewCreateDetail, TableSavedViewDiscardDetail, TableSavedViewRemoveDetail, TableSavedViewRenameDetail, TableSavedViewSaveDetail, } from './table-saved-views-types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/TableSavedViews/table-saved-views-types.d.ts

@@ -0,0 +1,24 @@
+export interface TableSavedView {
+    id: string;
+    label: string;
+}
+export interface TableSavedViewChangeDetail {
+    viewId: string;
+}
+export interface TableSavedViewCreateDetail {
+    name: string;
+}
+export interface TableSavedViewRenameDetail {
+    viewId: string;
+    name: string;
+}
+export interface TableSavedViewRemoveDetail {
+    viewId: string;
+}
+export interface TableSavedViewSaveDetail {
+    viewId: string;
+}
+export interface TableSavedViewDiscardDetail {
+    viewId: string;
+}
+//# sourceMappingURL=table-saved-views-types.d.ts.map

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

@@ -0,0 +1,6 @@
+export declare class TableToolbar {
+    /** Accessible name for the grouped table controls. */
+    label: string;
+    render(): any;
+}
+//# sourceMappingURL=TableToolbar.d.ts.map