@ds-mo/ui 15.5.1 → 15.7.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/components.d.ts

@@ -68,6 +68,7 @@ export { DsMobileHeader } from "./ds-mobile-header.js";
 export { DsMobileSectionSwitcher } from "./ds-mobile-section-switcher.js";
 export { DsMobileSheetNav } from "./ds-mobile-sheet-nav.js";
 export { DsModal } from "./ds-modal.js";
+export { DsNavigationTabGroup } from "./ds-navigation-tab-group.js";
 export { DsPagination } from "./ds-pagination.js";
 export { DsPanelNav } from "./ds-panel-nav.js";
 export { DsPanelSubNav } from "./ds-panel-sub-nav.js";
@@ -79,6 +80,7 @@ export { DsRadioTile } from "./ds-radio-tile.js";
 export { DsRadio } from "./ds-radio.js";
 export { DsScore } from "./ds-score.js";
 export { DsScrollOverlay } from "./ds-scroll-overlay.js";
+export { DsSelectToggle } from "./ds-select-toggle.js";
 export { DsSelect } from "./ds-select.js";
 export { DsSettingRowCheckbox } from "./ds-setting-row-checkbox.js";
 export { DsSettingRowRadio } from "./ds-setting-row-radio.js";

package/dist/react/components.js

@@ -69,6 +69,7 @@ export { DsMobileHeader } from "./ds-mobile-header.js";
 export { DsMobileSectionSwitcher } from "./ds-mobile-section-switcher.js";
 export { DsMobileSheetNav } from "./ds-mobile-sheet-nav.js";
 export { DsModal } from "./ds-modal.js";
+export { DsNavigationTabGroup } from "./ds-navigation-tab-group.js";
 export { DsPagination } from "./ds-pagination.js";
 export { DsPanelNav } from "./ds-panel-nav.js";
 export { DsPanelSubNav } from "./ds-panel-sub-nav.js";
@@ -80,6 +81,7 @@ export { DsRadioTile } from "./ds-radio-tile.js";
 export { DsRadio } from "./ds-radio.js";
 export { DsScore } from "./ds-score.js";
 export { DsScrollOverlay } from "./ds-scroll-overlay.js";
+export { DsSelectToggle } from "./ds-select-toggle.js";
 export { DsSelect } from "./ds-select.js";
 export { DsSettingRowCheckbox } from "./ds-setting-row-checkbox.js";
 export { DsSettingRowRadio } from "./ds-setting-row-radio.js";

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/react/ds-navigation-tab-group.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 DsNavigationTabGroupCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsNavigationTabGroup as DsNavigationTabGroupElement } from "@ds-mo/ui/dist/components/ds-navigation-tab-group.js";
+export type DsNavigationTabGroupEvents = {
+    onDsChange: EventName<DsNavigationTabGroupCustomEvent<string>>;
+};
+export declare const DsNavigationTabGroup: StencilReactComponent<DsNavigationTabGroupElement, DsNavigationTabGroupEvents, Components.DsNavigationTabGroup>;

package/dist/react/ds-navigation-tab-group.js

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

package/dist/react/ds-select-toggle.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 DsSelectToggleCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsSelectToggle as DsSelectToggleElement } from "@ds-mo/ui/dist/components/ds-select-toggle.js";
+export type DsSelectToggleEvents = {
+    onDsChange: EventName<DsSelectToggleCustomEvent<string>>;
+};
+export declare const DsSelectToggle: StencilReactComponent<DsSelectToggleElement, DsSelectToggleEvents, Components.DsSelectToggle>;

package/dist/react/ds-select-toggle.js

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

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/NavigationTabGroup/NavigationTabGroup.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { TabGroupSize, TabGroupWidth } from '../TabGroup/TabGroup';
+import type { TabGroupItem } from '../TabGroup/tab-item-utils';
+export declare class NavigationTabGroup {
+    /** Currently selected local view. User activation updates this value. */
+    value: string;
+    tabs: TabGroupItem[];
+    size: TabGroupSize;
+    width: TabGroupWidth;
+    ariaLabel: string | null;
+    ariaLabelledby: string | undefined;
+    dsChange: EventEmitter<string>;
+    private handleChange;
+    render(): any;
+}
+//# sourceMappingURL=NavigationTabGroup.d.ts.map

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

