@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/patterns/dashboard-page/styles.css

@@ -0,0 +1,169 @@
+@layer ket.app {
+  /* Dashboards are working canvases, not records. Their context and identity use
+     the same quiet bands as lists and forms; KPI, workflow and analytical blocks
+     own their surfaces on the grey page canvas below. Never paint the whole
+     workspace white: the gaps must separate independent cards and tables. */
+  :where([data-kv-design-system]) [data-ui="dashboard-page"] {
+    display: grid;
+    min-width: 0;
+    background: var(--kv-page-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page"][data-variant="operational"] {
+    gap: 0;
+    padding: 0 0 var(--kv-space-10);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="dashboard-page"][data-variant="operational"]
+    [data-ui="dashboard-page-context"] {
+    display: flex;
+    min-width: 0;
+    min-height: var(--kv-table-header-height);
+    align-items: center;
+    padding-inline: var(--kv-page-padding-x);
+    border-bottom: 1px solid var(--kv-panel-divider);
+    background: var(--kv-page-chrome-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-header"] {
+    display: grid;
+    min-width: 0;
+    padding: var(--kv-space-4) var(--kv-page-padding-x);
+    border-bottom: 1px solid var(--kv-panel-divider);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="dashboard-page"][data-variant="operational"]
+    [data-ui="dashboard-page-header"] {
+    background: var(--kv-page-chrome-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-heading"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-1);
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-eyebrow"] {
+    margin: 0;
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-semibold);
+    letter-spacing: 0;
+    line-height: var(--kv-leading-normal);
+    text-transform: uppercase;
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-title-row"] {
+    display: grid;
+    min-width: 0;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--kv-space-4);
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-title"] {
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--kv-text-main);
+    font-size: var(--kv-page-title-size);
+    font-weight: var(--kv-weight-semibold);
+    letter-spacing: 0;
+    line-height: var(--kv-leading-tight);
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-description"] {
+    max-width: 56rem;
+    margin: 0;
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-sm);
+    line-height: var(--kv-leading-normal);
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-subline"] {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-status"],
+  :where([data-kv-design-system]) [data-ui="dashboard-page-meta"] {
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-actions"] {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-body"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-6);
+    padding: var(--kv-space-5) var(--kv-page-padding-x) var(--kv-space-10);
+    background: var(--kv-page-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-toolbar"] {
+    background: var(--kv-page-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="dashboard-page-body"] > [data-ui="stack"] {
+    gap: var(--kv-space-6);
+  }
+
+  @media (max-width: 42rem) {
+    :where([data-kv-design-system]) [data-ui="dashboard-page"][data-variant="operational"] {
+      padding-bottom: var(--kv-space-8);
+    }
+
+    :where([data-kv-design-system])
+      [data-ui="dashboard-page"][data-variant="operational"]
+      [data-ui="dashboard-page-context"] {
+      min-height: 2.75rem;
+      padding-inline: var(--kv-space-4);
+    }
+
+    :where([data-kv-design-system]) [data-ui="dashboard-page-header"] {
+      padding: var(--kv-space-4) var(--kv-space-4) var(--kv-space-3);
+    }
+
+    :where([data-kv-design-system]) [data-ui="dashboard-page-title-row"] {
+      grid-template-columns: minmax(0, 1fr);
+      align-items: stretch;
+      gap: var(--kv-space-3);
+    }
+
+    :where([data-kv-design-system]) [data-ui="dashboard-page-title"] {
+      font-size: var(--kv-text-lg);
+    }
+
+    :where([data-kv-design-system]) [data-ui="dashboard-page-actions"] {
+      justify-content: flex-start;
+    }
+
+    :where([data-kv-design-system]) [data-ui="dashboard-page-actions"] > [data-ui="inline"] {
+      width: 100%;
+    }
+
+    :where([data-kv-design-system])
+      [data-ui="dashboard-page-actions"]
+      [data-ui="action"][data-variant="primary"] {
+      min-height: 2.75rem;
+      flex: 1 1 auto;
+    }
+
+    :where([data-kv-design-system]) [data-ui="dashboard-page-body"] {
+      padding: var(--kv-space-4) var(--kv-space-4) var(--kv-space-8);
+    }
+  }
+}

