@ds-mo/ui 13.15.0 → 13.16.0

package/dist/styles/table.css

@@ -15,6 +15,7 @@
     var(--dimension-space-075) - var(--dimension-space-025)
   );
   --_table-cell-track-label-inset: var(--dimension-space-025);
+  --_table-caption-bar-block-size: var(--dimension-size-600);
   --_table-image-block-size: calc(
     var(--dimension-size-800) - var(--dimension-space-200)
   );
@@ -69,6 +70,25 @@
   user-select: none;
 }
 
+:where(.ds-table--bounded) {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  min-block-size: 0;
+  block-size: 100%;
+}
+
+:where(.ds-table--viewport-fit) {
+  block-size: var(--_table-viewport-fit-current-block-size, 100%);
+  min-block-size: var(--_table-viewport-fit-current-block-size, 100%);
+}
+
+:where(.ds-table--bounded .ds-table__frame),
+:where(.ds-table--bounded .ds-table__viewport) {
+  min-block-size: 0;
+  block-size: 100%;
+  max-block-size: none;
+}
+
 :where(.ds-table__frame) {
   position: relative;
   timeline-scope: --ds-table-inline-scroll;
@@ -81,6 +101,15 @@
   background: var(--_table-surface);
 }
 
+/*
+ * Contained tables own a hard visual viewport. Clip table-owned overlays and
+ * elastic-scroll paint to that frame without introducing another scrollport;
+ * the nested viewport remains the only element that scrolls.
+ */
+:where(.ds-table--contained-scroll .ds-table__frame) {
+  overflow: clip;
+}
+
 :where(.ds-table__viewport) {
   box-sizing: border-box;
   max-block-size: var(--ds-table-max-block-size, none);
@@ -104,6 +133,14 @@
   outline-offset: calc(-1 * var(--dimension-stroke-width-025));
 }
 
+:where(.ds-table--viewport-fit-pending .ds-table__viewport) {
+  overflow-y: hidden;
+}
+
+:where(.ds-table--viewport-fit-settled .ds-table__viewport) {
+  overscroll-behavior-y: none;
+}
+
 :where(.ds-table__table) {
   box-sizing: border-box;
   inline-size: 100%;
@@ -132,24 +169,87 @@
   display: flex;
   align-items: center;
   inline-size: 100%;
-  min-block-size: var(--dimension-size-600);
-  block-size: var(--dimension-size-600);
-  padding-inline: var(--_table-cell-padding-inline);
+  min-block-size: var(--_table-caption-bar-block-size);
+  block-size: var(--_table-caption-bar-block-size);
+  padding: var(--dimension-space-100);
+  gap: var(--dimension-space-100);
   background: var(--_table-surface);
   text-align: start;
 }
 
 :where(.ds-table__caption-bar) {
-  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-border);
+  border-start-start-radius: var(--_table-radius);
+  border-start-end-radius: var(--_table-radius);
+  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-column-border);
   color: var(--color-foreground-primary);
 }
 
+:where(.ds-table--caption-visible .ds-table__frame),
+:where(.ds-table--caption-visible .ds-table__viewport) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+:where(.ds-table__bar-leading),
+:where(.ds-table__bar-trailing) {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  min-inline-size: 0;
+  gap: var(--dimension-space-100);
+}
+
+:where(.ds-table__bar-trailing) {
+  margin-inline-start: auto;
+}
+
+:where(.ds-table__bar-leading[hidden], .ds-table__bar-trailing[hidden]) {
+  display: none;
+}
+
+:where(.ds-table__bar-copy) {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  padding: var(--ds-control-padding-inline, var(--dimension-space-075));
+}
+
+:where(.ds-table__bar-copy > slot) {
+  display: contents;
+}
+
+:where(.ds-table__bar-copy > slot)::slotted(*) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__bar-text) {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  block-size: var(--ds-control-height, var(--dimension-size-400));
+  padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));
+}
+
 /* Optional controlled result summary. */
 :where(.ds-table__footer) {
-  border-block-start: var(--dimension-stroke-width-012) solid var(--_table-border);
+  border-end-start-radius: var(--_table-radius);
+  border-end-end-radius: var(--_table-radius);
+  border-block-start: var(--dimension-stroke-width-012) solid var(--_table-column-border);
   color: var(--color-foreground-secondary);
 }
 