@@ -0,0 +1,46 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ControlWidth } from '../../utils';
+export interface SelectToggleOption {
+    value: string;
+    label: string;
+    icon?: string;
+}
+export type SelectToggleVariant = 'label' | 'icon' | 'icon-label';
+export type SelectToggleSize = 'sm' | 'md' | 'lg';
+export declare class SelectToggle {
+    el: HTMLElement;
+    /** Exactly two or three choices, each with a unique value and accessible label. */
+    options: SelectToggleOption[];
+    /** Current choice. User activation updates this value and emits dsChange. */
+    value: string;
+    /** Show the current label, icon, or both. Icon variants require an icon on each choice. */
+    variant: SelectToggleVariant;
+    /** Collapse an icon-label choice to its icon in a narrow table caption or data toolbar. */
+    collapseLabel: boolean;
+    /** Control density: small, medium, or large; the trailing indicator scales with it. */
+    size: SelectToggleSize;
+    /** Hug the content or fill the parent. */
+    width: ControlWidth;
+    /** Show an inset border; both treatments keep the transparent unfilled surface. */
+    hasBorder: boolean;
+    /** Prevent interaction. */
+    isInactive: boolean;
+    /** Optional stable context prepended to the changing accessible choice name. */
+    ariaLabel: string | null;
+    dsChange: EventEmitter<string>;
+    private captionCompact;
+    private captionCompactDisconnect;
+    private hasLoaded;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onCollapseLabelChange(): void;
+    reconcileValue(): void;
+    private get validOptions();
+    private advance;
+    private syncCaptionCompactObserver;
+    private disconnectCaptionCompactObserver;
+    render(): any;
+}
+//# sourceMappingURL=SelectToggle.d.ts.map

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

@@ -25,7 +25,7 @@ export declare class Slider {
     showValue: boolean;
     size: SliderSize;
     orientation: SliderOrientation;
-    /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */
+    /** Align the inner orb edge with full-width rail endpoints, or its center with inset rail endpoints. */
     thumbAlignment: SliderThumbAlignment;
     name: string | undefined;
     form: string | undefined;

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

@@ -12,8 +12,8 @@ export declare class TabGroup {
     size: TabGroupSize;
     /** Width fit — hug content (default) or fill the parent with equal-width segments. */
     width: TabGroupWidth;
-    /** Show the segmented control's outer background, border, and inset. */
-    presentation: 'segmented' | 'tabs';
+    /** Visual treatment; use NavigationTabGroup for the outset navigation presentation. */
+    presentation: 'segmented' | 'tabs' | 'navigation';
     hasContainer: boolean;
     background: TabBackground | undefined;
     ariaLabel: string | null;

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. */
@@ -38,6 +40,8 @@ export declare class Table {
     caption: string;
     /** Shows a matching presentational title bar above the native table frame. */
     captionVisibility: TableCaptionVisibility;
+    /** Replace only the data frame with application-owned content; caption and footer remain shared. */
+    alternateView: boolean;
     /**
      * Opt in to the table-owned column customizer. The `columns` prop remains the
      * catalog; hidden and ordered columns are controlled separately. The trigger
@@ -52,6 +56,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}”.
@@ -154,6 +160,7 @@ export declare class Table {
     private viewportFitSettled;
     private headerPresent;
     private headerUsesToolbar;
+    private captionTrailingPresent;
     private footerSlotPresence;
     private fitPageSize;
     private actionMenu;
@@ -226,6 +233,7 @@ export declare class Table {
     private fitObservedViewport;
     private fitObservedTable;
     private fitMeasurementPending;
+    private cardViewportQuery;
     private readonly bodyRenderer;
     private readonly layoutController;
     private readonly loadController;
@@ -244,6 +252,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 +378,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 {