@xaroth.nl/design 0.1.0

package/dist/components/prose/index.js

@@ -0,0 +1,67 @@
+import { bem } from "../../bem.js";
+const prose = bem('x-prose');
+const codeBlock = bem('x-code');
+export const proseClass = ({ className } = {}) => prose({}, className);
+export const codeBlockClass = ({ className } = {}) => codeBlock({}, className);
+const keywords = new Set(('as async await break case catch class const continue def default del delete do elif else enum export extends ' +
+    'false fi fn for from func function go if impl implements import in instanceof interface is let loop match mod ' +
+    'module mut new nil none not null of or package pass pub raise return self static struct super switch then this ' +
+    'throw trait true try type typeof undefined use var void while with yield True False None and lambda').split(' '));
+// Languages whose line comments start with #. Everything else gets C-style comments.
+const hashComment = new Set(['py', 'python', 'sh', 'bash', 'shell', 'zsh', 'yaml', 'yml', 'toml', 'rb', 'ruby', 'ini']);
+const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const pattern = (lang) => {
+    const comment = hashComment.has(lang) ? String.raw `#[^\n]*` : String.raw `\/\*[\s\S]*?(?:\*\/|$)|\/\/[^\n]*`;
+    return new RegExp([
+        `(${comment})`,
+        String.raw `("(?:\\[\s\S]|[^"\\\n])*"?|'(?:\\[\s\S]|[^'\\\n])*'?|\`(?:\\[\s\S]|[^\`\\])*\`?)`,
+        String.raw `(\b0x[\da-fA-F]+\b|\b\d[\d_]*(?:\.\d+)?(?:[eE][+-]?\d+)?\b)`,
+        String.raw `([A-Za-z_$][\w$]*)(?=\s*\()`,
+        String.raw `([A-Za-z_$][\w$]*)`,
+    ].join('|'), 'g');
+};
+// Split source into typed tokens. Tiny on purpose: good enough for articles, not a real lexer.
+export const tokenizeCode = (code, lang = '') => {
+    const out = [];
+    let last = 0;
+    for (const m of code.matchAll(pattern(lang.toLowerCase()))) {
+        const index = m.index ?? 0;
+        if (index > last) {
+            out.push({ text: code.slice(last, index) });
+        }
+        const word = m[4] ?? m[5];
+        const type = m[1]
+            ? 'com'
+            : m[2]
+                ? 'str'
+                : m[3]
+                    ? 'num'
+                    : word && keywords.has(word)
+                        ? 'kw'
+                        : m[4]
+                            ? 'fn'
+                            : undefined;
+        out.push({ type, text: m[0] });
+        last = index + m[0].length;
+    }
+    if (last < code.length) {
+        out.push({ text: code.slice(last) });
+    }
+    return out;
+};
+// One span per line (for the line number counter) with token spans inside. Tokens that cross a newline,
+// like block comments, are closed and reopened so every line is well formed.
+export const codeHtml = (code, lang) => {
+    const lines = [''];
+    for (const { type, text } of tokenizeCode(code.replace(/\r\n?/g, '\n').replace(/\n$/, ''), lang)) {
+        text.split('\n').forEach((part, i) => {
+            if (i > 0) {
+                lines.push('');
+            }
+            if (part) {
+                lines[lines.length - 1] += type ? `<span class="x-code__${type}">${esc(part)}</span>` : esc(part);
+            }
+        });
+    }
+    return lines.map((l) => `<span class="x-code__line">${l}</span>`).join('\n');
+};

package/dist/components/prose/prose.astro

@@ -0,0 +1,14 @@
+---
+import './prose.css'
+import type { HTMLAttributes } from 'astro/types'
+import { proseClass } from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class'> & {
+  class?: string
+  as?: 'div' | 'article' | 'section' | 'main'
+}
+
+const { as: Tag = 'div', class: className, slot: _slot, ...rest } = Astro.props
+---
+
+<Tag {...rest} class={proseClass({ className })}><slot /></Tag>

package/dist/components/prose/prose.css

