@sebgroup/green-core 3.9.0 → 3.11.0

package/components/table/table.styles.js

@@ -10,6 +10,24 @@ const TableStyles = css`
     --_table-height: 80vh;
     --_table-border-width: var(--gds-sys-space-5xs);
     --_table-border-color: var(--gds-sys-color-border-neutral-02);
+    --_skeleton-base: color-mix(
+      in srgb,
+      var(--gds-sys-color-content-neutral-01) 7%,
+      transparent
+    );
+    --_skeleton-highlight: color-mix(
+      in srgb,
+      var(--gds-sys-color-content-neutral-01) 15%,
+      transparent
+    );
+    --table-skeleton-text-height: 18px;
+    --table-skeleton-title-height: 20px;
+    --table-skeleton-block-height: 56px;
+    --table-expanded-full-skeleton-padding: var(--gds-sys-space-s);
+    --table-expanded-full-skeleton-gap: var(--gds-sys-space-s);
+    --table-expanded-full-skeleton-min-height: calc(
+      var(--table-row-min-height, var(--gds-sys-space-4xl)) * 3.25
+    );
   }
 
   /* Density Modes */
@@ -25,6 +43,14 @@ const TableStyles = css`
     --table-border-spacing: 0 var(--gds-sys-space-5xs);
     --table-data-padding: var(--gds-sys-space-5xs) var(--gds-sys-space-4xs);
     --table-data-padding-x: var(--gds-sys-space-4xs);
+    --table-skeleton-text-height: 18px;
+    --table-skeleton-title-height: 16px;
+    --table-skeleton-block-height: 48px;
+    --table-expanded-full-skeleton-padding: var(--gds-sys-space-xs);
+    --table-expanded-full-skeleton-gap: var(--gds-sys-space-xs);
+    --table-expanded-full-skeleton-min-height: calc(
+      var(--table-row-min-height) * 3
+    );
   }
 
   /* Comfortable default */
@@ -39,6 +65,14 @@ const TableStyles = css`
     --table-border-spacing: 0 var(--gds-sys-space-4xs);
     --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-2xs);
     --table-data-padding-x: var(--gds-sys-space-2xs);
+    --table-skeleton-text-height: 18px;
+    --table-skeleton-title-height: 20px;
+    --table-skeleton-block-height: 56px;
+    --table-expanded-full-skeleton-padding: var(--gds-sys-space-s);
+    --table-expanded-full-skeleton-gap: var(--gds-sys-space-s);
+    --table-expanded-full-skeleton-min-height: calc(
+      var(--table-row-min-height) * 3.25
+    );
   }
 
   /* Spacious density */
@@ -53,33 +87,71 @@ const TableStyles = css`
     --table-border-spacing: 0 var(--gds-sys-space-3xs);
     --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs);
     --table-data-padding-x: var(--gds-sys-space-xs);
