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

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,6 +247,10 @@
 		: undefined}
 	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' : undefined}
 	onfocus={row.section === 'body' ? handleFocus : undefined}
 	onclick={row.section === 'body' ? handleClick : 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();
@@ -260,8 +247,8 @@
 	<Checkbox.Root
 		{id}
 		bind:element={checkboxElement}
-		bind:isChecked={checkboxChecked}
-		bind:isIndeterminate={checkboxIndeterminate}
+		{isChecked}
+		{isIndeterminate}
 		{isDisabled}
 		onCheckedChange={applySelection}
 		{title}

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,7 +256,12 @@
 	data-sortable={column.allowsSorting || undefined}
 	data-sort-direction={sortDirection}
 	data-column-index={visibleColumnIndex >= 0 ? visibleColumnIndex : undefined}
-	style:width={columnWidth !== undefined ? `${columnWidth}px` : 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' : undefined}
 	onfocusin={handleFocusIn}
 	onfocusout={handleFocusOut}
@@ -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;

package/dist/table/column-resizer/table-column-resizer-selection-column-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);
 
 	const checkboxStyle =
 		'display:inline-flex;height:20px;width:20px;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:4px;';

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Table } from '../index';
-	import type { TableSortDescriptor } from '../root/context';
+	import type { TableColumnWidth, TableSortDescriptor } from '../root/context';
 
-	let currentColumnWidths = $state<Map<string, number>>(
+	let currentColumnWidths = $state<Map<string, TableColumnWidth>>(
 		new Map([
 			['email', 200],
 			['group', 160]
@@ -10,7 +10,7 @@
 	);
 	let currentSortDescriptor = $state<TableSortDescriptor | undefined>(undefined);
 	let resizeStartColumnId = $state('');
-	let resizeEndWidths = $state<Record<string, number>>({});
+	let resizeEndWidths = $state<Record<string, TableColumnWidth>>({});
 </script>
 
 <Table.Root

package/dist/table/column-resizer/table-column-resizer-three-column-relative-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 data-testid="three-column-relative-container" style="width: 640px; overflow-x: auto;">
+	<Table.Root
+		aria-label="Three column 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="three-column-name-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Name</span>
+							<Table.ColumnResizer
+								data-testid="three-column-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="three-column-region-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Region</span>
+							<Table.ColumnResizer
+								data-testid="three-column-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="three-column-plan-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Plan</span>
+							<Table.ColumnResizer
+								data-testid="three-column-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="three-column-relative-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

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

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