@ds-mo/ui 15.4.1 → 15.5.1

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

@@ -1,7 +1,16 @@
 import type { TableRenderModel } from './table-render-model';
 import { type TableHighlightMatcher } from './table-highlight';
 import type { TableCellActionDetail, TableColumn, TableRow } from './table-types';
+import type { TableColumnLayout, TableSpanCell } from './table-structure';
 export interface TableRowViewOptions {
+    pins?: Map<string, TableColumnLayout>;
+    spans?: Map<string, TableSpanCell>;
+    headerId?: (id: string) => string;
+    responsiveCards?: boolean;
+    cellAttributes?: (row: TableRow, column: TableColumn) => Record<string, unknown>;
+    renderEditor?: (row: TableRow, column: TableColumn) => unknown;
+    renderEditTrigger?: (row: TableRow, column: TableColumn) => unknown;
+    grid?: boolean;
     row: TableRow;
     model: TableRenderModel;
     visibleColumns: TableColumn[];
@@ -23,7 +32,7 @@ export interface TableRowViewOptions {
     intrinsicBlockSize?: number;
     rowKey?: string;
     renderSelectionControl: (label: string, checked: boolean, indeterminate: boolean, disabled: boolean, onActivate: () => void) => unknown;
-    renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;
+    renderStickyEdge: (sticky: TableColumn['sticky'], shadow?: boolean) => unknown;
     onRowActivate: (row: TableRow, event: Event) => void;
     onRowKeyDown: (row: TableRow, event: KeyboardEvent) => void;
     onRowSelection: (row: TableRow) => void;
@@ -31,5 +40,5 @@ export interface TableRowViewOptions {
     onActionMenuToggle: (row: TableRow, column: TableColumn, event: MouseEvent) => void;
 }
 /** Render one semantic body row and the complete declarative table-cell vocabulary. */
-export declare function renderTableRow({ row, model, visibleColumns, emptyCellLabel, actionMenuElementId, actionMenu, actionMenuSurface, highlightMatcher, highlightFieldIds, surfaceOpenRowId, ariaRowIndex, variableVirtualSize, intrinsicBlockSize, rowKey, renderSelectionControl, renderStickyEdge, onRowActivate, onRowKeyDown, onRowSelection, onCellAction, onActionMenuToggle, }: TableRowViewOptions): any;
+export declare function renderTableRow({ pins, spans, headerId, responsiveCards, cellAttributes, renderEditor, renderEditTrigger, grid, row, model, visibleColumns, emptyCellLabel, actionMenuElementId, actionMenu, actionMenuSurface, highlightMatcher, highlightFieldIds, surfaceOpenRowId, ariaRowIndex, variableVirtualSize, intrinsicBlockSize, rowKey, renderSelectionControl, renderStickyEdge, onRowActivate, onRowKeyDown, onRowSelection, onCellAction, onActionMenuToggle, }: TableRowViewOptions): any;
 //# sourceMappingURL=table-row-view.d.ts.map

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

@@ -1,10 +1,12 @@
 import type { TableRenderModel } from './table-render-model';
 import type { TableColumn } from './table-types';
+import type { TableColumnLayout } from './table-structure';
 interface TableSkeletonViewOptions {
+    pins?: Map<string, TableColumnLayout>;
     model: TableRenderModel;
     visibleColumns: TableColumn[];
     skeletonRows: number;
-    renderStickyEdge: (sticky: TableColumn['sticky']) => unknown;
+    renderStickyEdge: (sticky: TableColumn['sticky'], shadow?: boolean) => unknown;
 }
 /** Render the loading body from the same cell recipes used by loaded rows. */
 export declare function renderTableSkeletonBody(options: TableSkeletonViewOptions): any;

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

@@ -0,0 +1,38 @@
+import type { TableCellSpan, TableColumn, TableRow } from './table-types';
+export interface TableColumnLayout {
+    style: Record<string, string>;
+    edge?: 'start' | 'end';
+}
+/** Column-only work. Never measure cells or scan rows while scrolling. */
+export declare function tablePinnedColumns(columns: TableColumn[], selectable: boolean): Map<string, TableColumnLayout>;
+export interface TableHeaderBand {
+    key: string;
+    label?: string;
+    start: number;
+    span: number;
+    firstColumnId?: string;
+    lastColumnId?: string;
+    sticky?: 'start' | 'end';
+}
+/** Split at visibility, reorder, selection, spacer and pin boundaries. Never span an unrelated column. */
+export declare function tableHeaderBands(columns: TableColumn[], selectable: boolean, spacer?: number): TableHeaderBand[];
+export type TableSpanCell = {
+    rowSpan: number;
+    colSpan: number;
+    columnStart: number;
+    columnIds: string[];
+} | 'covered';
+export interface TableSpanModel {
+    cells: Map<string, Map<string, TableSpanCell>>;
+    issues: string[];
+    hasRowSpans: boolean;
+}
+/** Validate the complete rectangle before covering any cells. Invalid spans leave all data visible. */
+export declare function tableSpanModel(spans: TableCellSpan[], rows: TableRow[], columns: TableColumn[], options: {
+    windowed: boolean;
+    grouped: boolean;
+    grid: boolean;
+    selectable: boolean;
+    spacer?: number;
+}): TableSpanModel;
+//# sourceMappingURL=table-structure.d.ts.map

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

@@ -4,6 +4,7 @@ import type { IconColor } from '../Icon/Icon';
 import type { SafetyScoreLevel } from '../Score/score-types';
 import type { TextColor } from '../Text/text-types';
 import type { PaginationState } from '../Pagination/pagination-types';
+import type { SelectOption } from '../Select/Select';
 export type DataSortDirection = 'asc' | 'desc';
 export type TableSelectionMode = 'none' | 'multiple';
 export type TableCellAlign = 'start' | 'center' | 'end';
@@ -293,7 +294,42 @@ export type TableCellSkeleton = {
 } | {
     kind: 'blank';
 };
+/** Scalar editors compose the shared borderless controls; the cell owns interaction chrome. */
+export type TableCellEditor = {
+    required?: boolean;
+} & ({
+    type: 'text' | 'textarea';
+    minLength?: number;
+    maxLength?: number;
+} | {
+    type: 'number';
+    min?: number;
+    max?: number;
+    step?: number;
+    showStepper?: boolean;
+} | {
+    type: 'select';
+    options: SelectOption[];
+    searchable?: boolean;
+} | {
+    type: 'date';
+    min?: string;
+    max?: string;
+} | {
+    type: 'time';
+    min?: string;
+    max?: string;
+    step?: number;
+    hourFormat?: '12' | '24';
+});
 export interface TableColumn extends DataField {
+    /** Optional super-header identity and label. Adjacent matching identities form one band. */
+    group?: {
+        id: string;
+        label: string;
+    };
+    /** Opt-in scalar editor used in edit (pencil) or grid (worksheet) interaction modes. */
+    editor?: TableCellEditor;
     segments?: TableHeaderSegment[];
     /** Supplementary header help. Does not replace the visible or accessible column name. */
     help?: string;
@@ -310,7 +346,7 @@ export interface TableColumn extends DataField {
     wrap?: boolean;
     /** Clamp wrapping text after 1, 2, or 3 lines. Omit with wrap for unlimited wrap. */
     maxLines?: TableCellMaxLines;
-    /** Pin one application column to either inline edge during horizontal scrolling. */
+    /** Pin an explicitly sized column. Visible pinned columns accumulate in display order. */
     sticky?: TableColumnSticky;
     /**
      * Declare a trailing application-action lane. Action columns keep fixed
@@ -324,6 +360,8 @@ export interface TableRow {
     /** Stable identity, unique across all groups. */
     id: string;
     cells: Record<string, TableCellValue>;
+    /** Presentation is separate from cell values; omitted alignment preserves first-track alignment. */
+    cellPresentation?: Record<string, TableCellDecoration>;
     /** Accessible row name used by its selection control. Falls back to the first cell. */
     selectionLabel?: string;
     /** Exclude this row from selection without muting its content. */
@@ -333,6 +371,38 @@ export interface TableRow {
     /** Make the complete row a keyboard- and pointer-activatable application target. */
     interactive?: boolean;
 }
+export interface TableCellDecoration {
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    /** Left-edge intent outline with an accessible, non-color-only explanation. */
+    highlight?: {
+        intent: TableGroupIntent;
+        label: string;
+    };
+    borders?: Array<'start' | 'end' | 'top' | 'bottom'>;
+    flag?: {
+        label: string;
+        icon?: string;
+    };
+}
+/** A rectangular merge anchored at the first row/column. Covered values remain in application data. */
+export interface TableCellSpan {
+    rowIds: string[];
+    columnIds: string[];
+}
+export interface TableCellAddress {
+    rowId: string;
+    columnId: string;
+}
+export interface TableCellRange {
+    anchor: TableCellAddress;
+    focus: TableCellAddress;
+}
+export interface TableCellsChangeDetail {
+    changes: Array<TableCellAddress & {
+        value: string | number | null;
+    }>;
+    reason: 'edit' | 'paste';
+}
 /** Supporting copy on a group section header's second track. */
 export interface TableGroupAccessory {
     text: string;

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

@@ -30,6 +30,7 @@ export declare class TableVirtualController {
     private indexedItems;
     private indexDirty;
     private scrollOffset;
+    private scrollAtEnd;
     private scrollDirection;
     private pendingReset;
     private readonly raf;

package/dist/types/components.d.ts

@@ -40,7 +40,7 @@ import { MenuItemData, MenuReorderDetail, MenuSection } from "./components/Menu/
 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, 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, 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";
@@ -128,7 +128,7 @@ export { MenuItemData, MenuReorderDetail, MenuSection } from "./components/Menu/
 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, 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, 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";
@@ -2557,7 +2557,7 @@ export namespace Components {
          */
         "dimmed": boolean;
         /**
-          * Canonical IcoMo icon name for the represented map entity. Immobilized state uses MapKey.
+          * Canonical IcoMo icon name for the represented map entity. Immobilized vehicles use MapKey.
           * @default 'MapEntityTravelGroup'
          */
         "icon": string;
@@ -3595,6 +3595,10 @@ export namespace Components {
           * @default true
          */
         "allowClear": boolean;
+        /**
+          * Optional popup positioning anchor; the trigger still owns focus and accessibility.
+         */
+        "anchor": HTMLElement | undefined;
         /**
           * Additional IDs that describe the combobox.
          */
@@ -3658,6 +3662,16 @@ export namespace Components {
           * @default true
          */
         "hasBorder": boolean;
+        /**
+          * Disable only when a containing surface supplies a visible focus indicator.
+          * @default true
+         */
+        "hasFocusRing": boolean;
+        /**
+          * Disable only when a containing surface owns hover and press feedback.
+          * @default true
+         */
+        "hasInteractionFill": boolean;
         /**
           * Optional trigger prefix icon name.
          */
@@ -4342,6 +4356,16 @@ export namespace Components {
           * @default 'hidden'
          */
         "captionVisibility": TableCaptionVisibility;
+        /**
+          * Controlled rectangular cell selection, independent of row checkbox selection.
+          * @default null
+         */
+        "cellRange": TableCellRange | null;
+        /**
+          * Explicit report merges; invalid combinations leave the original cells visible.
+          * @default []
+         */
+        "cellSpans": TableCellSpan[];
         /**
           * Replace opted-in table-owned caption controls with same-size visual skeletons.
           * @default false
@@ -4498,6 +4522,11 @@ export namespace Components {
           * @default 'Infinite scroll'
          */
         "infiniteModeLabel": string;
+        /**
+          * Table is read-only; edit uses per-cell pencil buttons; grid adds cell selection and keyboard navigation. Grouped tables remain read-only.
+          * @default 'table'
+         */
+        "interactionMode": 'table' | 'edit' | 'grid';
         /**
           * Reset key for a new query/group/sort dataset.
           * @default 'default'
@@ -4543,6 +4572,11 @@ export namespace Components {
           * @default 'Pagination + Infinite groups'
          */
         "paginationModeLabel": string;
+        /**
+          * Opt-in native card presentation below the 768px table container breakpoint.
+          * @default 'scroll'
+         */
+        "responsiveLayout": 'scroll' | 'cards';
         /**
           * Supports {displayed} and {total} placeholders.
           * @default 'Displaying {displayed} of {total}'
@@ -6697,6 +6731,8 @@ declare global {
         new (): HTMLDsTabGroupElement;
     };
     interface HTMLDsTableElementEventMap {
+        "dsCellRangeChange": TableCellRange;
+        "dsCellsChange": TableCellsChangeDetail;
         "dsCustomizeOptionChange": string;
         "dsSortChange": DataSortChangeDetail;
         "dsGroupCollapseChange": TableGroupCollapseChangeDetail;
@@ -9536,7 +9572,7 @@ declare namespace LocalJSX {
          */
         "dimmed"?: boolean;
         /**
-          * Canonical IcoMo icon name for the represented map entity. Immobilized state uses MapKey.
+          * Canonical IcoMo icon name for the represented map entity. Immobilized vehicles use MapKey.
           * @default 'MapEntityTravelGroup'
          */
         "icon"?: string;
@@ -10659,6 +10695,10 @@ declare namespace LocalJSX {
           * @default true
          */
         "allowClear"?: boolean;
+        /**
+          * Optional popup positioning anchor; the trigger still owns focus and accessibility.
+         */
+        "anchor"?: HTMLElement | undefined;
         /**
           * Additional IDs that describe the combobox.
          */
@@ -10722,6 +10762,16 @@ declare namespace LocalJSX {
           * @default true
          */
         "hasBorder"?: boolean;
+        /**
+          * Disable only when a containing surface supplies a visible focus indicator.
+          * @default true
+         */
+        "hasFocusRing"?: boolean;
+        /**
+          * Disable only when a containing surface owns hover and press feedback.
+          * @default true
+         */
+        "hasInteractionFill"?: boolean;
         /**
           * Optional trigger prefix icon name.
          */
@@ -11498,6 +11548,16 @@ declare namespace LocalJSX {
           * @default 'hidden'
          */
         "captionVisibility"?: TableCaptionVisibility;
+        /**
+          * Controlled rectangular cell selection, independent of row checkbox selection.
+          * @default null
+         */
+        "cellRange"?: TableCellRange | null;
+        /**
+          * Explicit report merges; invalid combinations leave the original cells visible.
+          * @default []
+         */
+        "cellSpans"?: TableCellSpan[];
         /**
           * Replace opted-in table-owned caption controls with same-size visual skeletons.
           * @default false
@@ -11654,6 +11714,11 @@ declare namespace LocalJSX {
           * @default 'Infinite scroll'
          */
         "infiniteModeLabel"?: string;
+        /**
+          * Table is read-only; edit uses per-cell pencil buttons; grid adds cell selection and keyboard navigation. Grouped tables remain read-only.
+          * @default 'table'
+         */
+        "interactionMode"?: 'table' | 'edit' | 'grid';
         /**
           * Reset key for a new query/group/sort dataset.
           * @default 'default'
@@ -11691,6 +11756,8 @@ declare namespace LocalJSX {
          */
         "maxHeight"?: string | number | undefined;
         "onDsCellAction"?: (event: DsTableCustomEvent<TableCellActionDetail>) => void;
+        "onDsCellRangeChange"?: (event: DsTableCustomEvent<TableCellRange>) => void;
+        "onDsCellsChange"?: (event: DsTableCustomEvent<TableCellsChangeDetail>) => void;
         "onDsCustomizeOptionChange"?: (event: DsTableCustomEvent<string>) => void;
         "onDsDataModeChange"?: (event: DsTableCustomEvent<TableDataModeChangeDetail>) => void;
         "onDsFieldsConfigChange"?: (event: DsTableCustomEvent<DataFieldsConfigChangeDetail>) => void;
@@ -11710,6 +11777,11 @@ declare namespace LocalJSX {
           * @default 'Pagination + Infinite groups'
          */
         "paginationModeLabel"?: string;
+        /**
+          * Opt-in native card presentation below the 768px table container breakpoint.
+          * @default 'scroll'
+         */
+        "responsiveLayout"?: 'scroll' | 'cards';
         /**
           * Supports {displayed} and {total} placeholders.
           * @default 'Displaying {displayed} of {total}'
@@ -13018,6 +13090,8 @@ declare namespace LocalJSX {
         "collapseLabel": boolean;
         "iconOnly": boolean;
         "hasBorder": boolean;
+        "hasInteractionFill": boolean;
+        "hasFocusRing": boolean;
         "rounded": boolean;
         "icon": string | undefined;
         "indicator": SelectIndicator;
@@ -13156,6 +13230,8 @@ declare namespace LocalJSX {
         "ariaLabelledby": string | undefined;
     }
     interface DsTableAttributes {
+        "responsiveLayout": 'scroll' | 'cards';
+        "interactionMode": 'table' | 'edit' | 'grid';
         "caption": string;
         "captionVisibility": TableCaptionVisibility;
         "columnCustomizer": boolean;

package/dist/types/utils/select-controller.d.ts

@@ -13,6 +13,7 @@ export interface SelectControllerState<T extends ChoiceOption> {
     readonly preferredIndex: number;
     readonly popupAlign: 'start' | 'end';
     readonly boundary: HTMLElement | undefined;
+    readonly anchor?: HTMLElement;
     open: boolean;
     activeIndex: number;
     searchTerm: string;

package/dist/vue/ds-select.js

@@ -24,6 +24,7 @@ export const DsSelect = /*@__PURE__*/ defineContainer('ds-select', defineDsSelec
     'width',
     'popupAlign',
     'boundary',
+    'anchor',
     'isInactive',
     'isLoading',
     'neutralTrigger',
@@ -31,6 +32,8 @@ export const DsSelect = /*@__PURE__*/ defineContainer('ds-select', defineDsSelec
     'collapseLabel',
     'iconOnly',
     'hasBorder',
+    'hasInteractionFill',
+    'hasFocusRing',
     'rounded',
     'icon',
     'indicator',

package/dist/vue/ds-table.js

@@ -5,6 +5,10 @@ import { defineContainer } from './vue-runtime.js';
 import { defineCustomElement as defineDsTable } from '@ds-mo/ui/components/ds-table.js';
 export const DsTable = /*@__PURE__*/ defineContainer('ds-table', defineDsTable, [
     'columns',
+    'responsiveLayout',
+    'cellSpans',
+    'interactionMode',
+    'cellRange',
     'customizeOptions',
     'rows',
     'groups',
@@ -68,6 +72,8 @@ export const DsTable = /*@__PURE__*/ defineContainer('ds-table', defineDsTable,
     'groupLoadingMoreLabel',
     'groupEndOfResultsLabel',
     'groupRowsLoadedLabel',
+    'dsCellRangeChange',
+    'dsCellsChange',
     'dsCustomizeOptionChange',
     'dsSortChange',
     'dsGroupCollapseChange',
@@ -80,6 +86,8 @@ export const DsTable = /*@__PURE__*/ defineContainer('ds-table', defineDsTable,
     'dsFieldsConfigChange',
     'dsDataModeChange'
 ], [
+    'dsCellRangeChange',
+    'dsCellsChange',
     'dsCustomizeOptionChange',
     'dsSortChange',
     'dsGroupCollapseChange',

package/package.json

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