@human-kit/svelte-components 1.0.0-alpha.13 → 1.0.0-alpha.15

package/dist/table/TODO.md

@@ -46,7 +46,7 @@ Ship a stable `Table` v1 with keyboard navigation, row selection, sorting, docum
 - [x] [M][P1][Area: DX][Owner: Unassigned][Target: Done] Break the controlled `selectedKeys` feedback loop — the `$effect` that syncs `selectedKeys` to `ctx.setSelection` also fires after internal selection changes via `onSelectionChange`, causing a redundant `notifySelection`.
 - [x] [S][P2][Area: DX][Owner: Unassigned][Target: Done] Remove inline `style="outline: none;"` from Cell and ColumnHeaderCell — it overrides consumer inline styles; let consumers handle focus-visible styling via `data-focus-visible` / `data-focused` attributes instead.
 - [x] [S][P2][Area: DX][Owner: Unassigned][Target: Done] Document `defaultSelectedKeys` and `defaultSortDescriptor` props in the README and docs page.
-- [ ] [C][P2][Area: DX][Owner: Unassigned][Target: TBD] Export component prop types (`TableRootProps`, `TableRowProps`, `TableCellProps`, etc.) so consumers can type wrapper components.
+- [x] [C][P2][Area: DX][Owner: Unassigned][Target: Done] Export component prop types (`TableRootProps`, `TableRowProps`, `TableCellProps`, etc.) so consumers can type wrapper components.
 - [ ] [C][P2][Area: DX][Owner: Unassigned][Target: TBD] Evaluate whether exposing `context` as a `$bindable` prop on `Table.Root` is necessary or if a narrower public API would be safer.
 - [ ] [C][P3][Area: DX][Owner: Unassigned][Target: TBD] Extract a shared registration helper to eliminate the duplicated sync-then-effect pattern across Column, Row, Cell, and ColumnHeaderCell.
 
@@ -61,6 +61,9 @@ Ship a stable `Table` v1 with keyboard navigation, row selection, sorting, docum
 - [x] [S][P2][Area: Behavior][Owner: Unassigned][Target: Done] Confirm whether disabled body rows should remain keyboard-focusable or be skipped by navigation.
 - [ ] [S][P2][Area: API][Owner: Unassigned][Target: TBD] Decide whether `Table.Column` should hard-enforce a single `Table.ColumnHeaderCell` child.
 - [ ] [S][P2][Area: API][Owner: Unassigned][Target: TBD] Decide whether clipboard-related behavior should remain fully browser-native in v1 or be deferred behind a future explicit cell-selection model.
+- [x] [C][P1][Area: API][Owner: Unassigned][Target: Done] Add `onRowAction?: (id: TableSelectionKey) => void` to `Table.Root` and document its collection-level semantics across `selectionMode` and `selectionBehavior`.
+- [x] [C][P1][Area: API][Owner: Unassigned][Target: Done] Add `disabledBehavior?: 'selection' | 'all'` to `Table.Root` with default `'all'`, and document that `'selection'` disables selection while preserving focus and row actions.
+- [x] [S][P1][Area: API][Owner: Unassigned][Target: Done] Treat stable `selectionBehavior?: 'toggle' | 'replace'` support in `Table.Root` as an explicit prerequisite for the row-actions phase rather than an implicit assumption.
 
 ### Features
 
@@ -74,6 +77,7 @@ Ship a stable `Table` v1 with keyboard navigation, row selection, sorting, docum
 - [ ] [C][P2][Area: Features][Owner: Unassigned][Target: TBD] Add inline cell and row editing primitives — define an opt-in editing model that can coexist with current focus, selection, and keyboard navigation contracts.
 - [ ] [M][P2][Area: Features][Owner: Unassigned][Target: TBD] Add column action primitives — expose a path for header menus, quick sort/filter actions, and future column management UI without requiring consumers to hand-roll header action composition every time.
 - [ ] [M][P3][Area: Features][Owner: Unassigned][Target: TBD] Add row actions patterns — document or expose a composable pattern for common trailing actions columns so selection, row press, and nested interactive controls do not conflict.