@@ -0,0 +1,156 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-prose {
+    --x-prose-block: 2em;
+    min-width: 0;
+  }
+  .x-prose > * + * {
+    margin-top: 1em;
+  }
+  .x-prose > :is(p, ul, ol, h2, h3, h4, blockquote, hr) {
+    max-width: var(--x-prose);
+  }
+  .x-prose > :is(h2, h3, h4) {
+    margin-top: 2em;
+    scroll-margin-top: var(--x-space-8);
+  }
+  .x-prose > :is(h2, h3, h4) + * {
+    margin-top: 0.5em;
+  }
+  .x-prose > :first-child {
+    margin-top: 0;
+  }
+  .x-prose > :is(blockquote, figure, table, pre, .x-code, hr) {
+    margin-block: var(--x-prose-block);
+  }
+  .x-prose :where(ul, ol) {
+    display: grid;
+    gap: var(--x-space-2);
+    padding-left: 1.5rem;
+  }
+  .x-prose :where(li) > :where(ul, ol) {
+    margin-top: var(--x-space-2);
+  }
+  .x-prose :where(blockquote) {
+    position: relative;
+  }
+  .x-prose :where(blockquote) > * + * {
+    margin-top: 0.75em;
+  }
+  .x-prose :where(blockquote) > :is(footer, cite) {
+    display: block;
+    font-style: normal;
+  }
+  .x-prose :where(:not(pre)) > :where(code) {
+    padding: 0.1em 0.35em;
+    font-size: 0.875em;
+    overflow-wrap: anywhere;
+  }
+  .x-prose :where(figure:not(.x-code)) {
+    display: grid;
+    gap: var(--x-space-3);
+    min-width: 0;
+    overflow-x: auto;
+  }
+  .x-prose :where(figure:not(.x-code)) > :is(img, svg, video, picture) {
+    width: 100%;
+    height: auto;
+  }
+  .x-prose :where(figcaption) {
+    font-size: var(--x-fs-small);
+    line-height: 1.5;
+    color: var(--x-color-text-muted);
+  }
+  .x-prose :where(table:not(.x-table)) {
+    width: 100%;
+    font-size: var(--x-fs-ui);
+    line-height: 1.4;
+    border-collapse: collapse;
+  }
+  .x-prose :where(table:not(.x-table)) :where(caption) {
+    padding: var(--x-space-3) var(--x-table-pad-x, var(--x-space-4));
+    font-size: var(--x-fs-small);
+    line-height: 1.5;
+    text-align: start;
+    caption-side: bottom;
+    color: var(--x-color-text-muted);
+  }
+  .x-prose :where(table:not(.x-table)) :where(thead th) {
+    height: var(--x-table-row, var(--x-row));
+    padding: 0 var(--x-table-pad-x, var(--x-space-4));
+    font-size: var(--x-fs-label);
+    line-height: 1.3;
+    text-align: start;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  .x-prose :where(table:not(.x-table)) :where(tbody) :where(td, th) {
+    height: var(--x-table-row, var(--x-row));
+    padding: var(--x-table-pad-y, var(--x-space-3)) var(--x-table-pad-x, var(--x-space-4));
+    text-align: start;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--x-color-line);
+    transition: background-color var(--x-duration) var(--x-ease);
+  }
+  .x-prose :where(table:not(.x-table)) :where(tbody tr:last-child) > :where(td, th) {
+    border-bottom: 0;
+  }
+  .x-prose :where(table:not(.x-table)) :where(tbody tr:hover) > :where(td, th) {
+    background-color: var(--x-table-hover, var(--x-color-accent-wash));
+  }
+  .x-prose > .x-table-wrap {
+    margin-block: var(--x-prose-block);
+  }
+  .x-prose :where(strong) {
+    font-weight: 600;
+    color: var(--x-color-text);
+  }
+  .x-code {
+    position: relative;
+    min-width: 0;
+    margin: 0;
+  }
+  .x-code__bar {
+    display: flex;
+    gap: var(--x-space-3);
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--x-space-2) var(--x-space-4);
+    font-size: var(--x-fs-label);
+    line-height: 1.3;
+  }
+  .x-code__lang {
+    margin-left: auto;
+  }
+  .x-code__pre {
+    padding: var(--x-space-4) var(--x-space-5) var(--x-space-4) 0;
+    margin: 0;
+    overflow-x: auto;
+    font-size: 0.875rem;
+    line-height: 1.7;
+    tab-size: 2;
+    counter-reset: x-line;
+  }
+  .x-code__pre:focus-visible {
+    outline-offset: -2px;
+  }
+  .x-code code {
+    font-size: inherit;
+  }
+  .x-code__line::before {
+    position: sticky;
+    left: 0;
+    counter-increment: x-line;
+    content: counter(x-line);
+    display: inline-block;
+    box-sizing: content-box;
+    width: 3.5ch;
+    padding-left: var(--x-code-gutter-start, 1.5ch);
+    padding-right: 1.5ch;
+    margin-right: 1.5ch;
+    text-align: right;
+    user-select: none;
+    background: var(--x-code-bg, transparent);
+    border-right: 1px solid var(--x-color-line-strong);
+  }
+}

