@ds-mo/ui 13.12.0 → 13.14.0

package/dist/styles/table.css

@@ -16,7 +16,7 @@
   );
   --_table-cell-track-label-inset: var(--dimension-space-025);
   --_table-image-block-size: calc(
-    var(--dimension-size-800) - var(--dimension-space-150)
+    var(--dimension-size-800) - var(--dimension-space-200)
   );
   --_table-surface: var(--ds-table-surface, var(--color-background-primary));
   --_table-header-surface: var(--ds-table-header-surface, var(--color-background-primary));
@@ -26,9 +26,9 @@
   --_table-row-selected: var(--ds-table-row-selected, var(--color-interaction-active-brand));
   --_table-border: var(--ds-table-border, var(--color-border-secondary));
   --_table-column-border: var(--ds-table-column-border, var(--color-border-tertiary));
+  --_table-sticky-border: var(--ds-table-sticky-border, var(--color-border-secondary));
   --_table-border-strong: var(--ds-table-border-strong, var(--color-border-secondary));
-  --_table-overflow-shadow: var(--ds-table-overflow-shadow, var(--color-border-secondary));
-  --_table-radius: var(--ds-table-radius, var(--dimension-radius-075));
+  --_table-radius: var(--ds-table-radius, var(--dimension-radius-000));
   --_table-header-min-block-size: var(
     --ds-table-header-min-block-size,
     var(--dimension-size-400)
@@ -49,7 +49,17 @@
     --ds-table-selection-column-inline-size,
     var(--dimension-size-500)
   );
-  --_table-selection-column-contribution: 0;
+  --_table-selection-column-contribution: 0px;
+  --_table-sticky-start-shadow: var(
+    --ds-table-sticky-start-shadow,
+    inset var(--dimension-space-100) 0 var(--dimension-space-100)
+      calc(-1 * var(--dimension-space-100)) var(--color-elevation-shadow)
+  );
+  --_table-sticky-end-shadow: var(
+    --ds-table-sticky-end-shadow,
+    inset calc(-1 * var(--dimension-space-100)) 0 var(--dimension-space-100)
+      calc(-1 * var(--dimension-space-100)) var(--color-elevation-shadow)
+  );
   display: block;
   box-sizing: border-box;
   min-inline-size: 0;
@@ -61,53 +71,34 @@
 
 :where(.ds-table__frame) {
   position: relative;
+  timeline-scope: --ds-table-inline-scroll;
   box-sizing: border-box;
   min-inline-size: 0;
   max-inline-size: 100%;
-  overflow: hidden;
-  border: var(--dimension-stroke-width-012) solid var(--_table-border-strong);
+  overflow: visible;
+  border: 0;
   border-radius: var(--_table-radius);
   background: var(--_table-surface);
 }
 
-:where(.ds-table__frame)::before,
-:where(.ds-table__frame)::after {
-  content: '';
-  position: absolute;
-  inset-block: 0;
-  z-index: 3;
-  inline-size: var(--dimension-space-200);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity var(--effect-motion-short-2);
-}
-
-:where(.ds-table__frame)::before {
-  inset-inline-start: 0;
-  background: linear-gradient(to right, var(--_table-overflow-shadow), transparent);
-}
-
-:where(.ds-table__frame)::after {
-  inset-inline-end: 0;
-  background: linear-gradient(to left, var(--_table-overflow-shadow), transparent);
-}
-
-:where(.ds-table__frame--overflow-start)::before,
-:where(.ds-table__frame--overflow-end)::after {
-  opacity: var(--effect-opacity-low);
-}
-
 :where(.ds-table__viewport) {
   box-sizing: border-box;
   max-block-size: var(--ds-table-max-block-size, none);
   max-inline-size: 100%;
   min-inline-size: 0;
   overflow: auto;
-  overscroll-behavior: contain;
+  scroll-timeline: --ds-table-inline-scroll inline;
+  overscroll-behavior-x: none;
+  overscroll-behavior-y: auto;
   scrollbar-gutter: stable;
+  border-radius: var(--_table-radius);
   outline: none;
 }
 