+    --table-skeleton-text-height: 20px;
+    --table-skeleton-title-height: 24px;
+    --table-skeleton-block-height: 64px;
+    --table-expanded-full-skeleton-padding: var(--gds-sys-space-m);
+    --table-expanded-full-skeleton-gap: var(--gds-sys-space-m);
+    --table-expanded-full-skeleton-min-height: calc(
+      var(--table-row-min-height) * 3.5
+    );
   }
 
   /* Neutral 02 variants */
   .data.variant-neutral-02,
   .data.variant-neutral-02-outlined {
-    --_table-header-bg: var(--gds-sys-color-l2-neutral-01);
-    --_table-header-hover: var(--gds-sys-color-l3-neutral-02);
-    --_table-header-active: var(--gds-sys-color-l3-neutral-03);
-    --_table-row-hover: var(--gds-sys-color-l2-neutral-01);
-    --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03-2);
-    --_table-row-striped: var(--gds-sys-color-l2-neutral-01);
-    --_table-card-bg: var(--gds-sys-color-l1-neutral-01);
+    --_table-header-bg: var(--gds-sys-color-l2-neutral-02-2);
+    --_table-header-hover: color-mix(
+      in srgb,
+      var(--_table-header-bg),
+      var(--gds-sys-color-state-neutral-03)
+    );
+    --_table-header-active: color-mix(
+      in srgb,
+      var(--_table-header-bg),
+      var(--gds-sys-color-state-neutral-04)
+    );
+    --_table-row-hover: var(--gds-sys-color-l2-neutral-02-2);
+    --_table-row-expanded: var(--gds-sys-color-l3-neutral-02);
+    --_table-row-selected: var(--gds-sys-color-l3-neutral-02);
+    --_table-row-selected-hover: color-mix(
+      in srgb,
+      var(--gds-sys-color-l3-neutral-02),
+      var(--gds-sys-color-state-neutral-01)
+    );
+    --_table-row-striped: var(--gds-sys-color-l2-neutral-02-2);
+    --_table-row-striped-hover: color-mix(
+      in srgb,
+      var(--_table-row-striped),
+      var(--gds-sys-color-state-neutral-01)
+    );
+    --_table-card-bg: var(--gds-card-variant-background);
   }
 
   /* Neutral 01 variant */
   .data.variant-neutral-01 {
     --_table-header-bg: var(--gds-sys-color-l2-neutral-02);
-    --_table-header-hover: var(--gds-sys-color-l3-neutral-02);
-    --_table-header-active: var(--gds-sys-color-l3-neutral-03);
-    --_table-row-hover: color-mix(
+    --_table-header-hover: color-mix(
       in srgb,
-      var(--gds-sys-color-l3-neutral-02),
-      var(--gds-sys-color-state-neutral-01)
+      var(--_table-header-bg),
+      var(--gds-sys-color-state-neutral-03)
+    );
+    --_table-header-active: color-mix(
+      in srgb,
+      var(--_table-header-bg),
+      var(--gds-sys-color-state-neutral-04)
     );
+    --_table-row-expanded: var(--gds-sys-color-l3-neutral-02);
+    --_table-row-hover: var(--gds-sys-color-l2-neutral-02-2);
+    --_table-row-selected: var(--gds-sys-color-l3-neutral-02);
     --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-01-2);
-    --_table-row-striped: var(--gds-sys-color-l2-neutral-01);
-    --_table-card-bg: var(--gds-sys-color-l2-neutral-01);
+    --_table-row-striped: var(--gds-sys-color-l2-neutral-02-2);
+    --_table-row-striped-hover: color-mix(
+      in srgb,
+      var(--_table-row-striped),
+      var(--gds-sys-color-state-neutral-01)
+    );
+    --_table-card-bg: var(--gds-card-variant-background);
   }
 
   /* Apply density variables */
@@ -99,7 +171,6 @@ const TableStyles = css`
     overflow-y: auto;
     max-height: var(--_table-height);
     box-sizing: border-box;
-    padding: var(--table-data-padding);
     position: relative;
     border-radius: var(--gds-sys-radius-m);
   }
@@ -130,18 +201,22 @@ const TableStyles = css`
     border: none;
     border-collapse: separate;
     border-spacing: var(--table-border-spacing);
+    padding-top: var(--table-data-padding-x);
+    padding-inline: var(--table-data-padding-x);
   }
 
   tbody td {
     font-weight: normal;
+    min-height: var(--table-row-min-height);
     padding-block: var(--table-cell-padding-y);
     padding-inline: var(--table-cell-padding-x);
+    background-color: var(--_table-current-row-bg, var(--_table-card-bg));
   }
 
   thead tr th:first-child,
