@coreui/data-grid 0.2.0-rc.0 → 0.4.0

package/scss/data-grid.scss

@@ -1,747 +1,11 @@
 /*!
- * CoreUI PRO data-grid.scss v0.2.0
+ * CoreUI PRO data-grid.scss v0.4.0
  * License (https://coreui.io/pro/license/)
  */
 
-.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;
-
-  // Component tokens. Everything resolves through CoreUI semantic variables,
-  // so light/dark theming via [data-coreui-theme] works with no extra rules.
-  --cui-data-grid-viewport-max-height: 30rem;
-  --cui-data-grid-header-bg: var(--cui-body-bg, #fff);
-  --cui-data-grid-header-shadow: inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6);
-  --cui-data-grid-cell-selected-bg: rgba(var(--cui-primary-rgb, 50, 31, 219), .12);
-  --cui-data-grid-cell-selected-border-color: var(--cui-primary, #321fdb);
-  --cui-data-grid-cell-selected-border-width: 1px;
-  --cui-data-grid-row-handle-width: 2rem;
-  --cui-data-grid-select-cell-width: 2.5rem;
-  --cui-data-grid-sorter-margin: .25rem;
-  --cui-data-grid-sorter-opacity: .3;
-  --cui-data-grid-spacing: .5rem;
-  --cui-data-grid-resizer-width: .625rem;
-  --cui-data-grid-resizer-grip-height: 60%;
-  --cui-data-grid-resizer-grip-color: var(--cui-border-color, #dee2e6);
-  --cui-data-grid-resizer-grip-color-hover: var(--cui-secondary-color, #6c757d);
-  --cui-data-grid-pinned-border-width: var(--cui-border-width);
-  --cui-data-grid-pinned-border-color: var(--cui-border-color, #dee2e6);
-  --cui-data-grid-drop-indicator: var(--cui-primary, #321fdb);
-  --cui-data-grid-drag-transition: .15s ease;
-  --cui-data-grid-menu-bg: var(--cui-body-bg, #fff);
-  --cui-data-grid-menu-border-color: var(--cui-border-color, #dee2e6);
-  --cui-data-grid-menu-shadow: var(--cui-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));
-  --cui-data-grid-menu-min-width: 10rem;
-  --cui-data-grid-menu-item-hover-bg: var(--cui-tertiary-bg, #f8f9fa);
-  --cui-data-grid-loading-bg: rgba(var(--cui-body-bg-rgb, 255, 255, 255), .6);
-  --cui-data-grid-pinned-bg: var(--cui-body-bg, #fff);
-  --cui-data-grid-focus-ring-width: 2px;
-  --cui-data-grid-focus-ring-color: var(--cui-primary, #321fdb);
-
-  .data-grid-toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--cui-data-grid-spacing);
-    align-items: center;
-    min-height: 48px;
-    padding: var(--cui-data-grid-spacing);
-    border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);
-  }
-
-  .data-grid-toolbar-actions {
-    display: flex;
-    gap: .25rem;
-    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(--cui-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: .25rem;
-    background-color: var(--cui-data-grid-menu-bg);
-    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
-    border-radius: var(--cui-border-radius, .375rem);
-    box-shadow: var(--cui-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(--cui-data-grid-focus-ring-width) solid var(--cui-data-grid-focus-ring-color);
-    outline-offset: calc(-1 * var(--cui-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(--cui-data-grid-header-bg);
-    box-shadow: var(--cui-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: 48px;
-    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: .25rem;
-  }
-
-  .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 {
-    --cui-btn-padding-x: var(--cui-btn-padding-y);
-    --cui-btn-line-height: 1;
-  }
-
-  .data-grid-menu-button {
-    margin-inline-start: auto;
-  }
-
-  .data-grid-menu {
-    position: absolute;
-    z-index: 4;
-    min-width: var(--cui-data-grid-menu-min-width);
-    padding: .25rem 0;
-    background-color: var(--cui-data-grid-menu-bg);
-    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
-    border-radius: var(--cui-border-radius, .375rem);
-    box-shadow: var(--cui-data-grid-menu-shadow);
-  }
-
-  .data-grid-menu-item {
-    display: flex;
-    align-items: center;
-    gap: .5rem;
-    width: 100%;
-    padding: .25rem .75rem;
-    font: inherit;
-    color: inherit;
-    text-align: start;
-    cursor: pointer;
-    background: none;
-    border: 0;
-
-    &:hover,
-    &:focus-visible {
-      background-color: var(--cui-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: var(--cui-secondary-color, #6c757d);
-      cursor: default;
-      background: none;
-    }
-  }
-
-  .data-grid-filter-menu {
-    position: absolute;
-    z-index: 4;
-    display: flex;
-    flex-direction: column;
-    gap: .5rem;
-    min-width: var(--cui-data-grid-menu-min-width);
-    max-width: 18rem;
-    padding: .75rem;
-    background-color: var(--cui-data-grid-menu-bg);
-    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
-    border-radius: var(--cui-border-radius, .375rem);
-    box-shadow: var(--cui-data-grid-menu-shadow);
-
-    > div {
-      display: flex;
-      flex-direction: column;
-      gap: .5rem;
-    }
-  }
-
-  .data-grid-filter-menu-condition {
-    display: flex;
-    flex-direction: column;
-    gap: .25rem;
-  }
-
-  .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: .25rem;
-    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(--cui-data-grid-menu-min-width);
-    max-width: 18rem;
-    max-height: 20rem;
-    padding: .75rem;
-    overflow-y: auto;
-    background-color: var(--cui-data-grid-menu-bg);
-    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
-    border-radius: var(--cui-border-radius, .375rem);
-    box-shadow: var(--cui-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: .25rem;
-    margin-top: .25rem;
-    border-top: var(--cui-border-width, 1px) solid var(--cui-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(--cui-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: var(--cui-border-width, 1px);
-    margin: .25rem 0;
-    background-color: var(--cui-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: 1080;
-    display: flex;
-    align-items: center;
-    max-width: 16rem;
-    padding: 0 var(--cui-data-grid-cell-padding-x, .5rem);
-    overflow: hidden;
-    font-weight: 600;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    pointer-events: none;
-    background-color: var(--cui-data-grid-pinned-bg);
-    border: var(--cui-border-width, 1px) solid var(--cui-data-grid-drop-indicator);
-    border-radius: var(--cui-border-radius, .375rem);
-    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(--cui-data-grid-drag-transition), opacity var(--cui-data-grid-drag-transition);
-  }
-
-  .data-grid-drop-indicator {
-    position: fixed;
-    z-index: 1080;
-    pointer-events: none;
-    background-color: var(--cui-data-grid-drop-indicator);
-    transition: top var(--cui-data-grid-drag-transition), left var(--cui-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(--cui-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(--cui-data-grid-cell-selected-bg);
-  }
-
-  .data-grid-cell-selected::after {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    content: "";
-    border: 0 solid var(--cui-data-grid-cell-selected-border-color);
-  }
-
-  .data-grid-cell-selected-top::after {
-    border-top-width: var(--cui-data-grid-cell-selected-border-width);
-  }
-
-  .data-grid-cell-selected-right::after {
-    border-right-width: var(--cui-data-grid-cell-selected-border-width);
-  }
-
-  .data-grid-cell-selected-bottom::after {
-    border-bottom-width: var(--cui-data-grid-cell-selected-border-width);
-  }
-
-  .data-grid-cell-selected-left::after {
-    border-left-width: var(--cui-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(--cui-data-grid-row-handle-width);
-    padding-inline: 0;
-    text-align: center;
-  }
-
-  .data-grid-row-handle {
-    display: inline-flex;
-    color: var(--cui-data-grid-resizer-grip-color-hover);
-    cursor: grab;
-    touch-action: none;
-  }
-
-  .data-grid-select-cell {
-    width: var(--cui-data-grid-select-cell-width);
-    text-align: center;
-  }
-
-  .data-grid-sort-button {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cui-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(--cui-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(--cui-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(--cui-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(--cui-data-grid-pinned-border-width);
-      pointer-events: none;
-      content: "";
-    }
-  }
-
-  .data-grid-cell-pinned-start-last::after {
-    inset-inline-end: 0;
-    background: var(--cui-data-grid-pinned-border-color);
-  }
-
-  .data-grid-cell-pinned-end-first::after {
-    inset-inline-start: 0;
-    background: var(--cui-data-grid-pinned-border-color);
-  }
-
-  .data-grid-resizer {
-    position: absolute;
-    top: 0;
-    right: calc(-.5 * var(--cui-data-grid-resizer-width));
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--cui-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(--cui-data-grid-resizer-grip-height);
-      content: "";
-      background-color: var(--cui-data-grid-resizer-grip-color);
-      transition: background-color .15s ease;
-    }
-
-    &:hover::after,
-    &.data-grid-resizer-active::after {
-      background-color: var(--cui-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) > * {
-    --cui-table-color-type: initial;
-    --cui-table-bg-type: initial;
-  }
-
-  .data-grid-viewport > .table-striped > tbody > tr.data-grid-row-odd > * {
-    --cui-table-color-type: var(--cui-table-striped-color);
-    --cui-table-bg-type: var(--cui-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(--cui-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(--cui-data-grid-spacing);
-    background-color: var(--cui-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: 1080;
-    max-width: 12rem;
-    padding: .25rem .5rem;
-    font-size: .875rem;
-    line-height: 1.4;
-    color: var(--cui-body-bg, #fff);
-    text-align: center;
-    pointer-events: none;
-    background-color: var(--cui-emphasis-color, #000);
-    border-radius: var(--cui-border-radius, .375rem);
-  }
-
-  .data-grid-empty > td {
-    padding: 2rem 1rem;
-    color: var(--cui-secondary-color, #6c757d);
-    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(--cui-data-grid-spacing);
-    align-items: center;
-    min-height: 48px;
-    padding: var(--cui-data-grid-spacing);
-    border-top: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);
-
-    &.data-grid-pagination-top {
-      border-top: 0;
-      border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);
-    }
-
-    .pagination {
-      margin-bottom: 0;
-    }
-
-    .data-grid-pagination-info {
-      margin-inline-start: auto;
-      color: var(--cui-secondary-color, #6c757d);
-    }
-
-    .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: .25rem .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;
-  }
-}
+// scss-docs-start import-stack
+@forward "config";
+@forward "functions";
+@forward "mixins";
+@forward "components/data-grid";
+// scss-docs-end import-stack