@marianmeres/stuic 3.161.0 → 3.162.0

package/dist/components/DataTable/DataTable.svelte

@@ -98,6 +98,54 @@
 		/** Callback when a row is clicked */
 		onRowClick?: (row: T, index: number) => void;
 
+		/**
+		 * Where this row's primary action navigates. When it returns a href for a row, the
+		 * content of that row's "lead" cell is wrapped in an anchor -- which is what makes a
+		 * clickable row keyboard-, middle- and modifier-click-reachable.
+		 *
+		 * Return `undefined` for a row with no destination (a placeholder, a row still
+		 * minting its id) -- that row's lead cell renders exactly as it does today.
+		 *
+		 * Independent of `onRowClick`: supply both and the anchor handles the keyboard and
+		 * modified clicks while `onRowClick` keeps handling a plain click anywhere else on
+		 * the row -- the row click handler ignores events originating inside an anchor, so
+		 * the two never double-fire. (Consequence: a plain click on the lead cell navigates
+		 * via the href and does NOT call `onRowClick` -- point both at the same destination.)
+		 */
+		rowHref?: (row: T, index: number) => string | undefined;
+		/**
+		 * Which column is the "lead" cell for `rowHref`. Defaults to the first column in
+		 * `columns`. On mobile, if that column is `hideOnMobile`, the first visible card
+		 * field is used instead (so the card keeps a keyboard-reachable link).
+		 */
+		rowHrefColumn?: string;
+		/** Additional CSS classes for the anchor generated by `rowHref`. */
+		classRowLink?: string;
+
+		/**
+		 * Make the desktop `<tr>` itself focusable and Enter-activatable.
+		 *
+		 * For a row whose action is NOT a navigation -- prefer `rowHref` when it is, since a
+		 * real link is better in every respect (tab order, `Enter`, middle/cmd-click, "copy
+		 * link address", and an announcement of where it goes).
+		 *
+		 * Deliberately does NOT set `role="button"`: a `<tr>` carries an implicit `row` role
+		 * that the table's own structure depends on, and overriding it detaches the row from
+		 * the table for assistive technology. The row stays a row; it merely becomes focusable.
+		 *
+		 * Also deliberately `Enter`-only, unlike the mobile card (which IS a `role="button"`,
+		 * where `Space` is expected). Taking `Space` -- page scroll -- away from a table is a
+		 * worse trade than the one the card makes.
+		 *
+		 * No-op unless `onRowClick` or `selectOnRowClick` is set.
+		 */
+		rowActivatable?: boolean;
+		/**
+		 * Accessible name for an activatable row, e.g. `(row) => "Open " + row.name`.
+		 * Only applied when the row is actually activatable.
+		 */
+		rowLabel?: (row: T, index: number) => string | undefined;
+
 		/** Show loading state (spinner overlay + reduced opacity) */
 		loading?: boolean;
 
@@ -203,6 +251,11 @@
 		selectedAll = $bindable(false),
 		excluded = $bindable(new Set()),
 		onRowClick,
+		rowHref,
+		rowHrefColumn,
+		classRowLink,
+		rowActivatable = false,
+		rowLabel,
 		loading = false,
 		cell,
 		row,
@@ -342,22 +395,46 @@
 		return allOnPageSelected;
 	});
 
