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

package/dist/button/root/button-root.svelte

@@ -93,10 +93,13 @@
 	let focused = $state(false);
 	let focusVisible = $state(false);
 	let pressedKey: 'Enter' | 'Space' | null = $state(null);
+	let expandedPressed = $state(false);
 
 	const renderedType = $derived(type === 'submit' && isPending ? 'button' : type);
 	const renderedPressed = $derived(
-		pressedOverride !== undefined ? Boolean(pressedOverride) && !isPending : pressed && !isPending
+		pressedOverride !== undefined
+			? Boolean(pressedOverride) && !isPending
+			: (pressed || expandedPressed) && !isPending
 	);
 	const renderState = $derived.by<ButtonRenderState>(() => ({
 		isHovered: hovered,
@@ -149,6 +152,34 @@
 		element = buttonRef;
 	});
 
+	function syncExpandedPressed() {
+		expandedPressed =
+			buttonRef?.getAttribute('data-pressed-when-expanded') === 'true' &&
+			buttonRef?.getAttribute('aria-expanded') === 'true';
+	}
+
+	$effect(() => {
+		if (!buttonRef) {
+			expandedPressed = false;
+			return;
+		}
+
+		syncExpandedPressed();
+
+		const observer = new MutationObserver(() => {
+			syncExpandedPressed();
+		});
+
+		observer.observe(buttonRef, {
+			attributes: true,
+			attributeFilter: ['aria-expanded', 'data-pressed-when-expanded']
+		});
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+
 	$effect(() => {
 		if (!isPending && !isDisabled) return;
 		clearInteractionState();

package/dist/dialog/trigger/dialog-trigger.svelte

@@ -29,12 +29,14 @@
 	function setActiveTrigger(button: HTMLElement) {
 		if (activeTrigger && activeTrigger !== button) {
 			activeTrigger.setAttribute('aria-expanded', 'false');
+			delete activeTrigger.dataset.pressedWhenExpanded;
 		}
 
 		activeTrigger = button;
 		dialogCtx.setTriggerRef(button);
 		button.setAttribute('aria-haspopup', 'dialog');
 		button.setAttribute('aria-expanded', String(dialogCtx.isOpen));
+		button.dataset.pressedWhenExpanded = 'true';
 	}
 
 	function handleClick(event: MouseEvent) {
@@ -72,6 +74,7 @@
 			}
 			dialogCtx.triggerRef.setAttribute('aria-haspopup', 'dialog');
 			dialogCtx.triggerRef.setAttribute('aria-expanded', String(dialogCtx.isOpen));
+			dialogCtx.triggerRef.dataset.pressedWhenExpanded = 'true';
 		}
 	});
 </script>

package/dist/popover/content/popover-content-controlled-close-test.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Popover } from '../index';
+
+	let open = $state(false);
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger>
+		<button type="button">Open Popover</button>
+	</Popover.Trigger>
+
+	<Popover.Content class="popover-content presence-animation">
+		<div class="popover-body">
+			<h3>Popover Title</h3>
+			<p>Popover content goes here.</p>
+			<button type="button" class="apply-btn" onclick={() => (open = false)}>Apply</button>
+		</div>
+	</Popover.Content>
+</Popover.Root>
+
+<style>
+	:global(.presence-animation) {
+		opacity: 1;
+		transition: opacity 0.2s linear;
+	}
+
+	:global(.presence-animation[data-exiting]) {
+		opacity: 0;
+	}
+</style>

package/dist/popover/content/popover-content-controlled-close-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PopoverContentControlledCloseTest: import("svelte").Component<Record<string, never>, {}, "">;
+type PopoverContentControlledCloseTest = ReturnType<typeof PopoverContentControlledCloseTest>;
+export default PopoverContentControlledCloseTest;

package/dist/popover/content/popover-content.svelte

@@ -96,6 +96,8 @@
 	let pendingMotionFrame: number | undefined;
 	let cleanupMotionListeners: (() => void) | undefined;
 	let motionId = 0;
+	let previousOpen = $state(false);
+	let closeHandledInternally = false;
 
 	function parseTimeList(value: string) {
 		return value
@@ -239,7 +241,21 @@
 		});
 	}
 