+:where(.ds-table--document-sticky-header .ds-table__viewport) {
+  scrollbar-gutter: auto;
+}
+
 :where(.ds-table__viewport:focus-visible) {
   outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
   outline-offset: calc(-1 * var(--dimension-stroke-width-025));
@@ -116,7 +107,13 @@
 :where(.ds-table__table) {
   box-sizing: border-box;
   inline-size: 100%;
-  min-inline-size: max(100%, var(--ds-table-explicit-min-inline-size, 0));
+  min-inline-size: max(
+    100%,
+    calc(
+      var(--ds-table-explicit-min-inline-size, 0px) +
+        var(--_table-selection-column-contribution)
+    )
+  );
   border: 0;
   border-spacing: 0;
   border-collapse: separate;
@@ -127,21 +124,42 @@
 
 :where(.ds-table__table--selectable) {
   --_table-selection-column-contribution: var(--_table-selection-column-inline-size);
-  min-inline-size: max(
-    100%,
-    calc(var(--ds-table-explicit-min-inline-size, 0) + var(--_table-selection-column-contribution))
-  );
 }
 
-:where(.ds-table__caption) {
-  padding: var(--_table-cell-padding-inline);
-  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-border);
+:where(.ds-table__caption-bar),
+:where(.ds-table__footer) {
+  box-sizing: border-box;
+  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);
   background: var(--_table-surface);
   text-align: start;
 }
 
+:where(.ds-table__caption-bar) {
+  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-border);
+  color: var(--color-foreground-primary);
+}
+
+/* Optional controlled result summary. */
+:where(.ds-table__footer) {
+  border-block-start: var(--dimension-stroke-width-012) solid var(--_table-border);
+  color: var(--color-foreground-secondary);
+}
+
 :where(.ds-table__selection-column) {
   inline-size: var(--_table-selection-column-inline-size);
+  width: var(--_table-selection-column-inline-size);
+  max-inline-size: var(--_table-selection-column-inline-size);
+  max-width: var(--_table-selection-column-inline-size);
+}
+
+:where(.ds-table__action-column) {
+  inline-size: var(--dimension-size-500);
+  width: var(--dimension-size-500);
 }
 
 :where(.ds-table__head) {
@@ -149,12 +167,106 @@
   z-index: 1;
 }
 
-:where(.ds-table--sticky-header .ds-table__head) {
+:where(.ds-table--contained-sticky-header .ds-table__head) {
   position: sticky;
   inset-block-start: 0;
   z-index: 2;
 }
 
+:where(.ds-table__document-sticky-header) {
+  position: sticky;
+  inset-block-start: var(--ds-table-sticky-header-offset, 0);
+  z-index: 3;
+  block-size: var(--_table-header-min-block-size);
+  margin-block-end: calc(-1 * var(--_table-header-min-block-size));
+  max-inline-size: 100%;
+  overflow: hidden;
+  border-radius: var(--_table-radius) var(--_table-radius) 0 0;
+  background: var(--_table-header-surface);
+}
+
+: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);
+  will-change: transform;
+}
+
+/*
+ * The document-flow header is visually duplicated so it can stick to the page
+ * while the semantic table remains inside the horizontal scrollport. Keep the
+ * duplicate out of a second scroll container: its columns follow the body's
+ * scroll timeline and its pinned lanes counter that exact movement.
+ */
+:where(.ds-table__sticky-header-table .ds-table__cell--sticky-start) {
+  transform: translate3d(var(--ds-table-inline-scroll-offset, 0), 0, 0);
+}
+
+:where(.ds-table__sticky-header-table .ds-table__cell--sticky-end) {
+  transform: translate3d(
+    calc(
+      var(--ds-table-inline-scroll-offset, 0) -
+      var(--ds-table-inline-scroll-max-offset, 0)
+    ),
+    0,
+    0
+  );
+}
+
+@supports (animation-timeline: --ds-table-inline-scroll) {
+  :where(.ds-table__sticky-header-table) {
+    animation: ds-table-follow-inline-scroll var(--effect-motion-short-2) both;
+    animation-timeline: --ds-table-inline-scroll;
+    animation-range: 0% 100%;
+    animation-timing-function: linear;
+  }
+
+  :where(.ds-table__sticky-header-table .ds-table__cell--sticky-start) {
+    animation: ds-table-counter-inline-scroll-start var(--effect-motion-short-2) both;
+    animation-timeline: --ds-table-inline-scroll;
+    animation-range: 0% 100%;
+    animation-timing-function: linear;
+  }
+
+  :where(.ds-table__sticky-header-table .ds-table__cell--sticky-end) {
+    animation: ds-table-counter-inline-scroll-end var(--effect-motion-short-2) both;
+    animation-timeline: --ds-table-inline-scroll;
+    animation-range: 0% 100%;
+    animation-timing-function: linear;
+  }
+}
+
+@keyframes ds-table-follow-inline-scroll {
+  from { transform: translate3d(0, 0, 0); }
+  to {
+    transform: translate3d(
+      calc(-1 * var(--ds-table-inline-scroll-max-offset, 0)),
+      0,
+      0
+    );
+  }
+}
+
+@keyframes ds-table-counter-inline-scroll-start {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(var(--ds-table-inline-scroll-max-offset, 0), 0, 0); }
+}
+
+@keyframes ds-table-counter-inline-scroll-end {
+  from {
+    transform: translate3d(
+      calc(-1 * var(--ds-table-inline-scroll-max-offset, 0)),
+      0,
+      0
+    );
+  }
+  to { transform: translate3d(0, 0, 0); }
+}
+
+:where(.ds-table__head--semantic-copy) {
+  opacity: 0;
+  pointer-events: none;
+}
+
 :where(.ds-table__header-row) {
   min-block-size: var(--_table-header-min-block-size);
   background: var(--_table-header-surface);
@@ -173,6 +285,7 @@
 }
 
 :where(.ds-table__header-cell) {
+  position: relative;
   min-block-size: calc(
     var(--_table-header-min-block-size) - var(--dimension-space-100) - var(--dimension-space-100)
   );
@@ -181,27 +294,48 @@
   );
   padding: var(--dimension-space-100);
   border-block-end: 0;