+- [x] [C][P1][Area: Features][Owner: Unassigned][Target: Done] Implement collection-level row actions in `Table.Root` so body rows can trigger `onRowAction` using RAC-style interaction rules without introducing a separate `rowPressBehavior` prop.
 
 ### Tests
 
@@ -81,12 +85,21 @@ Ship a stable `Table` v1 with keyboard navigation, row selection, sorting, docum
 - [x] [S][P2][Area: Tests][Owner: Unassigned][Target: Done] Add test for full sort cycle via keyboard (ascending → descending) and verify no way to clear sort with keyboard is intentional.
 - [x] [S][P2][Area: Tests][Owner: Unassigned][Target: Done] Add test verifying disabled rows are not selected when arrow-navigated in `replace` mode.
 - [x] [S][P2][Area: Tests][Owner: Unassigned][Target: Done] Add tests covering `selectionMode` transitions after mount, including collapsing multiple selections to one on `single`.
+- [x] [C][P1][Area: Tests][Owner: Unassigned][Target: Done] Add the full row action matrix to `Table.Root` tests: click/action in `selectionMode="none"`, toggle-mode action when selection is empty, toggle-mode selection when selection is active, and replace-mode double-click actions.
+- [x] [M][P1][Area: Tests][Owner: Unassigned][Target: Done] Add keyboard interaction tests proving `Enter` triggers `onRowAction` and `Space` triggers selection when both behaviors are available.
+- [x] [M][P1][Area: Tests][Owner: Unassigned][Target: Done] Add `disabledBehavior` regression tests covering `'selection'` vs `'all'` for row focusability, checkbox disabled state, row action availability, and selection blocking.
+- [x] [S][P1][Area: Tests][Owner: Unassigned][Target: Done] Add an explicit edge-case test proving a disabled row under `disabledBehavior="selection"` still fires `onRowAction` on `Enter` while remaining non-selectable.
+- [x] [S][P1][Area: Tests][Owner: Unassigned][Target: Done] Add a callback-ordering test proving `selectionBehavior="replace"` double click fires `onSelectionChange` before `onRowAction`.
 
 ### Docs
 
 - [ ] [C][P2][Area: Docs][Owner: Unassigned][Target: TBD] Add richer styling examples and sorting guidance to the docs page.
 - [x] [C][P3][Area: Docs][Owner: Unassigned][Target: Done] Document that `Table.Column` is a logical-only wrapper (no DOM output) prominently in the README anatomy section.
 - [x] [S][P2][Area: Docs][Owner: Unassigned][Target: Done] Document `selectionMode="none"` normalization behavior and clarify that selection is cleared internally when selection is disabled.
+- [ ] [C][P1][Area: Docs][Owner: Unassigned][Target: TBD] Document row actions vs row selection in the Table README and docs page, including the different pointer rules for `toggle` and `replace` when `onRowAction` is provided.
+- [ ] [M][P1][Area: Docs][Owner: Unassigned][Target: TBD] Document `disabledBehavior="selection"` and clarify that it disables selection only, not row actions or focus.
+- [ ] [S][P1][Area: Docs][Owner: Unassigned][Target: TBD] Call out explicitly that `toggle` mode changes row-click behavior dynamically once an active selection exists, and treat this as an intentional RAC-style model rather than an accidental inconsistency.
+- [ ] [S][P1][Area: Docs][Owner: Unassigned][Target: TBD] Document callback ordering for `replace`-mode double click: `onSelectionChange` fires before `onRowAction`.
 
 ### Selection Checkbox
 
@@ -94,7 +107,32 @@ Ship a stable `Table` v1 with keyboard navigation, row selection, sorting, docum
 - [ ] [M][P1][Area: Accessibility][Owner: Unassigned][Target: TBD] Validate `Table.Checkbox` screen reader announcements across NVDA and VoiceOver — verify that `aria-checked="mixed"` transitions in the header checkbox and row selection toggles are announced correctly.
 - [ ] [M][P1][Area: Correctness][Owner: Unassigned][Target: TBD] Document or resolve `Table.Checkbox` bypass of `pressRow()` — the checkbox always calls `toggleRowSelection()` directly, ignoring `selectionBehavior="replace"` semantics (Shift+click range, Ctrl+click toggle). This is intentional for checkbox UX but undocumented and inconsistent with row-click behavior.
 - [ ] [M][P1][Area: Correctness][Owner: Unassigned][Target: TBD] Add dev-time structural validation for `Table.Checkbox` placement — warn when header includes a selection checkbox column but body rows do not, or when the checkbox is placed in a footer cell where it has no behavior.