-  tbody tr:hover td:first-child,
-  tbody tr.selected td:first-child,
-  .striped tbody tr td:first-child {
+  tbody tr:hover:not(.expanded-row, .expanded-parent) td:first-child,
+  tbody tr.selected:not(.expanded-row, .expanded-parent) td:first-child,
+  .striped tbody tr:not(.expanded-row, .expanded-parent) td:first-child {
     border-top-left-radius: var(--gds-sys-radius-s);
     border-bottom-left-radius: var(--gds-sys-radius-s);
   }
@@ -149,7 +224,7 @@ const TableStyles = css`
   thead tr th:last-child,
   tbody tr:hover td:last-child,
   tbody tr.selected td:last-child,
-  .striped tbody tr td:last-child {
+  .striped tbody tr:not(.expanded-row, .expanded-parent) td:last-child {
     border-top-right-radius: var(--gds-sys-radius-s);
     border-bottom-right-radius: var(--gds-sys-radius-s);
   }
@@ -219,6 +294,10 @@ const TableStyles = css`
     border-top-color: var(--_table-border-color);
   }
 
+  tbody tr {
+    --_table-current-row-bg: var(--_table-card-bg);
+  }
+
   tbody tr.loading {
     opacity: 0.3;
     pointer-events: none;
@@ -235,8 +314,173 @@ const TableStyles = css`
     width: var(--gds-sys-space-l);
     max-width: var(--gds-sys-space-l);
     padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
+    position: sticky;
+    left: 0;
+    z-index: 4;
+  }
+
+  .cell-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Expanded */
+
+  .expander-cell {
+    min-width: var(--gds-sys-space-xl);
+    width: var(--gds-sys-space-xl);
+    max-width: var(--gds-sys-space-xl);
+    position: sticky;
+    left: 0;
+    z-index: 3;
+  }
+
+  th.expander-cell {
+    padding-inline: var(--table-cell-padding-x);
+  }
+
+  /* When both expander and checkbox are present, offset checkbox past expander.
+     Expander width = its content width + both inline paddings (content-box), plus container padding. */
+  .expander-cell + .checkbox-cell {
+    left: calc(var(--gds-sys-space-xl) + 2 * var(--table-cell-padding-x));
+  }
+
+  /* Sticky-like data cells follow the current row background. */
+  td.expander-cell,
+  td.checkbox-cell,
+  td.sticky-left,
+  td.sticky-right {
+    background: var(--_table-current-row-bg, var(--_table-card-bg));
+  }
+
+  /* Border-right divider on the outermost left sticky control column.
+     Uses container state classes instead of per-row sibling checks. */
+  .overflows-x.is-selectable:not(.scrolled-x-start):not(.has-sticky-left)
+    .checkbox-cell,
+  .overflows-x.is-expandable:not(.is-selectable):not(.scrolled-x-start):not(
+      .has-sticky-left
+    )
+    .expander-cell {
+    border-right: var(--_table-border-width) solid var(--_table-border-color);
+  }
+
+  /* ---- User-defined sticky columns ---- */
+
+  th.sticky-left,
+  td.sticky-left {
+    position: sticky;
+    z-index: 2;
+  }
+
+  th.sticky-left {
+    background: var(--_table-header-bg);
+  }
+
+  th.sticky-right,
+  td.sticky-right {
+    position: sticky;
+    z-index: 2;
   }
 
+  th.sticky-right {
+    background: var(--_table-header-bg);
+  }
+
+  /* tfoot sticky-left/right get header bg */
+  tfoot td.sticky-left,
+  tfoot th.sticky-left,
+  tfoot td.sticky-right,
+  tfoot th.sticky-right {
+    background: var(--_table-header-bg);
+  }
+
+  /* Divider borders — only the outermost column on each side shows the line */
+  .overflows-x:not(.scrolled-x-start) td.sticky-left-last,
+  .overflows-x:not(.scrolled-x-start) th.sticky-left-last {
+    border-right: var(--_table-border-width) solid var(--_table-border-color);
+  }
+
+  .overflows-x:not(.scrolled-x-end) td.sticky-right-last,
+  .overflows-x:not(.scrolled-x-end) th.sticky-right-last {
+    border-left: var(--_table-border-width) solid var(--_table-border-color);
+  }
+
+  tr.expanded-parent {
+    --_table-current-row-bg: var(--_table-row-expanded);
+    background: var(--_table-row-expanded);
+  }
+
+  tr.expanded-parent td:last-child {
+    border-bottom-right-radius: 0;
+  }
+
+  tr.expanded-parent td:first-child {
+    border-top-left-radius: var(--gds-sys-radius-s);
+    border-bottom-left-radius: 0;
+  }
+
+  tr.expanded-parent td:last-child {
+    border-top-right-radius: var(--gds-sys-radius-s);
+    border-bottom-right-radius: 0;
+  }
+
+  tr.expanded-parent td {
+    border-top-color: transparent;
+  }
+
+  /* Expanded row */
+  tr.expanded-row td {
+    border-top-color: transparent;
+  }
+
+  tr.expanded-row {
+    --_table-current-row-bg: var(--_table-row-expanded);
+    background: var(--_table-row-expanded);
+  }
+
+  tr.expanded-row:not([aria-busy='true']) td {
+    transition-property: opacity, translate;
+    transition-duration: var(--gds-sys-motion-duration-fast);
+    transition-timing-function: var(--gds-sys-motion-easing-enter);
+    opacity: 1;
+    translate: 0 0;
+
+    @starting-style {
+      opacity: 0;
+      translate: 0 4px;
+    }
+  }
+
+  tr.expanded-row.full:not([aria-busy='true']) .expanded-full-cell > * {
+    transition-property: opacity, translate;
+    transition-duration: var(--gds-sys-motion-duration-fast);
+    transition-timing-function: var(--gds-sys-motion-easing-enter);
+    opacity: 1;
+    translate: 0 0;
+
+    @starting-style {
+      opacity: 0;
+      translate: 0 6px;
+    }
+  }
+
+  tr.expanded-row.expanded-group-end td:first-child {
+    border-bottom-left-radius: var(--gds-sys-radius-s);
+  }
+
+  tr.expanded-row.expanded-group-end td:last-child {
+    border-bottom-right-radius: var(--gds-sys-radius-s);
+  }
+
+  tr.expanded-row + tr td {
+    border-top-color: transparent;
+  }
+
+  /* End · Expanded */
+
   tbody tr:hover td,
   tbody tr.selected td,
   tbody tr:first-child td {
@@ -253,17 +497,42 @@ const TableStyles = css`
   }
 
   tbody tr.selected {
-    background-color: var(--gds-sys-color-l3-neutral-02);
+    --_table-current-row-bg: var(--_table-row-selected);
+    background-color: var(--_table-row-selected);
   }
 
   @media (hover: hover) and (min-width: 768px) {
     tbody tr.selected:hover {
+      --_table-current-row-bg: var(--_table-row-selected-hover);
       background-color: var(--_table-row-selected-hover);
     }
 
-    tbody tr:hover:not(.selected) {
+    tbody tr:hover:not(.selected, .expanded-row, .expanded-parent) {
+      --_table-current-row-bg: var(--_table-row-hover);
       background-color: var(--_table-row-hover);
     }
+
+    .striped tbody tr:nth-child(even):hover:not(.selected) {
+      --_table-current-row-bg: var(--_table-row-striped-hover);
+      background-color: var(--_table-row-striped-hover);
+    }
+
+    .striped tbody tr.expanded-parent:nth-child(even):hover:not(.selected),
+    .striped tbody tr.expanded-row:nth-child(even):hover:not(.selected) {
+      --_table-current-row-bg: var(--_table-row-striped-hover);
+      background: var(--_table-row-striped-hover);
+    }
+
+    .striped
+      tbody
+      tr.expanded-parent:nth-child(even):hover:not(.selected)
+      td:not(.sticky-left):not(.sticky-right),
+    .striped
+      tbody
+      tr.expanded-row:nth-child(even):hover:not(.selected)
+      td:not(.sticky-left):not(.sticky-right) {
+      background-color: var(--_table-row-striped-hover);
+    }
   }
 
   tbody tr:hover,
@@ -272,7 +541,31 @@ const TableStyles = css`
   }
 
   /* Striped */
-  .striped tbody tr:not(.selected, :hover):nth-child(even) td {
+  .striped tbody tr:nth-child(even):not(.selected):not(:hover) {
+    --_table-current-row-bg: var(--_table-row-striped);
+  }
+
+  .striped tbody tr.expanded-parent:nth-child(even):not(.selected):not(:hover),
+  .striped tbody tr.expanded-row:nth-child(even):not(.selected):not(:hover) {
+    --_table-current-row-bg: var(--_table-row-striped);
+    background: var(--_table-row-striped);
+  }
+
+  .striped
+    tbody
+    tr:nth-child(even):not(.selected):not(:hover)
+    td:not(.sticky-left):not(.sticky-right) {
+    background-color: var(--_table-row-striped);
+  }
+
+  .striped
+    tbody
+    tr.expanded-parent:nth-child(even):not(.selected):not(:hover)
+    td:not(.sticky-left):not(.sticky-right),
+  .striped
+    tbody
+    tr.expanded-row:nth-child(even):not(.selected):not(:hover)
+    td:not(.sticky-left):not(.sticky-right) {
     background-color: var(--_table-row-striped);
   }
 
@@ -280,6 +573,13 @@ const TableStyles = css`
     border-color: transparent;
   }
 