package/dist/components/prose/prose.d.ts

@@ -0,0 +1,12 @@
+import './prose.scss';
+import type { HTMLAttributes } from 'react';
+export type ProseProps = HTMLAttributes<HTMLElement> & {
+    as?: 'div' | 'article' | 'section' | 'main';
+};
+export declare function Prose({ as: Tag, className, ...rest }: ProseProps): import("react").JSX.Element;
+export type CodeBlockProps = Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> & {
+    code: string;
+    lang?: string;
+    title?: string;
+};
+export declare function CodeBlock({ code, lang, title, className, ...rest }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/prose/prose.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './prose.css';
+import { codeBlockClass, codeHtml, proseClass } from "./index.js";
+export function Prose({ as: Tag = 'div', className, ...rest }) {
+    return (_jsx(Tag, { ...rest, className: proseClass({ className }) }));
+}
+export function CodeBlock({ code, lang, title, className, ...rest }) {
+    return (_jsxs("figure", { ...rest, className: codeBlockClass({ className }), children: [(title || lang) && (_jsxs("figcaption", { className: "x-code__bar", children: [title && _jsx("span", { className: "x-code__title", children: title }), lang && _jsx("span", { className: "x-code__lang", children: lang })] })), _jsx("pre", { className: "x-code__pre", 
+                // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- keyboard users scroll long lines
+                tabIndex: 0, children: _jsx("code", { dangerouslySetInnerHTML: { __html: codeHtml(code, lang) } }) })] }));
+}

package/dist/components/stat/index.d.ts

@@ -0,0 +1,15 @@
+export type StatGroupVariant = 'plain' | 'framed';
+export type StatGroupColumns = 2 | 3 | 4;
+export type StatTone = 'default' | 'muted' | 'success' | 'warning' | 'danger';
+export type StatGroupOptions = {
+    variant?: StatGroupVariant;
+    /** Columns from 640px up; below that the group is two across. */
+    columns?: StatGroupColumns;
+    className?: string;
+};
+export type StatOptions = {
+    tone?: StatTone;
+    className?: string;
+};
+export declare const statGroupClass: ({ variant, columns, className }?: StatGroupOptions) => string;
+export declare const statClass: ({ tone, className }?: StatOptions) => string;

package/dist/components/stat/index.js

@@ -0,0 +1,5 @@
+import { bem } from "../../bem.js";
+const statGroup = bem('x-stat-group', { defaults: { cols: 4 }, prefixed: ['cols'] });
+const stat = bem('x-stat', { defaults: { tone: 'default' } });
+export const statGroupClass = ({ variant = 'plain', columns = 4, className } = {}) => statGroup({ variant, cols: columns }, className);
+export const statClass = ({ tone = 'default', className } = {}) => stat({ tone }, className);

package/dist/components/stat/stat-group.astro

@@ -0,0 +1,11 @@
+---
+import './stat.css'
+import type { HTMLAttributes } from 'astro/types'
+import { statGroupClass, type StatGroupOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'dl'>, 'class'> & Omit<StatGroupOptions, 'className'> & { class?: string }
+
+const { variant, columns, class: className, slot: _slot, ...rest } = Astro.props
+---
+
+<dl {...rest} class={statGroupClass({ variant, columns, className })}><slot /></dl>

package/dist/components/stat/stat.astro

@@ -0,0 +1,43 @@
+---
+import './stat.css'
+import type { HTMLAttributes } from 'astro/types'
+import { statClass, type StatOptions } from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class'> &
+  Omit<StatOptions, 'className'> & {
+    class?: string
+    /** Plain-text label; the `label` slot takes markup. */
+    label?: string
+    /** The value; the default slot takes markup and precedence. */
+    value?: string | number
+    /** Small text after the value: a unit or "/ 44". The `unit` slot takes markup. */
+    unit?: string
+    /** Note under the value. The `hint` slot takes markup. */
+    hint?: string
+  }
+
+const { tone, label, value, unit, hint, class: className, slot: _slot, ...rest } = Astro.props
+const hasUnit = unit !== undefined || Astro.slots.has('unit')
+const hasHint = hint !== undefined || Astro.slots.has('hint')
+---
+
+<div {...rest} class={statClass({ tone, className })}>
+  <dt class="x-stat__label"><slot name="label">{label}</slot></dt>
+  <dd class="x-stat__value">
+    <slot>{value}</slot>
+    {
+      hasUnit && (
+        <span class="x-stat__unit">
+          <slot name="unit">{unit}</slot>
+        </span>
+      )
+    }
+  </dd>
+  {
+    hasHint && (
+      <dd class="x-stat__hint">
+        <slot name="hint">{hint}</slot>
+      </dd>
+    )
+  }
+</div>

package/dist/components/stat/stat.css

@@ -0,0 +1,51 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-stat-group {
+    --x-stat-cols: 4;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--x-stat-gap, var(--x-gap));
+    margin: 0;
+  }
+  @media (min-width: 640px) {
+    .x-stat-group {
+      grid-template-columns: repeat(var(--x-stat-cols), minmax(0, 1fr));
+    }
+  }
+  .x-stat-group--cols-2 {
+    --x-stat-cols: 2;
+  }
+  .x-stat-group--cols-3 {
+    --x-stat-cols: 3;
+  }
+  .x-stat {
+    --x-stat-value: var(--x-color-text);
+    position: relative;
+    display: grid;
+    gap: var(--x-stat-inner-gap, var(--x-space-2));
+    align-content: start;
+    box-sizing: border-box;
+    min-width: 0;
+    padding: var(--x-stat-pad, 0);
+  }
+  .x-stat__label, .x-stat__value, .x-stat__hint {
+    min-width: 0;
+    margin: 0;
+  }
+  .x-stat__value {
+    line-height: 1.1;
+    color: var(--x-stat-value);
+    overflow-wrap: anywhere;
+    font-variant-numeric: lining-nums tabular-nums;
+  }
+  .x-stat__unit {
+    margin-inline-start: 0.25em;
+    font-size: max(0.5em, var(--x-fs-label));
+    color: var(--x-color-text-faint);
+  }
+  .x-stat__hint {
+    font-size: var(--x-fs-small);
+    line-height: 1.5;
+    color: var(--x-color-text-faint);
+  }
+}