-  box-shadow: inset 0 calc(-1 * var(--dimension-stroke-width-012)) 0 var(--_table-border);
   background: var(--_table-header-surface);
   color: var(--color-foreground-secondary);
 }
 
+:where(.ds-table__header-cell)::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: 1;
+  block-size: var(--dimension-stroke-width-012);
+  background: var(--_table-border-strong);
+  pointer-events: none;
+}
+
 :where(.ds-table__cell) {
   min-block-size: var(--_table-row-min-block-size);
   block-size: var(--_table-row-min-block-size);
   padding: var(--_table-cell-padding-block) var(--_table-cell-padding-inline);
+  --ds-interaction-group-divider-width: var(--dimension-stroke-width-012);
+  --ds-interaction-group-divider-color: var(--_table-border);
   border-block-end: 0;
   background-color: inherit;
-  background-image: linear-gradient(var(--_table-border), var(--_table-border));
-  background-repeat: no-repeat;
-  background-position: bottom;
-  background-size: 100% var(--dimension-stroke-width-012);
   vertical-align: top;
 }
 
-:where(.ds-table__header-cell + .ds-table__header-cell),
+:where(.ds-table__header-cell + .ds-table__header-cell) {
+  border-inline-start: 0;
+}
+
+:where(.ds-table__header-cell + .ds-table__header-cell)::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  box-shadow: inset var(--dimension-stroke-width-012) 0 0 var(--_table-column-border);
+  pointer-events: none;
+}
+
 :where(.ds-table__cell + .ds-table__cell) {
-  border-inline-start: var(--dimension-stroke-width-012) solid var(--_table-column-border);
+  --ds-interaction-group-divider-inline-start-width: var(--dimension-stroke-width-012);
+  --ds-interaction-group-divider-inline-start-color: var(--_table-column-border);
 }
 
 :where(.ds-table__header-labels),
@@ -252,9 +386,6 @@
     color: var(--color-foreground-primary);
   }
 
