sveltacular 1.0.15 → 1.0.16

package/dist/forms/check-box/check-box.svelte

@@ -12,6 +12,7 @@
 		name = undefined,
 		onChange = undefined,
 		label,
+		ariaLabel,
 		children,
 		size = 'full' as FormFieldSizeOptions,
 		helperText = undefined,
@@ -25,6 +26,7 @@
 		name?: string | undefined;
 		onChange?: ((data: { isChecked: boolean; value: string }) => void) | undefined;
 		label?: string;
+		ariaLabel?: string;
 		children?: Snippet;
 		size?: FormFieldSizeOptions;
 		helperText?: string;
@@ -33,6 +35,9 @@
 		inline?: boolean;
 	} = $props();
 
+	// Use ariaLabel if provided, otherwise fall back to label for accessibility
+	let inputAriaLabel = $derived(ariaLabel ?? label);
+
 	const id = uniqueId();
 
 	const onChecked = (event: Event) => {
@@ -56,18 +61,21 @@
 			bind:checked={isChecked}
 			onchange={onChecked}
 			{required}
+			aria-label={inputAriaLabel}
 		/>
 		<span class="checkbox">
 			<span class="checkmark"><Icon type="check" size="sm" fill="#fff" mask /></span>
 		</span>
-		{#if children}
-			<div class="text">
-				{@render children()}
-			</div>
-		{:else if label}
-			<div class="text">
-				{label}
-			</div>
+		{#if !ariaLabel}
+			{#if children}
+				<div class="text">
+					{@render children()}
+				</div>
+			{:else if label}
+				<div class="text">
+					{label}
+				</div>
+			{/if}
 		{/if}
 	</label>
 {:else}
@@ -82,6 +90,7 @@
 				bind:checked={isChecked}
 				onchange={onChecked}
 				{required}
+				aria-label={inputAriaLabel}
 			/>
 			<span class="checkbox">
 				<span class="checkmark"> <Icon type="check" size="sm" fill="#fff" mask /></span>
@@ -123,7 +132,7 @@
   user-select: none;
 }
 .checkbox-label .checkbox .checkmark {
-  display: block;
+  display: none;
   position: absolute;
   top: 0;
   left: 0;
@@ -145,6 +154,7 @@
   border-color: var(--form-input-border);
 }
 .checkbox-label input:checked + .checkbox .checkmark {
+  display: block;
   width: 100%;
   height: 100%;
 }</style>

package/dist/forms/check-box/check-box.svelte.d.ts

@@ -11,6 +11,7 @@ type $$ComponentProps = {
         value: string;
     }) => void) | undefined;
     label?: string;
+    ariaLabel?: string;
     children?: Snippet;
     size?: FormFieldSizeOptions;
     helperText?: string;

package/dist/forms/radio-group/radio-box.svelte

@@ -9,12 +9,14 @@
 		value = undefined as RadioValue,
 		group = $bindable(undefined as string | undefined),
 		disabled = false,
+		ariaLabel,
 		children = undefined,
 		onChange = undefined
 	}: {
 		value?: RadioValue;
 		group?: string | undefined;
 		disabled?: boolean;
+		ariaLabel?: string;
 		children?: Snippet;
 		onChange?: ((value: string) => void) | undefined;
 	} = $props();
@@ -29,12 +31,13 @@
 		{value}
 		{disabled}
 		{id}
+		aria-label={ariaLabel}
 		onchange={() => onChange?.(String(value || ''))}
 	/>
-	<span class="checkbox">
-		<span class="checkmark"><Icon type="check" size="sm" /></span>
+	<span class="radio-circle">
+		<span class="radio-dot"></span>
 	</span>
