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

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

@@ -0,0 +1,271 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import {
+		setTableCellContext,
+		useTableColumnContext,
+		useTableContext,
+		useTableRowContext
+	} from '../root/context';
+	import type { TableColumnHeaderCellProps } from '../types.js';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+
+	let { children, class: className = '', ...restProps }: TableColumnHeaderCellProps = $props();
+
+	const table = useTableContext();
+	const column = useTableColumnContext();
+	const row = useTableRowContext();
+	const key = table.createInstanceToken('header-cell');
+	const focusVersion = table.focusVersion;
+	const layoutVersion = table.layoutVersion;
+	const sortVersion = table.sortVersion;
+	const widthVersion = table.widthVersion;
+
+	let element = $state<HTMLElement | undefined>(undefined);
+	let focusDelegate = $state<(() => HTMLElement | undefined) | undefined>(undefined);
+	let isElementFocused = $state(false);
+	let isElementFocusVisible = $state(false);
+	let isFocusWithin = $state(false);
+	let isFocusVisibleWithin = $state(false);
+	row.registerCellToken(key, () => element);
+	function syncHeaderCellRegistration() {
+		table.registerCell({
+			key,
+			rowToken: row.rowToken,
+			section: 'header',
+			columnToken: column.token,
+			element,
+			focusDelegate
+		});
+	}
+
+	function registerFocusDelegate(getElement: () => HTMLElement | undefined) {
+		focusDelegate = getElement;
+	}
+
+	function unregisterFocusDelegate() {
+		focusDelegate = undefined;
+	}
+
+	function notifyResizerPresent() {
+		// No-op. Header cells now always provide the positioning context that
+		// column resizers need so the handle is available in SSR HTML too.
+	}
+
+	function notifyResizerRemoved() {
+		// No-op. See notifyResizerPresent().
+	}
+
+	setTableCellContext({
+		cellKey: key,
+		registerFocusDelegate,
+		unregisterFocusDelegate,
+		notifyResizerPresent,
+		notifyResizerRemoved
+	});
+
+	syncHeaderCellRegistration();
+
+	$effect(() => {
+		syncHeaderCellRegistration();
+	});
+
+	onDestroy(() => {
+		row.unregisterCellToken(key);
+		table.unregisterCell(key);
+	});
+
+	const isFocused = $derived.by(() => {
+		void $focusVersion;
+		return table.isCellFocused(key) && isElementFocused;
+	});
+	const isFocusVisible = $derived.by(() => {
+		void $focusVersion;
+		return isFocused && isElementFocusVisible;
+	});
+	const sortDirection = $derived.by(() => {
+		void $sortVersion;
+		return table.getSortDirection(column.id);
+	});
+	const isHidden = $derived.by(() => {
+		void $layoutVersion;
+		return column.isHidden;
+	});
+	const columnWidthStyle = $derived.by(() => {
+		void $widthVersion;
+		return table.getColumnWidthStyle(column.id);
+	});
+	const columnMinWidth = $derived.by(() => {
+		void $widthVersion;
+		return table.getColumnMinWidth(column.id);
+	});
+	const columnMaxWidth = $derived.by(() => {
+		void $widthVersion;
+		return table.getColumnMaxWidth(column.id);
+	});
+	const visibleColumnIndex = $derived.by(() => {
+		void $layoutVersion;
+		return table.getVisibleColumnIndexByToken(column.token);
+	});
+	const isSortable = $derived.by(() => {
+		void $layoutVersion;
+		void $sortVersion;
+		return table.isColumnSortable(column.id);
+	});
+	const headerTabIndex = $derived.by(() => {
+		if (isHidden || focusDelegate) return undefined;
+		return table.isCellTabStop(key) ? 0 : -1;
+	});
+
+	function focusResizerInHeader(target: HTMLElement | undefined) {
+		const resizer = target?.querySelector<HTMLElement>('[data-table-column-resizer="true"]');
+		if (!resizer) return false;
+		resizer.focus();
+		return document.activeElement === resizer;
+	}
+
+	function getSiblingHeaderCell(direction: 'left' | 'right') {
+		const headerRow = element?.closest('tr');
+		if (!headerRow || !element) return null;
+
+		const headerCells = Array.from(
+			headerRow.querySelectorAll<HTMLElement>('th[role="columnheader"]')
+		);
+		const currentIndex = headerCells.indexOf(element);
+		if (currentIndex < 0) return null;
+
+		return headerCells[currentIndex + (direction === 'left' ? -1 : 1)] ?? null;
+	}
+
+	function moveFocusIntoResizeHandle(direction: 'left' | 'right') {
+		if (direction === 'right') {
+			return focusResizerInHeader(element);
+		}
+
+		return focusResizerInHeader(getSiblingHeaderCell('left') ?? undefined);
+	}
+
+	function handleFocus() {
+		isElementFocused = true;
+		isElementFocusVisible = shouldShowFocusVisible(element ?? null);
+		table.setFocusedCell(key);
+		table.setFocusVisible(isElementFocusVisible);
+	}
+
+	function handleBlur() {
+		isElementFocused = false;
+		isElementFocusVisible = false;
+	}
+
+	function handleFocusIn(event: FocusEvent) {
+		if (event.target === element) {
+			isFocusWithin = false;
+			isFocusVisibleWithin = false;
+			return;
+		}
+		isFocusWithin = true;
+		isFocusVisibleWithin = shouldShowFocusVisible(event.target as HTMLElement | null);
+	}
+
+	function handleFocusOut(event: FocusEvent) {
+		const nextFocused = event.relatedTarget;
+		if (nextFocused instanceof Node && element?.contains(nextFocused)) return;
+		isFocusWithin = false;
+		isFocusVisibleWithin = false;
+	}
+
+	function handleClick() {
+		table.focusCellByKey(key);
+		table.consumeHeaderClickSuppression();
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		trackInteractionModality(event, element ?? null);
+		isElementFocusVisible = false;
+		isFocusVisibleWithin = false;
+		table.setFocusVisible(false);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		trackInteractionModality(event, element ?? null);
+
+		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');
+				return;
+			case 'ArrowDown':
+				event.preventDefault();
+				table.moveFocus('down');
+				return;
+			case 'ArrowLeft':
+				event.preventDefault();
+				if (moveFocusIntoResizeHandle('left')) return;
+				table.moveFocus('left');
+				return;
+			case 'ArrowRight':
+				event.preventDefault();
+				if (moveFocusIntoResizeHandle('right')) return;
+				table.moveFocus('right');
+				return;
+			case 'Home':
+				event.preventDefault();
+				table.moveToRowStart();
+				return;
+			case 'End':
+				event.preventDefault();
+				table.moveToRowEnd();
+				return;
+		}
+	}
+</script>
+
+<th
+	bind:this={element}
+	role="columnheader"
+	class={className}
+	tabindex={headerTabIndex}
+	aria-colindex={!isHidden && visibleColumnIndex >= 0 ? visibleColumnIndex + 1 : undefined}
+	aria-hidden={isHidden ? true : undefined}
+	aria-sort={isSortable ? (sortDirection ?? 'none') : undefined}
+	data-focused={isFocused ? 'true' : undefined}
+	data-focus-visible={isFocusVisible ? 'true' : undefined}
+	data-focus-within={isFocusWithin ? 'true' : undefined}
+	data-focus-visible-within={isFocusVisibleWithin ? 'true' : undefined}
+	data-sortable={isSortable || undefined}
+	data-sort-direction={sortDirection}
+	data-column-index={visibleColumnIndex >= 0 ? visibleColumnIndex : undefined}
+	style:box-sizing="border-box"
+	style:position="relative"
+	style:overflow="visible"
+	style:width={columnWidthStyle}
+	style:min-width={columnMinWidth !== undefined ? `${columnMinWidth}px` : undefined}
+	style:max-width={columnMaxWidth !== undefined ? `${columnMaxWidth}px` : undefined}
+	style:display={isHidden ? 'none' : 'table-cell'}
+	onfocusin={handleFocusIn}
+	onfocusout={handleFocusOut}
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	onclick={handleClick}
+	onmousedown={handleMouseDown}
+	onkeydown={handleKeyDown}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</th>

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

