@human-kit/svelte-components 1.0.0-alpha.16 → 1.0.0-alpha.18

package/dist/checkbox/root/checkbox-root.svelte

@@ -14,7 +14,6 @@
 		| 'class'
 		| 'id'
 		| 'role'
-		| 'tabindex'
 		| 'aria-checked'
 		| 'aria-disabled'
 		| 'aria-readonly'
@@ -40,8 +39,11 @@
 		class?: string;
 		'aria-label'?: string;
 		'aria-labelledby'?: string;
+		tabindex?: number;
 		onclick?: HTMLAttributes<HTMLSpanElement>['onclick'];
 		onkeydown?: HTMLAttributes<HTMLSpanElement>['onkeydown'];
+		onfocus?: HTMLAttributes<HTMLSpanElement>['onfocus'];
+		onmousedown?: HTMLAttributes<HTMLSpanElement>['onmousedown'];
 	};
 
 	function composeEventHandlers<TEvent extends Event>(
@@ -85,8 +87,11 @@
 		class: className = '',
 		'aria-label': ariaLabel,
 		'aria-labelledby': ariaLabelledby,
+		tabindex,
 		onclick: onClickExternal,
 		onkeydown: onKeyDownExternal,
+		onfocus: onFocusExternal,
+		onmousedown: onMouseDownExternal,
 		...restProps
 	}: CheckboxRootProps = $props();
 
@@ -329,7 +334,7 @@
 	bind:this={rootRef}
 	id={rootId}
 	role="checkbox"
-	tabindex={isDisabled ? undefined : 0}
+	tabindex={isDisabled ? undefined : (tabindex ?? 0)}
 	aria-checked={currentIndeterminate ? 'mixed' : currentChecked ? 'true' : 'false'}
 	aria-disabled={isDisabled || undefined}
 	aria-readonly={isReadOnly || undefined}
@@ -350,8 +355,8 @@
 	onkeydown={composeEventHandlers(handleKeyDown, onKeyDownExternal ?? undefined)}
 	onkeyup={handleKeyUp}
 	onpointerdown={handlePointerDown}
