@nuvui/table 0.0.0-stage → 0.1.0

package/dist/components/table/table.d.ts

@@ -0,0 +1,100 @@
+import { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
+//#region src/components/table/table.d.ts
+export type TableContainerProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * The box a table scrolls in. A table wider than the box scrolls sideways
+ * inside it and leaves the page alone.
+ *
+ * While there's something to scroll, the box takes keyboard focus, so the
+ * arrow keys can scroll it. Give it `aria-label` or `aria-labelledby` and
+ * it's a region with that name for screen readers.
+ */
+export declare const TableContainer: import("react").ForwardRefExoticComponent<TableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface TableOwnProps {
+  /**
+   * Shade every second row of the body.
+   * @default false
+   */
+  striped?: boolean;
+  /**
+   * Keep the header row in view while the body scrolls under it. It sticks
+   * to the top of the nearest thing that scrolls: a `TableContainer` with a
+   * height, or the page.
+   * @default false
+   */
+  stickyHeader?: boolean;
+  /**
+   * `"auto"` sizes each column to what's in it. `"fixed"` takes each
+   * column's width from its first row or its `col`, and is what a table
+   * with set column widths needs.
+   * @default "auto"
+   */
+  layout?: "auto" | "fixed";
+}
+export interface TableProps extends TableOwnProps, TableHTMLAttributes<HTMLTableElement> {}
+export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
+export interface TableCaptionOwnProps {
+  /**
+   * Keep the caption for screen readers and show nothing. For a table whose
+   * heading is already on the page above it.
+   * @default false
+   */
+  visuallyHidden?: boolean;
+}
+export interface TableCaptionProps extends TableCaptionOwnProps, HTMLAttributes<HTMLTableCaptionElement> {}
+/** The table's name. A screen reader reads it when it reaches the table. */
+export declare const TableCaption: import("react").ForwardRefExoticComponent<TableCaptionProps & import("react").RefAttributes<HTMLTableCaptionElement>>;
+export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+export declare const TableHeader: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+export declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
+export declare const TableFooter: import("react").ForwardRefExoticComponent<TableFooterProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export interface TableRowOwnProps {
+  /**
+   * Mark the row as picked. It gets the selected background and
+   * `data-state="selected"`.
+   * @default false
+   */
+  selected?: boolean;
+}
+export interface TableRowProps extends TableRowOwnProps, HTMLAttributes<HTMLTableRowElement> {}
+export declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+export interface TableCellOwnProps {
+  /**
+   * Which side the content sits on. `"end"` is for numbers, so their digits
+   * line up.
+   * @default "start"
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Keep the cell in view while the table scrolls sideways. Do it for every
+   * cell of the column, the header's too. With one pinned column a side
+   * that's all there is to it. With more, each one after the first needs an
+   * `inset-inline-start` or `inset-inline-end` of its own.
+   */
+  pinned?: "start" | "end";
+  /**
+   * Draw the line that separates pinned columns from the ones that scroll.
+   * For the last column pinned to the start and the first pinned to the end.
+   * @default false
+   */
+  pinnedEdge?: boolean;
+}
+export interface TableHeadProps extends TableCellOwnProps, Omit<ThHTMLAttributes<HTMLTableCellElement>, "align"> {}
+/**
+ * A column's heading. It's a `th` with `scope="col"`, which is what ties
+ * every cell below it to its heading for a screen reader.
+ */
+export declare const TableHead: import("react").ForwardRefExoticComponent<TableHeadProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export interface TableCellProps extends TableCellOwnProps, Omit<TdHTMLAttributes<HTMLTableCellElement>, "align"> {
+  /**
+   * Make this cell the heading of its row: a `th` with `scope="row"`. Do it
+   * for the cell that names the row, such as a person's name, and a screen
+   * reader reads it with every other cell in the row.
+   * @default false
+   */
+  rowHeader?: boolean;
+}
+export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+//#endregion

package/dist/components/table/table.js

@@ -0,0 +1,130 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table.tsx
+/**
+* The box a table scrolls in. A table wider than the box scrolls sideways
+* inside it and leaves the page alone.
+*
+* While there's something to scroll, the box takes keyboard focus, so the
+* arrow keys can scroll it. Give it `aria-label` or `aria-labelledby` and
+* it's a region with that name for screen readers.
+*/
+const TableContainer = forwardRef(function TableContainer({ className, tabIndex, role, ...props }, ref) {
+	const element = useRef(null);
+	const [scrollable, setScrollable] = useState(false);
+	const setRef = useCallback((node) => {
+		element.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	useEffect(() => {
+		const node = element.current;
+		if (!node || typeof ResizeObserver === "undefined") return;
+		const measure = () => setScrollable(node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight);
+		const observer = new ResizeObserver(measure);
+		observer.observe(node);
+		for (const child of node.children) observer.observe(child);
+		measure();
+		return () => observer.disconnect();
+	}, []);
+	const named = props["aria-label"] || props["aria-labelledby"];
+	return /* @__PURE__ */ jsx("div", {
+		ref: setRef,
+		className: cx("nuv-table-container", className),
+		tabIndex: tabIndex ?? (scrollable ? 0 : void 0),
+		role: role ?? (scrollable && named ? "region" : void 0),
+		"data-scrollable": scrollable ? "" : void 0,
+		...props
+	});
+});
+const StripedContext = createContext(false);
+const Table = forwardRef(function Table({ striped = false, stickyHeader = false, layout = "auto", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(StripedContext.Provider, {
+		value: striped,
+		children: /* @__PURE__ */ jsx("table", {
+			ref,
+			className: cx("nuv-table", stickyHeader && "nuv-table--sticky-header", layout === "fixed" && "nuv-table--fixed", className),
+			...props
+		})
+	});
+});
+/** The table's name. A screen reader reads it when it reaches the table. */
+const TableCaption = forwardRef(function TableCaption({ visuallyHidden = false, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("caption", {
+		ref,
+		className: cx("nuv-table__caption", visuallyHidden && "nuv-table__caption--hidden", className),
+		...props
+	});
+});
+const TableHeader = forwardRef(function TableHeader({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("thead", {
+		ref,
+		className: cx("nuv-table__header", className),
+		...props
+	});
+});
+const TableBody = forwardRef(function TableBody({ className, ...props }, ref) {
+	const striped = useContext(StripedContext);
+	return /* @__PURE__ */ jsx("tbody", {
+		ref,
+		className: cx("nuv-table__body", striped && "nuv-table__body--striped", className),
+		...props
+	});
+});
+const TableFooter = forwardRef(function TableFooter({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		ref,
+		className: cx("nuv-table__footer", className),
+		...props
+	});
+});
+const TableRow = forwardRef(function TableRow({ selected = false, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		className: cx("nuv-table__row", className),
+		"data-state": selected ? "selected" : void 0,
+		...props
+	});
+});
+const cellClasses = (block, { align, pinned, pinnedEdge }) => [
+	align && align !== "start" && `${block}--align-${align}`,
+	pinned && `${block}--pinned-${pinned}`,
+	pinned && pinnedEdge && `${block}--pinned-edge`
+];
+/**
+* A column's heading. It's a `th` with `scope="col"`, which is what ties
+* every cell below it to its heading for a screen reader.
+*/
+const TableHead = forwardRef(function TableHead({ align, pinned, pinnedEdge, scope = "col", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("th", {
+		ref,
+		scope,
+		className: cx("nuv-table__head", ...cellClasses("nuv-table__head", {
+			align,
+			pinned,
+			pinnedEdge
+		}), className),
+		...props
+	});
+});
+const TableCell = forwardRef(function TableCell({ align, pinned, pinnedEdge, rowHeader = false, className, ...props }, ref) {
+	const classes = cx("nuv-table__cell", rowHeader && "nuv-table__cell--row-header", ...cellClasses("nuv-table__cell", {
+		align,
+		pinned,
+		pinnedEdge
+	}), className);
+	return rowHeader ? /* @__PURE__ */ jsx("th", {
+		ref,
+		scope: "row",
+		className: classes,
+		...props
+	}) : /* @__PURE__ */ jsx("td", {
+		ref,
+		className: classes,
+		...props
+	});
+});
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow };

package/dist/css/data-table.css

@@ -0,0 +1,278 @@
+@layer tokens, base, components;
+@layer components {
+  .nuv-data-table {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuv-data-table-gap, calc(var(--spacing) * 3));
+    min-inline-size: 0;
+    color: var(--nuv-data-table-fg, var(--color-foreground));
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+  }
+  .nuv-data-table__status {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .nuv-data-table__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+  }
+  .nuv-data-table__toolbar-gap {
+    flex: 1 1 0;
+  }
+  .nuv-data-table__filter {
+    flex: 1 1 100%;
+  }
+  @media (width >= 40rem) {
+    .nuv-data-table__filter {
+      flex: 0 1 var(--nuv-data-table-filter-width, 16rem);
+    }
+  }
+  .nuv-data-table__column-filter {
+    inline-size: 100%;
+    min-inline-size: var(--nuv-data-table-column-filter-min-width, 6rem);
+  }
+  .nuv-data-table__bulk {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+    border: var(--nuv-border-width) solid var(--nuv-data-table-bulk-border, var(--color-border));
+    border-radius: var(--nuv-data-table-bulk-radius, var(--radius-lg));
+    background-color: var(--nuv-data-table-bulk-bg, var(--color-muted));
+  }
+  .nuv-data-table__bulk[hidden] {
+    display: none;
+  }
+  .nuv-data-table__bulk-count {
+    font-weight: var(--font-weight-medium);
+  }
+  .nuv-data-table__bulk-actions {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+  }
+  .nuv-data-table__heading {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .nuv-data-table__sort {
+    display: inline-flex;
+    max-inline-size: 100%;
+    gap: calc(var(--spacing) * 1);
+    align-items: center;
+    min-block-size: var(--nuv-touch-size);
+    margin-block: calc(var(--spacing) * -1);
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .nuv-data-table__sort:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, 2px);
+  }
+  @media (pointer: fine) {
+    .nuv-data-table__sort {
+      min-block-size: var(--nuv-control-height-sm);
+    }
+  }
+  @media (hover: hover) {
+    .nuv-data-table__sort:hover {
+      color: var(--nuv-data-table-sort-hover-fg, var(--color-foreground));
+    }
+  }
+  .nuv-data-table__sort[data-sorted] {
+    color: var(--nuv-data-table-sorted-fg, var(--color-foreground));
+  }
+  .nuv-data-table__sort-icon {
+    flex: none;
+    opacity: 0.6;
+  }
+  .nuv-data-table__sort-icon[data-direction] {
+    opacity: 1;
+  }
+  .nuv-data-table__sort-index {
+    font-size: var(--text-xs);
+  }
+  .nuv-data-table__head--resizable {
+    position: relative;
+  }
+  .nuv-data-table__resize {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: calc(var(--spacing) * 4);
+    cursor: col-resize;
+    touch-action: none;
+    user-select: none;
+  }
+  .nuv-data-table__resize:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, -2px);
+  }
+  @media (pointer: fine) {
+    .nuv-data-table__resize {
+      inline-size: calc(var(--spacing) * 2);
+    }
+  }
+  .nuv-data-table__resize::after {
+    position: absolute;
+    inset-block: 25%;
+    inset-inline-end: 0;
+    inline-size: 2px;
+    background-color: var(--nuv-data-table-resize-color, var(--color-border-strong));
+    content: "";
+  }
+  .nuv-data-table__resize[data-resizing]::after {
+    inset-block: 0;
+    background-color: var(--nuv-data-table-resize-active-color, var(--color-primary));
+  }
+  @media (hover: hover) {
+    .nuv-data-table__resize:hover::after {
+      inset-block: 0;
+      background-color: var(--nuv-data-table-resize-active-color, var(--color-primary));
+    }
+  }
+  .nuv-data-table__cell--control {
+    inline-size: 1%;
+    white-space: nowrap;
+  }
+  .nuv-data-table__expand,
+  .nuv-data-table__expand-gap {
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--nuv-data-table-expand-size, 1.5rem);
+    block-size: var(--nuv-data-table-expand-size, 1.5rem);
+    margin-inline-start: calc(var(--nuv-data-table-indent, 1.25rem) * var(--nuv-data-table-depth, 0));
+    vertical-align: middle;
+  }
+  .nuv-data-table__expand {
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: none;
+    color: var(--nuv-data-table-expand-fg, var(--color-muted-foreground));
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .nuv-data-table__expand::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    inline-size: max(100%, var(--nuv-touch-size, 2.75rem));
+    block-size: max(100%, var(--nuv-touch-size, 2.75rem));
+    transform: translate(-50%, -50%);
+    content: "";
+  }
+  @media (pointer: fine) {
+    .nuv-data-table__expand::after {
+      content: none;
+    }
+  }
+  .nuv-data-table__expand:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, 2px);
+  }
+  @media (hover: hover) {
+    .nuv-data-table__expand:hover {
+      color: var(--color-foreground);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .nuv-data-table__expand-icon {
+      transition: transform var(--nuv-duration-fast) var(--ease-out);
+    }
+  }
+  .nuv-data-table__expand-icon:dir(rtl) {
+    transform: scaleX(-1);
+  }
+  .nuv-data-table__expand[aria-expanded=true] > .nuv-data-table__expand-icon {
+    transform: rotate(90deg);
+  }
+  .nuv-data-table__detail-row {
+    --nuv-table-row-bg: var(--nuv-data-table-detail-bg, var(--color-background));
+    --nuv-table-row-hover-bg: var(--nuv-data-table-detail-bg, var(--color-background));
+  }
+  .nuv-data-table__message-row,
+  .nuv-data-table__loading-row {
+    --nuv-table-row-hover-bg: var(--nuv-table-bg, var(--color-surface));
+  }
+  .nuv-data-table__detail {
+    --nuv-table-cell-padding-x: var(--nuv-data-table-detail-padding, calc(var(--spacing) * 4));
+    --nuv-table-cell-padding-y: var(--nuv-data-table-detail-padding, calc(var(--spacing) * 4));
+  }
+  .nuv-data-table__message {
+    --nuv-table-cell-padding-y: var(--nuv-data-table-message-padding, calc(var(--spacing) * 10));
+    color: var(--nuv-data-table-message-fg, var(--color-muted-foreground));
+    text-align: center;
+  }
+  .nuv-data-table__message > * + * {
+    margin-inline-start: calc(var(--spacing) * 3);
+  }
+  .nuv-data-table__pagination {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
+    align-items: center;
+    justify-content: space-between;
+    color: var(--nuv-data-table-pagination-fg, var(--color-muted-foreground));
+  }
+  @media (width >= 40rem) {
+    .nuv-data-table__pagination {
+      justify-content: flex-end;
+    }
+  }
+  .nuv-data-table__page-size {
+    display: flex;
+    white-space: nowrap;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+  }
+  .nuv-data-table__page-range,
+  .nuv-data-table__page {
+    white-space: nowrap;
+  }
+  .nuv-data-table__pages {
+    display: flex;
+    flex: 1 1 100%;
+    gap: calc(var(--spacing) * 1);
+    align-items: center;
+    justify-content: space-between;
+  }
+  @media (width >= 40rem) {
+    .nuv-data-table__pages {
+      flex: none;
+      justify-content: flex-start;
+    }
+  }
+  .nuv-data-table__page-button {
+    --nuv-button-padding-inline: 0;
+  }
+  .nuv-data-table__page-button[aria-disabled=true] {
+    opacity: var(--nuv-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .nuv-data-table__page-icon:dir(rtl) {
+    transform: scaleX(-1);
+  }
+}

package/dist/css/table.css

@@ -0,0 +1,164 @@
+@layer tokens, base, components;
+@layer components {
+  .nuv-table-container {
+    position: relative;
+    max-inline-size: 100%;
+    max-block-size: var(--nuv-table-container-max-height, none);
+    overflow: auto;
+    border: var(--nuv-table-container-border-width, var(--nuv-border-width)) solid var(--nuv-table-border, var(--color-border));
+    border-radius: var(--nuv-table-container-radius, var(--radius-lg));
+    background-color: var(--nuv-table-bg, var(--color-surface));
+  }
+  .nuv-table-container:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, -2px);
+  }
+  .nuv-table {
+    inline-size: 100%;
+    border-spacing: 0;
+    border-collapse: separate;
+    color: var(--nuv-table-fg, var(--color-surface-foreground));
+    font-size: var(--nuv-table-font-size, var(--text-sm));
+    line-height: var(--text-sm--line-height);
+    font-variant-numeric: tabular-nums;
+    text-align: start;
+  }
+  .nuv-table--fixed {
+    table-layout: fixed;
+  }
+  .nuv-table--fixed .nuv-table__head {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .nuv-table--fixed .nuv-table__cell {
+    overflow-wrap: anywhere;
+  }
+  .nuv-table__caption {
+    padding: var(--nuv-table-cell-padding-y, calc(var(--spacing) * 1.5)) var(--nuv-table-cell-padding-x, calc(var(--spacing) * 3));
+    color: var(--nuv-table-caption-fg, var(--color-muted-foreground));
+    text-align: start;
+    caption-side: var(--nuv-table-caption-side, bottom);
+  }
+  .nuv-table__caption--hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .nuv-table__row {
+    background-color: var(--nuv-table-row-bg, var(--nuv-table-bg, var(--color-surface)));
+  }
+  .nuv-table__head,
+  .nuv-table__cell {
+    block-size: var(--nuv-table-row-height, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-table__head,
+    .nuv-table__cell {
+      block-size: var(--nuv-table-row-height, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-table__head,
+  .nuv-table__cell {
+    padding: var(--nuv-table-cell-padding-y, calc(var(--spacing) * 1.5)) var(--nuv-table-cell-padding-x, calc(var(--spacing) * 3));
+    border-block-end: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+    background-color: inherit;
+    vertical-align: middle;
+  }
+  .nuv-table__head {
+    background-color: var(--nuv-table-header-bg, var(--color-muted));
+    color: var(--nuv-table-header-fg, var(--color-muted-foreground));
+    font-weight: var(--font-weight-medium);
+    text-align: start;
+    white-space: nowrap;
+  }
+  .nuv-table__cell--row-header {
+    font-weight: var(--font-weight-medium);
+    text-align: start;
+  }
+  .nuv-table__head--align-center {
+    text-align: center;
+  }
+  .nuv-table__head--align-end {
+    text-align: end;
+  }
+  .nuv-table__cell--align-center {
+    text-align: center;
+  }
+  .nuv-table__cell--align-end {
+    text-align: end;
+  }
+  .nuv-table__head--pinned-start,
+  .nuv-table__head--pinned-end {
+    position: sticky;
+    z-index: 1;
+  }
+  .nuv-table__head--pinned-start {
+    inset-inline-start: 0;
+  }
+  .nuv-table__head--pinned-end {
+    inset-inline-end: 0;
+  }
+  .nuv-table__head--pinned-start.nuv-table__head--pinned-edge {
+    border-inline-end: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+  }
+  .nuv-table__head--pinned-end.nuv-table__head--pinned-edge {
+    border-inline-start: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+  }
+  .nuv-table__cell--pinned-start,
+  .nuv-table__cell--pinned-end {
+    position: sticky;
+    z-index: 1;
+  }
+  .nuv-table__cell--pinned-start {
+    inset-inline-start: 0;
+  }
+  .nuv-table__cell--pinned-end {
+    inset-inline-end: 0;
+  }
+  .nuv-table__cell--pinned-start.nuv-table__cell--pinned-edge {
+    border-inline-end: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+  }
+  .nuv-table__cell--pinned-end.nuv-table__cell--pinned-edge {
+    border-inline-start: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+  }
+  .nuv-table__row:last-child > .nuv-table__cell {
+    border-block-end-width: var(--nuv-table-last-row-border-width, 0);
+  }
+  .nuv-table__footer > .nuv-table__row {
+    background-color: var(--nuv-table-footer-bg, var(--color-muted));
+    font-weight: var(--font-weight-medium);
+  }
+  .nuv-table__footer .nuv-table__cell {
+    border-block-start: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+  }
+  .nuv-table__body--striped > .nuv-table__row:nth-child(even) {
+    background-color: var(--nuv-table-stripe-bg, var(--color-muted));
+  }
+  @media (hover: hover) {
+    .nuv-table__body > .nuv-table__row:hover {
+      background-color: var(--nuv-table-row-hover-bg, var(--color-muted));
+    }
+  }
+  .nuv-table__body > .nuv-table__row[data-state=selected] {
+    background-color: var(--nuv-table-row-selected-bg, color-mix(in oklab, var(--color-primary) 12%, var(--color-surface)));
+  }
+  .nuv-table--sticky-header .nuv-table__head {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 2;
+  }
+  .nuv-table--sticky-header .nuv-table__head--pinned-start,
+  .nuv-table--sticky-header .nuv-table__head--pinned-end {
+    z-index: 3;
+  }
+  @media (forced-colors: active) {
+    .nuv-table__row[data-state=selected] > :first-child {
+      border-inline-start: calc(var(--spacing) * 1) solid Highlight;
+    }
+  }
+}