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

package/dist/components/card/card-title.svelte

@@ -9,12 +9,6 @@
 		class: klass = '',
 		as = 'h3' as E,
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: CardTitleProps<E, B> = $props();
 
@@ -33,12 +27,6 @@
 		'$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)}
 	{...titleProps}
 >
 	{@render children?.()}

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

@@ -9,12 +9,10 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = animateCollapsibleBody(),
-		enter = undefined,
-		exit = undefined,
-		initial = animateCollapsibleBody({ duration: 0 }),
+		fallback = {
+			animate: animateCollapsibleBody(),
+			initial: animateCollapsibleBody({ duration: 0 })
+		},
 		...restProps
 	}: CollapsibleBodyProps<E, B> = $props();
 
@@ -28,12 +26,7 @@
 	{bond}
 	preset="collapsible.body"
 	class={['border-border', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
+	{fallback}
 	{...bodyProps}
 >
 	{@render children?.({ collapsible: bond })}

package/dist/components/collapsible/collapsible-header.svelte

@@ -8,12 +8,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: CollapsibleHeaderProps<E, B> = $props();
 
@@ -27,12 +21,6 @@
 	{bond}
 	preset="collapsible.header"
 	class={['border-border flex cursor-pointer items-center gap-2', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
 	{...collapsibleProps}
 >
 	{@render children?.({ collapsible: bond })}

package/dist/components/collapsible/collapsible-indicator.svelte

@@ -12,12 +12,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: CollapsibleIndicatorProps<E, B> = $props();
 	const indicatorProps = $derived({
@@ -34,12 +28,6 @@
 	{bond}
 	preset="collapsible.indicator"
 	class={['border-border flex size-4 items-center justify-center', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
 	{...indicatorProps}
 >
 	{#if children}

package/dist/components/collapsible/collapsible-root.svelte

@@ -13,12 +13,6 @@
 		disabled = false,
 		factory = _factory,
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: CollapsibleRootProps<E, B> = $props();
 
@@ -55,12 +49,6 @@
 	{bond}
 	preset="collapsible"
 	class={['border-border flex w-full flex-col overflow-hidden', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
 	{...rootProps}
 >
 	{@render children?.({ collapsible: bond })}

package/dist/components/combobox/combobox-control.svelte

@@ -14,12 +14,6 @@
 		value = $bindable(),
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: ComboboxControlProps = $props();
 
@@ -56,11 +50,5 @@
 	}
 	preset="combobox.control"
 	class={['border-border flex-1 py-1', '$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)}
 	{...comboboxProps}
 />

package/dist/components/combobox/combobox-item.svelte

@@ -14,12 +14,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	} = $props();
 </script>
@@ -50,12 +44,6 @@
 	{bond}
 	preset="combobox.item"
 	class={['border-border', '$preset', klass].filter(Boolean).join(' ')}
-	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?.({ combobox: bond })}

package/dist/components/combobox/combobox-item.svelte.d.ts

@@ -1,12 +1,6 @@
 declare const ComboboxItem: import("svelte").Component<{
     class?: string;
     children?: any;
-    onmount?: any;
-    ondestroy?: any;
-    animate?: any;
-    enter?: any;
-    exit?: any;
-    initial?: any;
 } & Record<string, any>, {}, "">;
 type ComboboxItem = ReturnType<typeof ComboboxItem>;
 export default ComboboxItem;

package/dist/components/combobox/index.d.ts

@@ -1,3 +1,3 @@
 export * as Combobox from './atoms';
 export * from './types';
-export type { AnimatePopoverContentParams as AnimateComboboxContentParams, animatePopoverContent as animateComboboxContent } from '../popover/motion';
+export type { AnimatePopoverContentParams as AnimateComboboxContentParams, animatePopoverContent as animateComboboxContent } from '../popover/motion.svelte';

package/dist/components/container/container.svelte

@@ -8,12 +8,6 @@
 		name = undefined,
 		clientWidth = $bindable(0),
 		clientHeight = $bindable(0),
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		children = undefined,
 		...restProps
 	}: ContainerProps = $props();
@@ -44,12 +38,6 @@
 	preset="container"
 	class={['border-border', '$preset', klass]}
 	style={[containerTypeStype, containerNameStyle].filter(Boolean).join('; ')}
-	onmount={onmount?.bind(null)}
-	ondestroy={ondestroy?.bind(null)}
-	animate={animate?.bind(null)}
-	enter={enter?.bind(null)}
-	exit={exit?.bind(null)}
-	initial={initial?.bind(null)}
 	{...restProps}
 >
 	{@render children?.({ clientWidth, clientHeight })}

package/dist/components/datagrid/column/datagrid-column-sort-icon.svelte

@@ -12,12 +12,6 @@
 
 	let {
 		class: klass = '',
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	} = $props();
 
@@ -35,12 +29,9 @@
 		{bond}
 			preset="datagrid.column-sort-icon"
 		class={['border-border', '$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)}
+		fallback={{
+			animate: _animate,
+		}}
 		{...restProps}
 	>
 		<Icon>

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

@@ -2,12 +2,6 @@ import { type Base } from '../../atom';
 declare function $$render<T extends keyof HTMLElementTagNameMap, B extends Base = Base>(): {
     props: {
         class?: string;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: (node: HTMLElement) => void;
-        enter?: any;
-        exit?: any;
-        initial?: any;
     } & Record<string, any>;
     exports: {};
     bindings: "";

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

@@ -2,6 +2,7 @@
 	import { DataGridBond } from './bond.svelte';
 	import { HtmlAtom, type Base } from '../atom';
 	import type { DatagridBodyProps } from './types';
+	import { tick } from 'svelte';
 
 	const bond = DataGridBond.get<T>();
 
@@ -12,6 +13,21 @@
 	}: DatagridBodyProps<T, E, B> = $props();
 
 	const bodyProps = $derived({ ...bond?.body().spread, ...restProps });
+
+	// Defer rendering rows until the grid template has been computed from the
+	// registered columns. Without this gate, the body renders on the same tick
+	// the root sets `--template-columns`, before the columns mounted in the
+	// header have flushed to the derived `template`. The parent grid then
+	// briefly resolves to the `auto` fallback (one column) and rows with
+	// `grid-template-columns: subgrid` collapse into a single column, causing a
+	// layout shift once the real template is applied.
+	let isTemplateReady = $state(false);
+
+	tick().then(() => {
+		isTemplateReady = true;
+	});
+
+	const content = $derived(isTemplateReady ? children : undefined);
 </script>
 
 <HtmlAtom
@@ -20,5 +36,5 @@
 	class={['border-border contents', '$preset', klass]}
 	{...bodyProps}
 >
-	{@render children?.({ datagrid: bond })}
+	{@render content?.({ datagrid: bond })}
 </HtmlAtom>

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

@@ -6,12 +6,6 @@
 	let {
 		class: klass,
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DialogBodyProps<E, B> = $props();
 
@@ -27,12 +21,6 @@
 	{bond}
 	preset="dialog.body"
 	class={['border-border px-4 py-2', '$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)}
 	{...bodyProps}
 >
 	{@render children?.({ dialog: bond })}

package/dist/components/dialog/dialog-close-button.svelte

@@ -14,12 +14,6 @@
 		class: klass = '',
 		as = 'button' as E,
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		onclick = undefined,
 		...restProps
 	}: DialogCloseButtonProps<E, B> = $props();
@@ -39,12 +33,6 @@
 	{bond}
 	preset="dialog.close-button"
 	class={['border-border cursor-pointer', '$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_}
 	{...restProps}
 >

package/dist/components/dialog/dialog-close.svelte

@@ -14,12 +14,6 @@
 		class: klass = '',
 		as = 'button' as E,
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		onclick = undefined,
 		...restProps
 	}: DialogCloseButtonProps<E, B> = $props();
@@ -39,12 +33,6 @@
 	{bond}
 	preset="dialog.close-button"
 	class={['border-border cursor-pointer', '$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_}
 	{...restProps}
 >

package/dist/components/dialog/dialog-content.svelte

@@ -9,12 +9,9 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = animateDialogContent(),
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
+		fallback={
+			animate: animateDialogContent(),
+		},
 		...restProps
 	}: DialogContentProps<E, B> = $props();
 
@@ -32,12 +29,7 @@
 		klass
 	]}
 	{bond}
-	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)}
+	{fallback}
 	{...dialogProps}
 >
 	{@render children?.({ dialog: bond })}

package/dist/components/dialog/dialog-description.svelte

@@ -7,12 +7,6 @@
 		class: klass = '',
 		as = 'p' as E,
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DialogDescriptionProps<E, B> = $props();
 
@@ -28,12 +22,6 @@
 	{as}
 	preset="dialog.description"
 	class={['border-border', '$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)}
 	{...descriptionProps}
 >
 	{@render children?.({ dialog: bond })}

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

@@ -6,12 +6,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DialogFooterProps<E, B> = $props();
 
@@ -27,12 +21,6 @@
 	{bond}
 	preset="dialog.footer"
 	class={['border-border', 'flex px-4', '$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)}
 	{...footerProps}
 >
 	{@render children?.({ dialog: bond })}

package/dist/components/dialog/dialog-header.svelte

@@ -6,12 +6,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DialogHeaderProps<E, B> = $props();
 
@@ -27,12 +21,6 @@
 	{bond}
 	preset="dialog.header"
 	class={['border-border', 'flex w-full px-4 text-xl', '$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)}
 	{...headerProps}
 >
 	{@render children?.({ dialog: bond })}

package/dist/components/dialog/dialog-title.svelte

@@ -7,12 +7,6 @@
 		class: klass = '',
 		as = 'h3' as E,
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DialogTitleProps<E, B> = $props();
 
@@ -29,12 +23,6 @@
 	{bond}
 	preset="dialog.title"
 	class={['border-border', '$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)}
 	{...titleProps}
 >
 	{@render children?.({ dialog: bond })}

package/dist/components/dialog/index.d.ts

@@ -1,2 +1,5 @@
 export * as Dialog from './atoms';
+export * from './bond.svelte';
+export * from './motion.svelte';
+export * from './attachements.svelte';
 export * from './types';

package/dist/components/dialog/index.js

@@ -1,2 +1,5 @@
 export * as Dialog from './atoms';
+export * from './bond.svelte';
+export * from './motion.svelte';
+export * from './attachements.svelte';
 export * from './types';

package/dist/components/drawer/drawer-backdrop.svelte

@@ -10,12 +10,6 @@
 
 	let {
 		class: klass = '',
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: SlideoverBackdropProps<E, B> & HTMLAttributes<Element> = $props();
 
@@ -29,11 +23,5 @@
 	{bond}
 	preset="drawer.backdrop"
 	class={['border-border absolute inset-0 bg-black/30', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
 	{...backdropProps}
 />

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

@@ -9,12 +9,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DrawerBodyProps<E, B> & HTMLAttributes<Element> = $props();
 
@@ -30,12 +24,6 @@
 	{bond}
 	preset="drawer.body"
 	class={['border-border', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
 	{...bodyProps}
 >
 	{@render children?.({ drawer: bond })}

package/dist/components/drawer/drawer-content.svelte

@@ -13,12 +13,10 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = animateDrawerContent({ }),
-		enter = undefined,
-		exit = undefined,
-		initial = animateDrawerContent({ duration: 0 }),
+		fallback = {
+			animate: animateDrawerContent({ }),
+			initial: animateDrawerContent({ duration: 0 }),
+		},
 		...restProps
 	}: SlideoverContentProps<E, B> & HTMLAttributes<Element> & { side?: DrawerSide } = $props();
 
@@ -37,12 +35,7 @@
 		klass
 	]}
 	{bond}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
+	{fallback}
 	{...contentProps}
 >
 	{@render children?.({ drawer: bond })}

package/dist/components/drawer/drawer-description.svelte

@@ -12,12 +12,6 @@
 		class: klass = '',
 		as = 'p' as E,
 		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: SlideoverDescriptionProps<E, B> & HTMLAttributes<Element> = $props();
 
@@ -32,12 +26,6 @@
 	{bond}
 	preset="drawer.description"
 	class={['border-border', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
 	{...descriptionProps}
 >
 	{@render children?.({ drawer: bond })}

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

@@ -11,12 +11,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: SlideoverFooterProps<E, B> & HTMLAttributes<Element> = $props();
 
@@ -29,12 +23,6 @@
 <HtmlAtom
 	{bond}
 	class={['border-border', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
 	{...footerProps}
 >
 	{@render children?.({ drawer: bond })}