-	// --- Row click ---
-	function handleRowClick(row: T, index: number, e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		if (
+	// --- Row click / activation ---
+
+	// A row is a big target that legitimately contains its own controls. Anything that
+	// originates inside one of those is that control's business, not the row's - this
+	// guards the click handler AND both keydown handlers (Enter on a focused lead link
+	// must navigate, not fire onRowClick; Space on a focused checkbox must toggle it).
+	function isInteractiveTarget(e: Event): boolean {
+		const target = e.target as HTMLElement | null;
+		if (!target?.closest) return false;
+		return !!(
 			target.closest('input[type="checkbox"]') ||
 			target.closest("button") ||
 			target.closest("a")
-		) {
-			return;
-		}
+		);
+	}
+
+	function activateRow(row: T, index: number) {
 		if (selectable && selectOnRowClick) {
 			toggleSelectRow(getRowId(row, index));
 		}
 		onRowClick?.(row, index);
 	}
 
+	function handleRowClick(row: T, index: number, e: MouseEvent) {
+		if (isInteractiveTarget(e)) return;
+		activateRow(row, index);
+	}
+
+	/**
+	 * Shared by the desktop `<tr>` (Enter only) and the mobile card (Enter + Space, since
+	 * the card actually is a `role="button"`).
+	 */
+	function handleRowKeydown(row: T, index: number, e: KeyboardEvent, withSpace: boolean) {
+		if (!rowClickable) return;
+		if (e.key !== "Enter" && !(withSpace && e.key === " ")) return;
+		if (isInteractiveTarget(e)) return;
+		e.preventDefault();
+		activateRow(row, index);
+	}
+
 	// --- Cell value helpers ---
 	function getCellValue(row: T, column: DataTableColumn<T>): any {
 		return column.key.split(".").reduce((obj: any, k) => obj?.[k], row);
@@ -373,8 +450,45 @@
 	let rootClass = $derived(unstyled ? classProp : twMerge("stuic-data-table", classProp));
 
 	let mobileColumns = $derived(columns.filter((col) => !col.hideOnMobile));
+
+	// --- Row link / activation derivations ---
+	let rowClickable = $derived(!!(onRowClick || selectOnRowClick));
+	let rowIsActivatable = $derived(rowActivatable && rowClickable);
+
+	// The lead cell is the one whose content gets wrapped in the `rowHref` anchor.
+	let leadColumnKey = $derived(rowHrefColumn ?? columns[0]?.key);
+	// A `hideOnMobile` lead column would leave the card with no link at all, so there we
+	// fall back to the first visible field rather than silently dropping the anchor.
+	let mobileLeadColumnKey = $derived(
+		mobileColumns.some((col) => col.key === leadColumnKey)
+			? leadColumnKey
+			: mobileColumns[0]?.key
+	);
+
+	let rowLinkClass = $derived(
+		unstyled ? classRowLink : twMerge("stuic-data-table-row-link", classRowLink)
+	);
 </script>
 
+<!--
+	The rendered content of a single cell, shared by both layouts so that a `rowHref`
+	anchor wraps exactly what the cell would have rendered anyway (a consumer `cell`
+	snippet included).
+-->
+{#snippet cellBody(
+	col: DataTableColumn<T>,
+	rowData: T,
+	value: any,
+	rowIndex: number,
+	variant: "desktop" | "mobile"
+)}
+	{#if cell}
+		{@render cell({ column: col, row: rowData, value, rowIndex, variant })}
+	{:else}
+		{getCellDisplay(rowData, col)}
+	{/if}
+{/snippet}
+
 <!-- Batch action bar -->
 {#if selectable && effectiveCount > 0 && batchActions}
 	<div class={!unstyled ? "stuic-data-table-batch" : undefined}>
@@ -461,16 +575,20 @@
 						{@const rowId = getRowId(rowData, rowIndex)}
 						{@const isSelected = selectable && isRowSelected(rowId)}
 						{@const selectDisabled = !!selectDisabledBy?.(rowData, rowIndex)}
+						{@const rowLink = rowHref?.(rowData, rowIndex)}
 						{#if row}
 							{@render row({ row: rowData, columns, rowIndex, isSelected })}
 						{:else}
 							<tr
 								data-hoverable={!unstyled ? "true" : undefined}
-								data-clickable={!unstyled && (onRowClick || selectOnRowClick)
-									? "true"
-									: undefined}
+								data-clickable={!unstyled && rowClickable ? "true" : undefined}
 								data-selected={!unstyled && isSelected ? "true" : undefined}
+								tabindex={rowIsActivatable ? 0 : undefined}
+								aria-label={rowIsActivatable ? rowLabel?.(rowData, rowIndex) : undefined}
 								onclick={(e) => handleRowClick(rowData, rowIndex, e)}
+								onkeydown={(e) => {
+									if (rowActivatable) handleRowKeydown(rowData, rowIndex, e, false);
+								}}
 							>
 								{#if selectable}
 									<td data-checkbox class="stuic-checkbox">
@@ -485,20 +603,17 @@
 								{/if}
 								{#each columns as col (col.key)}
 									{@const value = getCellValue(rowData, col)}
+									{@const href = col.key === leadColumnKey ? rowLink : undefined}
 									<td
 										class={col.class}
 										data-align={!unstyled && col.align ? col.align : undefined}
 									>
-										{#if cell}
-											{@render cell({
-												column: col,
-												row: rowData,
-												value,
-												rowIndex,
-												variant: "desktop",
-											})}
+										{#if href}
+											<a class={rowLinkClass} {href}>
+												{@render cellBody(col, rowData, value, rowIndex, "desktop")}
+											</a>
 										{:else}
-											{getCellDisplay(rowData, col)}
+											{@render cellBody(col, rowData, value, rowIndex, "desktop")}
 										{/if}
 									</td>
 								{/each}
@@ -531,6 +646,7 @@
 				{@const rowId = getRowId(rowData, rowIndex)}
 				{@const isSelected = selectable && isRowSelected(rowId)}
 				{@const selectDisabled = !!selectDisabledBy?.(rowData, rowIndex)}
+				{@const rowLink = rowHref?.(rowData, rowIndex)}
 				{#if mobileRow}
 					{@render mobileRow({
 						row: rowData,
@@ -542,25 +658,12 @@
 					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 					<div
 						class={!unstyled ? "stuic-data-table-card" : undefined}
-						data-clickable={!unstyled && (onRowClick || selectOnRowClick)
-							? "true"
-							: undefined}
+						data-clickable={!unstyled && rowClickable ? "true" : undefined}
 						data-selected={!unstyled && isSelected ? "true" : undefined}
-						role={onRowClick || selectOnRowClick ? "button" : undefined}
-						tabindex={onRowClick || selectOnRowClick ? 0 : undefined}
+						role={rowClickable ? "button" : undefined}
+						tabindex={rowClickable ? 0 : undefined}
 						onclick={(e) => handleRowClick(rowData, rowIndex, e)}
-						onkeydown={(e) => {
-							if (
-								(onRowClick || selectOnRowClick) &&
-								(e.key === "Enter" || e.key === " ")
-							) {
-								e.preventDefault();
-								if (selectable && selectOnRowClick) {
-									toggleSelectRow(rowId);
-								}
-								onRowClick?.(rowData, rowIndex);
-							}
-						}}
+						onkeydown={(e) => handleRowKeydown(rowData, rowIndex, e, true)}
 					>
 						{#if selectable}
 							<div
@@ -579,6 +682,7 @@
 						{/if}
 						{#each mobileColumns as col (col.key)}
 							{@const value = getCellValue(rowData, col)}
+							{@const href = col.key === mobileLeadColumnKey ? rowLink : undefined}
 							<div class={!unstyled ? "stuic-data-table-card-row" : undefined}>
 								<span class={!unstyled ? "stuic-data-table-card-label" : undefined}>
 									{#if isTHCNotEmpty(col.label)}
@@ -588,16 +692,12 @@
 									{/if}
 								</span>
 								<span class={!unstyled ? "stuic-data-table-card-value" : undefined}>
-									{#if cell}
-										{@render cell({
-											column: col,
-											row: rowData,
-											value,
-											rowIndex,
-											variant: "mobile",
-										})}
+									{#if href}
+										<a class={rowLinkClass} {href}>
+											{@render cellBody(col, rowData, value, rowIndex, "mobile")}
+										</a>
 									{:else}
-										{getCellDisplay(rowData, col)}
+										{@render cellBody(col, rowData, value, rowIndex, "mobile")}
 									{/if}
 								</span>
 							</div>

package/dist/components/DataTable/DataTable.svelte.d.ts

@@ -58,6 +58,52 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
     excluded?: Set<string | number>;
     /** Callback when a row is clicked */
     onRowClick?: (row: T, index: number) => void;
+    /**
+     * Where this row's primary action navigates. When it returns a href for a row, the
+     * content of that row's "lead" cell is wrapped in an anchor -- which is what makes a
+     * clickable row keyboard-, middle- and modifier-click-reachable.
+     *
+     * Return `undefined` for a row with no destination (a placeholder, a row still
+     * minting its id) -- that row's lead cell renders exactly as it does today.
+     *
+     * Independent of `onRowClick`: supply both and the anchor handles the keyboard and
+     * modified clicks while `onRowClick` keeps handling a plain click anywhere else on
+     * the row -- the row click handler ignores events originating inside an anchor, so
+     * the two never double-fire. (Consequence: a plain click on the lead cell navigates
+     * via the href and does NOT call `onRowClick` -- point both at the same destination.)
+     */
+    rowHref?: (row: T, index: number) => string | undefined;
+    /**
+     * Which column is the "lead" cell for `rowHref`. Defaults to the first column in
+     * `columns`. On mobile, if that column is `hideOnMobile`, the first visible card
+     * field is used instead (so the card keeps a keyboard-reachable link).
+     */
+    rowHrefColumn?: string;
+    /** Additional CSS classes for the anchor generated by `rowHref`. */
+    classRowLink?: string;
+    /**
+     * Make the desktop `<tr>` itself focusable and Enter-activatable.
+     *
+     * For a row whose action is NOT a navigation -- prefer `rowHref` when it is, since a
+     * real link is better in every respect (tab order, `Enter`, middle/cmd-click, "copy
+     * link address", and an announcement of where it goes).
+     *
+     * Deliberately does NOT set `role="button"`: a `<tr>` carries an implicit `row` role
+     * that the table's own structure depends on, and overriding it detaches the row from
+     * the table for assistive technology. The row stays a row; it merely becomes focusable.
+     *
+     * Also deliberately `Enter`-only, unlike the mobile card (which IS a `role="button"`,
+     * where `Space` is expected). Taking `Space` -- page scroll -- away from a table is a
+     * worse trade than the one the card makes.
+     *
+     * No-op unless `onRowClick` or `selectOnRowClick` is set.
+     */
+    rowActivatable?: boolean;
+    /**
+     * Accessible name for an activatable row, e.g. `(row) => "Open " + row.name`.
+     * Only applied when the row is actually activatable.
+     */
+    rowLabel?: (row: T, index: number) => string | undefined;
     /** Show loading state (spinner overlay + reduced opacity) */
     loading?: boolean;
     /** Custom cell renderer snippet (rendered in both desktop table and mobile card layouts; use `variant` to tell them apart) */

package/dist/components/DataTable/README.md

@@ -143,6 +143,89 @@ New records inserted while all-pages mode is active are implicitly selected (the
 
 **Filter changes:** when filters change in the consumer, reset the bound selection stores (`selected`, `selectedAll`, `excluded`) explicitly — DataTable doesn't track which filter produced the current state.
 
+### Clickable Rows That Work Without a Mouse
+
+`onRowClick` alone makes a row **mouse-only** on the desktop table layout: a `<tr>` is not
+focusable, so nothing about the row is reachable by keyboard. (The mobile card layout has
+always been fine — it is a `<div role="button">`.) Two opt-in props close that gap, and
+they are not alternatives:
+
+| Your row action is…             | Use              |
+| ------------------------------- | ---------------- |
+| a navigation (it has a URL)     | `rowHref`        |
+| anything else (drawer, expand…) | `rowActivatable` |
+
+#### `rowHref` — the lead cell becomes a real link
+
+```svelte
+<DataTable
+	{columns}
+	{data}
+	getRowId={(row) => row.id}
+	rowHref={(row) => `/users/${row.id}`}
+/>
+```
+
+The content of the row's **lead cell** (the first column by default, or `rowHrefColumn`)
+is wrapped in an `<a href>` — including whatever your `cell` snippet renders for it, and
+respecting the column's `renderValue`. A link gets, for free and correctly: keyboard focus
+in the right tab order, `Enter`, ⌘/middle-click and "open in new tab", "copy link address",
+and a screen-reader announcement of _where it goes_ rather than an anonymous "button".
+
+Return `undefined` for a row with no destination (a placeholder, a row still minting its
+id) — that row's lead cell renders exactly as it would without `rowHref`.
+
+`rowHref` composes with `onRowClick`: the row click handler ignores clicks originating
+inside an anchor, so the two never double-fire. The consequence is worth stating — a plain
+click **on the lead cell** navigates via the href and does _not_ call `onRowClick`, so point
+both at the same destination.
+
+On mobile the same field is linked. If the lead column is `hideOnMobile`, the card links its
+first visible field instead, rather than silently dropping the anchor.
+
+By default the link looks like the text it replaced (`color: inherit`, no underline until
+hover) — a table where every lead cell is blue-and-underlined is a worse table. Three CSS
+variables and `classRowLink` are there if you disagree.
+
+#### `rowActivatable` — the `<tr>` itself
+
+For a row whose action has no address:
+
+```svelte
+<DataTable
+	{columns}
+	{data}
+	onRowClick={(row) => openDrawer(row)}
+	rowActivatable
+	rowLabel={(row) => `Open ${row.name}`}
+/>
+```
+
+The `<tr>` gets `tabindex="0"`, an optional `aria-label` from `rowLabel`, and a
+`:focus-visible` ring. It is a no-op unless `onRowClick` or `selectOnRowClick` is set.
+
+Two deliberate choices, so nobody "fixes" them later:
+
+- **No `role="button"` on the `<tr>`.** A `<tr>` carries an implicit `row` role that the
+  table's own structure depends on. Overriding it detaches the row from the table for
+  assistive technology — row/column counts stop making sense and cell-by-cell navigation
+  breaks. The row stays a row; it merely becomes focusable. (The mobile card is a `<div>`,
+  so `role="button"` is correct _there_.)
+- **`Enter` only, no `Space`.** `Space` on a focused row scrolls the page, and a row is not
+  a button — taking `Space` away from a table is a worse trade than the one the card makes.
+
+With `selectable` + `selectOnRowClick`, `Enter` toggles selection _and_ fires `onRowClick`,
+matching the mobile card.
+
+#### Both are opt-in
+
+With neither prop set, the rendered markup is exactly what it was before they existed. A
+consumer who replaces the whole `<tr>` with the `row` snippet opts out of both and owns the
+keyboard story themselves.
+
+Interactive descendants always win: a click, `Enter` or `Space` that originates inside a
+`<button>`, an `<a>` or a checkbox in the row is that control's business, not the row's.
+
 ### Custom Cell Rendering
 
 The `cell` snippet is used for both desktop and mobile layouts. Use the `variant` param if rendering differs per layout.
@@ -204,33 +287,38 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 
 ## Props
 
-| Prop                  | Type                               | Default       | Description                                                              |
-| --------------------- | ---------------------------------- | ------------- | ------------------------------------------------------------------------ |
-| `columns`             | `DataTableColumn<T>[]`             | required      | Column definitions                                                       |
-| `data`                | `T[]`                              | required      | Array of row data                                                        |
-| `getRowId`            | `(row, index) => string \| number` | `(_, i) => i` | Row ID extractor                                                         |
-| `paging`              | `PagingCalcResult`                 | -             | Paging state (from `@marianmeres/paging-store`)                          |
-| `onPageChange`        | `(offset: number) => void`         | -             | Called with the new offset when the user navigates pages                 |
-| `selectable`          | `boolean`                          | `false`       | Enable selection checkboxes                                              |
-| `selected`            | `Set<string \| number>`            | `new Set()`   | Selected row IDs (bindable)                                              |
-| `selectOnRowClick`    | `boolean`                          | `false`       | Clicking anywhere on a row toggles its selection                         |
-| `selectDisabledBy`    | `(row, index) => boolean`          | -             | Return `true` to disable selection for a specific row                    |
-| `allowSelectAllPages` | `boolean`                          | `false`       | Show a banner offering "select all results" across paged data            |
-| `selectedAll`         | `boolean`                          | `false`       | All-pages mode flag (bindable). In this mode `excluded` drives selection |
-| `excluded`            | `Set<string \| number>`            | `new Set()`   | Deselected row IDs while in all-pages mode (bindable)                    |
-| `onRowClick`          | `(row, index) => void`             | -             | Row click callback                                                       |
-| `loading`             | `boolean`                          | `false`       | Show loading overlay                                                     |
-| `small`               | `boolean`                          | `false`       | Force mobile/card layout regardless of viewport                          |
-| `t`                   | `TranslateFn`                      | built-in      | Optional translation function                                            |
-| `cell`                | `Snippet`                          | -             | Custom cell renderer (desktop + mobile)                                  |
-| `row`                 | `Snippet`                          | -             | Custom desktop `<tr>` renderer (overrides default row)                   |
-| `mobileRow`           | `Snippet`                          | -             | Custom mobile card renderer                                              |
-| `batchActions`        | `Snippet`                          | -             | Batch action bar content                                                 |
-| `selectAllBanner`     | `Snippet`                          | -             | Override default "select all across pages" banner                        |
-| `empty`               | `Snippet`                          | -             | Custom empty state                                                       |
-| `unstyled`            | `boolean`                          | `false`       | Skip default styling                                                     |
-| `class`               | `string`                           | -             | Additional CSS classes                                                   |
-| `el`                  | `HTMLDivElement`                   | -             | Bindable element ref                                                     |
+| Prop                  | Type                                  | Default       | Description                                                                |
+| --------------------- | ------------------------------------- | ------------- | -------------------------------------------------------------------------- |
+| `columns`             | `DataTableColumn<T>[]`                | required      | Column definitions                                                         |
+| `data`                | `T[]`                                 | required      | Array of row data                                                          |
+| `getRowId`            | `(row, index) => string \| number`    | `(_, i) => i` | Row ID extractor                                                           |
+| `paging`              | `PagingCalcResult`                    | -             | Paging state (from `@marianmeres/paging-store`)                            |
+| `onPageChange`        | `(offset: number) => void`            | -             | Called with the new offset when the user navigates pages                   |
+| `selectable`          | `boolean`                             | `false`       | Enable selection checkboxes                                                |
+| `selected`            | `Set<string \| number>`               | `new Set()`   | Selected row IDs (bindable)                                                |
+| `selectOnRowClick`    | `boolean`                             | `false`       | Clicking anywhere on a row toggles its selection                           |
+| `selectDisabledBy`    | `(row, index) => boolean`             | -             | Return `true` to disable selection for a specific row                      |
+| `allowSelectAllPages` | `boolean`                             | `false`       | Show a banner offering "select all results" across paged data              |
+| `selectedAll`         | `boolean`                             | `false`       | All-pages mode flag (bindable). In this mode `excluded` drives selection   |
+| `excluded`            | `Set<string \| number>`               | `new Set()`   | Deselected row IDs while in all-pages mode (bindable)                      |
+| `onRowClick`          | `(row, index) => void`                | -             | Row click callback                                                         |
+| `rowHref`             | `(row, index) => string \| undefined` | -             | Wrap the lead cell's content in an `<a href>` (keyboard/⌘-click reachable) |
+| `rowHrefColumn`       | `string`                              | first column  | Which column is the lead cell for `rowHref`                                |
+| `classRowLink`        | `string`                              | -             | Extra classes for the `rowHref` anchor                                     |
+| `rowActivatable`      | `boolean`                             | `false`       | Make the desktop `<tr>` focusable + `Enter`-activatable (no `role`)        |
+| `rowLabel`            | `(row, index) => string \| undefined` | -             | Accessible name for an activatable row                                     |
+| `loading`             | `boolean`                             | `false`       | Show loading overlay                                                       |
+| `small`               | `boolean`                             | `false`       | Force mobile/card layout regardless of viewport                            |
+| `t`                   | `TranslateFn`                         | built-in      | Optional translation function                                              |
+| `cell`                | `Snippet`                             | -             | Custom cell renderer (desktop + mobile)                                    |
+| `row`                 | `Snippet`                             | -             | Custom desktop `<tr>` renderer (overrides default row)                     |
+| `mobileRow`           | `Snippet`                             | -             | Custom mobile card renderer                                                |
+| `batchActions`        | `Snippet`                             | -             | Batch action bar content                                                   |
+| `selectAllBanner`     | `Snippet`                             | -             | Override default "select all across pages" banner                          |
+| `empty`               | `Snippet`                             | -             | Custom empty state                                                         |
+| `unstyled`            | `boolean`                             | `false`       | Skip default styling                                                       |
+| `class`               | `string`                              | -             | Additional CSS classes                                                     |
+| `el`                  | `HTMLDivElement`                      | -             | Bindable element ref                                                       |
 
 ### Snippet signatures
 
@@ -262,29 +350,34 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 
 ## CSS Variables
 
-| Variable                                  | Default                               | Description                  |
-| ----------------------------------------- | ------------------------------------- | ---------------------------- |
-| `--stuic-data-table-radius`               | `var(--radius-md)`                    | Border radius                |
-| `--stuic-data-table-border-color`         | `var(--stuic-color-border)`           | Border color                 |
-| `--stuic-data-table-header-bg`            | `var(--stuic-color-muted)`            | Header background            |
-| `--stuic-data-table-header-color`         | `var(--stuic-color-muted-foreground)` | Header text                  |
-| `--stuic-data-table-header-font-size`     | `0.875rem`                            | Header font size             |
-| `--stuic-data-table-header-font-weight`   | `var(--font-weight-semibold)`         | Header font weight           |
-| `--stuic-data-table-header-padding-x`     | `0.75rem`                             | Header horizontal padding    |
-| `--stuic-data-table-header-padding-y`     | `0.5rem`                              | Header vertical padding      |
-| `--stuic-data-table-row-bg`               | `transparent`                         | Row background               |
-| `--stuic-data-table-row-bg-hover`         | `var(--stuic-color-muted)`            | Row hover background         |
-| `--stuic-data-table-row-bg-selected`      | `color-mix(primary 10%)`              | Selected row background      |
-| `--stuic-data-table-row-border-color`     | `var(--stuic-color-border)`           | Row border color             |
-| `--stuic-data-table-cell-padding-x`       | `0.75rem`                             | Cell horizontal padding      |
-| `--stuic-data-table-cell-padding-y`       | `0.75rem`                             | Cell vertical padding        |
-| `--stuic-data-table-cell-font-size`       | `0.875rem`                            | Cell font size               |
-| `--stuic-data-table-loading-opacity`      | `0.5`                                 | Loading state opacity        |
-| `--stuic-data-table-card-bg`              | `var(--stuic-color-background)`       | Mobile card background       |
-| `--stuic-data-table-card-border-color`    | `var(--stuic-color-border)`           | Mobile card border           |
-| `--stuic-data-table-card-radius`          | `var(--radius-md)`                    | Mobile card radius           |
-| `--stuic-data-table-card-padding`         | `0.75rem`                             | Mobile card padding          |
-| `--stuic-data-table-card-gap`             | `0.5rem`                              | Gap between mobile cards     |
-| `--stuic-data-table-select-all-bg`        | `color-mix(primary 10%)`              | Select-all banner background |
-| `--stuic-data-table-select-all-padding-x` | `0.75rem`                             | Banner horizontal padding    |
-| `--stuic-data-table-select-all-padding-y` | `0.5rem`                              | Banner vertical padding      |
+| Variable                                       | Default                               | Description                  |
+| ---------------------------------------------- | ------------------------------------- | ---------------------------- |
+| `--stuic-data-table-radius`                    | `var(--radius-md)`                    | Border radius                |
+| `--stuic-data-table-border-color`              | `var(--stuic-color-border)`           | Border color                 |
+| `--stuic-data-table-header-bg`                 | `var(--stuic-color-muted)`            | Header background            |
+| `--stuic-data-table-header-color`              | `var(--stuic-color-muted-foreground)` | Header text                  |
+| `--stuic-data-table-header-font-size`          | `0.875rem`                            | Header font size             |
+| `--stuic-data-table-header-font-weight`        | `var(--font-weight-semibold)`         | Header font weight           |
+| `--stuic-data-table-header-padding-x`          | `0.75rem`                             | Header horizontal padding    |
+| `--stuic-data-table-header-padding-y`          | `0.5rem`                              | Header vertical padding      |
+| `--stuic-data-table-row-bg`                    | `transparent`                         | Row background               |
+| `--stuic-data-table-row-bg-hover`              | `var(--stuic-color-muted)`            | Row hover background         |
+| `--stuic-data-table-row-bg-selected`           | `color-mix(primary 10%)`              | Selected row background      |
+| `--stuic-data-table-row-border-color`          | `var(--stuic-color-border)`           | Row border color             |
+| `--stuic-data-table-row-link-color`            | `inherit`                             | `rowHref` anchor color       |
+| `--stuic-data-table-row-link-decoration`       | `none`                                | `rowHref` anchor decoration  |
+| `--stuic-data-table-row-link-decoration-hover` | `underline`                           | …on hover                    |
+| `--stuic-data-table-row-ring-width`            | `3px`                                 | Activatable row focus ring   |
+| `--stuic-data-table-row-ring-color`            | `var(--stuic-color-ring)`             | Activatable row ring color   |
+| `--stuic-data-table-cell-padding-x`            | `0.75rem`                             | Cell horizontal padding      |
+| `--stuic-data-table-cell-padding-y`            | `0.75rem`                             | Cell vertical padding        |
+| `--stuic-data-table-cell-font-size`            | `0.875rem`                            | Cell font size               |
+| `--stuic-data-table-loading-opacity`           | `0.5`                                 | Loading state opacity        |
+| `--stuic-data-table-card-bg`                   | `var(--stuic-color-background)`       | Mobile card background       |
+| `--stuic-data-table-card-border-color`         | `var(--stuic-color-border)`           | Mobile card border           |
+| `--stuic-data-table-card-radius`               | `var(--radius-md)`                    | Mobile card radius           |
+| `--stuic-data-table-card-padding`              | `0.75rem`                             | Mobile card padding          |
+| `--stuic-data-table-card-gap`                  | `0.5rem`                              | Gap between mobile cards     |
+| `--stuic-data-table-select-all-bg`             | `color-mix(primary 10%)`              | Select-all banner background |
+| `--stuic-data-table-select-all-padding-x`      | `0.75rem`                             | Banner horizontal padding    |
+| `--stuic-data-table-select-all-padding-y`      | `0.5rem`                              | Banner vertical padding      |

package/dist/components/DataTable/index.css

@@ -24,6 +24,15 @@
 	--stuic-data-table-row-bg-selected: color-mix(in srgb, var(--stuic-color-primary) 10%, var(--stuic-color-background));
 	--stuic-data-table-row-border-color: var(--stuic-color-border);
 
+	/* Row link (rowHref) — defaults to "looks like the text it replaced" */
+	--stuic-data-table-row-link-color: inherit;
+	--stuic-data-table-row-link-decoration: none;
+	--stuic-data-table-row-link-decoration-hover: underline;
+
+	/* Focus ring for an activatable row (rowActivatable) */
+	--stuic-data-table-row-ring-width: 3px;
+	--stuic-data-table-row-ring-color: var(--stuic-color-ring);
+
 	/* Cell */
 	--stuic-data-table-cell-padding-x: 0.75rem;
 	--stuic-data-table-cell-padding-y: 0.75rem;
@@ -152,6 +161,31 @@
 		);
 	}
 
+	/*
+	   `rowActivatable` puts tabindex on the <tr>, and a focusable element with no
+	   visible ring is worse than no tabindex at all. The negative offset keeps the
+	   ring inside the row box — an outset ring on a <tr> is clipped unpredictably
+	   by border-collapse.
+	*/
+	.stuic-data-table tbody tr:focus-visible {
+		outline: var(--stuic-data-table-row-ring-width) solid
+			var(--stuic-data-table-row-ring-color);
+		outline-offset: calc(var(--stuic-data-table-row-ring-width) * -1);
+	}
+
+	/* ============================================================================
+	   ROW LINK (rowHref)
+	   ============================================================================ */
+
+	.stuic-data-table-row-link {
+		color: var(--stuic-data-table-row-link-color);
+		text-decoration: var(--stuic-data-table-row-link-decoration);
+	}
+
+	.stuic-data-table-row-link:hover {
+		text-decoration: var(--stuic-data-table-row-link-decoration-hover);
+	}
+
 	/* ============================================================================
 	   CELL
 	   ============================================================================ */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.161.0",
+	"version": "3.162.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",