@coreui/data-grid 0.1.0-rc.0 → 0.3.0-rc.0

package/scss/components/_data-grid.scss

@@ -0,0 +1,807 @@
+@use "../functions/defaults" as *;
+@use "../mixins/tokens" as *;
+@use "../config" as *;
+
+// stylelint-disable custom-property-no-missing-var-function
+
+// Everything resolves through CoreUI semantic variables, so light/dark theming
+// via [data-coreui-theme] works with no extra rules. The fallbacks keep the grid
+// legible when the CoreUI stylesheet is absent; `data-grid.standalone.css` fills
+// the rest in.
+
+// scss-docs-start data-grid-variables
+$data-grid-viewport-max-height:        30rem !default;
+$data-grid-header-bg:                  var(--#{$prefix}body-bg, #fff) !default;
+$data-grid-header-shadow:              inset 0 calc(-1 * var(--#{$prefix}border-width, 1px)) 0 var(--#{$prefix}border-color, #dee2e6) !default;
+$data-grid-cell-selected-bg:           rgba(var(--#{$prefix}primary-rgb, 50, 31, 219), .12) !default;
+$data-grid-cell-selected-border-color: var(--#{$prefix}primary, #321fdb) !default;
+$data-grid-cell-selected-border-width: 1px !default;
+$data-grid-row-handle-width:           2rem !default;
+$data-grid-select-cell-width:          2.5rem !default;
+$data-grid-sorter-margin:              .25rem !default;
+$data-grid-sorter-opacity:             .3 !default;
+$data-grid-spacing:                    .5rem !default;
+$data-grid-resizer-width:              .625rem !default;
+$data-grid-resizer-grip-height:        60% !default;
+$data-grid-resizer-grip-color:         var(--#{$prefix}border-color, #dee2e6) !default;
+$data-grid-resizer-grip-color-hover:   var(--#{$prefix}secondary-color, #6c757d) !default;
+$data-grid-pinned-border-width:        var(--#{$prefix}border-width) !default;
+$data-grid-pinned-border-color:        var(--#{$prefix}border-color, #dee2e6) !default;
+$data-grid-drop-indicator:             var(--#{$prefix}primary, #321fdb) !default;
+$data-grid-drag-transition:            .15s ease !default;
+$data-grid-menu-bg:                    var(--#{$prefix}body-bg, #fff) !default;
+$data-grid-menu-border-color:          var(--#{$prefix}border-color, #dee2e6) !default;
+$data-grid-menu-shadow:                var(--#{$prefix}box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15)) !default;
+$data-grid-menu-min-width:             10rem !default;
+$data-grid-menu-item-hover-bg:         var(--#{$prefix}tertiary-bg, #f8f9fa) !default;
+$data-grid-loading-bg:                 rgba(var(--#{$prefix}body-bg-rgb, 255, 255, 255), .6) !default;
+$data-grid-pinned-bg:                  var(--#{$prefix}body-bg, #fff) !default;
+$data-grid-focus-ring-width:           2px !default;
+$data-grid-focus-ring-color:           var(--#{$prefix}primary, #321fdb) !default;
+// scss-docs-end data-grid-variables
+
+// Values that shape the grid but have no runtime knob. Sass-only on purpose:
+// a token here would be a new public custom property, which is a separate call.
+// scss-docs-start data-grid-layout-variables
+$data-grid-bar-min-height:           48px !default;
+$data-grid-border-width:             var(--#{$prefix}border-width, 1px) !default;
+$data-grid-border-color:             var(--#{$prefix}border-color, #dee2e6) !default;
+$data-grid-border-radius:            var(--#{$prefix}border-radius, .375rem) !default;
+$data-grid-muted-color:              var(--#{$prefix}secondary-color, #6c757d) !default;
+$data-grid-popup-max-width:          18rem !default;
+$data-grid-gap-sm:                   .25rem !default;
+$data-grid-tooltip-z-index:          1080 !default;
+// scss-docs-end data-grid-layout-variables
+
+$data-grid-tokens: () !default;
+
+// scss-docs-start data-grid-css-vars
+// stylelint-disable-next-line scss/dollar-variable-default
+$data-grid-tokens: defaults(
+  (
+    --#{$prefix}data-grid-viewport-max-height: #{$data-grid-viewport-max-height},
+    --#{$prefix}data-grid-header-bg: #{$data-grid-header-bg},
+    --#{$prefix}data-grid-header-shadow: #{$data-grid-header-shadow},
+    --#{$prefix}data-grid-cell-selected-bg: #{$data-grid-cell-selected-bg},
+    --#{$prefix}data-grid-cell-selected-border-color: #{$data-grid-cell-selected-border-color},
+    --#{$prefix}data-grid-cell-selected-border-width: #{$data-grid-cell-selected-border-width},
+    --#{$prefix}data-grid-row-handle-width: #{$data-grid-row-handle-width},
+    --#{$prefix}data-grid-select-cell-width: #{$data-grid-select-cell-width},
+    --#{$prefix}data-grid-sorter-margin: #{$data-grid-sorter-margin},
+    --#{$prefix}data-grid-sorter-opacity: #{$data-grid-sorter-opacity},
+    --#{$prefix}data-grid-spacing: #{$data-grid-spacing},
+    --#{$prefix}data-grid-resizer-width: #{$data-grid-resizer-width},
+    --#{$prefix}data-grid-resizer-grip-height: #{$data-grid-resizer-grip-height},
+    --#{$prefix}data-grid-resizer-grip-color: #{$data-grid-resizer-grip-color},
+    --#{$prefix}data-grid-resizer-grip-color-hover: #{$data-grid-resizer-grip-color-hover},
+    --#{$prefix}data-grid-pinned-border-width: #{$data-grid-pinned-border-width},
+    --#{$prefix}data-grid-pinned-border-color: #{$data-grid-pinned-border-color},
+    --#{$prefix}data-grid-drop-indicator: #{$data-grid-drop-indicator},
+    --#{$prefix}data-grid-drag-transition: #{$data-grid-drag-transition},
+    --#{$prefix}data-grid-menu-bg: #{$data-grid-menu-bg},
+    --#{$prefix}data-grid-menu-border-color: #{$data-grid-menu-border-color},
+    --#{$prefix}data-grid-menu-shadow: #{$data-grid-menu-shadow},
+    --#{$prefix}data-grid-menu-min-width: #{$data-grid-menu-min-width},
+    --#{$prefix}data-grid-menu-item-hover-bg: #{$data-grid-menu-item-hover-bg},
+    --#{$prefix}data-grid-loading-bg: #{$data-grid-loading-bg},
+    --#{$prefix}data-grid-pinned-bg: #{$data-grid-pinned-bg},
+    --#{$prefix}data-grid-focus-ring-width: #{$data-grid-focus-ring-width},
+    --#{$prefix}data-grid-focus-ring-color: #{$data-grid-focus-ring-color},
+  ),
+  $data-grid-tokens
+);
+// scss-docs-end data-grid-css-vars
+
+.data-grid {
+  // The column menu is positioned against the grid root (it must escape the
+  // viewport's overflow while staying inside the token scope).
+  position: relative;
+  // A column so that a root given an explicit height actually constrains the
+  // scroller: the viewport takes what the toolbar and pagination leave, and
+  // min-height: 0 lets it shrink below its content instead of overflowing the
+  // root. With no height set, this changes nothing — the viewport is sized by
+  // its content up to the max-height token.
+  display: flex;
+  flex-direction: column;
+
+  @include tokens($data-grid-tokens);
+
+  .data-grid-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--#{$prefix}data-grid-spacing);
+    align-items: center;
+    min-height: $data-grid-bar-min-height;
+    padding: var(--#{$prefix}data-grid-spacing);
+    border-bottom: $data-grid-border-width solid $data-grid-border-color;
+  }
+
+  .data-grid-toolbar-actions {
+    display: flex;
+    gap: $data-grid-gap-sm;
+    align-items: center;
+  }
+
+  .data-grid-toolbar-search {
+    margin-inline-start: auto;
+  }
+
+  .data-grid-viewport {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+    max-height: var(--#{$prefix}data-grid-viewport-max-height);
+    overflow-y: auto;
+    // Windowed rendering resizes the spacer rows and recycles row elements on
+    // every frame; browser scroll anchoring chases those mutations and keeps
+    // adjusting scrollTop, which turns wheel scrolling into a feedback loop.
+    overflow-anchor: none;
+  }
+
+  // Inline editing: the in-cell editor fills the cell; the popup layer hosts
+  // rich editors (date pickers, selects) anchored over the cell.
+  .data-grid-cell-editor {
+    width: 100%;
+    min-width: 4rem;
+  }
+
+  .data-grid-editor-popup {
+    position: absolute;
+    z-index: 4;
+    padding: $data-grid-gap-sm;
+    background-color: var(--#{$prefix}data-grid-menu-bg);
+    border: $data-grid-border-width solid var(--#{$prefix}data-grid-menu-border-color);
+    border-radius: $data-grid-border-radius;
+    box-shadow: var(--#{$prefix}data-grid-menu-shadow);
+  }
+
+  // cellNavigation: the roving-tabindex active cell. The ring is inset so the
+  // sticky header and pinned columns don't clip it.
+  [role="grid"] :is(td, th):focus-visible {
+    outline: var(--#{$prefix}data-grid-focus-ring-width) solid var(--#{$prefix}data-grid-focus-ring-color);
+    outline-offset: calc(-1 * var(--#{$prefix}data-grid-focus-ring-width));
+  }
+
+  .data-grid-viewport:focus-visible {
+    outline: 0;
+  }
+
+  .data-grid-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background-color: var(--#{$prefix}data-grid-header-bg);
+    box-shadow: var(--#{$prefix}data-grid-header-shadow);
+  }
+
+  // Header label row: fixed 48px with vertically centered content (height on a
+  // table cell acts as a min; min-height is ignored on table-cell).
+  .data-grid-header tr:not(.data-grid-filter-row) > th {
+    height: $data-grid-bar-min-height;
+    vertical-align: middle;
+  }
+
+  .data-grid-filter-row > th {
+    padding-top: 0;
+    font-weight: normal;
+  }
+
+  .data-grid-header th[data-coreui-draggable] {
+    cursor: grab;
+  }
+
+  .data-grid-header-cell {
+    display: flex;
+    align-items: center;
+    gap: $data-grid-gap-sm;
+  }
+
+  .data-grid-header-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Icon-only ghost buttons: square them by matching horizontal padding to
+  // vertical (follows .btn / .btn-sm automatically) and collapsing the text
+  // line-height so height follows the icon, not a 1.5em text line.
+  .btn-ghost {
+    --#{$prefix}btn-padding-x: var(--#{$prefix}btn-padding-y);
+    --#{$prefix}btn-line-height: 1;
+  }
+
+  .data-grid-menu-button {
+    margin-inline-start: auto;
+  }
+
+  .data-grid-menu {
+    position: absolute;
+    z-index: 4;
+    min-width: var(--#{$prefix}data-grid-menu-min-width);
+    padding: $data-grid-gap-sm 0;
+    background-color: var(--#{$prefix}data-grid-menu-bg);
+    border: $data-grid-border-width solid var(--#{$prefix}data-grid-menu-border-color);
+    border-radius: $data-grid-border-radius;
+    box-shadow: var(--#{$prefix}data-grid-menu-shadow);
+  }
+
+  .data-grid-menu-item {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    padding: $data-grid-gap-sm .75rem;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    cursor: pointer;
+    background: none;
+    border: 0;
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--#{$prefix}data-grid-menu-item-hover-bg);
+    }
+
+    // Disabled items stay focusable (aria-disabled, APG menu pattern) so the
+    // roving arrow cycle can reach them.
+    &[aria-disabled="true"] {
+      color: $data-grid-muted-color;
+      cursor: default;
+      background: none;
+    }
+  }
+
+  .data-grid-filter-menu {
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    min-width: var(--#{$prefix}data-grid-menu-min-width);
+    max-width: $data-grid-popup-max-width;
+    padding: .75rem;
+    background-color: var(--#{$prefix}data-grid-menu-bg);
+    border: $data-grid-border-width solid var(--#{$prefix}data-grid-menu-border-color);
+    border-radius: $data-grid-border-radius;
+    box-shadow: var(--#{$prefix}data-grid-menu-shadow);
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      gap: .5rem;
+    }
+  }
+
+  .data-grid-filter-menu-condition {
+    display: flex;
+    flex-direction: column;
+    gap: $data-grid-gap-sm;
+  }
+
+  .data-grid-filter-menu-join {
+    display: flex;
+    gap: 1rem;
+
+    label {
+      display: flex;
+      gap: .375rem;
+      align-items: center;
+    }
+  }
+
+  .data-grid-filter-menu-values {
+    display: flex;
+    flex-direction: column;
+    gap: $data-grid-gap-sm;
+    max-height: 14rem;
+    overflow-y: auto;
+  }
+
+  .data-grid-filter-menu-footer {
+    display: flex;
+    gap: .5rem;
+    justify-content: flex-end;
+  }
+
+  .data-grid-column-chooser {
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    min-width: var(--#{$prefix}data-grid-menu-min-width);
+    max-width: $data-grid-popup-max-width;
+    max-height: 20rem;
+    padding: .75rem;
+    overflow-y: auto;
+    background-color: var(--#{$prefix}data-grid-menu-bg);
+    border: $data-grid-border-width solid var(--#{$prefix}data-grid-menu-border-color);
+    border-radius: $data-grid-border-radius;
+    box-shadow: var(--#{$prefix}data-grid-menu-shadow);
+  }
+
+  .data-grid-column-chooser-option {
+    display: flex;
+    gap: .375rem;
+    align-items: center;
+    margin-bottom: 0;
+  }
+
+  .data-grid-column-chooser-footer {
+    display: flex;
+    gap: .5rem;
+    justify-content: flex-end;
+    padding-top: $data-grid-gap-sm;
+    margin-top: $data-grid-gap-sm;
+    border-top: $data-grid-border-width solid var(--#{$prefix}data-grid-menu-border-color);
+  }
+
+  .data-grid-filter-button {
+    position: relative;
+    // Right-align the trailing controls as a group: the filter button takes the
+    // auto margin (menu drops its own below) so filter and menu sit together at
+    // the end, matching a menu-only header.
+    margin-inline-start: auto;
+
+    ~ .data-grid-menu-button {
+      margin-inline-start: 0;
+    }
+  }
+
+  // Active-filter indicator dot on the filter button.
+  .data-grid-filter-button-filtered::after {
+    position: absolute;
+    inset-block-start: .125rem;
+    inset-inline-end: .125rem;
+    width: .375rem;
+    height: .375rem;
+    content: "";
+    background-color: var(--#{$prefix}primary, #321fdb);
+    border-radius: 50%;
+  }
+
+  .data-grid-menu-item-icon {
+    display: inline-flex;
+    opacity: .75;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  .data-grid-menu-divider {
+    height: $data-grid-border-width;
+    margin: $data-grid-gap-sm 0;
+    background-color: var(--#{$prefix}data-grid-menu-border-color);
+  }
+
+  .data-grid-dragging {
+    opacity: .5;
+  }
+
+  // While a drag is live the whole grid keeps the grabbing cursor and stops
+  // painting a text selection under the pointer.
+  &.data-grid-drag-active {
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  // Both overlays are position: fixed (placed from viewport coordinates in JS)
+  // so they escape the viewport's overflow, like the tooltip.
+  .data-grid-drag-ghost {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: $data-grid-tooltip-z-index;
+    display: flex;
+    align-items: center;
+    max-width: 16rem;
+    padding: 0 var(--#{$prefix}data-grid-cell-padding-x, .5rem);
+    overflow: hidden;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+    background-color: var(--#{$prefix}data-grid-pinned-bg);
+    border: $data-grid-border-width solid var(--#{$prefix}data-grid-drop-indicator);
+    border-radius: $data-grid-border-radius;
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
+    transform: translate(-9999px, -9999px);
+    opacity: .9;
+  }
+
+  // The settling ghost: on release it flies from the pointer to the slot the
+  // item landed in (or back home on cancel) and fades out there.
+  .data-grid-drag-ghost-settle {
+    transition: transform var(--#{$prefix}data-grid-drag-transition), opacity var(--#{$prefix}data-grid-drag-transition);
+  }
+
+  .data-grid-drop-indicator {
+    position: fixed;
+    z-index: $data-grid-tooltip-z-index;
+    pointer-events: none;
+    background-color: var(--#{$prefix}data-grid-drop-indicator);
+    transition: top var(--#{$prefix}data-grid-drag-transition), left var(--#{$prefix}data-grid-drag-transition);
+  }
+
+  // The live reorder preview: cells slide to the layout the drop will produce.
+  // Transform only, so nothing reflows and the real order still changes once.
+  .data-grid-drag-preview {
+    transition: transform var(--#{$prefix}data-grid-drag-transition);
+  }
+
+  // Someone who asked the OS to stop moving things still gets the preview —
+  // it snaps to the final layout instead of gliding there.
+  @media (prefers-reduced-motion: reduce) {
+    :is(.data-grid-drop-indicator, .data-grid-drag-preview, .data-grid-drag-ghost-settle) {
+      transition: none;
+    }
+  }
+
+  // The line is 2px across its short axis and spans the grid along the other;
+  // JS sets the spanning size, the axis class sets the thickness.
+  .data-grid-drop-indicator-x {
+    width: .125rem;
+  }
+
+  .data-grid-drop-indicator-y {
+    height: .125rem;
+  }
+
+  // Cell selection: a tinted fill on every selected cell, plus an outline
+  // drawn only on the sides that sit on the selection's boundary — so a
+  // rectangle reads as one region instead of a grid of boxes. The outline is
+  // an overlay rather than a border: a border on a table cell would shift the
+  // whole row's layout the moment a range is selected.
+  .data-grid-cell-selected {
+    position: relative;
+    background-color: var(--#{$prefix}data-grid-cell-selected-bg);
+  }
+
+  .data-grid-cell-selected::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    border: 0 solid var(--#{$prefix}data-grid-cell-selected-border-color);
+  }
+
+  .data-grid-cell-selected-top::after {
+    border-top-width: var(--#{$prefix}data-grid-cell-selected-border-width);
+  }
+
+  .data-grid-cell-selected-right::after {
+    border-right-width: var(--#{$prefix}data-grid-cell-selected-border-width);
+  }
+
+  .data-grid-cell-selected-bottom::after {
+    border-bottom-width: var(--#{$prefix}data-grid-cell-selected-border-width);
+  }
+
+  .data-grid-cell-selected-left::after {
+    border-left-width: var(--#{$prefix}data-grid-cell-selected-border-width);
+  }
+
+  // The reorder column: as narrow as the grip, and the grip itself is the only
+  // thing that starts a row drag (a row is full of interactive content that a
+  // whole-row handle would swallow).
+  .data-grid-row-handle-cell {
+    width: var(--#{$prefix}data-grid-row-handle-width);
+    padding-inline: 0;
+    text-align: center;
+  }
+
+  .data-grid-row-handle {
+    display: inline-flex;
+    color: $data-grid-resizer-grip-color-hover;
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .data-grid-select-cell {
+    width: var(--#{$prefix}data-grid-select-cell-width);
+    text-align: center;
+  }
+
+  .data-grid-sort-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--#{$prefix}data-grid-sorter-margin);
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    user-select: none;
+    background: none;
+    border: 0;
+  }
+
+  .data-grid-sort-icon {
+    display: inline-flex;
+    font-size: .875em;
+    opacity: 0;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  // The active sort direction is always visible; the neutral (unsorted) icon is
+  // hidden unless `sorterVisibility` opts it in (steadily via "always", or on
+  // header hover/focus via "hover").
+  .data-grid-sortable[aria-sort] .data-grid-sort-icon {
+    opacity: 1;
+  }
+
+  &[data-coreui-sorter-visibility="always"] .data-grid-sortable:not([aria-sort]) .data-grid-sort-icon {
+    opacity: var(--#{$prefix}data-grid-sorter-opacity);
+  }
+
+  &[data-coreui-sorter-visibility="hover"] .data-grid-sortable:not([aria-sort]):hover .data-grid-sort-icon,
+  &[data-coreui-sorter-visibility="hover"] .data-grid-sortable:not([aria-sort]):focus-within .data-grid-sort-icon {
+    opacity: var(--#{$prefix}data-grid-sorter-opacity);
+  }
+
+  .data-grid-viewport > .table {
+    margin-bottom: 0;
+    table-layout: fixed;
+  }
+
+  // Body cells render on a single line and truncate with an ellipsis instead of
+  // spilling their content across the fixed-layout column boundary onto the next
+  // column. Matches the default of AG Grid / MUI X Data Grid and TanStack's
+  // virtualized-table guidance, and keeps every row a uniform height for the
+  // fixed-height virtualizer (wrapping would desync `estimateSize`). Pinned cells
+  // are excluded so their shadow pseudo-element (painted outside the box via a
+  // translate) isn't clipped; the select cell holds only a checkbox.
+  //
+  // Auto row height is the deliberate exception: there the virtualizer measures
+  // each row, so cells are free to wrap. Scoping the rule out is what keeps the
+  // two modes from fighting over specificity.
+  &:not(.data-grid-auto-row-height) .data-grid-viewport > .table > tbody > tr:not(.data-grid-empty) > td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Widths applied to each header cell drive the column layout; letting the
+  // table grow to its content (min-width keeps it filling a wide viewport)
+  // turns a resize or a pin into horizontal scroll rather than squeezing
+  // neighbours. Both features share this layout mode.
+  &.data-grid-resizable,
+  &.data-grid-pinned {
+    .data-grid-viewport {
+      overflow-x: auto;
+    }
+
+    .table {
+      width: max-content;
+      min-width: 100%;
+    }
+  }
+
+  // A pinned th is already sticky (a positioned containing block for the
+  // resizer), so only non-pinned header cells need explicit relative here.
+  &.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {
+    position: relative;
+  }
+
+  &.data-grid-pinned .table {
+    // position: sticky is unreliable on collapsed-border tables; the grid opts
+    // into separate borders so pinned cells stay put on horizontal scroll.
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  .data-grid-cell-pinned-start,
+  .data-grid-cell-pinned-end {
+    position: sticky;
+    z-index: 1;
+    background-color: var(--#{$prefix}data-grid-pinned-bg);
+  }
+
+  .data-grid-header .data-grid-cell-pinned-start,
+  .data-grid-header .data-grid-cell-pinned-end {
+    z-index: 3;
+  }
+
+  // Edge cells cast a shadow over the scrolling content. A pseudo-element is
+  // used because the cell's own box-shadow carries the table striping accent.
+  .data-grid-cell-pinned-start-last,
+  .data-grid-cell-pinned-end-first {
+    position: sticky;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: var(--#{$prefix}data-grid-pinned-border-width);
+      pointer-events: none;
+      content: "";
+    }
+  }
+
+  .data-grid-cell-pinned-start-last::after {
+    inset-inline-end: 0;
+    background: var(--#{$prefix}data-grid-pinned-border-color);
+  }
+
+  .data-grid-cell-pinned-end-first::after {
+    inset-inline-start: 0;
+    background: var(--#{$prefix}data-grid-pinned-border-color);
+  }
+
+  .data-grid-resizer {
+    position: absolute;
+    top: 0;
+    inset-inline-end: calc(-.5 * var(--#{$prefix}data-grid-resizer-width));
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--#{$prefix}data-grid-resizer-width);
+    height: 100%;
+    cursor: col-resize;
+    touch-action: none;
+    user-select: none;
+
+    // Always-visible grip so the resizable edge is discoverable, not just a
+    // bare hover target.
+    &::after {
+      width: 2px;
+      height: var(--#{$prefix}data-grid-resizer-grip-height);
+      content: "";
+      background-color: var(--#{$prefix}data-grid-resizer-grip-color);
+      transition: background-color .15s ease;
+    }
+
+    &:hover::after,
+    &.data-grid-resizer-active::after {
+      background-color: var(--#{$prefix}data-grid-resizer-grip-color-hover);
+    }
+  }
+
+  .data-grid-spacer > td {
+    padding: 0;
+    border: 0;
+  }
+
+  // Spacer rows break `nth-of-type` striping, so striping inside the grid is
+  // driven by the absolute row index (.data-grid-row-odd) instead.
+  .data-grid-viewport > .table-striped > tbody > tr:nth-of-type(odd) > * {
+    --#{$prefix}table-color-type: initial;
+    --#{$prefix}table-bg-type: initial;
+  }
+
+  .data-grid-viewport > .table-striped > tbody > tr.data-grid-row-odd > * {
+    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+  }
+
+  // The last row closes on the viewport edge (or the pagination border), so it
+  // doesn't need its own separator line.
+  .data-grid-viewport > .table > tbody > tr:last-child > * {
+    border-bottom-width: 0;
+  }
+
+  .data-grid-loading {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--#{$prefix}data-grid-loading-bg);
+  }
+
+  // Infinite scroll's "next page arriving" strip. Sticky, not an overlay: the
+  // rows already loaded stay readable while the grid appends to them.
+  .data-grid-loading-more {
+    position: sticky;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 3;
+    display: flex;
+    justify-content: center;
+    padding: var(--#{$prefix}data-grid-spacing);
+    background-color: var(--#{$prefix}data-grid-loading-bg);
+  }
+
+  // Shared icon-button tooltip. position: fixed (set in JS) so it escapes the
+  // viewport overflow; theme-inverted like CoreUI's own tooltip.
+  .data-grid-tooltip {
+    position: fixed;
+    z-index: $data-grid-tooltip-z-index;
+    max-width: 12rem;
+    padding: $data-grid-gap-sm .5rem;
+    font-size: .875rem;
+    line-height: 1.4;
+    color: var(--#{$prefix}body-bg, #fff);
+    text-align: center;
+    pointer-events: none;
+    background-color: var(--#{$prefix}emphasis-color, #000);
+    border-radius: $data-grid-border-radius;
+  }
+
+  .data-grid-empty > td {
+    padding: 2rem 1rem;
+    color: $data-grid-muted-color;
+    text-align: center;
+  }
+
+  .data-grid-pagination {
+    display: flex;
+    // Wrap the page controls, count and page-size select onto multiple rows on
+    // narrow viewports; without this the fixed row overflows and scrolls the page
+    // instead of staying inside the grid.
+    flex-wrap: wrap;
+    gap: var(--#{$prefix}data-grid-spacing);
+    align-items: center;
+    min-height: $data-grid-bar-min-height;
+    padding: var(--#{$prefix}data-grid-spacing);
+    border-top: $data-grid-border-width solid $data-grid-border-color;
+
+    &.data-grid-pagination-top {
+      border-top: 0;
+      border-bottom: $data-grid-border-width solid $data-grid-border-color;
+    }
+
+    .pagination {
+      margin-bottom: 0;
+    }
+
+    .data-grid-pagination-info {
+      margin-inline-start: auto;
+      color: $data-grid-muted-color;
+    }
+
+    .form-select {
+      width: auto;
+    }
+  }
+}
+
+// Print: the grid renders a plain, complete table into the document (see
+// util/print.ts) and hides everything else, so a virtualized grid prints all
+// its rows instead of the twenty in the window.
+@media print {
+  .data-grid-print-root {
+    position: absolute;
+    inset: 0 0 auto;
+    z-index: 2000;
+    background-color: #fff;
+
+    h1 {
+      margin-bottom: 1rem;
+      font-size: 1.25rem;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    :is(th, td) {
+      padding: $data-grid-gap-sm .5rem;
+      text-align: start;
+      border: 1px solid #000;
+    }
+
+    thead {
+      display: table-header-group;
+    }
+
+    tr {
+      break-inside: avoid;
+    }
+  }
+
+  // :has() is inside the browser floor (.browserslistrc), and scoping to the
+  // body's own children keeps the clone's ancestors from being hidden.
+  body:has(.data-grid-print-root) > :not(.data-grid-print-root) {
+    display: none !important;
+  }
+}