@ds-mo/ui 13.16.1 → 13.17.0

package/dist/styles/table.css

@@ -163,6 +163,66 @@
   --_table-selection-column-contribution: var(--_table-selection-column-inline-size);
 }
 
+/*
+ * A contained grouped table uses native sticky positioning without a scroll
+ * listener or duplicated section lane. Turning its table formatting boxes into
+ * explicit blocks makes every real tbody a section boundary; shared grid tracks
+ * retain exact header/body alignment while the browser performs push-off in the
+ * same layout pass as scrolling and container resize.
+ */
+:where(.ds-table__table--native-group-sticky) {
+  display: block;
+}
+
+:where(.ds-table__table--native-group-sticky > colgroup) {
+  display: none;
+}
+
+:where(.ds-table__table--native-group-sticky > .ds-table__head),
+:where(.ds-table__table--native-group-sticky > .ds-table__body) {
+  display: block;
+  inline-size: 100%;
+}
+
+:where(.ds-table__table--native-group-sticky > .ds-table__group) {
+  position: relative;
+  contain: layout style;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__header-row),
+:where(.ds-table__table--native-group-sticky .ds-table__row),
+:where(.ds-table__table--native-group-sticky .ds-table__skeleton-row) {
+  display: grid;
+  grid-template-columns: var(--_table-grid-template-columns);
+  inline-size: 100%;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__group-row),
+:where(.ds-table__table--native-group-sticky .ds-table__state-row),
+:where(.ds-table__table--native-group-sticky .ds-table__load-row) {
+  display: block;
+  inline-size: 100%;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__header-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__cell),
+:where(.ds-table__table--native-group-sticky .ds-table__group-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__state-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__load-cell) {
+  display: block;
+  inline-size: auto;
+  width: auto;
+  max-inline-size: none;
+  max-width: none;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__group-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__state-cell),
+:where(.ds-table__table--native-group-sticky .ds-table__load-cell) {
+  inline-size: 100%;
+  width: 100%;
+}
+
 :where(.ds-table__caption-bar),
 :where(.ds-table__footer) {
   box-sizing: border-box;
@@ -184,6 +244,20 @@
   color: var(--color-foreground-primary);
 }
 
+:where(.ds-table__caption-content) {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__caption-content > slot) {
+  display: contents;
+}
+
 :where(.ds-table--caption-visible .ds-table__frame),
 :where(.ds-table--caption-visible .ds-table__viewport) {
   border-start-start-radius: 0;
@@ -306,9 +380,18 @@
   inline-size: 100%;
   block-size: var(--_table-row-min-block-size);
   overflow: hidden;
+}
+
+:where(.ds-table--document-sticky-header .ds-table__sticky-group) {
   will-change: inset-block-start;
 }
 
+:where(.ds-table--contained-sticky-header .ds-table__sticky-group) {
+  inset-block-start: var(--_table-header-min-block-size);
+  transform: translateY(var(--_table-sticky-group-push, 0));
+  will-change: transform;
+}
+
 :where(.ds-table__sticky-group .ds-table__group-content) {
   position: relative;
 }
@@ -452,6 +535,21 @@
   vertical-align: top;
 }
 
+/*
+ * Native table cells add their block padding outside the declared content
+ * height and grow together with their row. Grid items use border-box sizing,
+ * so restore intrinsic sizing and grid-track stretch for the grouped-sticky
+ * renderer instead of turning the native recipe's base sizes into hard caps.
+ */
+:where(.ds-table__table--native-group-sticky .ds-table__header-cell) {
+  min-block-size: var(--_table-header-min-block-size);
+  block-size: auto;
+}
+
+:where(.ds-table__table--native-group-sticky .ds-table__cell) {
+  block-size: auto;
+}
+
 :where(.ds-table__header-cell + .ds-table__header-cell) {
   border-inline-start: 0;
 }
@@ -991,6 +1089,13 @@
   background: transparent;
 }
 
+/* Each real section owns one sticky row and its own push-off boundary. */
+:where(.ds-table--contained-sticky-header .ds-table__group-row--native-sticky) {
+  position: sticky;
+  inset-block-start: var(--_table-header-min-block-size);
+  z-index: 5;
+}
+
 /* Intentful groups resolve from their faint signal into neutral at the trailing edge. */
 :where(.ds-table__group-cell--intent-brand),
 :where(.ds-table__group-cell--intent-negative),

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

@@ -81,9 +81,7 @@ export declare class Table {
     private announcement;
     private activeStickyGroupId;
     private viewportFitSettled;
-    private headerLeadingPresent;
-    private headerCopyPresent;
-    private headerTrailingPresent;
+    private headerPresent;
     private rootEl;
     private viewportEl;
     private frameEl;
@@ -108,6 +106,7 @@ export declare class Table {
     private syncHeaderSlotPresence;
     private connectHeaderSlotObserver;
     private connectStickyGroup;
+    private syncStickyGroupConnection;
     private disconnectStickyGroup;
     private readonly updateStickyGroup;
     handleStructureChange(): void;

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

@@ -1,6 +1,5 @@
 export interface TableLayoutElements {
     viewport: HTMLElement | null;
-    table: HTMLTableElement | null;
     stickyHeaderTable: HTMLTableElement | null;
     collapseAllOverlay: HTMLElement | null;
     frame: HTMLElement | null;
@@ -28,7 +27,6 @@ export interface TableLayoutMetricInput {
     scrollInlineSize: number;
     scrollBlockSize: number;
     scrollInlineOffset: number;
-    tableInlineSize: number;
     collapseHeadBlockStart?: number;
     collapseFrameBlockStart?: number;
 }
@@ -51,7 +49,6 @@ export declare class TableLayoutController {
     private readonly options;
     private connected;
     private connectedViewport;
-    private observedTable;
     private resizeObserver;
     private frame;
     private overflow;

package/package.json

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