@svelte-atoms/core 1.0.0-alpha.26 → 1.0.0-alpha.27

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

@@ -1,51 +1,41 @@
-<script module lang="ts">
-	export type AlertTitleProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ alert: AlertBond }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { AlertBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	const bond = AlertBond.get();
-
-	let {
-		as = 'h4' as E,
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertTitleProps<E, B> = $props();
-
-	const titleProps = $derived({
-		...bond?.title(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="alert.title"
-	class={['alert-title border-border text-sm leading-tight font-medium', '$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)}
-	{...titleProps}
->
-	{@render children?.({ alert: bond! })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertTitleProps } from './types';
+
+	const bond = AlertBond.get();
+
+	let {
+		as = 'h4' as E,
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertTitleProps<E, B> = $props();
+
+	const titleProps = $derived({
+		...bond?.title(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="alert.title"
+	class={['alert-title border-border text-sm leading-tight font-medium', '$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)}
+	{...titleProps}
+>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>

package/dist/components/alert/alert-title.svelte.d.ts

@@ -1,11 +1,5 @@
-export type AlertTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    children?: Snippet<[{
-        alert: AlertBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import { AlertBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { AlertTitleProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: AlertTitleProps<E, B>;
     exports: {};

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

@@ -1,2 +1,3 @@
 export * as Alert from './atoms';
 export type { AlertBondProps, AlertBondElements, AlertBond, AlertBondState } from './bond.svelte';
+export * from './types';

package/dist/components/alert/index.js

@@ -1 +1,2 @@
 export * as Alert from './atoms';
+export * from './types';

package/dist/components/alert/types.d.ts

@@ -0,0 +1,85 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory, Override } from '../../types';
+import type { AlertBond } from './bond.svelte';
+/**
+ * Extend this interface to add custom alert root properties in your application.
+ */
+export interface AlertRootExtendProps {
+}
+/**
+ * Extend this interface to add custom alert content properties in your application.
+ */
+export interface AlertContentExtendProps {
+}
+/**
+ * Extend this interface to add custom alert title properties in your application.
+ */
+export interface AlertTitleExtendProps {
+}
+/**
+ * Extend this interface to add custom alert description properties in your application.
+ */
+export interface AlertDescriptionExtendProps {
+}
+/**
+ * Extend this interface to add custom alert icon properties in your application.
+ */
+export interface AlertIconExtendProps {
+}
+/**
+ * Extend this interface to add custom alert actions properties in your application.
+ */
+export interface AlertActionsExtendProps {
+}
+/**
+ * Extend this interface to add custom alert close button properties in your application.
+ */
+export interface AlertCloseButtonExtendProps {
+}
+export interface AlertRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, AlertRootExtendProps {
+    dismissible?: boolean;
+    dismissed?: boolean;
+    disabled?: boolean;
+    extend?: Record<string, unknown>;
+    factory?: Factory<AlertBond>;
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}
+export interface AlertContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertContentExtendProps {
+}
+export interface AlertTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertTitleExtendProps {
+}
+export interface AlertDescriptionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertDescriptionExtendProps {
+}
+export interface AlertIconProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertIconExtendProps {
+}
+export interface AlertActionsProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertActionsExtendProps {
+}
+export interface AlertCloseButtonProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        alert: AlertBond;
+    }]>;
+}>, AlertCloseButtonExtendProps {
+}

package/dist/components/alert/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/atom/html-atom.svelte.d.ts

@@ -1,27 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Base } from './types';
-import { type ClassValue, type VariantDefinition } from '../../utils';
-import type { PresetModuleName } from '../../context/preset.svelte';
-import type { Bond } from '../../shared';
+import type { Base, HtmlAtomProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: ClassValue | ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: Bond;
-        base?: B | undefined;
-        preset?: PresetModuleName | (string & {});
-        variants?: VariantDefinition<any> | ((bond: Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    props: HtmlAtomProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/atom/types.d.ts

@@ -7,7 +7,12 @@ import type { VariantDefinition } from '../../utils';
 export type ComponentBase = Component;
 export type SnippetBase = Snippet;
 export type Base<Args = any> = Args extends Record<string, any> ? ComponentBase : Args extends unknown[] ? SnippetBase : never;
-export type HtmlAtomProps<E extends HtmlElementTagName = HtmlElementTagName, B extends Base<any> = Base> = HtmlElementProps<E> & {
+/**
+ * Extend this interface to add custom HTML atom properties in your application.
+ */
+export interface HtmlAtomExtendProps {
+}
+export interface HtmlAtomProps<E extends HtmlElementTagName = HtmlElementTagName, B extends Base<any> = Base> extends HtmlElementProps<E>, HtmlAtomExtendProps {
     bond?: Bond;
     base?: B;
     preset?: PresetModuleName | (string & {});
@@ -17,5 +22,5 @@ export type HtmlAtomProps<E extends HtmlElementTagName = HtmlElementTagName, B e
      * - Function: Dynamic function that receives bond and props, returns props (legacy)
      */
     variants?: VariantDefinition<any> | ((bond: Bond, variantProps: Record<string, any>) => Record<string, any>);
-};
+}
 export type { ElementType };

package/dist/components/avatar/types.d.ts

@@ -1,7 +1,12 @@
 import type { Component } from 'svelte';
-export type AvatarProps = {
+/**
+ * Extend this interface to add custom avatar properties in your application.
+ */
+export interface AvatarExtendProps {
+}
+export interface AvatarProps extends AvatarExtendProps {
     class?: string;
     src?: string | Component;
     alt?: string;
     readonly element?: HTMLElement;
-};
+}

package/dist/components/badge/types.d.ts

@@ -1,5 +1,10 @@
 import type { HtmlAtomProps } from '../atom';
 import type { Snippet } from 'svelte';
-export type BadgeProps = HtmlAtomProps<'span'> & {
+/**
+ * Extend this interface to add custom badge properties in your application.
+ */
+export interface BadgeExtendProps {
+}
+export interface BadgeProps extends HtmlAtomProps<'span'>, BadgeExtendProps {
     children?: Snippet<[]>;
-};
+}

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

@@ -1 +1,2 @@
 export { default as Button } from './button.svelte';
+export * from './types';

package/dist/components/button/index.js

@@ -1 +1,2 @@
 export { default as Button } from './button.svelte';
+export * from './types';

package/dist/components/button/types.d.ts

@@ -1,6 +1,11 @@
 import type { HtmlAtomProps } from '../atom/types';
 import type { Snippet } from 'svelte';
-export type ButtonProps = HtmlAtomProps<'button'> & {
+/**
+ * Extend this interface to add custom button properties in your application.
+ */
+export interface ButtonExtendProps {
+}
+export interface ButtonProps extends HtmlAtomProps<'button'>, ButtonExtendProps {
     type?: 'button' | 'submit' | 'reset';
     children?: Snippet<[]>;
-};
+}

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

@@ -1,45 +1,39 @@
-<script module lang="ts">
-	export type CardContentProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { CardBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	const bond = CardBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CardContentProps<E, B> = $props();
-
-	const contentProps = $derived({
-		...bond?.content(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="card.content"
-	class={['card-content border-border 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)}
-	{...contentProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	export type { CardContentProps } from './types';
+	import { CardBond } from './bond.svelte';
+
+	const bond = CardBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CardContentProps<E, B> = $props();
+
+	const contentProps = $derived({
+		...bond?.content(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="card.content"
+	class={['card-content border-border 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)}
+	{...contentProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -1,8 +1,9 @@
-export type CardContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CardContentProps<E, B>;
-    exports: {};
+    exports: {
+        CardContentProps: typeof CardContentProps;
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -12,7 +13,9 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        CardContentProps: typeof CardContentProps;
+    };
 }
 interface $$IsomorphicComponent {
     new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {

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

@@ -1,48 +1,41 @@
-<script module lang="ts">
-	export type CardDescriptionProps<
-		E extends keyof HTMLElementTagNameMap = 'p',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
-	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	const bond = CardBond.get();
-
-	let {
-		class: klass = '',
-		as = 'p' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CardDescriptionProps<E, B> = $props();
-
-	const descriptionProps = $derived({
-		...bond?.description(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="card.description"
-	class={['card-description border-border text-sm text-gray-500', '$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?.()}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import type { CardDescriptionProps } from './types';
+	import { CardBond } from './bond.svelte';
+
+	const bond = CardBond.get();
+
+	let {
+		class: klass = '',
+		as = 'p' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CardDescriptionProps<E, B> = $props();
+
+	const descriptionProps = $derived({
+		...bond?.description(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="card.description"
+	class={['card-description border-border text-sm text-gray-500', '$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?.()}
+</HtmlAtom>

package/dist/components/card/card-description.svelte.d.ts

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

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

@@ -1,48 +1,41 @@
-<script module lang="ts">
-	export type CardFooterProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	const bond = CardBond.get();
-
-	let {
-		class: klass = '',
-		as = 'div' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CardFooterProps<E, B> = $props();
-
-	const footerProps = $derived({
-		...bond?.footer(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="card.footer"
-	class={['card-footer border-border flex items-center gap-2 px-4 py-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?.()}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { CardBond } from './bond.svelte';
+	export type { CardFooterProps } from './types';
+
+	const bond = CardBond.get();
+
+	let {
+		class: klass = '',
+		as = 'div' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CardFooterProps<E, B> = $props();
+
+	const footerProps = $derived({
+		...bond?.footer(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="card.footer"
+	class={['card-footer border-border flex items-center gap-2 px-4 py-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?.()}
+</HtmlAtom>