@human-kit/svelte-components 1.0.0-alpha.2 → 1.0.0-alpha.21

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

@@ -0,0 +1,171 @@
+<script
+	lang="ts"
+	generics="T extends Record<string, unknown> & { id: string | number } = Record<string, unknown> & { id: string | number }"
+>
+	import { flushSync, type Snippet } from 'svelte';
+	import { setTableSectionContext, useTableContext } from '../root/context';
+	import type { TableBodyProps } from '../types.js';
+
+	let {
+		items,
+		virtualizer,
+		children,
+		empty,
+		class: className = '',
+		...restProps
+	}: TableBodyProps<T> = $props();
+	setTableSectionContext({ section: 'body' });
+	const table = useTableContext();
+	const layoutVersion = table.layoutVersion;
+	let bodyElement = $state<HTMLTableSectionElement | undefined>(undefined);
+	let scrollTop = $state(0);
+	let viewportHeight = $state(0);
+
+	$effect(() => {
+		table.markBodyRowsInitialized();
+	});
+
+	$effect(() => {
+		table.setLogicalBodyRows(items?.map((item) => item.id));
+		return () => {
+			table.setLogicalBodyRows(undefined);
+		};
+	});
+
+	const itemList = $derived(items ?? []);
+	const isItemsMode = $derived(items !== undefined);
+	const virtualizerEnabled = $derived(Boolean(virtualizer && itemList.length > 0));
+	const overscan = $derived(Math.max(0, virtualizer?.overscan ?? 18));
+	const bodyColumnCount = $derived.by(() => {
+		void $layoutVersion;
+		return Math.max(table.getVisibleColumnCount(), 1);
+	});
+	const effectiveViewportHeight = $derived.by(() => {
+		if (!virtualizer) return 0;
+		if (viewportHeight > 0) return viewportHeight;
+		return Math.min(itemList.length, 12) * virtualizer.rowHeight;
+	});
+	const visibleRange = $derived.by(() => {
+		if (!virtualizer || !virtualizerEnabled || itemList.length === 0) {
+			return {
+				from: 0,
+				to: Math.max(itemList.length - 1, 0),
+				topSpacerHeight: 0,
+				bottomSpacerHeight: 0
+			};
+		}
+
+		const rowHeight = virtualizer.rowHeight;
+		const rowCount = itemList.length;
+		const startIndex = Math.min(rowCount - 1, Math.floor(Math.max(0, scrollTop) / rowHeight));
+		const visibleCount = Math.max(1, Math.ceil(effectiveViewportHeight / rowHeight));
+		const endIndex = Math.min(rowCount - 1, startIndex + visibleCount - 1);
+		const from = Math.max(0, startIndex - overscan);
+		const to = Math.max(from, Math.min(rowCount - 1, endIndex + overscan));
+
+		return {
+			from,
+			to,
+			topSpacerHeight: from * rowHeight,
+			bottomSpacerHeight: Math.max(0, (rowCount - to - 1) * rowHeight)
+		};
+	});
+	const renderedItems = $derived.by(() => {
+		if (!virtualizerEnabled) return itemList;
+		return itemList.slice(visibleRange.from, visibleRange.to + 1);
+	});
+
+	const isEmpty = $derived.by(() => {
+		void $layoutVersion;
+		return table.getLogicalBodyRowCount() === 0;
+	});
+
+	function findScrollContainer(node: HTMLElement) {
+		const tableElement = node.closest('table');
+		let current = tableElement?.parentElement ?? node.parentElement;
+
+		while (current) {
+			const style = window.getComputedStyle(current);
+			if (
+				/(auto|scroll|overlay)/.test(style.overflowY) ||
+				/(auto|scroll|overlay)/.test(style.overflow)
+			) {
+				return current;
+			}
+			current = current.parentElement;
+		}
+
+		return null;
+	}
+
+	$effect(() => {
+		if (!bodyElement || !virtualizerEnabled || typeof window === 'undefined') return;
+
+		const scrollContainer = findScrollContainer(bodyElement);
+		if (!scrollContainer) return;
+
+		const setMetrics = () => {
+			viewportHeight = scrollContainer.clientHeight;
+			scrollTop = scrollContainer.scrollTop;
+		};
+
+		const updateMetrics = () => {
+			flushSync(setMetrics);
+		};
+
+		const handleScroll = () => {
+			flushSync(setMetrics);
+		};
+
+		updateMetrics();
+
+		const resizeObserver =
+			typeof ResizeObserver !== 'undefined' ? new ResizeObserver(updateMetrics) : null;
+
+		scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
+		resizeObserver?.observe(scrollContainer);
+
+		return () => {
+			scrollContainer.removeEventListener('scroll', handleScroll);
+			resizeObserver?.disconnect();
+		};
+	});
+</script>
+
+<tbody
+	bind:this={bodyElement}
+	class={className}
+	data-table-body
+	data-empty={isEmpty || undefined}
+	{...restProps}
+>
+	{#if isItemsMode}
+		{#if virtualizerEnabled && visibleRange.topSpacerHeight > 0}
+			<tr aria-hidden="true" data-virtual-spacer="top">
+				<td colspan={bodyColumnCount} style="padding:0;border:0;height:0;">
+					<div aria-hidden="true" style={`height:${visibleRange.topSpacerHeight}px;`}></div>
+				</td>
+			</tr>
+		{/if}
+
+		{#each renderedItems as item (item.id)}
+			{#if children}
+				{@render (children as Snippet<[T]>)(item)}
+			{/if}
+		{/each}
+
+		{#if virtualizerEnabled && visibleRange.bottomSpacerHeight > 0}
+			<tr aria-hidden="true" data-virtual-spacer="bottom">
+				<td colspan={bodyColumnCount} style="padding:0;border:0;height:0;">
+					<div aria-hidden="true" style={`height:${visibleRange.bottomSpacerHeight}px;`}></div>
+				</td>
+			</tr>
+		{/if}
+
+		{#if empty}
+			{@render (empty as Snippet)()}
+		{/if}
+	{:else if children}
+		{@render (children as Snippet)()}
+	{/if}
+</tbody>

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

@@ -0,0 +1,45 @@
+import type { TableBodyProps } from '../types.js';
+declare function $$render<T extends Record<string, unknown> & {
+    id: string | number;
+} = Record<string, unknown> & {
+    id: string | number;
+}>(): {
+    props: TableBodyProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown> & {
+    id: string | number;
+} = Record<string, unknown> & {
+    id: string | number;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown> & {
+        id: string | number;
+    } = Record<string, unknown> & {
+        id: string | number;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown> & {
+        id: string | number;
+    } = Record<string, unknown> & {
+        id: string | number;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableBody: $$IsomorphicComponent;
+type TableBody<T extends Record<string, unknown> & {
+    id: string | number;
+} = Record<string, unknown> & {
+    id: string | number;
+}> = InstanceType<typeof TableBody<T>>;
+export default TableBody;

package/dist/table/cell/README.md

@@ -0,0 +1,27 @@
+<!-- markdownlint-disable MD024 -->
+
+# Table.Cell
+
+## API reference
+
+### Table.Cell
+
+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`. |
+| `children` | `Snippet` | `undefined` | Cell content.                              |
+
+### Context utilities
+
+Name: `Table.Cell` dependencies
+Description: Consumes row context and table context to derive column semantics and keyboard behavior.
+
+| Prop                 | Type                    | Default | Description                                              |
+| -------------------- | ----------------------- | ------- | -------------------------------------------------------- |
+| `useTableRowContext` | `() => TableRowContext` | `-`     | Reads row scope and cell order.                          |
+| `useTableContext`    | `() => TableContext`    | `-`     | Reads table focus, column metadata, and selection state. |

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

@@ -0,0 +1,253 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import {
+		setTableCellContext,
+		useTableContext,
+		useTableRowContext,
+		type TableSelectionKey
+	} from '../root/context';
+	import type { TableCellProps } from '../types.js';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+	import { handleTableBodyKeydown } from '../utils/handle-body-keydown';
+
+	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;
+	}
+
+	const shouldSeedClientRegistration = typeof window === 'undefined';
+
+	setTableCellContext({
+		cellKey: key,
+		registerFocusDelegate,
+		unregisterFocusDelegate
+	});
+
+	if (shouldSeedClientRegistration) {
+		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 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;
+		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,
+			'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) {
+		trackInteractionModality(event, element ?? null);
+		table.setFocusVisible(false);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (row.section !== 'body') return;
+		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
+					},
+					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>
+
+<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-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:box-sizing="border-box"
+	style:display={isColumnHidden ? 'none' : 'table-cell'}
+	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}
+		{@render children()}
+	{/if}
+</svelte:element>

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,40 @@
+# Table.Checkbox
+
+## API reference
+
+### Checkbox Part
+
+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.                                                    |
+| `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>
+```