@marianmeres/stuic 3.160.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/dist/components/RegisterForm/README.md

@@ -40,36 +40,36 @@ interface RegisterFieldConfig {
 
 ## RegisterForm — Props
 
-| Prop                        | Type                                    | Default    | Description                                                                                                                                                           |
-| --------------------------- | --------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `formData`                  | `RegisterFormData`                      | empty      | Bindable form data.                                                                                                                                                   |
-| `onSubmit`                  | `(data: RegisterFormData) => void`      | required   | Called after client-side validation passes.                                                                                                                           |
-| `isSubmitting`              | `boolean`                               | `false`    | Disables the CTA during submission.                                                                                                                                   |
-| `submitDisabled`            | `boolean`                               | `false`    | Consumer-owned submit block. Disables the CTA **and** blocks `onSubmit`.                                                                                              |
-| `errors`                    | `RegisterFormValidationError[]`         | `[]`       | Field-specific server errors (merged with internal validation). See [Server errors](#server-supplied-errors).                                                         |
-| `error`                     | `string`                                | -          | General error rendered as a `DismissibleMessage` above the form.                                                                                                      |
-| `showEmail`                 | `boolean`                               | `true`     | Render the email field. `false` **unmounts** it and skips its validation.                                                                                             |
-| `showPassword`              | `boolean`                               | `true`     | Render the password field (and, transitively, the confirm field).                                                                                                     |
-| `showPasswordConfirm`       | `boolean`                               | `true`     | Render the password-confirm field. Subordinate to `showPassword`.                                                                                                     |
-| `passwordMinLength`         | `number`                                | `8`        | Minimum password length (fed into both the FieldInput attribute and the validator).                                                                                   |
-| `credentialsSlot`           | `Snippet<[{ formData, fieldError }]>`   | -          | Rendered at the credentials position (after the core fields, before bottom extra fields).                                                                             |
-| `emailFieldProps`           | `Partial<FieldInputProps>`              | -          | Passthrough props for the built-in email field.                                                                                                                       |
-| `passwordFieldProps`        | `Partial<FieldInputProps>`              | -          | Passthrough props for the built-in password field.                                                                                                                    |
-| `passwordConfirmFieldProps` | `Partial<FieldInputProps>`              | -          | Passthrough props for the built-in confirm field.                                                                                                                     |
-| `extraFields`               | `RegisterFieldConfig[]`                 | `[]`       | Declarative extra fields. Rendered as `FieldInput`s positioned top or bottom.                                                                                         |
-| `extraFieldsSlot`           | `Snippet<[{ formData, fieldError }]>`   | -          | Escape hatch for non-FieldInput extras. Rendered after declarative bottom fields.                                                                                     |
-| `topFieldsSeparator`        | `boolean`                               | auto       | Section rule below the top-position extra fields. Auto-on when they are followed by the top social block or by a `credentialsSlot` that has replaced the credentials. |
-| `submitLabel`               | `string`                                | i18n       | Override the CTA label.                                                                                                                                               |
-| `submittingLabel`           | `string`                                | i18n       | Override the CTA label while submitting.                                                                                                                              |
-| `submitButton`              | `Snippet<[{ isSubmitting, disabled }]>` | -          | Override the entire CTA section. `disabled` is `isSubmitting \|\| submitDisabled`.                                                                                    |
-| `socialLogins`              | `Snippet`                               | -          | Social/OAuth buttons. A divider is shown when set.                                                                                                                    |
-| `socialPosition`            | `"top" \| "bottom"`                     | `"bottom"` | `"top"` renders the block above the credentials, with the divider **below** the buttons.                                                                              |
-| `socialDividerLabel`        | `string \| false`                       | i18n       | Override (or hide with `false`) the divider. Defaults to `social_divider` ("or continue with") at the bottom, `social_divider_alt` ("or") at the top.                 |
-| `footer`                    | `Snippet`                               | -          | Content below the form (e.g., "Already have an account? Log in").                                                                                                     |
-| `notifications`             | `NotificationsStack`                    | -          | When set, general errors are also pushed via `notifications.error()`.                                                                                                 |
-| `t`                         | `TranslateFn`                           | English    | i18n function.                                                                                                                                                        |
-| `unstyled` / `class`        | -                                       | -          | Standard styling escape hatches.                                                                                                                                      |
-| `el`                        | `HTMLFormElement`                       | -          | Bindable form element.                                                                                                                                                |
+| Prop                        | Type                                    | Default    | Description                                                                                                                                           |
+| --------------------------- | --------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `formData`                  | `RegisterFormData`                      | empty      | Bindable form data.                                                                                                                                   |
+| `onSubmit`                  | `(data: RegisterFormData) => void`      | required   | Called after client-side validation passes.                                                                                                           |
+| `isSubmitting`              | `boolean`                               | `false`    | Disables the CTA during submission.                                                                                                                   |
+| `submitDisabled`            | `boolean`                               | `false`    | Consumer-owned submit block. Disables the CTA **and** blocks `onSubmit`.                                                                              |
+| `errors`                    | `RegisterFormValidationError[]`         | `[]`       | Field-specific server errors (merged with internal validation). See [Server errors](#server-supplied-errors).                                         |
+| `error`                     | `string`                                | -          | General error rendered as a `DismissibleMessage` above the form.                                                                                      |
+| `showEmail`                 | `boolean`                               | `true`     | Render the email field. `false` **unmounts** it and skips its validation.                                                                             |
+| `showPassword`              | `boolean`                               | `true`     | Render the password field (and, transitively, the confirm field).                                                                                     |
+| `showPasswordConfirm`       | `boolean`                               | `true`     | Render the password-confirm field. Subordinate to `showPassword`.                                                                                     |
+| `passwordMinLength`         | `number`                                | `8`        | Minimum password length (fed into both the FieldInput attribute and the validator).                                                                   |
+| `credentialsSlot`           | `Snippet<[{ formData, fieldError }]>`   | -          | Rendered at the credentials position (after the core fields, before bottom extra fields).                                                             |
+| `emailFieldProps`           | `Partial<FieldInputProps>`              | -          | Passthrough props for the built-in email field.                                                                                                       |
+| `passwordFieldProps`        | `Partial<FieldInputProps>`              | -          | Passthrough props for the built-in password field.                                                                                                    |
+| `passwordConfirmFieldProps` | `Partial<FieldInputProps>`              | -          | Passthrough props for the built-in confirm field.                                                                                                     |
+| `extraFields`               | `RegisterFieldConfig[]`                 | `[]`       | Declarative extra fields. Rendered as `FieldInput`s positioned top or bottom.                                                                         |
+| `extraFieldsSlot`           | `Snippet<[{ formData, fieldError }]>`   | -          | Escape hatch for non-FieldInput extras. Rendered after declarative bottom fields.                                                                     |
+| `topFieldsSeparator`        | `boolean`                               | `true`     | Section rule closing the top-position extra-field group. Drawn whenever at least one such field exists, whatever follows it. `false` opts out.        |
+| `submitLabel`               | `string`                                | i18n       | Override the CTA label.                                                                                                                               |
+| `submittingLabel`           | `string`                                | i18n       | Override the CTA label while submitting.                                                                                                              |
+| `submitButton`              | `Snippet<[{ isSubmitting, disabled }]>` | -          | Override the entire CTA section. `disabled` is `isSubmitting \|\| submitDisabled`.                                                                    |
+| `socialLogins`              | `Snippet`                               | -          | Social/OAuth buttons. A divider is shown when set.                                                                                                    |
+| `socialPosition`            | `"top" \| "bottom"`                     | `"bottom"` | `"top"` renders the block above the credentials, with the divider **below** the buttons.                                                              |
+| `socialDividerLabel`        | `string \| false`                       | i18n       | Override (or hide with `false`) the divider. Defaults to `social_divider` ("or continue with") at the bottom, `social_divider_alt` ("or") at the top. |
+| `footer`                    | `Snippet`                               | -          | Content below the form (e.g., "Already have an account? Log in").                                                                                     |
+| `notifications`             | `NotificationsStack`                    | -          | When set, general errors are also pushed via `notifications.error()`.                                                                                 |
+| `t`                         | `TranslateFn`                           | English    | i18n function.                                                                                                                                        |
+| `unstyled` / `class`        | -                                       | -          | Standard styling escape hatches.                                                                                                                      |
+| `el`                        | `HTMLFormElement`                       | -          | Bindable form element.                                                                                                                                |
 
 ### Imperative methods (via `bind:this`)
 
@@ -215,7 +215,7 @@ Once an external party has confirmed who the user is, the credential fields are
 
 Call `form.focusField("tenant_id")` right after the provider confirms: the button the user clicked is about to unmount, and without an explicit move focus falls to `<body>` — a keyboard user's next Tab restarts at the top of the document.
 
-Those top-position fields are closed off with a section rule here, automatically. At the form's ordinary field rhythm the last of them sits one field-gap above the first provider button and reads as a caption for it; the break says instead that the fields are settled and what follows is a choice. It turns itself on exactly when the fields are followed by something that is not another input — the top social block, or a `credentialsSlot` standing in for the whole credential block — so it survives the switch from "pick a provider" to "signing up as jane@…" without the layout moving. `topFieldsSeparator={true | false}` overrides the decision in either direction.
+Those top-position fields are closed off with a section rule. At the form's ordinary field rhythm the last of them sits one field-gap above the first provider button and reads as a caption for it; the break says instead that the workspace id is settled and what follows is the account. The rule is not conditioned on what comes next — provider buttons, a `credentialsSlot`, or the plain credentials all get it — so it does not blink in and out as this flow moves from "pick a provider" to "signing up as jane@…", and a reader of the call site does not have to work out which combination of other props switched it on. `topFieldsSeparator={false}` opts out.
 
 Other shapes the same three props cover:
 
@@ -310,7 +310,7 @@ The social block carries `data-position="top" \| "bottom"` (suppressed under `un
 
 `credentialsSlot` content is wrapped in `.stuic-register-form-credentials` (suppressed under `unstyled`) so it inherits the same bottom rhythm the fields have — the form itself is a zero-gap flex column.
 
-Top-position extra fields are wrapped in `.stuic-register-form-fields-top` (suppressed under `unstyled`), which carries `data-separator` when the rule is on. The wrapper is otherwise inert — the fields keep their own margins — so targeting `[data-separator]` is the way to restyle the break without touching the ungrouped case. The default padding stacks on top of the last field's own `margin-bottom`, which is why the two spacing tokens are not equal.
+Top-position extra fields are wrapped in `.stuic-register-form-fields-top` (suppressed under `unstyled`), which carries `data-separator` unless `topFieldsSeparator={false}`. The wrapper is otherwise inert — the fields keep their own margins — so targeting `[data-separator]` is the way to restyle the break without touching the ungrouped case. The default padding stacks on top of the last field's own `margin-bottom`, which is why the two spacing tokens are not equal.
 
 ## Gotchas
 

package/dist/components/RegisterForm/RegisterForm.svelte

@@ -128,17 +128,16 @@
 		 * Close the top-position extra fields with a section break — a hairline
 		 * rule plus extra space below the group.
 		 *
-		 * Those fields are the ones required whichever way the user signs up (a
-		 * workspace id, an invite code), so what follows them in an identity-first
-		 * layout is a *choice*: provider buttons, or a block standing in for the
-		 * credentials. At the form's ordinary field rhythm the last of them reads
-		 * as a caption for the first button below it — the break makes the group a
-		 * section of its own instead.
+		 * A field is at the top position because it is about something other than
+		 * the credentials (a workspace id, an invite code, an org name), so the
+		 * group is drawn as its own section. Without the break the last of them
+		 * sits at the ordinary field gap above whatever comes next and reads as a
+		 * caption for it — a label over the first provider button, or just another
+		 * row of the credential column.
 		 *
-		 * Default: auto — on when the top fields are followed by the top-position
-		 * social block or by a `credentialsSlot` that has replaced the credentials
-		 * entirely; off otherwise, since a plain column of inputs does not want a
-		 * rule drawn through the middle of it.
+		 * Default: true whenever there is at least one top-position field,
+		 * regardless of what follows. Set `false` for a form whose top fields
+		 * really do belong to the same column as the credentials.
 		 */
 		topFieldsSeparator?: boolean;
 
@@ -268,15 +267,15 @@
 	// validated against it).
 	let renderPasswordConfirm = $derived(showPassword && showPasswordConfirm);
 
-	// The section break below the top fields earns its place only when the next
-	// thing down is NOT another plain input: the top social block, or a slot that
-	// has taken the credentials' place. Anywhere else the form is a single column
-	// of fields and a rule through the middle of it is noise.
-	let renderTopFieldsSeparator = $derived(
-		topFieldsSeparator ??
-			((socialPosition === "top" && !!socialLogins) ||
-				(!!credentialsSlot && !showEmail && !showPassword))
-	);
+	// A field at the top position is there because it is about something other
+	// than the credentials — the workspace, the invite, the org — so it is closed
+	// off as its own section whichever way the sign-up continues below it.
+	// Deliberately NOT conditioned on what follows (provider buttons, a
+	// credentialsSlot, plain inputs): the last top field otherwise sits one field
+	// gap above the next thing and reads as a caption for it either way, and a
+	// rule that comes and goes with an unrelated prop is not explicable from the
+	// call site. `topFieldsSeparator={false}` opts out.
+	let renderTopFieldsSeparator = $derived(topFieldsSeparator ?? true);
 
 	// Internal validation errors (set on submit)
 	let internalErrors = $state<RegisterFormValidationError[]>([]);

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

@@ -101,17 +101,16 @@ export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children">
      * Close the top-position extra fields with a section break — a hairline
      * rule plus extra space below the group.
      *
-     * Those fields are the ones required whichever way the user signs up (a
-     * workspace id, an invite code), so what follows them in an identity-first
-     * layout is a *choice*: provider buttons, or a block standing in for the
-     * credentials. At the form's ordinary field rhythm the last of them reads
-     * as a caption for the first button below it — the break makes the group a
-     * section of its own instead.
+     * A field is at the top position because it is about something other than
+     * the credentials (a workspace id, an invite code, an org name), so the
+     * group is drawn as its own section. Without the break the last of them
+     * sits at the ordinary field gap above whatever comes next and reads as a
+     * caption for it — a label over the first provider button, or just another
+     * row of the credential column.
      *
-     * Default: auto — on when the top fields are followed by the top-position
-     * social block or by a `credentialsSlot` that has replaced the credentials
-     * entirely; off otherwise, since a plain column of inputs does not want a
-     * rule drawn through the middle of it.
+     * Default: true whenever there is at least one top-position field,
+     * regardless of what follows. Set `false` for a form whose top fields
+     * really do belong to the same column as the credentials.
      */
     topFieldsSeparator?: boolean;
     /** Override CTA label */

package/dist/components/RegisterForm/RegisterFormModal.svelte

@@ -75,7 +75,7 @@
 			]
 		>;
 
-		/** Section break below the top-position extra fields. Default: auto. */
+		/** Section break below the top-position extra fields. Default: true. */
 		topFieldsSeparator?: InnerProps["topFieldsSeparator"];
 
 		/** Override CTA label */

package/dist/components/RegisterForm/RegisterFormModal.svelte.d.ts

@@ -51,7 +51,7 @@ export interface Props {
             fieldError: (name: string) => string | undefined;
         }
     ]>;
-    /** Section break below the top-position extra fields. Default: auto. */
+    /** Section break below the top-position extra fields. Default: true. */
     topFieldsSeparator?: InnerProps["topFieldsSeparator"];
     /** Override CTA label */
     submitLabel?: string;

package/dist/components/RegisterForm/index.css

@@ -46,11 +46,10 @@
 		margin-bottom: var(--stuic-register-form-credentials-margin-bottom);
 	}
 
-	/* Top-position extra fields. The group wrapper is deliberately inert until
-	   `data-separator` is set — those fields are otherwise just the first rows of
-	   the same single column, and a rule through the middle of a column of inputs
-	   is noise. With it, the group becomes its own section: what follows is a
-	   choice of sign-up path, not another field. */
+	/* Top-position extra fields. `data-separator` is on unless the consumer opts
+	   out, so the group reads as its own section rather than as the first rows of
+	   the credential column; the wrapper is inert without it, leaving the fields
+	   their own margins. */
 	.stuic-register-form-fields-top[data-separator] {
 		padding-bottom: var(--stuic-register-form-fields-top-padding-bottom);
 		margin-bottom: var(--stuic-register-form-fields-top-margin-bottom);

package/docs/domains/components.md

@@ -300,7 +300,7 @@ Prefix: `--stuic-login-form-*`
 
 Standalone registration form. Mirrors `LoginForm` conventions: `formData`, `onSubmit`, validation, errors, i18n, notifications, social-logins. Adds declarative `extraFields` (top/bottom positioning, custom validators) and an `extraFieldsSlot` escape hatch (e.g., terms checkbox).
 
-Also covers **identity-first signup** (identity established by an OAuth provider / invite / magic link before the account exists): `showEmail` / `showPassword` unmount the credential fields, `credentialsSlot` replaces them, `socialPosition="top"` moves the provider buttons above the credentials, and the top-position extra fields (workspace id, invite code — required on every path) are closed off with a section rule so they don't read as a caption for the first provider button (`topFieldsSeparator`, auto).
+Also covers **identity-first signup** (identity established by an OAuth provider / invite / magic link before the account exists): `showEmail` / `showPassword` unmount the credential fields, `credentialsSlot` replaces them, `socialPosition="top"` moves the provider buttons above the credentials, and the top-position extra fields (workspace id, invite code — required on every path) are closed off with a section rule so they don't read as a caption for the first provider button (`topFieldsSeparator`, on by default whenever such a field exists).
 
 ### Exports
 
@@ -317,29 +317,29 @@ Also covers **identity-first signup** (identity established by an OAuth provider
 
 ### Key Props
 
-| Prop                                                                   | Type                            | Default    | Description                                                                      |
-| ---------------------------------------------------------------------- | ------------------------------- | ---------- | -------------------------------------------------------------------------------- |
-| `formData`                                                             | `RegisterFormData`              | empty      | Bindable form data                                                               |
-| `onSubmit`                                                             | `(data) => void`                | required   | Submit callback                                                                  |
-| `isSubmitting`                                                         | `boolean`                       | `false`    | Disables CTA                                                                     |
-| `submitDisabled`                                                       | `boolean`                       | `false`    | Consumer-owned block: disables CTA + blocks submit                               |
-| `errors`                                                               | `RegisterFormValidationError[]` | `[]`       | Server field errors — self-clearing (see below)                                  |
-| `error`                                                                | `string`                        | —          | General error (alert above form)                                                 |
-| `showEmail`                                                            | `boolean`                       | `true`     | Render (mount) the email field                                                   |
-| `showPassword`                                                         | `boolean`                       | `true`     | Render (mount) the password + confirm fields                                     |
-| `showPasswordConfirm`                                                  | `boolean`                       | `true`     | Render password-confirm field                                                    |
-| `passwordMinLength`                                                    | `number`                        | `8`        | Min password length (input + validator)                                          |
-| `credentialsSlot`                                                      | `Snippet`                       | —          | Content at the credentials position                                              |
-| `emailFieldProps` / `passwordFieldProps` / `passwordConfirmFieldProps` | `Partial<FieldInputProps>`      | —          | Passthrough props per core field (`validate` composed, `value` ignored)          |
-| `extraFields`                                                          | `RegisterFieldConfig[]`         | `[]`       | Declarative extra fields (top/bottom)                                            |
-| `extraFieldsSlot`                                                      | `Snippet`                       | —          | Escape-hatch for non-FieldInput extras                                           |
-| `topFieldsSeparator`                                                   | `boolean`                       | auto       | Section rule below the top-position extra fields (auto-on when a choice follows) |
-| `submitButton`                                                         | `Snippet`                       | —          | Custom CTA section                                                               |
-| `socialLogins`                                                         | `Snippet`                       | —          | OAuth buttons                                                                    |
-| `socialPosition`                                                       | `"top" \| "bottom"`             | `"bottom"` | Social block above the credentials or after the CTA                              |
-| `footer`                                                               | `Snippet`                       | —          | Content below form                                                               |
-| `notifications`                                                        | `NotificationsStack`            | —          | Route errors to notifications                                                    |
-| `t`                                                                    | `TranslateFn`                   | built-in   | Translation function                                                             |
+| Prop                                                                   | Type                            | Default    | Description                                                               |
+| ---------------------------------------------------------------------- | ------------------------------- | ---------- | ------------------------------------------------------------------------- |
+| `formData`                                                             | `RegisterFormData`              | empty      | Bindable form data                                                        |
+| `onSubmit`                                                             | `(data) => void`                | required   | Submit callback                                                           |
+| `isSubmitting`                                                         | `boolean`                       | `false`    | Disables CTA                                                              |
+| `submitDisabled`                                                       | `boolean`                       | `false`    | Consumer-owned block: disables CTA + blocks submit                        |
+| `errors`                                                               | `RegisterFormValidationError[]` | `[]`       | Server field errors — self-clearing (see below)                           |
+| `error`                                                                | `string`                        | —          | General error (alert above form)                                          |
+| `showEmail`                                                            | `boolean`                       | `true`     | Render (mount) the email field                                            |
+| `showPassword`                                                         | `boolean`                       | `true`     | Render (mount) the password + confirm fields                              |
+| `showPasswordConfirm`                                                  | `boolean`                       | `true`     | Render password-confirm field                                             |
+| `passwordMinLength`                                                    | `number`                        | `8`        | Min password length (input + validator)                                   |
+| `credentialsSlot`                                                      | `Snippet`                       | —          | Content at the credentials position                                       |
+| `emailFieldProps` / `passwordFieldProps` / `passwordConfirmFieldProps` | `Partial<FieldInputProps>`      | —          | Passthrough props per core field (`validate` composed, `value` ignored)   |
+| `extraFields`                                                          | `RegisterFieldConfig[]`         | `[]`       | Declarative extra fields (top/bottom)                                     |
+| `extraFieldsSlot`                                                      | `Snippet`                       | —          | Escape-hatch for non-FieldInput extras                                    |
+| `topFieldsSeparator`                                                   | `boolean`                       | `true`     | Section rule closing the top-position extra-field group; `false` opts out |
+| `submitButton`                                                         | `Snippet`                       | —          | Custom CTA section                                                        |
+| `socialLogins`                                                         | `Snippet`                       | —          | OAuth buttons                                                             |
+| `socialPosition`                                                       | `"top" \| "bottom"`             | `"bottom"` | Social block above the credentials or after the CTA                       |
+| `footer`                                                               | `Snippet`                       | —          | Content below form                                                        |
+| `notifications`                                                        | `NotificationsStack`            | —          | Route errors to notifications                                             |
+| `t`                                                                    | `TranslateFn`                   | built-in   | Translation function                                                      |
 
 **Imperative** (`bind:this`): `validate()`, `scrollToFirstError(opts?)`, `focusField(name)` — also forwarded by `RegisterFormModal`.
 

package/package.json

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