package/dist/patterns/dashboard-page.d.ts

@@ -1,13 +1,2 @@
-import type { TemplateResult } from '@ketvietlab/ketjs-view';
-import { type WorkspacePageProps } from './workspace-page.tsx';
-export declare const HOOKS: readonly ['dashboard-page', 'dashboard-page-context', 'dashboard-page-header', 'dashboard-page-heading', 'dashboard-page-eyebrow', 'dashboard-page-title-row', 'dashboard-page-title', 'dashboard-page-subline', 'dashboard-page-status', 'dashboard-page-description', 'dashboard-page-actions', 'dashboard-page-meta', 'dashboard-page-body'];
-export type DashboardPageProps = Omit<WorkspacePageProps, 'layout' | 'controls'>;
-/**
- * The baseline for KPI, workflow and analytical overview screens.
- *
- * Applications own the translated copy, business actions and dashboard blocks.
- * This pattern keeps location, identity and the overview canvas in a stable,
- * compact hierarchy without pretending that the dashboard is a business record.
- */
-export declare const DashboardPage: (props: DashboardPageProps) => TemplateResult;
+export * from './dashboard-page/index.tsx';
 //# sourceMappingURL=dashboard-page.d.ts.map

package/dist/patterns/dashboard-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/dashboard-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAE7E,eAAO,MAAM,KAAK,YAChB,gBAAgB,EAChB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,wBAAwB,EACxB,uBAAuB,EACvB,4BAA4B,EAC5B,wBAAwB,EACxB,qBAAqB,EACrB,qBAAqB,CACb,CAAA;AAEV,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAA;AAEhF;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,cACK,CAAA"}
+{"version":3,"file":"dashboard-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/dashboard-page.tsx"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA"}

package/dist/patterns/dashboard-page.js

@@ -1,25 +1,2 @@
-import { workspacePage } from './workspace-page.js';
-export const HOOKS = [
-    'dashboard-page',
-    'dashboard-page-context',
-    'dashboard-page-header',
-    'dashboard-page-heading',
-    'dashboard-page-eyebrow',
-    'dashboard-page-title-row',
-    'dashboard-page-title',
-    'dashboard-page-subline',
-    'dashboard-page-status',
-    'dashboard-page-description',
-    'dashboard-page-actions',
-    'dashboard-page-meta',
-    'dashboard-page-body',
-];
-/**
- * The baseline for KPI, workflow and analytical overview screens.
- *
- * Applications own the translated copy, business actions and dashboard blocks.
- * This pattern keeps location, identity and the overview canvas in a stable,
- * compact hierarchy without pretending that the dashboard is a business record.
- */
-export const DashboardPage = (props) => workspacePage({ ...props, layout: 'flow' }, 'dashboard-page');
+export * from './dashboard-page/index.js';
 //# sourceMappingURL=dashboard-page.js.map

package/dist/patterns/dashboard-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/dashboard-page.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA2B,MAAM,qBAAsB,CAAA;AAE7E,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,gBAAgB;IAChB,wBAAwB;IACxB,uBAAuB;IACvB,wBAAwB;IACxB,wBAAwB;IACxB,0BAA0B;IAC1B,sBAAsB;IACtB,wBAAwB;IACxB,uBAAuB;IACvB,4BAA4B;IAC5B,wBAAwB;IACxB,qBAAqB;IACrB,qBAAqB;CACb,CAAA;AAIV;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAkB,EAAE,CACzE,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,gBAAgB,CAAC,CAAA"}
+{"version":3,"file":"dashboard-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/dashboard-page.tsx"],"names":[],"mappings":"AAAA,cAAc,2BAA4B,CAAA"}

package/dist/patterns/data-table/index.d.ts