-	{#if children}
+	{#if !ariaLabel && children}
 		<div class="text">
 			{@render children?.()}
 		</div>
@@ -49,43 +52,35 @@
   font-size: 1rem;
   cursor: pointer;
 }
-label .checkbox {
+label .radio-circle {
   position: relative;
   width: 1.2rem;
   height: 1.2rem;
-  border-radius: 0.6rem;
+  border-radius: 50%;
   border: 1px solid var(--form-input-border, black);
   background-color: var(--form-input-bg, white);
-  color: var(--form-input-fg, black);
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
   user-select: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-top: 0.1rem;
 }
-label .checkbox .checkmark {
-  display: block;
-  width: 0;
-  height: 0;
-  line-height: 100%;
-  color: var(--form-input-selected-fg, white);
-  fill: var(--form-input-selected-bg, #3182ce);
-  stroke: var(--form-input-selected-fg, white);
-  transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
+label .radio-circle .radio-dot {
+  display: none;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--form-input-selected-bg, #3182ce);
+  transition: opacity 0.2s ease-in-out;
 }
 label input {
   width: 0;
   height: 0;
   position: absolute;
 }
-label input:checked + .checkbox {
-  background-color: var(--form-input-selected-bg, #3182ce);
+label input:checked + .radio-circle {
+  border-color: var(--form-input-selected-bg, #3182ce);
 }
-label input:checked + .checkbox .checkmark {
-  width: 100%;
-  height: 100%;
+label input:checked + .radio-circle .radio-dot {
+  display: block;
 }</style>

package/dist/forms/radio-group/radio-box.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     value?: RadioValue;
     group?: string | undefined;
     disabled?: boolean;
+    ariaLabel?: string;
     children?: Snippet;
     onChange?: ((value: string) => void) | undefined;
 };

package/dist/tables/data-grid.svelte

@@ -4,6 +4,8 @@
 	import TableHeader from './table-header.svelte';
 	import TableRow from './table-row.svelte';
 	import Table from './table.svelte';
+	import TableSelectionCell from './table-selection-cell.svelte';
+	import TableSelectionHeaderCell from './table-selection-header-cell.svelte';
 	import type { ColumnDef, JsonObject, PaginationProperties } from '../types/data.js';
 	import Button from '../forms/button/button.svelte';
 	import DropdownItem from '../generic/dropdown-item/dropdown-item.svelte';
@@ -21,10 +23,8 @@
 		getCellTypeClass,
 		sortRows
 	} from './cell-renderers.js';
-	import { getTableContext } from './table-context.svelte.js';
 	import type { Snippet } from 'svelte';
 	import { useVirtualList } from '../helpers/use-virtual-list.svelte.js';
-	import { onMount } from 'svelte';
 
 	type PaginationEvent = (pagination: PaginationProperties) => void;
 
@@ -48,12 +48,12 @@
 		actions = undefined,
 		stickyHeader = false,
 		enableSorting = true,
-		enableSelection = false,
-		selectionMode = 'multi',
+		selectionMode = 'none',
 		rowIdKey = 'id',
 		onPageChange = null,
 		onSort = undefined,
 		onSelectionChange = undefined,
+		selectedCount = $bindable(0),
 		children = undefined,
 		virtualScroll = false,
 		rowHeight = 48,
@@ -67,12 +67,12 @@
 		actions?: Actions;
 		stickyHeader?: boolean;
 		enableSorting?: boolean;
-		enableSelection?: boolean;
-		selectionMode?: 'single' | 'multi';
+		selectionMode?: 'none' | 'single' | 'multi';
 		rowIdKey?: string;
 		onPageChange?: PaginationEvent | null;
 		onSort?: (column: string, direction: 'asc' | 'desc') => void;
-		onSelectionChange?: (selectedIds: Set<string | number>) => void;
+		onSelectionChange?: (selectedRows: JsonObject[]) => void;
+		selectedCount?: number;
 		children?: Snippet;
 		virtualScroll?: boolean;
 		rowHeight?: number;
@@ -108,8 +108,19 @@
 
 	// Computed values
 	let hasActionCol = $derived(actions?.items && actions.items.length > 0);
+	let hasSelectionCol = $derived(selectionMode !== 'none');
 	let visibleCols = $derived(cols.filter((col) => !col.hidden));
-	let colCount = $derived(Math.max(1, visibleCols.length) + (hasActionCol ? 1 : 0));
+	let colCount = $derived(
+		Math.max(1, visibleCols.length) + (hasActionCol ? 1 : 0) + (hasSelectionCol ? 1 : 0)
+	);
+	
+	// Track selected count from selection change callbacks
+	let internalSelectedCount = $state(0);
+	
+	// Sync selectedCount with internal tracking
+	$effect(() => {
+		selectedCount = internalSelectedCount;
+	});
 
 	// Manage sort state directly in DataGrid (not via context)
 	let currentSortColumn = $state<string | null>(null);
@@ -181,13 +192,17 @@
 </script>
 
 <Table
+	rows={filteredRows ?? []}
 	{stickyHeader}
 	enableSorting={false}
-	{enableSelection}
 	{selectionMode}
 	{rowIdKey}
 	onSort={handleSortChange}
-	{onSelectionChange}
+	onSelectionChange={(selectedRows) => {
+		onSelectionChange?.(selectedRows);
+		// Track selected count from the callback
+		internalSelectedCount = selectedRows.length;
+	}}
 >
 	{#if children}
 		<TableCaption side={captionSide} align={captionAlign}>{@render children?.()}</TableCaption>
@@ -195,6 +210,9 @@
 
 	<TableHeader sticky={stickyHeader}>
 		<tr>
+			{#if hasSelectionCol}
+				<TableSelectionHeaderCell />
+			{/if}
 			{#each visibleCols as col}
 				<TableHeaderCell
 					type={col.type}
@@ -245,7 +263,10 @@
 						<div
 							style="position: absolute; top: {vItem.offsetTop}px; height: {vItem.height}px; width: 100%; display: table; table-layout: fixed;"
 						>
-							<TableRow {row} rowIndex={index} selectable={enableSelection}>
+							<TableRow {row} rowIndex={index} selectable={hasSelectionCol}>
+								{#if hasSelectionCol}
+									<TableSelectionCell {row} rowIndex={index} />
+								{/if}
 								{#each visibleCols as col}
 									{@const cellValue = formatCell(row, col)}
 									{@const cellLink = getCellLink(row, col)}
@@ -294,7 +315,10 @@
 		{:else}
 			<!-- Regular rendering mode -->
 			{#each filteredRows as row, index}
-				<TableRow {row} rowIndex={index} selectable={enableSelection}>
+				<TableRow {row} rowIndex={index} selectable={hasSelectionCol}>
+					{#if hasSelectionCol}
+						<TableSelectionCell {row} rowIndex={index} />
+					{/if}
 					{#each visibleCols as col}
 						{@const cellValue = formatCell(row, col)}
 						{@const cellLink = getCellLink(row, col)}

package/dist/tables/data-grid.svelte.d.ts

@@ -19,17 +19,17 @@ type $$ComponentProps = {
     actions?: Actions;
     stickyHeader?: boolean;
     enableSorting?: boolean;
-    enableSelection?: boolean;
-    selectionMode?: 'single' | 'multi';
+    selectionMode?: 'none' | 'single' | 'multi';
     rowIdKey?: string;
     onPageChange?: PaginationEvent | null;
     onSort?: (column: string, direction: 'asc' | 'desc') => void;
-    onSelectionChange?: (selectedIds: Set<string | number>) => void;
+    onSelectionChange?: (selectedRows: JsonObject[]) => void;
+    selectedCount?: number;
     children?: Snippet;
     virtualScroll?: boolean;
     rowHeight?: number;
     maxHeight?: string;
 };
-declare const DataGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const DataGrid: import("svelte").Component<$$ComponentProps, {}, "selectedCount">;
 type DataGrid = ReturnType<typeof DataGrid>;
 export default DataGrid;

package/dist/tables/table-context.svelte.d.ts

@@ -1,27 +1,31 @@
 import type { JsonObject, SortDirection, SortState } from '../types/data.js';
 export interface TableContextConfig<T extends JsonObject = JsonObject> {
     enableSorting?: boolean;
-    enableSelection?: boolean;
-    selectionMode?: 'single' | 'multi';
+    selectionMode?: 'none' | 'single' | 'multi';
     rowIdKey?: keyof T & string;
     onSort?: (column: string, direction: SortDirection) => void;
-    onSelectionChange?: (selectedIds: Set<string | number>) => void;
+    onSelectionChange?: (selectedRows: T[]) => void;
+    rows?: T[];
 }
 export declare class TableContext<T extends JsonObject = JsonObject> {
     sortColumn: string | null;
     sortDirection: SortDirection;
     selectedIds: Set<string | number>;
     lastSelectedIndex: number | null;
+    radioGroup: string | undefined;
+    selectedCount: number;
     config: TableContextConfig<T>;
     constructor(config?: TableContextConfig<T>);
     toggleSort(columnKey: string): void;
     setSortColumn(columnKey: string | null, direction?: SortDirection): void;
     clearSort(): void;
     getSortState(): SortState;
-    toggleRow(id: string | number, index: number, shiftKey?: boolean): void;
+    toggleRow(id: string | number, index: number, shiftKey?: boolean, rows?: T[]): void;
+    private notifySelectionChange;
     selectRange(startIndex: number, endIndex: number, rows?: T[]): void;
     selectAll(rows: T[]): void;
-    deselectAll(): void;
+    deselectAll(rows?: T[]): void;
+    setRadioSelection(value: string | undefined, rows?: T[]): void;
     isRowSelected(id: string | number): boolean;
     isAllSelected(rows: T[]): boolean;
     isSomeSelected(rows: T[]): boolean;

package/dist/tables/table-context.svelte.js

@@ -7,13 +7,16 @@ export class TableContext {
     // Selection state
     selectedIds = $state(new Set());
     lastSelectedIndex = $state(null);
+    // Radio button group state (for single selection mode)
+    radioGroup = $state(undefined);
+    // Reactive selected count
+    selectedCount = $derived(this.selectedIds.size);
     // Configuration
     config;
     constructor(config = {}) {
         this.config = {
             enableSorting: true,
-            enableSelection: false,
-            selectionMode: 'multi',
+            selectionMode: 'none',
             rowIdKey: 'id',
             ...config
         };
@@ -56,25 +59,31 @@ export class TableContext {
         };
     }
     // Selection methods
-    toggleRow(id, index, shiftKey = false) {
-        if (!this.config.enableSelection)
+    toggleRow(id, index, shiftKey = false, rows) {
+        if (this.config.selectionMode === 'none')
             return;
         if (this.config.selectionMode === 'single') {
             // Single selection mode
             if (this.selectedIds.has(id)) {
                 this.selectedIds.delete(id);
+                this.radioGroup = undefined;
+                // Trigger reactivity
+                this.selectedIds = new Set(this.selectedIds);
             }
             else {
                 this.selectedIds.clear();
                 this.selectedIds.add(id);
+                this.radioGroup = String(id);
+                // Trigger reactivity
+                this.selectedIds = new Set(this.selectedIds);
             }
             this.lastSelectedIndex = index;
         }
         else {
             // Multi selection mode
-            if (shiftKey && this.lastSelectedIndex !== null) {
+            if (shiftKey && this.lastSelectedIndex !== null && rows) {
                 // Range selection
-                this.selectRange(this.lastSelectedIndex, index);
+                this.selectRange(this.lastSelectedIndex, index, rows);
             }
             else {
                 // Toggle single row
@@ -84,10 +93,18 @@ export class TableContext {
                 else {
                     this.selectedIds.add(id);
                 }
+                // Trigger reactivity
+                this.selectedIds = new Set(this.selectedIds);
                 this.lastSelectedIndex = index;
             }
         }
-        this.config.onSelectionChange?.(new Set(this.selectedIds));
+        this.notifySelectionChange(rows);
+    }
+    notifySelectionChange(rows) {
+        if (this.config.onSelectionChange && rows) {
+            const selectedRows = this.getSelectedRows(rows);
+            this.config.onSelectionChange(selectedRows);
+        }
     }
     selectRange(startIndex, endIndex, rows) {
         if (!rows)
@@ -103,23 +120,52 @@ export class TableContext {
                 }
             }
         }
-        this.config.onSelectionChange?.(new Set(this.selectedIds));
+        // Trigger reactivity
+        this.selectedIds = new Set(this.selectedIds);
+        this.notifySelectionChange(rows);
     }
     selectAll(rows) {
-        if (!this.config.enableSelection)
+        if (this.config.selectionMode === 'none')
             return;
+        // Clear first, then add all to ensure proper state update
+        this.selectedIds.clear();
         rows.forEach((row) => {
             const id = row[this.config.rowIdKey];
             if (id !== undefined) {
                 this.selectedIds.add(id);
             }
         });
-        this.config.onSelectionChange?.(new Set(this.selectedIds));
+        // Trigger reactivity by reassigning (Svelte 5 tracks Set mutations, but ensure it's reactive)
+        this.selectedIds = new Set(this.selectedIds);
+        this.notifySelectionChange(rows);
     }
-    deselectAll() {
+    deselectAll(rows) {
         this.selectedIds.clear();
+        // Trigger reactivity by reassigning
+        this.selectedIds = new Set(this.selectedIds);
         this.lastSelectedIndex = null;
-        this.config.onSelectionChange?.(new Set(this.selectedIds));
+        this.radioGroup = undefined;
+        this.notifySelectionChange(rows);
+    }
+    // Method to handle radio group changes (from radio button bindings)
+    setRadioSelection(value, rows) {
+        if (this.config.selectionMode !== 'single')
+            return;
+        if (value) {
+            this.selectedIds.clear();
+            this.selectedIds.add(value);
+            // Trigger reactivity
+            this.selectedIds = new Set(this.selectedIds);
+            this.radioGroup = value;
+            this.notifySelectionChange(rows);
+        }
+        else {
+            this.selectedIds.clear();
+            // Trigger reactivity
+            this.selectedIds = new Set(this.selectedIds);
+            this.radioGroup = undefined;
+            this.notifySelectionChange(rows);
+        }
     }
     isRowSelected(id) {
         return this.selectedIds.has(id);
@@ -140,6 +186,7 @@ export class TableContext {
             return id !== undefined && this.selectedIds.has(id);
         });
     }
+    // selectedCount is now a reactive derived state, but keep this method for backwards compatibility
     getSelectedCount() {
         return this.selectedIds.size;
     }

package/dist/tables/table-row.svelte

@@ -22,36 +22,11 @@
 		row && context?.config.rowIdKey ? (row[context.config.rowIdKey] as string | number) : undefined
 	);
 
-	let isSelected = $derived(rowId !== undefined && context ? context.isRowSelected(rowId) : false);
-
-	let canSelect = $derived(selectable && context?.config.enableSelection && rowId !== undefined);
-
-	function handleClick(event: MouseEvent) {
-		if (canSelect && rowId !== undefined && rowIndex !== undefined) {
-			const shiftKey = event.shiftKey;
-			context?.toggleRow(rowId, rowIndex, shiftKey);
-		}
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		if (canSelect && (event.key === 'Enter' || event.key === ' ')) {
-			event.preventDefault();
-			if (rowId !== undefined && rowIndex !== undefined) {
-				context?.toggleRow(rowId, rowIndex, event.shiftKey);
-			}
-		}
-	}
+	let selectionMode = $derived(context?.config.selectionMode ?? 'none');
+	let canSelect = $derived(selectable && selectionMode !== 'none' && rowId !== undefined);
 </script>
 
-<tr
-	class:selectable={canSelect}
-	class:selected={isSelected}
-	aria-selected={canSelect ? isSelected : undefined}
-	tabindex={canSelect ? 0 : undefined}
-	onclick={handleClick}
-	onkeydown={handleKeyDown}
-	role={canSelect ? 'row' : undefined}
->
+<tr class:selectable={canSelect}>
 	{@render children?.()}
 </tr>
 
@@ -69,8 +44,6 @@
 	}
 
 	tr.selectable {
-		cursor: pointer;
-
 		&:hover {
 			background-color: var(--table-row-hover-bg, rgba(0, 0, 0, 0.05));
 		}
@@ -80,13 +53,4 @@
 			outline-offset: -2px;
 		}
 	}
-
-	tr.selected {
-		background-color: var(--table-row-selected-bg, rgba(0, 102, 204, 0.1)) !important;
-		border-color: var(--table-row-selected-border, #0066cc);
-	}
-
-	tr.selected.selectable:hover {
-		background-color: var(--table-row-selected-hover-bg, rgba(0, 102, 204, 0.15)) !important;
-	}
 </style>

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

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import type { JsonObject } from '../types/data.js';
+	import { getTableContext } from './table-context.svelte.js';
+	import CheckBox from '../forms/check-box/check-box.svelte';
+	import RadioBox from '../forms/radio-group/radio-box.svelte';
+
+	let {
+		row = undefined,
+		rowIndex = undefined
+	}: {
+		row?: JsonObject;
+		rowIndex?: number;
+	} = $props();
+
+	const context = getTableContext();
+
+	if (!context) {
+		throw new Error('TableSelectionCell must be used within a Table component');
+	}
+
+	// Get row ID for selection
+	let rowId = $derived(
+		row && context?.config.rowIdKey ? (row[context.config.rowIdKey] as string | number) : undefined
+	);
+
+	// Derive selection state from context - this is the source of truth
+	// Access selectedIds directly to ensure reactivity is tracked properly
+	let isSelectedInContext = $derived.by(() => {
+		if (rowId === undefined || !context) return false;
+		// Explicitly access selectedIds to set up reactivity tracking
+		const selectedIds = context.selectedIds;
+		return selectedIds.has(rowId);
+	});
+
+	let selectionMode = $derived(context?.config.selectionMode ?? 'none');
+
+	// Local state for checkbox binding - synced from context
+	let localChecked = $state(false);
+
+	// Sync local state FROM context whenever context selection changes
+	// This ensures external changes (like "select all") update the checkbox
+	$effect(() => {
+		localChecked = isSelectedInContext;
+	});
+
+	// For radio buttons in single selection mode
+	let radioGroupLocal = $state<string | undefined>(undefined);
+
+	// Sync radio state FROM context
+	$effect(() => {
+		if (selectionMode === 'single' && context) {
+			radioGroupLocal = context.radioGroup;
+		}
+	});
+
+	// Handle checkbox change - update context (source of truth)
+	function handleCheckboxChange(data: { isChecked: boolean; value: string }) {
+		if (rowId !== undefined && rowIndex !== undefined && context) {
+			const rows = context.config.rows ?? [];
+			// Toggle the row in context - context is the source of truth
+			context.toggleRow(rowId, rowIndex, false, rows);
+		}
+	}
+
+	// Handle radio button change
+	function handleRadioChange(value: string) {
+		if (context && selectionMode === 'single') {
+			const rows = context.config.rows ?? [];
+			// Toggle: if already selected, deselect; otherwise select
+			if (context.radioGroup === value) {
+				context.setRadioSelection(undefined, rows);
+			} else {
+				context.setRadioSelection(value, rows);
+			}
+		}
+	}
+
+	// Handle cell click - toggle selection when clicking anywhere in the cell
+	function handleCellClick(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+
+		if (selectionMode === 'multi') {
+			// For checkboxes: skip if clicking on input to avoid double-toggle
+			if (target.tagName === 'INPUT') return;
+			handleCheckboxChange({ isChecked: !localChecked, value: '' });
+		} else if (selectionMode === 'single' && rowId !== undefined) {
+			// For radios: always handle the click ourselves to enable deselection
+			// Native radio buttons don't allow unchecking, so we take control
+			if (target.tagName === 'INPUT') {
+				event.preventDefault();
+			}
+			handleRadioChange(String(rowId));
+		}
+	}
+</script>
+
+{#if selectionMode === 'multi'}
+	<td class="selection-cell" role="gridcell" onclick={handleCellClick}>
+		<CheckBox
+			bind:isChecked={localChecked}
+			onChange={handleCheckboxChange}
+			inline={true}
+			ariaLabel="Select row"
+		/>
+	</td>
+{:else if selectionMode === 'single'}
+	<td class="selection-cell" role="gridcell" onclick={handleCellClick}>
+		<RadioBox
+			value={String(rowId ?? '')}
+			bind:group={radioGroupLocal}
+			onChange={handleRadioChange}
+			ariaLabel="Select row"
+		/>
+	</td>
+{/if}
+
+<style>.selection-cell {
+  text-align: center;
+  padding: 0.5rem 0.25rem;
+  width: 48px;
+  min-width: 48px;
+  vertical-align: middle;
+  cursor: pointer;
+  display: table-cell;
+}
+
+:global(.selection-cell .checkbox-label),
+:global(.selection-cell label) {
+  margin: 0 auto;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}</style>

package/dist/tables/table-selection-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { JsonObject } from '../types/data.js';
+type $$ComponentProps = {
+    row?: JsonObject;
+    rowIndex?: number;
+};
+declare const TableSelectionCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableSelectionCell = ReturnType<typeof TableSelectionCell>;
+export default TableSelectionCell;

package/dist/tables/table-selection-header-cell.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { getTableContext } from './table-context.svelte.js';
+	import CheckBox from '../forms/check-box/check-box.svelte';
+
+	const context = getTableContext();
+
+	if (!context) {
+		throw new Error('TableSelectionHeaderCell must be used within a Table component');
+	}
+
+	let selectionMode = $derived(context?.config.selectionMode ?? 'none');
+	let rows = $derived(context?.config.rows ?? []);
+
+	// Compute whether all rows are selected - source of truth from context
+	let isAllSelectedInContext = $derived.by(() => {
+		if (!context || !rows.length) return false;
+		// Access selectedIds directly to ensure reactivity is tracked
+		const selectedIds = context.selectedIds;
+		const rowIdKey = context.config.rowIdKey!;
+		// Check if every row's ID is in the selected set
+		return rows.every((row) => {
+			const id = row[rowIdKey] as string | number;
+			return id !== undefined && selectedIds.has(id);
+		});
+	});
+
+	// Local state for checkbox binding - synced from context
+	let localChecked = $state(false);
+
+	// Sync local state FROM context whenever selection changes
+	// This ensures the header checkbox reflects the actual selection state
+	$effect(() => {
+		localChecked = isAllSelectedInContext;
+	});
+
+	// Handle "select all" checkbox change
+	function handleSelectAllChange(data: { isChecked: boolean; value: string }) {
+		if (!context) return;
+		const currentRows = rows;
+		if (!currentRows || currentRows.length === 0) return;
+
+		// data.isChecked is the NEW desired state from user interaction
+		if (data.isChecked) {
+			// User wants to select all
+			context.selectAll(currentRows);
+		} else {
+			// User wants to deselect all
+			context.deselectAll(currentRows);
+		}
+		// The effect will sync localChecked from context after this
+	}
+
+	// Handle header cell click - toggle select all when clicking anywhere in the cell
+	function handleCellClick(event: MouseEvent) {
+		// Don't double-toggle if the click was on the actual input element
+		const target = event.target as HTMLElement;
+		if (target.tagName === 'INPUT') return;
+
+		handleSelectAllChange({ isChecked: !localChecked, value: '' });
+	}
+</script>
+
+{#if selectionMode === 'multi'}
+	<th
+		class="selection-header"
+		style="width: 48px; min-width: 48px; text-align: center;"
+		onclick={handleCellClick}
+	>
+		<div class="header-content">
+			<CheckBox
+				bind:isChecked={localChecked}
+				onChange={handleSelectAllChange}
+				inline={true}
+				ariaLabel="Select all rows"
+			/>
+		</div>
+	</th>
+{:else if selectionMode === 'single'}
+	<th class="selection-header" style="width: 48px; min-width: 48px; text-align: center;"></th>
+{/if}
+
+<style>.selection-header {
+  padding: 0.5rem 0.25rem !important;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+:global(.header-content .checkbox-label) {
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}</style>

package/dist/tables/table-selection-header-cell.svelte.d.ts

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

package/dist/tables/table.svelte

@@ -6,42 +6,48 @@
 
 	let {
 		children,
+		rows = [],
 		enableSorting = true,
-		enableSelection = false,
-		selectionMode = 'multi',
+		selectionMode = 'none',
 		rowIdKey = 'id',
 		stickyHeader = false,
 		onSort = undefined,
 		onSelectionChange = undefined
 	}: {
 		children?: Snippet;
+		rows?: JsonObject[];
 		enableSorting?: boolean;
-		enableSelection?: boolean;
-		selectionMode?: 'single' | 'multi';
+		selectionMode?: 'none' | 'single' | 'multi';
 		rowIdKey?: string;
 		stickyHeader?: boolean;
 		onSort?: (column: string, direction: 'asc' | 'desc') => void;
-		onSelectionChange?: (selectedIds: Set<string | number>) => void;
+		onSelectionChange?: (selectedRows: JsonObject[]) => void;
 	} = $props();
 
 	// Create table context for child components
 	// Using untrack() to indicate we intentionally want non-reactive initial values
 	const config: TableContextConfig<JsonObject> = {
 		enableSorting: untrack(() => enableSorting),
-		enableSelection: untrack(() => enableSelection),
 		selectionMode: untrack(() => selectionMode),
 		rowIdKey: untrack(() => rowIdKey),
 		onSort: untrack(() => onSort),
-		onSelectionChange: untrack(() => onSelectionChange)
+		onSelectionChange: untrack(() => onSelectionChange),
+		rows: untrack(() => rows)
 	};
 
-	createTableContext(config);
+	const context = createTableContext(config);
+
+	// Keep context.config.rows updated reactively when rows prop changes
+	// This is essential for selection features to work correctly
+	$effect(() => {
+		context.config.rows = rows;
+	});
 </script>
 
 <table
 	class:sticky-header={stickyHeader}
 	role="grid"
-	aria-rowcount={enableSelection ? undefined : undefined}
+	aria-rowcount={undefined}
 	aria-colcount={undefined}
 >
 	{@render children?.()}

package/dist/tables/table.svelte.d.ts

@@ -1,13 +1,14 @@
 import type { Snippet } from 'svelte';
+import type { JsonObject } from '../types/data.js';
 type $$ComponentProps = {
     children?: Snippet;
+    rows?: JsonObject[];
     enableSorting?: boolean;
-    enableSelection?: boolean;
-    selectionMode?: 'single' | 'multi';
+    selectionMode?: 'none' | 'single' | 'multi';
     rowIdKey?: string;
     stickyHeader?: boolean;
     onSort?: (column: string, direction: 'asc' | 'desc') => void;
-    onSelectionChange?: (selectedIds: Set<string | number>) => void;
+    onSelectionChange?: (selectedRows: JsonObject[]) => void;
 };
 declare const Table: import("svelte").Component<$$ComponentProps, {}, "">;
 type Table = ReturnType<typeof Table>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "1.0.15",
+	"version": "1.0.16",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",