@human-kit/svelte-components 1.0.0-alpha.17 → 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/cell/table-cell.svelte

@@ -251,7 +251,7 @@
 	style:width={columnWidthStyle}
 	style:min-width={columnMinWidth !== undefined ? `${columnMinWidth}px` : undefined}
 	style:max-width={columnMaxWidth !== undefined ? `${columnMaxWidth}px` : undefined}
-	style:display={isColumnHidden ? 'none' : 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/table-checkbox.svelte

@@ -96,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;
 
@@ -255,8 +222,11 @@
 		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/column-header-cell/table-column-header-cell.svelte

@@ -262,7 +262,7 @@
 	style:width={columnWidthStyle}
 	style:min-width={columnMinWidth !== undefined ? `${columnMinWidth}px` : undefined}
 	style:max-width={columnMaxWidth !== undefined ? `${columnMaxWidth}px` : undefined}
-	style:display={isHidden ? 'none' : undefined}
+	style:display={isHidden ? 'none' : 'table-cell'}
 	onfocusin={handleFocusIn}
 	onfocusout={handleFocusOut}
 	onfocus={handleFocus}

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+	const rows = Array.from({ length: 24 }, (_, index) => ({
+		id: `row-${index + 1}`,
+		request: `PR-${String(index + 1).padStart(4, '0')}`,
+		requester: ['Ana Gomez', 'Lucas Perez', 'Mara Silva', 'Juan Torres'][index % 4],
+		area: ['Production', 'Logistics', 'Maintenance', 'Quality'][index % 4],
+		status: ['Pending', 'Review', 'Approved'][index % 3],
+		priority: ['Low', 'Medium', 'High'][index % 3],
+		total: 850 + index * 137
+	}));
+</script>
+
+<div
+	data-testid="sandbox-overflow-container"
+	style="width: 920px; max-height: 320px; overflow: auto;"
+>
+	<Table.Root
+		aria-label="Sandbox overflow table"
+		selectionMode="multiple"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="selection" textValue="Selection" width={44}>
+					<Table.ColumnHeaderCell data-testid="sandbox-selection-header-cell">
+						<Table.Checkbox />
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="request" textValue="Request" isRowHeader defaultWidth={350}>
+					<Table.ColumnHeaderCell data-testid="sandbox-request-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Request</span>
+							<Table.ColumnResizer
+								data-testid="sandbox-request-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="requester" textValue="Requester">
+					<Table.ColumnHeaderCell>Requester</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="area" textValue="Area">
+					<Table.ColumnHeaderCell>Area</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="status" textValue="Status">
+					<Table.ColumnHeaderCell>Status</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="priority" textValue="Priority">
+					<Table.ColumnHeaderCell>Priority</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="total" textValue="Total">
+					<Table.ColumnHeaderCell data-testid="sandbox-total-header-cell">
+						<div class="flex w-full justify-end">Total</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			{#each rows as row (row.id)}
+				<Table.Row id={row.id}>
+					<Table.Cell>
+						<Table.Checkbox />
+					</Table.Cell>
+					<Table.Cell>{row.request}</Table.Cell>
+					<Table.Cell>{row.requester}</Table.Cell>
+					<Table.Cell>{row.area}</Table.Cell>
+					<Table.Cell>{row.status}</Table.Cell>
+					<Table.Cell>{row.priority}</Table.Cell>
+					<Table.Cell>
+						<div class="flex w-full justify-end">${row.total.toLocaleString()}</div>
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="sandbox-overflow-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

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

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

package/dist/table/root/context.d.ts

@@ -19,6 +19,16 @@ export type TableSortDescriptor = {
 };
 export type TableColumnWidth = number | `${number}px` | `${number}%` | `${number}fr`;
 export declare const DEFAULT_TABLE_COLUMN_MIN_WIDTH = 60;
+export type RoundedWidthDistributionEntry = {
+    columnId: string;
+    index: number;
+    exactWidth: number;
+    width: number;
+    minWidth: number;
+    maxWidth?: number;
+    remainder: number;
+};
+export declare function distributeRoundedWidths(entries: RoundedWidthDistributionEntry[], targetTotal: number): RoundedWidthDistributionEntry[];
 export type TableGridCoord = {
     row: number;
     col: number;
@@ -109,6 +119,7 @@ export type TableContext = {
     getVisibleColumnWidths: () => Map<string, TableColumnWidth>;
     getResolvedVisibleColumnWidths: () => Map<string, number>;
     hasRelativeVisibleColumnWidths: () => boolean;
+    refreshMeasuredLayout: () => void;
     setColumnWidths: (widths?: Iterable<readonly [string, TableColumnWidth]>) => void;
     setColumnWidth: (columnId: string, width: number) => void;
     setHiddenColumns: (columnIds?: Iterable<string>) => void;

package/dist/table/root/context.js

@@ -7,6 +7,45 @@ const TABLE_COLUMN_KEY = Symbol('table-column');
 const TABLE_CELL_KEY = Symbol('table-cell');
 const IS_BROWSER = typeof window !== 'undefined';
 export const DEFAULT_TABLE_COLUMN_MIN_WIDTH = 60;
+export function distributeRoundedWidths(entries, targetTotal) {
+    let delta = targetTotal - entries.reduce((total, entry) => total + entry.width, 0);
+    if (delta === 0)
+        return entries;
+    const prioritizedEntries = [...entries].sort((left, right) => {
+        if (delta > 0) {
+            if (right.remainder !== left.remainder)
+                return right.remainder - left.remainder;
+            return right.index - left.index;
+        }
+        if (left.remainder !== right.remainder)
+            return left.remainder - right.remainder;
+        return left.index - right.index;
+    });
+    while (delta !== 0) {
+        let updated = false;
+        for (const entry of prioritizedEntries) {
+            if (delta > 0) {
+                if (entry.maxWidth !== undefined && entry.width >= entry.maxWidth)
+                    continue;
+                entry.width += 1;
+                delta -= 1;
+                updated = true;
+            }
+            else {
+                if (entry.width <= entry.minWidth)
+                    continue;
+                entry.width -= 1;
+                delta += 1;
+                updated = true;
+            }
+            if (delta === 0)
+                break;
+        }
+        if (!updated)
+            break;
+    }
+    return entries;
+}
 export function createTableContext(options = {}) {
     let selectionMode = options.selectionMode ?? 'none';
     let selectionBehavior = options.selectionBehavior ?? 'toggle';
@@ -34,6 +73,7 @@ export function createTableContext(options = {}) {
     const headerRowOrder = [];
     const bodyRowOrder = [];
     let bodyRowsInitialized = false;
+    let selectableBodyRowCount = 0;
     const cells = new Map();
     const cellOrder = [];
     let orderedRowTokensCache = {
@@ -71,6 +111,7 @@ export function createTableContext(options = {}) {
         rowsWithCellsCache = null;
     }
     let layoutNotifyScheduled = false;
+    let selectionNotifyScheduled = false;
     let widthNotifyScheduled = false;
     function syncResizerLayoutReady(nextReady) {
         if (resizerLayoutReady === nextReady)
@@ -91,7 +132,13 @@ export function createTableContext(options = {}) {
         }
     }
     function notifySelection() {
-        selectionVersion.update((value) => value + 1);
+        if (!selectionNotifyScheduled) {
+            selectionNotifyScheduled = true;
+            queueMicrotask(() => {
+                selectionNotifyScheduled = false;
+                selectionVersion.update((value) => value + 1);
+            });
+        }
     }
     function notifyFocus() {
         focusVersion.update((value) => value + 1);
@@ -120,6 +167,9 @@ export function createTableContext(options = {}) {
             widthVersion.update((value) => value + 1);
         });
     }
+    function refreshMeasuredLayout() {
+        notifyWidthImmediately();
+    }
     function notifyResize() {
         resizeVersion.update((value) => value + 1);
     }
@@ -220,10 +270,20 @@ export function createTableContext(options = {}) {
         }
         return Math.round(width);
     }
-    function clampColumnWidth(columnId, width) {
+    function getColumnWidthBounds(columnId) {
         const registration = getColumnRegistrationById(columnId);
-        const minWidth = registration?.minWidth ?? DEFAULT_TABLE_COLUMN_MIN_WIDTH;
-        const maxWidth = registration?.maxWidth;
+        const fixedWidth = parseColumnWidth(registration?.width);
+        const minWidth = registration?.minWidth ??
+            (fixedWidth?.unit === 'px'
+                ? Math.min(fixedWidth.value, DEFAULT_TABLE_COLUMN_MIN_WIDTH)
+                : DEFAULT_TABLE_COLUMN_MIN_WIDTH);
+        return {
+            minWidth,
+            maxWidth: registration?.maxWidth
+        };
+    }
+    function clampColumnWidth(columnId, width) {
+        const { minWidth, maxWidth } = getColumnWidthBounds(columnId);
         let next = Math.round(width);
         if (Number.isNaN(next) || !Number.isFinite(next)) {
             next = minWidth;
@@ -234,6 +294,19 @@ export function createTableContext(options = {}) {
         }
         return next;
     }
+    function resolveRelativeColumnWidthAllocations(entries, targetTotal) {
+        const allocations = entries.map((entry) => {
+            const { minWidth, maxWidth } = getColumnWidthBounds(entry.columnId);
+            return {
+                ...entry,
+                width: clampColumnWidth(entry.columnId, entry.exactWidth),
+                minWidth,
+                maxWidth,
+                remainder: entry.exactWidth - Math.floor(entry.exactWidth)
+            };
+        });
+        return distributeRoundedWidths(allocations, targetTotal);
+    }
     function hasResizableColumns() {
         for (const column of columns.values()) {
             if (isColumnResizable(column.id))
@@ -497,10 +570,12 @@ export function createTableContext(options = {}) {
             return resolvedVisibleColumnWidthsCache;
         const widths = new Map();
         const flexibleColumns = [];
+        const relativeColumns = [];
         const tableWidth = getMeasuredTableWidth();
-        let remainingWidth = tableWidth;
+        let fixedWidthTotal = 0;
+        let exactRelativeWidthTotal = 0;
         let totalFr = 0;
-        for (const token of getVisibleOrderedColumnTokens()) {
+        for (const [index, token] of getVisibleOrderedColumnTokens().entries()) {
             const column = columns.get(token);
             if (!column)
                 continue;
@@ -510,29 +585,34 @@ export function createTableContext(options = {}) {
             if (parsed.unit === 'px') {
                 const nextWidth = clampColumnWidth(column.id, parsed.value);
                 widths.set(column.id, nextWidth);
-                if (remainingWidth !== undefined) {
-                    remainingWidth -= nextWidth;
-                }
+                fixedWidthTotal += nextWidth;
                 continue;
             }
             if (parsed.unit === '%') {
                 if (tableWidth === undefined)
                     continue;
-                const nextWidth = clampColumnWidth(column.id, (tableWidth * parsed.value) / 100);
-                widths.set(column.id, nextWidth);
-                if (remainingWidth !== undefined) {
-                    remainingWidth -= nextWidth;
-                }
+                const exactWidth = (tableWidth * parsed.value) / 100;
+                relativeColumns.push({ columnId: column.id, index, exactWidth });
+                exactRelativeWidthTotal += exactWidth;
                 continue;
             }
-            flexibleColumns.push({ columnId: column.id, fr: parsed.value });
+            flexibleColumns.push({ columnId: column.id, fr: parsed.value, index });
             totalFr += parsed.value;
         }
         if (tableWidth !== undefined && flexibleColumns.length > 0 && totalFr > 0) {
-            const distributableWidth = Math.max(remainingWidth ?? tableWidth, 0);
+            const distributableWidth = Math.max(tableWidth - fixedWidthTotal - exactRelativeWidthTotal, 0);
             for (const entry of flexibleColumns) {
-                const nextWidth = clampColumnWidth(entry.columnId, (distributableWidth * entry.fr) / totalFr);
-                widths.set(entry.columnId, nextWidth);
+                relativeColumns.push({
+                    columnId: entry.columnId,
+                    index: entry.index,
+                    exactWidth: (distributableWidth * entry.fr) / totalFr
+                });
+            }
+        }
+        if (tableWidth !== undefined && relativeColumns.length > 0) {
+            const targetRelativeTotal = Math.max(tableWidth - fixedWidthTotal, 0);
+            for (const entry of resolveRelativeColumnWidthAllocations(relativeColumns, targetRelativeTotal)) {
+                widths.set(entry.columnId, entry.width);
             }
         }
         resolvedVisibleColumnWidthsCache = widths;
@@ -546,6 +626,22 @@ export function createTableContext(options = {}) {
         }
         return Math.round(width);
     }
+    function getFixedVisibleColumnWidthTotal() {
+        let total = 0;
+        for (const token of getVisibleOrderedColumnTokens()) {
+            const column = columns.get(token);
+            if (!column)
+                continue;
+            if (getFixedColumnWidthSpec(column.id) === undefined)
+                continue;
+            const measuredWidth = getMeasuredHeaderWidth(token);
+            const resolvedWidth = getColumnWidth(column.id) ?? measuredWidth;
+            if (resolvedWidth === undefined)
+                continue;
+            total += clampColumnWidth(column.id, resolvedWidth);
+        }
+        return total;
+    }
     function getResizableRelativeTailColumnId(activeColumnId) {
         return getVisibleOrderedColumnTokens()
             .map((token) => columns.get(token))
@@ -567,6 +663,7 @@ export function createTableContext(options = {}) {
             ? normalizeColumnWidth(getEffectiveColumnWidthSpec(preservedFlexibleColumnId))
             : undefined;
         const measuredTableWidth = getMeasuredTableWidth();
+        const fixedVisibleColumnWidthTotal = getFixedVisibleColumnWidthTotal();
         for (const token of getVisibleOrderedColumnTokens()) {
             const column = columns.get(token);
             if (!column)
@@ -606,7 +703,9 @@ export function createTableContext(options = {}) {
                 ? preservedFlexibleEffectiveWidth
                 : undefined,
             baselineWidths,
-            baselineTableWidth: measuredTableWidth ?? baselineTotalWidth,
+            baselineAvailableTableWidth: measuredTableWidth !== undefined
+                ? Math.max(measuredTableWidth - fixedVisibleColumnWidthTotal, 0)
+                : baselineTotalWidth,
             baselineTotalWidth
         };
         options.onColumnWidthsChange?.(getColumnWidths());
@@ -655,7 +754,7 @@ export function createTableContext(options = {}) {
             const baselineTailWidth = resizeSession.baselineWidths.get(resizeSession.flexibleTailColumnId);
             if (baselineActiveWidth !== undefined && baselineTailWidth !== undefined) {
                 const widthDelta = nextWidth - baselineActiveWidth;
-                const overflowWidth = Math.max(resizeSession.baselineTotalWidth - resizeSession.baselineTableWidth, 0);
+                const overflowWidth = Math.max(resizeSession.baselineTotalWidth - resizeSession.baselineAvailableTableWidth, 0);
                 const tailTargetWidth = widthDelta >= 0
                     ? baselineTailWidth - widthDelta
                     : baselineTailWidth + Math.max(-widthDelta - overflowWidth, 0);
@@ -892,6 +991,7 @@ export function createTableContext(options = {}) {
     }
     function registerRow(row) {
         const existing = rows.get(row.token);
+        const previousSelectableBodyRowCount = selectableBodyRowCount;
         const targetOrder = row.section === 'header' ? headerRowOrder : row.section === 'body' ? bodyRowOrder : null;
         const alreadyOrdered = targetOrder ? targetOrder.includes(row.token) : false;
         const wasInHeader = headerRowOrder.includes(row.token);
@@ -907,16 +1007,29 @@ export function createTableContext(options = {}) {
         if (wasInBody) {
             bodyRowOrder.splice(bodyRowOrder.indexOf(row.token), 1);
         }
+        const previousSelectableBodyRow = isSelectableBodyRow(existing);
         rows.set(row.token, row);
         if (targetOrder && !targetOrder.includes(row.token)) {
             targetOrder.push(row.token);
         }
-        notifySelection();
+        const nextSelectableBodyRow = isSelectableBodyRow(row);
+        if (previousSelectableBodyRow !== nextSelectableBodyRow) {
+            selectableBodyRowCount += nextSelectableBodyRow ? 1 : -1;
+        }
+        if ((selectedKeys.size > 0 && (existing?.section === 'body' || row.section === 'body')) ||
+            (bodyRowsInitialized &&
+                (previousSelectableBodyRowCount === 0) !== (selectableBodyRowCount === 0))) {
+            notifySelection();
+        }
         notifyLayout();
     }
     function unregisterRow(token) {
         const row = rows.get(token);
+        const previousSelectableBodyRowCount = selectableBodyRowCount;
         rows.delete(token);
+        if (isSelectableBodyRow(row)) {
+            selectableBodyRowCount = Math.max(0, selectableBodyRowCount - 1);
+        }
         if (focusedRowTarget?.rowToken === token) {
             focusedRowTarget = null;
             notifyFocus();
@@ -939,7 +1052,11 @@ export function createTableContext(options = {}) {
                 notifyFocus();
             }
         }
-        notifySelection();
+        if ((selectedKeys.size > 0 && row?.section === 'body') ||
+            (bodyRowsInitialized &&
+                (previousSelectableBodyRowCount === 0) !== (selectableBodyRowCount === 0))) {
+            notifySelection();
+        }
         notifyLayout();
     }
     function markBodyRowsInitialized() {
@@ -947,7 +1064,7 @@ export function createTableContext(options = {}) {
             return;
         const optimisticHasSelectableRows = selectionMode === 'multiple' || selectedKeys.size > 0;
         bodyRowsInitialized = true;
-        const actualHasSelectableRows = getOrderedSelectableRowIds().length > 0 || selectedKeys.size > 0;
+        const actualHasSelectableRows = selectableBodyRowCount > 0 || selectedKeys.size > 0;
         if (optimisticHasSelectableRows !== actualHasSelectableRows) {
             notifySelection();
         }
@@ -1001,6 +1118,20 @@ export function createTableContext(options = {}) {
             return false;
         return disabledKeys.has(id);
     }
+    function isSelectableBodyRow(row) {
+        return (row?.section === 'body' &&
+            row.id !== undefined &&
+            !isRowSelectionDisabled(row.id, row.disabled));
+    }
+    function recomputeSelectableBodyRowCount() {
+        let nextSelectableBodyRowCount = 0;
+        for (const token of bodyRowOrder) {
+            if (isSelectableBodyRow(rows.get(token))) {
+                nextSelectableBodyRowCount += 1;
+            }
+        }
+        selectableBodyRowCount = nextSelectableBodyRowCount;
+    }
     function isRowDisabled(id, localDisabled = false) {
         return disabledBehavior === 'all' && isRowSelectionDisabled(id, localDisabled);
     }
@@ -1039,7 +1170,7 @@ export function createTableContext(options = {}) {
         if (!bodyRowsInitialized) {
             return selectionMode === 'multiple' || selectedKeys.size > 0;
         }
-        return getOrderedSelectableRowIds().length > 0 || selectedKeys.size > 0;
+        return selectableBodyRowCount > 0 || selectedKeys.size > 0;
     }
     function isRowFocused(token) {
         if (focusedRowTarget?.rowToken === token)
@@ -1698,16 +1829,22 @@ export function createTableContext(options = {}) {
         notifySelection();
     }
     function setDisabledKeys(keys) {
+        const previousSelectableBodyRowCount = selectableBodyRowCount;
         disabledKeys.clear();
         if (keys) {
             for (const key of keys) {
                 disabledKeys.add(key);
             }
         }
+        recomputeSelectableBodyRowCount();
         invalidateLayoutCaches();
         reconcileFocusAfterDisabledStateChange();
         notifyLayout();
-        notifySelection();
+        if (selectedKeys.size > 0 ||
+            (bodyRowsInitialized &&
+                (previousSelectableBodyRowCount === 0) !== (selectableBodyRowCount === 0))) {
+            notifySelection();
+        }
     }
     function setRowActionHandler(handler) {
         onRowAction = handler;
@@ -1795,6 +1932,7 @@ export function createTableContext(options = {}) {
         getVisibleColumnWidths,
         getResolvedVisibleColumnWidths,
         hasRelativeVisibleColumnWidths,
+        refreshMeasuredLayout,
         setColumnWidths,
         setColumnWidth,
         setHiddenColumns,

package/dist/table/root/table-root.svelte

@@ -295,6 +295,33 @@
 		element = tableElement;
 	});
 
+	$effect(() => {
+		if (!tableElement) return;
+
+		const resizeTarget = tableElement.parentElement ?? tableElement;
+		const refreshMeasuredLayout = () => {
+			ctx.refreshMeasuredLayout();
+		};
+
+		window.addEventListener('resize', refreshMeasuredLayout);
+		window.visualViewport?.addEventListener('resize', refreshMeasuredLayout);
+
+		const resizeObserver =
+			typeof ResizeObserver !== 'undefined'
+				? new ResizeObserver(() => {
+						refreshMeasuredLayout();
+					})
+				: null;
+
+		resizeObserver?.observe(resizeTarget);
+
+		return () => {
+			window.removeEventListener('resize', refreshMeasuredLayout);
+			window.visualViewport?.removeEventListener('resize', refreshMeasuredLayout);
+			resizeObserver?.disconnect();
+		};
+	});
+
 	$effect(() => {
 		ctx.setSelectionMode(selectionMode);
 	});

package/dist/table/row/table-row.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { SvelteMap } from 'svelte/reactivity';
 	import { writable } from 'svelte/store';
 	import { setTableRowContext, useTableContext, useTableSectionContext } from '../root/context';
 	import type { TableRowProps } from '../types.js';
@@ -22,14 +21,12 @@
 	const section = useTableSectionContext();
 	const rowToken = table.createInstanceToken('row');
 	const cellOrder: string[] = [];
-	const cellElements = new SvelteMap<string, () => HTMLElement | undefined>();
+	const cellElements: Record<string, () => HTMLElement | undefined> = {};
 	const cellOrderVersion = writable(0);
 
 	let rowElement = $state<HTMLTableRowElement | undefined>(undefined);
-	let childListObserver: MutationObserver | null = null;
 
 	function notifyCellOrderChange() {
-		cellIndexCache = null;
 		cellOrderVersion.update((value) => value + 1);
 	}
 
@@ -39,12 +36,12 @@
 			notifyCellOrderChange();
 		}
 		if (getElement) {
-			cellElements.set(token, getElement);
+			cellElements[token] = getElement;
 		}
 	}
 
 	function unregisterCellToken(token: string) {
-		cellElements.delete(token);
+		delete cellElements[token];
 		const index = cellOrder.indexOf(token);
 		if (index >= 0) {
 			cellOrder.splice(index, 1);
@@ -52,40 +49,12 @@
 		}
 	}
 
-	let cellIndexCache: Map<string, number> | null = null;
-
-	function buildCellIndexCache(): Map<string, number> {
-		if (cellIndexCache) return cellIndexCache;
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- plain cache, not reactive state
-		const cache = new Map<string, number>();
-		if (rowElement) {
-			const directCells = rowElement.children;
-			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- plain cache, not reactive state
-			const elementToIndex = new Map<HTMLElement, number>();
-			for (let i = 0; i < directCells.length; i += 1) {
-				const child = directCells[i];
-				if (child instanceof HTMLElement) {
-					elementToIndex.set(child, i);
-				}
-			}
-			for (const registeredToken of cellOrder) {
-				const element = cellElements.get(registeredToken)?.();
-				if (element) {
-					const idx = elementToIndex.get(element);
-					if (idx !== undefined) {
-						cache.set(registeredToken, idx);
-					}
-				}
-			}
-		}
-		cellIndexCache = cache;
-		return cache;
-	}
-
 	function getCellIndex(token: string) {
-		const cache = buildCellIndexCache();
-		const cached = cache.get(token);
-		if (cached !== undefined) return cached;
+		const element = cellElements[token]?.();
+		if (rowElement && element) {
+			const index = Array.from(rowElement.children).indexOf(element);
+			if (index >= 0) return index;
+		}
 		return cellOrder.indexOf(token);
 	}
 
@@ -120,23 +89,7 @@
 		syncRowRegistration();
 	});
 
-	let pendingCellOrderNotify = false;
-
-	function scheduleCellOrderNotify() {
-		if (!pendingCellOrderNotify) {
-			pendingCellOrderNotify = true;
-			queueMicrotask(() => {
-				pendingCellOrderNotify = false;
-				cellIndexCache = null;
-				notifyCellOrderChange();
-			});
-		}
-	}
-
 	$effect(() => {
-		childListObserver?.disconnect();
-		childListObserver = null;
-
 		if (!rowElement) {
 			return;
 		}
@@ -145,18 +98,25 @@
 			scheduleCellOrderNotify();
 		});
 		observer.observe(rowElement, { childList: true });
-		childListObserver = observer;
 
 		return () => {
 			observer.disconnect();
-			if (childListObserver === observer) {
-				childListObserver = null;
-			}
 		};
 	});
 
+	let pendingCellOrderNotify = false;
+
+	function scheduleCellOrderNotify() {
+		if (!pendingCellOrderNotify) {
+			pendingCellOrderNotify = true;
+			queueMicrotask(() => {
+				pendingCellOrderNotify = false;
+				notifyCellOrderChange();
+			});
+		}
+	}
+
 	onDestroy(() => {
-		childListObserver?.disconnect();
 		table.unregisterRow(rowToken);
 	});
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-kit/svelte-components",
-	"version": "1.0.0-alpha.17",
+	"version": "1.0.0-alpha.18",
 	"license": "MIT",
 	"type": "module",
 	"svelte": "./dist/index.js",