-	onmousedown={handlePointerDown}
-	onfocus={handleFocus}
+	onmousedown={composeEventHandlers(onMouseDownExternal ?? undefined, handlePointerDown)}
+	onfocus={composeEventHandlers(handleFocus, onFocusExternal ?? undefined)}
 	onblur={handleBlur}
 	class={cn(
 		'relative inline-flex shrink-0 items-center justify-center align-middle outline-none',

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

@@ -1,6 +1,6 @@
 import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-type CheckboxRootProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class' | 'id' | 'role' | 'tabindex' | 'aria-checked' | 'aria-disabled' | 'aria-readonly' | 'aria-required' | 'onclick' | 'onkeydown' | 'value'> & {
+type CheckboxRootProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class' | 'id' | 'role' | 'aria-checked' | 'aria-disabled' | 'aria-readonly' | 'aria-required' | 'onclick' | 'onkeydown' | 'value'> & {
     id?: string;
     element?: HTMLSpanElement | null;
     name?: string;
@@ -18,8 +18,11 @@ type CheckboxRootProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'cla
     class?: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    tabindex?: number;
     onclick?: HTMLAttributes<HTMLSpanElement>['onclick'];
     onkeydown?: HTMLAttributes<HTMLSpanElement>['onkeydown'];
+    onfocus?: HTMLAttributes<HTMLSpanElement>['onfocus'];
+    onmousedown?: HTMLAttributes<HTMLSpanElement>['onmousedown'];
 };
 declare const CheckboxRoot: import("svelte").Component<CheckboxRootProps, {}, "element" | "isChecked" | "isIndeterminate">;
 type CheckboxRoot = ReturnType<typeof CheckboxRoot>;

package/dist/table/PLAN.md

@@ -911,7 +911,7 @@ Minimum regression coverage:
 
 ## Phase 3: Row Actions and Disabled Behavior Plan
 
-### Goal
+### Phase 3 Goal
 
 Add row actions in a way that matches the React Aria Components mental model closely enough for consumers to predict behavior, while still fitting the existing `Table` architecture in this repository:
 
@@ -936,7 +936,7 @@ The goal is functional parity for the supported cases, not a byte-for-byte clone
 
 ### Public API Recommendation
 
-#### `Table.Root`
+#### `Table.Root` Props
 
 Add the following props:
 
@@ -970,7 +970,7 @@ Reasons:
 - React Aria already establishes a recognizable interaction contract based on those inputs
 - a separate `rowPressBehavior` prop would create redundant states and undocumented invalid combinations
 
-### Interaction Model
+### Phase 3 Interaction Model
 
 #### Core Principle
 
@@ -1163,7 +1163,7 @@ The coordinator should decide behavior using:
 
 ### Affected Parts
 
-#### `root/context.ts`
+#### `root/context.ts` Changes
 
 Will need to own:
 
@@ -1278,7 +1278,7 @@ This is important because reusing the current all-or-nothing `aria-disabled` con
 | `single` / `multiple` | no            | existing selection behavior | existing selection behavior |
 | `single` / `multiple` | yes           | action                      | selection                   |
 
-### Testing Plan
+### Phase 3 Testing Plan
 
 Minimum regression coverage:
 
@@ -1320,7 +1320,7 @@ This phase should not attempt to solve:
 
 These can be revisited later, but they should not block the collection-level row action API.
 
-### Recommended Implementation Order
+### Phase 3 Recommended Implementation Order
 
 1. Add `onRowAction` and `disabledBehavior` to `Table.Root` and root context.
 2. Refactor disabled-state helpers into selection-vs-action-aware logic.

package/dist/table/README.md

@@ -90,8 +90,10 @@ All public Table part prop types are exported from the table barrel, including `
 - Use `defaultSortDescriptor` for uncontrolled initial sort state.
 - Use `hiddenColumns` for controlled column visibility when consumers need to show or hide columns without changing the table markup.
 - Use `defaultHiddenColumns` for uncontrolled initial column visibility.
-- Use `columnWidths` / `onColumnWidthsChange` for controlled column width state.
-- Use `defaultColumnWidths`, `Table.Column.defaultWidth`, and `Table.Column.width` to seed explicit widths.
+- Use `columnWidths` / `onColumnWidthsChange` for controlled column width state. Width specs can be px, `%`, or `fr`.
+- Use `defaultColumnWidths` and `Table.Column.defaultWidth` to seed uncontrolled initial widths that can still be resized by the user.
+- Use `Table.Column.width` when a column should stay fixed at an explicit width. Fixed-width columns ignore resize attempts even if a `Table.ColumnResizer` is composed.
+- In resizable tables, unspecified columns behave like an implicit `1fr` width before interaction. On the first real resize, visible columns are materialized to px; the trailing column absorbs the delta until its minimum width, and further growth overflows the table horizontally.
 - Setting `sortDescriptor` back to `undefined` clears the controlled sort state, matching React Aria Table semantics.
 - Set `Table.Column.textValue` when the spoken column label should differ from the column id; `Table.Root` uses it for polite sort announcements.
 - Use `Table.EmptyState` inside `Table.Body` instead of conditionally rendering freeform body content.

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

@@ -6,6 +6,11 @@
 	setTableSectionContext({ section: 'body' });
 	const table = useTableContext();
 	const layoutVersion = table.layoutVersion;
+
+	$effect(() => {
+		table.markBodyRowsInitialized();
+	});
+
 	const isEmpty = $derived.by(() => {
 		void $layoutVersion;
 		return table.getBodyRowCount() === 0;

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

@@ -21,6 +21,7 @@
 	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);
@@ -82,6 +83,18 @@
 		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;
@@ -234,7 +247,11 @@
 		: undefined}
 	data-disabled={isRowDisabled || undefined}
 	data-column-index={visibleColumnIndex >= 0 ? visibleColumnIndex : undefined}
-	style:display={isColumnHidden ? 'none' : 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}
 	ondblclick={row.section === 'body' ? handleDoubleClick : undefined}

package/dist/table/checkbox/README.md

@@ -2,7 +2,7 @@
 
 ## API reference
 
-### Table.Checkbox
+### 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.

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

@@ -30,8 +30,6 @@
 	const layoutVersion = table.layoutVersion;
 
 	let checkboxElement = $state<HTMLSpanElement | null>(null);
-	let checkboxChecked = $state(false);
-	let checkboxIndeterminate = $state(false);
 
 	const isVisible = $derived.by(() => {
 		if (table.selectionMode === 'none') return false;
@@ -85,17 +83,6 @@
 		return checkboxElement ?? undefined;
 	}
 
-	$effect(() => {
-		void $selectionVersion;
-		checkboxChecked = isChecked;
-	});
-
-	$effect(() => {
-		void $selectionVersion;
-		void $layoutVersion;
-		checkboxIndeterminate = isIndeterminate;
-	});
-
 	$effect(() => {
 		if (!isVisible || isDisabled) {
 			cell.unregisterFocusDelegate();
@@ -109,39 +96,6 @@
 		};
 	});
 
-	$effect(() => {
-		const checkboxElement = getCheckboxRootElement();
-		if (!checkboxElement) return;
-
-		if (!isVisible || isDisabled || tabIndex === undefined) {
-			checkboxElement.removeAttribute('tabindex');
-			return;
-		}
-
-		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;
 
@@ -260,16 +214,19 @@
 	<Checkbox.Root
 		{id}
 		bind:element={checkboxElement}
-		bind:isChecked={checkboxChecked}
-		bind:isIndeterminate={checkboxIndeterminate}
+		{isChecked}
+		{isIndeterminate}
 		{isDisabled}
 		onCheckedChange={applySelection}
 		{title}
 		aria-label={accessibleLabel}
 		aria-labelledby={ariaLabelledby}
 		data-table-checkbox="true"
+		tabindex={tabIndex}
 		onclick={handleClick}
 		onkeydown={handleKeyDown}
+		onfocus={handleFocusIn}
+		onmousedown={handleMouseDown}
 		class={className}
 		{...restProps}
 	>

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

@@ -2,7 +2,7 @@
 
 ## API reference
 
-### Table.CheckboxIndicator
+### Indicator Part
 
 Name: `Table.CheckboxIndicator`
 Description: Headless presence wrapper for indicator content inside `Table.Checkbox`. It renders when the checkbox is checked or indeterminate.

package/dist/table/column/README.md

@@ -11,17 +11,17 @@ Description: Logical metadata wrapper for a header column. It does not render DO
 
 Public prop type: `TableColumnProps`
 
-| Prop            | Type                        | Default     | Description                                                                                       |
-| --------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------- |
-| `id`            | `string`                    | `-`         | Stable identifier for the column.                                                                 |
-| `allowsSorting` | `boolean`                   | `false`     | Enables sorting for the wrapped header cell.                                                      |
-| `isRowHeader`   | `boolean`                   | `false`     | Marks the associated body column as row-header cells.                                             |
-| `textValue`     | `string`                    | `undefined` | Optional spoken label used by `Table.Root` sort announcements when it should differ from `id`.    |
-| `width`         | `number \| \`${number}px\`` | `undefined` | Explicit column width hint. Px numbers are the first-class format for the current resize release. |
-| `defaultWidth`  | `number \| \`${number}px\`` | `undefined` | Uncontrolled initial width hint for the column.                                                   |
-| `minWidth`      | `number`                    | `undefined` | Minimum width in px enforced during resize interactions.                                          |
-| `maxWidth`      | `number`                    | `undefined` | Maximum width in px enforced during resize interactions.                                          |
-| `children`      | `Snippet`                   | `undefined` | Usually a single `Table.ColumnHeaderCell`.                                                        |
+| Prop            | Type                        | Default     | Description                                                                                                   |
+| --------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`            | `string`                    | `-`         | Stable identifier for the column.                                                                             |
+| `allowsSorting` | `boolean`                   | `false`     | Enables sorting for the wrapped header cell.                                                                  |
+| `isRowHeader`   | `boolean`                   | `false`     | Marks the associated body column as row-header cells.                                                         |
+| `textValue`     | `string`                    | `undefined` | Optional spoken label used by `Table.Root` sort announcements when it should differ from `id`.                |
+| `width`         | `number \| \`${number}px\`` | `undefined` | Fixed column width. When set, the column keeps that width and user resize interactions are disabled.          |
+| `defaultWidth`  | `number \| \`${number}px\`` | `undefined` | Uncontrolled initial width hint for the column. The column remains user-resizable when a resizer is composed. |
+| `minWidth`      | `number`                    | `undefined` | Minimum width in px enforced during resize interactions.                                                      |
+| `maxWidth`      | `number`                    | `undefined` | Maximum width in px enforced during resize interactions.                                                      |
+| `children`      | `Snippet`                   | `undefined` | Usually a single `Table.ColumnHeaderCell`.                                                                    |
 
 `Table.ColumnResizer` is the public resize opt-in. Compose it inside `Table.ColumnHeaderCell` when the owning column should be resizable.
 

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

@@ -93,10 +93,17 @@
 		void $layoutVersion;
 		return column.isHidden;
 	});
-
-	const columnWidth = $derived.by(() => {
+	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.getColumnWidth(column.id);
+		return table.getColumnMaxWidth(column.id);
 	});
 	const visibleColumnIndex = $derived.by(() => {
 		void $layoutVersion;
@@ -249,8 +256,13 @@
 	data-sortable={column.allowsSorting || undefined}
 	data-sort-direction={sortDirection}
 	data-column-index={visibleColumnIndex >= 0 ? visibleColumnIndex : undefined}
-	style:width={columnWidth !== undefined ? `${columnWidth}px` : undefined}
-	style:display={isHidden ? 'none' : 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}
@@ -260,16 +272,7 @@
 	onkeydown={handleKeyDown}
 	{...restProps}
 >
-	<div
-		data-table-header-content
-		style:overflow="visible"
-		style:position="relative"
-		style:min-width="0"
-		style:width="100%"
-		style:height="100%"
-	>
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
+	{#if children}
+		{@render children()}
+	{/if}
 </th>

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
 
-	let currentColumnWidths = $state<Map<string, number> | undefined>(undefined);
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
 </script>
 
 <div style="width: 640px;">

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;