@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

package/dist/components/datagrid/{th/datagrid-th-sort-icon.svelte → column/datagrid-column-sort-icon.svelte}

@@ -1,11 +1,11 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
 	import { animate as motion } from 'motion';
 	import { Icon } from '../../icon';
-	import { DataGridThBond } from './bond.svelte';
+	import { DataGridColumnBond } from './bond.svelte.ts';
 	import IconArrowDown from '../../../icons/icon-arrow-down.svelte';
 	import { HtmlAtom, type Base } from '../../atom';
 
-	const bond = DataGridThBond.get();
+	const bond = DataGridColumnBond.get();
 
 	const isSortable = $derived(bond.state.isSortable);
 	const directionAsNumber = $derived(+(bond.state.props.direction === 'asc'));
@@ -33,7 +33,7 @@
 {#if !!isSortable}
 	<HtmlAtom
 		{bond}
-		preset="datagrid.sort-icon"
+			preset="datagrid.column-sort-icon"
 		class={['border-border', '$preset', klass]}
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}

package/dist/components/datagrid/{th/datagrid-th-sort-icon.svelte.d.ts → column/datagrid-column-sort-icon.svelte.d.ts}

@@ -28,6 +28,6 @@ interface $$IsomorphicComponent {
     <T extends keyof HTMLElementTagNameMap, B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, B>['props']> & {}): ReturnType<__sveltets_Render<T, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
-declare const DatagridThSortIcon: $$IsomorphicComponent;
-type DatagridThSortIcon<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = InstanceType<typeof DatagridThSortIcon<T, B>>;
-export default DatagridThSortIcon;
+declare const DatagridColumnSortIcon: $$IsomorphicComponent;
+type DatagridColumnSortIcon<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = InstanceType<typeof DatagridColumnSortIcon<T, B>>;
+export default DatagridColumnSortIcon;

package/dist/components/datagrid/{th/datagrid-th.svelte → column/datagrid-column.svelte}

@@ -1,43 +1,41 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
+<script lang="ts" generics="T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { nanoid } from 'nanoid';
+	import { untrack } from 'svelte';
 	import { defineProperty, defineState } from '../../../utils';
 	import { HtmlAtom, type Base } from '../../atom';
-	import { DataGridThBond, DataGridThBondState, type DataGridThBondProps } from './bond.svelte';
-	import type { DatagridContext } from '../context';
-	import type { DatagridThProps } from '../types';
+	import {
+		DataGridColumnBond,
+		DataGridColumnBondState,
+		type DataGridColumnBondProps
+	} from './bond.svelte';
+	import type { DatagridColumnProps } from '../types';
 
 	let {
 		class: klass = '',
 		id = nanoid(),
 		width = '1fr',
 		direction = 'asc',
-		screen = undefined,
 		hidden = false,
 		sortable = undefined,
 		factory = _factory,
 		children = undefined,
 		onclick = undefined,
 		onsort = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
-	}: DatagridThProps = $props();
+	}: DatagridColumnProps<T, E, B> = $props();
 
-	const bond = factory().share();
+	const bond = untrack(() => factory()).share();
 
 	const isSortable = $derived(bond.state.isSortable);
+	const columnProps = $derived({ ...bond.root().spread, ...bond.state.props, ...restProps });
 	// const directionAsNumber = $derived(+(direction === 'asc'));
 
 	const unmount = bond.mount();
 
 	$effect(() => unmount);
 
