aplance-ui 1.3.0 → 1.4.0

package/registry/components/ui/data-table/data-table.module.css

@@ -1,710 +1,743 @@
-/* ─────────────────────────────────────────────
-   Root
-   Fills its flex parent. Stacks filter bar (fixed) + content wrap (grows).
-───────────────────────────────────────────── */
-.root {
-  width: 100%;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-6);
-}
-
-/* ─────────────────────────────────────────────
-   Filter bar
-   CSS grid - always one row, never wraps.
-   gridTemplateColumns is set inline from FilterBar.
-───────────────────────────────────────────── */
-.filter_bar {
-  display: grid;
-  align-items: center;
-  place-items: center;
-  gap: var(--spacing-6);
-  width: 100%;
-  flex-shrink: 0;
-
-  > * {
-    min-width: 0;
-  }
-}
-
-/* On tablet/phone the configured multi-column row can't fit. Stack every field
-   full width instead of overflowing the page or scrolling (a scroll container
-   would clip the inputs' focus rings). `!important` beats the inline
-   grid-template-columns the FilterBar sets per consumer; `stretch` makes each
-   field fill the row. */
-@media (--md) {
-  .filter_bar {
-    grid-template-columns: 1fr !important;
-    justify-items: stretch;
-  }
-}
-
-/* ─────────────────────────────────────────────
-   Content wrap
-   Grows to fill all space below the filter bar.
-   Flex column: table shell (grows) + pagination (pinned to bottom via margin-top:auto).
-───────────────────────────────────────────── */
-.content_wrap {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-/* ─────────────────────────────────────────────
-   Table shell
-   Grows to fill space above pagination. Header pill + scrollable body.
-───────────────────────────────────────────── */
-.table_shell {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-6);
-  padding-bottom: var(--spacing-6);
-}
-
-/* no bottom padding when pagination is not shown */
-.table_shell_no_pagination {
-  padding-bottom: 0;
-}
-
-/* ─────────────────────────────────────────────
-   Detached header pill
-   Rounded standalone bar. scrollLeft synced to body via JS so pinned
-   columns stay perfectly aligned with their body counterparts.
-───────────────────────────────────────────── */
-.table_header_container {
-  position: relative;
-  flex-shrink: 0;
-  width: 100%;
-}
-
-.table_header_wrap {
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  border-radius: var(--radius-md);
-  background: var(--color-muted);
-  border: var(--border-1) solid var(--color-border);
-  scrollbar-width: none;
-}
-
-.table_header_wrap::-webkit-scrollbar {
-  display: none;
-}
-
-.header_padding_mask {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: var(--header-padding-right, 0px);
-  background: var(--color-muted);
-  border-radius: 0 var(--radius-md) var(--radius-md) 0;
-  border-top: var(--border-1) solid var(--color-border);
-  border-right: var(--border-1) solid var(--color-border);
-  border-bottom: var(--border-1) solid var(--color-border);
-  pointer-events: none;
-  z-index: 10;
-  visibility: hidden;
-}
-
-.table_header_container[data-has-scroll="true"] .header_padding_mask {
-  visibility: visible;
-}
-
-/* ─────────────────────────────────────────────
-   Scrollable body
-   flex:1 + min-height:0 = fills all space, then scrolls.
-───────────────────────────────────────────── */
-.table_body_wrap {
-  flex: 1;
-  min-height: 0;
-  overflow-x: auto;
-  overflow-y: auto;
-  /* Reserve the scrollbar gutter by DEFAULT so clientWidth is stable: the
-     vertical scrollbar (when rows overflow) sits in the reserved gutter instead
-     of stealing ~15px and triggering an unexpected horizontal scrollbar. This
-     default also covers the first paint before JS measures. */
-  scrollbar-gutter: stable;
-  border: var(--border-1) solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-background);
-  position: relative;
-}
-
-/* Once JS confirms the body does NOT overflow vertically (no scrollbar to make
-   room for), release the gutter so the content fills to the border - otherwise
-   a few-row table shows a blank ~15px strip on the right. `data-has-scroll` is
-   set from `scrollHeight > clientHeight` in syncHeaderMetrics. */
-.table_body_wrap[data-has-scroll="false"] {
-  scrollbar-gutter: auto;
-}
-
-/* ─────────────────────────────────────────────
-   Shared <table> - header wrap + body wrap.
-   table-layout:fixed + identical widths = perfect column alignment.
-───────────────────────────────────────────── */
-.table {
-  --data-table-selection-control-size: var(--spacing-9);
-
-  border-collapse: separate;
-  border-spacing: 0;
-  table-layout: fixed;
-
-  thead th {
-    position: relative;
-    height: var(--spacing-11);
-    padding: 0 var(--spacing-6);
-    font-size: var(--font-size-xs);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-foreground);
-    white-space: nowrap;
-    /* explicit background so sticky pinned cells mask scrolled content */
-    background: var(--color-muted);
-    /* visible: header checkbox focus ring not clipped */
-    overflow: visible;
-  }
-
-  tbody tr {
-    transition: background var(--transition-fast);
-
-    &:hover td {
-      background: var(--color-secondary);
-    }
-
-    &.row_selected td {
-      background: var(--color-muted);
-    }
-
-    &.row_group td {
-      background: var(--color-secondary);
-      font-weight: var(--font-weight-medium);
-    }
-
-    &.row_editing {
-      /* hover should not flicker the background of a row the user is editing */
-      &:hover td {
-        background: var(--color-background);
-      }
-
-      td {
-        background: var(--color-background);
-
-        .td_inner {
-          /* let inline-edit focus rings + dropdown shadows escape the cell */
-          overflow: visible;
-          text-overflow: clip;
-        }
-      }
-    }
-
-    &.row_dragging td {
-      opacity: 0.5;
-      background: var(--color-muted);
-    }
-
-    &.row_drop_target td {
-      box-shadow: inset 0 2px 0 0 var(--color-primary);
-    }
-
-    td {
-      padding: var(--spacing-5) var(--spacing-6);
-      font-size: var(--font-size-sm);
-      font-weight: var(--font-weight-normal);
-      color: var(--color-foreground);
-      vertical-align: middle;
-      border-bottom: var(--border-1) solid var(--color-border);
-      /* explicit background so sticky pinned cells mask scrolled content */
-      background: var(--color-background);
-      /* visible: focus rings + dropdowns escape the cell */
-      overflow: visible;
-    }
-  }
-}
-
-/* ─────────────────────────────────────────────
-   Vertical column borders (showVerticalBorders prop)
-   Drawn on the LEFT of every cell except the first, so we never get a
-   double border at the table's outer edge.
-───────────────────────────────────────────── */
-.table_vertical_borders {
-  /* Only add vertical border if the previous cell is not the last left-pinned cell. Prevents double border with pinned columns. */
-  thead th:not(.col_pinned_last.col_pinned_left) + th,
-  tbody td:not(.col_pinned_last.col_pinned_left) + td {
-    border-left: var(--border-1) solid var(--color-border);
-  }
-}
-
-/* ─────────────────────────────────────────────
-   Header inner - flex container that hugs its content.
-   No `flex: 1` on the label; icons sit immediately next to the text and
-   `justify-content` (set by `.align_*`) determines start/end alignment.
-───────────────────────────────────────────── */
-.th_inner {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  min-height: var(--spacing-11);
-  gap: var(--spacing-2);
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-
-.th_label {
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.th_actions {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  flex-shrink: 0;
-}
-
-.drag_handle {
-  width: 1rem;
-  height: 1rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-muted-foreground);
-  cursor: grab;
-  flex-shrink: 0;
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-/* ─────────────────────────────────────────────
-   Compact icon-only button used for sort / group / pin in the header.
-───────────────────────────────────────────── */
-.icon_btn {
-  /* !important needed: --button-icon is also set by :is(.ghost, .tone_ghost) in
-     button.module.css at equal specificity - CSS module load order is not guaranteed,
-     so !important on the var is the only reliable way to win without hardcoding svg color. */
-  --button-icon: var(--color-muted-foreground) !important;
-
-  &:hover:not(.disabled) {
-    --button-icon: var(--color-foreground) !important;
-    background-color: var(--color-border) !important;
-  }
-}
-
-/* ─────────────────────────────────────────────
-   Body cell inner - default truncates with ellipsis.
-   Override per-column with `meta.truncate = false` for cells hosting
-   inputs/buttons so focus rings and dropdowns aren't clipped.
-───────────────────────────────────────────── */
-.td_inner {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  /* outset breathing room mirrors the header's */
-  margin: calc(var(--spacing-2) * -1);
-  padding: var(--spacing-2);
-}
-
-.td_inner_no_truncate {
-  overflow: visible;
-  text-overflow: clip;
-  white-space: normal;
-}
-
-.selection_checkbox {
-  --native-control-size: var(--data-table-selection-control-size);
-
-  width: fit-content;
-  min-width: fit-content;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin: 0;
-
-  > * {
-    width: fit-content;
-    min-width: fit-content;
-  }
-
-  > * > * {
-    width: fit-content;
-    min-width: fit-content;
-  }
-}
-
-.col_select {
-  padding-left: var(--spacing-5) !important;
-  padding-right: var(--spacing-5) !important;
-
-  .th_inner,
-  .td_inner {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0;
-    overflow: visible;
-  }
-}
-
-.group_anchor_cell {
-  text-align: left !important;
-
-  .td_inner {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
-}
-
-/* ─────────────────────────────────────────────
-   Cell alignment via `column.meta.align`
-   - text-align handles inline text (truncate=true case)
-   - flex justify-content handles non-truncated content (action buttons, inputs)
-   - header is always a flex container so we always set justify-content there
-───────────────────────────────────────────── */
-.align_left {
-  text-align: left;
-
-  .th_inner {
-    justify-content: flex-start;
-  }
-
-  .td_inner_no_truncate {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
-}
-
-.align_center {
-  text-align: center;
-
-  .th_inner {
-    justify-content: center;
-  }
-
-  .td_inner_no_truncate {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-.align_right {
-  text-align: right;
-
-  .th_inner {
-    justify-content: flex-end;
-  }
-
-  .td_inner_no_truncate {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-}
-
-/* ─────────────────────────────────────────────
-   Column pinning - sticky offsets are written inline by JS
-   The hairline divider lives only on the LAST column of each pinning group
-   (`col_pinned_last`) so adjacent pinned columns don't get double dividers.
-───────────────────────────────────────────── */
-.table th.col_pinned_left,
-.table th.col_pinned_right,
-.table td.col_pinned_left,
-.table td.col_pinned_right {
-  position: sticky;
-  z-index: 1;
-
-  /* To ensure pinned columns are visible above other content */
-  background-color: var(--color-muted);
-}
-
-.table thead th.col_pinned_left,
-.table thead th.col_pinned_right {
-  z-index: 2;
-}
-
-/* Pinned left columns: add a right border only to the last pinned cell to act as a divider. */
-.col_pinned_last.col_pinned_left {
-  border-right: var(--border-1) solid var(--color-border);
-}
-
-/* Pinned right columns: add a left border only to the last pinned cell to act as a divider. */
-.col_pinned_last.col_pinned_right {
-  border-left: var(--border-1) solid var(--color-border);
-}
-
-/* Keep interactive cell popovers above sticky neighbors when they are rendered
-   in-place (non-portal mode). */
-.table tbody td:focus-within {
-  position: relative;
-  z-index: 3;
-}
-
-/* ─────────────────────────────────────────────
-   Drag-and-drop column reordering
-───────────────────────────────────────────── */
-.col_dragging {
-  opacity: 0.5;
-}
-
-.col_drop_target {
-  /* a slim vertical bar on the leading edge of the drop target */
-  outline: 2px solid var(--color-primary);
-  outline-offset: -2px;
-}
-
-/* ─────────────────────────────────────────────
-   Column resize handle - narrow vertical strip on the cell's right edge
-───────────────────────────────────────────── */
-.resize_handle {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 5px;
-  cursor: col-resize;
-  user-select: none;
-  touch-action: none;
-  background: transparent;
-  transition: background var(--transition-fast);
-
-  &:hover,
-  &.resize_handle_active {
-    background: var(--color-primary);
-  }
-}
-
-/* ─────────────────────────────────────────────
-   Group rows + toggle
-───────────────────────────────────────────── */
-.group_toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--color-foreground);
-  font: inherit;
-  cursor: pointer;
-}
-
-.group_chevron_icon {
-  color: var(--color-muted-foreground);
-}
-
-.group_chevron {
-  transition: transform var(--transition-fast);
-  flex-shrink: 0;
-}
-
-.group_chevron_open {
-  transform: rotate(90deg);
-}
-
-.group_value {
-  font-weight: var(--font-weight-semibold);
-}
-
-.group_count {
-  color: var(--color-muted-foreground);
-  font-size: var(--font-size-xs);
-}
-
-.cell_aggregated {
-  font-weight: var(--font-weight-semibold);
-}
-
-/* ─────────────────────────────────────────────
-   Loading / empty states
-───────────────────────────────────────────── */
-.state_overlay {
-  width: 100%;
-  padding: var(--spacing-14) var(--spacing-8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.empty_msg {
-  font-size: var(--font-size-sm);
-  color: var(--color-muted-foreground);
-}
-
-/* ─────────────────────────────────────────────
-   Pagination bar
-   margin-top:auto pushes it to the absolute bottom of content_wrap
-   no matter how few rows are visible.
-   flex-shrink:0 stops it compressing when space is tight.
-───────────────────────────────────────────── */
-.pagination_bar {
-  flex-shrink: 0;
-  margin-top: auto;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-8);
-  min-width: 0;
-  /* When the count + controls can't fit, the WHOLE bar scrolls horizontally as
-     one strip rather than wrapping or clipping. The outlet hides X overflow, so
-     letting a cluster shrink would just clip the nav buttons - scroll the bar
-     instead. `space-between` still spreads them when there IS room. The vertical
-     padding gives the buttons' focus rings room so `overflow-x: auto` (which also
-     clips the Y axis) doesn't crop them. */
-  overflow-x: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border) transparent;
-  padding-block: var(--spacing-2);
-
-  > * {
-    flex-shrink: 0;
-  }
-}
-
-@media (--sm) {
-  .pagination_bar {
-    gap: var(--spacing-5);
-  }
-}
-
-.pagination_bar_loading {
-  flex-wrap: wrap;
-  row-gap: var(--spacing-4);
-}
-
-.loading_select_skeleton {
-  border-radius: var(--radius-sm);
-  flex-shrink: 0;
-}
-
-.pagination_left {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  min-width: 0;
-}
-
-.pagination_left_loading {
-  overflow: hidden;
-}
-
-.pagination_count {
-  font-size: var(--font-size-sm);
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-
-  span {
-    font-weight: var(--font-weight-medium);
-    color: var(--color-foreground);
-  }
-}
-
-.pagination_controls {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  min-width: 0;
-}
-
-@media (--sm) {
-  .pagination_controls {
-    gap: var(--spacing-5);
-  }
-}
-
-.pagination_controls_loading {
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  max-width: 100%;
-  row-gap: var(--spacing-4);
-}
-
-.pagination_controls_loading > * {
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.pagination_text_skeleton {
-  height: 1em;
-  min-width: 0;
-  max-width: 100%;
-  flex: 0 1 auto;
-}
-
-.pagination_select_skeleton,
-.pagination_button_skeleton {
-  width: var(--spacing-11);
-  height: var(--spacing-11);
-  min-width: 0;
-}
-
-.pagination_select_skeleton {
-  flex: 0 1 auto;
-}
-
-.pagination_button_skeleton {
-  flex: 0 0 auto;
-}
-
-.page_size_wrap {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-5);
-  min-width: 0;
-  flex-shrink: 1;
-  max-width: 100%;
-}
-
-.page_size_label {
-  font-size: var(--font-size-sm);
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-}
-
-.page_indicator {
-  font-size: var(--font-size-sm);
-  color: var(--color-muted-foreground);
-  white-space: nowrap;
-  min-width: 6rem;
-  text-align: center;
-
-  span {
-    font-weight: var(--font-weight-medium);
-    color: var(--color-foreground);
-  }
-}
-
-.page_nav {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  flex-shrink: 0;
-}
-
-.page_nav_loading {
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  row-gap: var(--spacing-2);
-  min-width: 0;
-  max-width: 100%;
-  flex-shrink: 1;
-}
+/* ─────────────────────────────────────────────
+   Root
+   Fills its flex parent. Stacks filter bar (fixed) + content wrap (grows).
+───────────────────────────────────────────── */
+.root {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+}
+
+/* ─────────────────────────────────────────────
+   Filter bar
+   CSS grid - always one row, never wraps.
+   gridTemplateColumns is set inline from FilterBar.
+───────────────────────────────────────────── */
+.filter_bar {
+  display: grid;
+  align-items: center;
+  place-items: center;
+  gap: var(--spacing-6);
+  width: 100%;
+  flex-shrink: 0;
+
+  > * {
+    min-width: 0;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Compact filters (≤ --md)
+   The inline row can't fit its fields below this width, and stacking them all
+   full-height buries the table on phones - so the DataTable swaps <FilterBar>
+   for <FilterModal>: a single trigger button that opens the same fields,
+   stacked, inside the Modal primitive (a bottom sheet on phones).
+───────────────────────────────────────────── */
+.filter_modal_bar {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.filter_trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* Active-filter count pill on the trigger button. */
+.filter_count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--spacing-9);
+  height: var(--spacing-9);
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-full);
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+
+/* Fields stacked full width inside the modal; each control fills its row. */
+.filter_modal_fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5);
+}
+
+.filter_modal_field {
+  width: 100%;
+}
+
+.filter_modal_field > * {
+  width: 100%;
+}
+
+/* ─────────────────────────────────────────────
+   Content wrap
+   Grows to fill all space below the filter bar.
+   Flex column: table shell (grows) + pagination (pinned to bottom via margin-top:auto).
+───────────────────────────────────────────── */
+.content_wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─────────────────────────────────────────────
+   Table shell
+   Grows to fill space above pagination. Header pill + scrollable body.
+───────────────────────────────────────────── */
+.table_shell {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  padding-bottom: var(--spacing-6);
+}
+
+/* no bottom padding when pagination is not shown */
+.table_shell_no_pagination {
+  padding-bottom: 0;
+}
+
+/* ─────────────────────────────────────────────
+   Detached header pill
+   Rounded standalone bar. scrollLeft synced to body via JS so pinned
+   columns stay perfectly aligned with their body counterparts.
+───────────────────────────────────────────── */
+.table_header_container {
+  position: relative;
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.table_header_wrap {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border-radius: var(--radius-md);
+  background: var(--color-muted);
+  border: var(--border-1) solid var(--color-border);
+  scrollbar-width: none;
+}
+
+.table_header_wrap::-webkit-scrollbar {
+  display: none;
+}
+
+.header_padding_mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--header-padding-right, 0px);
+  background: var(--color-muted);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  border-top: var(--border-1) solid var(--color-border);
+  border-right: var(--border-1) solid var(--color-border);
+  border-bottom: var(--border-1) solid var(--color-border);
+  pointer-events: none;
+  z-index: 10;
+  visibility: hidden;
+}
+
+.table_header_container[data-has-scroll="true"] .header_padding_mask {
+  visibility: visible;
+}
+
+/* ─────────────────────────────────────────────
+   Scrollable body
+   flex:1 + min-height:0 = fills all space, then scrolls.
+───────────────────────────────────────────── */
+.table_body_wrap {
+  flex: 1;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: auto;
+  /* Reserve the scrollbar gutter by DEFAULT so clientWidth is stable: the
+     vertical scrollbar (when rows overflow) sits in the reserved gutter instead
+     of stealing ~15px and triggering an unexpected horizontal scrollbar. This
+     default also covers the first paint before JS measures. */
+  scrollbar-gutter: stable;
+  border: var(--border-1) solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-background);
+  position: relative;
+}
+
+/* Once JS confirms the body does NOT overflow vertically (no scrollbar to make
+   room for), release the gutter so the content fills to the border - otherwise
+   a few-row table shows a blank ~15px strip on the right. `data-has-scroll` is
+   set from `scrollHeight > clientHeight` in syncHeaderMetrics. */
+.table_body_wrap[data-has-scroll="false"] {
+  scrollbar-gutter: auto;
+}
+
+/* ─────────────────────────────────────────────
+   Shared <table> - header wrap + body wrap.
+   table-layout:fixed + identical widths = perfect column alignment.
+───────────────────────────────────────────── */
+.table {
+  --data-table-selection-control-size: var(--spacing-9);
+
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+
+  thead th {
+    position: relative;
+    height: var(--spacing-11);
+    padding: 0 var(--spacing-6);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-foreground);
+    white-space: nowrap;
+    /* explicit background so sticky pinned cells mask scrolled content */
+    background: var(--color-muted);
+    /* visible: header checkbox focus ring not clipped */
+    overflow: visible;
+  }
+
+  tbody tr {
+    transition: background var(--transition-fast);
+
+    &:hover td {
+      background: var(--color-secondary);
+    }
+
+    &.row_selected td {
+      background: var(--color-muted);
+    }
+
+    &.row_group td {
+      background: var(--color-secondary);
+      font-weight: var(--font-weight-medium);
+    }
+
+    &.row_editing {
+      /* hover should not flicker the background of a row the user is editing */
+      &:hover td {
+        background: var(--color-background);
+      }
+
+      td {
+        background: var(--color-background);
+
+        .td_inner {
+          /* let inline-edit focus rings + dropdown shadows escape the cell */
+          overflow: visible;
+          text-overflow: clip;
+        }
+      }
+    }
+
+    &.row_dragging td {
+      opacity: 0.5;
+      background: var(--color-muted);
+    }
+
+    &.row_drop_target td {
+      box-shadow: inset 0 2px 0 0 var(--color-primary);
+    }
+
+    td {
+      padding: var(--spacing-5) var(--spacing-6);
+      font-size: var(--font-size-sm);
+      font-weight: var(--font-weight-normal);
+      color: var(--color-foreground);
+      vertical-align: middle;
+      border-bottom: var(--border-1) solid var(--color-border);
+      /* explicit background so sticky pinned cells mask scrolled content */
+      background: var(--color-background);
+      /* visible: focus rings + dropdowns escape the cell */
+      overflow: visible;
+    }
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Vertical column borders (showVerticalBorders prop)
+   Drawn on the LEFT of every cell except the first, so we never get a
+   double border at the table's outer edge.
+───────────────────────────────────────────── */
+.table_vertical_borders {
+  /* Only add vertical border if the previous cell is not the last left-pinned cell. Prevents double border with pinned columns. */
+  thead th:not(.col_pinned_last.col_pinned_left) + th,
+  tbody td:not(.col_pinned_last.col_pinned_left) + td {
+    border-left: var(--border-1) solid var(--color-border);
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Header inner - flex container that hugs its content.
+   No `flex: 1` on the label; icons sit immediately next to the text and
+   `justify-content` (set by `.align_*`) determines start/end alignment.
+───────────────────────────────────────────── */
+.th_inner {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  min-height: var(--spacing-11);
+  gap: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.th_label {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.th_actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex-shrink: 0;
+}
+
+.drag_handle {
+  width: 1rem;
+  height: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-muted-foreground);
+  cursor: grab;
+  flex-shrink: 0;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Compact icon-only button used for sort / group / pin in the header.
+───────────────────────────────────────────── */
+.icon_btn {
+  /* !important needed: --button-icon is also set by :is(.ghost, .tone_ghost) in
+     button.module.css at equal specificity - CSS module load order is not guaranteed,
+     so !important on the var is the only reliable way to win without hardcoding svg color. */
+  --button-icon: var(--color-muted-foreground) !important;
+
+  &:hover:not(.disabled) {
+    --button-icon: var(--color-foreground) !important;
+    background-color: var(--color-border) !important;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Body cell inner - default truncates with ellipsis.
+   Override per-column with `meta.truncate = false` for cells hosting
+   inputs/buttons so focus rings and dropdowns aren't clipped.
+───────────────────────────────────────────── */
+.td_inner {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* outset breathing room mirrors the header's */
+  margin: calc(var(--spacing-2) * -1);
+  padding: var(--spacing-2);
+}
+
+.td_inner_no_truncate {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+.selection_checkbox {
+  --native-control-size: var(--data-table-selection-control-size);
+
+  width: fit-content;
+  min-width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+
+  > * {
+    width: fit-content;
+    min-width: fit-content;
+  }
+
+  > * > * {
+    width: fit-content;
+    min-width: fit-content;
+  }
+}
+
+.col_select {
+  padding-left: var(--spacing-5) !important;
+  padding-right: var(--spacing-5) !important;
+
+  .th_inner,
+  .td_inner {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    overflow: visible;
+  }
+}
+
+.group_anchor_cell {
+  text-align: left !important;
+
+  .td_inner {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Cell alignment via `column.meta.align`
+   - text-align handles inline text (truncate=true case)
+   - flex justify-content handles non-truncated content (action buttons, inputs)
+   - header is always a flex container so we always set justify-content there
+───────────────────────────────────────────── */
+.align_left {
+  text-align: left;
+
+  .th_inner {
+    justify-content: flex-start;
+  }
+
+  .td_inner_no_truncate {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+}
+
+.align_center {
+  text-align: center;
+
+  .th_inner {
+    justify-content: center;
+  }
+
+  .td_inner_no_truncate {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.align_right {
+  text-align: right;
+
+  .th_inner {
+    justify-content: flex-end;
+  }
+
+  .td_inner_no_truncate {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Column pinning - sticky offsets are written inline by JS
+   The hairline divider lives only on the LAST column of each pinning group
+   (`col_pinned_last`) so adjacent pinned columns don't get double dividers.
+───────────────────────────────────────────── */
+.table th.col_pinned_left,
+.table th.col_pinned_right,
+.table td.col_pinned_left,
+.table td.col_pinned_right {
+  position: sticky;
+  z-index: 1;
+
+  /* To ensure pinned columns are visible above other content */
+  background-color: var(--color-muted);
+}
+
+.table thead th.col_pinned_left,
+.table thead th.col_pinned_right {
+  z-index: 2;
+}
+
+/* Pinned left columns: add a right border only to the last pinned cell to act as a divider. */
+.col_pinned_last.col_pinned_left {
+  border-right: var(--border-1) solid var(--color-border);
+}
+
+/* Pinned right columns: add a left border only to the last pinned cell to act as a divider. */
+.col_pinned_last.col_pinned_right {
+  border-left: var(--border-1) solid var(--color-border);
+}
+
+/* Keep interactive cell popovers above sticky neighbors when they are rendered
+   in-place (non-portal mode). */
+.table tbody td:focus-within {
+  position: relative;
+  z-index: 3;
+}
+
+/* ─────────────────────────────────────────────
+   Drag-and-drop column reordering
+───────────────────────────────────────────── */
+.col_dragging {
+  opacity: 0.5;
+}
+
+.col_drop_target {
+  /* a slim vertical bar on the leading edge of the drop target */
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+/* ─────────────────────────────────────────────
+   Column resize handle - narrow vertical strip on the cell's right edge
+───────────────────────────────────────────── */
+.resize_handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  background: transparent;
+  transition: background var(--transition-fast);
+
+  &:hover,
+  &.resize_handle_active {
+    background: var(--color-primary);
+  }
+}
+
+/* ─────────────────────────────────────────────
+   Group rows + toggle
+───────────────────────────────────────────── */
+.group_toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-foreground);
+  font: inherit;
+  cursor: pointer;
+}
+
+.group_chevron {
+  transition: transform var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.group_chevron_open {
+  transform: rotate(90deg);
+}
+
+.group_value {
+  font-weight: var(--font-weight-semibold);
+}
+
+.group_count {
+  color: var(--color-muted-foreground);
+  font-size: var(--font-size-xs);
+}
+
+.cell_aggregated {
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ─────────────────────────────────────────────
+   Loading / empty states
+───────────────────────────────────────────── */
+.state_overlay {
+  width: 100%;
+  padding: var(--spacing-14) var(--spacing-8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty_msg {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted-foreground);
+}
+
+/* ─────────────────────────────────────────────
+   Pagination bar
+   margin-top:auto pushes it to the absolute bottom of content_wrap
+   no matter how few rows are visible.
+   flex-shrink:0 stops it compressing when space is tight.
+───────────────────────────────────────────── */
+.pagination_bar {
+  flex-shrink: 0;
+  margin-top: auto;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+  min-width: 0;
+  /* When the count + controls can't fit, the WHOLE bar scrolls horizontally as
+     one strip rather than wrapping or clipping. The outlet hides X overflow, so
+     letting a cluster shrink would just clip the nav buttons - scroll the bar
+     instead. `space-between` still spreads them when there IS room. The vertical
+     padding gives the buttons' focus rings room so `overflow-x: auto` (which also
+     clips the Y axis) doesn't crop them. */
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+  padding-block: var(--spacing-2);
+
+  > * {
+    flex-shrink: 0;
+  }
+}
+
+@media (--sm) {
+  .pagination_bar {
+    gap: var(--spacing-5);
+  }
+}
+
+.pagination_bar_loading {
+  flex-wrap: wrap;
+  row-gap: var(--spacing-4);
+}
+
+.loading_select_skeleton {
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+}
+
+.pagination_left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-width: 0;
+}
+
+.pagination_left_loading {
+  overflow: hidden;
+}
+
+.pagination_count {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted-foreground);
+  white-space: nowrap;
+
+  span {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-foreground);
+  }
+}
+
+.pagination_controls {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-width: 0;
+}
+
+@media (--sm) {
+  .pagination_controls {
+    gap: var(--spacing-5);
+  }
+}
+
+.pagination_controls_loading {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  max-width: 100%;
+  row-gap: var(--spacing-4);
+}
+
+.pagination_controls_loading > * {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.pagination_text_skeleton {
+  height: 1em;
+  min-width: 0;
+  max-width: 100%;
+  flex: 0 1 auto;
+}
+
+.pagination_select_skeleton,
+.pagination_button_skeleton {
+  width: var(--spacing-11);
+  height: var(--spacing-11);
+  min-width: 0;
+}
+
+.pagination_select_skeleton {
+  flex: 0 1 auto;
+}
+
+.pagination_button_skeleton {
+  flex: 0 0 auto;
+}
+
+.page_size_wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-5);
+  min-width: 0;
+  flex-shrink: 1;
+  max-width: 100%;
+}
+
+.page_size_label {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted-foreground);
+  white-space: nowrap;
+}
+
+.page_indicator {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted-foreground);
+  white-space: nowrap;
+  min-width: 6rem;
+  text-align: center;
+
+  span {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-foreground);
+  }
+}
+
+.page_nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-shrink: 0;
+}
+
+.page_nav_loading {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  row-gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+  flex-shrink: 1;
+}