@human-kit/svelte-components 1.0.0-alpha.1 → 1.0.0-alpha.10

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

@@ -0,0 +1,247 @@
+<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 {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+
+	type TableCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
+		children?: Snippet;
+		class?: string;
+	};
+
+	let { children, class: className = '', ...restProps }: TableCellProps = $props();
+
+	const table = useTableContext();
+	const row = useTableRowContext();
+	const key = table.createInstanceToken('cell');
+	const layoutVersion = table.layoutVersion;
+	const focusVersion = table.focusVersion;
+	const selectionVersion = table.selectionVersion;
+	const cellOrderVersion = row.cellOrderVersion;
+
+	let element = $state<HTMLElement | undefined>(undefined);
+	let focusDelegate = $state<(() => HTMLElement | undefined) | undefined>(undefined);
+	row.registerCellToken(key, () => element);
+	const cellIndex = $derived.by(() => {
+		void $cellOrderVersion;
+		return row.getCellIndex(key);
+	});
+
+	function syncCellRegistration() {
+		if (row.section !== 'body') return;
+		table.registerCell({
+			key,
+			rowToken: row.rowToken,
+			section: 'body',
+			columnIndex: cellIndex,
+			element,
+			focusDelegate
+		});
+	}
+
+	function registerFocusDelegate(getElement: () => HTMLElement | undefined) {
+		focusDelegate = getElement;
+	}
+
+	function unregisterFocusDelegate() {
+		focusDelegate = undefined;
+	}
+
+	setTableCellContext({
+		cellKey: key,
+		registerFocusDelegate,
+		unregisterFocusDelegate
+	});
+
+	syncCellRegistration();
+
+	$effect(() => {
+		syncCellRegistration();
+	});
+
+	onDestroy(() => {
+		row.unregisterCellToken(key);
+		if (row.section === 'body') {
+			table.unregisterCell(key);
+		}
+	});
+
+	const column = $derived.by(() => {
+		void $layoutVersion;
+		return cellIndex >= 0 ? table.getColumnAt(cellIndex) : undefined;
+	});
+	const isColumnHidden = $derived.by(() => {
+		void $layoutVersion;
+		return column ? table.isColumnHidden(column.id) : false;
+	});
+	const visibleColumnIndex = $derived.by(() => {
+		void $layoutVersion;
+		return column ? table.getVisibleColumnIndexByToken(column.token) : -1;
+	});
+	const tagName = $derived(row.section === 'body' && column?.isRowHeader ? 'th' : 'td');
+	const role = $derived.by(() => {
+		if (isColumnHidden) return undefined;
+		if (row.section !== 'body') return undefined;
+		return column?.isRowHeader ? 'rowheader' : 'gridcell';
+	});
+	const isFocused = $derived.by(() => {
+		void $focusVersion;
+		return row.section === 'body' ? table.isCellFocused(key) : false;
+	});
+	const isFocusVisible = $derived.by(() => {
+		void $focusVersion;
+		return row.section === 'body' ? isFocused && table.focusVisible : false;
+	});
+	const isRowSelected = $derived.by(() => {
+		void $selectionVersion;
+		return row.section === 'body' ? table.isRowSelected(row.rowId) : false;
+	});
+	const isRowDisabled = $derived.by(() => {
+		void $selectionVersion;
+		return row.section === 'body' ? table.isRowDisabled(row.rowId, row.isDisabled) : row.isDisabled;
+	});
+	const isCellFocusable = $derived(row.section !== 'body' || !isRowDisabled);
+	const cellTabIndex = $derived.by(() => {
+		if (row.section !== 'body') return undefined;
+		if (isColumnHidden) return undefined;
+		if (!isCellFocusable) return undefined;
+		if (focusDelegate) return undefined;
+		return table.isCellTabStop(key) ? 0 : -1;
+	});
+
+	function handleFocus() {
+		if (row.section !== 'body' || isRowDisabled) return;
+		table.setFocusedCell(key);
+		table.setFocusVisible(shouldShowFocusVisible(element ?? null));
+	}
+
+	function handleClick(event: MouseEvent) {
+		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
+		});
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		trackInteractionModality(event, element ?? null);
+		table.setFocusVisible(false);
+	}
+
+	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, {
+						shiftKey: event.shiftKey,
+						ctrlKey: event.ctrlKey,
+						metaKey: event.metaKey,
+						altKey: event.altKey
+					});
+				}
+				return;
+		}
+	}
+</script>
+
+<svelte:element
+	this={tagName}
+	bind:this={element}
+	{role}
+	class={className}
+	tabindex={cellTabIndex}
+	scope={row.section === 'body' && column?.isRowHeader ? 'row' : undefined}
+	aria-colindex={!isColumnHidden && visibleColumnIndex >= 0 ? visibleColumnIndex + 1 : undefined}
+	aria-hidden={isColumnHidden ? true : undefined}
+	aria-disabled={row.section === 'body' && isRowDisabled ? true : undefined}
+	data-focused={isFocused ? 'true' : undefined}
+	data-focus-visible={isFocusVisible ? 'true' : undefined}
+	data-row-selected={isRowSelected ? '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}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>

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

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

package/dist/table/checkbox/README.md

@@ -0,0 +1,38 @@
+# Table.Checkbox
+
+## API reference
+
+### Table.Checkbox
+
+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.
+
+| Prop              | Type                                       | Default     | Description                                                                                             |
+| ----------------- | ------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------- |
+| `id`              | `string`                                   | `undefined` | Optional id forwarded to the composed checkbox root.                                                    |
+| `title`           | `string`                                   | `undefined` | Optional title forwarded to the composed checkbox root.                                                 |
+| `style`           | `HTMLAttributes<HTMLSpanElement>['style']` | `undefined` | Optional inline style forwarded to the composed checkbox root.                                          |
+| `data-testid`     | `string`                                   | `undefined` | Test id forwarded to the composed checkbox root.                                                        |
+| `children`        | `Snippet`                                  | `undefined` | Composed child content, typically `Table.CheckboxIndicator`.                                            |
+| `class`           | `string`                                   | `''`        | CSS class names for the composed checkbox root element.                                                 |
+| `aria-label`      | `string`                                   | `undefined` | Accessible label override. Defaults to `Select all rows` in headers and `Select row <id>` in body rows. |
+| `aria-labelledby` | `string`                                   | `undefined` | Accessible label source id when the checkbox should be named by external content.                       |
+
+## Usage notes
+
+- Use `Table.Checkbox` inside `Table.Cell` or `Table.ColumnHeaderCell`.
+- In body rows it mirrors and toggles the row selection state.
+- In header cells it only renders when `selectionMode="multiple"` and toggles all selectable rows.
+- When `selectionMode="none"`, the part renders nothing.
+- `Table.Checkbox` is headless and unstyled. Apply classes from the consumer or docs layer.
+- The checkbox receives DOM focus directly and is the intended visible focus target for selection controls inside the table.
+
+```svelte
+<Table.Cell>
+	<Table.Checkbox class="inline-flex h-5 w-5 items-center justify-center rounded border">
+		<Table.CheckboxIndicator>
+			<CheckIcon class="h-3.5 w-3.5" />
+		</Table.CheckboxIndicator>
+	</Table.Checkbox>
+</Table.Cell>
+```

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

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type {
+		TableSelectionBehavior,
+		TableSelectionKey,
+		TableSelectionMode
+	} from '../root/context';
+
+	type DemoRow = {
+		id: string;
+		email: string;
+		group: string;
+	};
+
+	const defaultRows: DemoRow[] = [
+		{ id: 'danilo', email: 'danilo@example.com', group: 'Developer' },
+		{ id: 'zahra', email: 'zahra@example.com', group: 'Admin' },
+		{ id: 'jasper', email: 'jasper@example.com', group: 'Developer' }
+	];
+
+	const checkboxStyle =
+		'display:inline-flex;height:20px;width:20px;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:4px;';
+	const indicatorStyle =
+		'display:inline-flex;height:14px;width:14px;align-items:center;justify-content:center;';
+
+	type CheckboxTestProps = {
+		rows?: DemoRow[];
+		selectionMode?: TableSelectionMode;
+		selectionBehavior?: TableSelectionBehavior;
+		disabledKeys?: Iterable<TableSelectionKey>;
+		initialSelectedKeys?: Iterable<TableSelectionKey>;
+	};
+
+	let {
+		rows = defaultRows,
+		selectionMode = 'multiple',
+		selectionBehavior = 'toggle',
+		disabledKeys,
+		initialSelectedKeys
+	}: CheckboxTestProps = $props();
+
+	let currentSelectedKeys = $state<Set<TableSelectionKey>>(
+		new Set((() => initialSelectedKeys ?? [])())
+	);
+</script>
+
+<Table.Root
+	aria-label="Users table"
+	{selectionMode}
+	{selectionBehavior}
+	bind:selectedKeys={currentSelectedKeys}
+	{disabledKeys}
+>
+	<Table.Header>
+		<Table.Row>
+			<Table.Column id="selection" textValue="Selection">
+				<Table.ColumnHeaderCell data-testid="selection-header-cell">
+					<Table.Checkbox style={checkboxStyle} data-testid="header-checkbox">
+						<Table.CheckboxIndicator style={indicatorStyle}>
+							<svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5">
+								<path
+									d="M3.75 8.5 6.75 11.5 12.25 5.5"
+									fill="none"
+									stroke="currentColor"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+								/>
+							</svg>
+						</Table.CheckboxIndicator>
+					</Table.Checkbox>
+				</Table.ColumnHeaderCell>
+			</Table.Column>
+			<Table.Column id="email" isRowHeader textValue="Email">
+				<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
+			</Table.Column>
+			<Table.Column id="group" textValue="Group">
+				<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
+			</Table.Column>
+		</Table.Row>
+	</Table.Header>
+
+	<Table.Body>
+		{#each rows as row (row.id)}
+			<Table.Row
+				id={row.id}
+				isDisabled={disabledKeys ? Array.from(disabledKeys).includes(row.id) : false}
+			>
+				<Table.Cell data-testid={`selection-cell-${row.id}`}>
+					<Table.Checkbox style={checkboxStyle} data-testid={`row-checkbox-${row.id}`}>
+						<Table.CheckboxIndicator style={indicatorStyle}>
+							<svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5">
+								<path
+									d="M3.75 8.5 6.75 11.5 12.25 5.5"
+									fill="none"
+									stroke="currentColor"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+								/>
+							</svg>
+						</Table.CheckboxIndicator>
+					</Table.Checkbox>
+				</Table.Cell>
+				<Table.Cell data-testid={`email-cell-${row.id}`}>{row.email}</Table.Cell>
+				<Table.Cell data-testid={`group-cell-${row.id}`}>{row.group}</Table.Cell>
+			</Table.Row>
+		{/each}
+		<Table.EmptyState>No users found.</Table.EmptyState>
+	</Table.Body>
+
+	<Table.Footer>
+		<Table.Row>
+			<Table.Cell />
+			<Table.Cell>Total</Table.Cell>
+			<Table.Cell>{rows.length} users</Table.Cell>
+		</Table.Row>
+	</Table.Footer>
+</Table.Root>
+
+<output data-testid="selected-keys">{JSON.stringify([...currentSelectedKeys])}</output>

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

@@ -0,0 +1,16 @@
+import type { TableSelectionBehavior, TableSelectionKey, TableSelectionMode } from '../root/context';
+type DemoRow = {
+    id: string;
+    email: string;
+    group: string;
+};
+type CheckboxTestProps = {
+    rows?: DemoRow[];
+    selectionMode?: TableSelectionMode;
+    selectionBehavior?: TableSelectionBehavior;
+    disabledKeys?: Iterable<TableSelectionKey>;
+    initialSelectedKeys?: Iterable<TableSelectionKey>;
+};
+declare const TableCheckboxTest: import("svelte").Component<CheckboxTestProps, {}, "">;
+type TableCheckboxTest = ReturnType<typeof TableCheckboxTest>;
+export default TableCheckboxTest;

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

@@ -0,0 +1,274 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Checkbox } from '../../checkbox';
+	import {
+		useTableCellContext,
+		useTableContext,
+		useTableRowContext,
+		useTableSectionContext
+	} from '../root/context';
+	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,
+		children,
+		class: className = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		...restProps
+	}: TableCheckboxProps = $props();
+
+	const table = useTableContext();
+	const section = useTableSectionContext();
+	const row = useTableRowContext();
+	const cell = useTableCellContext();
+	const selectionVersion = table.selectionVersion;
+	const layoutVersion = table.layoutVersion;
+
+	let wrapperElement = $state<HTMLElement | undefined>(undefined);
+
+	const isVisible = $derived.by(() => {
+		if (table.selectionMode === 'none') return false;
+		if (section.section === 'footer') return false;
+		if (section.section === 'header') return table.selectionMode === 'multiple';
+		return section.section === 'body';
+	});
+
+	const checkboxState = $derived.by(() => {
+		void $selectionVersion;
+		void $layoutVersion;
+		return section.section === 'header' ? table.getSelectionCheckboxState() : 'none';
+	});
+
+	const isChecked = $derived.by(() => {
+		void $selectionVersion;
+		if (section.section === 'header') {
+			return checkboxState === 'all';
+		}
+		return section.section === 'body' ? table.isRowSelected(row.rowId) : false;
+	});
+
+	const isIndeterminate = $derived(section.section === 'header' && checkboxState === 'some');
+
+	const isDisabled = $derived.by(() => {
+		void $selectionVersion;
+		void $layoutVersion;
+		if (!isVisible) return true;
+		if (section.section === 'header') {
+			return !table.hasSelectableRows();
+		}
+		if (section.section === 'body') {
+			return table.isRowDisabled(row.rowId, row.isDisabled) || row.rowId === undefined;
+		}
+		return true;
+	});
+
+	const tabIndex = $derived.by(() => {
+		if (!isVisible || isDisabled) return undefined;
+		return table.isCellTabStop(cell.cellKey) ? 0 : -1;
+	});
+
+	const accessibleLabel = $derived.by(() => {
+		if (ariaLabel) return ariaLabel;
+		if (ariaLabelledby) return undefined;
+		if (section.section === 'header') return 'Select all rows';
+		return row.rowId !== undefined ? `Select row ${String(row.rowId)}` : 'Select row';
+	});
+
+	function getCheckboxRootElement() {
+		return wrapperElement?.querySelector<HTMLElement>('[data-checkbox-root="true"]') ?? undefined;
+	}
+
+	$effect(() => {
+		if (!isVisible || isDisabled) {
+			cell.unregisterFocusDelegate();
+			return;
+		}
+
+		cell.registerFocusDelegate(() => getCheckboxRootElement());
+
+		return () => {
+			cell.unregisterFocusDelegate();
+		};
+	});
+
+	$effect(() => {
+		const checkboxElement = getCheckboxRootElement();
+		if (!checkboxElement) return;
+
+		if (!isVisible || isDisabled || tabIndex === undefined) {
+			checkboxElement.removeAttribute('tabindex');
+			return;
+		}
+
+		checkboxElement.tabIndex = tabIndex;
+	});
+
+	function applySelection(nextChecked: boolean) {
+		if (isDisabled) return;
+
+		if (section.section === 'header') {
+			if (nextChecked) {
+				table.selectAllRows();
+			} else {
+				table.deselectAllRows();
+			}
+			return;
+		}
+
+		if (section.section === 'body') {
+			table.toggleRowSelection(row.rowId);
+		}
+	}
+
+	function handleFocusIn(event: FocusEvent) {
+		const target = event.target instanceof HTMLElement ? event.target : getCheckboxRootElement();
+		table.setFocusedCell(cell.cellKey);
+		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);
+		event.stopPropagation();
+	}
+
+	function handleClick(event: MouseEvent) {
+		event.stopPropagation();
+		if (!isVisible || isDisabled) return;
+		table.focusCellByKey(cell.cellKey);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		trackInteractionModality(event, getCheckboxRootElement() ?? null);
+
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+			if (table.selectionMode === 'multiple') {
+				event.preventDefault();
+				event.stopPropagation();
+				table.selectAllRows();
+			}
+			return;
+		}
+
+		if ((event.ctrlKey || event.metaKey) && event.key === 'Home') {
+			event.preventDefault();
+			event.stopPropagation();
+			table.moveToGridStart();
+			return;
+		}
+
+		if ((event.ctrlKey || event.metaKey) && event.key === 'End') {
+			event.preventDefault();
+			event.stopPropagation();
+			table.moveToGridEnd();
+			return;
+		}
+
+		switch (event.key) {
+			case 'ArrowUp':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('up', {
+					shiftKey: event.shiftKey,
+					ctrlKey: event.ctrlKey,
+					metaKey: event.metaKey,
+					altKey: event.altKey
+				});
+				return;
+			case 'ArrowDown':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('down', {
+					shiftKey: event.shiftKey,
+					ctrlKey: event.ctrlKey,
+					metaKey: event.metaKey,
+					altKey: event.altKey
+				});
+				return;
+			case 'ArrowLeft':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('left');
+				return;
+			case 'ArrowRight':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('right');
+				return;
+			case 'Home':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveToRowStart();
+				return;
+			case 'End':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveToRowEnd();
+				return;
+			case 'Enter':
+			case ' ':
+				event.stopPropagation();
+				if (event.repeat || isDisabled) return;
+				return;
+		}
+	}
+</script>
+
+{#if isVisible}
+	<div
+		bind:this={wrapperElement}
+		role="presentation"
+		onfocusin={handleFocusIn}
+		onfocusout={handleFocusOut}
+		onmousedown={handleMouseDown}
+		onclick={handleClick}
+		onkeydown={handleKeyDown}
+	>
+		<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>
+{/if}