@svelte-atoms/core 1.0.0-alpha.28 → 1.0.0-alpha.29

package/README.md

@@ -14,11 +14,7 @@
 
 ### 🧱 **Bond Architecture**
 
-Built around the concept of "Bonds" - self-contained, reusable state management classes that encapsulate component state and DOM interactions. Each component uses the Bond pattern for consistent, predictable behavior across complex interactions. Simple components like Button don't require the Bond pattern as they have minimal state management needs.
-
-### 🔗 **Context-Driven Communication**
-
-Components seamlessly communicate through Svelte's context API using standardized static methods (`Bond.get()` / `Bond.set()`) of the Bond class, enabling powerful parent-child relationships without prop drilling.
+Self-contained state management classes that encapsulate component logic and DOM interactions. Bonds communicate through Svelte's context API using standardized `Bond.get()` / `Bond.set()` methods, enabling parent-child relationships without prop drilling.
 
 ### ♿ **Accessibility First**
 

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

@@ -1,43 +1,43 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
-	import { AlertBond } from './bond.svelte';
-	import type { AlertActionsProps } from './types';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		preset = 'alert.actions',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertActionsProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const actionsProps = $derived({
-		...bond?.actions(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	{preset}
-	class={['alert-actions border-border mt-3 flex 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)}
-	{...actionsProps}
->
-	{@render children?.({ alert: bond! })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertActionsProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		preset = 'alert.actions',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertActionsProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const actionsProps = $derived({
+		...bond?.actions(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	{preset}
+	class={['alert-actions border-border mt-3 flex 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)}
+	{...actionsProps}
+>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>

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

@@ -1,70 +1,70 @@
-<script
-	lang="ts"
-	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
->
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
-	import { AlertBond } from './bond.svelte';
-	import type { AlertCloseButtonProps } from './types';
-	import { Icon } from '../icon';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		preset = 'alert.close-button',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertCloseButtonProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const isDismissible = $derived(bond?.state.isDismissible ?? false);
-
-	const closeButtonProps = $derived({
-		...bond?.closeButton(),
-		...restProps
-	});
-</script>
-
-{#if isDismissible}
-	<HtmlAtom
-		{as}
-		{bond}
-		{preset}
-		class={[
-			'alert-close-button border-border flex size-6 items-center justify-center rounded p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
-			'$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)}
-		{...closeButtonProps}
-	>
-		{#if children}
-			{@render children({ alert: bond! })}
-		{:else}
-			<Icon class="h-full">
-				<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
-			</Icon>
-		{/if}
-	</HtmlAtom>
-{/if}
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertCloseButtonProps } from './types';
+	import { Icon } from '../icon';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		preset = 'alert.close-button',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertCloseButtonProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const isDismissible = $derived(bond?.state.isDismissible ?? false);
+
+	const closeButtonProps = $derived({
+		...bond?.closeButton(),
+		...restProps
+	});
+</script>
+
+{#if isDismissible}
+	<HtmlAtom
+		{as}
+		{bond}
+		{preset}
+		class={[
+			'alert-close-button border-border flex size-6 items-center justify-center rounded p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
+			'$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)}
+		{...closeButtonProps}
+	>
+		{#if children}
+			{@render children({ alert: bond! })}
+		{:else}
+			<Icon class="h-full">
+				<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</Icon>
+		{/if}
+	</HtmlAtom>
+{/if}

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

@@ -1,43 +1,43 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
-	import { AlertBond } from './bond.svelte';
-	import type { AlertContentProps } from './types';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		preset = 'alert.content',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertContentProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const contentProps = $derived({
-		...bond?.content(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	{preset}
-	class={['alert-content border-border flex-1 space-y-1', '$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)}
-	{...contentProps}
->
-	{@render children?.({ alert: bond! })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertContentProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		preset = 'alert.content',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertContentProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const contentProps = $derived({
+		...bond?.content(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	{preset}
+	class={['alert-content border-border flex-1 space-y-1', '$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)}
+	{...contentProps}
+>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>

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

@@ -1,42 +1,42 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { AlertBond } from './bond.svelte';
-	export type { AlertDescriptionProps } from './types';
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		as = 'p' as E,
-		preset = 'alert.description',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertDescriptionProps<E, B> = $props();
-
-	const descriptionProps = $derived({
-		...bond?.description(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	{preset}
-	class={['alert-description border-border mt-1 text-sm leading-relaxed', '$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)}
-	{as}
-	{...descriptionProps}
->
-	{@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';
+	export type { AlertDescriptionProps } from './types';
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		as = 'p' as E,
+		preset = 'alert.description',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertDescriptionProps<E, B> = $props();
+
+	const descriptionProps = $derived({
+		...bond?.description(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	{preset}
+	class={['alert-description border-border mt-1 text-sm leading-relaxed', '$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)}
+	{as}
+	{...descriptionProps}
+>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>

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

@@ -1,47 +1,47 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { Icon } from '../icon';
-	import { type Base, HtmlAtom } from '../atom';
-	import { AlertBond } from './bond.svelte';
-	import type { AlertIconProps } from './types';
-
-	const bond = AlertBond.get();
-
-	let {
-		class: klass = '',
-		base = Icon,
-		preset = 'alert.icon',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertIconProps<E, B> = $props();
-
-	const iconProps = $derived({
-		...bond?.icon(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	{base}
-	{preset}
-	class={[
-		'alert-icon border-border inline-flex aspect-square h-5 items-center justify-center rounded-full text-sm 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)}
-	{...iconProps}
->
-	{@render children?.({ alert: bond! })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Icon } from '../icon';
+	import { type Base, HtmlAtom } from '../atom';
+	import { AlertBond } from './bond.svelte';
+	import type { AlertIconProps } from './types';
+
+	const bond = AlertBond.get();
+
+	let {
+		class: klass = '',
+		base = Icon,
+		preset = 'alert.icon',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertIconProps<E, B> = $props();
+
+	const iconProps = $derived({
+		...bond?.icon(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	{base}
+	{preset}
+	class={[
+		'alert-icon border-border inline-flex aspect-square h-5 items-center justify-center rounded-full text-sm 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)}
+	{...iconProps}
+>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>