@@ -0,0 +1,4 @@
+import type { TableColumnHeaderCellProps } from '../types.js';
+declare const TableColumnHeaderCell: import("svelte").Component<TableColumnHeaderCellProps, {}, "">;
+type TableColumnHeaderCell = ReturnType<typeof TableColumnHeaderCell>;
+export default TableColumnHeaderCell;

package/dist/table/column-resizer/README.md

@@ -0,0 +1,33 @@
+<!-- markdownlint-disable MD024 MD060 -->
+
+# Table.ColumnResizer
+
+## API reference
+
+### Table.ColumnResizer
+
+Name: `Table.ColumnResizer`
+Description: Interactive resize handle for the current `Table.Column`. It must be composed inside `Table.ColumnHeaderCell`, and it resizes the column that owns the surrounding `Table.Column` context.
+
+Public prop type: `TableColumnResizerProps`
+
+| Prop        | Type      | Default     | Description                                                          |
+| ----------- | --------- | ----------- | -------------------------------------------------------------------- |
+| `step`      | `number`  | `16`        | Keyboard resize delta in px for `ArrowLeft` / `ArrowRight`.          |
+| `shiftStep` | `number`  | `48`        | Larger keyboard resize delta in px for `Shift+ArrowLeft/ArrowRight`. |
+| `class`     | `string`  | `''`        | Class names for the resize handle element.                           |
+| `children`  | `Snippet` | `undefined` | Optional custom resize affordance content.                           |
+
+## Usage notes
+
+- `Table.ColumnResizer` must be used inside `Table.ColumnHeaderCell`.
+- Rendering `Table.ColumnResizer` inside `Table.ColumnHeaderCell` is enough to make the owning `Table.Column` resizable.
+- The handle resolves the active column from `Table.Column` context. It does not accept a separate `columnId` prop.
+- Width state lives in `Table.Root` through `columnWidths` / `defaultColumnWidths`.
+- Pointer resizing uses Pointer Events, so mouse, touch, and pen interactions share the same behavior.
+- Keyboard resizing uses an explicit resize mode: focus the handle, press `Enter` to capture resize, use `ArrowLeft` / `ArrowRight` (plus `Shift`) to adjust the width, `Home` to jump to the minimum width, and `End` to auto-fit the column to its content width, then press `Enter` again to commit the width and keep focus on the handle.
+- While keyboard resize mode is active, pressing `Escape` restores the starting width, exits resize mode, and returns focus to the owning header cell.
+- Keyboard resizing uses the same resize lifecycle callbacks as pointer resizing and announces committed widths through a polite live region.
+- During pointer drag, pressing `Escape` restores the starting width and cancels the resize interaction.
+- Double-click still auto-fits the column to its content width.
+- In RTL layouts, `ArrowLeft` and `ArrowRight` are inverted so the logical resize direction matches the visual layout.