-  :where(.ds-table__row:not(.ds-table__row--disabled):hover) {
-    background: var(--_table-row-hover);
-  }
 }
 
 :where(.ds-table__header-label--interactive:active) {
@@ -271,7 +402,7 @@
 :where(.ds-table__header-labels),
 :where(.ds-table__header-segment),
 :where(.ds-table__sort-slot),
-:where(.ds-table__group-content),
+:where(.ds-table__collapse-slot),
 :where(.ds-table__load-content) {
   display: inline-flex;
   align-items: center;
@@ -284,6 +415,10 @@
   gap: var(--dimension-space-050);
 }
 
+:where(.ds-table__header-content--collapse-all) {
+  justify-content: flex-end;
+}
+
 :where(.ds-table__header-labels) {
   max-inline-size: 100%;
   gap: var(--dimension-space-025);
@@ -303,6 +438,44 @@
   flex: 0 0 auto;
   inline-size: var(--dimension-size-200);
   block-size: var(--dimension-size-200);
+}
+
+:where(.ds-table__collapse-slot) {
+  justify-content: center;
+  flex: 0 0 auto;
+  inline-size: var(--dimension-size-300);
+  block-size: var(--dimension-size-200);
+  margin-inline-start: auto;
+}
+
+:where(.ds-table__collapse-all-overlay) {
+  position: absolute;
+  inset-block-start: calc(
+    var(--ds-table-collapse-all-block-offset, 0px) + var(--dimension-space-100)
+  );
+  inset-inline-end: var(--dimension-space-100);
+  z-index: var(--dimension-z-index-floating);
+  box-sizing: border-box;
+  display: flex;
+  inline-size: var(--dimension-size-300);
+  block-size: var(--dimension-size-200);
+  pointer-events: none;
+}
+
+:where(.ds-table__collapse-all-surface) {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  padding: 0;
+  border-radius: var(--dimension-radius-025);
+  background: var(--_table-header-surface);
+  pointer-events: auto;
+}
+
+:where(.ds-table__sort-slot) {
   margin-inline-start: auto;
 }
 
@@ -384,7 +557,7 @@
 
 :where(.ds-table__cell--tag-tag-only),
 :where(.ds-table__cell--tag-tag-with-text) {
-  padding: var(--dimension-space-075);
+  padding: var(--dimension-space-100);
 }
 
 :where(.ds-table__cell--tag-text-with-tag) {
@@ -412,6 +585,10 @@
   min-block-size: 0;
 }
 
+:where(.ds-table__cell-tag-stack--tag-with-text) {
+  gap: var(--dimension-space-025);
+}
+
 :where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-text) {
   padding-inline: var(--_table-cell-track-label-inset);
   min-block-size: 0;
@@ -428,7 +605,7 @@
 }
 
 :where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-control-track) {
-  min-block-size: 0;
+  min-block-size: var(--dimension-size-250);
 }
 
 :where(.ds-table__cell--icon) {
@@ -443,7 +620,7 @@
 }
 
 :where(.ds-table__cell--image) {
-  padding: var(--dimension-space-075);
+  padding: var(--dimension-space-100);
 }
 
 :where(.ds-table__cell-image) {
@@ -512,15 +689,26 @@
 :where(.ds-table__row) {
   min-block-size: var(--_table-row-min-block-size);
   background: var(--_table-surface);
-  transition: background-color var(--effect-motion-short-2);
 }
 
-:where(.ds-table__row:active:not(.ds-table__row--disabled)) {
-  background: var(--_table-row-pressed);
+:where(.ds-table__row > .ds-table__cell.ds-interaction-fill) {
+  --ds-interaction-active: var(--_table-row-selected);
+  --ds-interaction-group-fill: transparent;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :where(.ds-table__row--interactive:hover > .ds-table__cell.ds-interaction-fill) {
+    --ds-interaction-group-fill: var(--_table-row-hover);
+  }
 }
 
-:where(.ds-table__row--selected) {
-  background: var(--_table-row-selected);
+:where(.ds-table__row--interactive:active > .ds-table__cell.ds-interaction-fill) {
+  --ds-interaction-group-fill: var(--_table-row-pressed);
+}
+
+:where(.ds-table__row--interactive:focus-visible) {
+  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
+  outline-offset: calc(-1 * var(--dimension-stroke-width-025));
 }
 
 :where(.ds-table__row--disabled) {
@@ -530,10 +718,101 @@
 
 :where(.ds-table__selection-cell) {
   inline-size: var(--_table-selection-column-inline-size);
+  width: var(--_table-selection-column-inline-size);
+  max-inline-size: var(--_table-selection-column-inline-size);
+  max-width: var(--_table-selection-column-inline-size);
   padding: 0;
   text-align: center;
 }
 
+:where(.ds-table__cell--sticky-start),
+:where(.ds-table__cell--sticky-end) {
+  --ds-interaction-position: sticky;
+  --ds-interaction-z-index: 2;
+  position: sticky;
+  z-index: 2;
+  background-color: var(--_table-surface);
+}
+
+:where(.ds-table__cell--sticky-start) {
+  inset-inline-start: 0;
+}
+
+:where(.ds-table__cell--sticky-end) {
+  inset-inline-end: 0;
+}
+
+:where(.ds-table__header-cell.ds-table__cell--sticky-start),
+:where(.ds-table__header-cell.ds-table__cell--sticky-end) {
+  z-index: 3;
+  background-color: var(--_table-header-surface);
+}
+
+:where(.ds-table__sticky-header-table .ds-table__cell--sticky-start),
+:where(.ds-table__sticky-header-table .ds-table__cell--sticky-end) {
+  position: relative;
+  inset-inline: auto;
+  will-change: transform;
+}
+
+:where(.ds-table__selection-cell.ds-table__cell--sticky-start) {
+  --ds-interaction-group-divider-inline-end-width: 0px;
+}
+
+:where(.ds-table__cell--sticky-start + .ds-table__cell) {
+  --ds-interaction-group-divider-inline-start-width: 0px;
+}
+
+:where(.ds-table__cell--sticky-end) {
+  --ds-interaction-group-divider-inline-start-width: 0px;
+}
+
+:where(.ds-table__header-cell.ds-table__cell--sticky-start + .ds-table__header-cell)::before,
+:where(.ds-table__header-cell.ds-table__cell--sticky-end)::before {
+  box-shadow: none;
+}
+
+:where(.ds-table__sticky-edge) {
+  position: absolute;
+  inset-block: 0 var(--dimension-stroke-width-012);
+  z-index: 4;
+  inline-size: var(--dimension-stroke-width-012);
+  background: var(--_table-sticky-border);
+  pointer-events: none;
+}
+
+:where(.ds-table__sticky-edge)::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inline-size: var(--dimension-space-100);
+  pointer-events: none;
+}
+
+:where(.ds-table__sticky-edge--start) {
+  inset-inline-end: 0;
+}
+
+:where(.ds-table__sticky-edge--start)::after {
+  inset-inline-start: 100%;
+}
+
+:where(.ds-table__sticky-edge--end) {
+  inset-inline-start: 0;
+}
+
+:where(.ds-table__sticky-edge--end)::after {
+  inset-inline-end: 100%;
+}
+
+:where(.ds-table__frame--overflow-start .ds-table__sticky-edge--start)::after {
+  box-shadow: var(--_table-sticky-start-shadow);
+}
+
+:where(.ds-table__frame--overflow-end .ds-table__sticky-edge--end)::after {
+  box-shadow: var(--_table-sticky-end-shadow);
+}
+
 :where(.ds-table__cell.ds-table__selection-cell) {
   padding: var(--dimension-space-125);
 }
@@ -572,13 +851,136 @@
 }
 
 :where(.ds-table__group-cell) {
-  min-block-size: var(--_table-header-min-block-size);
-  padding: var(--dimension-space-075) var(--_table-cell-padding-inline);
-  background: var(--_table-group-surface);
+  /* Surface + chrome live on `.ds-table__group-content` (viewport-width). The
+   * th only spans the table for row structure so body columns can scroll. */
+  min-block-size: var(--_table-row-min-block-size);
+  padding: 0;
+  border-block-end: 0;
+  background: transparent;
+}
+
+/* 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),
+:where(.ds-table__group-cell--intent-warning),
+:where(.ds-table__group-cell--intent-caution),
+:where(.ds-table__group-cell--intent-positive) {
+  --_table-group-surface: linear-gradient(
+    to right,
+    var(--_table-group-intent-surface),
+    var(--color-background-faint-neutral)
+  );
+}
+
+:where(.ds-table__group-cell--intent-brand) {
+  --_table-group-intent-surface: var(--color-background-faint-brand);
+}
+
+:where(.ds-table__group-cell--intent-neutral) {
+  --_table-group-surface: var(--color-background-faint-neutral);
+}
+
+:where(.ds-table__group-cell--intent-negative) {
+  --_table-group-intent-surface: var(--color-background-faint-negative);
+}
+
+:where(.ds-table__group-cell--intent-warning) {
+  --_table-group-intent-surface: var(--color-background-faint-warning);
+}
+
+:where(.ds-table__group-cell--intent-caution) {
+  --_table-group-intent-surface: var(--color-background-faint-caution);
+}
+
+:where(.ds-table__group-cell--intent-positive) {
+  --_table-group-intent-surface: var(--color-background-faint-positive);
 }
 
 :where(.ds-table__group-content) {
-  gap: var(--dimension-space-075);
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--dimension-space-100);
+  /* Use a measured length because WebKit expands min()/percentage widths to
+   * the spanning table cell instead of honoring the visible scrollport. */
+  inline-size: var(--ds-table-visible-inline-size, 100%);
+  max-inline-size: var(--ds-table-visible-inline-size, 100%);
+  min-block-size: var(--_table-row-min-block-size);
+  padding: var(--dimension-space-100);
+  border-block-end: 0;
+  background: var(--_table-group-surface);
+  background-clip: border-box;
+}
+
+:where(.ds-table__group-content)::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: var(--dimension-stroke-width-012);
+  background: var(--_table-border);
+  pointer-events: none;
+}
+
+:where(.ds-table__group:last-child[data-collapsed='true'] .ds-table__group-content)::after {
+  display: none;
+}
+
+:where(.ds-table__table--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;
+}
+
+:where(.ds-table__group-selection) {
+  /* 40px column (same as body), with a 24px-tall checkbox lane. */
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 var(--_table-selection-column-inline-size);
+  align-items: center;
+  justify-content: center;
+  padding-block: var(--dimension-space-025);
+  padding-inline: var(--dimension-space-050);
+}
+
+:where(.ds-table__group-selection .ds-table__selection-control) {
+  inline-size: var(--dimension-iconography-md);
+  min-block-size: var(--dimension-iconography-md);
+  block-size: var(--dimension-iconography-md);
+}
+
+:where(.ds-table__group-copy) {
+  /* The full-size sm count tag owns the 24px content height; inline padding
+   * preserves the shared text track without making the 40px section row grow. */
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+  flex: 1 1 auto;
+  gap: var(--dimension-space-100);
+  padding-block: 0;
+  padding-inline: var(--dimension-space-050);
+}
+
+:where(.ds-table__table--selectable .ds-table__group-copy) {
+  padding-inline-start: calc(
+    var(--dimension-space-100) + var(--_table-cell-track-label-inset)
+  );
+}
+
+:where(.ds-table__group-count) {
+  display: inline-flex;
+  flex: 0 0 auto;
+  border-radius: var(--dimension-radius-half);
+}
+
+:where(.ds-table__group-toggle) {
+  align-self: center;
+  flex: 0 0 auto;
+  margin-inline-start: auto;
 }
 
 :where(.ds-table__load-cell),