+  /* Keep expanded parent connected with its expanded rows */
+  tbody tr.expanded-parent td:last-child,
+  tbody tr.expanded-parent:hover td:last-child,
+  tbody tr.expanded-parent.selected td:last-child {
+    border-bottom-right-radius: 0;
+  }
+
   /* Header & Footer Layout */
 
   .header {
@@ -312,6 +612,11 @@ const TableStyles = css`
     display: flex;
     align-items: center;
     gap: 10px;
+    transition: all 420ms;
+
+    @starting-style {
+      opacity: 0;
+    }
   }
 
   /* Wrapping utilities */
@@ -357,116 +662,6 @@ const TableStyles = css`
     flex-direction: row-reverse;
   }
 
-  th.actions {
-    padding-inline: 0;
-  }
-
-  th.actions.justify-end .column-header {
-    justify-content: flex-end;
-  }
-
-  /* Sticky actions column */
-  th.actions.sticky,
-  td.actions-cell.sticky {
-    position: sticky;
-    right: calc(-1 * var(--table-data-padding-x, 0px));
-    z-index: 1;
-    width: max-content;
-    padding-right: calc(
-      var(--table-cell-padding-x) + var(--table-data-padding-x, 0px)
-    );
-  }
-
-  th.actions.sticky {
-    z-index: 2;
-    background: var(--_table-header-bg);
-  }
-
-  th.actions.sticky .column-header {
-    justify-content: flex-end;
-  }
-
-  td.actions-cell.sticky {
-    background: var(--_table-card-bg);
-  }
-
-  td.actions-cell.sticky .cell-content {
-    justify-content: flex-end;
-    position: relative;
-  }
-
-  /* Left gradient fade on sticky action cells */
-  td.actions-cell.sticky::before {
-    content: '';
-    position: absolute;
-    inset-block: 0;
-    right: 100%;
-    width: var(--gds-sys-space-4xl);
-    pointer-events: none;
-    background: linear-gradient(to right, transparent, var(--_table-card-bg));
-  }
-
-  th.actions.sticky::before {
-    content: '';
-    position: absolute;
-    inset-block: 0;
-    right: 100%;
-    width: var(--gds-sys-space-4xl);
-    pointer-events: none;
-    background: linear-gradient(to right, transparent, var(--_table-header-bg));
-  }
-
-  /* Sticky action inherits row hover/selected/striped backgrounds */
-  tbody tr:hover td.actions-cell.sticky {
-    background: var(--_table-row-hover);
-  }
-
-  tbody tr:hover td.actions-cell.sticky::before {
-    background: linear-gradient(to right, transparent, var(--_table-row-hover));
-  }
-
-  tbody tr.selected td.actions-cell.sticky {
-    background: var(--gds-sys-color-l3-neutral-02);
-  }
-
-  tbody tr.selected td.actions-cell.sticky::before {
-    background: linear-gradient(
-      to right,
-      transparent,
-      var(--gds-sys-color-l3-neutral-02)
-    );
-  }
-
-  tbody tr.selected:hover td.actions-cell.sticky {
-    background: var(--_table-row-selected-hover);
-  }
-
-  tbody tr.selected:hover td.actions-cell.sticky::before {
-    background: linear-gradient(
-      to right,
-      transparent,
-      var(--_table-row-selected-hover)
-    );
-  }
-
-  .striped
-    tbody
-    tr:not(.selected, :hover):nth-child(even)
-    td.actions-cell.sticky {
-    background: var(--_table-row-striped);
-  }
-
-  .striped
-    tbody
-    tr:not(.selected, :hover):nth-child(even)
-    td.actions-cell.sticky::before {
-    background: linear-gradient(
-      to right,
-      transparent,
-      var(--_table-row-striped)
-    );
-  }
-
   /* Table Footer Row */
 
   tfoot.tablefoot tr td,