package/dist/table/column-resizer/table-column-resizer-fixed-width-test.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth>>(new Map());
+</script>
+
+<Table.Root aria-label="Fixed width table" bind:columnWidths={currentColumnWidths}>
+	<Table.Header>
+		<Table.Row>
+			<Table.Column
+				id="email"
+				isRowHeader
+				textValue="Email"
+				width={220}
+				minWidth={220}
+				maxWidth={220}
+			>
+				<Table.ColumnHeaderCell>
+					<div class="flex items-center justify-between gap-3">
+						<span>Email</span>
+						<Table.ColumnResizer
+							data-testid="fixed-email-resizer"
+							class="inline-flex w-3 cursor-col-resize justify-center"
+						/>
+					</div>
+				</Table.ColumnHeaderCell>
+			</Table.Column>
+			<Table.Column id="role" textValue="Role" defaultWidth={180} minWidth={120}>
+				<Table.ColumnHeaderCell>
+					<div class="flex items-center justify-between gap-3">
+						<span>Role</span>
+						<Table.ColumnResizer
+							data-testid="role-resizer"
+							class="inline-flex w-3 cursor-col-resize justify-center"
+						/>
+					</div>
+				</Table.ColumnHeaderCell>
+			</Table.Column>
+		</Table.Row>
+	</Table.Header>
+
+	<Table.Body>
+		<Table.Row id="danilo">
+			<Table.Cell>danilo.fernandez+workspace-owner@example.com</Table.Cell>
+			<Table.Cell>Developer</Table.Cell>
+		</Table.Row>
+		<Table.Row id="zahra">
+			<Table.Cell>zahra@example.com</Table.Cell>
+			<Table.Cell>Admin</Table.Cell>
+		</Table.Row>
+	</Table.Body>
+</Table.Root>
+
+<output data-testid="column-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths))}</output
+>

package/dist/table/column-resizer/table-column-resizer-fixed-width-test.svelte.d.ts

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