package/dist/components/stat/stat.d.ts

@@ -0,0 +1,15 @@
+import './stat.scss';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type StatGroupOptions, type StatOptions } from './index.ts';
+export type StatGroupProps = Omit<StatGroupOptions, 'className'> & HTMLAttributes<HTMLDListElement>;
+export declare function StatGroup({ variant, columns, className, ...rest }: StatGroupProps): import("react").JSX.Element;
+export type StatProps = Omit<StatOptions, 'className'> & HTMLAttributes<HTMLDivElement> & {
+    label?: ReactNode;
+    /** The value; children take precedence. */
+    value?: ReactNode;
+    /** Small text after the value: a unit or "/ 44". */
+    unit?: ReactNode;
+    /** Note under the value. */
+    hint?: ReactNode;
+};
+export declare function Stat({ tone, label, value, unit, hint, className, children, ...rest }: StatProps): import("react").JSX.Element;

package/dist/components/stat/stat.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './stat.css';
+import { statClass, statGroupClass } from "./index.js";
+// A dl: each stat is a name and value pair, which screen readers announce as the label followed by its value.
+export function StatGroup({ variant, columns, className, ...rest }) {
+    return (_jsx("dl", { ...rest, className: statGroupClass({ variant, columns, className }) }));
+}
+export function Stat({ tone, label, value, unit, hint, className, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: statClass({ tone, className }), children: [_jsx("dt", { className: "x-stat__label", children: label }), _jsxs("dd", { className: "x-stat__value", children: [children ?? value, unit != null && _jsx("span", { className: "x-stat__unit", children: unit })] }), hint != null && _jsx("dd", { className: "x-stat__hint", children: hint })] }));
+}

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