@@ -506,16 +701,6 @@ const TableStyles = css`
     will-change: transform;
   }
 
-  /* When sticky tablefoot: move padding from .data to table, keep tfoot edge-to-edge */
-  .data:has(tfoot.tablefoot.sticky) {
-    padding: 0;
-  }
-
-  .data:has(tfoot.tablefoot.sticky) table {
-    padding-top: var(--table-data-padding-x);
-    padding-inline: var(--table-data-padding-x);
-  }
-
   tfoot.tablefoot.sticky tr td,
   tfoot.tablefoot.sticky tr th[scope='row'] {
     border-radius: 0;
@@ -561,6 +746,7 @@ const TableStyles = css`
   @media (max-width: 760px) {
     .responsive.data {
       display: contents;
+      --_table-row-striped: transparent;
     }
 
     .responsive table {
@@ -614,6 +800,22 @@ const TableStyles = css`
       border: none;
     }
 
+    .responsive td.expander-cell,
+    .responsive td.checkbox-cell {
+      width: auto;
+      max-width: none;
+      padding-top: 0;
+      padding-bottom: var(--gds-sys-space-xs);
+    }
+
+    .responsive .expand-toggle {
+      align-self: flex-start;
+    }
+
+    .responsive tr.expanded-row {
+      margin-top: 0;
+    }
+
     .responsive td .column-label {
       text-align: left;
       flex: 1;
@@ -632,11 +834,6 @@ const TableStyles = css`
       justify-content: flex-end;
       text-align: right;
     }
-
-    .responsive tr:hover,
-    .responsive tr td:hover {
-      background: none;
-    }
   }
 
   /* Medium screens: input and dropdown side by side */