@@ -0,0 +1,74 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export type Cell = JSXChild;
+export type SortDirection = 'ascending' | 'descending';
+export type TablePager = {
+    label: string;
+    previousHref?: string | null;
+    nextHref?: string | null;
+};
+export type Column<Row> = {
+    key: string;
+    label: string;
+    cell: (row: Row) => Cell;
+    align?: 'start' | 'end';
+    kind?: 'text' | 'number' | 'currency' | 'date' | 'status' | 'identifier' | 'person' | 'media';
+    priority?: 'primary' | 'secondary' | 'tertiary';
+    width?: 'narrow' | 'medium' | 'wide';
+    hidden?: boolean;
+    optional?: boolean;
+    sort?: {
+        href: string;
+        direction?: SortDirection | null;
+        label?: string;
+    } | null;
+};
+export type TableSelection = {
+    /** Associates row checkboxes with an external bulk-action form. */
+    form?: string;
+    name?: string;
+    selectAllName?: string;
+    selectedIds?: readonly string[];
+    disabled?: boolean;
+};
+export type TableGroup<Row> = {
+    id: string;
+    label: JSXChild;
+    count?: number;
+    href?: string | null;
+    rows?: readonly Row[];
+    children?: readonly TableGroup<Row>[];
+    pager?: TablePager | null;
+};
+export type DataTableLabels<Row> = {
+    selectAll?: string;
+    selectRow?: (row: Row, id: string) => string;
+    sortedAscending?: string;
+    sortedDescending?: string;
+    previousPage?: string;
+    nextPage?: string;
+};
+export type DataTableProps<Row> = {
+    /** A shared surface contains the heading and an unframed table viewport. */
+    title?: string;
+    actions?: JSXChild;
+    columns: readonly Column<Row>[];
+    rows: readonly Row[];
+    id: (row: Row) => string;
+    caption?: string | null;
+    rowHref?: (row: Row) => string;
+    selected?: (row: Row) => boolean;
+    emptyTitle?: string;
+    emptyMessage?: string;
+    emptyActions?: JSXChild;
+    /** Stack labelled cells on narrow screens, or retain horizontal scrolling. */
+    responsive?: 'scroll' | 'stack';
+    /** Use a denser gutter for high-volume operational lists. */
+    gutter?: 'default' | 'compact';
+    selection?: TableSelection | null;
+    groups?: readonly TableGroup<Row>[];
+    shownColumns?: readonly string[];
+    labels?: DataTableLabels<Row>;
+};
+export declare const HOOKS: readonly ['table-scroll', 'table', 'table-caption', 'select-col', 'select-all', 'col', 'sort-link', 'sort-icon', 'row', 'group-row', 'group-cell', 'group-link', 'group-indent', 'group-count', 'group-pager', 'group-pager-actions', 'cell', 'select-cell', 'row-select', 'row-link'];
+export declare const DataTable: <Row>(props: DataTableProps<Row>) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/data-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/data-table/index.tsx"],"names":[],"mappings":"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"}

