@ds-mo/ui 15.5.1 → 15.6.0

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

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

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

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

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

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

package/dist/mcp-data/registry/time-picker.json

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

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

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

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

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

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

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

package/dist/mcp-data/registry/typing-indicator.json

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

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

@@ -3,13 +3,14 @@
  * 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, type MenuReorderDetail } from "@ds-mo/ui";
+import { type DsMenuCustomEvent, type MenuItemData, type MenuItemToggleDetail, 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 = {
     onDsClose: EventName<DsMenuCustomEvent<void>>;
     onDsAfterClose: EventName<DsMenuCustomEvent<void>>;
     onDsSelect: EventName<DsMenuCustomEvent<MenuItemData>>;
+    onDsItemToggle: EventName<DsMenuCustomEvent<MenuItemToggleDetail>>;
     onDsSwatchSelect: EventName<DsMenuCustomEvent<string>>;
     onDsReorder: EventName<DsMenuCustomEvent<MenuReorderDetail>>;
 };

package/dist/react/ds-menu.js

@@ -11,6 +11,7 @@ export const DsMenu = /*@__PURE__*/ createComponent({
         onDsClose: 'dsClose',
         onDsAfterClose: 'dsAfterClose',
         onDsSelect: 'dsSelect',
+        onDsItemToggle: 'dsItemToggle',
         onDsSwatchSelect: 'dsSwatchSelect',
         onDsReorder: 'dsReorder'
     },

package/dist/styles/table.css

@@ -44,6 +44,7 @@
   --_table-sticky-border: var(--ds-table-sticky-border, var(--color-border-tertiary));
   --_table-border-strong: var(--ds-table-border-strong, var(--color-border-secondary));
   --_table-radius: var(--ds-table-radius, var(--ds-radius-table, var(--dimension-radius-050)));
+  --_table-frame-inset: var(--ds-table-frame-inset, var(--dimension-space-200));
   --_table-header-min-block-size: var(--ds-table-header-min-block-size, var(--dimension-size-400));
   --_table-head-block-size: var(--_table-header-min-block-size);
   --_table-row-min-block-size: var(--ds-table-row-min-block-size, var(--dimension-size-500));
@@ -421,6 +422,42 @@
   border-end-end-radius: 0;
 }
 
+:where(.ds-table--chrome-edge-to-edge > .ds-table__caption-bar),
+:where(.ds-table--chrome-edge-to-edge > .ds-table__footer) {
+  border-radius: 0;
+}
+
+:where(.ds-table--chrome-edge-to-edge .ds-table__frame),
+:where(.ds-table--chrome-edge-to-edge .ds-table__viewport) {
+  border-radius: var(--_table-radius);
+}
+
+:where(.ds-table--chrome-edge-to-edge .ds-table__frame) {
+  max-inline-size: none;
+  margin: var(--_table-frame-inset);
+  outline: var(--dimension-stroke-width-012) solid var(--_table-column-border);
+  outline-offset: 0;
+}
+
+:where(.ds-table--bounded.ds-table--chrome-edge-to-edge .ds-table__frame) {
+  block-size: auto;
+}
+
+:where(.ds-table--chrome-edge-to-edge > .ds-table__footer) {
+  position: relative;
+  border-block-start: 0;
+}
+
+:where(.ds-table--chrome-edge-to-edge > .ds-table__footer)::before {
+  content: '';
+  position: absolute;
+  inset-block-start: calc(-1 * var(--dimension-stroke-width-012));
+  inset-inline: 0;
+  block-size: var(--dimension-stroke-width-012);
+  background: var(--_table-column-border);
+  pointer-events: none;
+}
+
 :where(.ds-table__selection-column) {
   inline-size: var(--_table-selection-column-inline-size);
   width: var(--_table-selection-column-inline-size);
@@ -1976,6 +2013,10 @@
 :where(.ds-table--cards-active .ds-table__viewport) {
   border-radius: 0;
 }
+:where(.ds-table--chrome-edge-to-edge.ds-table--cards-active .ds-table__frame) {
+  margin: 0;
+  outline: 0;
+}
 :where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__table) {
   display: block;
   box-sizing: border-box;

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

@@ -38,6 +38,8 @@ export declare class DataPreferences {
     grouping: DataGroupingState | null;
     hiddenFieldIds: string[];
     fieldOrder: string[];
+    /** Controlled user-pinned table-column identities. Ignored for toggle-only catalogs. */
+    pinnedFieldIds: string[];
     /** Render shared content without its popup or trigger. */
     embedded: boolean;
     activeTab: PreferencesTab;
@@ -53,6 +55,7 @@ export declare class DataPreferences {
     dsFieldsConfigChange: EventEmitter<DataFieldsConfigChangeDetail>;
     /** Catalog rows as domain-neutral items, so a non-table catalog needs no column shape. */
     private catalogItems;
+    private customizeMenuSections;
     private open;
     private tab;
     private pos;

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 MenuReorderDetail, type MenuSection } from './menu-types';
+import { type MenuItemData, type MenuItemToggleDetail, type MenuReorderDetail, type MenuSection } from './menu-types';
 export type MenuSelectionMode = 'none' | 'single';
 export type MenuSize = ControlSize;
 export declare class Menu {
@@ -52,6 +52,8 @@ export declare class Menu {
     /** Emitted after the popup's exit motion is complete and its rendered content is removed. */
     dsAfterClose: EventEmitter<void>;
     dsSelect: EventEmitter<MenuItemData>;
+    /** Emitted when a row's separate trailing toggle requests a controlled state change. */
+    dsItemToggle: EventEmitter<MenuItemToggleDetail>;
     /** 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. */
@@ -94,6 +96,8 @@ export declare class Menu {
     private get flatItems();
     /** Rich preference content is a non-modal dialog, not an ARIA action menu. */
     private get hasCompositeSections();
+    private sectionsHaveCompositeControls;
+    private sectionUsesInsetDivider;
     private cancelPositionRetry;
     private cancelLivePositionUpdate;
     /** Reposition after the current scroll/layout frame without hiding the open popup. */

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

@@ -8,6 +8,26 @@ export interface MenuItemTagData {
     contrast?: TagContrast;
     rounded?: boolean;
 }
+export interface MenuItemTrailingToggleData {
+    /** Icon-only toggle glyph. */
+    icon: string;
+    /** Accessible name describing the requested state change. */
+    label: string;
+    /** Controlled toggle state. */
+    pressed: boolean;
+    /** Keep the toggle visible but unavailable. */
+    isInactive?: boolean;
+}
+export interface MenuItemActionData {
+    /** Stable action identity for consumer event handling. */
+    id: string;
+    /** Icon-only action glyph. */
+    icon: string;
+    /** Accessible name describing the action. */
+    label: string;
+    /** Keep the action visible but unavailable. */
+    isInactive?: boolean;
+}
 export interface MenuItemData {
     label: string;
     value?: string;
@@ -26,6 +46,18 @@ export interface MenuItemData {
     switchValue?: boolean;
     /** Prefix a drag handle and allow pointer and keyboard reorder within the contiguous reorderable run. */
     reorderable?: boolean;
+    /** Keep the drag handle visible as an inactive alignment affordance when reordering is unavailable. */
+    reorderHandleInactive?: boolean;
+    /** Append a separate unfilled icon toggle after a decorative divider. */
+    trailingToggle?: MenuItemTrailingToggleData;
+    /** Append independent unfilled icon actions while the row owns the shared hover surface. */
+    trailingActions?: MenuItemActionData[];
+}
+export interface MenuItemToggleDetail {
+    item: MenuItemData;
+    pressed: boolean;
+    /** Identifies an independent trailing action; omitted for the legacy toggle control. */
+    action?: MenuItemActionData;
 }
 /** Next section item order after a pointer or keyboard reorder. */
 export interface MenuReorderDetail {
@@ -37,6 +69,10 @@ export interface MenuReorderDetail {
 }
 export interface MenuItemsSection {
     header?: string;
+    /** Secondary heading beneath a shared parent section heading. */
+    subheader?: string;
+    /** Separate this subsection from the previous one with an inset divider. */
+    insetDividerBefore?: boolean;
     items: MenuItemData[];
 }
 export interface MenuSwatchPickerSection {

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

@@ -2,13 +2,15 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import type { TableCellSpan, TableCellRange, TableCellsChangeDetail } from './table-types';
 import type { PaginationChangeDetail } from '../Pagination/pagination-types';
 import type { MenuItemData } from '../Menu/menu-types';
-import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, DataFieldsConfigChangeDetail, TableDataMode, TableDataModeChangeDetail, DataGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, DataGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, DataSortChangeDetail, DataSortState } from './table-types';
+import type { TableCaptionVisibility, TableChromeLayout, TableCellActionDetail, TableColumn, DataFieldsConfigChangeDetail, TableDataMode, TableDataModeChangeDetail, DataGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, DataGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, DataSortChangeDetail, DataSortState } from './table-types';
 export declare class Table {
     el: HTMLElement;
     /** Stable column definitions. Assign through JavaScript. */
     columns: TableColumn[];
-    /** Opt-in native card presentation below the 768px table container breakpoint. */
+    /** Opt-in native card presentation below the 768px browser viewport breakpoint. */
     responsiveLayout: 'scroll' | 'cards';
+    /** Keep all table chrome contained, or let the caption and footer span edge to edge around an inset data frame. */
+    chromeLayout: TableChromeLayout;
     /** Explicit report merges; invalid combinations leave the original cells visible. */
     cellSpans: TableCellSpan[];
     /** Table is read-only; edit uses per-cell pencil buttons; grid adds cell selection and keyboard navigation. Grouped tables remain read-only. */
@@ -52,6 +54,8 @@ export declare class Table {
     hiddenFieldIds: string[];
     /** Controlled data-column identities in display order. Omitted ids append in catalog order. */
     fieldOrder: string[];
+    /** Controlled user-pinned data-column identities. Hidden columns retain their pin state. */
+    pinnedFieldIds: string[];
     /**
      * Optional result summary footer. When both `displayedCount` and `totalCount`
      * are finite numbers, infinite mode shows “Displaying {displayed} of {total}”.
@@ -226,6 +230,7 @@ export declare class Table {
     private fitObservedViewport;
     private fitObservedTable;
     private fitMeasurementPending;
+    private cardViewportQuery;
     private readonly bodyRenderer;
     private readonly layoutController;
     private readonly loadController;
@@ -244,6 +249,9 @@ export declare class Table {
     scrollRowIntoView(rowId: string): Promise<boolean>;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private readonly handleCardViewportChange;
+    private connectCardViewportQuery;
+    private disconnectCardViewportQuery;
     private syncHeaderSlotPresence;
     private connectHeaderSlotObserver;
     private syncFooterSlotPresence;
@@ -367,6 +375,7 @@ export declare class Table {
     private closeColumnCustomizer;
     private emitColumnsConfigChange;
     private handleColumnCustomizerReorder;
+    private handleColumnCustomizerAction;
     private handleColumnCustomizerSelect;
     render(): any;
 }

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

@@ -1,2 +1,2 @@
-export type { TableCellEditor, TableCellDecoration, TableCellSpan, TableCellAddress, TableCellRange, TableCellsChangeDetail, TableCaptionVisibility, TableCellAlign, TableCellAction, TableCellActionDetail, TableCellActionDivider, TableCellActionMenuEntry, TableCellActionMenuItem, TableCellBlank, TableCellEmpty, TableCellLinkTarget, TableCellIcon, TableCellIconText, TableCellScoreText, TableCellImage, TableCellImageTracks, TableCellPrimaryText, TableCellSkeleton, TableCellText, TableCellTextRun, TableCellTextTrack, TableCellTag, TableCellTagItem, TableCellTags, TableCellTagVariant, TableCellValue, TableSkeletonWidth, TableColumn, DataFieldsConfigChangeDetail, TableColumnSticky, TableColumnWidth, TableDataMode, TableDataModeChangeDetail, DataGroup, TableGroupAccessory, TableGroupHero, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupIntent, TableHeaderSegment, DataGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, DataSortChangeDetail, DataSortDirection, DataSortState, } from './table-types';
+export type { TableCellEditor, TableCellDecoration, TableCellSpan, TableCellAddress, TableCellRange, TableCellsChangeDetail, TableCaptionVisibility, TableChromeLayout, TableCellAlign, TableCellAction, TableCellActionDetail, TableCellActionDivider, TableCellActionMenuEntry, TableCellActionMenuItem, TableCellBlank, TableCellEmpty, TableCellLinkTarget, TableCellIcon, TableCellIconText, TableCellScoreText, TableCellImage, TableCellImageTracks, TableCellPrimaryText, TableCellSkeleton, TableCellText, TableCellTextRun, TableCellTextTrack, TableCellTag, TableCellTagItem, TableCellTags, TableCellTagVariant, TableCellValue, TableSkeletonWidth, TableColumn, DataFieldsConfigChangeDetail, TableColumnSticky, TableColumnWidth, TableDataMode, TableDataModeChangeDetail, DataGroup, TableGroupAccessory, TableGroupHero, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupIntent, TableHeaderSegment, DataGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableLoadMoreReason, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, DataSortChangeDetail, DataSortDirection, DataSortState, } from './table-types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,9 +1,13 @@
-import type { MenuItemData } from '../Menu/menu-types';
+import type { MenuItemData, MenuItemsSection } 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[];
+/** User-managed pinned ids. Fixed start/end columns remain column-owned. */
+export declare function resolveTablePinnedFieldIds(columns: TableColumn[], pinnedFieldIds: string[] | undefined, fieldOrder?: string[]): string[];
+/** Fixed-start, user-pinned, unpinned, then fixed-end data columns. */
+export declare function resolveTableConfiguredColumnOrder(columns: TableColumn[], fieldOrder: string[] | undefined, pinnedFieldIds: string[] | undefined): string[];
 /** Data-column ids in display order. Unknown, duplicate, and action ids are ignored. */
 export declare function resolveTableColumnOrder(columns: TableColumn[], fieldOrder: string[] | undefined): string[];
 /**
@@ -15,6 +19,7 @@ export declare function resolveTableVisibleColumns(columns: TableColumn[], optio
     columnCustomizer?: boolean;
     hiddenFieldIds?: string[];
     fieldOrder?: string[];
+    pinnedFieldIds?: string[];
 }): TableColumn[];
 export declare function canToggleTableColumnHidden(columns: TableColumn[], hiddenFieldIds: string[] | undefined, fieldId: string): boolean;
 export declare function toggleTableColumnHidden(columns: TableColumn[], hiddenFieldIds: string[] | undefined, fieldId: string): string[];
@@ -26,8 +31,22 @@ export interface TableColumnCustomizerItem {
     visible: boolean;
     hideable: boolean;
     reorderable: boolean;
+    pinned: boolean;
+    pinnable: boolean;
 }
-export declare function tableColumnCustomizerItems(columns: TableColumn[], hiddenFieldIds: string[] | undefined, fieldOrder: string[] | undefined): TableColumnCustomizerItem[];
-/** Menu switch rows for the table-owned column customizer. */
-export declare function tableColumnCustomizerMenuItems(columns: TableColumn[], hiddenFieldIds: string[] | undefined, fieldOrder: string[] | undefined): MenuItemData[];
+export declare function tableColumnCustomizerItems(columns: TableColumn[], hiddenFieldIds: string[] | undefined, fieldOrder: string[] | undefined, pinnedFieldIds?: string[] | undefined): TableColumnCustomizerItem[];
+/** Menu action rows for the table-owned column customizer. */
+export declare function tableColumnCustomizerMenuItems(columns: TableColumn[], hiddenFieldIds: string[] | undefined, fieldOrder: string[] | undefined, pinnedFieldIds?: string[] | undefined): MenuItemData[];
+/** Column subgroups retain one parent heading while enforcing drag boundaries. */
+export declare function tableColumnCustomizerSections(columns: TableColumn[], hiddenFieldIds: string[] | undefined, fieldOrder: string[] | undefined, pinnedFieldIds?: string[] | undefined): MenuItemsSection[];
+export interface TableFieldsConfiguration {
+    hiddenFieldIds: string[];
+    fieldOrder: string[];
+    pinnedFieldIds: string[];
+}
+export declare function resolveTableFieldsConfiguration(columns: TableColumn[], hiddenFieldIds: string[] | undefined, fieldOrder: string[] | undefined, pinnedFieldIds: string[] | undefined): TableFieldsConfiguration;
+/** Pin appends to the pinned block; unpinning inserts at the start of unpinned columns. */
+export declare function toggleTableColumnPinned(columns: TableColumn[], hiddenFieldIds: string[] | undefined, fieldOrder: string[] | undefined, pinnedFieldIds: string[] | undefined, fieldId: string): TableFieldsConfiguration;
+/** Apply a drag result to only its pinned or unpinned partition. */
+export declare function reorderTableColumnPartition(columns: TableColumn[], hiddenFieldIds: string[] | undefined, fieldOrder: string[] | undefined, pinnedFieldIds: string[] | undefined, reorderedIds: string[]): TableFieldsConfiguration;
 //# sourceMappingURL=table-column-customizer.d.ts.map

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

@@ -20,9 +20,10 @@ export interface TableLayoutControllerOptions {
     elements: () => TableLayoutElements;
     mode: () => TableLayoutMode;
     overflowChanged: (state: TableOverflowState) => void;
-    narrowChanged?: (narrow: boolean) => void;
     verticalEdgeWheel?: (deltaY: number) => boolean;
 }
+export declare const TABLE_CARD_VIEWPORT_BREAKPOINT = 768;
+export declare function isTableCardViewport(inlineSize: number): boolean;
 export interface TableLayoutMetricInput {
     viewportInlineSize: number;
     viewportBlockSize: number;

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

@@ -11,6 +11,7 @@ export type TableCellAlign = 'start' | 'center' | 'end';
 export type TableCellLinkTarget = '_self' | '_blank';
 export type TableColumnSticky = 'start' | 'end';
 export type TableCaptionVisibility = 'visible' | 'hidden';
+export type TableChromeLayout = 'contained' | 'edge-to-edge';
 export type TableLoadMoreMode = 'auto' | 'manual';
 export type TableDataMode = 'infinite' | 'pagination' | 'virtual';
 export interface TableDataModeChangeDetail {
@@ -489,10 +490,11 @@ export interface TableGroupCollapseChangeDetail {
 export interface TableRowActivateDetail {
     rowId: string;
 }
-/** Controlled show/hide and data-column order for the table-owned customizer. */
+/** Controlled visibility, display order, and user pinning for the table-owned customizer. */
 export interface DataFieldsConfigChangeDetail {
     hiddenFieldIds: string[];
     fieldOrder: string[];
+    pinnedFieldIds: string[];
 }
 /** Controlled top-level pagination state. Rows or groups contain only the active page. */
 export interface TablePaginationState extends PaginationState {

package/dist/types/components.d.ts

@@ -36,11 +36,11 @@ import { CheckboxGroupSize } from "./components/CheckboxGroup/CheckboxGroup";
 import { ChipSize, ChipState } from "./components/Chip/Chip";
 import { ChoicePopupAnchorAlignment, ControlInsetDepth as ControlInsetDepth1 } from "./utils";
 import { DataField } from "./utils/data-field";
-import { MenuItemData, MenuReorderDetail, MenuSection } from "./components/Menu/menu-types";
+import { MenuItemData, MenuItemToggleDetail, MenuReorderDetail, MenuSection } from "./components/Menu/menu-types";
 import { DataCustomizeChangeDetail } from "./components/DataCustomize/DataCustomize";
 import { FilterMenuChangeDetail, FilterMenuFilter, FilterMenuMatchModeChangeDetail, FilterMenuMatchModes, FilterMenuValues } from "./components/FilterMenu/FilterMenu";
 import { DataGroupOption } from "./components/DataGroup/DataGroup";
-import { DataFieldsConfigChangeDetail, DataGroup, DataGroupingState, DataSortChangeDetail, DataSortState, TableCaptionVisibility, TableCellActionDetail, TableCellRange, TableCellsChangeDetail, TableCellSpan, TableColumn, TableDataMode, TableDataModeChangeDetail, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode } from "./components/Table/table-types";
+import { DataFieldsConfigChangeDetail, DataGroup, DataGroupingState, DataSortChangeDetail, DataSortState, TableCaptionVisibility, TableCellActionDetail, TableCellRange, TableCellsChangeDetail, TableCellSpan, TableChromeLayout, TableColumn, TableDataMode, TableDataModeChangeDetail, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode } from "./components/Table/table-types";
 import { DataGroupOption as DataGroupOption1 } from "./components/DataGroup/DataGroup";
 import { PreferencesTab } from "./components/DataPreferences/DataPreferences";
 import { DataSavedView, DataSavedViewChangeDetail, DataSavedViewCreateDetail, DataSavedViewDiscardDetail, DataSavedViewRemoveDetail, DataSavedViewRenameDetail, DataSavedViewSaveDetail } from "./components/DataSavedViews/data-saved-views-types";
@@ -124,11 +124,11 @@ export { CheckboxGroupSize } from "./components/CheckboxGroup/CheckboxGroup";
 export { ChipSize, ChipState } from "./components/Chip/Chip";
 export { ChoicePopupAnchorAlignment, ControlInsetDepth as ControlInsetDepth1 } from "./utils";
 export { DataField } from "./utils/data-field";
-export { MenuItemData, MenuReorderDetail, MenuSection } from "./components/Menu/menu-types";
+export { MenuItemData, MenuItemToggleDetail, MenuReorderDetail, MenuSection } from "./components/Menu/menu-types";
 export { DataCustomizeChangeDetail } from "./components/DataCustomize/DataCustomize";
 export { FilterMenuChangeDetail, FilterMenuFilter, FilterMenuMatchModeChangeDetail, FilterMenuMatchModes, FilterMenuValues } from "./components/FilterMenu/FilterMenu";
 export { DataGroupOption } from "./components/DataGroup/DataGroup";
-export { DataFieldsConfigChangeDetail, DataGroup, DataGroupingState, DataSortChangeDetail, DataSortState, TableCaptionVisibility, TableCellActionDetail, TableCellRange, TableCellsChangeDetail, TableCellSpan, TableColumn, TableDataMode, TableDataModeChangeDetail, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode } from "./components/Table/table-types";
+export { DataFieldsConfigChangeDetail, DataGroup, DataGroupingState, DataSortChangeDetail, DataSortState, TableCaptionVisibility, TableCellActionDetail, TableCellRange, TableCellsChangeDetail, TableCellSpan, TableChromeLayout, TableColumn, TableDataMode, TableDataModeChangeDetail, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode } from "./components/Table/table-types";
 export { DataGroupOption as DataGroupOption1 } from "./components/DataGroup/DataGroup";
 export { PreferencesTab } from "./components/DataPreferences/DataPreferences";
 export { DataSavedView, DataSavedViewChangeDetail, DataSavedViewCreateDetail, DataSavedViewDiscardDetail, DataSavedViewRemoveDetail, DataSavedViewRenameDetail, DataSavedViewSaveDetail } from "./components/DataSavedViews/data-saved-views-types";
@@ -1774,6 +1774,11 @@ export namespace Components {
           * @default {}
          */
         "matchModes": FilterMenuMatchModes;
+        /**
+          * Controlled user-pinned table-column identities. Ignored for toggle-only catalogs.
+          * @default []
+         */
+        "pinnedFieldIds": string[];
         /**
           * @default null
          */
@@ -4366,6 +4371,11 @@ export namespace Components {
           * @default []
          */
         "cellSpans": TableCellSpan[];
+        /**
+          * Keep all table chrome contained, or let the caption and footer span edge to edge around an inset data frame.
+          * @default 'contained'
+         */
+        "chromeLayout": TableChromeLayout;
         /**
           * Replace opted-in table-owned caption controls with same-size visual skeletons.
           * @default false
@@ -4573,7 +4583,12 @@ export namespace Components {
          */
         "paginationModeLabel": string;
         /**
-          * Opt-in native card presentation below the 768px table container breakpoint.
+          * Controlled user-pinned data-column identities. Hidden columns retain their pin state.
+          * @default []
+         */
+        "pinnedFieldIds": string[];
+        /**
+          * Opt-in native card presentation below the 768px browser viewport breakpoint.
           * @default 'scroll'
          */
         "responsiveLayout": 'scroll' | 'cards';
@@ -6164,6 +6179,7 @@ declare global {
         "dsClose": void;
         "dsAfterClose": void;
         "dsSelect": MenuItemData;
+        "dsItemToggle": MenuItemToggleDetail;
         "dsSwatchSelect": string;
         "dsReorder": MenuReorderDetail;
     }
@@ -8732,6 +8748,11 @@ declare namespace LocalJSX {
         "onDsGroupClear"?: (event: DsDataPreferencesCustomEvent<void>) => void;
         "onDsPreferencesTabChange"?: (event: DsDataPreferencesCustomEvent<PreferencesTab>) => void;
         "onDsSortChange"?: (event: DsDataPreferencesCustomEvent<DataSortChangeDetail>) => void;
+        /**
+          * Controlled user-pinned table-column identities. Ignored for toggle-only catalogs.
+          * @default []
+         */
+        "pinnedFieldIds"?: string[];
         /**
           * @default null
          */
@@ -9658,6 +9679,10 @@ declare namespace LocalJSX {
          */
         "onDsAfterClose"?: (event: DsMenuCustomEvent<void>) => void;
         "onDsClose"?: (event: DsMenuCustomEvent<void>) => void;
+        /**
+          * Emitted when a row's separate trailing toggle requests a controlled state change.
+         */
+        "onDsItemToggle"?: (event: DsMenuCustomEvent<MenuItemToggleDetail>) => void;
         /**
           * Emitted after a pointer drop or keyboard move; Menu never mutates item order.
          */
@@ -11558,6 +11583,11 @@ declare namespace LocalJSX {
           * @default []
          */
         "cellSpans"?: TableCellSpan[];
+        /**
+          * Keep all table chrome contained, or let the caption and footer span edge to edge around an inset data frame.
+          * @default 'contained'
+         */
+        "chromeLayout"?: TableChromeLayout;
         /**
           * Replace opted-in table-owned caption controls with same-size visual skeletons.
           * @default false
@@ -11778,7 +11808,12 @@ declare namespace LocalJSX {
          */
         "paginationModeLabel"?: string;
         /**
-          * Opt-in native card presentation below the 768px table container breakpoint.
+          * Controlled user-pinned data-column identities. Hidden columns retain their pin state.
+          * @default []
+         */
+        "pinnedFieldIds"?: string[];
+        /**
+          * Opt-in native card presentation below the 768px browser viewport breakpoint.
           * @default 'scroll'
          */
         "responsiveLayout"?: 'scroll' | 'cards';
@@ -13231,6 +13266,7 @@ declare namespace LocalJSX {
     }
     interface DsTableAttributes {
         "responsiveLayout": 'scroll' | 'cards';
+        "chromeLayout": TableChromeLayout;
         "interactionMode": 'table' | 'edit' | 'grid';
         "caption": string;
         "captionVisibility": TableCaptionVisibility;

package/dist/vue/ds-data-preferences.js

@@ -21,6 +21,7 @@ export const DsDataPreferences = /*@__PURE__*/ defineContainer('ds-data-preferen
     'grouping',
     'hiddenFieldIds',
     'fieldOrder',
+    'pinnedFieldIds',
     'embedded',
     'activeTab',
     'label',

package/dist/vue/ds-menu.js

@@ -26,12 +26,14 @@ export const DsMenu = /*@__PURE__*/ defineContainer('ds-menu', defineDsMenu, [
     'dsClose',
     'dsAfterClose',
     'dsSelect',
+    'dsItemToggle',
     'dsSwatchSelect',
     'dsReorder'
 ], [
     'dsClose',
     'dsAfterClose',
     'dsSelect',
+    'dsItemToggle',
     'dsSwatchSelect',
     'dsReorder'
 ]);

package/dist/vue/ds-table.js

@@ -6,6 +6,7 @@ import { defineCustomElement as defineDsTable } from '@ds-mo/ui/components/ds-ta
 export const DsTable = /*@__PURE__*/ defineContainer('ds-table', defineDsTable, [
     'columns',
     'responsiveLayout',
+    'chromeLayout',
     'cellSpans',
     'interactionMode',
     'cellRange',
@@ -24,6 +25,7 @@ export const DsTable = /*@__PURE__*/ defineContainer('ds-table', defineDsTable,
     'hideColumnCustomizerTrigger',
     'hiddenFieldIds',
     'fieldOrder',
+    'pinnedFieldIds',
     'displayedCount',
     'totalCount',
     'resultSummaryLabel',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "15.5.1",
+  "version": "15.6.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -133,7 +133,7 @@
     "@angular/core": ">=19 <23",
     "@angular/forms": ">=19 <23",
     "@ds-mo/icons": "^8.1.1",
-    "@ds-mo/tokens": "^6.6.1",
+    "@ds-mo/tokens": "^6.7.0",
     "@eslint/css": "^2.0.0",
     "eslint": "^10.7.0",
     "react": "^18 || ^19",
@@ -179,7 +179,7 @@
     "@csstools/css-tokenizer": "^4.0.0",
     "@csstools/media-query-list-parser": "^5.0.0",
     "@ds-mo/icons": "^8.1.1",
-    "@ds-mo/tokens": "^6.6.1",
+    "@ds-mo/tokens": "^6.7.0",
     "@eslint/css": "^2.0.0",
     "@eslint/js": "^10.0.1",
     "@fontsource-variable/inter": "^5.3.0",