@@ -589,12 +991,23 @@
 }
 
 :where(.ds-table__load-content) {
+  /* Match md ButtonUnfilled height so text-only / loading / button states share one box. */
+  box-sizing: border-box;
   justify-content: center;
   gap: var(--dimension-space-100);
+  min-block-size: var(--dimension-size-400);
 }
 
 :where(.ds-table__load-content--error) {
   flex-wrap: wrap;
+  /* 16px between the icon/text cluster and the retry button. */
+  gap: var(--dimension-space-200);
+}
+
+:where(.ds-table__load-copy) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dimension-space-100);
 }
 
 :where(.ds-table__auto-sentinel) {
@@ -615,7 +1028,7 @@
 :where(.ds-table__state-row:last-child .ds-table__state-cell),
 :where(.ds-table__body:last-child .ds-table__row:last-child .ds-table__cell) {
   border-block-end: 0;
-  background-image: none;
+  --ds-interaction-group-divider-width: 0px;
 }
 
 :where(.ds-visually-hidden) {
@@ -631,9 +1044,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :where(.ds-table__frame)::before,
-  :where(.ds-table__frame)::after,
-  :where(.ds-table__row) {
+  :where(.ds-table__cell--sticky-start),
+  :where(.ds-table__cell--sticky-end) {
     transition: none;
   }
 }
@@ -649,14 +1061,17 @@
     color: var(--ds-forced-color-content);
   }
 
-  :where(.ds-table__frame)::before,
-  :where(.ds-table__frame)::after {
-    display: none;
+  :where(.ds-table__frame--overflow-start .ds-table__sticky-edge--start)::after,
+  :where(.ds-table__frame--overflow-end .ds-table__sticky-edge--end)::after {
+    box-shadow: none;
   }
 
-  :where(.ds-table__row--selected > .ds-table__cell) {
-    background: var(--ds-forced-color-selected);
-    color: var(--ds-forced-color-on-selected);
+  :where(.ds-table__collapse-all-surface) {
+    --ds-control-elevation-shadow: none;
+    --ds-control-elevation-highlight: none;
+    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);
+    outline-offset: calc(-1 * var(--dimension-stroke-width-012));
+    background: var(--ds-forced-color-surface);
   }
 
   :where(.ds-table__row--disabled) {