@ds-mo/ui 14.15.0 → 14.16.0

package/dist/react/components.d.ts

@@ -67,6 +67,7 @@ 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 { DsTableSort } from "./ds-table-sort.js";
 export { DsTableToolbar } from "./ds-table-toolbar.js";
 export { DsTable } from "./ds-table.js";
 export { DsTag } from "./ds-tag.js";

package/dist/react/components.js

@@ -68,6 +68,7 @@ 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 { DsTableSort } from "./ds-table-sort.js";
 export { DsTableToolbar } from "./ds-table-toolbar.js";
 export { DsTable } from "./ds-table.js";
 export { DsTag } from "./ds-tag.js";

package/dist/react/ds-table-sort.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 DsTableSortCustomEvent, type TableSortChangeDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTableSort as DsTableSortElement } from "@ds-mo/ui/dist/components/ds-table-sort.js";
+export type DsTableSortEvents = {
+    onDsSortChange: EventName<DsTableSortCustomEvent<TableSortChangeDetail>>;
+};
+export declare const DsTableSort: StencilReactComponent<DsTableSortElement, DsTableSortEvents, Components.DsTableSort>;

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

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

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

@@ -70,6 +70,12 @@ export declare class ButtonUnfilled {
      * active styling, and makes activation emit dsChange with the requested state.
      */
     pressed: boolean | undefined;
+    /**
+     * Collapse the visible label and chevron to an icon-only control when the
+     * owning `ds-table` caption is narrower than 900px. The trigger omits those
+     * parts rather than clipping them.
+     */
+    collapseLabel: boolean;
     /**
      * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers
      * both menu-button shapes:
@@ -79,7 +85,7 @@ export declare class ButtonUnfilled {
      * - `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.
+     *   `Table` for Customize table.
      *
      * Use `haspopup` directly for non-menu popups.
      */
@@ -91,10 +97,19 @@ export declare class ButtonUnfilled {
     focusTabIndex?: number;
     dsClick: EventEmitter<MouseEvent>;
     dsChange: EventEmitter<boolean>;
+    private captionCompact;
     private buttonEl;
+    private captionCompactDisconnect;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onCollapseLabelChange(): void;
     setFocus(): Promise<void>;
     private handleClick;
+    private get captionIconOnly();
+    private get visualVariant();
     private get showDot();
+    private syncCaptionCompactObserver;
+    private disconnectCaptionCompactObserver;
     private get resolvedHaspopup();
     private get doubleInset();
     /** Only popup triggers hold a pressed visual while expanded. */

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

@@ -42,6 +42,11 @@ export declare class FilterMenu {
     hasBorder: boolean;
     /** Show selected interaction fill when one or more criteria are active. */
     activeFill: boolean;
+    /**
+     * Opt into table-caption icon-only chrome below 900px. The trigger omits its
+     * visible label and chevron; keep an accessible name via aria-label.
+     */
+    collapseLabel: boolean;
     /** ID applied to the internal select trigger. */
     inputId: string | undefined;
     /** Direct accessible name for the internal select trigger. */
@@ -80,6 +85,7 @@ export declare class FilterMenu {
     private pos;
     private focusRingVisible;
     private activeOptionIndex;
+    private captionCompact;
     /** Requests a controlled value replacement without closing the popup. */
     dsChange: EventEmitter<FilterMenuChangeDetail>;
     /** Requests that the consumer clear every filter value. */
@@ -97,10 +103,12 @@ export declare class FilterMenu {
     private triggerElement;
     private pendingInitialFocusVisible;
     private closeTimer;
+    private captionCompactDisconnect;
     private closingSnapshot;
     private readonly position;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    onCollapseLabelChange(): void;
     onOpenChange(isOpen: boolean): void;
     onPositionInputChange(): void;
     handleKeyDown(event: KeyboardEvent): void;
@@ -132,6 +140,9 @@ export declare class FilterMenu {
     private toggleMultiple;
     private selectOption;
     private renderOptions;
+    private get captionIconOnly();
+    private syncCaptionCompactObserver;
+    private disconnectCaptionCompactObserver;
     render(): any;
 }
 //# sourceMappingURL=FilterMenu.d.ts.map

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

@@ -60,6 +60,11 @@ export declare class Select {
     isLoading: boolean;
     /** Show the selected interaction fill when a valid value exists. */
     activeFill: boolean;
+    /**
+     * Opt into table-caption icon-only chrome below 900px. The trigger omits its
+     * visible label and chevron; keep an accessible name via aria-label.
+     */
+    collapseLabel: boolean;
     /** Show the surface-aware inset border, including focused and invalid strokes. */
     hasBorder: boolean;
     /** Optional trigger prefix icon name. */
@@ -115,6 +120,7 @@ export declare class Select {
     private positionReady;
     private focusRingVisible;
     private compactFooterSummary;
+    private captionCompact;
     private readonly generatedId;
     private readonly listboxId;
     private readonly errorId;
@@ -126,11 +132,13 @@ export declare class Select {
     private footerResizeObserver?;
     private observedFooterContentElement?;
     private footerMeasurementFrame?;
+    private captionCompactDisconnect;
     private createController;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
     disconnectedCallback(): void;
+    onCollapseLabelChange(): void;
     syncFormValue(): void;
     onLoadingChange(): void;
     onPopupAlignChange(): void;
@@ -164,6 +172,9 @@ export declare class Select {
     private readonly handleListKeyDown;
     private readonly handleTriggerKeyDown;
     private renderOption;
+    private get captionIconOnly();
+    private syncCaptionCompactObserver;
+    private disconnectCaptionCompactObserver;
     render(): any;
 }
 //# sourceMappingURL=Select.d.ts.map

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

@@ -128,6 +128,7 @@ export declare class Table {
     private actionMenu;
     private actionMenuInitialFocusVisible;
     private truncateTooltipLabel;
+    private captionCompact;
     private columnCustomizerOpen;
     private columnCustomizerInitialFocusVisible;
     private dataModeSwitcherOpen;
@@ -163,6 +164,7 @@ export declare class Table {
     private stickyGroupConnected;
     private headerSlotObserver;
     private footerSlotObserver;
+    private captionCompactDisconnect;
     private fitResizeObserver;
     private fitObservedViewport;
     private fitObservedTable;
@@ -212,7 +214,10 @@ export declare class Table {
     private get containedScroll();
     private connectFitObserver;
     private disconnectFitObserver;
+    private connectCaptionCompactObserver;
+    private disconnectCaptionCompactObserver;
     private readonly syncFitPageSize;
+    handleWindowPaginationKeyDown(event: KeyboardEvent): void;
     private handlePaginationKeyDown;
     private currentLoadedRows;
     private currentLoadedRowCount;

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

@@ -11,6 +11,8 @@ export declare function resolveTableColumnOrder(columns: TableColumn[], columnOr
  * column remains visible when the catalog has any data columns.
  */
 export declare function resolveTableHiddenColumnIds(columns: TableColumn[], hiddenColumnIds: string[] | undefined): string[];
+/** True when hidden ids or data-column order differ from the catalog default. */
+export declare function isTableColumnsCustomized(columns: TableColumn[], hiddenColumnIds: string[] | undefined, columnOrder: string[] | undefined): boolean;
 export declare function resolveTableVisibleColumns(columns: TableColumn[], options?: {
     columnCustomizer?: boolean;
     hiddenColumnIds?: string[];

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

@@ -0,0 +1,16 @@
+/** True when Left/Right should stay with an editable or choice control. */
+export declare function paginationShortcutBlockedByPath(path: readonly unknown[]): boolean;
+export declare function isDocumentRootNode(node: unknown): boolean;
+/** True when `ancestor` contains `descendant` in the composed tree, including slots. */
+export declare function composedContains(ancestor: unknown, descendant: unknown): boolean;
+/**
+ * Window-level pagination arrows apply when focus is inside the table or on a
+ * containing page scroller (for example ShellApp's routed-content region).
+ * Document body stays with the host app so it can forward a single event.
+ */
+export declare function shouldHandleContainingPagePaginationShortcut(input: {
+    origin: unknown;
+    table: unknown;
+    eventPath: readonly unknown[];
+}): boolean;
+//# sourceMappingURL=table-pagination-shortcut.d.ts.map

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

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { TableColumn, TableSortChangeDetail, TableSortState } from '../Table/table-types';
+export declare class TableSort {
+    private el;
+    /** Catalog used to derive sortable fields, including compound header segments. */
+    columns: TableColumn[];
+    /** Controlled table sort. Header sorting and this menu share the same value. */
+    sort: TableSortState | null;
+    /** Accessible name for the trigger and menu. */
+    ariaLabel: string | null;
+    dsSortChange: EventEmitter<TableSortChangeDetail>;
+    private menuOpen;
+    private initialFocusVisible;
+    private readonly componentId;
+    private readonly triggerId;
+    private readonly menuId;
+    setFocus(): Promise<void>;
+    render(): any;
+    private toggle;
+    private open;
+    private close;
+    private handleSelect;
+}
+//# sourceMappingURL=TableSort.d.ts.map

package/dist/types/components/TableSort/table-sort-menu.d.ts

@@ -0,0 +1,15 @@
+import type { MenuItemData, MenuSection } from '../Menu/menu-types';
+import type { TableColumn, TableSortState } from '../Table/table-types';
+export declare const TABLE_SORT_DIRECTION_ASC = "direction:asc";
+export declare const TABLE_SORT_DIRECTION_DESC = "direction:desc";
+export interface TableSortField {
+    id: string;
+    label: string;
+}
+/** Sortable data fields from the catalog, including compound header segments. */
+export declare function tableSortFields(columns: readonly TableColumn[]): TableSortField[];
+export declare function tableSortMenuSections(columns: readonly TableColumn[], sort: TableSortState | null | undefined): MenuSection[];
+export declare function tableSortStatesEqual(left: TableSortState | null | undefined, right: TableSortState | null | undefined): boolean;
+/** Next controlled sort from a Sort menu selection. Does not toggle like a header click. */
+export declare function nextTableSortStateFromMenuItem(columns: readonly TableColumn[], current: TableSortState | null | undefined, item: MenuItemData): TableSortState | null;
+//# sourceMappingURL=table-sort-menu.d.ts.map

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

@@ -1,6 +1,12 @@
 export declare class TableToolbar {
+    private el;
     /** Accessible name for the grouped table controls. */
     label: string;
+    private captionControlObserver;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     render(): any;
+    private connectCaptionControlObserver;
+    private syncCaptionControls;
 }
 //# sourceMappingURL=TableToolbar.d.ts.map

package/dist/types/components.d.ts

@@ -674,6 +674,11 @@ export namespace Components {
           * Actual parent surface context. Omit on primary and secondary surfaces.
          */
         "background": ButtonUnfilledBackground | undefined;
+        /**
+          * Collapse the visible label and chevron to an icon-only control when the owning `ds-table` caption is narrower than 900px. The trigger omits those parts rather than clipping them.
+          * @default false
+         */
+        "collapseLabel": boolean;
         "controls": string | undefined;
         /**
           * Show a notification dot at the top-right of the icon zone (icon variant only).
@@ -694,7 +699,7 @@ export namespace Components {
          */
         "hasBorder": boolean;
         /**
-          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu. 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.
+          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu. No chevron is added, so the glyph must   convey the menu on its own. Use `Ellipses` for generic more-options;   use a specific icon when the menu has a named purpose, such as   `Table` for Customize table.  Use `haspopup` directly for non-menu popups.
           * @default false
          */
         "hasMenu": boolean;
@@ -1222,6 +1227,11 @@ export namespace Components {
           * @default 'Clear'
          */
         "clearLabel": string;
+        /**
+          * Opt into table-caption icon-only chrome below 900px. The trigger omits its visible label and chevron; keep an accessible name via aria-label.
+          * @default false
+         */
+        "collapseLabel": boolean;
         /**
           * Product-owned filter categories and option definitions.
           * @default []
@@ -1248,7 +1258,7 @@ export namespace Components {
         "inputId": string | undefined;
         /**
           * Accessible name for the non-modal filter dialog.
-          * @default 'Filters'
+          * @default 'Filter'
          */
         "menuLabel": string;
         /**
@@ -1278,7 +1288,7 @@ export namespace Components {
         "size": FilterMenuSize;
         /**
           * Select trigger text. The selected count is appended automatically.
-          * @default 'Filters'
+          * @default 'Filter'
          */
         "triggerLabel": string;
         /**
@@ -2305,6 +2315,11 @@ export namespace Components {
           * @default 'Clear'
          */
         "clearLabel": string;
+        /**
+          * Opt into table-caption icon-only chrome below 900px. The trigger omits its visible label and chevron; keep an accessible name via aria-label.
+          * @default false
+         */
+        "collapseLabel": boolean;
         /**
           * Native disabled state.
           * @default false
@@ -3177,6 +3192,24 @@ export namespace Components {
          */
         "views": TableSavedView[];
     }
+    interface DsTableSort {
+        /**
+          * Accessible name for the trigger and menu.
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Catalog used to derive sortable fields, including compound header segments.
+          * @default []
+         */
+        "columns": TableColumn[];
+        "setFocus": () => Promise<void>;
+        /**
+          * Controlled table sort. Header sorting and this menu share the same value.
+          * @default null
+         */
+        "sort": TableSortState | null;
+    }
     interface DsTableToolbar {
         /**
           * Accessible name for the grouped table controls.
@@ -3631,6 +3664,10 @@ export interface DsTableSavedViewsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTableSavedViewsElement;
 }
+export interface DsTableSortCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTableSortElement;
+}
 export interface DsTagCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTagElement;
@@ -4666,6 +4703,23 @@ declare global {
         prototype: HTMLDsTableSavedViewsElement;
         new (): HTMLDsTableSavedViewsElement;
     };
+    interface HTMLDsTableSortElementEventMap {
+        "dsSortChange": TableSortChangeDetail;
+    }
+    interface HTMLDsTableSortElement extends Components.DsTableSort, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTableSortElementEventMap>(type: K, listener: (this: HTMLDsTableSortElement, ev: DsTableSortCustomEvent<HTMLDsTableSortElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsTableSortElementEventMap>(type: K, listener: (this: HTMLDsTableSortElement, ev: DsTableSortCustomEvent<HTMLDsTableSortElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsTableSortElement: {
+        prototype: HTMLDsTableSortElement;
+        new (): HTMLDsTableSortElement;
+    };
     interface HTMLDsTableToolbarElement extends Components.DsTableToolbar, HTMLStencilElement {
     }
     var HTMLDsTableToolbarElement: {
@@ -4819,6 +4873,7 @@ declare global {
         "ds-tab-group": HTMLDsTabGroupElement;
         "ds-table": HTMLDsTableElement;
         "ds-table-saved-views": HTMLDsTableSavedViewsElement;
+        "ds-table-sort": HTMLDsTableSortElement;
         "ds-table-toolbar": HTMLDsTableToolbarElement;
         "ds-tag": HTMLDsTagElement;
         "ds-text": HTMLDsTextElement;
@@ -5418,6 +5473,11 @@ declare namespace LocalJSX {
           * Actual parent surface context. Omit on primary and secondary surfaces.
          */
         "background"?: ButtonUnfilledBackground | undefined;
+        /**
+          * Collapse the visible label and chevron to an icon-only control when the owning `ds-table` caption is narrower than 900px. The trigger omits those parts rather than clipping them.
+          * @default false
+         */
+        "collapseLabel"?: boolean;
         "controls"?: string | undefined;
         /**
           * Show a notification dot at the top-right of the icon zone (icon variant only).
@@ -5438,7 +5498,7 @@ declare namespace LocalJSX {
          */
         "hasBorder"?: boolean;
         /**
-          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu. 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.
+          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu. No chevron is added, so the glyph must   convey the menu on its own. Use `Ellipses` for generic more-options;   use a specific icon when the menu has a named purpose, such as   `Table` for Customize table.  Use `haspopup` directly for non-menu popups.
           * @default false
          */
         "hasMenu"?: boolean;
@@ -6004,6 +6064,11 @@ declare namespace LocalJSX {
           * @default 'Clear'
          */
         "clearLabel"?: string;
+        /**
+          * Opt into table-caption icon-only chrome below 900px. The trigger omits its visible label and chevron; keep an accessible name via aria-label.
+          * @default false
+         */
+        "collapseLabel"?: boolean;
         /**
           * Product-owned filter categories and option definitions.
           * @default []
@@ -6030,7 +6095,7 @@ declare namespace LocalJSX {
         "inputId"?: string | undefined;
         /**
           * Accessible name for the non-modal filter dialog.
-          * @default 'Filters'
+          * @default 'Filter'
          */
         "menuLabel"?: string;
         /**
@@ -6084,7 +6149,7 @@ declare namespace LocalJSX {
         "size"?: FilterMenuSize;
         /**
           * Select trigger text. The selected count is appended automatically.
-          * @default 'Filters'
+          * @default 'Filter'
          */
         "triggerLabel"?: string;
         /**
@@ -7188,6 +7253,11 @@ declare namespace LocalJSX {
           * @default 'Clear'
          */
         "clearLabel"?: string;
+        /**
+          * Opt into table-caption icon-only chrome below 900px. The trigger omits its visible label and chevron; keep an accessible name via aria-label.
+          * @default false
+         */
+        "collapseLabel"?: boolean;
         /**
           * Native disabled state.
           * @default false
@@ -8177,6 +8247,24 @@ declare namespace LocalJSX {
          */
         "views"?: TableSavedView[];
     }
+    interface DsTableSort {
+        /**
+          * Accessible name for the trigger and menu.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Catalog used to derive sortable fields, including compound header segments.
+          * @default []
+         */
+        "columns"?: TableColumn[];
+        "onDsSortChange"?: (event: DsTableSortCustomEvent<TableSortChangeDetail>) => void;
+        /**
+          * Controlled table sort. Header sorting and this menu share the same value.
+          * @default null
+         */
+        "sort"?: TableSortState | null;
+    }
     interface DsTableToolbar {
         /**
           * Accessible name for the grouped table controls.
@@ -8589,6 +8677,7 @@ declare namespace LocalJSX {
         "expanded": boolean | undefined;
         "haspopup": ButtonUnfilledPopup | undefined;
         "pressed": boolean | undefined;
+        "collapseLabel": boolean;
         "hasMenu": boolean;
         "focusTabIndex": number;
     }
@@ -8707,6 +8796,7 @@ declare namespace LocalJSX {
         "width": FilterMenuWidth;
         "hasBorder": boolean;
         "activeFill": boolean;
+        "collapseLabel": boolean;
         "inputId": string | undefined;
         "ariaLabel": string | null;
         "activeFilterId": string | undefined;
@@ -8976,6 +9066,7 @@ declare namespace LocalJSX {
         "isInactive": boolean;
         "isLoading": boolean;
         "activeFill": boolean;
+        "collapseLabel": boolean;
         "hasBorder": boolean;
         "icon": string | undefined;
         "indicator": SelectIndicator;
@@ -9149,6 +9240,9 @@ declare namespace LocalJSX {
         "triggerLabel": string;
         "createLabel": string;
     }
+    interface DsTableSortAttributes {
+        "ariaLabel": string | null;
+    }
     interface DsTableToolbarAttributes {
         "label": string;
     }
@@ -9281,6 +9375,7 @@ declare namespace LocalJSX {
         "ds-tab-group": Omit<DsTabGroup, keyof DsTabGroupAttributes> & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes]?: DsTabGroup[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `attr:${K}`]?: DsTabGroupAttributes[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `prop:${K}`]?: DsTabGroup[K] };
         "ds-table": Omit<DsTable, keyof DsTableAttributes> & { [K in keyof DsTable & keyof DsTableAttributes]?: DsTable[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `attr:${K}`]?: DsTableAttributes[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `prop:${K}`]?: DsTable[K] } & OneOf<"caption", DsTable["caption"], DsTableAttributes["caption"]>;
         "ds-table-saved-views": Omit<DsTableSavedViews, keyof DsTableSavedViewsAttributes> & { [K in keyof DsTableSavedViews & keyof DsTableSavedViewsAttributes]?: DsTableSavedViews[K] } & { [K in keyof DsTableSavedViews & keyof DsTableSavedViewsAttributes as `attr:${K}`]?: DsTableSavedViewsAttributes[K] } & { [K in keyof DsTableSavedViews & keyof DsTableSavedViewsAttributes as `prop:${K}`]?: DsTableSavedViews[K] };
+        "ds-table-sort": Omit<DsTableSort, keyof DsTableSortAttributes> & { [K in keyof DsTableSort & keyof DsTableSortAttributes]?: DsTableSort[K] } & { [K in keyof DsTableSort & keyof DsTableSortAttributes as `attr:${K}`]?: DsTableSortAttributes[K] } & { [K in keyof DsTableSort & keyof DsTableSortAttributes as `prop:${K}`]?: DsTableSort[K] };
         "ds-table-toolbar": Omit<DsTableToolbar, keyof DsTableToolbarAttributes> & { [K in keyof DsTableToolbar & keyof DsTableToolbarAttributes]?: DsTableToolbar[K] } & { [K in keyof DsTableToolbar & keyof DsTableToolbarAttributes as `attr:${K}`]?: DsTableToolbarAttributes[K] } & { [K in keyof DsTableToolbar & keyof DsTableToolbarAttributes as `prop:${K}`]?: DsTableToolbar[K] };
         "ds-tag": Omit<DsTag, keyof DsTagAttributes> & { [K in keyof DsTag & keyof DsTagAttributes]?: DsTag[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `attr:${K}`]?: DsTagAttributes[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `prop:${K}`]?: DsTag[K] } & OneOf<"label", DsTag["label"], DsTagAttributes["label"]>;
         "ds-text": Omit<DsText, keyof DsTextAttributes> & { [K in keyof DsText & keyof DsTextAttributes]?: DsText[K] } & { [K in keyof DsText & keyof DsTextAttributes as `attr:${K}`]?: DsTextAttributes[K] } & { [K in keyof DsText & keyof DsTextAttributes as `prop:${K}`]?: DsText[K] };
@@ -9376,6 +9471,7 @@ declare module "@stencil/core" {
             "ds-tab-group": LocalJSX.IntrinsicElements["ds-tab-group"] & JSXBase.HTMLAttributes<HTMLDsTabGroupElement>;
             "ds-table": LocalJSX.IntrinsicElements["ds-table"] & JSXBase.HTMLAttributes<HTMLDsTableElement>;
             "ds-table-saved-views": LocalJSX.IntrinsicElements["ds-table-saved-views"] & JSXBase.HTMLAttributes<HTMLDsTableSavedViewsElement>;
+            "ds-table-sort": LocalJSX.IntrinsicElements["ds-table-sort"] & JSXBase.HTMLAttributes<HTMLDsTableSortElement>;
             "ds-table-toolbar": LocalJSX.IntrinsicElements["ds-table-toolbar"] & JSXBase.HTMLAttributes<HTMLDsTableToolbarElement>;
             "ds-tag": LocalJSX.IntrinsicElements["ds-tag"] & JSXBase.HTMLAttributes<HTMLDsTagElement>;
             "ds-text": LocalJSX.IntrinsicElements["ds-text"] & JSXBase.HTMLAttributes<HTMLDsTextElement>;

package/dist/types/utils/table-caption-compact.d.ts

@@ -0,0 +1,6 @@
+/** Matches `@container ds-table (max-width: 899px)` on caption Filter/Group/Sort. */
+export declare const TABLE_CAPTION_COMPACT_MAX_PX = 899;
+export declare function isTableCaptionCompact(width: number): boolean;
+export declare function tableCaptionInlineSize(entry: ResizeObserverEntry): number;
+export declare function observeTableCaptionCompact(host: HTMLElement, onChange: (compact: boolean) => void): () => void;
+//# sourceMappingURL=table-caption-compact.d.ts.map

package/dist/vue/components.d.ts

@@ -68,6 +68,7 @@ export { DsSwitch } from './ds-switch.js';
 export { DsTabGroup } from './ds-tab-group.js';
 export { DsTable } from './ds-table.js';
 export { DsTableSavedViews } from './ds-table-saved-views.js';
+export { DsTableSort } from './ds-table-sort.js';
 export { DsTableToolbar } from './ds-table-toolbar.js';
 export { DsTag } from './ds-tag.js';
 export { DsText } from './ds-text.js';

package/dist/vue/components.js

@@ -70,6 +70,7 @@ export { DsSwitch } from './ds-switch.js';
 export { DsTabGroup } from './ds-tab-group.js';
 export { DsTable } from './ds-table.js';
 export { DsTableSavedViews } from './ds-table-saved-views.js';
+export { DsTableSort } from './ds-table-sort.js';
 export { DsTableToolbar } from './ds-table-toolbar.js';
 export { DsTag } from './ds-tag.js';
 export { DsText } from './ds-text.js';

package/dist/vue/ds-button-unfilled.js

@@ -26,6 +26,7 @@ export const DsButtonUnfilled = /*@__PURE__*/ defineContainer('ds-button-unfille
     'expanded',
     'haspopup',
     'pressed',
+    'collapseLabel',
     'hasMenu',
     'focusTabIndex',
     'dsClick',

package/dist/vue/ds-filter-menu.js

@@ -11,6 +11,7 @@ export const DsFilterMenu = /*@__PURE__*/ defineContainer('ds-filter-menu', defi
     'width',
     'hasBorder',
     'activeFill',
+    'collapseLabel',
     'inputId',
     'ariaLabel',
     'filters',

package/dist/vue/ds-select.js

@@ -23,6 +23,7 @@ export const DsSelect = /*@__PURE__*/ defineContainer('ds-select', defineDsSelec
     'isInactive',
     'isLoading',
     'activeFill',
+    'collapseLabel',
     'hasBorder',
     'icon',
     'indicator',

package/dist/vue/ds-table-sort.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsTableSort: StencilVueComponent<JSX.DsTableSort>;

package/dist/vue/ds-table-sort.js

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsTableSort } from '@ds-mo/ui/components/ds-table-sort.js';
+export const DsTableSort = /*@__PURE__*/ defineContainer('ds-table-sort', defineDsTableSort, [
+    'columns',
+    'sort',
+    'ariaLabel',
+    'dsSortChange'
+], [
+    'dsSortChange'
+]);

package/package.json

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