+- [x] [M][P1][Area: Correctness][Owner: Unassigned][Target: Done] Ensure `Table.Checkbox` respects `disabledBehavior="selection"` by disabling explicit selection controls without suppressing row actions on the rest of the row.
+
+### Row Actions
+
+- [x] [C][P1][Area: Correctness][Owner: Unassigned][Target: Done] Refactor the current `pressRow()` pipeline so selection and row actions are distinct internal pathways rather than a single selection-oriented press abstraction.
+- [x] [C][P1][Area: Correctness][Owner: Unassigned][Target: Done] Split row disabled-state helpers into selection-disabled vs action-disabled semantics so `disabledBehavior="selection"` does not incorrectly suppress focus or actions.
+- [x] [M][P1][Area: Behavior][Owner: Unassigned][Target: Done] Preserve existing `replace`-mode selection extension (`Shift+Arrow`, `Ctrl/Cmd+Space`, click replace) while layering `onRowAction` on top.
+- [x] [M][P1][Area: Accessibility][Owner: Unassigned][Target: Done] Revisit `aria-disabled` semantics for rows under `disabledBehavior="selection"` so actionable rows are not announced as fully disabled.
+- [x] [M][P1][Area: DX][Owner: Unassigned][Target: Done] Evaluate whether row/cell data attributes should expose actionable and selection-disabled states for styling and debugging once `onRowAction` ships.
+- [x] [S][P1][Area: DX][Owner: Unassigned][Target: Done] Make `data-actionable` part of the required styling contract for actionable rows so consumers can reliably style cursor and affordances.
 
 ### Code Quality
 
-- [ ] [C][P3][Area: Code Quality][Owner: Unassigned][Target: TBD] Remove unused keyboard/click handlers from `Table.Cell` when rendering in footer scope — currently handlers are bound but short-circuit via guards.
+- [x] [C][P3][Area: Code Quality][Owner: Unassigned][Target: Done] Remove unused keyboard/click handlers from `Table.Cell` when rendering in footer scope — currently handlers are bound but short-circuit via guards.
+- [x] [M][P2][Area: Code Quality][Owner: Unassigned][Target: Done] Extract shared keyboard handler between `Table.Row` and `Table.Cell` — both components duplicate ~60 lines of nearly identical `handleKeyDown` logic (ArrowUp/Down/Left/Right, Home/End, Ctrl+Home/End, Ctrl+A, Enter, Space) with only minor differences in Home/End targets.
+- [x] [S][P2][Area: Code Quality][Owner: Unassigned][Target: Done] Add a defensive `isRowDisabled` guard inside `pressRow()` in context — currently callers (Row, Cell) check disabled state before calling, but `pressRow` itself does not validate, so a direct call bypasses the check.
+
+### Bugs / Phase 3
+
+- [x] [M][P1][Area: Correctness][Owner: Unassigned][Target: Done] Fix `keyboard-space` ignoring interaction modifiers in `pressRow()` — the `keyboard-space` branch calls `toggleRowSelection(id)` directly, discarding `shiftKey`/`ctrlKey`/`metaKey`. This breaks `Shift+Space` (should extend selection) and `Ctrl+Space` semantics in `replace` + `multiple` mode. Should route through `pressRowSelection(id, interaction)` instead.
+
+### Accessibility / Phase 3
+
+- [x] [S][P2][Area: Accessibility][Owner: Unassigned][Target: Done] Clarify ARIA semantics for rows under `disabledBehavior="selection"` without a checkbox — a selection-disabled but actionable row has no `aria-disabled` (correct) but also no ARIA hint that selection is unavailable; the checkbox disabled state announces it, but rows without a checkbox column have no signal for assistive technology.
+
+### Performance / Phase 3
+
+- [x] [S][P2][Area: Performance][Owner: Unassigned][Target: Done] Use O(1) id-to-token lookup in `isColumnSortable()` — currently iterates all columns with `Array.from(columns.values()).some(...)` instead of using `getColumnRegistrationById(columnId)?.allowsSorting`.
+- [x] [S][P2][Area: Performance][Owner: Unassigned][Target: Done] Cache `getVisibleColumnWidths()` result — it filters `getColumnWidths()` on every call but is used in the render path of `Table.Root` for `managedTableWidth` derivation; should share a cache invalidated alongside `columnWidthsCache`.