@@ -0,0 +1,38 @@
+export type TableAlign = 'start' | 'end' | 'center';
+export type TableDensity = 'comfortable' | 'compact';
+export type TableColumn = {
+    key: string;
+    label: string;
+    align?: TableAlign;
+    numeric?: boolean;
+    width?: string;
+};
+export type TableRow<T = string | number> = Record<string, T | null | undefined>;
+export type TableCell = {
+    row: TableRow;
+    rowIndex: number;
+    column: TableColumn;
+    value: TableRow[string];
+};
+export type TableLabel = {
+    label: string;
+    'aria-labelledby'?: string;
+} | {
+    label?: undefined;
+    'aria-labelledby': string;
+};
+export type TableOptions = {
+    density?: TableDensity;
+    striped?: boolean;
+    hover?: boolean;
+    className?: string;
+};
+export type TableWrapOptions = {
+    stickyHeader?: boolean;
+    className?: string;
+};
+export declare const tableWrapClass: ({ stickyHeader, className }?: TableWrapOptions) => string;
+export declare const tableClass: ({ density, striped, hover }?: TableOptions) => string;
+export declare const tableCellAlign: ({ align, numeric }: Pick<TableColumn, "align" | "numeric">) => TableAlign;
+export declare const tableCellClass: (column: TableColumn, part: "head" | "body") => string | undefined;
+export declare const tableCellSlot: (rowIndex: number, key: string) => string;

package/dist/components/table/index.js

@@ -0,0 +1,18 @@
+import { bem } from "../../bem.js";
+const tableWrap = bem('x-table-wrap');
+const table = bem('x-table', { defaults: { density: 'comfortable', align: 'start' } });
+// className goes on the wrapper, the outermost element.
+export const tableWrapClass = ({ stickyHeader, className } = {}) => tableWrap({ sticky: stickyHeader }, className);
+export const tableClass = ({ density = 'comfortable', striped, hover } = {}) => table({ density, striped, hover });
+export const tableCellAlign = ({ align, numeric }) => align ?? (numeric ? 'end' : 'start');
+// Header cells only take the alignment; the numeric look is for body cells.
+export const tableCellClass = (column, part) => {
+    const align = tableCellAlign(column);
+    const numeric = part === 'body' && column.numeric;
+    if (align === 'start' && !numeric) {
+        return undefined;
+    }
+    return table.el('cell', { align, num: numeric });
+};
+// Astro: markup for one cell goes in a named slot, overriding the row value.
+export const tableCellSlot = (rowIndex, key) => `cell-${rowIndex}-${key}`;

package/dist/components/table/table.astro

@@ -0,0 +1,111 @@
+---
+import './table.css'
+import type { HTMLAttributes } from 'astro/types'
+import {
+  tableCellClass,
+  tableCellSlot,
+  tableClass,
+  tableWrapClass,
+  type TableCell,
+  type TableColumn,
+  type TableLabel,
+  type TableOptions,
+  type TableRow,
+} from './index.js'
+
+type Props = Omit<HTMLAttributes<'div'>, 'class' | 'aria-label' | 'aria-labelledby'> &
+  Omit<TableOptions, 'className'> &
+  TableLabel & {
+    class?: string
+    columns: TableColumn[]
+    /** Plain values. For markup, use a `cell-<rowIndex>-<key>` slot or a default slot function (see below). */
+    rows: TableRow[]
+    caption?: string
+    stickyHeader?: boolean
+  }
+
+const {
+  columns,
+  rows,
+  caption,
+  density,
+  striped,
+  hover,
+  stickyHeader,
+  label,
+  class: className,
+  slot: _slot,
+  ...rest
+} = Astro.props
+const attrs = { ...rest, role: 'region' as const, tabindex: '0', 'aria-label': label }
+
+// Cell markup, first match wins: the named slot `cell-<rowIndex>-<key>` (static markup), then a default slot
+// function `(cell: TableCell) => markup`, which is called per cell; rendering nothing keeps the plain value.
+// A default slot of plain markup is ignored.
+const renderCell = async (cell: TableCell): Promise<string | undefined> => {
+  const args = [cell]
+  const probe = { called: false }
+  // Astro cannot tell a slot function from plain markup; only a function spreads the arguments it is given.
+  Object.defineProperty(args, Symbol.iterator, {
+    value: function* () {
+      probe.called = true
+      yield cell
+    },
+  })
+  const html = await Astro.slots.render('default', args)
+  return probe.called ? html : undefined
+}
+let hasRenderer = Astro.slots.has('default')
+const slotted = new Map<string, string>()
+for (const [rowIndex, row] of rows.entries()) {
+  for (const column of columns) {
+    const name = tableCellSlot(rowIndex, column.key)
+    let html = Astro.slots.has(name) ? await Astro.slots.render(name) : undefined
+    if (html === undefined && hasRenderer) {
+      const rendered = await renderCell({ row, rowIndex, column, value: row[column.key] })
+      hasRenderer = rendered !== undefined
+      html = rendered?.trim() || undefined
+    }
+    if (html !== undefined) {
+      slotted.set(name, html)
+    }
+  }
+}
+---
+
+<div {...attrs} class={tableWrapClass({ stickyHeader, className })}>
+  <table class={tableClass({ density, striped, hover })}>
+    {caption && <caption class="x-table__caption">{caption}</caption>}
+    <thead>
+      <tr>
+        {
+          columns.map((column) => (
+            <th
+              class={tableCellClass(column, 'head')}
+              scope="col"
+              style={column.width ? `width:${column.width}` : undefined}
+            >
+              {column.label}
+            </th>
+          ))
+        }
+      </tr>
+    </thead>
+    <tbody>
+      {
+        rows.map((row, i) => (
+          <tr>
+            {columns.map((column) => {
+              const html = slotted.get(tableCellSlot(i, column.key))
+              return (
+                <td class={tableCellClass(column, 'body')}>
+                  {html !== undefined ? <Fragment set:html={html} /> : row[column.key]}
+                </td>
+              )
+            })}
+          </tr>
+        ))
+      }
+    </tbody>
+  </table>
+</div>

