@x12i/data 0.0.0-stage → 1.1.0

package/dist/styles.css

@@ -0,0 +1,1169 @@
+/*
+ * @x12i/data styles.
+ *
+ * Tokens only: no hard-coded colors, lengths or font sizes (a test enforces
+ * this). Requires the kit variables, for example:
+ *
+ *   @import "@x12i/themes/themes.css";
+ *   @import "@x12i/ui/styles.css";
+ *   @import "@x12i/data/styles.css";
+ *
+ * Every selector sits inside :where(), so it has zero specificity and any app
+ * class overrides it without a specificity fight. The grid exposes styling
+ * hooks as data attributes: data-kit="data-grid-*" for parts and data-* for
+ * state (data-selected, data-sorted, data-pinned, data-editing, ...).
+ * Layout uses logical properties, so right-to-left works without extra CSS.
+ *
+ * Row height follows the density: it is the --kit-grid-row-height token, which
+ * the grid also reads at runtime to size its virtual rows. Set data-density on
+ * the grid, or wrap it in a DensityProvider, to change it.
+ */
+
+/* ------------------------------------------------------------------ Frame */
+
+:where([data-kit="data-grid"]) {
+  /* Resolved here, not on :root, so a density set on the grid itself applies. */
+  --kit-grid-row-height: var(--kit-size-control-lg);
+  --_row-height: var(--kit-grid-row-height);
+  --_cell-pad: var(--kit-space-control-inline-md);
+  --_indent: var(--kit-space-4);
+  --_surface: var(--kit-color-bg-surface);
+  --_header-bg: color-mix(in srgb, var(--kit-color-text-primary) 4%, var(--kit-color-bg-surface));
+  --_hover-bg: color-mix(in srgb, var(--kit-color-text-primary) 4%, var(--kit-color-bg-surface));
+  --_group-bg: color-mix(in srgb, var(--kit-color-text-primary) 6%, var(--kit-color-bg-surface));
+  --_selected-bg: color-mix(in srgb, var(--kit-color-selection) 16%, var(--kit-color-bg-surface));
+  --_focus-ring: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  overflow: hidden;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--_surface);
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  font-weight: var(--kit-text-body-weight);
+  line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit="data-grid"] *, [data-kit="data-grid-popover"] *) {
+  box-sizing: border-box;
+}
+
+:where([data-kit="data-grid-viewport"]) {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-block-size: 0;
+}
+
+:where([data-kit="data-grid-scroller"]) {
+  position: relative;
+  flex: 1 1 auto;
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block-start: var(--_row-height);
+}
+
+/* The three groups are as wide as the columns, so pinned cells can stick. */
+:where([data-kit="data-grid-header-group"], [data-kit="data-grid-footer-group"]) {
+  position: sticky;
+  z-index: var(--kit-z-sticky);
+  inline-size: max-content;
+  min-inline-size: 100%;
+  background-color: var(--_header-bg);
+}
+
+/* The separators are shadows, not borders, so the header is exactly row-height tall per row. */
+:where([data-kit="data-grid-header-group"]) {
+  inset-block-start: 0;
+  box-shadow: 0 var(--kit-border-width-default) 0 0 var(--kit-color-border-default);
+}
+
+:where([data-kit="data-grid-footer-group"]) {
+  inset-block-end: 0;
+  box-shadow: 0 calc(var(--kit-border-width-default) * -1) 0 0 var(--kit-color-border-default);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="data-grid-body"]) {
+  position: relative;
+  min-inline-size: 100%;
+}
+
+/* ------------------------------------------------------------------- Rows */
+
+:where([data-kit="data-grid-header"], [data-kit="data-grid-group-header"], [data-kit="data-grid-footer"]) {
+  display: flex;
+  align-items: stretch;
+  block-size: var(--_row-height);
+  --_row-bg: var(--_header-bg);
+}
+
+:where([data-kit="data-grid-group-header"]) {
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+}
+
+:where([data-kit="data-grid-row"]) {
+  --_row-bg: var(--_surface);
+
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  display: flex;
+  align-items: stretch;
+  background-color: var(--_row-bg);
+}
+
+:where([data-kit="data-grid-row"][data-kind="data"]:hover) {
+  --_row-bg: var(--_hover-bg);
+}
+
+:where([data-kit="data-grid-row"][data-selected]) {
+  --_row-bg: var(--_selected-bg);
+}
+
+:where([data-kit="data-grid-row"][data-selected]:hover) {
+  --_row-bg: color-mix(in srgb, var(--kit-color-selection) 22%, var(--kit-color-bg-surface));
+}
+
+:where([data-kit="data-grid-row"][data-kind="group"]) {
+  --_row-bg: var(--_group-bg);
+
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="data-grid-row"][data-kind="detail"]) {
+  display: block;
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+}
+
+:where([data-kit="data-grid-spacer"]) {
+  flex: none;
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+}
+
+:where([data-kit="data-grid-header"] > [data-kit="data-grid-spacer"], [data-kit="data-grid-footer"] > [data-kit="data-grid-spacer"]) {
+  border-block-end: 0;
+}
+
+/* ------------------------------------------------------------------ Cells */
+
+:where([data-kit="data-grid-cell"], [data-kit="data-grid-header-cell"], [data-kit="data-grid-group-header-cell"]) {
+  position: relative;
+  flex: none;
+  display: flex;
+  align-items: center;
+  min-inline-size: 0;
+  padding-inline: var(--_cell-pad);
+  overflow: hidden;
+  white-space: nowrap;
+  background-color: var(--_cell-bg, transparent);
+}
+
+:where([data-kit="data-grid-cell"]) {
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+}
+
+:where([data-kit="data-grid-footer"] > [data-kit="data-grid-cell"]) {
+  border-block-end: 0;
+}
+
+/* Pinned cells stay put while the rest scrolls, so they need their own background. */
+:where([data-pinned="start"], [data-pinned="end"]) {
+  position: sticky;
+  z-index: calc(var(--kit-z-base) + 1);
+  --_cell-bg: var(--_row-bg);
+}
+
+:where([data-pinned="start"][data-pinned-edge]) {
+  border-inline-end: var(--kit-border-width-default) solid var(--kit-color-border-default);
+}
+
+:where([data-pinned="end"][data-pinned-edge]) {
+  border-inline-start: var(--kit-border-width-default) solid var(--kit-color-border-default);
+}
+
+:where([data-kit="data-grid-cell"][data-type="select"], [data-kit="data-grid-header-cell"][data-type="select"], [data-kit="data-grid-cell"][data-type="expand"], [data-kit="data-grid-header-cell"][data-type="expand"]) {
+  justify-content: center;
+  padding-inline: 0;
+}
+
+:where([data-align="center"]) {
+  justify-content: center;
+  text-align: center;
+}
+
+:where([data-align="end"]) {
+  justify-content: flex-end;
+  text-align: end;
+}
+
+:where([data-kit="data-grid-cell"][data-type="number"], [data-kit="data-grid-cell"][data-type="currency"], [data-kit="data-grid-cell"][data-type="percent"], [data-kit="data-grid-cell"][data-type="total"]) {
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit-slot="cell-content"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where([data-align="center"] > [data-kit-slot="cell-content"]) {
+  justify-content: center;
+}
+
+:where([data-align="end"] > [data-kit-slot="cell-content"]) {
+  justify-content: flex-end;
+}
+
+:where([data-kit="data-grid-text"]) {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Rows below a group, and group rows themselves, indent by depth. */
+:where([data-kit="data-grid-cell"][data-first]) {
+  padding-inline-start: calc(var(--_cell-pad) + var(--_depth, 0) * var(--_indent));
+}
+
+:where([data-kit="data-grid-row"][data-kind="group"] [data-kit="data-grid-cell"][data-first]) {
+  padding-inline-start: calc(var(--_cell-pad) / 2 + var(--_depth, 0) * var(--_indent));
+}
+
+:where([data-kit="data-grid-row"][data-kind="group"] [data-kit-slot="aggregate"]) {
+  color: var(--kit-color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Focus: one ring for every navigable cell, drawn inside so it is never clipped. */
+:where([data-kit="data-grid-cell"], [data-kit="data-grid-header-cell"]):focus-visible {
+  outline: var(--_focus-ring);
+  outline-offset: calc(var(--kit-border-width-focus) * -1);
+}
+
+/* ---------------------------------------------------------- Header cells */
+
+:where([data-kit="data-grid-header-cell"]) {
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--kit-text-label-line-height);
+  user-select: none;
+}
+
+:where([data-kit="data-grid-group-header-cell"]) {
+  justify-content: center;
+  border-inline-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  font-weight: var(--kit-font-weight-semibold);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="data-grid-group-header-cell"][data-blank]) {
+  padding-inline: 0;
+}
+
+:where([data-kit="data-grid-header-content"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+:where([data-align="end"] > [data-kit="data-grid-header-content"]) {
+  justify-content: flex-end;
+}
+
+:where([data-align="center"] > [data-kit="data-grid-header-content"]) {
+  justify-content: center;
+}
+
+:where([data-kit-slot="header-label"]) {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:where([data-kit="data-grid-header-content"] > [data-kit-slot="header-label"]) {
+  flex: 0 1 auto;
+}
+
+/* The sort control is a real button, so it works with a mouse, touch and a screen reader. */
+:where([data-kit="data-grid-sort"], [data-kit="data-grid-group-toggle"], [data-kit="data-grid-menu-item"]) {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--kit-radius-control);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  appearance: none;
+}
+
+:where([data-kit="data-grid-sort"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  flex: 0 1 auto;
+  min-inline-size: 0;
+  min-block-size: var(--kit-size-target-min);
+  padding-inline: var(--kit-space-1);
+  margin-inline: calc(var(--kit-space-1) * -1);
+}
+
+:where([data-kit="data-grid-sort"]:hover) {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+}
+
+:where([data-kit="data-grid-sort"], [data-kit="data-grid-group-toggle"], [data-kit="data-grid-menu-item"]):focus-visible {
+  outline: var(--_focus-ring);
+  outline-offset: calc(var(--kit-border-width-focus) * -1);
+}
+
+:where([data-kit-slot="sort-icon"]) {
+  display: inline-flex;
+  flex: none;
+  opacity: 0;
+  transition: opacity var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+:where([data-kit="data-grid-sort"]:hover [data-kit-slot="sort-icon"]) {
+  opacity: 0.5;
+}
+
+:where([data-kit="data-grid-header-cell"][data-sorted] [data-kit-slot="sort-icon"]) {
+  opacity: 1;
+}
+
+:where([data-kit-slot="sort-rank"]) {
+  flex: none;
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit-slot="filter-trigger"], [data-kit-slot="menu-trigger"]) {
+  flex: none;
+}
+
+/* ---------------------------------------------------------- Column resize */
+
+:where([data-kit="data-grid-resizer"]) {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: var(--kit-space-2);
+  cursor: col-resize;
+  touch-action: none;
+}
+
+:where([data-kit="data-grid-resizer"])::after {
+  content: "";
+  position: absolute;
+  inset-block: var(--kit-space-1);
+  inset-inline-end: 0;
+  inline-size: var(--kit-border-width-default);
+  background-color: var(--kit-color-border-default);
+  transition: background-color var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+:where([data-kit="data-grid-resizer"]:hover, [data-kit="data-grid-resizer"][data-active])::after {
+  inline-size: var(--kit-border-width-emphasis);
+  background-color: var(--kit-color-border-focus);
+}
+
+:where([data-kit="data-grid-resizer"]):focus-visible {
+  outline: var(--_focus-ring);
+  outline-offset: calc(var(--kit-border-width-focus) * -1);
+}
+
+/* ------------------------------------------------------ Column drag reorder */
+
+:where([data-kit="data-grid-header-cell"][draggable="true"]) {
+  cursor: grab;
+}
+
+:where([data-kit="data-grid-header-cell"][data-dragging]) {
+  opacity: 0.5;
+}
+
+/* A bar on the side the dragged column would land on. It follows the reading direction. */
+:where([data-kit="data-grid-header-cell"][data-drop])::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inline-size: var(--kit-border-width-emphasis);
+  background-color: var(--kit-color-accent-default);
+  z-index: var(--kit-z-sticky);
+}
+
+:where([data-kit="data-grid-header-cell"][data-drop="before"])::before {
+  inset-inline-start: 0;
+}
+
+:where([data-kit="data-grid-header-cell"][data-drop="after"])::before {
+  inset-inline-end: 0;
+}
+
+/* ------------------------------------------------------------- Cell types */
+
+:where([data-kit="data-grid-boolean"]) {
+  display: inline-flex;
+  align-items: center;
+}
+
+:where([data-kit="data-grid-boolean"][data-value="true"]) {
+  color: var(--kit-color-chart-good);
+}
+
+:where([data-kit="data-grid-boolean"][data-value="false"]) {
+  color: var(--kit-color-text-tertiary);
+}
+
+:where([data-kit="data-grid-link"]) {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--kit-color-text-link);
+  text-decoration: underline;
+  text-overflow: ellipsis;
+  text-underline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="data-grid-link"]:hover) {
+  text-decoration-thickness: var(--kit-border-width-emphasis);
+}
+
+:where([data-kit="data-grid-link"]):focus-visible {
+  outline: var(--_focus-ring);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="data-grid-tags"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+:where([data-kit="data-grid-progress"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+:where([data-kit="data-grid-progress-track"]) {
+  flex: 1 1 auto;
+  min-inline-size: var(--kit-size-24);
+  block-size: var(--kit-space-2);
+  overflow: hidden;
+  border-radius: var(--kit-radius-pill);
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 12%, transparent);
+}
+
+:where([data-kit="data-grid-progress-fill"]) {
+  display: block;
+  block-size: 100%;
+  border-radius: inherit;
+  background-color: var(--kit-color-accent-default);
+}
+
+:where([data-kit="data-grid-progress-text"]) {
+  flex: none;
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit="data-grid-avatar-cell"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  min-inline-size: 0;
+}
+
+:where([data-kit="data-grid-avatar"]) {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--kit-size-24);
+  block-size: var(--kit-size-24);
+  border-radius: var(--kit-radius-full);
+  background-color: var(--kit-color-accent-subtle);
+  color: var(--kit-color-text-primary);
+  font-size: var(--kit-text-caption-size);
+  font-weight: var(--kit-font-weight-semibold);
+  line-height: 1;
+}
+
+:where([data-kit="data-grid-sparkline"]) {
+  inline-size: 100%;
+  block-size: var(--kit-size-20);
+  overflow: visible;
+}
+
+:where([data-kit="data-grid-sparkline"] polyline) {
+  stroke: var(--kit-color-accent-default);
+  stroke-width: var(--kit-border-width-emphasis);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+/* Group toggle and row expander: the chevron mirrors in right-to-left. */
+:where([data-kit="data-grid-group-toggle"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  min-block-size: var(--kit-size-target-min);
+  min-inline-size: 0;
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit-slot="group-label"]) {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:where([data-flip]) {
+  display: inline-flex;
+}
+
+:where([data-flip]):dir(rtl) {
+  transform: scaleX(-1);
+}
+
+/* ------------------------------------------------------- Detail and totals */
+
+:where([data-kit="data-grid-detail"]) {
+  display: block;
+  inline-size: 100%;
+}
+
+:where([data-kit-slot="detail-content"]) {
+  position: sticky;
+  inset-inline-start: 0;
+  padding-block: var(--kit-space-3);
+  padding-inline: var(--kit-space-4);
+  background-color: var(--_surface);
+  white-space: normal;
+}
+
+/* ----------------------------------------------------------------- Editing */
+
+:where([data-kit="data-grid-cell"][data-editable]) {
+  cursor: cell;
+}
+
+:where([data-kit="data-grid-cell"][data-editing]) {
+  padding-inline: 0;
+  overflow: visible;
+  --_cell-bg: var(--_surface);
+}
+
+:where([data-kit="data-grid-cell"][data-editing] > :is([data-kit="data-grid-input"], [data-kit="data-grid-select"])) {
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: 0;
+}
+
+:where([data-kit="data-grid-edit-error"]) {
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline-start: 0;
+  z-index: var(--kit-z-dropdown);
+  max-inline-size: 100%;
+  padding-block: var(--kit-space-1);
+  padding-inline: var(--kit-space-2);
+  border: var(--kit-border-width-default) solid var(--kit-color-status-danger-border);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-status-danger-background);
+  color: var(--kit-color-status-danger-foreground);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+  white-space: normal;
+  box-shadow: var(--kit-shadow-raised);
+}
+
+/* An edit that has been made but not yet confirmed shows a corner dot. */
+:where([data-kit="data-grid-cell"][data-dirty])::after {
+  content: "";
+  position: absolute;
+  inset-block-start: var(--kit-space-0-5);
+  inset-inline-start: var(--kit-space-0-5);
+  inline-size: var(--kit-space-1);
+  block-size: var(--kit-space-1);
+  border-radius: var(--kit-radius-full);
+  background-color: var(--kit-color-status-info-border);
+}
+
+:where([data-kit="data-grid-cell"][data-pending]) {
+  opacity: 0.6;
+}
+
+:where([data-kit="data-grid-cell"][data-error]) {
+  --_cell-bg: var(--kit-color-status-danger-background);
+
+  box-shadow: inset 0 0 0 var(--kit-border-width-default) var(--kit-color-status-danger-border);
+}
+
+/* ------------------------------------------------------------ Loading rows */
+
+:where([data-kit="data-grid-skeleton"]) {
+  display: block;
+  inline-size: 60%;
+  block-size: var(--kit-space-3);
+  border-radius: var(--kit-radius-pill);
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 10%, transparent);
+  animation: data-grid-pulse var(--kit-duration-slow) var(--kit-easing-standard) infinite alternate;
+}
+
+/* A block that failed to load: the bar stops pulsing, since nothing is coming. */
+:where([data-kit="data-grid-row"][data-failed] [data-kit="data-grid-skeleton"]) {
+  background-color: color-mix(in srgb, var(--kit-color-status-danger-border) 45%, transparent);
+  animation: none;
+}
+
+@keyframes data-grid-pulse {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0.45;
+  }
+}
+
+/* Rows kept while fresh data loads stay readable but look provisional. */
+:where([data-kit="data-grid"][data-stale] [data-kit="data-grid-body"]) {
+  opacity: 0.6;
+  transition: opacity var(--kit-duration-fast) var(--kit-easing-standard);
+}
+
+:where([data-kit="data-grid-progressbar"]) {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: var(--kit-z-overlay);
+  block-size: var(--kit-space-0-5);
+  overflow: hidden;
+  background-color: color-mix(in srgb, var(--kit-color-accent-default) 20%, transparent);
+  pointer-events: none;
+}
+
+:where([data-kit="data-grid-progressbar"])::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inline-size: 40%;
+  background-color: var(--kit-color-accent-default);
+  animation: data-grid-progress var(--kit-duration-slow) var(--kit-easing-standard) infinite alternate;
+}
+
+@keyframes data-grid-progress {
+  from {
+    inset-inline-start: 0;
+  }
+
+  to {
+    inset-inline-start: 60%;
+  }
+}
+
+/* ---------------------------------------------------------------- Overlays */
+
+:where([data-kit="data-grid-overlay"]) {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: var(--kit-z-sticky);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--kit-space-4);
+  pointer-events: none;
+}
+
+:where([data-kit="data-grid-overlay"] > *) {
+  pointer-events: auto;
+}
+
+:where([data-kit="data-grid-overlay"][data-state="loading"]) {
+  background-color: color-mix(in srgb, var(--_surface) 70%, transparent);
+}
+
+:where([data-kit="data-grid-overlay"][data-state="error"][data-placement="banner"]) {
+  inset-block-start: auto;
+  justify-content: stretch;
+  padding: var(--kit-space-2);
+}
+
+:where([data-kit="data-grid-loading"], [data-kit="data-grid-empty"], [data-kit="data-grid-error"]) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--kit-space-3);
+  padding: var(--kit-space-4);
+  color: var(--kit-color-text-secondary);
+  text-align: center;
+}
+
+:where([data-kit="data-grid-error"]) {
+  border: var(--kit-border-width-default) solid var(--kit-color-status-danger-border);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--kit-color-status-danger-background);
+  color: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="data-grid-overlay"][data-placement="banner"] [data-kit="data-grid-error"]) {
+  flex: 1 1 auto;
+  flex-direction: row;
+  justify-content: space-between;
+  box-shadow: var(--kit-shadow-raised);
+  text-align: start;
+}
+
+/* ------------------------------------------------------------- Form fields */
+
+:where([data-kit="data-grid-input"], [data-kit="data-grid-select"]) {
+  min-inline-size: 0;
+  min-block-size: var(--kit-size-control-sm);
+  padding-block: 0;
+  padding-inline: var(--kit-space-2);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-bg-surface);
+  color: var(--kit-color-text-primary);
+  font-family: inherit;
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit="data-grid-input"]:hover, [data-kit="data-grid-select"]:hover) {
+  border-color: var(--kit-color-border-strong);
+}
+
+:where([data-kit="data-grid-input"], [data-kit="data-grid-select"]):focus-visible {
+  outline: var(--_focus-ring);
+  outline-offset: calc(var(--kit-border-width-focus) * -1);
+}
+
+:where([data-kit="data-grid-input"][aria-invalid="true"], [data-kit="data-grid-select"][aria-invalid="true"]) {
+  border-color: var(--kit-color-status-danger-border);
+}
+
+:where([data-kit="data-grid-input"])::placeholder {
+  color: var(--kit-color-text-tertiary);
+}
+
+:where([data-kit="data-grid-input"])::-webkit-search-cancel-button {
+  appearance: none;
+}
+
+:where([data-kit="data-grid-checkbox"]) {
+  flex: none;
+  inline-size: var(--kit-size-icon-md);
+  block-size: var(--kit-size-icon-md);
+  /* Margin brings the hit area to the minimum target size. */
+  margin: var(--kit-space-0-5);
+  accent-color: var(--kit-color-accent-default);
+  cursor: pointer;
+}
+
+:where([data-kit="data-grid-checkbox"]):focus-visible {
+  outline: var(--_focus-ring);
+  outline-offset: var(--kit-space-0-5);
+}
+
+/* ----------------------------------------------------------------- Toolbar */
+
+:where([data-kit="data-grid-toolbar"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kit-space-2);
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+}
+
+:where([data-kit-slot="search"]) {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-inline-size: calc(var(--kit-size-56) * 3);
+  max-inline-size: calc(var(--kit-size-56) * 6);
+}
+
+:where([data-kit-slot="search"] > [data-kit="data-grid-input"]) {
+  flex: 1 1 auto;
+  min-block-size: var(--kit-size-control-md);
+  padding-inline-start: calc(var(--kit-space-2) + var(--kit-size-icon-sm) + var(--kit-space-2));
+  padding-inline-end: calc(var(--kit-size-control-xs) + var(--kit-space-1));
+}
+
+:where([data-kit-slot="search-icon"]) {
+  position: absolute;
+  inset-inline-start: var(--kit-space-2);
+  display: inline-flex;
+  color: var(--kit-color-text-tertiary);
+  pointer-events: none;
+}
+
+:where([data-kit-slot="search"] > [data-kit="button"], [data-kit-slot="search"] > button) {
+  position: absolute;
+  inset-inline-end: var(--kit-space-0-5);
+}
+
+:where([data-kit-slot="selection"], [data-kit-slot="toolbar-start"], [data-kit-slot="toolbar-end"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+}
+
+:where([data-kit-slot="selection-count"]) {
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-text-label-weight);
+}
+
+:where([data-kit-slot="toolbar-actions"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kit-space-2);
+  margin-inline-start: auto;
+}
+
+/* ------------------------------------------------------------ Filter chips */
+
+:where([data-kit="data-grid-chips"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kit-space-2);
+  margin: 0;
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  list-style: none;
+}
+
+:where([data-kit="data-grid-chip"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  min-block-size: var(--kit-size-control-xs);
+  padding-inline: var(--kit-space-2) var(--kit-space-0-5);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-pill);
+  background-color: var(--kit-color-accent-subtle);
+  color: var(--kit-color-text-primary);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit="data-grid-chip"][data-kind="group"]) {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 6%, transparent);
+}
+
+/* -------------------------------------------------------------- Pagination */
+
+:where([data-kit="data-grid-pagination"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kit-space-3);
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  border-block-start: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit-slot="page-size"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+}
+
+:where([data-kit-slot="range"]) {
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit-slot="buttons"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  margin-inline-start: auto;
+}
+
+:where([data-kit-slot="status"]) {
+  padding-inline: var(--kit-space-2);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ------------------------------------------------- Popover, menu, filter UI */
+
+:where([data-kit="data-grid-popover"]) {
+  position: fixed;
+  inset: auto;
+  z-index: var(--kit-z-dropdown);
+  inline-size: max-content;
+  min-inline-size: calc(var(--kit-size-56) * 3);
+  max-inline-size: 100%;
+  margin: 0;
+  padding: var(--kit-space-3);
+  overflow: auto;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-overlay);
+  background-color: var(--kit-color-bg-overlay);
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+  box-shadow: var(--kit-shadow-overlay);
+}
+
+:where([data-kit="data-grid-popover"][data-role="menu"]) {
+  padding: var(--kit-space-1);
+}
+
+:where([data-kit="data-grid-popover"]):focus-visible {
+  outline: var(--_focus-ring);
+}
+
+:where([data-kit="data-grid-menu"]) {
+  display: flex;
+  flex-direction: column;
+}
+
+:where([data-kit="data-grid-menu-entry"][data-separator]) {
+  margin-block-start: var(--kit-space-1);
+  padding-block-start: var(--kit-space-1);
+  border-block-start: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+}
+
+:where([data-kit="data-grid-menu-item"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  inline-size: 100%;
+  min-block-size: var(--kit-size-control-md);
+  padding-inline: var(--kit-space-2);
+  white-space: nowrap;
+}
+
+:where([data-kit="data-grid-menu-item"]:hover:not([aria-disabled="true"])) {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+}
+
+:where([data-kit="data-grid-menu-item"][aria-disabled="true"]) {
+  color: var(--kit-color-text-disabled);
+  cursor: not-allowed;
+}
+
+:where([data-kit="data-grid-menu-item"][data-danger]) {
+  color: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit-slot="menu-check"]) {
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--kit-size-icon-sm);
+  block-size: var(--kit-size-icon-sm);
+}
+
+:where([data-kit-slot="menu-label"]) {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:where([data-kit="data-grid-filter"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-3);
+  min-inline-size: calc(var(--kit-size-56) * 4);
+}
+
+:where([data-kit="data-grid-field"]) {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--kit-space-1);
+}
+
+:where([data-kit-slot="field-label"]) {
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="data-grid-range"]) {
+  display: flex;
+  gap: var(--kit-space-2);
+}
+
+:where([data-kit="data-grid-choices"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-1);
+  max-block-size: calc(var(--kit-size-56) * 3);
+  overflow: auto;
+}
+
+:where([data-kit="data-grid-choice"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  min-block-size: var(--kit-size-target-min);
+  cursor: pointer;
+}
+
+:where([data-kit="data-grid-hint"]) {
+  color: var(--kit-color-text-tertiary);
+  font-size: var(--kit-text-caption-size);
+}
+
+:where([data-kit="data-grid-filter-actions"]) {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--kit-space-2);
+}
+
+/* --------------------------------------------------------- Reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit="data-grid"] *, [data-kit="data-grid-popover"] *) {
+    transition: none;
+  }
+
+  :where([data-kit="data-grid-skeleton"]) {
+    animation: none;
+  }
+
+  /* A still bar says "busy" just as well as a moving one. */
+  :where([data-kit="data-grid-progressbar"])::after {
+    inline-size: 100%;
+    animation: none;
+    opacity: 0.6;
+  }
+}
+
+/* ----------------------------------------------------------- Forced colors */
+
+@media (forced-colors: active) {
+  :where([data-kit="data-grid"]) {
+    border-color: CanvasText;
+    --_surface: Canvas;
+    --_header-bg: Canvas;
+    --_hover-bg: Canvas;
+    --_group-bg: Canvas;
+    --_selected-bg: Highlight;
+    --_focus-ring: var(--kit-border-width-focus) solid Highlight;
+  }
+
+  /* Shadows are dropped in forced colors, so the separators become borders. */
+  :where([data-kit="data-grid-header-group"]) {
+    border-block-end: var(--kit-border-width-default) solid CanvasText;
+  }
+
+  :where([data-kit="data-grid-footer-group"]) {
+    border-block-start: var(--kit-border-width-default) solid CanvasText;
+  }
+
+  :where([data-kit="data-grid-cell"], [data-kit="data-grid-spacer"], [data-kit="data-grid-group-header"], [data-kit="data-grid-toolbar"], [data-kit="data-grid-chips"], [data-kit="data-grid-pagination"]) {
+    border-color: GrayText;
+  }
+
+  :where([data-pinned][data-pinned-edge]) {
+    border-color: CanvasText;
+  }
+
+  :where([data-kit="data-grid-row"][data-selected]) {
+    color: HighlightText;
+  }
+
+  :where([data-kit="data-grid-row"][data-selected] [data-kit="data-grid-link"]) {
+    color: HighlightText;
+  }
+
+  :where([data-kit="data-grid-row"][data-selected]:hover) {
+    --_row-bg: Highlight;
+  }
+
+  :where([data-kit="data-grid-cell"][data-error]) {
+    --_cell-bg: Canvas;
+
+    box-shadow: inset 0 0 0 var(--kit-border-width-emphasis) Mark;
+  }
+
+  :where([data-kit="data-grid-cell"][data-dirty])::after {
+    background-color: CanvasText;
+  }
+
+  :where([data-kit="data-grid-skeleton"]) {
+    background-color: GrayText;
+  }
+
+  :where([data-kit="data-grid-progress-track"]) {
+    border: var(--kit-border-width-default) solid CanvasText;
+    background-color: Canvas;
+  }
+
+  :where([data-kit="data-grid-progress-fill"]) {
+    background-color: Highlight;
+  }
+
+  :where([data-kit="data-grid-progressbar"])::after {
+    background-color: Highlight;
+  }
+
+  :where([data-kit="data-grid-resizer"])::after {
+    background-color: CanvasText;
+  }
+
+  :where([data-kit="data-grid-header-cell"][data-drop])::before {
+    background-color: Highlight;
+  }
+
+  :where([data-kit="data-grid-sparkline"] polyline) {
+    stroke: CanvasText;
+  }
+
+  :where([data-kit="data-grid-popover"], [data-kit="data-grid-error"], [data-kit="data-grid-chip"], [data-kit="data-grid-edit-error"]) {
+    border-color: CanvasText;
+    box-shadow: none;
+  }
+
+  :where([data-kit="data-grid-menu-item"]:hover:not([aria-disabled="true"])) {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+
+  :where([data-kit="data-grid-menu-item"][aria-disabled="true"]) {
+    color: GrayText;
+  }
+}