package/dist/table/body/README.md

@@ -9,6 +9,8 @@
 Name: `Table.Body`
 Description: Body rowgroup for table data rows. It also exposes empty-state markers when no body rows are registered.
 
+Public prop type: `TableBodyProps`
+
 | Prop       | Type      | Default     | Description                                |
 | ---------- | --------- | ----------- | ------------------------------------------ |
 | `class`    | `string`  | `''`        | Class names for the `tbody` element.       |

package/dist/table/body/table-body.svelte

@@ -1,12 +1,6 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { setTableSectionContext, useTableContext } from '../root/context';
-
-	type TableBodyProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
-		children?: Snippet;
-		class?: string;
-	};
+	import type { TableBodyProps } from '../types.js';
 
 	let { children, class: className = '', ...restProps }: TableBodyProps = $props();
 	setTableSectionContext({ section: 'body' });

package/dist/table/body/table-body.svelte.d.ts

@@ -1,9 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-type TableBodyProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
-    children?: Snippet;
-    class?: string;
-};
+import type { TableBodyProps } from '../types.js';
 declare const TableBody: import("svelte").Component<TableBodyProps, {}, "">;
 type TableBody = ReturnType<typeof TableBody>;
 export default TableBody;

package/dist/table/cell/README.md

@@ -9,6 +9,8 @@
 Name: `Table.Cell`
 Description: Table data cell part. In body scope it participates in roving focus and row selection. In footer scope it renders semantic summary cells only.
 
+Public prop type: `TableCellProps`
+
 | Prop       | Type      | Default     | Description                                |
 | ---------- | --------- | ----------- | ------------------------------------------ |
 | `class`    | `string`  | `''`        | Class names for the rendered `td` or `th`. |

package/dist/table/cell/table-cell.svelte

@@ -1,22 +1,17 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
 	import {
 		setTableCellContext,
 		useTableContext,
 		useTableRowContext,
 		type TableSelectionKey
 	} from '../root/context';
+	import type { TableCellProps } from '../types.js';
 	import {
 		shouldShowFocusVisible,
 		trackInteractionModality
 	} from '../../primitives/input-modality';
-
-	type TableCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
-		children?: Snippet;
-		class?: string;
-	};
+	import { handleTableBodyKeydown } from '../utils/handle-body-keydown';
 
 	let { children, class: className = '', ...restProps }: TableCellProps = $props();
 
@@ -109,6 +104,27 @@
 		void $selectionVersion;
 		return row.section === 'body' ? table.isRowDisabled(row.rowId, row.isDisabled) : row.isDisabled;
 	});