package/dist/components/table/table.css

@@ -0,0 +1,78 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-table-wrap {
+    --x-table-edge: color-mix(in srgb, var(--x-color-accent) 30%, transparent);
+    --x-table-cover: var(--x-color-bg);
+    --x-table-hint:
+      linear-gradient(to right, var(--x-table-cover) 60%, transparent) left / 28px 100% no-repeat local,
+      linear-gradient(to left, var(--x-table-cover) 60%, transparent) right / 28px 100% no-repeat local,
+      radial-gradient(farthest-side at 0 50%, var(--x-table-edge), transparent) left / 14px 100% no-repeat scroll,
+      radial-gradient(farthest-side at 100% 50%, var(--x-table-edge), transparent) right / 14px 100% no-repeat scroll;
+    max-width: 100%;
+    overflow: auto;
+    background: var(--x-table-hint), var(--x-table-cover);
+  }
+  .x-table-wrap--sticky {
+    max-height: var(--x-table-max-height, 70vh);
+  }
+  .x-table-wrap--sticky .x-table :where(thead th) {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+  .x-table {
+    width: 100%;
+    font-size: var(--x-fs-ui);
+    line-height: 1.4;
+    border-collapse: collapse;
+  }
+  .x-table :where(caption) {
+    padding: var(--x-space-3) var(--x-table-pad-x, var(--x-space-4));
+    font-size: var(--x-fs-small);
+    line-height: 1.5;
+    text-align: start;
+    caption-side: bottom;
+    color: var(--x-color-text-muted);
+  }
+  .x-table :where(thead th) {
+    height: var(--x-table-row, var(--x-row));
+    padding: 0 var(--x-table-pad-x, var(--x-space-4));
+    font-size: var(--x-fs-label);
+    line-height: 1.3;
+    text-align: start;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  .x-table :where(tbody) :where(td, th) {
+    height: var(--x-table-row, var(--x-row));
+    padding: var(--x-table-pad-y, var(--x-space-3)) var(--x-table-pad-x, var(--x-space-4));
+    text-align: start;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--x-color-line);
+    transition: background-color var(--x-duration) var(--x-ease);
+  }
+  .x-table :where(tbody tr:last-child) > :where(td, th) {
+    border-bottom: 0;
+  }
+  .x-table--compact {
+    --x-table-row: var(--x-control-sm);
+    --x-table-pad-y: var(--x-space-1);
+    --x-table-pad-x: var(--x-space-3);
+  }
+  .x-table--striped :where(tbody tr:nth-child(even)) > :where(td, th) {
+    background-color: var(--x-table-stripe, color-mix(in srgb, var(--x-color-text) 4%, transparent));
+  }
+  .x-table--hover :where(tbody tr:hover) > :where(td, th) {
+    background-color: var(--x-table-hover, var(--x-color-accent-wash));
+  }
+  .x-table__cell--end {
+    text-align: end;
+  }
+  .x-table__cell--center {
+    text-align: center;
+  }
+  .x-table__cell--num {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+}