@ds-mo/ui 13.11.1 → 13.13.0

package/dist/styles/table.css

@@ -0,0 +1,874 @@
+/*
+ * Renderer-neutral table recipe.
+ *
+ * Import `@ds-mo/ui/table.css` when product-owned native table markup needs
+ * the same visual primitives as `<ds-table>`. Selectors intentionally use
+ * zero specificity so applications can restyle any layer without fighting
+ * the recipe. The component consumes this exact source internally.
+ */
+
+:where(.ds-table) {
+  --_table-cell-track-min-block-size: calc(
+    var(--dimension-size-400) - var(--dimension-space-050)
+  );
+  --_table-cell-track-padding-inline: calc(
+    var(--dimension-space-075) - var(--dimension-space-025)
+  );
+  --_table-cell-track-label-inset: var(--dimension-space-025);
+  --_table-image-block-size: calc(
+    var(--dimension-size-800) - var(--dimension-space-150)
+  );
+  --_table-surface: var(--ds-table-surface, var(--color-background-primary));
+  --_table-header-surface: var(--ds-table-header-surface, var(--color-background-primary));
+  --_table-group-surface: var(--ds-table-group-surface, var(--color-background-faint-neutral));
+  --_table-row-hover: var(--ds-table-row-hover, var(--color-interaction-hover));
+  --_table-row-pressed: var(--ds-table-row-pressed, var(--color-interaction-pressed));
+  --_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-radius: var(--ds-table-radius, var(--dimension-radius-075));
+  --_table-header-min-block-size: var(
+    --ds-table-header-min-block-size,
+    var(--dimension-size-400)
+  );
+  --_table-row-min-block-size: var(
+    --ds-table-row-min-block-size,
+    var(--dimension-size-500)
+  );
+  --_table-cell-padding-block: var(
+    --ds-table-cell-padding-block,
+    var(--dimension-space-100)
+  );
+  --_table-cell-padding-inline: var(
+    --ds-table-cell-padding-inline,
+    var(--dimension-space-100)
+  );
+  --_table-selection-column-inline-size: var(
+    --ds-table-selection-column-inline-size,
+    var(--dimension-size-500)
+  );
+  --_table-selection-column-contribution: 0;
+  --_table-sticky-start-shadow: var(
+    --ds-table-sticky-start-shadow,
+    inset var(--dimension-space-050) 0 var(--dimension-space-050)
+      calc(-1 * var(--dimension-space-050)) var(--color-elevation-shadow)
+  );
+  --_table-sticky-end-shadow: var(
+    --ds-table-sticky-end-shadow,
+    inset calc(-1 * var(--dimension-space-050)) 0 var(--dimension-space-050)
+      calc(-1 * var(--dimension-space-050)) var(--color-elevation-shadow)
+  );
+  display: block;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  color: var(--color-foreground-primary);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+: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: visible;
+  border: 0;
+  border-radius: var(--_table-radius);
+  background: var(--_table-surface);
+}
+
+: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;
+  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));
+}
+
+:where(.ds-table__table) {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: max(100%, var(--ds-table-explicit-min-inline-size, 0));
+  border: 0;
+  border-spacing: 0;
+  border-collapse: separate;
+  table-layout: fixed;
+  background: var(--_table-surface);
+  color: inherit;
+}
+
+: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);
+  background: var(--_table-surface);
+  text-align: start;
+}
+
+:where(.ds-table__selection-column) {
+  inline-size: var(--_table-selection-column-inline-size);
+}
+
+:where(.ds-table__head) {
+  position: relative;
+  z-index: 1;
+}
+
+: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);
+}
+
+:where(.ds-table__header-cell),
+:where(.ds-table__cell),
+:where(.ds-table__group-cell),
+:where(.ds-table__load-cell),
+:where(.ds-table__state-cell) {
+  box-sizing: border-box;
+  border: 0;
+  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-border);
+  text-align: start;
+  vertical-align: middle;
+}
+
+: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)
+  );
+  block-size: calc(
+    var(--_table-header-min-block-size) - var(--dimension-space-100) - var(--dimension-space-100)
+  );
+  padding: var(--dimension-space-100);
+  border-block-end: 0;
+  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;
+  vertical-align: top;
+}
+
+: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) {
+  --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),
+:where(.ds-table__header-static),
+:where(.ds-table__header-label) {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  block-size: var(--dimension-size-200);
+  padding: 0;
+  color: inherit;
+  text-align: inherit;
+}
+
+:where(.ds-table__header-labels) {
+  flex: 0 1 auto;
+}
+
+:where(.ds-table__header-label) {
+  flex: 0 1 auto;
+  inline-size: fit-content;
+  padding-inline: var(--dimension-space-025);
+  color: var(--color-foreground-secondary);
+}
+
+:where(.ds-table__header-label[data-sort-active='true']) {
+  color: var(--color-foreground-primary);
+}
+
+:where(.ds-table__header-label-box) {
+  min-inline-size: 0;
+  padding-inline: var(--dimension-space-025);
+}
+
+:where(.ds-table__header-label--interactive) {
+  appearance: none;
+  border: 0;
+  border-radius: var(--dimension-radius-025);
+  background: transparent;
+  cursor: default;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :where(.ds-table__header-label--interactive:hover) {
+    color: var(--color-foreground-primary);
+  }
+
+}
+
+:where(.ds-table__header-label--interactive:active) {
+  color: var(--color-foreground-primary);
+}
+
+:where(.ds-table__header-label--interactive:focus-visible),
+:where(.ds-table__selection-control: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__header-content),
+:where(.ds-table__header-labels),
+:where(.ds-table__header-segment),
+:where(.ds-table__sort-slot),
+:where(.ds-table__group-content),
+:where(.ds-table__load-content) {
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+}
+
+:where(.ds-table__header-content) {
+  display: flex;
+  inline-size: 100%;
+  gap: var(--dimension-space-050);
+}
+
+:where(.ds-table__header-labels) {
+  max-inline-size: 100%;
+  gap: var(--dimension-space-025);
+}
+
+:where(.ds-table__header-segment) {
+  flex: 0 1 auto;
+  gap: var(--dimension-space-025);
+}
+
+:where(.ds-table__header-separator) {
+  flex: 0 0 auto;
+}
+
+:where(.ds-table__sort-slot) {
+  justify-content: center;
+  flex: 0 0 auto;
+  inline-size: var(--dimension-size-200);
+  block-size: var(--dimension-size-200);
+  margin-inline-start: auto;
+}
+
+:where(.ds-table__cell--align-center .ds-table__header-content) {
+  justify-content: center;
+}
+
+:where(.ds-table__cell--align-center .ds-table__sort-slot),
+:where(.ds-table__cell--align-end .ds-table__sort-slot) {
+  margin-inline-start: 0;
+}
+
+:where(.ds-table__cell--align-end .ds-table__header-labels) {
+  margin-inline-start: auto;
+}
+
+:where(.ds-table__cell-content),
+:where(.ds-table__cell-copy) {
+  display: flex;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__cell-content) {
+  align-items: flex-start;
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+:where(.ds-table__cell-copy) {
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+:where(.ds-table__cell-track) {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+:where(.ds-table__cell-track--text) {
+  inline-size: 100%;
+  padding-inline: var(--_table-cell-track-label-inset);
+}
+
+:where(.ds-table__cell--text-single),
+:where(.ds-table__cell--text-multi),
+:where(.ds-table__cell--primary-text),
+:where(.ds-table__cell--empty),
+:where(.ds-table__cell--blank) {
+  padding: var(--dimension-space-125);
+}
+
+:where(.ds-table__cell--text-single .ds-table__cell-content),
+:where(.ds-table__cell--text-multi .ds-table__cell-content),
+:where(.ds-table__cell--primary-text .ds-table__cell-content),
+:where(.ds-table__cell--empty .ds-table__cell-content),
+:where(.ds-table__cell--blank .ds-table__cell-content),
+:where(.ds-table__cell--text-single .ds-table__cell-track),
+:where(.ds-table__cell--text-multi .ds-table__cell-track),
+:where(.ds-table__cell--primary-text .ds-table__cell-track),
+:where(.ds-table__cell--empty .ds-table__cell-track) {
+  min-block-size: 0;
+}
+
+:where(.ds-table__cell--text-multi .ds-table__cell-copy) {
+  gap: var(--dimension-space-050);
+}
+
+:where(.ds-table__cell--text-multi .ds-table__cell-secondary) {
+  padding-block: var(--dimension-space-025);
+}
+
+:where(.ds-table__cell--primary-text .ds-table__cell-secondary) {
+  padding-block: 0;
+}
+
+:where(.ds-table__cell--tag-tag-only),
+:where(.ds-table__cell--tag-tag-with-text) {
+  padding: var(--dimension-space-075);
+}
+
+:where(.ds-table__cell--tag-text-with-tag) {
+  padding: var(--dimension-space-125);
+}
+
+:where(.ds-table__cell-tag-stack) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__cell-tag-text) {
+  inline-size: 100%;
+}
+
+:where(.ds-table__cell-tag-stack--tag-with-text .ds-table__cell-tag-text) {
+  padding-inline: calc(
+    var(--_table-cell-track-padding-inline) + var(--_table-cell-track-label-inset)
+  );
+  padding-block: var(--dimension-space-025);
+  min-block-size: 0;
+}
+
+: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;
+}
+
+:where(.ds-table__cell-tag-stack--text-with-tag) {
+  gap: var(--dimension-space-050);
+}
+
+:where(.ds-table__cell-tag-control-track) {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+:where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-control-track) {
+  min-block-size: 0;
+}
+
+:where(.ds-table__cell--icon) {
+  padding: var(--dimension-space-125);
+}
+
+:where(.ds-table__cell--icon .ds-table__cell-content) {
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  min-block-size: var(--dimension-iconography-md);
+}
+
+:where(.ds-table__cell--image) {
+  padding: var(--dimension-space-075);
+}
+
+:where(.ds-table__cell-image) {
+  display: block;
+  box-sizing: border-box;
+  flex: none;
+  block-size: var(--_table-image-block-size);
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
+  border-radius: var(--dimension-radius-025);
+}
+
+:where(.ds-table__cell-image-content),
+:where(.ds-table__cell-image-placeholder) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+:where(.ds-table__cell-image-content) {
+  object-fit: cover;
+}
+
+:where(.ds-table__cell--action) {
+  padding: var(--dimension-space-075);
+}
+
+:where(.ds-table__cell--action .ds-table__cell-content) {
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+:where(.ds-table__cell-primary),
+:where(.ds-table__cell-secondary) {
+  min-inline-size: 0;
+}
+
+:where(.ds-table__cell-copy--wrap) {
+  overflow-wrap: anywhere;
+}
+
+:where(.ds-table__cell--align-center),
+:where(.ds-table__cell--align-center .ds-table__cell-content),
+:where(.ds-table__cell--align-center .ds-table__cell-track),
+:where(.ds-table__cell--align-center .ds-table__header-static),
+:where(.ds-table__cell--align-center .ds-table__header-labels),
+:where(.ds-table__cell--align-center .ds-table__header-label) {
+  text-align: center;
+  justify-content: center;
+}
+
+:where(.ds-table__cell--align-end),
+:where(.ds-table__cell--align-end .ds-table__cell-content),
+:where(.ds-table__cell--align-end .ds-table__cell-track),
+:where(.ds-table__cell--align-end .ds-table__header-static),
+:where(.ds-table__cell--align-end .ds-table__header-labels),
+:where(.ds-table__cell--align-end .ds-table__header-label) {
+  text-align: end;
+  justify-content: flex-end;
+}
+
+:where(.ds-table__body) {
+  background: var(--_table-surface);
+}
+
+:where(.ds-table__row) {
+  min-block-size: var(--_table-row-min-block-size);
+  background: var(--_table-surface);
+}
+
+: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--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) {
+  color: var(--color-foreground-tertiary);
+  opacity: var(--effect-opacity-medium);
+}
+
+:where(.ds-table__selection-cell) {
+  inline-size: 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-050);
+  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);
+}
+
+:where(.ds-table__selection-control) {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: calc(
+    var(--_table-header-min-block-size) - var(--dimension-stroke-width-012)
+  );
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  cursor: default;
+  outline: none;
+}
+
+:where(.ds-table__cell.ds-table__selection-cell .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__selection-control:disabled) {
+  cursor: default;
+}
+
+:where(.ds-table__selection-control:disabled ds-checkbox) {
+  opacity: var(--effect-opacity-medium);
+}
+
+: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);
+}
+
+:where(.ds-table__group-content) {
+  gap: var(--dimension-space-075);
+}
+
+:where(.ds-table__load-cell),
+:where(.ds-table__state-cell) {
+  padding: var(--dimension-space-200) var(--_table-cell-padding-inline);
+  background: var(--_table-surface);
+  text-align: center;
+}
+
+:where(.ds-table__load-content) {
+  justify-content: center;
+  gap: var(--dimension-space-100);
+}
+
+:where(.ds-table__load-content--error) {
+  flex-wrap: wrap;
+}
+
+:where(.ds-table__auto-sentinel) {
+  display: block;
+  min-block-size: var(--dimension-space-025);
+}
+
+:where(.ds-table__state-cell) {
+  block-size: calc(var(--dimension-size-800) * 2);
+}
+
+:where(.ds-table__skeleton-row) {
+  pointer-events: none;
+}
+
+:where(.ds-table__skeleton-row:last-child .ds-table__cell),
+:where(.ds-table__load-row:last-child .ds-table__load-cell),
+: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;
+  --ds-interaction-group-divider-width: 0px;
+}
+
+:where(.ds-visually-hidden) {
+  position: absolute;
+  inline-size: var(--dimension-stroke-width-012);
+  block-size: var(--dimension-stroke-width-012);
+  padding: 0;
+  margin: calc(-1 * var(--dimension-stroke-width-012));
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.ds-table__cell--sticky-start),
+  :where(.ds-table__cell--sticky-end) {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where(.ds-table) {
+    --_table-surface: var(--ds-forced-color-surface);
+    --_table-header-surface: var(--ds-forced-color-surface);
+    --_table-group-surface: var(--ds-forced-color-surface);
+    --_table-border: var(--ds-forced-color-control-boundary);
+    --_table-column-border: var(--ds-forced-color-control-boundary);
+    --_table-border-strong: var(--ds-forced-color-control-boundary);
+    color: var(--ds-forced-color-content);
+  }
+
+  :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--disabled) {
+    color: var(--ds-forced-color-disabled);
+    opacity: 1;
+  }
+
+  :where(.ds-table__selection-control:disabled ds-checkbox) {
+    --ds-forced-color-content: var(--ds-forced-color-disabled);
+    opacity: 1;
+  }
+
+  :where(.ds-table__header-label--interactive:focus-visible),
+  :where(.ds-table__selection-control:focus-visible),
+  :where(.ds-table__viewport:focus-visible) {
+    outline-color: var(--ds-forced-color-selected);
+  }
+}