+	const isRowSelectionDisabled = $derived.by(() => {
+		void $selectionVersion;
+		return row.section === 'body'
+			? table.isRowSelectionDisabled(row.rowId, row.isDisabled)
+			: row.isDisabled;
+	});
+	const isRowActionable = $derived.by(() => {
+		void $selectionVersion;
+		return row.section === 'body' ? table.isRowActionable(row.rowId, row.isDisabled) : false;
+	});
+	const selectionUnavailableDescription = $derived.by(() => {
+		return row.section === 'body' &&
+			table.selectionMode !== 'none' &&
+			!isRowDisabled &&
+			isRowSelectionDisabled
+			? 'Selection unavailable for this row.'
+			: undefined;
+	});
+	const selectionUnavailableDescriptionId = $derived(
+		selectionUnavailableDescription ? table.selectionUnavailableDescriptionId : undefined
+	);
 	const isCellFocusable = $derived(row.section !== 'body' || !isRowDisabled);
 	const cellTabIndex = $derived.by(() => {
 		if (row.section !== 'body') return undefined;
@@ -128,12 +144,29 @@
 		if (row.section !== 'body') return;
 		if (isRowDisabled) return;
 		table.focusCellByKey(key);
-		table.pressRow(row.rowId as TableSelectionKey | undefined, {
-			shiftKey: event.shiftKey,
-			ctrlKey: event.ctrlKey,
-			metaKey: event.metaKey,
-			altKey: event.altKey
-		});
+		table.pressRow(
+			row.rowId as TableSelectionKey | undefined,
+			'pointer',
+			{
+				shiftKey: event.shiftKey,
+				ctrlKey: event.ctrlKey,
+				metaKey: event.metaKey,
+				altKey: event.altKey
+			},
+			row.isDisabled
+		);
+	}
+
+	function handleDoubleClick() {
+		if (row.section !== 'body') return;
+		if (isRowDisabled) return;
+		table.focusCellByKey(key);
+		table.pressRow(
+			row.rowId as TableSelectionKey | undefined,
+			'pointer-double',
+			{},
+			row.isDisabled
+		);
 	}
 
 	function handleMouseDown(event: MouseEvent) {
@@ -143,79 +176,38 @@
 
 	function handleKeyDown(event: KeyboardEvent) {
 		if (row.section !== 'body') return;
-		trackInteractionModality(event, element ?? null);
-
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
-			if (table.selectionMode === 'multiple') {
-				event.preventDefault();
-				table.selectAllRows();
-			}
-			return;
-		}
-
-		if ((event.ctrlKey || event.metaKey) && event.key === 'Home') {
-			event.preventDefault();
-			table.moveToGridStart();
-			return;
-		}
-
-		if ((event.ctrlKey || event.metaKey) && event.key === 'End') {
-			event.preventDefault();
-			table.moveToGridEnd();
-			return;
-		}
-
-		switch (event.key) {
-			case 'ArrowUp':
-				event.preventDefault();
-				table.moveFocus('up', {
-					shiftKey: event.shiftKey,
-					ctrlKey: event.ctrlKey,
-					metaKey: event.metaKey,
-					altKey: event.altKey
-				});
-				return;
-			case 'ArrowDown':
-				event.preventDefault();
-				table.moveFocus('down', {
-					shiftKey: event.shiftKey,
-					ctrlKey: event.ctrlKey,
-					metaKey: event.metaKey,
-					altKey: event.altKey
-				});
-				return;
-			case 'ArrowLeft':
-				event.preventDefault();
-				table.moveFocus('left');
-				return;
-			case 'ArrowRight':
-				event.preventDefault();
-				table.moveFocus('right');
-				return;
-			case 'Home':
-				event.preventDefault();
-				table.moveToRowStart();
-				return;
-			case 'End':
-				event.preventDefault();
-				table.moveToRowEnd();
-				return;
-			case 'Enter':
-			case ' ':
-				event.preventDefault();
-				if (event.repeat) {
-					return;
-				}
-				if (!isRowDisabled) {
-					table.pressRow(row.rowId as TableSelectionKey | undefined, {
+		handleTableBodyKeydown({
+			event,
+			table,
+			focusTarget: element,
+			isDisabled: isRowDisabled,
+			onHome: () => table.moveToRowStart(),
+			onEnd: () => table.moveToRowEnd(),
+			onEnter: () =>
+				table.pressRow(
+					row.rowId as TableSelectionKey | undefined,
+					'keyboard-enter',
+					{
 						shiftKey: event.shiftKey,
 						ctrlKey: event.ctrlKey,
 						metaKey: event.metaKey,
 						altKey: event.altKey
-					});
-				}
-				return;
-		}
+					},
+					row.isDisabled
+				),
+			onSpace: () =>
+				table.pressRow(
+					row.rowId as TableSelectionKey | undefined,
+					'keyboard-space',
+					{
+						shiftKey: event.shiftKey,
+						ctrlKey: event.ctrlKey,
+						metaKey: event.metaKey,
+						altKey: event.altKey
+					},
+					row.isDisabled
+				)
+		});
 	}
 </script>
 
@@ -228,17 +220,26 @@
 	scope={row.section === 'body' && column?.isRowHeader ? 'row' : undefined}
 	aria-colindex={!isColumnHidden && visibleColumnIndex >= 0 ? visibleColumnIndex + 1 : undefined}
 	aria-hidden={isColumnHidden ? true : undefined}
+	aria-describedby={selectionUnavailableDescriptionId}
 	aria-disabled={row.section === 'body' && isRowDisabled ? true : undefined}
 	data-focused={isFocused ? 'true' : undefined}
 	data-focus-visible={isFocusVisible ? 'true' : undefined}
+	data-actionable={isRowActionable ? 'true' : undefined}
 	data-row-selected={isRowSelected ? 'true' : undefined}
+	data-selection-disabled={row.section === 'body' &&
+	table.selectionMode !== 'none' &&
+	!isRowDisabled &&
+	isRowSelectionDisabled
+		? 'true'
+		: undefined}
 	data-disabled={isRowDisabled || undefined}
 	data-column-index={visibleColumnIndex >= 0 ? visibleColumnIndex : undefined}
 	style:display={isColumnHidden ? 'none' : undefined}
-	onfocus={handleFocus}
-	onclick={handleClick}
-	onmousedown={handleMouseDown}
-	onkeydown={handleKeyDown}
+	onfocus={row.section === 'body' ? handleFocus : undefined}
+	onclick={row.section === 'body' ? handleClick : undefined}
+	ondblclick={row.section === 'body' ? handleDoubleClick : undefined}
+	onmousedown={row.section === 'body' ? handleMouseDown : undefined}
+	onkeydown={row.section === 'body' ? handleKeyDown : undefined}
 	{...restProps}
 >
 	{#if children}

package/dist/table/cell/table-cell.svelte.d.ts

@@ -1,9 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-type TableCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
-    children?: Snippet;
-    class?: string;
-};
+import type { TableCellProps } from '../types.js';
 declare const TableCell: import("svelte").Component<TableCellProps, {}, "">;
 type TableCell = ReturnType<typeof TableCell>;
 export default TableCell;

package/dist/table/checkbox/README.md

@@ -7,6 +7,8 @@
 Name: `Table.Checkbox`
 Description: Headless selection-aware checkbox root for tables. In body cells it toggles the owning row. In header cells it becomes a select-all checkbox for multiple selection mode.
 
+Public prop type: `TableCheckboxProps`
+
 | Prop              | Type                                       | Default     | Description                                                                                             |
 | ----------------- | ------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------- |
 | `id`              | `string`                                   | `undefined` | Optional id forwarded to the composed checkbox root.                                                    |

package/dist/table/checkbox/table-checkbox-test.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Table } from '../index';
 	import type {
+		TableDisabledBehavior,
 		TableSelectionBehavior,
 		TableSelectionKey,
 		TableSelectionMode
@@ -27,6 +28,8 @@
 		rows?: DemoRow[];
 		selectionMode?: TableSelectionMode;
 		selectionBehavior?: TableSelectionBehavior;
+		disabledBehavior?: TableDisabledBehavior;
+		disallowEmptySelection?: boolean;
 		disabledKeys?: Iterable<TableSelectionKey>;
 		initialSelectedKeys?: Iterable<TableSelectionKey>;
 	};