package/dist/table/column-resizer/table-column-resizer-freeze-layout-test.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+</script>
+
+<div style="width: 640px;">
+	<Table.Root
+		aria-label="Freeze layout table"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="email" isRowHeader textValue="Email" minWidth={80}>
+					<Table.ColumnHeaderCell>
+						<div class="flex items-center justify-between gap-3">
+							<span>Email address</span>
+							<Table.ColumnResizer
+								data-testid="freeze-email-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="group" textValue="Group" minWidth={80}>
+					<Table.ColumnHeaderCell>
+						<div class="flex items-center justify-between gap-3">
+							<span>Group membership</span>
+							<Table.ColumnResizer
+								data-testid="freeze-group-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			<Table.Row id="danilo">
+				<Table.Cell>danilo@example.com</Table.Cell>
+				<Table.Cell>Developer relations</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="freeze-column-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-freeze-layout-test.svelte.d.ts

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

package/dist/table/column-resizer/table-column-resizer-narrow-min-width-test.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+</script>
+
+<div data-testid="narrow-min-width-container" style="width: 240px; overflow-x: auto;">
+	<Table.Root
+		aria-label="Narrow min width table"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="request" isRowHeader textValue="Request" minWidth={75}>
+					<Table.ColumnHeaderCell data-testid="narrow-request-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Request</span>
+							<Table.ColumnResizer
+								data-testid="narrow-request-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="requester" textValue="Requester" minWidth={140}>
+					<Table.ColumnHeaderCell data-testid="narrow-requester-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Requester</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="area" textValue="Area">
+					<Table.ColumnHeaderCell data-testid="narrow-area-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Area</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="status" textValue="Status">
+					<Table.ColumnHeaderCell data-testid="narrow-status-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Status</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="total" textValue="Total">
+					<Table.ColumnHeaderCell data-testid="narrow-total-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Total</span>
+							<Table.ColumnResizer class="inline-flex w-3 cursor-col-resize justify-center" />
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			<Table.Row id="pr-001">
+				<Table.Cell>PR-001</Table.Cell>
+				<Table.Cell>Ana Gomez</Table.Cell>
+				<Table.Cell>Ops</Table.Cell>
+				<Table.Cell>Pending</Table.Cell>
+				<Table.Cell>$1,520</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="narrow-min-width-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-narrow-min-width-test.svelte.d.ts

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

package/dist/table/column-resizer/table-column-resizer-overflow-test.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+</script>
+
+<div style="width: 640px; overflow-x: auto;">
+	<Table.Root
+		aria-label="Resizable overflow table"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="name" isRowHeader textValue="Name" width={240}>
+					<Table.ColumnHeaderCell data-testid="overflow-name-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Name</span>
+							<Table.ColumnResizer
+								data-testid="overflow-name-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="region" textValue="Region" defaultWidth={180} minWidth={140}>
+					<Table.ColumnHeaderCell data-testid="overflow-region-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Region</span>
+							<Table.ColumnResizer
+								data-testid="overflow-region-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="plan" textValue="Plan">
+					<Table.ColumnHeaderCell data-testid="overflow-plan-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Plan</span>
+							<Table.ColumnResizer
+								data-testid="overflow-plan-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			<Table.Row id="danilo">
+				<Table.Cell>Danilo Fernandez</Table.Cell>
+				<Table.Cell>Buenos Aires</Table.Cell>
+				<Table.Cell>Enterprise</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="overflow-column-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-overflow-test.svelte.d.ts

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

package/dist/table/column-resizer/table-column-resizer-padded-container-test.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+</script>
+
+<div
+	data-testid="padded-relative-container"
+	style="width: 640px; box-sizing: border-box; overflow-x: auto; padding: 12px; border: 1px solid transparent;"
+>
+	<Table.Root
+		aria-label="Padded relative resize table"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="name" isRowHeader textValue="Name">
+					<Table.ColumnHeaderCell data-testid="padded-name-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Name</span>
+							<Table.ColumnResizer
+								data-testid="padded-name-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="region" textValue="Region" defaultWidth={180} minWidth={140}>
+					<Table.ColumnHeaderCell data-testid="padded-region-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Region</span>
+							<Table.ColumnResizer
+								data-testid="padded-region-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="plan" textValue="Plan">
+					<Table.ColumnHeaderCell data-testid="padded-plan-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Plan</span>
+							<Table.ColumnResizer
+								data-testid="padded-plan-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			<Table.Row id="danilo">
+				<Table.Cell>Danilo Fernandez</Table.Cell>
+				<Table.Cell>Buenos Aires</Table.Cell>
+				<Table.Cell>Enterprise</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="padded-relative-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-padded-container-test.svelte.d.ts

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