+	function releaseFocusedDescendantBeforeHide() {
+		if (!browser || !popoverRef || !triggerRef) return;
+
+		const activeElement = document.activeElement;
+		if (!(activeElement instanceof HTMLElement)) return;
+		if (activeElement === triggerRef || triggerRef.contains(activeElement)) return;
+		if (activeElement !== popoverRef && !popoverRef.contains(activeElement)) return;
+
+		activeElement.blur();
+	}
+
 	function close(reason: PopoverCloseReason = 'imperative-action', event?: Event) {
+		closeHandledInternally = true;
+		releaseFocusedDescendantBeforeHide();
+
 		if (isStandalone) {
 			let canceled = false;
 			const details: PopoverOpenChangeDetails = {
@@ -334,6 +350,28 @@
 		document.removeEventListener('scroll', handleScroll, true);
 	});
 
+	$effect(() => {
+		const wasOpen = previousOpen;
+		previousOpen = isOpen;
+
+		if (isOpen) {
+			closeHandledInternally = false;
+			return;
+		}
+
+		if (!wasOpen) {
+			closeHandledInternally = false;
+			return;
+		}
+
+		if (closeHandledInternally) {
+			closeHandledInternally = false;
+			return;
+		}
+
+		releaseFocusedDescendantBeforeHide();
+	});
+
 	$effect(() => {
 		if (isOpen) {
 			const shouldAnimateIn = !isMounted || isExiting;

package/dist/popover/trigger/popover-trigger-button-root-test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Button } from '../../button';
+	import { Popover } from '../index';
+</script>
+
+<Popover.Root>
+	<Popover.Trigger>
+		<Button.Root>Open Button Root Popover</Button.Root>
+	</Popover.Trigger>
+
+	<Popover.Content class="popover-content">
+		<div class="popover-body">
+			<h3>Popover Title</h3>
+			<p>Popover content goes here.</p>
+		</div>
+	</Popover.Content>
+</Popover.Root>

package/dist/popover/trigger/popover-trigger-button-root-test.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PopoverTriggerButtonRootTest: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PopoverTriggerButtonRootTest = InstanceType<typeof PopoverTriggerButtonRootTest>;
+export default PopoverTriggerButtonRootTest;

package/dist/popover/trigger/popover-trigger-button.svelte

@@ -35,6 +35,7 @@
 	bind:element={buttonRef}
 	class={className}
 	type="button"
+	pressed={ctx?.isOpen ?? false}
 	aria-expanded={ctx?.isOpen ?? false}
 	aria-haspopup="dialog"
 	onclick={handleClick}

package/dist/popover/trigger/popover-trigger.svelte

@@ -30,8 +30,10 @@
 		button.setAttribute('aria-haspopup', 'dialog');
 		button.setAttribute('aria-expanded', String(popoverCtx.isOpen));
 		if (popoverCtx.isOpen) {
+			button.dataset.pressedWhenExpanded = 'true';
 			button.dataset.pressed = 'true';
 		} else {
+			delete button.dataset.pressedWhenExpanded;
 			delete button.dataset.pressed;
 		}
 	}
@@ -40,6 +42,7 @@
 		if (activeTrigger && activeTrigger !== button) {
 			activeTrigger.setAttribute('aria-expanded', 'false');
 			delete activeTrigger.dataset.pressed;
+			delete activeTrigger.dataset.pressedWhenExpanded;
 		}
 
 		activeTrigger = button;

package/dist/table/body/README.md

@@ -7,14 +7,27 @@
 ### Table.Body
 
 Name: `Table.Body`
-Description: Body rowgroup for table data rows. It also exposes empty-state markers when no body rows are registered.
+Description: Body rowgroup for table data rows. It can render authored rows directly, or render item-driven rows with optional fixed-height virtualization. It also exposes empty-state markers when no logical body rows are available.
 
 Public prop type: `TableBodyProps`
 
-| Prop       | Type      | Default     | Description                                |
-| ---------- | --------- | ----------- | ------------------------------------------ |
-| `class`    | `string`  | `''`        | Class names for the `tbody` element.       |
-| `children` | `Snippet` | `undefined` | Body rows and optional `Table.EmptyState`. |
+| Prop          | Type                        | Default     | Description                                                                                                                          |
+| ------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `items`       | `readonly T[]`              | `undefined` | Logical row collection for item-driven mode. When present, `children(item)` renders once per item with `item` inferred from `items`. |
+| `virtualizer` | `TableBodyVirtualizer`      | `undefined` | Optional fixed-height row virtualization config with `rowHeight` and `overscan`.                                                     |
+| `class`       | `string`                    | `''`        | Class names for the `tbody` element.                                                                                                 |
+| `children`    | `Snippet` or `Snippet<[T]>` | `undefined` | Manual body content when `items` is omitted, or `children(item)` in item-driven mode.                                                |
+| `empty`       | `Snippet`                   | `undefined` | Optional empty-state snippet for item-driven mode.                                                                                   |
+
+### TableBodyVirtualizer
+
+Name: `TableBodyVirtualizer`
+Description: Fixed-height body virtualization settings.
+
+| Prop        | Type     | Default | Description                                                    |
+| ----------- | -------- | ------- | -------------------------------------------------------------- |
+| `rowHeight` | `number` | `-`     | Required fixed pixel height used to compute the visible range. |
+| `overscan`  | `number` | `18`    | Extra rows rendered above and below the viewport.              |
 
 ### Context utilities
 

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Table } from '../index';
+
+	type DemoRow = {
+		id: string;
+		email: string;
+		group: string;
+	};
+
+	const rows: DemoRow[] = Array.from({ length: 120 }, (_, index) => {
+		const sequence = index + 1;
+		return {
+			id: `row-${String(sequence).padStart(3, '0')}`,
+			email: `user${sequence}@example.com`,
+			group: sequence % 2 === 0 ? 'Admin' : 'Developer'
+		};
+	});
+</script>
+
+<div style="max-height: 240px; overflow: auto;">
+	<Table.Root aria-label="Virtualized users table">
+		<Table.Header>
+			<Table.Row>
+				<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 items={rows} virtualizer={{ rowHeight: 32 }}>
+			{#snippet children(row)}
+				<Table.Row id={row.id} data-item-id={row.id}>
+					<Table.Cell>{row.email}</Table.Cell>
+					<Table.Cell>{row.group}</Table.Cell>
+				</Table.Row>
+			{/snippet}
+			{#snippet empty()}
+				<Table.EmptyState>No users found.</Table.EmptyState>
+			{/snippet}
+		</Table.Body>
+	</Table.Root>
+</div>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TableBodyItemsTest: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TableBodyItemsTest = InstanceType<typeof TableBodyItemsTest>;
+export default TableBodyItemsTest;

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

@@ -1,24 +1,171 @@
-<script lang="ts">
+<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 { children, class: className = '', ...restProps }: TableBodyProps = $props();
+	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.getBodyRowCount() === 0;
+		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 class={className} data-table-body data-empty={isEmpty || undefined} {...restProps}>
-	{#if children}
-		{@render children()}
+<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

@@ -1,4 +1,45 @@
 import type { TableBodyProps } from '../types.js';
-declare const TableBody: import("svelte").Component<TableBodyProps, {}, "">;
-type TableBody = ReturnType<typeof TableBody>;
+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/table-cell.svelte

@@ -21,7 +21,6 @@
 	const layoutVersion = table.layoutVersion;
 	const focusVersion = table.focusVersion;
 	const selectionVersion = table.selectionVersion;
-	const widthVersion = table.widthVersion;
 	const cellOrderVersion = row.cellOrderVersion;
 
 	let element = $state<HTMLElement | undefined>(undefined);
@@ -52,13 +51,17 @@
 		focusDelegate = undefined;
 	}
 
+	const shouldSeedClientRegistration = typeof window === 'undefined';
+
 	setTableCellContext({
 		cellKey: key,
 		registerFocusDelegate,
 		unregisterFocusDelegate
 	});
 
-	syncCellRegistration();
+	if (shouldSeedClientRegistration) {
+		syncCellRegistration();
+	}
 
 	$effect(() => {
 		syncCellRegistration();
@@ -83,18 +86,6 @@
 		void $layoutVersion;
 		return column ? table.getVisibleColumnIndexByToken(column.token) : -1;
 	});
-	const columnWidthStyle = $derived.by(() => {
-		void $widthVersion;
-		return column ? table.getColumnWidthStyle(column.id) : undefined;
-	});
-	const columnMinWidth = $derived.by(() => {
-		void $widthVersion;
-		return column ? table.getColumnMinWidth(column.id) : undefined;
-	});
-	const columnMaxWidth = $derived.by(() => {
-		void $widthVersion;
-		return column ? table.getColumnMaxWidth(column.id) : undefined;
-	});
 	const tagName = $derived(row.section === 'body' && column?.isRowHeader ? 'th' : 'td');
 	const role = $derived.by(() => {
 		if (isColumnHidden) return undefined;
@@ -248,9 +239,6 @@
 	data-disabled={isRowDisabled || undefined}
 	data-column-index={visibleColumnIndex >= 0 ? visibleColumnIndex : undefined}
 	style:box-sizing="border-box"
-	style:width={columnWidthStyle}
-	style:min-width={columnMinWidth !== undefined ? `${columnMinWidth}px` : undefined}
-	style:max-width={columnMaxWidth !== undefined ? `${columnMaxWidth}px` : undefined}
 	style:display={isColumnHidden ? 'none' : 'table-cell'}
 	onfocus={row.section === 'body' ? handleFocus : undefined}
 	onclick={row.section === 'body' ? handleClick : undefined}