@@ -35,6 +38,8 @@
 		rows = defaultRows,
 		selectionMode = 'multiple',
 		selectionBehavior = 'toggle',
+		disabledBehavior = 'all',
+		disallowEmptySelection = false,
 		disabledKeys,
 		initialSelectedKeys
 	}: CheckboxTestProps = $props();
@@ -48,6 +53,8 @@
 	aria-label="Users table"
 	{selectionMode}
 	{selectionBehavior}
+	{disabledBehavior}
+	{disallowEmptySelection}
 	bind:selectedKeys={currentSelectedKeys}
 	{disabledKeys}
 >

package/dist/table/checkbox/table-checkbox-test.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TableSelectionBehavior, TableSelectionKey, TableSelectionMode } from '../root/context';
+import type { TableDisabledBehavior, TableSelectionBehavior, TableSelectionKey, TableSelectionMode } from '../root/context';
 type DemoRow = {
     id: string;
     email: string;
@@ -8,6 +8,8 @@ type CheckboxTestProps = {
     rows?: DemoRow[];
     selectionMode?: TableSelectionMode;
     selectionBehavior?: TableSelectionBehavior;
+    disabledBehavior?: TableDisabledBehavior;
+    disallowEmptySelection?: boolean;
     disabledKeys?: Iterable<TableSelectionKey>;
     initialSelectedKeys?: Iterable<TableSelectionKey>;
 };

package/dist/table/checkbox/table-checkbox.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { Checkbox } from '../../checkbox';
 	import {
 		useTableCellContext,
@@ -8,31 +6,12 @@
 		useTableRowContext,
 		useTableSectionContext
 	} from '../root/context';
+	import type { TableCheckboxProps } from '../types.js';
 	import {
 		shouldShowFocusVisible,
 		trackInteractionModality
 	} from '../../primitives/input-modality';
 
-	type TableCheckboxProps = Omit<
-		HTMLAttributes<HTMLSpanElement>,
-		| 'children'
-		| 'class'
-		| 'id'
-		| 'role'
-		| 'tabindex'
-		| 'aria-checked'
-		| 'aria-disabled'
-		| 'onclick'
-		| 'onkeydown'
-	> & {
-		id?: string;
-		title?: string;
-		children?: Snippet;
-		class?: string;
-		'aria-label'?: string;
-		'aria-labelledby'?: string;
-	};
-
 	let {
 		id,
 		title,
@@ -50,7 +29,9 @@
 	const selectionVersion = table.selectionVersion;
 	const layoutVersion = table.layoutVersion;
 
-	let wrapperElement = $state<HTMLElement | undefined>(undefined);
+	let checkboxElement = $state<HTMLSpanElement | null>(null);
+	let checkboxChecked = $state(false);
+	let checkboxIndeterminate = $state(false);
 
 	const isVisible = $derived.by(() => {
 		if (table.selectionMode === 'none') return false;
@@ -83,7 +64,7 @@
 			return !table.hasSelectableRows();
 		}
 		if (section.section === 'body') {
-			return table.isRowDisabled(row.rowId, row.isDisabled) || row.rowId === undefined;
+			return table.isRowSelectionDisabled(row.rowId, row.isDisabled) || row.rowId === undefined;
 		}
 		return true;
 	});
@@ -101,9 +82,20 @@
 	});
 
 	function getCheckboxRootElement() {
-		return wrapperElement?.querySelector<HTMLElement>('[data-checkbox-root="true"]') ?? undefined;
+		return checkboxElement ?? undefined;
 	}
 