-	function _factory() {
-		const bondProps = defineState<DataGridThBondProps>([
+	function _factory(): DataGridColumnBond<T> {
+		const bondProps = defineState<DataGridColumnBondProps>([
 			defineProperty('id', () => id),
 			defineProperty('width', () => width),
 			defineProperty('sortable', () => sortable),
@@ -45,12 +43,15 @@
 			defineProperty('direction', () => direction)
 		]);
 
-		const bondState = new DataGridThBondState(() => bondProps);
-		return new DataGridThBond(bondState);
+		const bondState = new DataGridColumnBondState(() => bondProps);
+		return new DataGridColumnBond<T>(bondState);
 	}
 
 	function onclick_(ev: Event) {
-		onclick?.(ev as MouseEvent & { currentTarget: EventTarget & HTMLDivElement });
+		const onClick = onclick as
+			| ((event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) => void)
+			| undefined;
+		onClick?.(ev as MouseEvent & { currentTarget: EventTarget & HTMLDivElement });
 
 		if (!ev.defaultPrevented) {
 			if (!isSortable) {
@@ -69,38 +70,28 @@
 				}
 			}
 
-			onsort?.(new CustomEvent('sort'), {
-				field: typeof sortable === 'boolean' ? undefined : sortable,
-				direction
-			});
+			if (typeof sortable === 'string') {
+				onsort?.(new CustomEvent('sort'), { field: sortable, direction });
+			} else {
+				onsort?.(new CustomEvent('sort'), { direction });
+			}
 		}
 	}
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 {#if !hidden}
 	<HtmlAtom
-		{@attach (node) => {
-			bond.elements.root = node;
-		}}
 		{bond}
-		preset="datagrid.th"
+			preset="datagrid.column"
 		class={[
 			'border-border flex cursor-pointer py-1 font-medium select-none',
 			!!sortable && 'sortable',
 			'$preset',
 			klass
 		]}
-		enter={enter?.bind(bond.state)}
-		exit={exit?.bind(bond.state)}
-		initial={initial?.bind(bond.state)}
-		animate={animate?.bind(bond.state)}
-		onmount={onmount?.bind(bond.state)}
-		ondestroy={ondestroy?.bind(bond.state)}
 		onclick={onclick_}
-		{...bond.props()}
-		{...restProps}
+		{...columnProps}
 	>
-		{@render children?.({ th: bond as unknown as DatagridContext })}
+		{@render children?.({ column: bond })}
 	</HtmlAtom>
 {/if}

package/dist/components/datagrid/column/datagrid-column.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Base } from '../../atom';
+import type { DatagridColumnProps } from '../types';
+declare function $$render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: DatagridColumnProps<T, E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<T, E, B>>['props'];
+    events(): ReturnType<typeof $$render<T, E, B>>['events'];
+    slots(): ReturnType<typeof $$render<T, E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const DatagridColumn: $$IsomorphicComponent;
+type DatagridColumn<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DatagridColumn<T, E, B>>;
+export default DatagridColumn;

package/dist/components/datagrid/column/index.d.ts

@@ -0,0 +1,4 @@
+/** @deprecated Use `Column` instead */
+export { default as Th } from './datagrid-column.svelte';
+export * from './bond.svelte';
+export { default as Column } from './datagrid-column.svelte';

package/dist/components/datagrid/column/index.js

@@ -0,0 +1,4 @@
+/** @deprecated Use `Column` instead */
+export { default as Th } from './datagrid-column.svelte';
+export * from './bond.svelte';
+export { default as Column } from './datagrid-column.svelte';

package/dist/components/datagrid/context.d.ts

@@ -1,16 +1,3 @@
-import type { DataGridBond } from './bond.svelte';
-export declare const DATAGRID_CONTEXT_KEY = "@icare/context/datagrid";
-export type Payload<T> = {
-    data: T;
-    selected: boolean;
-};
-export type DatagridContext<T = unknown> = DataGridBond<T> | {
-    [key: string]: unknown;
-};
-export declare function getDataGridContext<T>(): DataGridBond<T>;
-export declare function setDataGridContext<T>(context: DataGridBond<T>): DataGridBond<T>;
-/********************************************************************************* */
-export declare const DATAGRID_HEADER_CONTEXT_KEY = "@icare/context/datagrid/header";
 export type DatagridHeaderContext = {
     readonly derived: {
         data: {
@@ -18,19 +5,5 @@ export type DatagridHeaderContext = {
         };
     };
 };
-export declare function getDatagridHeaderContext(): DatagridHeaderContext;
-export declare function setDatagridHeaderContext(context: DatagridHeaderContext): DatagridHeaderContext;
-/********************************************************************************* */
-export declare const DATAGRID_TR_CONTEXT_KEY = "@icare/context/datagrid/tr";
-export type DatagridTrContext<T> = {
-    value: string;
-    readonly derived: {
-        data: {
-            data?: T;
-            isHeader: boolean;
-            isSelected: boolean;
-        };
-    };
-};
-export declare function getDatagridTrContext<T>(): DatagridTrContext<T>;
-export declare function setDatagridTrContext<T>(context: DatagridTrContext<T>): DatagridTrContext<T>;
+export declare function getDatagridHeaderContext(): DatagridHeaderContext | undefined;
+export declare function setDatagridHeaderContext(context: DatagridHeaderContext): void;

package/dist/components/datagrid/context.js

@@ -1,24 +1,10 @@
 import { getContext, setContext } from 'svelte';
-export const DATAGRID_CONTEXT_KEY = '@icare/context/datagrid';
-export function getDataGridContext() {
-    return getContext(DATAGRID_CONTEXT_KEY);
-}
-export function setDataGridContext(context) {
-    return setContext(DATAGRID_CONTEXT_KEY, context);
-}
-/********************************************************************************* */
-export const DATAGRID_HEADER_CONTEXT_KEY = '@icare/context/datagrid/header';
+// ── Header context ─────────────────────────────────────────────────────────
+// Used by DataGridRowBondState to determine whether a row is a header row.
+const DATAGRID_HEADER_CONTEXT_KEY = '@atoms/context/datagrid/header';
 export function getDatagridHeaderContext() {
     return getContext(DATAGRID_HEADER_CONTEXT_KEY);
 }
 export function setDatagridHeaderContext(context) {
-    return setContext(DATAGRID_HEADER_CONTEXT_KEY, context);
-}
-/********************************************************************************* */
-export const DATAGRID_TR_CONTEXT_KEY = '@icare/context/datagrid/tr';
-export function getDatagridTrContext() {
-    return getContext(DATAGRID_TR_CONTEXT_KEY);
-}
-export function setDatagridTrContext(context) {
-    return setContext(DATAGRID_TR_CONTEXT_KEY, context);
+    setContext(DATAGRID_HEADER_CONTEXT_KEY, context);
 }

package/dist/components/datagrid/datagrid-body.svelte

@@ -1,37 +1,24 @@
-<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
-	import type { DatagridBodyProps } from './types';
+<script lang="ts" generics="T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { DataGridBond } from './bond.svelte';
 	import { HtmlAtom, type Base } from '../atom';
-	import type { HtmlElementTagName } from '../element';
-	export type { HtmlElementTagName } from '../element';
-	export type { DatagridBodyProps } from './types';
+	import type { DatagridBodyProps } from './types';
 
-	const bond = DataGridBond.get();
+	const bond = DataGridBond.get<T>();
 
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DatagridBodyProps<T, E, B> = $props();
+
+	const bodyProps = $derived({ ...bond?.body().spread, ...restProps });
 </script>
 
 <HtmlAtom
 	{bond}
 	preset="datagrid.body"
-	class={['border-border', '$preset', klass, 'contents']}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...restProps}
+	class={['border-border contents', '$preset', klass]}
+	{...bodyProps}
 >
 	{@render children?.({ datagrid: bond })}
 </HtmlAtom>

package/dist/components/datagrid/datagrid-body.svelte.d.ts

@@ -1,33 +1,26 @@
-import type { DatagridBodyProps } from './types';
 import { type Base } from '../atom';
-import type { HtmlElementTagName } from '../element';
-declare function $$render<T, E extends HtmlElementTagName, B extends Base = Base>(): {
+import type { DatagridBodyProps } from './types';
+declare function $$render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: DatagridBodyProps<T, E, B>;
-    exports: {
-        HtmlElementTagName: typeof HtmlElementTagName;
-        DatagridBodyProps: typeof DatagridBodyProps;
-    };
+    exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T, E extends HtmlElementTagName, B extends Base = Base> {
+declare class __sveltets_Render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
     props(): ReturnType<typeof $$render<T, E, B>>['props'];
     events(): ReturnType<typeof $$render<T, E, B>>['events'];
     slots(): ReturnType<typeof $$render<T, E, B>>['slots'];
     bindings(): "";
-    exports(): {
-        HtmlElementTagName: typeof HtmlElementTagName;
-        DatagridBodyProps: typeof DatagridBodyProps;
-    };
+    exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T, E extends HtmlElementTagName, B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
+    new <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T, E, B>['bindings']>;
     } & ReturnType<__sveltets_Render<T, E, B>['exports']>;
-    <T, E extends HtmlElementTagName, B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const DatagridBody: $$IsomorphicComponent;
-type DatagridBody<T, E extends HtmlElementTagName, B extends Base = Base> = InstanceType<typeof DatagridBody<T, E, B>>;
+type DatagridBody<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DatagridBody<T, E, B>>;
 export default DatagridBody;

package/dist/components/datagrid/datagrid-checkbox.svelte

@@ -1,101 +1,98 @@
 <script lang="ts">
 	import { Checkbox } from '../checkbox';
-	import type { DatagridCheckboxProps } from './types';
 	import { DataGridBond } from './bond.svelte';
-	import { DataGridTrBond } from './tr/bond.svelte';
-	export type { DatagridCheckboxProps } from './types';
+	import { DataGridRowBond } from './row/bond.svelte';
+	import type { DatagridCheckboxProps } from './types';
 
 	const datagridBond = DataGridBond.get();
-	const datagridTrBond = DataGridTrBond.get();
+	const datagridRowBond = DataGridRowBond.get();
 
 	let {
 		class: klass = '',
 		value = undefined,
 		checked = $bindable(false),
 		onclick = undefined,
+		oninput = undefined,
 		onchange = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DatagridCheckboxProps = $props();
 
-	const id = $derived(datagridTrBond.state.id);
+	const isHeader = $derived(datagridRowBond?.state.isHeader ?? false);
+	const rowId = $derived(datagridRowBond?.state.id);
 
-	const isAllRowsSelected = $derived(
-		datagridBond.state.selectedRows.length > 0 &&
-			datagridBond.state.rows.size === datagridBond.state.selectedRows.length
-	);
+	const selectedCount = $derived(datagridBond?.state.selectedRows.length ?? 0);
+	const rowCount = $derived(datagridBond?.state.rows.size ?? 0);
 
-	const isHeaderRow = $derived(datagridTrBond?.state.isHeader);
+	const isAllSelected = $derived(rowCount > 0 && selectedCount === rowCount);
+	const isHeaderIndeterminate = $derived(selectedCount > 0 && selectedCount < rowCount);
 
-	const classNames = $derived(['datagrid-td-checkbox', '$preset', klass]);
+	const isRowSelected = $derived(datagridRowBond?.state.isSelected ?? false);
 
-	function handleInputTd(ev: Event, { checked = false }) {
-		onchange?.(ev, { checked });
+	const classNames = $derived(['datagrid-cell-checkbox', '$preset', klass]);
 
-		if (!ev.defaultPrevented) {
-			//
-			if (checked) {
-				datagridBond.state.select([id]);
-			} else {
-				datagridBond.state.unselect([id]);
-			}
-		}
+	const activeCheckbox = $derived(isHeader ? headerCheckbox : rowCheckbox);
+
+	function handleCallbacks(ev: Event, checked: boolean) {
+		const onInput = oninput as ((event: Event, options: { checked: boolean }) => void) | undefined;
+		const onChange = onchange as ((event: Event, options: { checked: boolean }) => void) | undefined;
+		onInput?.(ev, { checked });
+		onChange?.(ev, { checked });
 	}
 
-	function handleInputTh(ev: Event, { checked = false }) {
-		onchange?.(ev, { checked });
+	function handleHeaderChange(ev?: Event) {
+		const checked = !isAllSelected;
+		const currentEvent = ev ?? new Event('input');
+		handleCallbacks(currentEvent, checked);
+		if (currentEvent.defaultPrevented) return;
+
+		const allIds = [...(datagridBond?.state.rows.keys() ?? [])];
 
-		if (!ev.defaultPrevented) {
-			const allRows = datagridBond.state.rows.keys().toArray();
+		if(checked === true){
+			datagridBond?.state.select(allIds);
+		} else {
+			datagridBond?.state.unselect(allIds);
+		}
+	}
+
+	function handleRowChange(ev?: Event) {
+		const checked = !isRowSelected;
+		const currentEvent = ev ?? new Event('input');
+		handleCallbacks(currentEvent, checked);
+		if (currentEvent.defaultPrevented || !rowId) return;
 
-			if (checked) {
-				datagridBond.state.select(allRows);
-			} else {
-				datagridBond.state.unselect(allRows);
-			}
+		if(checked){
+			datagridRowBond?.state.select();
+		} else {
+			datagridRowBond?.state.unselect();
 		}
 	}
 </script>
 
-{#if isHeaderRow}
-	<!-- content here -->
+{#snippet headerCheckbox()}
 	<Checkbox
-		{value}
-		{onclick}
-		bond={datagridTrBond}
+		{...(value !== undefined ? { value: value as string } : {})}
+		{...(onclick ? { onclick: onclick as (ev?: Event) => void } : {})}
+		bond={datagridRowBond}
 		preset="datagrid.checkbox"
 		class={classNames}
-		checked={isAllRowsSelected}
-		enter={enter?.bind(datagridTrBond)}
-		exit={exit?.bind(datagridTrBond)}
-		initial={initial?.bind(datagridTrBond)}
-		animate={animate?.bind(datagridTrBond)}
-		onmount={onmount?.bind(datagridTrBond)}
-		ondestroy={ondestroy?.bind(datagridTrBond)}
-		oninput={handleInputTh}
+		checked={isAllSelected}
+		indeterminate={isHeaderIndeterminate}
+		oninput={handleHeaderChange}
 		{...restProps}
 	/>
-{:else}
-	<!-- else content here -->
+{/snippet}
+
+{#snippet rowCheckbox()}
 	<Checkbox
-		{value}
-		{onclick}
-		bond={datagridTrBond}
+		{...(value !== undefined ? { value: value as string } : {})}
+		{...(onclick ? { onclick: onclick as (ev?: Event) => void } : {})}
+		bond={datagridRowBond}
 		preset="datagrid.checkbox"
 		class={classNames}
-		checked={datagridTrBond.state.isSelected}
-		enter={enter?.bind(datagridTrBond)}
-		exit={exit?.bind(datagridTrBond)}
-		initial={initial?.bind(datagridTrBond)}
-		animate={animate?.bind(datagridTrBond)}
-		onmount={onmount?.bind(datagridTrBond)}
-		ondestroy={ondestroy?.bind(datagridTrBond)}
-		oninput={handleInputTd}
+		checked={isRowSelected}
+		oninput={handleRowChange}
 		{...restProps}
 	/>
-{/if}
+{/snippet}
+
+{@render activeCheckbox()}

package/dist/components/datagrid/datagrid-checkbox.svelte.d.ts

@@ -1,6 +1,4 @@
 import type { DatagridCheckboxProps } from './types';
-declare const DatagridCheckbox: import("svelte").Component<DatagridCheckboxProps, {
-    DatagridCheckboxProps: typeof DatagridCheckboxProps;
-}, "checked">;
+declare const DatagridCheckbox: import("svelte").Component<DatagridCheckboxProps, {}, "checked">;
 type DatagridCheckbox = ReturnType<typeof DatagridCheckbox>;
 export default DatagridCheckbox;

package/dist/components/datagrid/datagrid-footer.svelte

@@ -1,34 +1,27 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { DataGridBond } from './bond.svelte';
-	import type { DatagridFooterProps } from './types';
-
-	const bond = DataGridBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridFooterProps<T> = $props();
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid.footer"
-	class={['border-border', '$preset', klass, 'contents']}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.({ datagrid: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { DataGridBond } from './bond.svelte';
+	import type { DatagridFooterProps } from './types';
+
+	const bond = DataGridBond.get<T>();
+	if (!bond) {
+		throw new Error('DataGrid.Footer must be used within DataGrid.Root.');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		...restProps
+	}: DatagridFooterProps<T, E, B> = $props();
+
+	const footerProps = $derived({ ...bond.footer().spread, ...restProps });
+</script>
+
+<HtmlAtom
+	{bond}
+		preset="datagrid.footer"
+	class={['border-border', '$preset', klass, 'contents']}
+	{...footerProps}
+>
+	{@render children?.({ datagrid: bond })}
+</HtmlAtom>

package/dist/components/datagrid/datagrid-footer.svelte.d.ts

@@ -1,26 +1,26 @@
 import { type Base } from '../atom';
 import type { DatagridFooterProps } from './types';
-declare function $$render<T extends keyof HTMLElementTagNameMap, B extends Base = Base>(): {
-    props: DatagridFooterProps<T>;
+declare function $$render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: DatagridFooterProps<T, E, B>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap, B extends Base = Base> {
-    props(): ReturnType<typeof $$render<T, B>>['props'];
-    events(): ReturnType<typeof $$render<T, B>>['events'];
-    slots(): ReturnType<typeof $$render<T, B>>['slots'];
+declare class __sveltets_Render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<T, E, B>>['props'];
+    events(): ReturnType<typeof $$render<T, E, B>>['events'];
+    slots(): ReturnType<typeof $$render<T, E, B>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends keyof HTMLElementTagNameMap, B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, B>['props']>, ReturnType<__sveltets_Render<T, B>['events']>, ReturnType<__sveltets_Render<T, B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, B>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, B>['exports']>;
-    <T extends keyof HTMLElementTagNameMap, B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, B>['props']> & {}): ReturnType<__sveltets_Render<T, B>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const DatagridFooter: $$IsomorphicComponent;
-type DatagridFooter<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = InstanceType<typeof DatagridFooter<T, B>>;
+type DatagridFooter<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DatagridFooter<T, E, B>>;
 export default DatagridFooter;