@@ -712,14 +909,13 @@ const TableStyles = css`
     display: inline-block;
     background: linear-gradient(
       90deg,
-      var(--gds-sys-color-l3-neutral-01) 25%,
-      var(--gds-sys-color-l2-neutral-01) 50%,
-      var(--gds-sys-color-l3-neutral-01) 75%
+      var(--_skeleton-base) 25%,
+      var(--_skeleton-highlight) 50%,
+      var(--_skeleton-base) 75%
     );
     background-size: 200% 100%;
     animation: skeleton-shimmer 1.5s ease-in-out infinite;
     border-radius: var(--gds-sys-space-max);
-    opacity: 0.1;
   }
 
   @keyframes skeleton-shimmer {
@@ -733,7 +929,7 @@ const TableStyles = css`
 
   /* Skeleton elements */
   .skeleton-text {
-    height: 14px;
+    height: var(--table-skeleton-text-height);
     width: 80%;
     min-width: 60px;
   }
@@ -750,6 +946,41 @@ const TableStyles = css`
     border-radius: var(--gds-sys-radius-max);
   }
 
+  .skeleton-title {
+    height: var(--table-skeleton-title-height);
+    width: min(34ch, 70%);
+  }
+
+  .skeleton-block {
+    height: var(--table-skeleton-block-height);
+    border-radius: var(--gds-sys-radius-s);
+  }
+
+  .expanded-full-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: var(--table-expanded-full-skeleton-gap);
+    padding: var(--table-expanded-full-skeleton-padding);
+    min-height: var(--table-expanded-full-skeleton-min-height);
+  }
+
+  .expanded-full-skeleton-meta {
+    display: grid;
+    gap: var(--table-expanded-full-skeleton-gap);
+    grid-template-columns: repeat(3, minmax(120px, 1fr));
+  }
+
+  tr.expanded-row.skeleton-leave td {
+    transition-property: opacity;
+    transition-duration: var(--gds-sys-motion-duration-fast);
+    transition-timing-function: var(--gds-sys-motion-easing-leave);
+    opacity: 0;
+  }
+
+  tr.expanded-row.skeleton-leave .skeleton {
+    animation-play-state: paused;
+  }
+
   /* Skeleton row styling */
   .skeleton-row {
     opacity: 1;
@@ -786,32 +1017,12 @@ const TableStyles = css`
   /* Scroll driven animation */
   @supports (animation-timeline: scroll()) {
     @media (prefers-reduced-motion: no-preference) {
-      tbody tr {
-        animation-name: ROW_ANIMATION_VERTICAL, ROW_ANIMATION_VERTICAL;
-        animation-fill-mode: both;
-        animation-timing-function: ease-in-out;
-        animation-direction: normal, reverse;
-        animation-timeline: view(block);
-        animation-range:
-          entry -40px,
-          exit -40px;
-      }
-
-      @keyframes ROW_ANIMATION_VERTICAL {
-        0% {
-          opacity: 0;
-          filter: blur(12px);
-          translate: 0 12px;
-        }
-      }
-
       thead {
         position: sticky;
         top: 4px;
         z-index: 10;
         transition: box-shadow 200ms ease;
         border-radius: var(--gds-sys-radius-s);
-        will-change: transform;
       }
 
       thead {
@@ -820,21 +1031,11 @@ const TableStyles = css`
 
       .data.scrolled thead {
         box-shadow:
+          0 -10px 0 0 var(--gds-card-variant-background),
+          -10px -10px 0 0 var(--gds-card-variant-background),
+          10px -10px 0 0 var(--gds-card-variant-background),
           var(--gds-sys-shadow-l-01),
-          var(--gds-sys-shadow-l-02),
-          inset 0 -4px 6px var(--gds-sys-color-l1-neutral-01);
-        backdrop-filter: blur(8px);
-        background: color-mix(
-          in srgb,
-          var(--gds-sys-color-l2-neutral-01),
-          transparent 30%
-        );
-      }
-
-      @media (prefers-reduced-transparency: no-preference) {
-        .data.scrolled thead tr th {
-          background: transparent;
-        }
+          var(--gds-sys-shadow-l-02);
       }
 
       /* Sticky table footer */
@@ -891,8 +1092,8 @@ const TableStyles = css`
         animation-timeline: scroll(self inline);
       }
 
-      /* When sticky actions are present, remove the right fade.*/
-      .data:has(td.actions-cell.sticky) {
+      /* When sticky-right column is present, remove the right fade. */
+      .data.has-sticky-right {
         mask: linear-gradient(
           to right,
           #0000,
@@ -900,6 +1101,23 @@ const TableStyles = css`
           #ffff 100%
         );
       }
+
+      /* When expandable, selectable, or sticky-left column is present, remove the left fade. */
+      .data.is-expandable,
+      .data.is-selectable,
+      .data.has-sticky-left {
+        mask: linear-gradient(
+          to right,
+          #ffff,
+          #ffff calc(100% - var(--_end-fade)),
+          #0000
+        );
+      }
+
+      /* When both left and right sticky columns are present, remove both fades. */
+      .data.no-mask {
+        mask: none;
+      }
     }
   }
 
@@ -960,7 +1178,9 @@ const TableStyles = css`
     thead th .column-header,
     .sort-icon,
     .column-header,
-    .header {
+    .header,
+    tr.expanded-row.skeleton-leave td,
+    tr.expanded-row.full:not([aria-busy='true']) .expanded-full-cell > * {
       transition: none;
       animation: none;
     }