+	$effect(() => {
+		void $selectionVersion;
+		checkboxChecked = isChecked;
+	});
+
+	$effect(() => {
+		void $selectionVersion;
+		void $layoutVersion;
+		checkboxIndeterminate = isIndeterminate;
+	});
+
 	$effect(() => {
 		if (!isVisible || isDisabled) {
 			cell.unregisterFocusDelegate();
@@ -129,6 +121,27 @@
 		checkboxElement.tabIndex = tabIndex;
 	});
 
+	$effect(() => {
+		const checkboxElement = getCheckboxRootElement();
+		if (!checkboxElement) return;
+
+		const handleElementFocus = (event: FocusEvent) => {
+			handleFocusIn(event);
+		};
+
+		const handleElementMouseDown = (event: MouseEvent) => {
+			handleMouseDown(event);
+		};
+
+		checkboxElement.addEventListener('focus', handleElementFocus);
+		checkboxElement.addEventListener('mousedown', handleElementMouseDown);
+
+		return () => {
+			checkboxElement.removeEventListener('focus', handleElementFocus);
+			checkboxElement.removeEventListener('mousedown', handleElementMouseDown);
+		};
+	});
+
 	function applySelection(nextChecked: boolean) {
 		if (isDisabled) return;
 
@@ -152,11 +165,6 @@
 		table.setFocusVisible(shouldShowFocusVisible(target ?? null));
 	}
 
-	function handleFocusOut(event: FocusEvent) {
-		const nextFocused = event.relatedTarget;
-		if (nextFocused instanceof Node && wrapperElement?.contains(nextFocused)) return;
-	}
-
 	function handleMouseDown(event: MouseEvent) {
 		trackInteractionModality(event, getCheckboxRootElement() ?? null);
 		table.setFocusVisible(false);
@@ -166,6 +174,9 @@
 	function handleClick(event: MouseEvent) {
 		event.stopPropagation();
 		if (!isVisible || isDisabled) return;
+		event.preventDefault();
+		const nextChecked = section.section === 'header' ? checkboxState !== 'all' : !isChecked;
+		applySelection(nextChecked);
 		table.focusCellByKey(cell.cellKey);
 	}
 
@@ -246,29 +257,22 @@
 </script>
 
 {#if isVisible}
-	<div
-		bind:this={wrapperElement}
-		role="presentation"
-		onfocusin={handleFocusIn}
-		onfocusout={handleFocusOut}
-		onmousedown={handleMouseDown}
+	<Checkbox.Root
+		{id}
+		bind:element={checkboxElement}
+		bind:isChecked={checkboxChecked}
+		bind:isIndeterminate={checkboxIndeterminate}
+		{isDisabled}
+		onCheckedChange={applySelection}
+		{title}
+		aria-label={accessibleLabel}
+		aria-labelledby={ariaLabelledby}
+		data-table-checkbox="true"
 		onclick={handleClick}
 		onkeydown={handleKeyDown}
+		class={className}
+		{...restProps}
 	>
-		<Checkbox.Root
-			{id}
-			{isChecked}
-			{isIndeterminate}
-			{isDisabled}
-			onCheckedChange={applySelection}
-			{title}
-			aria-label={accessibleLabel}
-			aria-labelledby={ariaLabelledby}
-			data-table-checkbox="true"
-			class={className}
-			{...restProps}
-		>
-			{@render children?.()}
-		</Checkbox.Root>
-	</div>
+		{@render children?.()}
+	</Checkbox.Root>
 {/if}

package/dist/table/checkbox/table-checkbox.svelte.d.ts

@@ -1,13 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-type TableCheckboxProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class' | 'id' | 'role' | 'tabindex' | 'aria-checked' | 'aria-disabled' | 'onclick' | 'onkeydown'> & {
-    id?: string;
-    title?: string;
-    children?: Snippet;
-    class?: string;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-};
+import type { TableCheckboxProps } from '../types.js';
 declare const TableCheckbox: import("svelte").Component<TableCheckboxProps, {}, "">;
 type TableCheckbox = ReturnType<typeof TableCheckbox>;
 export default TableCheckbox;

package/dist/table/checkbox-indicator/README.md

@@ -7,6 +7,8 @@
 Name: `Table.CheckboxIndicator`
 Description: Headless presence wrapper for indicator content inside `Table.Checkbox`. It renders when the checkbox is checked or indeterminate.
 
+Public prop type: `TableCheckboxIndicatorProps`
+
 | Prop           | Type                              | Default     | Description                                                                     |
 | -------------- | --------------------------------- | ----------- | ------------------------------------------------------------------------------- |
 | `keepMounted`  | `boolean`                         | `false`     | Keeps the indicator mounted while hidden when the checkbox is unchecked.        |

package/dist/table/checkbox-indicator/table-checkbox-indicator.svelte

@@ -1,13 +1,6 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { Checkbox } from '../../checkbox';
-
-	type TableCheckboxIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
-		keepMounted?: boolean;
-		children?: Snippet;
-		class?: string;
-	};
+	import type { TableCheckboxIndicatorProps } from '../types.js';
 
 	let {
 		keepMounted = false,

package/dist/table/checkbox-indicator/table-checkbox-indicator.svelte.d.ts

@@ -1,10 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-type TableCheckboxIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
-    keepMounted?: boolean;
-    children?: Snippet;
-    class?: string;
-};
+import type { TableCheckboxIndicatorProps } from '../types.js';
 declare const TableCheckboxIndicator: import("svelte").Component<TableCheckboxIndicatorProps, {}, "">;
 type TableCheckboxIndicator = ReturnType<typeof TableCheckboxIndicator>;
 export default TableCheckboxIndicator;