fix: improve preset handling & fix container module name

src/lib/components/accordion/accordion-root.svelte

@@ -19,19 +19,14 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { AccordionBond, AccordionState, type AccordionStateProps } from './bond.svelte';
-	import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
-
-	const preset = getPreset('accordion');
 
 	let {
 		value = $bindable(undefined),
 		values = $bindable([]),
 		data = $bindable([]),
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base,
 		multiple = false,
 		collapsible = false,
 		disabled = false,
@@ -75,13 +70,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'bg-card flex list-none flex-col',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	preset="accordion"
+	class={['bg-card flex list-none flex-col', '$preset', klass]}
+	{bond}
 	{...rootProps}
 >
 	{@render children?.({ accordion: bond })}

src/lib/components/accordion/item/accordion-item-body.svelte

@@ -10,21 +10,14 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { AccordionItemBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
+
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = AccordionItemBond.get();
 	const isOpen = $derived(bond?.state.isOpen ?? false);
 
-	const accordionItemBond = AccordionItemBond.get();
-
-	const preset = getPreset('accordion.item.body');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -43,19 +36,15 @@
 
 {#if isOpen}
 	<HtmlAtom
-		class={[
-			'box-content',
-			toClassValue.apply(bond, [preset?.class, { bond: accordionItemBond }]),
-			toClassValue.apply(bond, [klass, { bond: accordionItemBond }])
-		]}
+		preset="accordion.item.body"
+		class={['box-content', '$preset', klass]}
+		{bond}
 		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}
-		{base}
 		{...bodyProps}
 	>
 		{@render children?.({ accordionItem: bond })}

src/lib/components/accordion/item/accordion-item-header.svelte

@@ -10,16 +10,12 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { AccordionItemBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('accordion.item.header');
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'button',
-		base = preset?.base as B,
+		as = 'button',
 		children = undefined,
 		onpointerdown = undefined,
 		onmount = undefined,
@@ -41,24 +37,17 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <HtmlAtom
-	class={[
-		'relative box-border flex w-full cursor-pointer items-center',
-		toClassValue(preset?.class, {
-			bond: bond
-		}),
-		toClassValue(klass, {
-			bond: bond
-		})
-	]}
+	{as}
+	{bond}
+	preset="accordion.item.header"
+	class={['relative box-border flex w-full cursor-pointer items-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)}
 	tabindex={as !== 'button' ? 0 : undefined}
-	{as}
-	{base}
 	{...headerProps}
 >
 	{@render children?.({

src/lib/components/accordion/item/accordion-item-indicator.svelte

@@ -11,21 +11,15 @@
 	import type { Snippet } from 'svelte';
 	import { animate as motion } from 'motion';
 	import { AccordionItemBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { Icon } from '$svelte-atoms/core/components/icon';
 	import IconArrowDown from '$svelte-atoms/core/icons/icon-arrow-down.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = AccordionItemBond.get();
 	const isOpen = $derived(bond?.state?.isOpen ?? false);
 
-	const preset = getPreset('accordion.item.indicator');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -47,19 +41,14 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'pointer-events-none flex items-center justify-center',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	preset="accordion.item.indicator"
+	class={['pointer-events-none flex 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)}
-	{as}
-	{base}
 	{...indicatorProps}
 >
 	{#if children}

src/lib/components/accordion/item/accordion-item-root.svelte

@@ -19,17 +19,12 @@
 		AccordionItemBondState,
 		type AccordionItemBondProps
 	} from './bond.svelte';
-	import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 	import type { Factory } from '$svelte-atoms/core/types';
 
-	const preset = getPreset('accordion.item');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		value = nanoid(),
 		data = undefined,
 		disabled = false,
@@ -69,15 +64,15 @@
 </script>
 
 <HtmlAtom
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="accordion.item"
+	class={['$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}
-	{base}
 	{...rootProps}
 >
 	{@render children?.({ accordionItem: bond })}

src/lib/components/alert/alert-actions.svelte

@@ -11,19 +11,14 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { AlertBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
+
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	type Element = HTMLElementTagNameMap[E];
 
 	const bond = AlertBond.get();
 
-	const preset = getPreset('alert.actions');
-
 	let {
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		class: klass = '',
 		children = undefined,
 		onmount = undefined,
@@ -42,19 +37,15 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'alert-actions mt-3 flex items-center gap-2',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="alert.actions"
+	class={['alert-actions 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)}
-	{as}
-	{base}
 	{...actionsProps}
 >
 	{@render children?.({ alert: bond! })}

src/lib/components/alert/alert-close-button.svelte

@@ -11,20 +11,16 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { AlertBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
+
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	type Element = HTMLElementTagNameMap[E];
 
 	const bond = AlertBond.get();
 
-	const preset = getPreset('alert.close-button');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('button' as E),
-		base = preset?.base as B,
+		as = 'button' as E,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -45,6 +41,9 @@
 
 {#if isDismissible}
 	<HtmlAtom
+		{as}
+		{bond}
+		preset="alert.close-button"
 		class={[
 			'alert-close-button absolute top-2 right-2 rounded p-1 transition-colors hover:bg-black/10 dark:hover:bg-white/10',
 			'focus:ring-2 focus:ring-offset-1 focus:outline-none',
@@ -54,17 +53,15 @@
 				'focus:ring-yellow-500': bond?.state.variant === 'warning',
 				'focus:ring-red-500': bond?.state.variant === 'error'
 			},
-			toClassValue.apply(bond, [preset?.class]),
-			toClassValue.apply(bond, [klass])
+			'$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}
-		{base}
 		{...closeButtonProps}
 	>
 		{@render children?.({ alert: bond! })}

src/lib/components/alert/alert-content.svelte

@@ -11,19 +11,14 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { AlertBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
+
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	type Element = HTMLElementTagNameMap[E];
 
 	const bond = AlertBond.get();
 
-	const preset = getPreset('alert.content');
-
 	let {
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		class: klass = '',
 		children = undefined,
 		onmount = undefined,
@@ -42,19 +37,15 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'alert-content flex-1 space-y-1',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="alert.content"
+	class={['alert-content 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)}
-	{as}
-	{base}
 	{...contentProps}
 >
 	{@render children?.({ alert: bond! })}