@svelte-lean/table 0.1.0

package/dist/style.css

@@ -0,0 +1,806 @@
+/*
+ * @svelte-lean/table. Layer `slean.components`, selectors in :where(): unlayered application CSS
+ * wins without !important (only print uses it, against inline styles). `--slean-table-*` tokens
+ * read `--slean-*` from @svelte-lean/styles and fall back to the same defaults, light-dark() by the
+ * page's color-scheme. Rows and cells are reached through child combinators and controls through
+ * the table's own classes, so nested tables and primitives in cells keep their own look.
+ */
+@layer slean.reset, slean.tokens, slean.base, slean.components, slean.compositions, slean.utilities;
+
+/* Native checkbox fallback, one layer below `@svelte-lean/styles/checkbox.css`, which wins when loaded. */
+@layer slean.base {
+	:where(.slean-table-check) {
+		inline-size: 1rem;
+		block-size: 1rem;
+		margin: 0;
+		accent-color: var(--slean-table-accent);
+		vertical-align: middle;
+		cursor: pointer;
+	}
+}
+
+@layer slean.components {
+	:where(.slean-table) {
+		--slean-table-bg: var(--slean-surface, light-dark(#fff, oklch(19.5% 0.009 260)));
+		--slean-table-fg: var(--slean-fg, light-dark(oklch(20.5% 0.012 260), oklch(95% 0.005 260)));
+		--slean-table-muted: var(
+			--slean-fg-muted,
+			light-dark(oklch(44.6% 0.014 260), oklch(74% 0.012 260))
+		);
+		--slean-table-border: var(
+			--slean-border,
+			light-dark(oklch(87.2% 0.007 260), oklch(33.5% 0.013 260))
+		);
+		--slean-table-soft: var(
+			--slean-muted,
+			light-dark(oklch(95.8% 0.004 260), oklch(26% 0.011 260))
+		);
+		--slean-table-accent: var(--slean-accent, light-dark(oklch(54% 0.19 258), oklch(56% 0.18 258)));
+		--slean-table-selected: var(
+			--slean-accent-soft,
+			light-dark(oklch(95% 0.03 258), oklch(28% 0.07 258))
+		);
+		--slean-table-danger: var(--slean-danger, light-dark(oklch(55% 0.2 25), oklch(58% 0.19 25)));
+		--slean-table-focus: var(--slean-focus-ring-color, var(--slean-table-accent));
+		--slean-table-shadow: var(
+			--slean-shadow-lg,
+			0 16px 40px oklch(0% 0 0 / 0.18),
+			0 2px 6px oklch(0% 0 0 / 0.08)
+		);
+		--slean-table-radius: var(--slean-radius-lg, 0.875rem);
+		--slean-table-control-radius: var(--slean-radius-sm, 0.375rem);
+		--slean-table-control-height: var(--slean-control-height-sm, 2rem);
+		--slean-table-font: var(--slean-font-sans, system-ui, sans-serif);
+		--slean-table-font-size: var(--slean-text-sm, 0.875rem);
+		--slean-table-duration: var(--slean-duration-fast, 100ms);
+		--slean-table-cell-padding-x: 0.75rem;
+		--slean-table-cell-padding-y: 0.5rem;
+		--slean-table-header-bg: color-mix(
+			in oklab,
+			var(--slean-table-soft) 55%,
+			var(--slean-table-bg)
+		);
+		--slean-table-header-fg: var(--slean-table-muted);
+		--slean-table-header-font-size: 0.8125rem;
+		--slean-table-header-font-weight: 500;
+		--slean-table-header-text-transform: none;
+		--slean-table-header-letter-spacing: normal;
+		--slean-table-row-hover: color-mix(
+			in oklab,
+			var(--slean-table-soft) 60%,
+			var(--slean-table-bg)
+		);
+		--slean-table-row-stripe: color-mix(
+			in oklab,
+			var(--slean-table-soft) 45%,
+			var(--slean-table-bg)
+		);
+		--slean-table-row-selected: var(--slean-table-selected);
+		--slean-table-pin-shadow: light-dark(oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.45));
+		--slean-table-fetching-opacity: 0.55;
+		/* Set per row by hover, stripes, selection or `rowClass`; reset here so it never leaks into a
+		   table nested in a detail row. */
+		--slean-table-row-bg: initial;
+		box-sizing: border-box;
+		color: var(--slean-table-fg);
+		background: var(--slean-table-bg);
+		font-family: var(--slean-table-font);
+		font-size: var(--slean-table-font-size);
+		line-height: 1.43;
+		border: 1px solid var(--slean-table-border);
+		border-radius: var(--slean-table-radius);
+		isolation: isolate;
+	}
+	:where(.slean-table[data-density='compact']) {
+		--slean-table-cell-padding-y: 0.25rem;
+		--slean-table-font-size: 0.8125rem;
+	}
+	:where(.slean-table[data-density='spacious']) {
+		--slean-table-cell-padding-y: 0.875rem;
+	}
+	:where(
+		.slean-table-button,
+		.slean-table-input,
+		.slean-table-sort,
+		.slean-table-resize,
+		.slean-table-column-panel,
+		.slean-table-scroll,
+		.slean-table-scroll > table
+	) {
+		box-sizing: border-box;
+	}
+
+	/* Owned controls: 32px, outline, tokens. */
+	:where(.slean-table-button, .slean-table-columns > summary) {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+		min-block-size: var(--slean-table-control-height);
+		min-inline-size: var(--slean-table-control-height);
+		margin: 0;
+		padding: 0 0.75rem;
+		border: 1px solid var(--slean-table-border);
+		border-radius: var(--slean-table-control-radius);
+		background: var(--slean-table-bg);
+		color: var(--slean-table-fg);
+		font: inherit;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		line-height: 1;
+		white-space: nowrap;
+		cursor: pointer;
+	}
+	:where(.slean-table-button:hover:not(:disabled), .slean-table-columns > summary:hover) {
+		background: var(--slean-table-soft);
+	}
+	:where(.slean-table-button:disabled) {
+		opacity: 0.5;
+		cursor: default;
+	}
+	:where(.slean-table-input) {
+		min-block-size: var(--slean-table-control-height);
+		margin: 0;
+		padding: 0 0.625rem;
+		border: 1px solid
+			var(--slean-control-border, light-dark(oklch(80.8% 0.009 260), oklch(39.5% 0.014 260)));
+		border-radius: var(--slean-table-control-radius);
+		background: var(--slean-table-bg);
+		color: var(--slean-table-fg);
+		font: inherit;
+		font-size: 0.8125rem;
+	}
+	:where(.slean-table-input)::placeholder {
+		color: var(--slean-table-muted);
+		opacity: 1;
+	}
+	:where(.slean-table-input:focus-visible) {
+		border-color: var(--slean-table-focus);
+		outline: 2px solid transparent;
+		box-shadow: var(
+			--slean-control-ring,
+			0 0 0 3px color-mix(in oklab, var(--slean-table-focus) 22%, transparent)
+		);
+	}
+	:where(
+		.slean-table-button,
+		.slean-table-sort,
+		.slean-table-resize,
+		.slean-table-group-toggle,
+		.slean-table-columns > summary,
+		.slean-table-scroll,
+		.slean-table-check
+	):focus-visible {
+		outline: 2px solid var(--slean-table-focus);
+		outline-offset: 2px;
+	}
+	:where(.slean-table-scroll > table > tbody > tr > td[tabindex]):focus-visible,
+	:where(.slean-table-scroll > table > tbody > tr[tabindex]):focus-visible {
+		outline: 2px solid var(--slean-table-focus);
+		outline-offset: -2px;
+	}
+	:where(.slean-table-scroll > table > tbody > tr[data-clickable]) {
+		cursor: pointer;
+	}
+
+	/* Toolbar, title, column controls. */
+	:where(.slean-table-toolbar) {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem;
+		flex-wrap: wrap;
+	}
+	:where(.slean-table-title) {
+		padding: 0.75rem;
+		font-weight: 600;
+		border-bottom: 1px solid var(--slean-table-border);
+	}
+	:where(.slean-table-search) {
+		flex: 1 1 14rem;
+		min-inline-size: 10rem;
+		max-inline-size: 20rem;
+		font-size: 0.875rem;
+	}
+	:where(.slean-table-selected) {
+		font-size: 0.8125rem;
+		color: var(--slean-table-muted);
+	}
+	:where(.slean-table-columns) {
+		position: relative;
+		margin-inline-start: auto;
+	}
+	:where(.slean-table-columns > summary) {
+		list-style: none;
+	}
+	:where(.slean-table-columns > summary)::-webkit-details-marker {
+		display: none;
+	}
+	:where(.slean-table-column-panel) {
+		position: absolute;
+		inset-inline-end: 0;
+		top: calc(100% + 0.375rem);
+		z-index: 20;
+		min-inline-size: 22rem;
+		max-block-size: 25rem;
+		overflow: auto;
+		padding: 0.375rem 0.625rem;
+		background: var(--slean-table-bg);
+		border: 1px solid var(--slean-table-border);
+		border-radius: var(--slean-radius-md, 0.625rem);
+		box-shadow: var(--slean-table-shadow);
+	}
+	:where(.slean-table-column-panel > div) {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.25rem 0;
+	}
+	:where(.slean-table-column-panel label) {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		flex: 1;
+	}
+	:where(.slean-table-column-panel .slean-table-button) {
+		min-inline-size: 1.75rem;
+		min-block-size: 1.75rem;
+		padding: 0;
+		border-color: transparent;
+		background: transparent;
+	}
+	:where(.slean-table-column-panel .slean-table-input) {
+		min-block-size: 1.75rem;
+	}
+
+	/* Scroll region and table. */
+	:where(.slean-table-scroll) {
+		overflow: auto;
+		position: relative;
+		border-block: 1px solid var(--slean-table-border);
+	}
+	/* Nothing above or below the scroll region (no toolbar, no pager): the root's border is the
+	   line, and the region clips its content to the root's rounded corners. */
+	:where(.slean-table > .slean-table-scroll:first-child) {
+		border-top: 0;
+		border-start-start-radius: calc(var(--slean-table-radius) - 1px);
+		border-start-end-radius: calc(var(--slean-table-radius) - 1px);
+	}
+	:where(.slean-table > .slean-table-scroll:last-child) {
+		border-bottom: 0;
+		border-end-start-radius: calc(var(--slean-table-radius) - 1px);
+		border-end-end-radius: calc(var(--slean-table-radius) - 1px);
+	}
+	:where(.slean-table-scroll > table) {
+		border-collapse: separate;
+		border-spacing: 0;
+		table-layout: fixed;
+		/* Not width: 100%: a percentage-width table reports an unbounded max-content size, which
+		   blows up any shrink-to-fit container around it (a nested table, a grid or flex item). */
+		width: max-content;
+		min-width: 100%;
+	}
+	:where(.slean-table-scroll > table > caption) {
+		text-align: start;
+		padding: 0.75rem;
+		color: var(--slean-table-muted);
+	}
+	:where(.slean-table-scroll > table > * > tr > :is(th, td)) {
+		padding: var(--slean-table-cell-padding-y) var(--slean-table-cell-padding-x);
+		border-bottom: 1px solid var(--slean-table-border);
+		background: var(--slean-table-row-bg, var(--slean-table-bg));
+		overflow-wrap: anywhere;
+		vertical-align: middle;
+	}
+	:where(.slean-table-scroll > table > thead > tr > :is(th, td)) {
+		background: var(--slean-table-header-bg);
+		color: var(--slean-table-header-fg);
+		font-size: var(--slean-table-header-font-size);
+		font-weight: var(--slean-table-header-font-weight);
+		text-transform: var(--slean-table-header-text-transform);
+		letter-spacing: var(--slean-table-header-letter-spacing);
+		text-align: start;
+		position: relative;
+	}
+	/* The filter row: data cells inside the head, on the head's surface. */
+	:where(.slean-table-filters > td) {
+		padding-block: 0.375rem;
+		text-transform: none;
+		letter-spacing: normal;
+	}
+	:where(.slean-table-sticky > thead) {
+		position: sticky;
+		top: 0;
+		z-index: 5;
+	}
+	/* Page-sticky header (no `height`, the table fits its width): the region is no scroll container,
+	   so the header sticks to the page, below `--slean-table-sticky-top`. The corner cells take over
+	   the rounding the region no longer clips. */
+	:where(.slean-table-scroll[data-page-sticky]) {
+		overflow: visible;
+	}
+	:where(.slean-table-scroll[data-page-sticky] > .slean-table-sticky > thead) {
+		top: var(--slean-table-sticky-top, 0px);
+	}
+	:where(
+		.slean-table
+			> .slean-table-scroll[data-page-sticky]:first-child
+			> table
+			> thead
+			> tr:first-child
+			> :first-child
+	) {
+		border-start-start-radius: calc(var(--slean-table-radius) - 1px);
+	}
+	:where(
+		.slean-table
+			> .slean-table-scroll[data-page-sticky]:first-child
+			> table
+			> thead
+			> tr:first-child
+			> :last-child
+	) {
+		border-start-end-radius: calc(var(--slean-table-radius) - 1px);
+	}
+	:where(.slean-table-scroll > table > tbody > tr:last-child > td) {
+		border-bottom: 0;
+	}
+	:where(.slean-table-heading) {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		min-height: 1.5rem;
+	}
+	:where(th[data-align='end'] > .slean-table-heading) {
+		justify-content: flex-end;
+	}
+	:where(th[data-align='center'] > .slean-table-heading) {
+		justify-content: center;
+	}
+	:where(.slean-table-sort) {
+		appearance: none;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		min-inline-size: 0;
+		margin: 0 0 0 -0.25rem;
+		padding: 0.125rem 0.25rem;
+		border: 0;
+		border-radius: var(--slean-table-control-radius);
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		text-align: start;
+		text-transform: inherit;
+		letter-spacing: inherit;
+		cursor: pointer;
+	}
+	:where(.slean-table-sort:hover) {
+		color: var(--slean-table-fg);
+	}
+	:where(.slean-table-sort-icon) {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.125rem;
+		font-size: 0.6875rem;
+		font-variant-numeric: tabular-nums;
+		opacity: 0.65;
+	}
+	/* Pointer devices see the icon on hover and focus; touch devices always. Sorted: always. */
+	@media (hover: hover) {
+		:where(.slean-table-sort-icon) {
+			opacity: 0;
+		}
+		:where(th:hover > .slean-table-heading > .slean-table-sort > .slean-table-sort-icon),
+		:where(.slean-table-sort:focus-visible > .slean-table-sort-icon) {
+			opacity: 0.65;
+		}
+	}
+	:where(th[aria-sort] > .slean-table-heading > .slean-table-sort) {
+		color: var(--slean-table-fg);
+	}
+	:where(th[aria-sort] > .slean-table-heading > .slean-table-sort > .slean-table-sort-icon) {
+		opacity: 1;
+	}
+	:where(.slean-table-resize) {
+		appearance: none;
+		position: absolute;
+		inset-inline-end: 0;
+		top: 0;
+		height: 100%;
+		width: 7px;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		border-radius: 0;
+		background: transparent;
+		cursor: col-resize;
+		touch-action: none;
+	}
+	:where(.slean-table-resize:hover, .slean-table-resize:focus-visible) {
+		background: linear-gradient(var(--slean-table-accent), var(--slean-table-accent)) center / 2px
+			100% no-repeat;
+	}
+	:where(.slean-table-filter) {
+		width: 100%;
+		min-width: 3rem;
+		font-weight: 400;
+	}
+	:where(.slean-table-cell) {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-height: 1.5rem;
+	}
+	:where(td[data-align='end'] > .slean-table-cell) {
+		justify-content: flex-end;
+	}
+	:where(td[data-align='center'] > .slean-table-cell) {
+		justify-content: center;
+	}
+	:where(.slean-table-placeholder) {
+		color: var(--slean-table-muted);
+	}
+	:where(.slean-table-icon) {
+		inline-size: 1rem;
+		block-size: 1rem;
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 1.5;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		flex-shrink: 0;
+	}
+	:where(.slean-table-sort-icon > .slean-table-icon) {
+		inline-size: 0.875rem;
+		block-size: 0.875rem;
+	}
+	:where(.slean-table-page-gap > .slean-table-icon) {
+		stroke-width: 2.5;
+	}
+
+	/* Row controls: 24px ghost icon buttons. */
+	:where(.slean-table-expand, .slean-table-edit, .slean-table-row-move > .slean-table-button) {
+		min-inline-size: 1.5rem;
+		min-block-size: 1.5rem;
+		padding: 0;
+		border-color: transparent;
+		background: transparent;
+		color: var(--slean-table-muted);
+		flex-shrink: 0;
+	}
+	:where(
+		.slean-table-expand:hover,
+		.slean-table-edit:hover,
+		.slean-table-row-move > .slean-table-button:hover
+	) {
+		color: var(--slean-table-fg);
+	}
+	/* Keeps the text of rows without a toggle aligned with the rows that have one. */
+	:where(.slean-table-expand-spacer) {
+		inline-size: 1.5rem;
+		flex-shrink: 0;
+	}
+	:where(.slean-table-edit) {
+		margin-inline-start: auto;
+		opacity: 0.4;
+	}
+	:where(td:hover > .slean-table-cell > .slean-table-edit, .slean-table-edit:focus-visible) {
+		opacity: 1;
+	}
+	:where(.slean-table-row-move) {
+		display: flex;
+		gap: 0.125rem;
+	}
+	:where(.slean-table-ellipsis > .slean-table-cell) {
+		line-height: 1.5rem;
+		min-width: 0;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		display: block;
+	}
+
+	/* Row states write one variable on the row; cells paint it (pinned cells included). Stripes
+	   count data rows only, so an open detail row does not shift them. */
+	:where(
+		.slean-table[data-striped='true']
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr:nth-child(even of [data-row-id])
+	) {
+		--slean-table-row-bg: var(--slean-table-row-stripe);
+	}
+	:where(
+		.slean-table[data-hoverable='true']
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr[data-row-id]:hover
+	) {
+		--slean-table-row-bg: var(--slean-table-row-hover);
+	}
+	:where(.slean-table-scroll > table > tbody > tr[data-selected='true']) {
+		--slean-table-row-bg: var(--slean-table-row-selected);
+	}
+	:where(.slean-table[data-bordered='true'] > .slean-table-scroll > table > * > tr > :is(th, td)) {
+		border-inline-end: 1px solid var(--slean-table-border);
+	}
+	:where(.slean-table[data-bordered='true'] > .slean-table-scroll > table > * > tr > :last-child) {
+		border-inline-end: 0;
+	}
+
+	/* Leading control columns and pinned columns. */
+	:where(.slean-table-selection, .slean-table-expander) {
+		position: sticky;
+		inset-inline-start: 0;
+		z-index: 3;
+		text-align: center;
+	}
+	:where(.slean-table-selection) {
+		width: var(--slean-table-selection-width, 44px);
+		padding-inline: 0;
+	}
+	:where(.slean-table-expander) {
+		width: var(--slean-table-expand-width, 40px);
+		padding-inline: 0;
+	}
+	:where(thead .slean-table-selection, thead .slean-table-expander) {
+		z-index: 4;
+	}
+	:where(.slean-table-scroll > table > * > tr > [data-pin='left'][data-pin-edge]) {
+		border-inline-end: 1px solid var(--slean-table-border);
+		box-shadow: 6px 0 8px -6px var(--slean-table-pin-shadow);
+	}
+	:where(.slean-table-scroll > table > * > tr > [data-pin='right'][data-pin-edge]) {
+		border-inline-start: 1px solid var(--slean-table-border);
+		box-shadow: -6px 0 8px -6px var(--slean-table-pin-shadow);
+	}
+	:where(.slean-table-scroll > table > * > tr > [data-pin='left'][data-pin-edge]:dir(rtl)) {
+		box-shadow: -6px 0 8px -6px var(--slean-table-pin-shadow);
+	}
+	:where(.slean-table-scroll > table > * > tr > [data-pin='right'][data-pin-edge]:dir(rtl)) {
+		box-shadow: 6px 0 8px -6px var(--slean-table-pin-shadow);
+	}
+	:where(.slean-table-scroll > table > tbody > tr > td[data-range='true']) {
+		background: var(--slean-table-selected);
+		box-shadow: inset 0 0 0 1px var(--slean-table-accent);
+	}
+
+	/* Empty, loading, fetching, error. */
+	:where(.slean-table-scroll > table > tbody > tr > .slean-table-empty) {
+		padding: 3rem 1rem;
+		text-align: center;
+		color: var(--slean-table-muted);
+	}
+	:where(.slean-table-skeleton) {
+		display: block;
+		block-size: 0.75rem;
+		inline-size: 70%;
+		max-inline-size: 12rem;
+		border-radius: 999px;
+		background: var(--slean-table-soft);
+	}
+	:where(.slean-table-skeleton-row > td:nth-child(3n + 2) > .slean-table-skeleton) {
+		inline-size: 45%;
+	}
+	:where(.slean-table-skeleton-row > td:nth-child(3n) > .slean-table-skeleton) {
+		inline-size: 85%;
+	}
+	:where(.slean-table[data-fetching] > .slean-table-scroll > table > tbody) {
+		opacity: var(--slean-table-fetching-opacity);
+	}
+	:where(.slean-table-error) {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.625rem 0.75rem;
+		color: var(--slean-table-danger);
+		background: color-mix(in oklab, var(--slean-table-danger) 8%, var(--slean-table-bg));
+	}
+	:where(.slean-table-editor) {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.375rem;
+	}
+	:where(.slean-table-editor > .slean-table-input) {
+		flex: 1 1 100%;
+		min-width: 4.5rem;
+	}
+	:where(.slean-table-editor > [role='alert']) {
+		color: var(--slean-table-danger);
+		width: 100%;
+		font-size: 0.75rem;
+	}
+
+	/* Detail rows, groups, footer. */
+	:where(.slean-table-scroll > table > tbody > .slean-table-detail > td) {
+		padding: 1rem;
+		background: var(--slean-table-row-stripe);
+	}
+	:where(.slean-table-scroll > table > tbody > .slean-table-group > th) {
+		background: var(--slean-table-header-bg);
+		text-align: start;
+		font-weight: 600;
+	}
+	:where(.slean-table-group-toggle) {
+		appearance: none;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		margin: 0;
+		padding: 0.125rem 0.25rem;
+		border: 0;
+		border-radius: var(--slean-table-control-radius);
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+	}
+	:where(.slean-table-aggregate) {
+		margin-inline-start: 1.25rem;
+		font-weight: 400;
+		font-size: 0.75rem;
+		color: var(--slean-table-muted);
+	}
+	:where(.slean-table-scroll > table > tfoot > tr > td) {
+		font-weight: 600;
+		background: var(--slean-table-header-bg);
+		border-top: 1px solid var(--slean-table-border);
+		border-bottom: 0;
+	}
+
+	/* Pagination. */
+	/* The status takes the start; the controls keep to the end edge, also on a wrapped line. */
+	:where(.slean-table-pagination) {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 0.5rem 1rem;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.8125rem;
+		flex-wrap: wrap;
+	}
+	:where(.slean-table-page-status) {
+		margin-inline-end: auto;
+		color: var(--slean-table-muted);
+	}
+	:where(.slean-table-page-size) {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		white-space: nowrap;
+	}
+	:where(.slean-table-pager, .slean-table-pages) {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+	:where(.slean-table-pager .slean-table-button) {
+		padding: 0 0.5rem;
+		font-variant-numeric: tabular-nums;
+	}
+	:where(.slean-table-pages > .slean-table-button) {
+		border-color: transparent;
+		background: transparent;
+	}
+	:where(.slean-table-pages > .slean-table-button[aria-current='page']) {
+		border-color: var(--slean-table-border);
+		background: var(--slean-table-bg);
+		font-weight: 600;
+	}
+	:where(.slean-table-page-gap) {
+		display: inline-flex;
+		justify-content: center;
+		min-inline-size: var(--slean-table-control-height);
+		color: var(--slean-table-muted);
+	}
+	/* Direction-bearing icons point the other way in right-to-left tables. */
+	:where(
+		.slean-table-pager .slean-table-icon,
+		[aria-expanded='false'] > .slean-table-icon,
+		.slean-table-column-panel .slean-table-icon
+	):dir(rtl) {
+		scale: -1 1;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		:where(.slean-table-button, .slean-table-input, .slean-table-columns > summary) {
+			transition-property: background-color, border-color, box-shadow, color;
+			transition-duration: var(--slean-table-duration);
+		}
+		:where(.slean-table-sort-icon) {
+			transition: opacity var(--slean-table-duration);
+		}
+		:where(.slean-table-scroll > table > tbody) {
+			transition: opacity var(--slean-table-duration);
+		}
+		:where(.slean-table-skeleton) {
+			background: linear-gradient(
+					90deg,
+					transparent 20%,
+					color-mix(in oklab, var(--slean-table-bg) 60%, transparent) 50%,
+					transparent 80%
+				)
+				0 0 / 200% 100% var(--slean-table-soft);
+			animation: slean-table-shimmer 1.6s linear infinite;
+		}
+	}
+	@keyframes slean-table-shimmer {
+		from {
+			background-position: 200% 0;
+		}
+		to {
+			background-position: -200% 0;
+		}
+	}
+	@media (max-width: 600px) {
+		:where(.slean-table-column-panel) {
+			min-inline-size: 18rem;
+		}
+		:where(.slean-table-page-size, .slean-table-pages) {
+			display: none;
+		}
+	}
+	/* Text for assistive technology only (sort precedence, control column headers, status). */
+	:where(.slean-table-visually-hidden) {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		padding: 0;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border: 0;
+	}
+	/* Forced colors replace backgrounds with Canvas and drop shadows; selection needs system colors. */
+	@media (forced-colors: active) {
+		:where(.slean-table-scroll > table > tbody > tr[data-selected='true'] > td),
+		:where(.slean-table-scroll > table > tbody > tr > td[data-range='true']) {
+			forced-color-adjust: none;
+			background: Highlight;
+			color: HighlightText;
+		}
+		:where(.slean-table-scroll > table > tbody > tr > td[data-range='true']) {
+			outline: 1px solid HighlightText;
+			outline-offset: -2px;
+		}
+		:where(.slean-table-pages > .slean-table-button[aria-current='page']) {
+			border-color: Highlight;
+		}
+	}
+	/* Print: inline sticky offsets and the scroll limit are inline styles, hence !important. */
+	@media print {
+		:where(
+			.slean-table-toolbar,
+			.slean-table-pagination,
+			.slean-table-resize,
+			.slean-table-edit,
+			.slean-table-row-move
+		) {
+			display: none !important;
+		}
+		:where(.slean-table-scroll) {
+			overflow: visible;
+			max-height: none !important;
+		}
+		:where(.slean-table-scroll > table) {
+			min-width: 0;
+			width: 100%;
+		}
+		:where(.slean-table-scroll > table > * > tr > :is(th, td)) {
+			position: static !important;
+			box-shadow: none;
+		}
+		:where(.slean-table-scroll > table > thead) {
+			position: static !important;
+			display: table-header-group;
+		}
+		:where(.slean-table-scroll > table > * > tr) {
+			break-inside: avoid;
+		}
+	}
+}