@xplortech/apollo-react 2.7.0 → 2.8.0

package/css/apollo.css

@@ -4515,10 +4515,16 @@ button.xpl-button--loading.xpl-button--tertiary,
 /* @floating/ui now calculates the position for the dropdown */
 
 .xpl-dropdown--anchor-to-trigger {
-  position: fixed;
-  margin: 0px;
-  transform: none;
-}
+    will-change: transform;
+
+    /* Cancel base `-translate-y-2` / `--open` `translate-y-2`; Floating UI owns `transform`. */
+
+    position: fixed;
+
+    margin: 0px;
+
+    transform: none;
+  }
 
 .xpl-dropdown--above {
   margin-top: 0px;
@@ -4663,38 +4669,28 @@ button.xpl-button--loading.xpl-button--tertiary,
 .xpl-dynamic-table-cell {
   border-right-width: 1px;
   border-bottom-width: 1px;
+  border-color: var(--xpl-color-gray-400);
   vertical-align: middle;
   display: flex;
+  height: 3.5rem;
+  min-width: 3rem;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow-wrap: break-word;
+  padding: 1rem;
   text-align: left;
 
-  border-color: var(--xpl-border-default);
-  padding: calc(var(--xpl-space-10) + 1px) var(--xpl-space-16);
-  min-height: var(--xpl-size-350);
-  background-color: var(--xpl-background-surface-default);
-  color: var(--xpl-text-default);
-  font-family: var(--xpl-font-family-default);
-  font-size: var(--xpl-font-size-title-5);
+  background-color: var(--xpl-color-foreground-lm);
+  color: var(--xpl-color-text-primary-lm);
+  font-size: var(--xpl-size-font-title-5);
   font-weight: var(--xpl-font-weight-medium);
 }
 
-.xpl-dynamic-table-cell:has(button[dropdown]) {
-    padding: 0;
-  }
-
-/* Checkbox-only column: Figma py-20 / px-16 */
-
-.xpl-dynamic-table-cell:has(> xpl-checkbox:first-child:last-child) {
-    padding: calc(var(--xpl-space-16) + var(--xpl-space-4)) var(--xpl-space-16);
-  }
-
 .xpl-dynamic-table-cell .xpl-checkbox-radio-container {
-  margin-bottom: 0px;
+  margin-bottom: 0.25rem;
 }
 
 .xpl-dynamic-table-cell .xpl-checkbox-radio-container .xpl-label {
@@ -4702,8 +4698,8 @@ button.xpl-button--loading.xpl-button--tertiary,
 }
 
 .xpl-dynamic-table-cell xpl-avatar {
-    margin-right: var(--xpl-space-8);
-  }
+  padding-right: 0.5rem;
+}
 
 .xpl-dynamic-table-cell button[dropdown] {
   display: flex;
@@ -4712,25 +4708,22 @@ button.xpl-button--loading.xpl-button--tertiary,
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  padding: 1rem;
   outline: 2px solid transparent;
   outline-offset: 2px;
-
-    padding: calc(var(--xpl-space-10) + 1px) var(--xpl-space-16);
 }
 
 .xpl-dynamic-table-cell button[dropdown] xpl-icon {
-      margin-left: var(--xpl-space-8);
-    }
+  margin-left: 0.5rem;
+}
 
-.xpl-dynamic-table-cell button[dropdown]:focus-visible {
-      outline-color: var(--xpl-border-focus);
-      outline-width: 2px;
-      outline-offset: 2px;
+.xpl-dynamic-table-cell button[dropdown]:focus {
+      box-shadow: inset 0 0 0 1px var(--xpl-color-purple-700);
     }
 
 .xpl-dynamic-table-cell button[dropdown]:disabled {
-  cursor: not-allowed;
-}
+      cursor: not-allowed;
+    }
 
 .xpl-dynamic-table-cell span:not(button[dropdown] span) {
   margin-right: auto;
@@ -4744,23 +4737,62 @@ button.xpl-button--loading.xpl-button--tertiary,
   overflow-wrap: break-word;
 }
 
+.dark .xpl-dynamic-table-cell {
+  border-color: var(--xpl-color-gray-600);
+
+  background-color: var(--xpl-color-foreground-dm);
+  color: var(--xpl-color-gray-50);
+}
+
+.dark .xpl-dynamic-table-cell button[dropdown] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dark .xpl-dynamic-table-cell button[dropdown]:focus {
+      box-shadow: inset 0 0 0 1px var(--xpl-color-purple-500);
+    }
+
+.xpl-dynamic-table-cell:has(button[dropdown]) {
+  padding: 0;
+}
+
 .xpl-dynamic-table-row {
   display: contents;
 }
 
 .xpl-dynamic-table-row > *:first-child {
-    border-left: var(--xpl-border-small) solid var(--xpl-border-default);
-  }
+  border-left-width: 1px;
+  border-color: var(--xpl-color-gray-400);
+}
 
 .xpl-dynamic-table-row.selected .xpl-dynamic-table-cell {
-    background-color: var(--xpl-background-surface-information);
+    background-color: var(--xpl-color-purple-50);
   }
 
 .xpl-dynamic-table-row.disabled .xpl-dynamic-table-cell {
-    background-color: var(--xpl-background-surface-subtlest);
-    color: var(--xpl-text-disabled);
+    background-color: var(--xpl-color-gray-50);
+    color: var(--xpl-color-gray-500);
+  }
+
+.dark .xpl-dynamic-table-row > *:first-child {
+  border-color: var(--xpl-color-gray-600);
+}
+
+.dark .xpl-dynamic-table-row.selected .xpl-dynamic-table-cell {
+    background-color: var(--xpl-color-gray-700);
+  }
+
+.dark .xpl-dynamic-table-row.disabled .xpl-dynamic-table-cell {
+    background-color: var(--xpl-color-gray-900);
+    color: var(--xpl-color-gray-500);
   }
 
+.dark .xpl-dynamic-table-row.disabled .xpl-dynamic-table-cell .xpl-badge {
+      color: var(--xpl-color-gray-500);
+    }
+
 /* stylelint-disable color-no-hex -- third-party flatpickr overrides; hex values are intentional. Flatpickr overrides */
 
 [class^="flatpickr-"] {
@@ -5364,37 +5396,6 @@ span.flatpickr-weekday {
     grid-template-columns: var(--column-widths);
 }
 
-/*
- * Slotted table rows live in the light DOM (not under .content--shown), so corner radius
- * is keyed off the host expanded class.
- */
-
-.xpl-header-accordion--expanded
-  xpl-table-body
-  > xpl-table-row:last-child
-  > xpl-table-cell:first-child {
-  border-bottom-left-radius: var(--xpl-border-radius-default);
-}
-
-.xpl-header-accordion--expanded
-  xpl-table-body
-  > xpl-table-row:last-child
-  > xpl-table-cell:last-child {
-  border-bottom-right-radius: var(--xpl-border-radius-default);
-}
-
-.xpl-header-accordion--expanded
-  xpl-dynamic-table-row:last-child
-  > xpl-dynamic-table-cell:first-child {
-  border-bottom-left-radius: var(--xpl-border-radius-default);
-}
-
-.xpl-header-accordion--expanded
-  xpl-dynamic-table-row:last-child
-  > xpl-dynamic-table-cell:last-child {
-  border-bottom-right-radius: var(--xpl-border-radius-default);
-}
-
 .dark .xpl-header-accordion .header-accordion {
     background-color: var(--xpl-color-background-dm);
     border-color: var(--xpl-color-gray-600);
@@ -8936,274 +8937,13 @@ span.xpl-placeholder--hidden,
   }
 }
 
