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

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

@@ -16,10 +16,12 @@
 		shouldShowFocusVisible,
 		trackInteractionModality
 	} from '../../primitives/input-modality';
+	import { visuallyHiddenStyle } from '../utils/visually-hidden-style';
 	import type { TableRootProps } from '../types.js';
 	import {
 		createTableContext,
 		setTableContext,
+		type TableColumnWidth,
 		type TableSelectionKey,
 		type TableSortDescriptor
 	} from './context';
@@ -59,7 +61,7 @@
 	let focusVisible = $state(false);
 	let pendingControlledHiddenColumns = $state<string[] | null>(null);
 	let pendingControlledSelection = $state<Set<TableSelectionKey> | null>(null);
-	let pendingControlledColumnWidths = $state<Map<string, number> | null>(null);
+	let pendingControlledColumnWidths = $state<Map<string, TableColumnWidth> | null>(null);
 	let sortAnnouncement = $state('');
 	let hasObservedSortState = $state(false);
 	let hasInitializedSortSync = $state(false);
@@ -136,7 +138,10 @@
 		return true;
 	}
 
-	function hasSameColumnWidths(left: Map<string, number>, right: Map<string, number>) {
+	function hasSameColumnWidths(
+		left: Map<string, TableColumnWidth>,
+		right: Map<string, TableColumnWidth>
+	) {
 		if (left.size !== right.size) return false;
 		for (const [key, value] of left) {
 			if (right.get(key) !== value) return false;
@@ -163,7 +168,52 @@
 		return ctx.hasResizableColumns();
 	});
 
+	const hasDefinedColumnWidths = $derived.by(() => {
+		void $layoutVersion;
+		for (let index = 0; index < ctx.getColumnCount(); index += 1) {
+			const column = ctx.getColumnAt(index);
+			if (!column || ctx.isColumnHidden(column.id)) continue;
+			if (column.width !== undefined || column.defaultWidth !== undefined) {
+				return true;
+			}
+		}
+		return false;
+	});
+
+	const layoutColumns = $derived.by(() => {
+		void $layoutVersion;
+		void $widthVersion;
+
+		const columns: Array<{
+			id: string;
+			width: number | undefined;
+			widthStyle: string | undefined;
+			implicitWidth: boolean;
+			minWidth: number | undefined;
+			maxWidth: number | undefined;
+		}> = [];
+
+		for (let index = 0; index < ctx.getColumnCount(); index += 1) {
+			const column = ctx.getColumnAt(index);
+			if (!column || ctx.isColumnHidden(column.id)) continue;
+
+			columns.push({
+				id: column.id,
+				width: ctx.getColumnWidth(column.id),
+				widthStyle: ctx.getColumnWidthStyle(column.id),
+				implicitWidth: !ctx.hasAuthoredColumnWidthSpec(column.id),
+				minWidth: ctx.getColumnMinWidth(column.id),
+				maxWidth: ctx.getColumnMaxWidth(column.id)
+			});
+		}
+
+		return columns;
+	});
+
 	const explicitManagedTableWidth = $derived.by(() => {
+		void $layoutVersion;
+		if (ctx.hasRelativeVisibleColumnWidths()) return undefined;
+
 		const widths = columnWidths ?? defaultColumnWidths;
 		if (!widths) return undefined;
 
@@ -171,8 +221,10 @@
 		let hasAnyWidth = false;
 		for (const [columnId, width] of widths) {
 			if (ctx.isColumnHidden(columnId)) continue;
-			if (!Number.isFinite(width)) continue;
-			total += width;
+			if (typeof width === 'string' && !width.trim().endsWith('px')) return undefined;
+			const numericWidth = typeof width === 'number' ? width : Number.parseFloat(width);
+			if (!Number.isFinite(numericWidth)) return undefined;
+			total += numericWidth;
 			hasAnyWidth = true;
 		}
 
@@ -182,16 +234,37 @@
 	const managedTableWidth = $derived.by(() => {
 		void $widthVersion;
 		void $layoutVersion;
-		if (!hasResizable) return undefined;
-		const widths = ctx.getVisibleColumnWidths();
+		const widths = ctx.getResolvedVisibleColumnWidths();
 		const columnCount = ctx.getVisibleColumnCount();
 		if (widths.size === 0 || widths.size < columnCount) return undefined;
+		if (ctx.hasRelativeVisibleColumnWidths()) return undefined;
 		let total = 0;
 		for (const w of widths.values()) total += w;
 		return total;
 	});
 
-	const resolvedTableWidth = $derived(managedTableWidth ?? explicitManagedTableWidth);
+	const relativeResolvedTableWidth = $derived.by(() => {
+		void $widthVersion;
+		void $layoutVersion;
+		if (!ctx.hasRelativeVisibleColumnWidths()) return undefined;
+
+		const widths = ctx.getResolvedVisibleColumnWidths();
+		const columnCount = ctx.getVisibleColumnCount();
+		if (widths.size === 0 || widths.size < columnCount) return undefined;
+
+		let total = 0;
+		for (const w of widths.values()) total += w;
+		return total;
+	});
+
+	const fallbackRelativeTableWidth = $derived.by(() => {
+		void $layoutVersion;
+		return ctx.hasRelativeVisibleColumnWidths() ? '100%' : undefined;
+	});
+
+	const resolvedTableWidth = $derived(
+		managedTableWidth ?? explicitManagedTableWidth ?? relativeResolvedTableWidth
+	);
 
 	context = ctx;
 
@@ -368,8 +441,13 @@
 	bind:this={tableElement}
 	role="grid"
 	class={className}
-	style:table-layout={hasResizable || resolvedTableWidth !== undefined ? 'fixed' : undefined}
-	style:width={resolvedTableWidth !== undefined ? `${resolvedTableWidth}px` : undefined}
+	style:--table-visible-column-count={ariaColCount ? `${ariaColCount}` : undefined}
+	style:table-layout={hasResizable || hasDefinedColumnWidths || resolvedTableWidth !== undefined
+		? 'fixed'
+		: undefined}
+	style:width={resolvedTableWidth !== undefined
+		? `${resolvedTableWidth}px`
+		: fallbackRelativeTableWidth}
 	style:min-width={resolvedTableWidth !== undefined ? '0' : undefined}
 	aria-label={ariaLabel}
 	aria-labelledby={ariaLabelledby}
@@ -387,21 +465,42 @@
 	onkeydown={handleKeyDown}
 	{...restProps}
 >
+	{#if layoutColumns.length > 0}
+		<colgroup>
+			{#each layoutColumns as column (column.id)}
+				<col
+					data-table-implicit-width={column.implicitWidth ? 'true' : undefined}
+					style:width={column.widthStyle}
+					style:min-width={column.minWidth !== undefined ? `${column.minWidth}px` : undefined}
+					style:max-width={column.maxWidth !== undefined ? `${column.maxWidth}px` : undefined}
+				/>
+			{/each}
+		</colgroup>
+	{/if}
+
 	{#if children}
 		{@render children()}
 	{/if}
 </table>
 
-<span
-	role="status"
-	aria-live="polite"
-	aria-atomic="true"
-	style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
+<span role="status" aria-live="polite" aria-atomic="true" style={visuallyHiddenStyle}
 	>{sortAnnouncement}</span
 >
 
-<span
-	id={ctx.selectionUnavailableDescriptionId}
-	style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
+<span id={ctx.selectionUnavailableDescriptionId} style={visuallyHiddenStyle}
 	>Selection unavailable for this row.</span
 >
+
+<style>
+	:global(table[role='grid']:has([data-table-column-resizer='true'])) {
+		table-layout: fixed;
+		width: 100%;
+		min-width: 0;
+	}
+
+	:global(
+		table[role='grid']:has([data-table-column-resizer='true']) col[data-table-implicit-width='true']
+	) {
+		width: calc(100% / var(--table-visible-column-count, 1));
+	}
+</style>

package/dist/table/types.d.ts

@@ -35,16 +35,16 @@ export type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'>
     defaultSelectedKeys?: Iterable<TableSelectionKey>;
     sortDescriptor?: TableSortDescriptor;
     defaultSortDescriptor?: TableSortDescriptor;
-    columnWidths?: Map<string, number>;
-    defaultColumnWidths?: Iterable<readonly [string, number]>;
+    columnWidths?: Map<string, TableColumnWidth>;
+    defaultColumnWidths?: Iterable<readonly [string, TableColumnWidth]>;
     disabledKeys?: Iterable<TableSelectionKey>;
     onRowAction?: TableRowActionHandler;
     onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
     onSortChange?: (descriptor: TableSortDescriptor | undefined) => void;
-    onColumnWidthsChange?: (widths: Map<string, number>) => void;
+    onColumnWidthsChange?: (widths: Map<string, TableColumnWidth>) => void;
     onHiddenColumnsChange?: (columnIds: string[]) => void;
     onColumnResizeStart?: (columnId: string) => void;
-    onColumnResizeEnd?: (widths: Map<string, number>) => void;
+    onColumnResizeEnd?: (widths: Map<string, TableColumnWidth>) => void;
     children?: Snippet;
     class?: string;
     context?: TableContext;

package/dist/table/utils/visually-hidden-style.d.ts

@@ -0,0 +1 @@
+export declare const visuallyHiddenStyle = "position:fixed;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;";

package/dist/table/utils/visually-hidden-style.js

@@ -0,0 +1 @@
+export const visuallyHiddenStyle = 'position:fixed;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;';

package/package.json

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