package/dist/patterns/data-table/index.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { EmptyState } from '../../primitives/feedback.js';
+import { Surface } from '../../layouts/index.js';
+export const HOOKS = [
+    'table-scroll',
+    'table',
+    'table-caption',
+    'select-col',
+    'select-all',
+    'col',
+    'sort-link',
+    'sort-icon',
+    'row',
+    'group-row',
+    'group-cell',
+    'group-link',
+    'group-indent',
+    'group-count',
+    'group-pager',
+    'group-pager-actions',
+    'cell',
+    'select-cell',
+    'row-select',
+    'row-link',
+];
+const selectedColumnKeys = (props) => props.shownColumns ?? props.columns.filter((column) => column.hidden !== true).map((column) => column.key);
+const visibleColumns = (props) => {
+    const selected = new Set(selectedColumnKeys(props));
+    return props.columns.filter((column) => selected.has(column.key));
+};
+const colSpan = (props, columns) => columns.length + (props.selection ? 1 : 0);
+const sortLabel = (column, labels) => {
+    if (!column.sort?.direction)
+        return null;
+    return column.sort.direction === 'ascending'
+        ? (labels?.sortedAscending ?? 'Sorted ascending')
+        : (labels?.sortedDescending ?? 'Sorted descending');
+};
+const columnHeader = (column, labels) => (_jsx("th", { "data-ui": "col", "data-col": column.key, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-width": column.width ?? null, "data-optional": column.optional === true ? 'true' : null, "data-sort": column.sort?.direction ?? null, "aria-sort": column.sort?.direction ?? null, scope: "col", children: column.sort ? (_jsxs("a", { "data-ui": "sort-link", href: column.sort.href, "aria-label": column.sort.label ?? column.label, children: [_jsx("span", { children: column.label }), !!column.sort.direction && (_jsx("span", { "data-ui": "sort-icon", "aria-hidden": "true", title: sortLabel(column, labels) ?? undefined, children: column.sort.direction === 'ascending' ? '↑' : '↓' }))] })) : (column.label) }));
+const selectionHeader = (props) => props.selection ? (_jsx("th", { "data-ui": "select-col", scope: "col", children: _jsx("input", { "data-ui": "select-all", type: "checkbox", name: props.selection.selectAllName ?? 'select-all', "aria-label": props.labels?.selectAll ?? 'Select all rows', disabled: props.selection.disabled === true }) })) : null;
+const isSelected = (props, row) => {
+    if (props.selected?.(row) === true)
+        return true;
+    return props.selection?.selectedIds?.includes(props.id(row)) === true;
+};
+const rowCells = (props, columns, row) => (_jsxs(_Fragment, { children: [props.selection && (_jsx("td", { "data-ui": "select-cell", children: _jsx("input", { "data-ui": "row-select", type: "checkbox", name: props.selection.name ?? 'ids', form: props.selection.form, value: props.id(row), checked: isSelected(props, row), "aria-label": props.labels?.selectRow?.(row, props.id(row)) ?? `Select row ${props.id(row)}`, disabled: props.selection.disabled === true }) })), each(columns, (column) => column.key, (column) => (_jsx("td", { "data-ui": "cell", "data-col": column.key, "data-linked": props.rowHref && column === columns[0] ? 'true' : null, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-priority": column.priority ?? 'secondary', "data-label": props.responsive === 'stack' ? column.label : null, children: props.rowHref && column === columns[0] ? (_jsx("a", { "data-ui": "row-link", href: props.rowHref(row), children: column.cell(row) })) : (column.cell(row)) })))] }));
+const tableRow = (props, columns, row) => (_jsx("tr", { "data-ui": "row", "data-row": props.id(row), "data-selected": isSelected(props, row) ? 'true' : null, children: rowCells(props, columns, row) }));
+const groupPager = (props, columns, pager) => pager ? (_jsx("tr", { "data-ui": "group-pager", children: _jsxs("td", { colSpan: String(colSpan(props, columns)), children: [_jsx("span", { children: pager.label }), _jsxs("span", { "data-ui": "group-pager-actions", children: [pager.previousHref && (_jsx("a", { href: pager.previousHref, "aria-label": props.labels?.previousPage ?? 'Previous page', children: "\u2039" })), pager.nextHref && (_jsx("a", { href: pager.nextHref, "aria-label": props.labels?.nextPage ?? 'Next page', children: "\u203A" }))] })] }) })) : null;
+const groupRows = (props, columns, group, depth) => (_jsxs(_Fragment, { children: [_jsx("tr", { "data-ui": "group-row", "data-group": group.id, "data-depth": String(depth), children: _jsxs("th", { "data-ui": "group-cell", colSpan: String(colSpan(props, columns)), scope: "rowgroup", children: [_jsx("span", { "data-ui": "group-indent", style: `--kv-group-depth: ${depth}`, "aria-hidden": "true" }), group.href ? (_jsx("a", { "data-ui": "group-link", href: group.href, children: group.label })) : (_jsx("span", { "data-ui": "group-link", children: group.label })), group.count !== undefined && _jsx("span", { "data-ui": "group-count", children: String(group.count) })] }) }), each(group.rows ?? [], props.id, (row) => tableRow(props, columns, row)), each(group.children ?? [], (child) => child.id, (child) => groupRows(props, columns, child, depth + 1)), groupPager(props, columns, group.pager)] }));
+export const DataTable = (props) => {
+    const columns = visibleColumns(props);
+    const groups = props.groups ?? [];
+    const hasRows = props.rows.length > 0 || groups.length > 0;
+    const content = hasRows ? (_jsx("div", { "data-ui": "table-scroll", "data-framed": props.title ? 'false' : null, "data-responsive": props.responsive ?? 'scroll', "data-gutter": props.gutter === 'compact' ? 'compact' : null, children: _jsxs("table", { "data-ui": "table", "aria-label": props.caption ? null : (props.title ?? null), children: [!!props.caption && _jsx("caption", { "data-ui": "table-caption", children: props.caption }), _jsx("thead", { children: _jsxs("tr", { children: [selectionHeader(props), each(columns, (column) => column.key, (column) => columnHeader(column, props.labels))] }) }), _jsx("tbody", { children: groups.length > 0
+                        ? each(groups, (group) => group.id, (group) => groupRows(props, columns, group, 0))
+                        : each(props.rows, props.id, (row) => tableRow(props, columns, row)) })] }) })) : (_jsx(EmptyState, { title: props.emptyTitle ?? 'No records', message: props.emptyMessage ?? 'There is nothing to show yet.', actions: props.emptyActions }));
+    return props.title ? (_jsx(Surface, { title: props.title, actions: props.actions, padding: "none", body: content })) : (content);
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/data-table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/data-table/index.tsx"],"names":[],"mappings":"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"}

package/dist/patterns/data-table/styles.css

@@ -0,0 +1,269 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="table-scroll"] {
+    width: 100%;
+    overflow-x: auto;
+    border: 1px solid var(--kv-panel-border);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-table-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="table"] {
+    width: 100%;
+    min-width: 38rem;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="table-scroll"][data-framed="false"],
+  :where([data-kv-design-system]) [data-ui="list-page"] [data-ui="table-scroll"][data-framed="false"] {
+    width: auto;
+    margin-inline: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  :where([data-kv-design-system]) [data-ui="table-caption"] {
+    padding: var(--kv-space-3);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+    text-align: left;
+  }
+
+  :where([data-kv-design-system]) [data-ui="col"] {
+    height: var(--kv-table-header-height);
+    padding: 0 var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-table-border);
+    background: var(--kv-table-header-bg);
+    color: var(--kv-table-header-text);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-semibold);
+    letter-spacing: 0;
+    text-align: left;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  :where([data-kv-design-system]) [data-ui="select-col"],
+  :where([data-kv-design-system]) [data-ui="select-cell"] {
+    width: 3.5rem;
+    min-width: 3.5rem;
+    max-width: 3.5rem;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  :where([data-kv-design-system]) [data-ui="select-col"] {
+    height: var(--kv-table-header-height);
+    padding: 0 var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-table-border);
+    background: var(--kv-table-header-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="select-cell"] {
+    min-width: 3.5rem;
+    height: var(--kv-row-height);
+    padding: 0.4375rem var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-table-border);
+    background: var(--kv-table-row-bg);
+    vertical-align: middle;
+  }
+
+  :where([data-kv-design-system]) [data-ui="select-all"],
+  :where([data-kv-design-system]) [data-ui="row-select"] {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    accent-color: var(--kv-color-accent);
+  }
+
+  :where([data-kv-design-system]) [data-ui="sort-link"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kv-space-1);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="sort-link"]:hover {
+    color: var(--kv-color-accent);
+  }
+
+  :where([data-kv-design-system]) [data-ui="sort-icon"] {
+    color: var(--kv-color-accent);
+    font-size: var(--kv-text-xs);
+    line-height: 1;
+  }
+
+  :where([data-kv-design-system]) [data-ui="col"][data-align="end"],
+  :where([data-kv-design-system]) [data-ui="cell"][data-align="end"] {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+  }
+
+  :where([data-kv-design-system]) [data-ui="row"] {
+    position: relative;
+    height: var(--kv-row-height);
+    transition: background var(--kv-motion-fast);
+  }
+
+  :where([data-kv-design-system]) [data-ui="row"]:hover {
+    background: transparent;
+  }
+
+  :where([data-kv-design-system]) [data-ui="row"]:hover [data-ui="cell"],
+  :where([data-kv-design-system]) [data-ui="row"]:hover [data-ui="select-cell"] {
+    background: var(--kv-table-row-hover);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="row"][data-selected="true"]:not(:has([data-ui="row-select"]))
+    [data-ui="cell"],
+  :where([data-kv-design-system]) [data-ui="row"]:has([data-ui="row-select"]:checked) [data-ui="cell"],
+  :where([data-kv-design-system])
+    [data-ui="row"]:has([data-ui="row-select"]:checked)
+    [data-ui="select-cell"] {
+    background: var(--kv-table-row-selected);
+  }
+
+  :where([data-kv-design-system]) [data-ui="group-row"] {
+    height: var(--kv-table-header-height);
+  }
+
+  :where([data-kv-design-system]) [data-ui="group-cell"] {
+    padding: var(--kv-space-2) var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-table-border);
+    background: var(--kv-table-header-bg);
+    color: var(--kv-text-main);
+    font-size: var(--kv-text-sm);
+    font-weight: var(--kv-weight-semibold);
+    text-align: left;
+  }
+
+  :where([data-kv-design-system]) [data-ui="group-link"] {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+    color: inherit;
+    text-decoration: none;
+    vertical-align: middle;
+  }
+
+  :where([data-kv-design-system]) a[data-ui="group-link"]:hover {
+    color: var(--kv-color-accent);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+
+  :where([data-kv-design-system]) [data-ui="group-indent"] {
+    display: inline-block;
+    width: calc(var(--kv-group-depth, 0) * var(--kv-space-5));
+    min-width: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="group-count"] {
+    display: inline-grid;
+    min-width: 1.625rem;
+    margin-left: var(--kv-space-2);
+    padding: 0 var(--kv-space-2);
+    border-radius: var(--kv-radius-full);
+    background: var(--kv-interactive-disabled);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: 1.5;
+    text-align: center;
+  }
+
+  :where([data-kv-design-system]) [data-ui="group-pager"] td {
+    padding: var(--kv-space-2) var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-table-border);
+    background: var(--kv-table-row-bg);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+  }
+
+  :where([data-kv-design-system]) [data-ui="group-pager-actions"] {
+    display: inline-flex;
+    gap: var(--kv-space-1);
+    margin-left: var(--kv-space-3);
+  }
+
+  :where([data-kv-design-system]) [data-ui="group-pager-actions"] a {
+    display: inline-grid;
+    place-items: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 1px solid var(--kv-border-default);
+    border-radius: var(--kv-radius-sm);
+    color: var(--kv-text-secondary);
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="cell"] {
+    max-width: 24rem;
+    height: var(--kv-row-height);
+    padding: 0.4375rem var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-table-border);
+    background: var(--kv-table-row-bg);
+    color: var(--kv-text-secondary);
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-kv-design-system]) [data-ui="cell"][data-priority="primary"] {
+    color: var(--kv-text-main);
+    font-weight: var(--kv-weight-semibold);
+  }
+
+  :where([data-kv-design-system]) [data-ui="cell"][data-linked="true"] {
+    padding: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="row-link"] {
+    display: flex;
+    min-height: calc(var(--kv-row-height) - 1px);
+    align-items: center;
+    padding: 0.4375rem var(--kv-space-3);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="row-link"]:hover {
+    color: var(--kv-color-accent);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+
+  :where([data-kv-design-system]) [data-ui="row-link"]::after {
+    position: absolute;
+    inset: 0;
+    content: "";
+  }
+
+  :where([data-kv-design-system]) [data-ui="row-select"] {
+    position: relative;
+    z-index: 1;
+  }
+
+  :where([data-kv-design-system]) [data-ui="row"]:focus-within {
+    outline: 2px solid var(--kv-color-focus);
+    outline-offset: -2px;
+  }
+
+  :where([data-kv-design-system]) [data-ui="row-link"]:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="cell"][data-align="end"] [data-ui="row-link"] {
+    justify-content: flex-end;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="table-scroll"][data-gutter="compact"]
+    [data-ui="cell"]:not([data-linked="true"]),
+  :where([data-kv-design-system]) [data-ui="table-scroll"][data-gutter="compact"] [data-ui="row-link"] {
+    padding-block: 0.3125rem;
+  }
+}