-/*
- * xpl-table styles
- *
- * Supports two rendering modes:
- * 1. Compositional (CSS grid): .xpl-table without .xpl-table--legacy
- * 2. Legacy data-driven: .xpl-table--legacy (native <table> markup)
- *
- * The legacy path preserves backward compatibility and will be removed in a
- * future major release.
- */
-
-/* --------------------------------------------------------------------------
- * Compositional grid mode
- * -------------------------------------------------------------------------- */
-
-.xpl-table:not(.xpl-table--legacy) {
-  display: grid;
-
-  grid-template-columns: var(--column-widths);
-  border: var(--xpl-border-small) solid var(--xpl-border-default);
-  border-radius: var(--xpl-border-radius-default);
-  overflow: auto;
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-/* Nested inside xpl-header-accordion: outer card draws border + radius; table is flush grid */
-
-.xpl-header-accordion .xpl-table:not(.xpl-table--legacy) {
-  /* Keep side + bottom frame inside accordion; suppress top to avoid double rule under accordion header. */
-  border-top: none;
-  border-right: var(--xpl-border-small) solid var(--xpl-border-default);
-  border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
-  border-left: var(--xpl-border-small) solid var(--xpl-border-default);
-  border-radius: 0;
-  box-shadow: none;
-}
-
-/* Visually hidden assertive live region for row reorder announcements (compositional `row-reorderable`). */
-
-.xpl-table:not(.xpl-table--legacy) > .xpl-table__reorder-live {
-  grid-column: 1 / -1;
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-/* Selection bulk-action toolbar (same structure/classes as `xpl-toolbar`); full width, sticky while scrolling. */
-
-.xpl-table:not(.xpl-table--legacy) > .xpl-table__toolbar {
-  grid-column: 1 / -1;
-  position: sticky;
-  top: 0px;
-
-  z-index: var(--xpl-z-index-200);
-}
-
-/* Outer host already draws the top border; avoid a double line under the rounded top edge. */
-
-.xpl-table:not(.xpl-table--legacy) > .xpl-table__toolbar .toolbar {
-  border-top: none;
-  max-height: var(--xpl-size-350);
-
-  /* Figma: 56px bar height with 12px vertical / 24px horizontal padding; 16px gaps come from toolbar.css */
-  min-height: var(--xpl-size-350);
-  box-sizing: border-box;
-}
-
-/* Match `xpl-toolbar`: push right-slot actions to the end (slot name differs on the table host). */
-
-.xpl-table__toolbar .actions [slot="toolbar-actions-right"]:first-child {
-  margin-left: auto;
-}
-
-.xpl-table-container {
-  overflow: auto;
-
-  border: var(--xpl-border-small) solid var(--xpl-border-default);
-  border-radius: var(--xpl-border-radius-default);
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-/*
- * Freeze: sticky first *data* column (compositional grid).
- * Leading selection and/or row-reorder columns are not frozen — they scroll horizontally;
- * `nth-child` skips 0–2 leading cells when `xpl-table--selectable` / `xpl-table--row-reorderable` are set.
- */
-
-.xpl-table--freeze:not(.xpl-table--legacy):not(.xpl-table--selectable, .xpl-table--row-reorderable) .xpl-table-header-cell:first-child,
-    .xpl-table--freeze:not(.xpl-table--legacy):not(.xpl-table--selectable, .xpl-table--row-reorderable) .xpl-table-cell:first-child,
-    .xpl-table--freeze:not(.xpl-table--legacy):not(.xpl-table--selectable, .xpl-table--row-reorderable) .xpl-table-footer-cell:first-child {
-  position: sticky;
-  left: 0px;
-
-      z-index: var(--xpl-z-index-100);
-}
-
-.xpl-table--freeze:not(.xpl-table--legacy):not(.xpl-table--selectable, .xpl-table--row-reorderable) .xpl-table-header-cell:first-child::after, .xpl-table--freeze:not(.xpl-table--legacy):not(.xpl-table--selectable, .xpl-table--row-reorderable) .xpl-table-cell:first-child::after, .xpl-table--freeze:not(.xpl-table--legacy):not(.xpl-table--selectable, .xpl-table--row-reorderable) .xpl-table-footer-cell:first-child::after {
-        content: "";
-        width: var(--xpl-space-24);
-        position: absolute;
-        left: 100%;
-        top: 0px;
-        display: block;
-        height: 100%;
-        opacity: 0;
-        transition-property: opacity;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-
-        background: linear-gradient(
-          90deg,
-          var(--xpl-background-surface-transparent-10) 0%,
-          var(--xpl-background-surface-transparent-0) 100%
-        );
-      }
-
-.xpl-table--freeze:not(.xpl-table--legacy).xpl-table--selectable.xpl-table--row-reorderable .xpl-table-header-cell:nth-child(3),
-    .xpl-table--freeze:not(.xpl-table--legacy).xpl-table--selectable.xpl-table--row-reorderable .xpl-table-cell:nth-child(3),
-    .xpl-table--freeze:not(.xpl-table--legacy).xpl-table--selectable.xpl-table--row-reorderable .xpl-table-footer-cell:nth-child(3) {
-  position: sticky;
-  left: 0px;
-
-      z-index: var(--xpl-z-index-100);
-}
-
-.xpl-table--freeze:not(.xpl-table--legacy).xpl-table--selectable.xpl-table--row-reorderable .xpl-table-header-cell:nth-child(3)::after, .xpl-table--freeze:not(.xpl-table--legacy).xpl-table--selectable.xpl-table--row-reorderable .xpl-table-cell:nth-child(3)::after, .xpl-table--freeze:not(.xpl-table--legacy).xpl-table--selectable.xpl-table--row-reorderable .xpl-table-footer-cell:nth-child(3)::after {
-        content: "";
-        width: var(--xpl-space-24);
-        position: absolute;
-        left: 100%;
-        top: 0px;
-        display: block;
-        height: 100%;
-        opacity: 0;
-        transition-property: opacity;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-
-        background: linear-gradient(
-          90deg,
-          var(--xpl-background-surface-transparent-10) 0%,
-          var(--xpl-background-surface-transparent-0) 100%
-        );
-      }
-
-.xpl-table--freeze:not(.xpl-table--legacy):is(.xpl-table--selectable, .xpl-table--row-reorderable):not(
-      .xpl-table--selectable.xpl-table--row-reorderable
-    ) .xpl-table-header-cell:nth-child(2),
-    .xpl-table--freeze:not(.xpl-table--legacy):is(.xpl-table--selectable, .xpl-table--row-reorderable):not(
-      .xpl-table--selectable.xpl-table--row-reorderable
-    ) .xpl-table-cell:nth-child(2),
-    .xpl-table--freeze:not(.xpl-table--legacy):is(.xpl-table--selectable, .xpl-table--row-reorderable):not(
-      .xpl-table--selectable.xpl-table--row-reorderable
-    ) .xpl-table-footer-cell:nth-child(2) {
-  position: sticky;
-  left: 0px;
-
-      z-index: var(--xpl-z-index-100);
-}
-
-.xpl-table--freeze:not(.xpl-table--legacy):is(.xpl-table--selectable, .xpl-table--row-reorderable):not(
-      .xpl-table--selectable.xpl-table--row-reorderable
-    ) .xpl-table-header-cell:nth-child(2)::after, .xpl-table--freeze:not(.xpl-table--legacy):is(.xpl-table--selectable, .xpl-table--row-reorderable):not(
-      .xpl-table--selectable.xpl-table--row-reorderable
-    ) .xpl-table-cell:nth-child(2)::after, .xpl-table--freeze:not(.xpl-table--legacy):is(.xpl-table--selectable, .xpl-table--row-reorderable):not(
-      .xpl-table--selectable.xpl-table--row-reorderable
-    ) .xpl-table-footer-cell:nth-child(2)::after {
-        content: "";
-        width: var(--xpl-space-24);
-        position: absolute;
-        left: 100%;
-        top: 0px;
-        display: block;
-        height: 100%;
-        opacity: 0;
-        transition-property: opacity;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-
-        background: linear-gradient(
-          90deg,
-          var(--xpl-background-surface-transparent-10) 0%,
-          var(--xpl-background-surface-transparent-0) 100%
-        );
-      }
-
-.xpl-table--freeze:not(.xpl-table--legacy).xpl-table--has-scrolled:not(.xpl-table--selectable, .xpl-table--row-reorderable) .xpl-table-header-cell:first-child::after,
-      .xpl-table--freeze:not(.xpl-table--legacy).xpl-table--has-scrolled:not(.xpl-table--selectable, .xpl-table--row-reorderable) .xpl-table-cell:first-child::after,
-      .xpl-table--freeze:not(.xpl-table--legacy).xpl-table--has-scrolled:not(.xpl-table--selectable, .xpl-table--row-reorderable) .xpl-table-footer-cell:first-child::after {
-  opacity: 1;
-}
-
-.xpl-table--freeze:not(.xpl-table--legacy).xpl-table--has-scrolled.xpl-table--selectable.xpl-table--row-reorderable .xpl-table-header-cell:nth-child(3)::after,
-      .xpl-table--freeze:not(.xpl-table--legacy).xpl-table--has-scrolled.xpl-table--selectable.xpl-table--row-reorderable .xpl-table-cell:nth-child(3)::after,
-      .xpl-table--freeze:not(.xpl-table--legacy).xpl-table--has-scrolled.xpl-table--selectable.xpl-table--row-reorderable .xpl-table-footer-cell:nth-child(3)::after {
-  opacity: 1;
-}
-
-.xpl-table--freeze:not(.xpl-table--legacy).xpl-table--has-scrolled:is(.xpl-table--selectable, .xpl-table--row-reorderable):not(
-        .xpl-table--selectable.xpl-table--row-reorderable
-      ) .xpl-table-header-cell:nth-child(2)::after,
-      .xpl-table--freeze:not(.xpl-table--legacy).xpl-table--has-scrolled:is(.xpl-table--selectable, .xpl-table--row-reorderable):not(
-        .xpl-table--selectable.xpl-table--row-reorderable
-      ) .xpl-table-cell:nth-child(2)::after,
-      .xpl-table--freeze:not(.xpl-table--legacy).xpl-table--has-scrolled:is(.xpl-table--selectable, .xpl-table--row-reorderable):not(
-        .xpl-table--selectable.xpl-table--row-reorderable
-      ) .xpl-table-footer-cell:nth-child(2)::after {
-  opacity: 1;
-}
-
-/*
- * Perimeter cell borders: outer host draws the frame; suppress duplicate edges on `:last-child` / last row.
- * Follows `.xpl-table--freeze` so `:first-child` sticky rules precede these `:last-child` resets.
- */
-
-/* stylelint-disable no-duplicate-selectors, no-descending-specificity -- second block merges perimeter into the same host selector as the grid rule above */
-
-.xpl-table:not(.xpl-table--legacy) .xpl-table-footer > xpl-table-row:last-of-type .xpl-table-footer-cell,
-  .xpl-table:not(.xpl-table--legacy) .xpl-table-footer > .xpl-table-row:last-of-type > .xpl-table-footer-cell {
-    border-bottom: none;
-  }
-
-.xpl-table:not(.xpl-table--legacy) .xpl-table-header > xpl-table-row .xpl-table-header-cell:last-child,
-  .xpl-table:not(.xpl-table--legacy) .xpl-table-header > .xpl-table-row > .xpl-table-header-cell:last-child,
-  .xpl-table:not(.xpl-table--legacy) .xpl-table-body > xpl-table-row .xpl-table-cell:last-child,
-  .xpl-table:not(.xpl-table--legacy) .xpl-table-body > .xpl-table-row > .xpl-table-cell:last-child,
-  .xpl-table:not(.xpl-table--legacy) .xpl-table-footer > xpl-table-row .xpl-table-footer-cell:last-child,
-  .xpl-table:not(.xpl-table--legacy) .xpl-table-footer > .xpl-table-row > .xpl-table-footer-cell:last-child {
-    border-right: none;
-  }
-
-.xpl-table:not(.xpl-table--legacy, :has(.xpl-table-footer))
-  .xpl-table-body
-  > xpl-table-row:last-of-type
-  .xpl-table-cell,
-.xpl-table:not(.xpl-table--legacy, :has(.xpl-table-footer))
-  .xpl-table-body
-  > .xpl-table-row:last-of-type
-  > .xpl-table-cell {
-  border-bottom: none;
-}
-
-/* stylelint-enable no-duplicate-selectors, no-descending-specificity */
-
-/* --------------------------------------------------------------------------
- * Legacy data-driven mode (native <table> markup)
- *
- * TODO: Remove in Phase 3 major release. These styles use deprecated tokens
- * and .dark overrides intentionally to preserve backward compatibility.
- * -------------------------------------------------------------------------- */
-
-/* stylelint-disable color-no-hex, function-disallowed-list -- legacy path; will be removed */
+/* stylelint-disable color-no-hex, function-disallowed-list -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */
 
-.xpl-table--legacy {
+.xpl-table {
   min-width: 100%;
 }
 
-.xpl-table--legacy > :not(tfoot, [hidden]) ~ :not(tfoot, [hidden]) {
+.xpl-table > :not(tfoot, [hidden]) ~ :not(tfoot, [hidden]) {
     --tw-divide-y-reverse: 0;
     --tw-divide-opacity: 1;
 
@@ -9212,15 +8952,33 @@ span.xpl-placeholder--hidden,
     border-color: var(--xpl-color-gray-200);
   }
 
-.dark .xpl-table--legacy > :not(tfoot, [hidden]) ~ :not(tfoot, [hidden]) {
+.dark .xpl-table > :not(tfoot, [hidden]) ~ :not(tfoot, [hidden]) {
       border-color: var(--xpl-color-gray-800);
     }
 
-.xpl-table--legacy--abs {
+.xpl-table--abs {
   position: absolute;
 }
 
-.xpl-table--legacy th {
+.xpl-table-container {
+  overflow: auto;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(238 239 243 / var(--tw-border-opacity, 1));
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.dark .xpl-table-container {
+  --tw-border-opacity: 1;
+  border-color: rgb(54 50 64 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(48 45 59 / var(--tw-bg-opacity, 1));
+}
+
+.xpl-table th {
   white-space: nowrap;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -9234,12 +8992,12 @@ span.xpl-placeholder--hidden,
   color: rgb(153 155 168 / var(--tw-text-opacity, 1));
 }
 
-.dark .xpl-table--legacy th {
+.dark .xpl-table th {
   --tw-text-opacity: 1;
   color: rgb(234 235 239 / var(--tw-text-opacity, 1));
 }
 
-.xpl-table--legacy tr td {
+.xpl-table tr td {
   white-space: nowrap;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -9251,21 +9009,21 @@ span.xpl-placeholder--hidden,
   color: rgb(153 155 168 / var(--tw-text-opacity, 1));
 }
 
-.dark .xpl-table--legacy tr td {
+.dark .xpl-table tr td {
   --tw-text-opacity: 1;
   color: rgb(234 235 239 / var(--tw-text-opacity, 1));
 }
 
-.xpl-table--legacy thead {
+.xpl-table thead {
   --tw-bg-opacity: 1;
   background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
 }
 
-.dark .xpl-table--legacy thead {
+.dark .xpl-table thead {
       background-color: var(--xpl-color-background-dm);
     }
 
-.xpl-table--legacy tbody > :not([hidden]) ~ :not([hidden]) {
+.xpl-table tbody > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
@@ -9273,72 +9031,72 @@ span.xpl-placeholder--hidden,
   border-color: rgb(238 239 243 / var(--tw-divide-opacity, 1));
 }
 
-.xpl-table--legacy tbody {
+.xpl-table tbody {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
-.dark .xpl-table--legacy tbody {
+.dark .xpl-table tbody {
       background-color: var(--xpl-color-foreground-dm);
     }
 
-.dark .xpl-table--legacy tbody > :not([hidden]) ~ :not([hidden]) {
+.dark .xpl-table tbody > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(60 56 71 / var(--tw-divide-opacity, 1));
 }
 
-.xpl-table--legacy tfoot {
+.xpl-table tfoot {
     border-top-color: var(--xpl-color-stroke-dm);
     border-right: none;
     border-bottom: none;
     border-width: 1px;
   }
 
-.dark .xpl-table--legacy tfoot {
+.dark .xpl-table tfoot {
       border-top-color: var(--xpl-color-stroke-lm);
     }
 
-.xpl-table--legacy a {
+.xpl-table a {
   --tw-text-opacity: 1;
   color: rgb(79 70 229 / var(--tw-text-opacity, 1));
 }
 
-.xpl-table--legacy a:hover {
+.xpl-table a:hover {
   --tw-text-opacity: 1;
   color: rgb(49 46 129 / var(--tw-text-opacity, 1));
 }
 
-.xpl-table--legacy label {
+.xpl-table label {
   display: flex;
   align-items: center;
 }
 
-.xpl-table--legacy input[type="checkbox"] {
+.xpl-table input[type="checkbox"] {
   margin-right: 1.5rem;
   cursor: pointer;
 }
 
-.xpl-table--legacy xpl-icon {
+.xpl-table xpl-icon {
   margin-left: 0.5rem;
   cursor: pointer;
 }
 
-.xpl-table--legacy .wrap {
+.xpl-table .wrap {
   white-space: normal;
 }
 
-.xpl-table--legacy .xpl-table-row-selected td {
+.xpl-table-row-selected td {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(244 242 255 / var(--tw-bg-opacity, 1)) !important;
 }
 
-.dark .xpl-table--legacy .xpl-table-row-selected td {
+.dark .xpl-table-row-selected td {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(54 50 64 / var(--tw-bg-opacity, 1)) !important;
 }
 
-.xpl-table--legacy.xpl-table--freeze th:first-child,
-    .xpl-table--legacy.xpl-table--freeze td:first-child {
+.xpl-table--freeze th:first-child,
+    .xpl-table--freeze td:first-child {
   position: sticky;
   left: 0px;
   z-index: 10;
@@ -9346,13 +9104,8 @@ span.xpl-placeholder--hidden,
   border-color: rgb(238 239 243 / var(--tw-border-opacity, 1));
 }
 
-.xpl-table--legacy.xpl-table--freeze th:first-child::after, .xpl-table--legacy.xpl-table--freeze td:first-child::after {
-        background: linear-gradient(
-          90deg,
-          var(--xpl-color-neutral-300) 0%,
-          var(--xpl-color-neutral-300) 0.01%,
-          transparent 100%
-        );
+.xpl-table--freeze th:first-child::after, .xpl-table--freeze td:first-child::after {
+        background: linear-gradient(90deg, #e4e6eb 0%, #e4e6eb 0.01%, rgba(228 230 235 / 0%) 100%);
         content: "";
         width: 24px;
         position: absolute;
@@ -9366,19 +9119,19 @@ span.xpl-placeholder--hidden,
         transition-duration: 150ms;
       }
 
-.xpl-table--legacy.xpl-table--freeze th:first-child {
+.xpl-table--freeze th:first-child {
   --tw-bg-opacity: 1;
   background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
 }
 
-.dark .xpl-table--legacy.xpl-table--freeze th:first-child {
+.dark .xpl-table--freeze th:first-child {
         background-color: var(--xpl-color-background-dm);
         --tw-border-opacity: 1;
         border-color: rgb(54 50 64 / var(--tw-border-opacity, 1));
       }
 
-.xpl-table--legacy.xpl-table--freeze tr td:first-child,
-    .xpl-table--legacy.xpl-table--freeze p {
+.xpl-table--freeze tr td:first-child,
+    .xpl-table--freeze p {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
@@ -9386,612 +9139,141 @@ span.xpl-placeholder--hidden,
   color: rgb(48 45 59 / var(--tw-text-opacity, 1));
 }
 
-.dark .xpl-table--legacy.xpl-table--freeze td:first-child {
+.dark .xpl-table--freeze td:first-child {
   --tw-border-opacity: 1;
   border-color: rgb(54 50 64 / var(--tw-border-opacity, 1));
 }
 
-.dark .xpl-table--legacy.xpl-table--freeze td:first-child::after {
-        background: linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--xpl-color-neutral-1100) 40%, transparent) 0%,
-          transparent 100%
-        );
+.dark .xpl-table--freeze td:first-child::after {
+        background: linear-gradient(90deg, rgba(0 0 0 / 40%) 0%, rgba(0 0 0 / 0%) 100%);
       }
 
-.xpl-table--legacy.xpl-table--has-scrolled th:first-child::after,
-    .xpl-table--legacy.xpl-table--has-scrolled td:first-child::after {
+.xpl-table--has-scrolled th:first-child::after,
+    .xpl-table--has-scrolled td:first-child::after {
   opacity: 1;
 }
 
-.xpl-table--legacy.xpl-table--striped tr:nth-of-type(even) {
+.xpl-table--striped tr:nth-of-type(even) {
   --tw-bg-opacity: 1;
   background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
 }
 
-.dark .xpl-table--legacy.xpl-table--striped tr:nth-of-type(even) {
+.dark .xpl-table--striped tr:nth-of-type(even) {
   --tw-bg-opacity: 1;
   background-color: rgb(48 45 59 / var(--tw-bg-opacity, 1));
 }
 
-.dark .xpl-table--legacy tr td:first-child,
-  .dark .xpl-table--legacy p {
+.dark .xpl-table tr td:first-child,
+  .dark .xpl-table p {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-/* stylelint-enable color-no-hex, function-disallowed-list */
-
-.xpl-table-body {
+.xpl-table-header {
   display: contents;
 }
 
-/* Shared layout and tokens for body and footer grid cells */
+.xpl-table-header > *:first-child {
+  border-left-width: 1px;
+  border-color: var(--xpl-color-gray-400);
+}
 
-.xpl-table-cell-base {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.xpl-table-cell-base {
-    font-size: var(--xpl-size-font-title-5);
-    font-weight: var(--xpl-font-weight-medium);
-    line-height: 1.4286;
-}
-
-.xpl-table-cell-base {
-
-  /* Figma Dynamic Table text cells: space/10 vertical, space/16 horizontal */
-  padding: var(--xpl-space-10) var(--xpl-space-16);
-  min-height: var(--xpl-size-350);
-  border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
-  border-right: var(--xpl-border-small) solid var(--xpl-border-default);
-  background-color: var(--xpl-background-surface-default);
-  color: var(--xpl-text-default);
-  font-family: var(--xpl-font-family-default);
-}
-
-.xpl-table-cell-base--align-left {
-  justify-content: flex-start;
-  text-align: left;
-}
-
-.xpl-table-cell-base--align-right {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-.xpl-table-cell-base--align-center {
-  justify-content: center;
-  text-align: center;
-}
-
-.xpl-table-cell {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.xpl-table-cell {
-    font-size: var(--xpl-size-font-title-5);
-    font-weight: var(--xpl-font-weight-medium);
-    line-height: 1.4286;
-}
-
-.xpl-table-cell {
-
-  /* Figma Dynamic Table text cells: space/10 vertical, space/16 horizontal */
-  padding: var(--xpl-space-10) var(--xpl-space-16);
-  min-height: var(--xpl-size-350);
-  border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
-  border-right: var(--xpl-border-small) solid var(--xpl-border-default);
-  background-color: var(--xpl-background-surface-default);
-  color: var(--xpl-text-default);
-  font-family: var(--xpl-font-family-default);
-}
-
-/* Checkbox-only column: Figma py-20 / px-16 */
-
-.xpl-table-cell:has(> xpl-checkbox:first-child:last-child) {
-    padding: calc(var(--xpl-space-16) + var(--xpl-space-4)) var(--xpl-space-16);
-  }
-
-.xpl-table-cell--align-left {
-  justify-content: flex-start;
-  text-align: left;
-  }
-
-.xpl-table-cell--align-right {
-  justify-content: flex-end;
-  text-align: right;
-  }
-
-.xpl-table-cell--align-center {
-  justify-content: center;
-  text-align: center;
-  }
-
-.xpl-table-cell--bold {
-    font-weight: var(--xpl-font-weight-semibold);
-  }
-
-.xpl-table-cell--underline {
-  text-decoration-line: underline;
-}
-
-.xpl-table-cell--disabled {
-    color: var(--xpl-text-disabled);
-    cursor: not-allowed;
-  }
-
-.xpl-table-cell--disabled xpl-icon {
-      color: var(--xpl-icon-disabled);
-    }
-
-/*
-   * Rich slots (Figma Light / Dark): secondary line uses text/subdued; icons use icon tokens
-   * (not inherited text color) so they match the table spec in both themes.
-   */
-
-.xpl-table-cell .xpl-text-caption {
-    color: var(--xpl-text-subdued);
-  }
-
-.xpl-table-cell--disabled .xpl-text-caption {
-    color: var(--xpl-text-disabled);
-  }
-
-.xpl-table-cell xpl-icon {
-    color: var(--xpl-icon-default);
-  }
-
-.xpl-table-cell xpl-avatar {
-    margin-right: var(--xpl-space-8);
-  }
-
-.xpl-table-cell .xpl-checkbox-radio-container {
-  margin-bottom: 0px;
-}
-
-.xpl-table-cell .xpl-checkbox-radio-container .xpl-label {
-  padding: 0px;
-}
-
-/*
-   * Managed reorder column cells use `align="center"`; this reinforces flex centering for the grip.
-   */
-
-.xpl-table-cell[data-xpl-row-reorder-managed] {
-  justify-content: center;
-}
-
-/* Row reorder grip (managed column; compositional `row-reorderable`) */
-
-.xpl-table-cell .xpl-table__row-drag-handle {
-  display: inline-flex;
-  cursor: move;
-  align-items: center;
-  justify-content: center;
-  border-width: 0px;
-  background-color: transparent;
-  padding: 0px;
-
-    border-radius: var(--xpl-border-radius-default);
-    min-width: var(--xpl-space-32);
-    min-height: var(--xpl-space-32);
-    color: var(--xpl-icon-subdued);
-}
-
-.xpl-table-cell .xpl-table__row-drag-handle:active {
-  cursor: grabbing;
-}
-
-/* Ensure the native `<button>` stays the hit target (helps DnD + shadow children like `xpl-icon`). */
-
-.xpl-table-cell .xpl-table__row-drag-handle xpl-icon {
-      /* Beat `.xpl-table-cell xpl-icon { color: icon-default }` so resting/subdued + row states control the grip. */
-      color: inherit;
-      pointer-events: none;
-    }
-
-.xpl-table-cell .xpl-table__row-drag-handle:disabled {
-  cursor: not-allowed;
-
-      color: var(--xpl-icon-disabled);
-}
-
-.xpl-table-cell .xpl-table__row-drag-handle:focus-visible {
-      border-radius: var(--xpl-border-radius-default);
-      outline-color: var(--xpl-border-focus);
-      outline-width: 2px;
-      outline-offset: 2px;
-    }
-
-.xpl-table-footer {
-  display: contents;
-}
-
-.xpl-table-footer > xpl-table-row:first-child .xpl-table-footer-cell,
-  .xpl-table-footer > .xpl-table-row:first-child > .xpl-table-footer-cell {
-    border-top: var(--xpl-border-large) solid var(--xpl-border-strong);
-  }
-
-.xpl-table-footer-cell {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.xpl-table-footer-cell {
-    font-size: var(--xpl-size-font-title-5);
-    font-weight: var(--xpl-font-weight-medium);
-    line-height: 1.4286;
-}
-
-.xpl-table-footer-cell {
-
-  /* Figma Dynamic Table text cells: space/10 vertical, space/16 horizontal */
-  padding: var(--xpl-space-10) var(--xpl-space-16);
-  min-height: var(--xpl-size-350);
-  border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
-  border-right: var(--xpl-border-small) solid var(--xpl-border-default);
-  background-color: var(--xpl-background-surface-default);
-  color: var(--xpl-text-default);
-  font-family: var(--xpl-font-family-default);
-}
-
-.xpl-table-footer-cell:has(> xpl-checkbox:first-child:last-child) {
-    padding: calc(var(--xpl-space-16) + var(--xpl-space-4)) var(--xpl-space-16);
-  }
-
-.xpl-table-footer-cell--align-left {
-  justify-content: flex-start;
-  text-align: left;
-  }
-
-.xpl-table-footer-cell--align-right {
-  justify-content: flex-end;
-  text-align: right;
-  }
-
-.xpl-table-footer-cell--align-center {
-  justify-content: center;
-  text-align: center;
-  }
-
-.xpl-table-footer-cell[data-xpl-row-reorder-managed] {
-  justify-content: center;
-}
-
-.xpl-table-header {
-  display: contents;
+.dark .xpl-table-header > *:first-child {
+  border-color: var(--xpl-color-gray-600);
 }
 
 .xpl-table-header-cell {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-
-.xpl-table-header-cell {
-    font-size: var(--xpl-size-font-title-5);
-    font-weight: var(--xpl-font-weight-medium);
-    line-height: 1.4286;
-}
-
-.xpl-table-header-cell {
-
-  /* Top edge comes from the outer `.xpl-table` host border; cells only draw inner grid lines. */
-  border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
-  border-right: var(--xpl-border-small) solid var(--xpl-border-default);
-  min-width: var(--xpl-size-300);
-  min-height: var(--xpl-size-350);
-  background-color: var(--xpl-background-surface-subtlest);
-  color: var(--xpl-text-subdued);
+  padding: 0px;
+  height: 3.5rem;
+  min-width: 3rem;
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+  border-top-width: 1px;
+  border-color: var(--xpl-color-gray-400);
 
-  /* Figma <header-cell> “Label”: 18px × 16px; checkbox column: 20px × 16px; icon column: 18px × 14px */
-  padding: calc(var(--xpl-space-16) + var(--xpl-space-2)) var(--xpl-space-16);
+  background-color: var(--xpl-color-background-lm);
+  font-size: var(--xpl-size-font-title-5);
+  font-weight: var(--xpl-font-weight-normal);
+  color: var(--xpl-color-text-secondary-lm);
 }
 
-.xpl-table-header-cell.xpl-table-header-cell--checkbox {
-    padding: calc(var(--xpl-space-16) + var(--xpl-space-4)) var(--xpl-space-16);
-  }
-
-.xpl-table-header-cell.xpl-table-header-cell--icon {
-    padding: calc(var(--xpl-space-16) + var(--xpl-space-2))
-      calc(var(--xpl-space-12) + var(--xpl-space-2));
-  }
-
-.xpl-table-header-cell.xpl-table-header-cell--empty {
-    padding: 0;
-  }
-
 .xpl-table-header-cell .xpl-checkbox-radio-container {
-  margin-bottom: 0px;
+  margin-bottom: 0.25rem;
 }
 
 .xpl-table-header-cell .xpl-checkbox-radio-container .xpl-label {
   padding: 0px;
 }
 
-.xpl-table-header-cell.xpl-table-header-cell--align-left {
-  justify-content: flex-start;
-  text-align: left;
-}
-
-.xpl-table-header-cell.xpl-table-header-cell--align-right {
-  justify-content: flex-end;
-  text-align: right;
-}
+.xpl-table-header-cell .header-icon {
+    color: var(--xpl-color-text-reverse-dm);
+  }
 
-.xpl-table-header-cell.xpl-table-header-cell--align-center {
-  justify-content: center;
-  text-align: center;
+.xpl-table-header-cell.non-sortable {
+  padding: 1rem;
 }
 
-/* Managed reorder column (empty header; compositional `row-reorderable`) */
-
-.xpl-table-header-cell[data-xpl-row-reorder-managed] {
+.xpl-table-header-cell.sortable {
+  margin: 0px;
+  display: flex;
+  height: 3.5rem;
+  width: 100%;
+  align-items: center;
   justify-content: center;
+  background-image: none;
+  padding: 0px;
 }
 
-.xpl-table-header-cell.xpl-table-header-cell--sortable {
-    padding: 0;
-  }
-
-.xpl-table-header-cell .xpl-table-header-cell__sort {
-  display: inline-flex;
+.xpl-table-header-cell.sortable button {
+  display: flex;
   width: 100%;
-  min-width: 0px;
   cursor: pointer;
   align-items: center;
-  gap: 0.5rem;
-  border-width: 0px;
-  background-color: transparent;
-
-    padding: var(--xpl-space-12) var(--xpl-space-16);
-    color: inherit;
-    font: inherit;
-    font-family: inherit;
-    text-align: inherit;
-}
-
-.xpl-table-header-cell .xpl-table-header-cell__sort:focus-visible {
-    border-radius: var(--xpl-border-radius-small);
-    outline: 2px solid var(--xpl-border-focus);
-    outline-offset: 2px;
-  }
-
-.xpl-table-header-cell .xpl-table-header-cell__text {
-  min-width: 0px;
-  flex: 1 1 0%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.xpl-table-header-cell .xpl-table-header-cell__sort-icon {
-  flex-shrink: 0;
-}
-
-.xpl-table-header-cell.xpl-table-header-cell--align-left .xpl-table-header-cell__sort {
-  justify-content: flex-start;
-  text-align: left;
-}
-
-.xpl-table-header-cell.xpl-table-header-cell--align-right .xpl-table-header-cell__sort {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-.xpl-table-header-cell.xpl-table-header-cell--align-center .xpl-table-header-cell__sort {
   justify-content: center;
-  text-align: center;
-}
-
-/* Legacy `<table>` thead may use the same icon class names outside `xpl-table-header-cell`. */
-
-.xpl-table-header-cell__sort-icon {
-  flex-shrink: 0;
-}
-
-.xpl-table-header-cell__sort-icon--default {
-  color: var(--xpl-text-subdued);
-}
-
-.xpl-table-header-cell__sort-icon--active {
-  color: var(--xpl-icon-information);
-}
-
-.xpl-table-row {
-  display: contents;
-}
-
-/*
- * Compositional **body** rows only: `display: contents` is overridden so each row is one grid item on
- * `.xpl-table` spanning all columns, with `subgrid` aligning cells to the same tracks as header/footer.
- * This gives the row host a real layout box so `draggable` works like `xpl-list-item` (native drag image).
- * Header/footer rows stay `contents` (unchanged). Requires `grid-template-columns: subgrid` support
- * (Chrome ≥117, Firefox ≥71, Safari ≥16); older engines keep the base `contents` rule only.
- */
-
-@supports (grid-template-columns: subgrid) {
-  .xpl-table:not(.xpl-table--legacy) .xpl-table-body > xpl-table-row.xpl-table-row,
-  .xpl-table:not(.xpl-table--legacy) .xpl-table-body > .xpl-table-row.xpl-table-row {
-    display: grid;
-    grid-column: 1 / -1;
-    grid-template-columns: subgrid;
-    align-items: stretch;
-    min-width: 0;
-  }
-}
-
-/* Compositional row reorder (`row-reorderable`): overlapping drag/drop/disabled selectors. */
-
-/* stylelint-disable no-descending-specificity -- intentional visual stacking for DnD feedback */
-
-/* Figma row “Disabled”: background/surface/subtlest */
-
-.xpl-table .xpl-table-body > xpl-table-row.xpl-table-row--disabled .xpl-table-cell,
-.xpl-table .xpl-table-body > .xpl-table-row.xpl-table-row--disabled > .xpl-table-cell {
-  background-color: var(--xpl-background-surface-subtlest);
-  color: var(--xpl-text-disabled);
-  cursor: not-allowed;
-}
-
-/* Pointer drag: mirrors xpl-list `.xpl-list-item__wrapper.dragging` (list-item.css). */
-
-.xpl-table .xpl-table-body > xpl-table-row.xpl-table-row--dragging .xpl-table-cell,
-.xpl-table .xpl-table-body > .xpl-table-row.xpl-table-row--dragging > .xpl-table-cell {
-  opacity: var(--xpl-opacity-75);
-  background-color: var(--xpl-background-surface-subtle);
+  border-style: none;
+  background-image: none;
+  padding: 1rem;
 }
 
-/* List parity: smooth transition when row-reorderable drag / drop target classes toggle (list-item.css). */
-
-.xpl-table--row-reorderable .xpl-table-body > xpl-table-row .xpl-table-cell,
-.xpl-table--row-reorderable .xpl-table-body > .xpl-table-row > .xpl-table-cell {
-  transition-property: opacity,background-color,border-color,box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+.xpl-table-header-cell.sortable button .sort-icon {
+  padding-left: 0.5rem;
 }
 
-/*
- * Reorder grip — Figma Apollo-Web “States” (table cell rows): Resting / Selected / Focused / Disabled.
- * Focus: native `:focus-visible` on the grip button (`--xpl-border-focus`, matches border/focus in spec).
- * Keyboard reorder: `--keyboard-mode` ring (same token as list reorder).
- */
+.xpl-table-header-cell.sortable button .sort-icon--sorted {
+          color: var(--xpl-color-action-primary-lm);
+        }
 
-.xpl-table__row-drag-handle.xpl-table__row-drag-handle--keyboard-mode {
-  outline-color: var(--xpl-border-focus);
-  outline-width: 2px;
+.xpl-table-header-cell.sortable button:focus {
+  outline: 2px solid transparent;
   outline-offset: 2px;
-}
-
-/* Selected row: information-surface grip tint (Figma / Foundation `--xpl-icon-information`). */
-
-.xpl-table
-  .xpl-table-body
-  > xpl-table-row.xpl-table-row--selected:not(.xpl-table-row--disabled)
-  .xpl-table__row-drag-handle:not(:disabled),
-.xpl-table
-  .xpl-table-body
-  > .xpl-table-row.xpl-table-row--selected:not(.xpl-table-row--disabled)
-  .xpl-table__row-drag-handle:not(:disabled) {
-  color: var(--xpl-icon-information);
-}
-
-/* Figma row “Selected”: background/surface/information (descendant cell; lower specificity first) */
 
-.xpl-table
-  .xpl-table-body
-  > xpl-table-row.xpl-table-row--selected:not(.xpl-table-row--disabled)
-  .xpl-table-cell {
-  background-color: var(--xpl-background-surface-information);
+        box-shadow: inset 0 0 0 1px var(--xpl-color-purple-700);
 }
 
-/* Selected row with class-based row host (direct child cells) */
-
-.xpl-table
-  .xpl-table-body
-  > .xpl-table-row.xpl-table-row--selected:not(.xpl-table-row--disabled)
-  > .xpl-table-cell {
-  background-color: var(--xpl-background-surface-information);
-}
-
-/*
- * Drop target: one continuous outline for the row (not per-cell inset rings, which drew vertical seams).
- * Edge segments: first cell = L (left + top + bottom), middle = horizontal rails only, last = Γ (right + top + bottom).
- */
+.dark .xpl-table-header-cell {
+  border-color: var(--xpl-color-gray-600);
 
-.xpl-table .xpl-table-body > xpl-table-row.xpl-table-row--drag-over .xpl-table-cell:only-child,
-.xpl-table .xpl-table-body > .xpl-table-row.xpl-table-row--drag-over > .xpl-table-cell:only-child {
-  box-shadow:
-    inset var(--xpl-border-small) 0 0 0 var(--xpl-border-focus),
-    inset calc(-1 * var(--xpl-border-small)) 0 0 0 var(--xpl-border-focus),
-    inset 0 var(--xpl-border-small) 0 0 var(--xpl-border-focus),
-    inset 0 calc(-1 * var(--xpl-border-small)) 0 0 var(--xpl-border-focus);
-}
-
-.xpl-table
-  .xpl-table-body
-  > xpl-table-row.xpl-table-row--drag-over
-  .xpl-table-cell:first-child:not(:only-child),
-.xpl-table
-  .xpl-table-body
-  > .xpl-table-row.xpl-table-row--drag-over
-  > .xpl-table-cell:first-child:not(:only-child) {
-  box-shadow:
-    inset var(--xpl-border-small) 0 0 0 var(--xpl-border-focus),
-    inset 0 var(--xpl-border-small) 0 0 var(--xpl-border-focus),
-    inset 0 calc(-1 * var(--xpl-border-small)) 0 0 var(--xpl-border-focus);
-}
-
-.xpl-table
-  .xpl-table-body
-  > xpl-table-row.xpl-table-row--drag-over
-  .xpl-table-cell:last-child:not(:only-child),
-.xpl-table
-  .xpl-table-body
-  > .xpl-table-row.xpl-table-row--drag-over
-  > .xpl-table-cell:last-child:not(:only-child) {
-  box-shadow:
-    inset calc(-1 * var(--xpl-border-small)) 0 0 0 var(--xpl-border-focus),
-    inset 0 var(--xpl-border-small) 0 0 var(--xpl-border-focus),
-    inset 0 calc(-1 * var(--xpl-border-small)) 0 0 var(--xpl-border-focus);
-}
-
-.xpl-table
-  .xpl-table-body
-  > xpl-table-row.xpl-table-row--drag-over
-  .xpl-table-cell:not(:first-child, :last-child),
-.xpl-table
-  .xpl-table-body
-  > .xpl-table-row.xpl-table-row--drag-over
-  > .xpl-table-cell:not(:first-child, :last-child) {
-  box-shadow:
-    inset 0 var(--xpl-border-small) 0 0 var(--xpl-border-focus),
-    inset 0 calc(-1 * var(--xpl-border-small)) 0 0 var(--xpl-border-focus);
+  background-color: var(--xpl-color-background-2-dm);
+  color: var(--xpl-color-text-secondary-dm);
 }
 
-/* stylelint-enable no-descending-specificity */
-
-/*
- * Striped zebra + selected emphasis: rules intentionally overlap; order is visual priority.
- */
-
-/* stylelint-disable no-descending-specificity */
-
-.xpl-table--striped
-  .xpl-table-body
-  > xpl-table-row:nth-child(even):not(.xpl-table-row--selected, .xpl-table-row--disabled)
-  .xpl-table-cell,
-.xpl-table--striped
-  .xpl-table-body
-  > .xpl-table-row:nth-child(even):not(.xpl-table-row--selected, .xpl-table-row--disabled)
-  > .xpl-table-cell {
-  background-color: var(--xpl-background-surface-subtlest);
-}
+.dark .xpl-table-header-cell .header-icon {
+    color: var(--xpl-color-text-reverse-lm);
+  }
 
-.xpl-table--striped
-  .xpl-table-body
-  > xpl-table-row.xpl-table-row--selected:not(.xpl-table-row--disabled)
-  .xpl-table-cell,
-.xpl-table--striped
-  .xpl-table-body
-  > .xpl-table-row.xpl-table-row--selected:not(.xpl-table-row--disabled)
-  > .xpl-table-cell {
-  background-color: var(--xpl-background-surface-information-bold);
-}
+.dark .xpl-table-header-cell .sortable .sort-icon--sorted {
+      color: var(--xpl-color-action-primary-dm);
+    }
 
-/* stylelint-enable no-descending-specificity */
+.dark .xpl-table-header-cell .sortable:focus {
+      box-shadow: inset 0 0 0 1px var(--xpl-color-purple-500);
+    }
 
 .xpl-tab {
   display: block;
@@ -10849,71 +10131,58 @@ span.xpl-placeholder--hidden,
   transform: translateX(12px);
 }
 
+/* stylelint-disable color-no-hex, function-disallowed-list -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */
+
 .xpl-toolbar .toolbar {
+  margin-bottom: 0.5rem;
   display: flex;
-  width: 100%;
+  height: 3.5rem;
   align-items: center;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(106 109 125 / var(--tw-border-opacity, 1));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 
-  background-color: var(--xpl-background-surface-subtlest);
-  border-top: var(--xpl-border-small) solid var(--xpl-border-default);
-  border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
-  padding: var(--xpl-space-12) var(--xpl-space-24);
-  gap: var(--xpl-space-16);
+  background-color: var(--xpl-color-foreground-dm);
   box-shadow:
-    0 4px 6px 0 var(--xpl-background-surface-transparent-10),
-    0 2px 4px 0 var(--xpl-background-surface-transparent-5);
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px 0 rgb(0 0 0 / 0.06);
 }
 
 .xpl-toolbar .toolbar .selected-item-count {
+  margin-right: 1.5rem;
   display: flex;
   align-items: center;
+  justify-content: center;
   white-space: nowrap;
+  border-right-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(225 226 232 / var(--tw-border-opacity, 1));
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-right: 1.5rem;
 
-    color: var(--xpl-text-default);
-    font-size: var(--xpl-font-size-title-5);
-    font-weight: var(--xpl-font-weight-medium);
-    padding-right: var(--xpl-space-16);
-    border-right: var(--xpl-border-small) solid var(--xpl-border-default);
+    color: var(--xpl-color-text-reverse-lm);
+    font-size: var(--xpl-size-font-title-5);
 }
 
 .xpl-toolbar .toolbar .actions {
   display: flex;
-  flex: 1 1 0%;
-
-    gap: var(--xpl-space-16);
-}
-
-.xpl-toolbar .toolbar .actions [slot="actions-right"]:first-child {
-  margin-left: auto;
+  width: 100%;
 }
 
-/*
- * Figma XPL-Dynamic-Table-Toolbar: inverse bar on light canvas (xpl-table selection chrome only).
- * Standalone `xpl-toolbar` keeps the default subtlest bar above.
- */
-
-.xpl-table__toolbar.xpl-toolbar .toolbar {
-  background-color: var(--xpl-background-surface-inverse-on-light);
-  border-top-color: var(--xpl-border-strong);
-  border-bottom-color: var(--xpl-border-strong);
+.xpl-toolbar .toolbar .actions [slot="actions-left"] {
+  margin-right: 1rem;
 }
 
-.xpl-table__toolbar.xpl-toolbar .toolbar .selected-item-count {
-    color: var(--xpl-text-inverse);
-    border-right-color: var(--xpl-border-inverse);
-  }
-
-.dark .xpl-table__toolbar.xpl-toolbar .toolbar {
-  background-color: var(--xpl-background-surface-subtlest);
-  border-top-color: var(--xpl-border-default);
-  border-bottom-color: var(--xpl-border-default);
+.xpl-toolbar .toolbar .actions [slot="actions-right"] {
+  margin-left: 1rem;
 }
 
-.dark .xpl-table__toolbar.xpl-toolbar .toolbar .selected-item-count {
-    color: var(--xpl-text-default);
-    border-right-color: var(--xpl-border-default);
-  }
-
 .xpl-toolbar.hidden {
   display: none;
 }