+:where(.ds-table--footer-visible .ds-table__frame),
+:where(.ds-table--footer-visible .ds-table__viewport) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
 :where(.ds-table__selection-column) {
   inline-size: var(--_table-selection-column-inline-size);
   width: var(--_table-selection-column-inline-size);
@@ -170,13 +270,13 @@
 :where(.ds-table--contained-sticky-header .ds-table__head) {
   position: sticky;
   inset-block-start: 0;
-  z-index: 2;
+  z-index: 6;
 }
 
 :where(.ds-table__document-sticky-header) {
   position: sticky;
   inset-block-start: var(--ds-table-sticky-header-offset, 0);
-  z-index: 3;
+  z-index: 6;
   block-size: var(--_table-header-min-block-size);
   margin-block-end: calc(-1 * var(--_table-header-min-block-size));
   max-inline-size: 100%;
@@ -185,6 +285,38 @@
   background: var(--_table-header-surface);
 }
 
+:where(.ds-table--document-sticky-header.ds-table--caption-visible > .ds-table__caption-bar) {
+  position: sticky;
+  inset-block-start: var(--ds-table-sticky-header-offset, 0);
+  z-index: 3;
+}
+
+:where(.ds-table--document-sticky-header.ds-table--caption-visible .ds-table__document-sticky-header) {
+  inset-block-start: calc(
+    var(--ds-table-sticky-header-offset, 0px) + var(--_table-caption-bar-block-size)
+  );
+}
+
+:where(.ds-table__sticky-group) {
+  position: absolute;
+  inset-block-start: var(--_table-sticky-group-top, 0);
+  inset-inline-start: 0;
+  z-index: 5;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: var(--_table-row-min-block-size);
+  overflow: hidden;
+  will-change: inset-block-start;
+}
+
+:where(.ds-table__sticky-group .ds-table__group-content) {
+  position: relative;
+}
+
+:where(.ds-table__group-cell--sticky-source-hidden) {
+  visibility: hidden;
+}
+
 :where(.ds-table__sticky-header-table) {
   block-size: var(--_table-header-min-block-size);
   transform: translate3d(calc(-1 * var(--ds-table-inline-scroll-offset, 0px)), 0, 0);
@@ -929,7 +1061,8 @@
   display: none;
 }
 
-:where(.ds-table__table--selectable .ds-table__group-content) {
+:where(.ds-table__table--selectable .ds-table__group-content),
+:where(.ds-table__sticky-group--selectable .ds-table__group-content) {
   /* Selection lane is the real 40px column — don't add start pad or flex gap. */
   gap: 0;
   padding-inline-start: 0;
@@ -965,7 +1098,8 @@
   padding-inline: var(--dimension-space-050);
 }
 
-:where(.ds-table__table--selectable .ds-table__group-copy) {
+:where(.ds-table__table--selectable .ds-table__group-copy),
+:where(.ds-table__sticky-group--selectable .ds-table__group-copy) {
   padding-inline-start: calc(
     var(--dimension-space-100) + var(--_table-cell-track-label-inset)
   );
@@ -985,11 +1119,24 @@
 
 :where(.ds-table__load-cell),
 :where(.ds-table__state-cell) {
-  padding: var(--dimension-space-200) var(--_table-cell-padding-inline);
+  padding: 0;
   background: var(--_table-surface);
   text-align: center;
 }
 
+:where(.ds-table__viewport-band) {
+  position: sticky;
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--ds-table-visible-inline-size, 100%);
+  max-inline-size: var(--ds-table-visible-inline-size, 100%);
+  padding: var(--dimension-space-200) var(--_table-cell-padding-inline);
+  background: var(--_table-surface);
+}
+
 :where(.ds-table__load-content) {
   /* Match md ButtonUnfilled height so text-only / loading / button states share one box. */
   box-sizing: border-box;
@@ -1019,6 +1166,10 @@
   block-size: calc(var(--dimension-size-800) * 2);
 }
 
+:where(.ds-table__state-band) {
+  min-block-size: calc(var(--dimension-size-800) * 2);
+}
+
 :where(.ds-table__skeleton-row) {
   pointer-events: none;
 }

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

@@ -31,6 +31,10 @@ export declare class BarTitle {
     actionsAriaLabel: string;
     /** Explicit visual/capacity variant. ShellPage owns automatic selection. */
     variant: BarTitleVariant;
+    /** Draw the page-title divider beneath the header. */
+    showDivider: boolean;
+    /** Override divider visibility for compact and constrained variants. */
+    showCompactDivider?: boolean;
     /** Emitted when the leading Back action is activated. */
     dsBack: EventEmitter<MouseEvent>;
     /** Emitted when an authored expanded breadcrumb item is activated. */
@@ -54,6 +58,7 @@ export declare class BarTitle {
     handleSectionsChange(): void;
     handleActionsChange(): void;
     private get compact();
+    private get dividerVisible();
     private get expandedBreadcrumbItems();
     /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */
     private get backTooltipLabel();

package/dist/types/components/ShellApp/shell-app-types.d.ts

@@ -69,6 +69,18 @@ export interface ShellPageChromeConfig {
     actionsAriaLabel?: string;
     tone?: MobileHeaderTone;
     contentInset?: ShellPageContentInset;
+    /** Remove only the content gutter adjacent to the page header. */
+    contentInsetBlockStart?: ShellPageContentInset;
+    /** Exact roomy block-start content inset when the responsive default is not appropriate. */
+    contentInsetBlockStartSize?: string;
+    /** Exact block-start content inset while page-title capacity is compact or constrained. */
+    compactContentInsetBlockStartSize?: string;
+    /** Allow a roomy page title to compact in response to page scrolling. */
+    scrollCompaction?: boolean;
+    /** Draw the divider beneath the desktop/tablet page title. */
+    showHeaderDivider?: boolean;
+    /** Override divider visibility while the page title is compact or constrained. */
+    showCompactHeaderDivider?: boolean;
     /** Canvas surface painted by ShellPage around and beneath routed content. */
     contentSurface?: ShellPageContentSurface;
 }

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

@@ -10,6 +10,14 @@ export declare class ShellPage {
     headerCapacity?: ShellPageCapacity;
     /** Standard page gutters, or no inset for full-bleed page content. */
     contentInset: ShellPageContentInset;
+    /** Preserve the responsive side/end gutters while allowing content to meet the header. */
+    contentInsetBlockStart: ShellPageContentInset;
+    /** Exact block-start content inset, overriding the responsive default when provided. */
+    contentInsetBlockStartSize?: string;
+    /** Exact block-start content inset while the header is compact or constrained. */
+    compactContentInsetBlockStartSize?: string;
+    /** Allow roomy automatic headers to compact as the page scrolls. */
+    scrollCompaction: boolean;
     /** Canvas surface painted around and beneath routed page content. */
     contentSurface: ShellPageContentSurface;
     /** Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot. */
@@ -39,6 +47,7 @@ export declare class ShellPage {
     private get effectiveVariant();
     private get headerContractResolved();
     private get isScrollCompacted();
+    private get contentInsetStyles();
     private composedParent;
     private findScrollRoot;
     private connectScrollRoot;

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

@@ -1,6 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupCollapseChangeDetail, TableGroupingChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from './table-types';
 export declare class Table {
+    el: HTMLElement;
     /** Stable column definitions. Assign through JavaScript. */
     columns: TableColumn[];
     /** Ungrouped row data. Ignored while grouping is active. Assign through JavaScript. */
@@ -28,6 +29,14 @@ export declare class Table {
     stickyHeader: boolean;
     /** Maximum scroll-region height. Numbers resolve to CSS pixels. */
     maxHeight: string | number | undefined;
+    /** Fixed height for the complete header, table frame, and footer composition. */
+    height: string | number | undefined;
+    /** Fit the complete table composition to its nearest vertical scrollport. */
+    fitViewport: boolean;
+    /** Reserved space above a viewport-fitted table once surrounding chrome is compact. */
+    viewportInsetBlockStart: string | number;
+    /** Reserved space below a viewport-fitted table. */
+    viewportInsetBlockEnd: string | number;
     /** Optional explicit label for the horizontal/vertical scroll region. */
     scrollLabel: string | undefined;
     selectionMode: TableSelectionMode;
@@ -70,6 +79,12 @@ export declare class Table {
     private overflowEnd;
     private scrollable;
     private announcement;
+    private activeStickyGroupId;
+    private viewportFitSettled;
+    private headerLeadingPresent;
+    private headerCopyPresent;
+    private headerTrailingPresent;
+    private rootEl;
     private viewportEl;
     private frameEl;
     private interactiveHeadEl;
@@ -80,13 +95,21 @@ export declare class Table {
     private previousModelWarning;
     private hasLoaded;
     private renderedModel;
+    private stickyGroupConnected;
+    private headerSlotObserver;
     private readonly layoutController;
     private readonly loadController;
+    private readonly viewportFitController;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private syncHeaderSlotPresence;
+    private connectHeaderSlotObserver;
+    private connectStickyGroup;
+    private disconnectStickyGroup;
+    private readonly updateStickyGroup;
     handleStructureChange(): void;
     handleDataChange(): void;
     handleLoadIdentityChange(): void;
@@ -97,10 +120,14 @@ export declare class Table {
     private get grouped();
     private get selectable();
     private get documentStickyHeader();
+    private get fixedHeight();
+    private get boundedComposition();
+    private get containedScroll();
     private currentLoadedRows;
     private currentLoadedRowCount;
     private createRenderModel;
     private get resolvedMaxHeight();
+    private get resolvedHeight();
     private warnModelIssues;
     private emitSort;
     private sortButtonLabel;
@@ -121,12 +148,15 @@ export declare class Table {
     private renderRow;
     private emitGroupCollapse;
     private emitAllGroupsCollapse;
+    private renderGroupContent;
+    private renderStickyGroup;
     private renderDataBodies;
     private renderSkeletonBody;
     private renderStateBody;
     private renderLazyBody;
     private renderDocumentStickyHeader;
     private get resultSummary();
+    private get hasResultFooter();
     private renderResultFooter;
     private renderCaptionBar;
     render(): any;

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

@@ -1,7 +1,9 @@
 import type { TableCellAction, TableCellBlank, TableCellEmpty, TableCellIcon, TableCellImage, TableCellTag, TableCellTagVariant, TableCellValue, TableColumn } from './table-types';
+import type { TextColor } from '../Text/text-types';
 export interface ResolvedTableCellText {
     primary: string | number;
     secondary?: string | number;
+    secondaryColor?: TextColor;
     wrap?: boolean;
     fontFeature?: 'normal' | 'tabular-nums';
 }

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

@@ -9,6 +9,7 @@ export interface TableLayoutElements {
 export interface TableLayoutMode {
     documentStickyHeader: boolean;
     floatingCollapseAll: boolean;
+    clampVerticalOverscroll: boolean;
 }
 export interface TableOverflowState {
     start: boolean;
@@ -19,6 +20,7 @@ export interface TableLayoutControllerOptions {
     elements: () => TableLayoutElements;
     mode: () => TableLayoutMode;
     overflowChanged: (state: TableOverflowState) => void;
+    verticalEdgeWheel?: (deltaY: number) => boolean;
 }
 export interface TableLayoutMetricInput {
     viewportInlineSize: number;
@@ -59,6 +61,10 @@ export declare class TableLayoutController {
     /** Reconcile newly rendered refs, observers, and pending geometry. */
     refresh(): void;
     private schedule;
+    private readonly handleScroll;
+    private readonly handleWheel;
+    private clampInlineOffset;
+    private clampBlockOffset;
     private sync;
     private setProperty;
 }

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

@@ -1,5 +1,6 @@
 import type { TagContrast, TagIntent } from '../Tag/Tag';
 import type { IconColor } from '../Icon/Icon';
+import type { TextColor } from '../Text/text-types';
 export type TableSortDirection = 'asc' | 'desc';
 export type TableSelectionMode = 'none' | 'multiple';
 export type TableCellAlign = 'start' | 'center' | 'end';
@@ -32,6 +33,8 @@ export interface TableGroupingState {
 export interface TableCellText {
     primary: string | number;
     secondary?: string;
+    /** Optional semantic foreground for secondary copy; defaults to the standard secondary color. */
+    secondaryColor?: TextColor;
     /** Allow this cell to wrap even when its column truncates by default. */
     wrap?: boolean;
     fontFeature?: 'normal' | 'tabular-nums';

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

@@ -0,0 +1,53 @@
+export interface TableViewportFitMetricInput {
+    scrollportBlockStart: number;
+    scrollportBlockSize: number;
+    hostBlockStart: number;
+    insetBlockStart: number;
+    insetBlockEnd: number;
+}
+export interface TableViewportFitMetrics {
+    reservedBlockSize: number;
+    currentBlockSize: number;
+    settled: boolean;
+}
+export interface TableViewportFitElements {
+    host: HTMLElement | null;
+    surface: HTMLElement | null;
+}
+export interface TableViewportFitControllerOptions {
+    enabled: () => boolean;
+    elements: () => TableViewportFitElements;
+    insets: () => {
+        blockStart: string | number;
+        blockEnd: string | number;
+    };
+    fitChanged: (metrics: TableViewportFitMetrics | null) => void;
+}
+/** Resolve the reserved compact-state height and the height currently visible. */
+export declare function resolveTableViewportFitMetrics(input: TableViewportFitMetricInput): TableViewportFitMetrics;
+/**
+ * Fits the complete table chrome to its nearest vertical scrollport. The host
+ * reserves its compact-state height so the outer page can consume collapsing
+ * header travel without changing document height. The visible table surface
+ * grows into that reservation until it reaches the supplied sticky inset.
+ */
+export declare class TableViewportFitController {
+    private readonly options;
+    private connected;
+    private scrollRoot;
+    private resizeObserver;
+    private metrics;
+    constructor(options: TableViewportFitControllerOptions);
+    connect(): void;
+    disconnect(): void;
+    refresh(): void;
+    /** Pass a fitted table's boundary wheel delta to its owning page scrollport. */
+    scrollOuterBy(delta: number): boolean;
+    private disconnectRuntime;
+    private clearGeometry;
+    private readonly sync;
+    private findScrollRoot;
+    private composedParent;
+    private setProperty;
+}
+//# sourceMappingURL=table-viewport-fit-controller.d.ts.map