From 1c7b5e84c15dd58c892a82ca1b9a762947c1bfec Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Thu, 23 Oct 2025 06:43:05 +0800
Subject: [PATCH 01/10] feat: handle presets and introduce `$preset`
 placeholder for better customization

---
 src/lib/components/atom/html-atom.svelte | 45 ++++++++++++++++++++----
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/atom/html-atom.svelte b/src/lib/components/atom/html-atom.svelte
index 48977ba..cbf94b1 100644
--- a/src/lib/components/atom/html-atom.svelte
+++ b/src/lib/components/atom/html-atom.svelte
@@ -1,9 +1,11 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import type { ComponentBase, HtmlAtomProps, SnippetBase } from './types';
+	import type { Base, ComponentBase, HtmlAtomProps, SnippetBase } from './types';
 	import { RootBond } from '../root';
 	import { HtmlElement } from '../element';
-	import { cn } from '$svelte-atoms/core/utils';
+	import { cn, toClassValue } from '$svelte-atoms/core/utils';
+	import { getPreset } from '$svelte-atoms/core/context';
+	import type { PresetModuleName } from '$svelte-atoms/core/context/preset.svelte';
 
 	type Element = HTMLElementTagNameMap[E];
 
@@ -13,13 +15,44 @@
 		class: klass = '',
 		as = 'div',
 		base = undefined,
+		preset: presetKey = undefined,
+		bond = undefined,
 		children = undefined,
 		...restProps
 	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
 
-	const isSnippet = $derived(typeof base === 'function' && base.length === 1 && !base.prototype);
+	const preset = $derived(presetKey ? getPreset(presetKey as PresetModuleName) : undefined);
 
-	const snippet = $derived(base as SnippetBase);
+	const _klass = $derived.by(() => {
+		const klasses = Array.isArray(klass) ? klass : [klass];
+
+		const hasPresetPlaceholder = klasses.some(
+			(cls) => typeof cls === 'string' && cls.includes('$preset')
+		);
+
+		if (hasPresetPlaceholder) {
+			return klasses.map((cls) => {
+				if (typeof cls === 'string' && cls.includes('$preset')) {
+					return cls.replace('$preset', cn(toClassValue.apply(bond, [preset?.class])));
+				}
+
+				return toClassValue.apply(bond, [cls]);
+			});
+		}
+
+		return [preset?.class ?? '', '$preset', klass].map((arg) => toClassValue.apply(bond, [arg]));
+	});
+
+	const _base = $derived(base ?? preset?.base);
+	const _as = $derived(as ?? preset?.as);
+	const _restProps = $derived.by(() => {
+		const { class: klass, base, as, ...restPresetProps } = preset ?? {};
+		return { ...restPresetProps, ...restProps };
+	});
+
+	const isSnippet = $derived(typeof _base === 'function' && _base.length === 1 && !_base.prototype);
+
+	const snippet = $derived(_base as SnippetBase);
 
 	const atom = rootBond?.state?.props?.renderers?.html ?? HtmlElement;
 
@@ -27,9 +60,9 @@
 </script>
 
 {#if isSnippet}
-	{@render snippet({ class: cn(klass), as, base, children, ...restProps })}
+	{@render snippet({ class: _klass, as: _as, base: _base, children, ..._restProps })}
 {:else}
-	<Component class={cn(klass)} {as} {...restProps}>
+	<Component class={_klass} as={_as} {..._restProps}>
 		{@render children?.()}
 	</Component>
 {/if}

From 5ba3f5cd415488e1f6e98f0b76d690f9ed61b01b Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Thu, 23 Oct 2025 06:43:41 +0800
Subject: [PATCH 02/10] refactor: migrate components to use the new approach

---
 .../accordion/accordion-root.svelte           | 17 ++------
 .../accordion/item/accordion-item-body.svelte | 19 ++-------
 .../item/accordion-item-header.svelte         | 23 +++-------
 .../item/accordion-item-indicator.svelte      | 15 +------
 .../accordion/item/accordion-item-root.svelte | 13 ++----
 src/lib/components/alert/alert-actions.svelte | 17 ++------
 .../alert/alert-close-button.svelte           | 17 ++++----
 src/lib/components/alert/alert-content.svelte | 17 ++------
 .../components/alert/alert-description.svelte | 19 +++------
 src/lib/components/alert/alert-icon.svelte    | 25 +++++------
 src/lib/components/alert/alert-root.svelte    | 13 ++----
 src/lib/components/alert/alert-title.svelte   | 19 +++------
 src/lib/components/atom/types.ts              |  4 ++
 src/lib/components/avatar/avatar.svelte       |  2 +
 src/lib/components/badge/badge.svelte         | 18 ++------
 .../breadcrumb/breadcrumb-item.svelte         | 23 +++-------
 .../breadcrumb/breadcrumb-root.svelte         | 22 ++--------
 .../breadcrumb/breadcrumb-separator.svelte    | 22 ++--------
 src/lib/components/button/button.svelte       | 12 ++----
 src/lib/components/card/card-body.svelte      | 16 ++-----
 .../components/card/card-description.svelte   | 17 +++-----
 src/lib/components/card/card-footer.svelte    | 17 +++-----
 src/lib/components/card/card-header.svelte    | 17 +++-----
 src/lib/components/card/card-media.svelte     | 17 +++-----
 src/lib/components/card/card-root.svelte      | 15 +++----
 src/lib/components/card/card-subtitle.svelte  | 17 +++-----
 src/lib/components/card/card-title.svelte     | 17 +++-----
 src/lib/components/checkbox/checkbox.svelte   | 42 ++++++++-----------
 .../collapsible/collapsible-body.svelte       | 12 ++----
 .../collapsible/collapsible-header.svelte     | 16 ++-----
 .../collapsible/collapsible-indicator.svelte  | 17 ++------
 .../collapsible/collapsible-root.svelte       | 15 ++-----
 .../components/combobox/combobox-input.svelte | 11 +----
 .../combobox/combobox-trigger.svelte          |  8 ++--
 .../components/combobox/compobox-item.svelte  |  9 ++--
 .../contaiener/container.stories.svelte       | 18 ++++----
 .../components/contaiener/container.svelte    | 15 +------
 .../components/datagrid/datagrid-body.svelte  | 10 ++---
 .../datagrid/datagrid-checkbox.svelte         | 19 +++------
 .../datagrid/datagrid-footer.svelte           | 12 ++----
 .../datagrid/datagrid-header.svelte           | 16 ++-----
 .../components/datagrid/datagrid-root.svelte  | 18 +++-----
 .../components/datagrid/td/datagrid-td.svelte | 16 ++-----
 .../datagrid/th/datagrid-th-sort-icon.svelte  | 12 ++----
 .../components/datagrid/th/datagrid-th.svelte | 14 +++----
 .../components/datagrid/tr/datagrid-tr.svelte | 15 +++----
 src/lib/components/dialog/dialog-body.svelte  | 16 ++-----
 .../dialog/dialog-close-button.svelte         | 16 ++-----
 .../components/dialog/dialog-content.svelte   | 14 ++-----
 .../dialog/dialog-description.svelte          |  5 +--
 .../components/dialog/dialog-footer.svelte    | 16 ++-----
 .../components/dialog/dialog-header.svelte    | 16 ++-----
 src/lib/components/dialog/dialog-root.svelte  | 15 +++----
 src/lib/components/dialog/dialog-title.svelte | 12 ++----
 src/lib/components/divider/divider.svelte     | 13 +++---
 .../components/drawer/drawer-backdrop.svelte  | 15 ++-----
 src/lib/components/drawer/drawer-body.svelte  | 12 ++----
 .../components/drawer/drawer-content.svelte   | 15 ++-----
 .../drawer/drawer-description.svelte          | 11 ++---
 .../components/drawer/drawer-footer.svelte    | 10 +----
 .../components/drawer/drawer-header.svelte    | 10 +----
 src/lib/components/drawer/drawer-root.svelte  |  6 +--
 src/lib/components/drawer/drawer-title.svelte | 13 +++---
 .../dropdown/dropdown-placeholder.svelte      |  9 ++--
 .../components/dropdown/dropdown-query.svelte | 11 ++---
 .../dropdown/dropdown-trigger.svelte          | 20 +++------
 .../components/dropdown/dropdown-value.svelte | 14 +++----
 .../dropdown/item/dropdown-item.svelte        | 16 +++----
 src/lib/components/element/types.ts           |  7 ++--
 .../form/field/field-control.svelte           | 14 ++-----
 .../components/form/field/field-label.svelte  | 18 +-------
 .../components/form/field/field-root.svelte   |  9 +---
 src/lib/components/form/form-root.svelte      | 11 +----
 src/lib/components/icon/icon.svelte           | 14 ++-----
 src/lib/components/image/image.svelte         |  4 +-
 src/lib/components/input/input-icon.svelte    |  3 +-
 .../components/input/input-placeholder.svelte | 11 ++---
 src/lib/components/input/input-root.svelte    | 14 +++----
 src/lib/components/input/input-value.svelte   | 21 ++++++----
 src/lib/components/label/label.svelte         | 14 ++++---
 src/lib/components/layer/layer-inner.svelte   | 15 +------
 src/lib/components/layer/layer-root.svelte    | 10 +----
 src/lib/components/link/link.svelte           | 17 ++------
 src/lib/components/list/list-divider.svelte   | 16 ++-----
 src/lib/components/list/list-group.svelte     | 18 ++------
 src/lib/components/list/list-item.svelte      | 16 ++-----
 src/lib/components/list/list-root.svelte      | 23 +---------
 src/lib/components/list/list-title.svelte     | 21 ++--------
 src/lib/components/menu/menu-item.svelte      | 17 +++-----
 src/lib/components/menu/menu-list.svelte      | 19 ++++-----
 .../components/popover/popover-arrow.svelte   | 22 ++++------
 .../components/popover/popover-content.svelte | 14 ++-----
 .../popover/popover-indicator.svelte          | 11 ++---
 .../components/popover/popover-trigger.svelte | 23 ++++------
 .../components/popover/popover.stories.svelte |  3 +-
 src/lib/components/portal/portal-inner.svelte | 15 ++-----
 src/lib/components/portal/portal-root.svelte  | 11 +----
 src/lib/components/radio/radio-group.svelte   | 16 +------
 src/lib/components/radio/radio.svelte         | 12 ++----
 src/lib/components/root/root.svelte           | 17 +++-----
 .../scrollable/scrollable-container.svelte    | 15 ++++---
 .../scrollable/scrollable-content.svelte      | 14 ++-----
 .../scrollable/scrollable-root.svelte         | 10 ++---
 .../scrollable/scrollable-thumb.svelte        | 13 ++----
 .../scrollable/scrollable-track.svelte        | 15 +++----
 .../components/sidebar/sidebar-content.svelte | 15 ++-----
 .../components/sidebar/sidebar-root.svelte    | 17 ++------
 src/lib/components/stack/stack-item.svelte    | 23 +---------
 src/lib/components/stack/stack-root.svelte    | 18 +-------
 src/lib/components/tabs/tab/tab-body.svelte   | 15 ++-----
 .../tabs/tab/tab-description.svelte           | 13 +++---
 src/lib/components/tabs/tab/tab-header.svelte | 13 +++---
 src/lib/components/tabs/tab/tab-root.svelte   | 20 +++------
 src/lib/components/tabs/tabs-body.svelte      | 19 +++------
 src/lib/components/tabs/tabs-header.svelte    | 17 ++------
 src/lib/components/tabs/tabs-root.svelte      | 17 ++------
 .../components/textarea/textarea-input.svelte |  4 +-
 .../components/textarea/textarea-root.svelte  |  2 +-
 .../components/toast/toast-description.svelte |  7 ++--
 src/lib/components/toast/toast-root.svelte    |  7 +---
 src/lib/components/toast/toast-title.svelte   |  9 ++--
 .../components/tooltip/tooltip-trigger.svelte |  2 +-
 src/lib/components/tree/tree-body.svelte      | 12 ++----
 src/lib/components/tree/tree-header.svelte    | 18 ++------
 src/lib/components/tree/tree-indicator.svelte | 16 ++-----
 src/lib/components/tree/tree-root.svelte      | 10 ++---
 src/lib/context/index.ts                      |  2 +-
 src/lib/context/preset.svelte.ts              | 10 ++---
 src/stories/Theme.svelte                      | 10 ++---
 129 files changed, 528 insertions(+), 1321 deletions(-)

diff --git a/src/lib/components/accordion/accordion-root.svelte b/src/lib/components/accordion/accordion-root.svelte
index 916b4c3..c94517b 100644
--- a/src/lib/components/accordion/accordion-root.svelte
+++ b/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 })}
diff --git a/src/lib/components/accordion/item/accordion-item-body.svelte b/src/lib/components/accordion/item/accordion-item-body.svelte
index 11b1b44..442508c 100644
--- a/src/lib/components/accordion/item/accordion-item-body.svelte
+++ b/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 })}
diff --git a/src/lib/components/accordion/item/accordion-item-header.svelte b/src/lib/components/accordion/item/accordion-item-header.svelte
index 526e6f3..647341d 100644
--- a/src/lib/components/accordion/item/accordion-item-header.svelte
+++ b/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,15 +37,10 @@
 
 <!-- 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)}
@@ -57,8 +48,6 @@
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
 	tabindex={as !== 'button' ? 0 : undefined}
-	{as}
-	{base}
 	{...headerProps}
 >
 	{@render children?.({
diff --git a/src/lib/components/accordion/item/accordion-item-indicator.svelte b/src/lib/components/accordion/item/accordion-item-indicator.svelte
index 1751255..2ecf93c 100644
--- a/src/lib/components/accordion/item/accordion-item-indicator.svelte
+++ b/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}
diff --git a/src/lib/components/accordion/item/accordion-item-root.svelte b/src/lib/components/accordion/item/accordion-item-root.svelte
index 6840038..d4cd6ce 100644
--- a/src/lib/components/accordion/item/accordion-item-root.svelte
+++ b/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 })}
diff --git a/src/lib/components/alert/alert-actions.svelte b/src/lib/components/alert/alert-actions.svelte
index 143c82c..91ce443 100644
--- a/src/lib/components/alert/alert-actions.svelte
+++ b/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! })}
diff --git a/src/lib/components/alert/alert-close-button.svelte b/src/lib/components/alert/alert-close-button.svelte
index 6ed0f3e..a96c81b 100644
--- a/src/lib/components/alert/alert-close-button.svelte
+++ b/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,8 +53,8 @@
 				'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)}
@@ -63,8 +62,6 @@
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}
 		initial={initial?.bind(bond.state)}
-		{as}
-		{base}
 		{...closeButtonProps}
 	>
 		{@render children?.({ alert: bond! })}
diff --git a/src/lib/components/alert/alert-content.svelte b/src/lib/components/alert/alert-content.svelte
index 98049e0..8efe059 100644
--- a/src/lib/components/alert/alert-content.svelte
+++ b/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! })}
diff --git a/src/lib/components/alert/alert-description.svelte b/src/lib/components/alert/alert-description.svelte
index c0b91c1..b389306 100644
--- a/src/lib/components/alert/alert-description.svelte
+++ b/src/lib/components/alert/alert-description.svelte
@@ -8,20 +8,16 @@
 </script>
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Component, Snippet } from 'svelte';
+	import type { Snippet } from 'svelte';
 	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';
 
 	const bond = AlertBond.get();
 
-	const preset = getPreset('alert.description');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('p' as E),
-		base = preset?.base as B,
+		as = 'p' as E,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -39,11 +35,9 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'alert-description mt-1 text-sm leading-relaxed',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="alert.description"
+	class={['alert-description mt-1 text-sm leading-relaxed', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
@@ -51,7 +45,6 @@
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
 	{as}
-	{base}
 	{...descriptionProps}
 >
 	{@render children?.({ alert: bond! })}
diff --git a/src/lib/components/alert/alert-icon.svelte b/src/lib/components/alert/alert-icon.svelte
index 6d9ee46..442dfc7 100644
--- a/src/lib/components/alert/alert-icon.svelte
+++ b/src/lib/components/alert/alert-icon.svelte
@@ -10,19 +10,15 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { AlertBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
+
 	import { Icon } from '$svelte-atoms/core/components/icon';
 	import { type HtmlAtomProps, type Base, HtmlAtom } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	const bond = AlertBond.get();
 
-	const preset = getPreset('alert.icon');
-
 	let {
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		class: klass = '',
+		base = Icon,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -39,11 +35,14 @@
 	});
 </script>
 
-<Icon
+<HtmlAtom
+	{bond}
+	{base}
+	preset="alert.icon"
 	class={[
 		'alert-icon inline-flex aspect-square h-5 items-center justify-center rounded-full text-sm font-medium',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
@@ -53,9 +52,5 @@
 	initial={initial?.bind(bond.state)}
 	{...iconProps}
 >
-	{#if base}
-		<HtmlAtom {base} />
-	{:else}
-		{@render children?.({ alert: bond! })}
-	{/if}
-</Icon>
+	{@render children?.({ alert: bond! })}
+</HtmlAtom>
diff --git a/src/lib/components/alert/alert-root.svelte b/src/lib/components/alert/alert-root.svelte
index be03e7c..88add26 100644
--- a/src/lib/components/alert/alert-root.svelte
+++ b/src/lib/components/alert/alert-root.svelte
@@ -19,15 +19,10 @@
 	import { AlertBond, AlertBondState, type AlertBondProps } from './bond.svelte';
 	import { toClassValue, cn, 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';
 	import './alert.css';
 
-	const preset = getPreset('alert');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		dismissible = false,
 		dismissed = $bindable(false),
 		disabled = false,
@@ -97,6 +92,7 @@
 </script>
 
 <HtmlAtom
+	preset="alert"
 	class={[
 		'alert relative flex gap-3 rounded-md border p-4 transition-all duration-200',
 		// Base styles
@@ -106,17 +102,16 @@
 			'pointer-events-none opacity-60': disabled,
 			'pointer-events-none opacity-0': dismissed
 		},
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$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}
 	{...rootProps}
 >
 	{@render children?.({ alert: bond })}
diff --git a/src/lib/components/alert/alert-title.svelte b/src/lib/components/alert/alert-title.svelte
index 4e052d5..c27d74f 100644
--- a/src/lib/components/alert/alert-title.svelte
+++ b/src/lib/components/alert/alert-title.svelte
@@ -10,17 +10,13 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	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';
 
 	const bond = AlertBond.get();
 
-	const preset = getPreset('alert.title');
-
 	let {
-		as = preset?.as ?? ('h4' as E),
-		base = preset?.base as B,
+		as = 'h4' as E,
 		class: klass = '',
 		children = undefined,
 		onmount = undefined,
@@ -39,19 +35,16 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'alert-title text-sm leading-tight font-medium',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{as}
+	{bond}
+	preset="alert.title"
+	class={['alert-title 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)}
-	{as}
-	{base}
 	{...titleProps}
 >
 	{@render children?.({ alert: bond! })}
diff --git a/src/lib/components/atom/types.ts b/src/lib/components/atom/types.ts
index 6bd9d7e..62f34bc 100644
--- a/src/lib/components/atom/types.ts
+++ b/src/lib/components/atom/types.ts
@@ -1,6 +1,8 @@
 import type { Component, Snippet } from 'svelte';
 import { type HtmlElementTagName } from '$svelte-atoms/core/components/element';
 import type { HtmlElementProps, ElementType } from '../element/types';
+import type { PresetModuleName } from '$svelte-atoms/core/context/preset.svelte';
+import type { Bond } from '$svelte-atoms/core/shared';
 
 export type ComponentBase = Component;
 export type SnippetBase = Snippet;
@@ -11,7 +13,9 @@ export type HtmlAtomProps<
 	E extends HtmlElementTagName = HtmlElementTagName,
 	B extends Base<any> = Base
 > = HtmlElementProps<E> & {
+	bond?: Bond;
 	base?: B;
+	preset?: PresetModuleName | (string & {});
 };
 
 export type { ElementType };
diff --git a/src/lib/components/avatar/avatar.svelte b/src/lib/components/avatar/avatar.svelte
index e45cbfd..cf0beb9 100644
--- a/src/lib/components/avatar/avatar.svelte
+++ b/src/lib/components/avatar/avatar.svelte
@@ -18,8 +18,10 @@
 </script>
 
 <HtmlAtom
+	preset="avatar"
 	class={[
 		'border-border bg-card hover:bg-card/95 active:bg-card/90 relative flex aspect-square h-10 items-center justify-center overflow-hidden rounded-full border text-sm font-semibold',
+		'$preset',
 		klass
 	]}
 	data-type="avatar"
diff --git a/src/lib/components/badge/badge.svelte b/src/lib/components/badge/badge.svelte
index 7e5c37a..6d331d0 100644
--- a/src/lib/components/badge/badge.svelte
+++ b/src/lib/components/badge/badge.svelte
@@ -1,28 +1,18 @@
 <script lang="ts">
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
 	import type { BadgeProps } from './types';
 
-	const preset = getPreset('badge');
-
-	let {
-		class: klass = '',
-		as = preset?.as ?? 'span',
-		base = preset?.base as B,
-		children = undefined,
-		...restProps
-	}: BadgeProps = $props();
+	let { class: klass = '', as = 'span', children = undefined, ...restProps }: BadgeProps = $props();
 </script>
 
 <HtmlAtom
+	preset="badge"
 	class={[
 		'bg-foreground/10 text-foreground inline-flex h-auto items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
-		toClassValue.apply(null, [preset?.class]),
-		toClassValue.apply(null, [klass])
+		'$preset',
+		klass
 	]}
 	{as}
-	{base}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/breadcrumb/breadcrumb-item.svelte b/src/lib/components/breadcrumb/breadcrumb-item.svelte
index 2cd1506..9720a56 100644
--- a/src/lib/components/breadcrumb/breadcrumb-item.svelte
+++ b/src/lib/components/breadcrumb/breadcrumb-item.svelte
@@ -1,30 +1,19 @@
 <script lang="ts" generics="B extends Base = Base">
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('breadcrumb.item');
-
-	let {
-		class: klass = '',
-		href = '',
-		as = preset?.as ?? 'a',
-		base = preset?.base as B,
-		children = undefined,
-		...restProps
-	} = $props();
+	let { class: klass = '', href = '', as = 'a', children = undefined, ...restProps } = $props();
 </script>
 
 <HtmlAtom
+	{as}
+	{href}
+	preset="breadcrumb.item"
 	class={[
 		'hover:text-primary hover:bg-primary/5 flex gap-2 rounded-lg px-2 py-1',
-		toClassValue.apply(null, [preset?.class]),
-		toClassValue.apply(null, [klass])
+		'$preset',
+		klass
 	]}
 	data-kind="breadcrumb-item"
-	{as}
-	{base}
-	{href}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/breadcrumb/breadcrumb-root.svelte b/src/lib/components/breadcrumb/breadcrumb-root.svelte
index a7112ea..fb32958 100644
--- a/src/lib/components/breadcrumb/breadcrumb-root.svelte
+++ b/src/lib/components/breadcrumb/breadcrumb-root.svelte
@@ -1,28 +1,14 @@
 <script lang="ts" generics="B extends Base = Base">
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 
-	const preset = getPreset('breadcrumb');
-
-	let {
-		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
-		children = undefined,
-		...restProps
-	} = $props();
+	let { class: klass = '', as = 'div', children = undefined, ...restProps } = $props();
 </script>
 
 <HtmlAtom
-	class={[
-		'flex flex-nowrap items-center gap-1',
-		toClassValue.apply(null, [preset?.class, {}]),
-		toClassValue.apply(null, [klass, {}])
-	]}
-	data-kind="breadcrumb-root"
 	{as}
-	{base}
+	preset="breadcrumb"
+	class={['flex flex-nowrap items-center gap-1', '$preset', klass]}
+	data-kind="breadcrumb-root"
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/breadcrumb/breadcrumb-separator.svelte b/src/lib/components/breadcrumb/breadcrumb-separator.svelte
index de1dd84..32a092f 100644
--- a/src/lib/components/breadcrumb/breadcrumb-separator.svelte
+++ b/src/lib/components/breadcrumb/breadcrumb-separator.svelte
@@ -1,28 +1,14 @@
 <script lang="ts" generics="B extends Base = Base">
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('breadcrumb.separator');
-
-	let {
-		class: klass = '',
-		as = preset?.as ?? 'span',
-		base = preset?.base as B,
-		children = undefined,
-		...restProps
-	} = $props();
+	let { class: klass = '', as = 'span', children = undefined, ...restProps } = $props();
 </script>
 
 <HtmlAtom
-	class={[
-		'text-stroke-0/50 px-0',
-		toClassValue.apply(null, [preset?.class, {}]),
-		toClassValue.apply(null, [klass, {}])
-	]}
-	data-kind="breadcrumb-separator"
 	{as}
-	{base}
+	preset="breadcrumb.separator"
+	class={['text-stroke-0/50 px-0', '$preset', klass]}
+	data-kind="breadcrumb-separator"
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/button/button.svelte b/src/lib/components/button/button.svelte
index c378ec1..9f561ca 100644
--- a/src/lib/components/button/button.svelte
+++ b/src/lib/components/button/button.svelte
@@ -2,15 +2,11 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { ButtonProps } from './types';
 	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-
-	const preset = getPreset('button');
 
 	let {
 		class: klass = '',
 		type = 'button',
-		base = preset?.base as B,
+		preset = 'button',
 		children = undefined,
 		...restProps
 	}: ButtonProps & HTMLAttributes<HTMLButtonElement> = $props();
@@ -22,13 +18,13 @@
 </script>
 
 <HtmlAtom
+	{preset}
 	as="button"
 	class={[
 		'button text-primary-foreground bg-primary hover:bg-primary/95 active:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
-		toClassValue.apply(null, [preset?.class]),
-		toClassValue.apply(null, [klass])
+		'$preset',
+		klass
 	]}
-	{base}
 	{...buttonProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/card/card-body.svelte b/src/lib/components/card/card-body.svelte
index b96e23b..39ce91c 100644
--- a/src/lib/components/card/card-body.svelte
+++ b/src/lib/components/card/card-body.svelte
@@ -6,19 +6,13 @@
 </script>
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { CardBond } from './bond.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = CardBond.get();
 
-	const preset = getPreset('card.content');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -36,13 +30,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'card-content px-4',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="card.content"
+	class={['card-content px-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-description.svelte b/src/lib/components/card/card-description.svelte
index 991054c..68609f2 100644
--- a/src/lib/components/card/card-description.svelte
+++ b/src/lib/components/card/card-description.svelte
@@ -7,18 +7,14 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
 	import { CardBond } 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 = CardBond.get();
 
-	const preset = getPreset('card.description');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'p',
-		base = preset?.base as B,
+		as = 'p' as E,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -37,12 +33,9 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[
-		'card-description text-sm text-gray-500',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="card.description"
+	class={['card-description text-sm text-gray-500', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-footer.svelte b/src/lib/components/card/card-footer.svelte
index 603111b..624ba59 100644
--- a/src/lib/components/card/card-footer.svelte
+++ b/src/lib/components/card/card-footer.svelte
@@ -7,18 +7,14 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { CardBond } 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 = CardBond.get();
 
-	const preset = getPreset('card.footer');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
+		as = 'div' as E,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -37,12 +33,9 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[
-		'card-footer flex items-center gap-2 px-4 py-4',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="card.footer"
+	class={['card-footer 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)}
diff --git a/src/lib/components/card/card-header.svelte b/src/lib/components/card/card-header.svelte
index 820bb3c..9c2d90b 100644
--- a/src/lib/components/card/card-header.svelte
+++ b/src/lib/components/card/card-header.svelte
@@ -7,18 +7,14 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { CardBond } 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 = CardBond.get();
 
-	const preset = getPreset('card.header');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
+		as = 'div' as E,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -37,12 +33,9 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[
-		'card-header flex flex-col space-y-1.5 px-4 py-4',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="card.header"
+	class={['card-header flex flex-col space-y-1.5 px-4 py-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-media.svelte b/src/lib/components/card/card-media.svelte
index 4514320..bd5e4b7 100644
--- a/src/lib/components/card/card-media.svelte
+++ b/src/lib/components/card/card-media.svelte
@@ -7,18 +7,14 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { CardBond } 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 = CardBond.get();
 
-	const preset = getPreset('card.media');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
+		as = 'div' as E,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -37,12 +33,9 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[
-		'card-media overflow-hidden',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="card.media"
+	class={['card-media overflow-hidden', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-root.svelte b/src/lib/components/card/card-root.svelte
index c600acc..5319b03 100644
--- a/src/lib/components/card/card-root.svelte
+++ b/src/lib/components/card/card-root.svelte
@@ -1,19 +1,14 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { CardBond, CardBondState, type CardBondProps } from './bond.svelte';
 	import type { CardRootProps } from './types';
-	import { defineState, toClassValue } from '$svelte-atoms/core/utils';
+	import { defineState } from '$svelte-atoms/core/utils';
 	import { defineProperty } from '$svelte-atoms/core/utils/state';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import './card.css';
 
-	const preset = getPreset('card');
-
 	let {
 		class: klass = '',
 		disabled = false,
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		factory = _factory,
 		children = undefined,
 		onclick = undefined,
@@ -74,14 +69,14 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
+	preset="card"
 	class={[
 		'card bg-card border-border flex flex-col gap-2 overflow-clip rounded-lg border shadow-sm',
 		disabledStyles,
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
+	{bond}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-subtitle.svelte b/src/lib/components/card/card-subtitle.svelte
index 3e966d9..827cff7 100644
--- a/src/lib/components/card/card-subtitle.svelte
+++ b/src/lib/components/card/card-subtitle.svelte
@@ -7,18 +7,14 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
 	import { CardBond } 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 = CardBond.get();
 
-	const preset = getPreset('card.subtitle');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'p',
-		base = preset?.base as B,
+		as = 'p' as E,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -37,12 +33,9 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[
-		'card-subtitle text-sm font-medium text-gray-600',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="card.subtitle"
+	class={['card-subtitle text-sm font-medium text-gray-600', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/card/card-title.svelte b/src/lib/components/card/card-title.svelte
index c373571..371a783 100644
--- a/src/lib/components/card/card-title.svelte
+++ b/src/lib/components/card/card-title.svelte
@@ -7,18 +7,14 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base">
 	import { CardBond } 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 = CardBond.get();
 
-	const preset = getPreset('card.title');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'h3',
-		base = preset?.base as B,
+		as = 'h3' as E,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -37,12 +33,9 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[
-		'card-title text-lg leading-none font-semibold tracking-tight',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="card.title"
+	class={['card-title text-lg leading-none font-semibold tracking-tight', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/checkbox/checkbox.svelte b/src/lib/components/checkbox/checkbox.svelte
index 7e7ef63..a3158e1 100644
--- a/src/lib/components/checkbox/checkbox.svelte
+++ b/src/lib/components/checkbox/checkbox.svelte
@@ -7,21 +7,14 @@
 	import { DURATION } from '$svelte-atoms/core/shared';
 	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
 	import CheckmarkRegularIcon from '$svelte-atoms/core/icons/icon-checkmark.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import './checkbox.css';
 
-	const preset = getPreset('checkbox');
-	const checkmarkPreset = getPreset('checkbox.checkmark');
-	const indeterminatePreset = getPreset('checkbox.indeterminate');
-
 	let {
 		class: klass = '',
 		checked = $bindable(false),
 		indeterminate = $bindable(),
 		value = $bindable(undefined),
 		group = $bindable([]),
-		base = preset?.base as B,
 		id,
 		checkedContent,
 		indeterminateContent,
@@ -77,19 +70,19 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <HtmlAtom
+	preset="checkbox"
 	as="button"
 	class={[
 		'checkbox-root border-border outline-primary bg-foreground/5 aspect-square h-5 w-fit cursor-pointer rounded-sm border outline-0 outline-offset-2 transition-colors duration-100',
 		checked && 'bg-foreground',
 		!checked && '',
-		toClassValue.apply(null, [preset?.class]),
-		toClassValue.apply(null, [klass]),
+		'$preset',
+		klass,
 		'relative'
 	]}
 	{enter}
 	{exit}
 	{initial}
-	{base}
 	onclick={handleClick}
 	{...restProps}
 >
@@ -114,41 +107,40 @@
 	{#if indeterminate}
 		{#if indeterminateContent}
 			<HtmlAtom
-				class={[
-					'checkbox-indeterminate flex size-full items-center justify-center p-1',
-					toClassValue.apply(null, [indeterminatePreset?.class])
-				]}
+				preset="checkbox.indeterminate"
+				class={['checkbox-indeterminate flex size-full items-center justify-center p-1']}
 				base={indeterminateContent}
 			/>
 		{:else}
-			<div
+			<HtmlAtom
+				preset="checkbox.indeterminate"
 				class={[
-					'checkbox-indeterminate text-foreground flex size-full items-center justify-center p-1',
-					toClassValue.apply(null, [indeterminatePreset?.class])
+					'checkbox-indeterminate text-foreground flex size-full items-center justify-center p-1'
 				]}
 			>
 				<div class={['size-full rounded-xs bg-current']}></div>
-			</div>
+			</HtmlAtom>
 		{/if}
 	{:else if checked === true}
 		{#if checkedContent}
 			<HtmlAtom
+				preset="checkbox.checkmark"
 				class={[
-					'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5',
-					toClassValue.apply(null, [checkmarkPreset?.class])
+					'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5'
 				]}
 				base={checkedContent}
 			/>
 		{:else}
-			<div
+			<HtmlAtom
+				preset="checkbox.checkmark"
 				class={[
-					'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5',
-					toClassValue.apply(null, [checkmarkPreset?.class])
+					'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5'
 				]}
-				transition:scale={{ duration: DURATION.fast, easing: circOut, start: 0.6 }}
+				enter={scale}
+				enterConfig={{ duration: DURATION.fast, easing: circOut, start: 0.6 }}
 			>
 				<Icon class="h-full p-0" src={CheckmarkRegularIcon} />
-			</div>
+			</HtmlAtom>
 		{/if}
 	{/if}
 </HtmlAtom>
diff --git a/src/lib/components/collapsible/collapsible-body.svelte b/src/lib/components/collapsible/collapsible-body.svelte
index a889618..6f5c4f3 100644
--- a/src/lib/components/collapsible/collapsible-body.svelte
+++ b/src/lib/components/collapsible/collapsible-body.svelte
@@ -13,19 +13,13 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { CollapsibleBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import type { Override } from '$svelte-atoms/core/types';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	const bond = CollapsibleBond.get();
 
-	const preset = getPreset('collapsible.body');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -43,15 +37,15 @@
 </script>
 
 <HtmlAtom
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="collapsible.body"
+	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}
 	{...bodyProps}
 >
 	{@render children?.({ collapsible: bond })}
diff --git a/src/lib/components/collapsible/collapsible-header.svelte b/src/lib/components/collapsible/collapsible-header.svelte
index 13dd323..9bef5d2 100644
--- a/src/lib/components/collapsible/collapsible-header.svelte
+++ b/src/lib/components/collapsible/collapsible-header.svelte
@@ -13,19 +13,13 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { CollapsibleBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import type { Override } from '$svelte-atoms/core/types';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	const bond = CollapsibleBond.get();
 
-	const preset = getPreset('collapsible.header');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -43,19 +37,15 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'flex cursor-pointer items-center gap-2',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="collapsible.header"
+	class={['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)}
-	{as}
-	{base}
 	{...collapsibleProps}
 >
 	{@render children?.({ collapsible: bond })}
diff --git a/src/lib/components/collapsible/collapsible-indicator.svelte b/src/lib/components/collapsible/collapsible-indicator.svelte
index 5e34e80..ed2308b 100644
--- a/src/lib/components/collapsible/collapsible-indicator.svelte
+++ b/src/lib/components/collapsible/collapsible-indicator.svelte
@@ -15,21 +15,16 @@
 	import { animate as motion } from 'motion';
 	import { CollapsibleBond } from './bond.svelte';
 	import { Icon } from '$svelte-atoms/core/components/icon';
-	import { toClassValue } from '$svelte-atoms/core/utils';
+
 	import type { Override } from '$svelte-atoms/core/types';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 	import IconArrowDown from '$svelte-atoms/core/icons/icon-arrow-down.svelte';
 
 	const bond = CollapsibleBond.get();
 	const isOpen = $derived(bond?.state.props.open ?? false);
 
-	const preset = getPreset('collapsible.indicator');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -51,19 +46,15 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'flex size-4 items-center justify-center',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="collapsible.indicator"
+	class={['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)}
-	{as}
-	{base}
 	{...indicatorProps}
 >
 	{#if children}
diff --git a/src/lib/components/collapsible/collapsible-root.svelte b/src/lib/components/collapsible/collapsible-root.svelte
index b90a126..f9137e2 100644
--- a/src/lib/components/collapsible/collapsible-root.svelte
+++ b/src/lib/components/collapsible/collapsible-root.svelte
@@ -20,13 +20,10 @@
 	import type { Snippet } from 'svelte';
 	import { nanoid } from 'nanoid';
 	import type { Factory, Override } from '$svelte-atoms/core/types';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import { CollapsibleBond, CollapsibleState, type CollapsibleStateProps } from './bond.svelte';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('collapsible');
-
 	let {
 		open = $bindable(false),
 		class: klass = '',
@@ -34,7 +31,6 @@
 		data = undefined,
 		disabled = false,
 		as = 'div' as E,
-		base = preset?.base as B,
 		factory = _factory,
 		children = undefined,
 		onmount = undefined,
@@ -75,11 +71,9 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'flex w-full flex-col overflow-hidden',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	preset="collapsible"
+	class={['flex w-full flex-col overflow-hidden', '$preset', klass]}
+	{bond}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
@@ -87,7 +81,6 @@
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
 	{as}
-	{base}
 	{...rootProps}
 >
 	{@render children?.({ collapsible: bond })}
diff --git a/src/lib/components/combobox/combobox-input.svelte b/src/lib/components/combobox/combobox-input.svelte
index 9b68ea3..79313be 100644
--- a/src/lib/components/combobox/combobox-input.svelte
+++ b/src/lib/components/combobox/combobox-input.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { Input } from '$svelte-atoms/core/components/input';
 	import { ComboboxBond } from './bond.svelte';
 
@@ -11,8 +9,6 @@
 		throw new Error('Combobox atom was not found');
 	}
 
-	const preset = getPreset('combobox.input');
-
 	let {
 		class: klass = '',
 		children = undefined,
@@ -43,11 +39,8 @@
 
 <Input.Value
 	{value}
-	class={[
-		'flex-1 py-1',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	preset="combobox.input"
+	class={['flex-1 py-1', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/combobox/combobox-trigger.svelte b/src/lib/components/combobox/combobox-trigger.svelte
index 10f871f..cfba975 100644
--- a/src/lib/components/combobox/combobox-trigger.svelte
+++ b/src/lib/components/combobox/combobox-trigger.svelte
@@ -1,9 +1,7 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { ComboboxBond } from './bond.svelte';
 	import { Trigger } from '$svelte-atoms/core/components/dropdown/atoms';
-	import { Root as InputRoot } from '$svelte-atoms/core/components/input/atoms';
 	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue, cn } from '$svelte-atoms/core/utils';
 	import type { Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = ComboboxBond.get();
@@ -17,7 +15,6 @@
 	let {
 		class: klass = '',
 		as = preset?.as ?? 'button',
-		base = preset?.base ?? InputRoot,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -31,8 +28,9 @@
 
 <Trigger
 	{as}
-	{base}
-	class={['h-8 w-40', toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="dropdown.trigger"
+	class={['h-8 w-40', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/combobox/compobox-item.svelte b/src/lib/components/combobox/compobox-item.svelte
index 73b033c..c081b71 100644
--- a/src/lib/components/combobox/compobox-item.svelte
+++ b/src/lib/components/combobox/compobox-item.svelte
@@ -5,9 +5,8 @@
 	import { ComboboxBond } from './bond.svelte';
 	import { Item } from '$svelte-atoms/core/components/dropdown/atoms';
 	import { DropdownItemBond } from '$svelte-atoms/core/components/dropdown/item/bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
+
 	import { on } from '$svelte-atoms/core/attachments';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import type { Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = ComboboxBond.get() as ComboboxBond<{}>;
@@ -16,8 +15,6 @@
 		throw new Error('Combobox atom was not found');
 	}
 
-	const preset = getPreset('combobox.item');
-
 	let {
 		class: klass = '',
 		as = preset?.as ?? 'div',
@@ -60,7 +57,9 @@
 	}}
 	{as}
 	{base}
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="combobox.item"
+	class={['$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/contaiener/container.stories.svelte b/src/lib/components/contaiener/container.stories.svelte
index d3058d5..fca2f19 100644
--- a/src/lib/components/contaiener/container.stories.svelte
+++ b/src/lib/components/contaiener/container.stories.svelte
@@ -10,16 +10,14 @@
 
 <Story name="Container">
 	<Root class="p-4">
-		{#snippet children({ args })}
-			<ContainerCmp class="flex-col items-center gap-4">
-				<div class="flex w-full gap-4">
-					{#each { length: 5 } as _, i (i)}
-						<div class="bg-foreground h-80 flex-1 rounded-lg"></div>
-					{/each}
-				</div>
+		<ContainerCmp class="flex flex-col items-center gap-4 w-full">
+			<div class="flex w-full gap-4">
+				{#each { length: 5 } as _, i (i)}
+					<div class="bg-foreground h-80 flex-1 rounded-lg"></div>
+				{/each}
+			</div>
 
-				<div class="bg-foreground h-80 w-[50cqw] rounded-lg"></div>
-			</ContainerCmp>
-		{/snippet}
+			<div class="bg-foreground h-80 w-[50cqw] rounded-lg"></div>
+		</ContainerCmp>
 	</Root>
 </Story>
diff --git a/src/lib/components/contaiener/container.svelte b/src/lib/components/contaiener/container.svelte
index 2513fe3..aaf438b 100644
--- a/src/lib/components/contaiener/container.svelte
+++ b/src/lib/components/contaiener/container.svelte
@@ -1,17 +1,11 @@
 <script lang="ts">
 	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import type { ContainerProps } from './types';
 
-	const preset = getPreset('container');
-
 	let {
 		class: klass = '',
 		type = 'inline-size',
 		name = undefined,
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		clientWidth = $bindable(0),
 		clientHeight = $bindable(0),
 		onmount = undefined,
@@ -47,13 +41,8 @@
 			}
 		};
 	}}
-	{as}
-	{base}
-	class={[
-		'flex w-full',
-		toClassValue.apply(null, [preset?.class]),
-		toClassValue.apply(null, [klass])
-	]}
+	preset="container"
+	class={['$preset', klass]}
 	style={[containerTypeStype, containerNameStyle].filter(Boolean).join('; ')}
 	onmount={onmount?.bind(null)}
 	ondestroy={ondestroy?.bind(null)}
diff --git a/src/lib/components/datagrid/datagrid-body.svelte b/src/lib/components/datagrid/datagrid-body.svelte
index 064daaa..a7cf7ea 100644
--- a/src/lib/components/datagrid/datagrid-body.svelte
+++ b/src/lib/components/datagrid/datagrid-body.svelte
@@ -16,12 +16,8 @@
 
 	const bond = DataGridBond.get();
 
-	const preset = getPreset('datagrid.body');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -34,9 +30,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[klass, 'contents']}
+	{bond}
+	preset="datagrid.body"
+	class={['$preset', klass, 'contents']}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/datagrid/datagrid-checkbox.svelte b/src/lib/components/datagrid/datagrid-checkbox.svelte
index 85f9eea..062e4de 100644
--- a/src/lib/components/datagrid/datagrid-checkbox.svelte
+++ b/src/lib/components/datagrid/datagrid-checkbox.svelte
@@ -10,20 +10,15 @@
 	import { DataGridBond } from './bond.svelte';
 	import { DataGridTrBond } from './tr/bond.svelte';
 	import { Checkbox } from '$svelte-atoms/core/components/checkbox';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import type { Base, HtmlAtomProps } from '$svelte-atoms/core/components/atom';
-	import { toClassValue } from '$svelte-atoms/core/utils';
+	import type { HtmlAtomProps } from '$svelte-atoms/core/components/atom';
 
 	const datagridBond = DataGridBond.get();
 	const datagridTrBond = DataGridTrBond.get();
 
-	const preset = getPreset('datagrid.checkbox');
-
 	let {
 		class: klass = '',
 		value = undefined,
 		checked = $bindable(false),
-		base = preset?.base as Base,
 		onclick = undefined,
 		onchange = undefined,
 		onmount = undefined,
@@ -44,11 +39,7 @@
 
 	const isHeaderRow = $derived(datagridTrBond?.state.isHeader);
 
-	const classNames = $derived([
-		'datagrid-td-checkbox',
-		toClassValue.apply(datagridTrBond, [preset?.class, { bond: datagridTrBond }]),
-		toClassValue.apply(datagridTrBond, [klass, { bond: datagridTrBond }])
-	]);
+	const classNames = $derived(['datagrid-td-checkbox', '$preset', klass]);
 
 	function handleInputTd(ev: Event, { checked = false }) {
 		onchange?.(ev, { checked });
@@ -82,8 +73,9 @@
 	<!-- content here -->
 	<Checkbox
 		{value}
-		{base}
 		{onclick}
+		bond={datagridTrBond}
+		preset="datagrid.checkbox"
 		class={classNames}
 		checked={isAllRowsSelected}
 		enter={enter?.bind(datagridTrBond)}
@@ -99,8 +91,9 @@
 	<!-- else content here -->
 	<Checkbox
 		{value}
-		{base}
 		{onclick}
+		bond={datagridTrBond}
+		preset="datagrid.checkbox"
 		class={classNames}
 		checked={datagridTrBond.state.isSelected}
 		enter={enter?.bind(datagridTrBond)}
diff --git a/src/lib/components/datagrid/datagrid-footer.svelte b/src/lib/components/datagrid/datagrid-footer.svelte
index 34f3f23..3d003dc 100644
--- a/src/lib/components/datagrid/datagrid-footer.svelte
+++ b/src/lib/components/datagrid/datagrid-footer.svelte
@@ -1,18 +1,12 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
 	import { DataGridBond } from './bond.svelte';
 	import type { DatagridFooterProps } from './types';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = DataGridBond.get();
 
-	const preset = getPreset('datagrid.footer');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -25,9 +19,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass]), 'contents']}
+	{bond}
+	preset="datagrid.footer"
+	class={['$preset', klass, 'contents']}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/datagrid/datagrid-header.svelte b/src/lib/components/datagrid/datagrid-header.svelte
index c76f156..831d6cf 100644
--- a/src/lib/components/datagrid/datagrid-header.svelte
+++ b/src/lib/components/datagrid/datagrid-header.svelte
@@ -2,18 +2,12 @@
 	import { setDatagridHeaderContext } from './context';
 	import type { DatagridHeaderProps } from './types';
 	import { DataGridBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = DataGridBond.get();
 
-	const preset = getPreset('datagrid.header');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -40,13 +34,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'col-span-full grid grid-cols-subgrid',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="datagrid.header"
+	class={['col-span-full grid grid-cols-subgrid', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/datagrid/datagrid-root.svelte b/src/lib/components/datagrid/datagrid-root.svelte
index dad1eb6..419c79b 100644
--- a/src/lib/components/datagrid/datagrid-root.svelte
+++ b/src/lib/components/datagrid/datagrid-root.svelte
@@ -1,20 +1,16 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
 	import { DataGridBond, DataGridBondState, type DataGridStateProps } from './bond.svelte';
 	import type { DatagridRootProps } from './types';
-	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 Base } from '$svelte-atoms/core/components/atom';
-	import './datagrid.css';
 
-	const preset = getPreset('datagrid');
+	import './datagrid.css';
 
 	let {
 		class: klass = '',
 		values = $bindable([]),
 		template = undefined,
 		data = [],
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		factory = _factory,
 		children = undefined,
 		onmount = undefined,
@@ -47,13 +43,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'datagrid-root w-full gap-x-0 gap-y-0',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="datagrid"
+	class={['datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
 	style="--template-columns:{bond.state.template}"
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
diff --git a/src/lib/components/datagrid/td/datagrid-td.svelte b/src/lib/components/datagrid/td/datagrid-td.svelte
index 892cbf8..049d414 100644
--- a/src/lib/components/datagrid/td/datagrid-td.svelte
+++ b/src/lib/components/datagrid/td/datagrid-td.svelte
@@ -16,19 +16,13 @@
 	import type { Snippet } from 'svelte';
 	import type { DataGridTdBond } from './bond.svelte';
 	import { DataGridBond } from '../bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 	import type { HtmlElementTagName } from '$svelte-atoms/core/components/element';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	const bond = DataGridBond.get();
 
-	const preset = getPreset('datagrid.th');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -69,13 +63,9 @@
 		{@attach (node) => {
 			element = node;
 		}}
-		{as}
-		{base}
-		class={[
-			'flex h-full items-center py-2 text-left',
-			toClassValue.apply(bond, [preset?.class]),
-			toClassValue.apply(bond, [klass])
-		]}
+		{bond}
+		preset="datagrid.td"
+		class={['flex h-full items-center py-2 text-left', '$preset', klass]}
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}
 		initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/datagrid/th/datagrid-th-sort-icon.svelte b/src/lib/components/datagrid/th/datagrid-th-sort-icon.svelte
index c3c924d..75285b7 100644
--- a/src/lib/components/datagrid/th/datagrid-th-sort-icon.svelte
+++ b/src/lib/components/datagrid/th/datagrid-th-sort-icon.svelte
@@ -3,21 +3,15 @@
 	import { Icon } from '$svelte-atoms/core/components/icon';
 	import { DataGridThBond } from './bond.svelte';
 	import IconArrowDown from '$svelte-atoms/core/icons/icon-arrow-down.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
-	import { toClassValue } from '$lib/utils';
 
 	const bond = DataGridThBond.get();
 
-	const preset = getPreset('datagrid.sort-icon');
-
 	const isSortable = $derived(bond.state.isSortable);
 	const directionAsNumber = $derived(+(bond.state.props.direction === 'asc'));
 
 	let {
 		class: klass = '',
-		as = preset?.as,
-		base = preset?.base as B,
 		onmount = undefined,
 		ondestroy = undefined,
 		animate = _animate,
@@ -38,9 +32,9 @@
 
 {#if !!isSortable}
 	<HtmlAtom
-		{as}
-		{base}
-		class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+		{bond}
+		preset="datagrid.sort-icon"
+		class={['$preset', klass]}
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}
 		initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/datagrid/th/datagrid-th.svelte b/src/lib/components/datagrid/th/datagrid-th.svelte
index b197ee9..326a358 100644
--- a/src/lib/components/datagrid/th/datagrid-th.svelte
+++ b/src/lib/components/datagrid/th/datagrid-th.svelte
@@ -24,12 +24,9 @@
 	import { DataGridThBond, DataGridThBondState, type DataGridThBondProps } from './bond.svelte';
 	import type { Direction, SortableType } from '$svelte-atoms/core/types';
 	import type { DatagridContext } from '../context';
-	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 Base, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('datagrid.th');
-
 	let {
 		class: klass = '',
 		id = nanoid(),
@@ -37,8 +34,6 @@
 		direction = 'asc',
 		screen = undefined,
 		hidden = false,
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		sortable = undefined,
 		factory = _factory,
 		children = undefined,
@@ -106,15 +101,16 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 {#if !hidden}
 	<HtmlAtom
-		{as}
 		{@attach (node) => {
 			bond.elements.root = node;
 		}}
+		{bond}
+		preset="datagrid.th"
 		class={[
 			'flex cursor-pointer py-1 font-medium select-none',
 			!!sortable && 'sortable',
-			toClassValue.apply(bond, [preset?.class]),
-			toClassValue.apply(bond, [klass])
+			'$preset',
+			klass
 		]}
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}
diff --git a/src/lib/components/datagrid/tr/datagrid-tr.svelte b/src/lib/components/datagrid/tr/datagrid-tr.svelte
index 6c766b1..7a53ace 100644
--- a/src/lib/components/datagrid/tr/datagrid-tr.svelte
+++ b/src/lib/components/datagrid/tr/datagrid-tr.svelte
@@ -17,23 +17,18 @@
 <script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
 	import { untrack, type Snippet } from 'svelte';
 	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import { DataGridTrBond, DataGridTrBondState, type DataGridTrBondProps } from './bond.svelte';
 	import { getDatagridHeaderContext, type DatagridContext } from '../context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 	import type { HtmlElementTagName } from '$svelte-atoms/core/components/element';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import type { Factory } from '$svelte-atoms/core/types';
 	import './datagrid-tr.css';
 
 	const context_header = getDatagridHeaderContext();
 
-	const preset = getPreset('datagrid.tr');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		value = nanoid(),
 		rows = 'auto',
 		data = undefined,
@@ -83,16 +78,16 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
+	{bond}
+	preset="datagrid.tr"
 	class={[
 		'datagrid-tr border-border items-center border-b bg-transparent',
 		!isHeader &&
 			'hover:bg-foreground/5 active:bg-foreground/10 transition-colors duration-100 last:border-b-0',
 		isHeader && 'header-tr',
 		isSelected && 'bg-foreground/3',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
 	style="--rows:{rows}"
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/dialog/dialog-body.svelte b/src/lib/components/dialog/dialog-body.svelte
index 6fe9bba..06c9aab 100644
--- a/src/lib/components/dialog/dialog-body.svelte
+++ b/src/lib/components/dialog/dialog-body.svelte
@@ -7,16 +7,10 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { DialogBond } 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('dialog.body');
-
 	let {
 		class: klass,
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -36,13 +30,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'px-4 py-2',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="dialog.body"
+	class={['px-4 py-2', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/dialog/dialog-close-button.svelte b/src/lib/components/dialog/dialog-close-button.svelte
index 206ed2e..4daef51 100644
--- a/src/lib/components/dialog/dialog-close-button.svelte
+++ b/src/lib/components/dialog/dialog-close-button.svelte
@@ -9,18 +9,13 @@
 	import { DialogBond } from './bond.svelte';
 	import { Icon } from '$svelte-atoms/core/components/icon';
 	import Close from '$svelte-atoms/core/icons/icon-close.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 = DialogBond.get();
 
-	const preset = getPreset('dialog.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,
@@ -44,12 +39,9 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[
-		'cursor-pointer',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="dialog.close-button"
+	class={['cursor-pointer', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/dialog/dialog-content.svelte b/src/lib/components/dialog/dialog-content.svelte
index 8852930..ddae726 100644
--- a/src/lib/components/dialog/dialog-content.svelte
+++ b/src/lib/components/dialog/dialog-content.svelte
@@ -8,18 +8,12 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { animate as motion } from 'motion';
 	import { DialogBond } 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 = DialogBond.get();
 
-	const preset = getPreset('dialog.content');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -58,13 +52,13 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
+	preset="dialog.content"
 	class={[
 		'bg-card text-foreground border-border flex h-fit w-full max-w-[90svw] flex-col rounded-md border py-4 shadow-sm md:min-w-sm lg:max-w-xl lg:min-w-md',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
+	{bond}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/dialog/dialog-description.svelte b/src/lib/components/dialog/dialog-description.svelte
index 78ec52a..4ca97cf 100644
--- a/src/lib/components/dialog/dialog-description.svelte
+++ b/src/lib/components/dialog/dialog-description.svelte
@@ -2,14 +2,13 @@
 	export type DialogDescriptionProps<
 		T extends keyof HTMLElementTagNameMap,
 		B extends Base = Base
-	> = HtmlAtomProps<T, C>;
+	> = HtmlAtomProps<T, B>;
 </script>
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
 	import { DialogBond } from './bond.svelte';
 	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 
 	const preset = getPreset('dialog.description');
 
@@ -38,7 +37,7 @@
 <HtmlAtom
 	{as}
 	{base}
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	class={['$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/dialog/dialog-footer.svelte b/src/lib/components/dialog/dialog-footer.svelte
index 562de5e..7258c65 100644
--- a/src/lib/components/dialog/dialog-footer.svelte
+++ b/src/lib/components/dialog/dialog-footer.svelte
@@ -7,16 +7,10 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { DialogBond } from './bond.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('dialog.footer');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -36,13 +30,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'flex px-4',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="dialog.footer"
+	class={['flex px-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/dialog/dialog-header.svelte b/src/lib/components/dialog/dialog-header.svelte
index 15259a4..1bf7432 100644
--- a/src/lib/components/dialog/dialog-header.svelte
+++ b/src/lib/components/dialog/dialog-header.svelte
@@ -7,16 +7,10 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { DialogBond } 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('dialog.header');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -36,13 +30,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'flex w-full px-4 text-xl',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="dialog.header"
+	class={['flex w-full px-4 text-xl', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/dialog/dialog-root.svelte b/src/lib/components/dialog/dialog-root.svelte
index cbbdc14..12a719d 100644
--- a/src/lib/components/dialog/dialog-root.svelte
+++ b/src/lib/components/dialog/dialog-root.svelte
@@ -15,18 +15,14 @@
 	import { animate as motion } from 'motion';
 	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
 	import { Teleport, ActivePortal } from '$svelte-atoms/core/components/portal';
-	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 type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('dialog');
-
 	let {
 		class: klass = '',
 		open = $bindable(false),
 		disabled = false,
-		as = preset?.as ?? ('dialog' as E),
-		base = preset?.base as B,
+		as = 'dialog' as E,
 		factory = _factory,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -94,13 +90,14 @@
 
 <Teleport
 	{as}
-	{base}
+	{bond}
+	preset="dialog"
 	portal="root.l1"
 	class={[
 		'pointer-events-auto fixed top-0 left-0 flex h-full w-full items-center justify-center bg-neutral-900/10 opacity-0',
 		!open && 'pointer-events-none',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
diff --git a/src/lib/components/dialog/dialog-title.svelte b/src/lib/components/dialog/dialog-title.svelte
index 112ff81..cbc2a10 100644
--- a/src/lib/components/dialog/dialog-title.svelte
+++ b/src/lib/components/dialog/dialog-title.svelte
@@ -7,16 +7,11 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { DialogBond } from './bond.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('dialog.title');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('h3' as E),
-		base = preset?.base as B,
+		as = 'h3' as E,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -37,8 +32,9 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="dialog.title"
+	class={['$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/divider/divider.svelte b/src/lib/components/divider/divider.svelte
index 965fdab..ed8246c 100644
--- a/src/lib/components/divider/divider.svelte
+++ b/src/lib/components/divider/divider.svelte
@@ -1,13 +1,9 @@
 <script>
 	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-
-	const preset = getPreset('divider');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
+		as = 'div',
 		vertical = false,
 		transparent = false,
 		...restProps
@@ -16,15 +12,16 @@
 
 <HtmlAtom
 	{as}
+	preset="divider"
 	class={[
 		'atoms-ui divider border-border',
 		transparent && 'bg-transparent',
 		!vertical && 'my-6 w-full border-b',
 		vertical && 'mx-6 h-full border-r',
-		toClassValue.apply(null, [preset?.class]),
-		toClassValue.apply(null, [klass]),
+		klass,
 		!vertical && 'mx-0',
-		vertical && 'my-0'
+		vertical && 'my-0',
+		'$preset'
 	]}
 	{...restProps}
 ></HtmlAtom>
diff --git a/src/lib/components/drawer/drawer-backdrop.svelte b/src/lib/components/drawer/drawer-backdrop.svelte
index 504b8ab..19e7895 100644
--- a/src/lib/components/drawer/drawer-backdrop.svelte
+++ b/src/lib/components/drawer/drawer-backdrop.svelte
@@ -10,20 +10,15 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
-	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';
 	import { DrawerBond } from './bond.svelte';
 
 	type Element = HTMLElementTagNameMap[E];
 
 	const bond = DrawerBond.get();
-	const preset = getPreset('drawer.backdrop');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		onmount = undefined,
 		ondestroy = undefined,
 		animate = undefined,
@@ -39,13 +34,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'absolute inset-0 z-0 bg-black/30',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="drawer.backdrop"
+	class={['absolute inset-0 z-0 bg-black/30', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-body.svelte b/src/lib/components/drawer/drawer-body.svelte
index 779541d..97c533f 100644
--- a/src/lib/components/drawer/drawer-body.svelte
+++ b/src/lib/components/drawer/drawer-body.svelte
@@ -14,20 +14,14 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import type { Override } from '$svelte-atoms/core/types';
 	import { DrawerBond } from './bond.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	type Element = HTMLElementTagNameMap[E];
 
-	const preset = getPreset('drawer.body');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -47,9 +41,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="drawer.body"
+	class={['$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-content.svelte b/src/lib/components/drawer/drawer-content.svelte
index 40c6125..03641e6 100644
--- a/src/lib/components/drawer/drawer-content.svelte
+++ b/src/lib/components/drawer/drawer-content.svelte
@@ -14,20 +14,15 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { DrawerBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import type { Override } from '$svelte-atoms/core/types';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	type Element = HTMLElementTagNameMap[E];
 
 	const bond = DrawerBond.get();
-	const preset = getPreset('drawer.content');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -45,13 +40,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'bg-card text-foreground border-border absolute',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	preset="drawer.content"
+	class={['bg-card text-foreground border-border absolute', '$preset', klass]}
+	{bond}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-description.svelte b/src/lib/components/drawer/drawer-description.svelte
index a8e8817..7d70ec2 100644
--- a/src/lib/components/drawer/drawer-description.svelte
+++ b/src/lib/components/drawer/drawer-description.svelte
@@ -15,19 +15,15 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { DrawerBond } from './bond.svelte';
 	import type { Override } from '$svelte-atoms/core/types';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	type Element = HTMLElementTagNameMap[E];
 
 	const bond = DrawerBond.get();
-	const preset = getPreset('drawer.description');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('p' as E),
-		base = preset?.base as B,
+		as = 'p' as E,
 		children,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -46,8 +42,9 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="drawer.description"
+	class={['$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-footer.svelte b/src/lib/components/drawer/drawer-footer.svelte
index 36ca9a8..a7485b1 100644
--- a/src/lib/components/drawer/drawer-footer.svelte
+++ b/src/lib/components/drawer/drawer-footer.svelte
@@ -13,21 +13,16 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap='div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import type { Override } from '$svelte-atoms/core/types';
 	import { DrawerBond } from './bond.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	type Element = HTMLElementTagNameMap[E];
 
 	const bond = DrawerBond.get();
-	const preset = getPreset('drawer.footer');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -45,9 +40,8 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	class={['$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-header.svelte b/src/lib/components/drawer/drawer-header.svelte
index 81e3661..a904a0f 100644
--- a/src/lib/components/drawer/drawer-header.svelte
+++ b/src/lib/components/drawer/drawer-header.svelte
@@ -14,20 +14,15 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { DrawerBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import type { Override } from '$svelte-atoms/core/types';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	type Element = HTMLElementTagNameMap[E];
 
 	const bond = DrawerBond.get();
-	const preset = getPreset('drawer.header');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -45,9 +40,8 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	class={['$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-root.svelte b/src/lib/components/drawer/drawer-root.svelte
index ffccdfd..6e4e739 100644
--- a/src/lib/components/drawer/drawer-root.svelte
+++ b/src/lib/components/drawer/drawer-root.svelte
@@ -40,7 +40,6 @@
 		children = undefined,
 		class: klass = '',
 		as = preset?.as ?? 'dialog',
-		base = preset?.base as B,
 		disabled = false,
 		onclose = undefined,
 		onmount = undefined,
@@ -95,13 +94,12 @@
 
 <Teleport
 	{as}
-	{base}
 	portal="root.l1"
 	class={[
 		'pointer-events-auto h-full w-full overflow-hidden bg-transparent',
 		!open && 'pointer-events-none',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
 	closeby="none"
 	onmount={onmount?.bind(bond.state)}
diff --git a/src/lib/components/drawer/drawer-title.svelte b/src/lib/components/drawer/drawer-title.svelte
index 555e843..7719a51 100644
--- a/src/lib/components/drawer/drawer-title.svelte
+++ b/src/lib/components/drawer/drawer-title.svelte
@@ -11,23 +11,19 @@
 </script>
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base">
-	import type { Component, Snippet } from 'svelte';
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { DrawerBond } from './bond.svelte';
 	import type { Override } from '$svelte-atoms/core/types';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 
 	type Element = HTMLElementTagNameMap[E];
 
 	const bond = DrawerBond.get();
-	const preset = getPreset('drawer.title');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('h3' as E),
-		base = preset?.base as B,
+		as = 'h3' as E,
 		children,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -46,8 +42,9 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="drawer.title"
+	class={['$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/dropdown/dropdown-placeholder.svelte b/src/lib/components/dropdown/dropdown-placeholder.svelte
index c05d1e5..bac92bc 100644
--- a/src/lib/components/dropdown/dropdown-placeholder.svelte
+++ b/src/lib/components/dropdown/dropdown-placeholder.svelte
@@ -1,11 +1,8 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { DropdownBond } from './bond.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 
 	const bond = DropdownBond.get();
-	const preset = getPreset('dropdown.placeholder');
 
 	let {
 		class: klass = '',
@@ -29,10 +26,12 @@
 
 {#if !hasValue}
 	<HtmlAtom
+		{bond}
+		preset="dropdown.placeholder"
 		class={[
 			'absolute inset-0 flex h-full w-full items-center px-2 leading-1 opacity-50 outline-none',
-			toClassValue.apply(bond, [preset?.class]),
-			toClassValue.apply(bond, [klass])
+			'$preset',
+			klass
 		]}
 		{...placeholderProps}
 	>
diff --git a/src/lib/components/dropdown/dropdown-query.svelte b/src/lib/components/dropdown/dropdown-query.svelte
index 9ed8902..fd7b5c0 100644
--- a/src/lib/components/dropdown/dropdown-query.svelte
+++ b/src/lib/components/dropdown/dropdown-query.svelte
@@ -3,7 +3,6 @@
 	import { DropdownBond } from './bond.svelte';
 	import { Input } from '$svelte-atoms/core/components/input';
 	import { toClassValue, cn } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	const bond = DropdownBond.get() as DropdownBond;
 
@@ -11,8 +10,6 @@
 		throw new Error('Combobox atom was not found');
 	}
 
-	const preset = getPreset('dropdown.query');
-
 	let {
 		class: klass = '',
 		children = undefined,
@@ -44,11 +41,9 @@
 
 <Input.Value
 	bind:value={bond.state.query}
-	class={[
-		'inline-flex w-min flex-1 py-1',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	preset="dropdown.query"
+	class={['inline-flex w-min flex-1 py-1', '$preset', klass]}
+	{bond}
 	onpointerdown={(ev) => {
 		ev.stopPropagation();
 
diff --git a/src/lib/components/dropdown/dropdown-trigger.svelte b/src/lib/components/dropdown/dropdown-trigger.svelte
index 953b04c..984bc4d 100644
--- a/src/lib/components/dropdown/dropdown-trigger.svelte
+++ b/src/lib/components/dropdown/dropdown-trigger.svelte
@@ -4,7 +4,7 @@
 	export type DropdownTriggerProps<
 		T extends keyof HTMLElementTagNameMap,
 		B extends Base = Base
-	> = PopoverTriggerProps<T, S> & {
+	> = PopoverTriggerProps<T, B> & {
 		children?: Snippet<[{ dropdown?: DropdownBond }]>;
 	};
 </script>
@@ -13,8 +13,6 @@
 	import type { Snippet } from 'svelte';
 	import { DropdownBond } from './bond.svelte';
 	import { Trigger } from '$svelte-atoms/core/components/popover/atoms';
-	import { toClassValue, cn } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import type { Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = DropdownBond.get();
@@ -23,12 +21,9 @@
 		throw new Error('dropdown atom was not found');
 	}
 
-	const preset = getPreset('dropdown.trigger');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'button',
-		base = preset?.base as B,
+		as = 'button' as T,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -37,17 +32,14 @@
 		exit = undefined,
 		initial = undefined,
 		...restProps
-	}: DropdownTriggerProps<T, S> = $props();
+	}: DropdownTriggerProps<T, B> = $props();
 </script>
 
 <Trigger
 	{as}
-	{base}
-	class={[
-		'relative flex h-auto min-h-10 flex-wrap items-center',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="dropdown.trigger"
+	class={['relative flex h-auto min-h-10 flex-wrap items-center', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
diff --git a/src/lib/components/dropdown/dropdown-value.svelte b/src/lib/components/dropdown/dropdown-value.svelte
index d503a3e..f828758 100644
--- a/src/lib/components/dropdown/dropdown-value.svelte
+++ b/src/lib/components/dropdown/dropdown-value.svelte
@@ -2,9 +2,7 @@
 	import { DropdownBond } from './bond.svelte';
 	import { Icon } from '$svelte-atoms/core/components/icon';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import CloseIcon from '$svelte-atoms/core/icons/icon-close.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	const bond = DropdownBond.get();
 
@@ -12,12 +10,9 @@
 		throw new Error('DropdownValue must be used within a Dropdown');
 	}
 
-	const preset = getPreset('dropdown.value');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
+		as = 'div' as T,
 		value,
 		children,
 		onmount = undefined,
@@ -41,11 +36,12 @@
 
 <HtmlAtom
 	{as}
-	{base}
+	{bond}
+	preset="dropdown.value"
 	class={[
 		'dropdown-value bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
diff --git a/src/lib/components/dropdown/item/dropdown-item.svelte b/src/lib/components/dropdown/item/dropdown-item.svelte
index 44e67a5..f30f7ff 100644
--- a/src/lib/components/dropdown/item/dropdown-item.svelte
+++ b/src/lib/components/dropdown/item/dropdown-item.svelte
@@ -10,8 +10,7 @@
 	} from './bond.svelte';
 	import { DropdownBond } from '../bond.svelte';
 	import { Item } from '$svelte-atoms/core/components/menu/atoms';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import type { Base } from '$svelte-atoms/core/components/atom';
 
 	const dropdown = DropdownBond.get();
@@ -20,10 +19,9 @@
 		throw new Error('<DropdownItem> must be used within a <Dropdown>.');
 	}
 
-	const preset = getPreset('dropdown.item');
-
 	let {
 		class: klass = '',
+		preset = 'dropdown.item',
 		value = nanoid(),
 		data = undefined,
 		factory = _factory,
@@ -47,7 +45,7 @@
 		const item = dropdown?.state.item(value);
 
 		if (item) {
-			return item;
+			return item as DropdownItemBond;
 		}
 
 		const bondProps = defineState<DropdownItemBondProps<D>>([
@@ -55,7 +53,7 @@
 			defineProperty('data', () => data)
 		]);
 		const bondState = new DropdownItemBondState(() => bondProps);
-		return new DropdownItemBond(bondState).share();
+		return new DropdownItemBond(bondState);
 	}
 
 	function _onclick(ev: MouseEvent) {
@@ -79,11 +77,13 @@
 
 <Item
 	{@attach (node) => (bond.elements.root = node)}
+	{bond}
+	{preset}
 	class={[
 		bond.state.isHighlighted && 'bg-foreground/10',
 		bond.state.isSelected && 'bg-accent/10',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
diff --git a/src/lib/components/element/types.ts b/src/lib/components/element/types.ts
index 81b5285..8839316 100644
--- a/src/lib/components/element/types.ts
+++ b/src/lib/components/element/types.ts
@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
-import type { ClassValue, HTMLAttributes, SVGAttributes } from 'svelte/elements';
+import type { HTMLAttributes, SVGAttributes } from 'svelte/elements';
 import type { TransitionConfig } from 'svelte/transition';
+import type { ClassValue } from '$svelte-atoms/core/utils';
 
 export type ElementProps<T extends ElementTagName> = Record<string, unknown> & {
-	class?: ClassValue;
+	class?: ClassValue | ClassValue[];
 	as?: T | (string & {});
 	global?: boolean;
 	initial?: NodeFunction<T>;
@@ -14,7 +15,7 @@ export type ElementProps<T extends ElementTagName> = Record<string, unknown> & {
 	ondestroy?: NodeFunction<T>;
 	children?: Snippet;
 
-	[key: string]: any;
+	[key: string]: unknown;
 };
 
 export type HtmlElementTagName = keyof HTMLElementTagNameMap;
diff --git a/src/lib/components/form/field/field-control.svelte b/src/lib/components/form/field/field-control.svelte
index 3593ee0..33e3f9b 100644
--- a/src/lib/components/form/field/field-control.svelte
+++ b/src/lib/components/form/field/field-control.svelte
@@ -15,20 +15,15 @@
 
 <script lang="ts" generics="B extends Base<{value: unknown}>">
 	import type { Snippet } from 'svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import type { Override } from '$svelte-atoms/core/types';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { FieldBond } from './bond.svelte';
 
 	const bond = FieldBond.get();
 	const name = $derived(bond?.state?.props?.name);
 
-	const preset = getPreset('field.control');
-
 	let {
 		class: klass = '',
-		base = preset?.base as B,
 		value = $bindable(),
 		checked = $bindable(),
 		children = undefined,
@@ -50,15 +45,12 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'flex items-center',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
-	{base}
+	{bond}
 	{value}
 	{checked}
 	{name}
+	preset="field.control"
+	class={['flex items-center', '$preset', klass]}
 	oninput={handleInput}
 	{...controlProps}
 >
diff --git a/src/lib/components/form/field/field-label.svelte b/src/lib/components/form/field/field-label.svelte
index 4705579..6b05a96 100644
--- a/src/lib/components/form/field/field-label.svelte
+++ b/src/lib/components/form/field/field-label.svelte
@@ -6,21 +6,16 @@
 </script>
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { Label } from '$svelte-atoms/core/components/label';
 	import type { LabelProps } from '$svelte-atoms/core/components/label/label.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import type { Base } from '$svelte-atoms/core/components/atom';
 	import { FieldBond } from './bond.svelte';
 
 	const bond = FieldBond.get();
 
-	const preset = getPreset('field.label');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('label' as E),
-		base = preset?.base as B,
+		as = 'label' as E,
 		children = undefined,
 		...restProps
 	}: FieldLabelProps = $props();
@@ -31,15 +26,6 @@
 	});
 </script>
 
-<Label
-	class={[
-		'flex flex-col',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
-	{as}
-	{base}
-	{...labelProps}
->
+<Label {as} {bond} preset="field.label" class={['flex flex-col', '$preset', klass]} {...labelProps}>
 	{@render children?.()}
 </Label>
diff --git a/src/lib/components/form/field/field-root.svelte b/src/lib/components/form/field/field-root.svelte
index ad121d8..51d9951 100644
--- a/src/lib/components/form/field/field-root.svelte
+++ b/src/lib/components/form/field/field-root.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { onDestroy, type Component, type Snippet } from 'svelte';
+	import { onDestroy, type Snippet } from 'svelte';
 	import { FieldBond, FieldBondState, type FieldStateProps } from './bond.svelte';
 	import { FormBond } from '../bond.svelte';
 	import type { Override } from '$svelte-atoms/core/types';
@@ -32,19 +32,14 @@
 		type HtmlAtomProps,
 		type Base
 	} from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	type Element = ElementType<E>;
 
 	const formBond = FormBond.get();
 
-	const preset = getPreset('field');
-
 	let {
 		value = $bindable(),
 		class: klass = '',
-		as = preset?.class ?? ('div' as E),
-		base = preset?.base as B,
 		name = undefined,
 		schema = undefined,
 		validator = undefined,
@@ -88,6 +83,6 @@
 	}
 </script>
 
-<HtmlAtom class={['flex flex-col', klass]} {as} {base} {...rootProps}>
+<HtmlAtom preset="field" class={['flex flex-col', '$preset', klass]} {...rootProps}>
 	{@render children?.({ field: bond })}
 </HtmlAtom>
diff --git a/src/lib/components/form/form-root.svelte b/src/lib/components/form/form-root.svelte
index 6ee3495..398cde9 100644
--- a/src/lib/components/form/form-root.svelte
+++ b/src/lib/components/form/form-root.svelte
@@ -4,8 +4,6 @@
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 	import { defineState, defineProperty } from '$svelte-atoms/core/utils/state';
 	import type { Override, Factory } from '$svelte-atoms/core/types';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { FormBond, FormBondState, type FormProps } from './bond.svelte';
 
 	type CommonProps = {
@@ -30,11 +28,8 @@
 </script>
 
 <script lang="ts" generics="B extends Base = Base">
-	const preset = getPreset('form');
-
 	let {
 		class: klass = '',
-		base = preset?.base as B,
 		renderless = false,
 		validator = undefined,
 		factory = _factory,
@@ -64,11 +59,7 @@
 {#if renderless}
 	{@render children?.({ form: bond })}
 {:else}
-	<HtmlAtom
-		class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
-		as="form"
-		{...restProps}
-	>
+	<HtmlAtom {bond} preset="form" class={['$preset', klass]} as="form" {...restProps}>
 		{@render children?.({ form: bond })}
 	</HtmlAtom>
 {/if}
diff --git a/src/lib/components/icon/icon.svelte b/src/lib/components/icon/icon.svelte
index b1ffd99..cbfe374 100644
--- a/src/lib/components/icon/icon.svelte
+++ b/src/lib/components/icon/icon.svelte
@@ -16,33 +16,27 @@
 >
 	import type { Component, Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	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';
 	import type { HtmlElementTagName, HtmlElementType } from '$svelte-atoms/core/components/element';
 
 	type Element = HtmlElementType<'div'>;
 
-	const preset = getPreset('icon');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		src = undefined,
+		preset = 'icon',
 		children = undefined,
 		...restProps
 	}: IconProps<Src, E, B> & HTMLAttributes<Element> = $props();
 </script>
 
 <HtmlAtom
+	{preset}
 	class={[
 		'icon inline-flex aspect-square h-6 items-center justify-center leading-none text-current',
-		toClassValue.apply(null, [preset?.class, {}]),
-		toClassValue.apply(null, [klass, {}])
+		'$preset',
+		klass
 	]}
-	{as}
-	{base}
 	{...restProps}
 >
 	{#if src}
diff --git a/src/lib/components/image/image.svelte b/src/lib/components/image/image.svelte
index ee18770..e9b91d4 100644
--- a/src/lib/components/image/image.svelte
+++ b/src/lib/components/image/image.svelte
@@ -14,12 +14,14 @@
 </script>
 
 <HtmlAtom
+	preset="image"
+	as="div"
 	class={[
 		'flex items-center justify-center overflow-hidden rounded-lg',
 		hasError && 'bg-foreground/5',
+		'$preset',
 		toClassValue(klass, { error: hasError })
 	]}
-	as="div"
 	{...restProps}
 >
 	<img
diff --git a/src/lib/components/input/input-icon.svelte b/src/lib/components/input/input-icon.svelte
index 15e7497..b71e0f9 100644
--- a/src/lib/components/input/input-icon.svelte
+++ b/src/lib/components/input/input-icon.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-	import { cn } from '$svelte-atoms/core/utils';
 	import { Icon, type IconProps } from '$svelte-atoms/core/components/icon';
 
 	let { class: klass = '', children = undefined, ...restProps }: IconProps = $props();
 </script>
 
 <Icon
+	preset="input.icon"
 	class={[
 		'flex aspect-square h-full items-center justify-center bg-transparent text-sm leading-0',
+		'$preset',
 		klass
 	]}
 	{...restProps}
diff --git a/src/lib/components/input/input-placeholder.svelte b/src/lib/components/input/input-placeholder.svelte
index ad69219..6dfcdfb 100644
--- a/src/lib/components/input/input-placeholder.svelte
+++ b/src/lib/components/input/input-placeholder.svelte
@@ -7,19 +7,13 @@
 		type HtmlAtomProps,
 		type Base
 	} from '$svelte-atoms/core/components/atom';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	type Element = ElementType<E>;
 
 	const bond = InputBond.get();
 
-	const preset = getPreset('input.placeholder');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		...restProps
 	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
@@ -48,10 +42,11 @@
 
 {#if shouldShowPlaceholder}
 	<HtmlAtom
+		preset="input.placeholder"
 		class={[
 			'pointer-events-none absolute inset-0 flex h-full w-full items-center px-1 leading-1 outline-none',
-			toClassValue.apply(bond, [preset?.class]),
-			toClassValue.apply(bond, [klass])
+			'$preset',
+			klass
 		]}
 		style="left:{bond?.elements?.input?.offsetLeft ?? 0}px"
 		{...placeholderProps}
diff --git a/src/lib/components/input/input-root.svelte b/src/lib/components/input/input-root.svelte
index a9cbe93..9eef481 100644
--- a/src/lib/components/input/input-root.svelte
+++ b/src/lib/components/input/input-root.svelte
@@ -8,19 +8,15 @@
 		type HtmlAtomProps,
 		type Base
 	} from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	type Element = ElementType<E>;
 
-	const preset = getPreset('input.root');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		value,
 		checked = undefined,
 		files = [],
+		preset = 'input',
 		children = undefined,
 		factory = _factory,
 		...restProps
@@ -70,13 +66,13 @@
 </script>
 
 <HtmlAtom
+	{preset}
 	class={[
 		'border-border text-foreground bg-input relative flex h-10 items-center overflow-hidden rounded-md border',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
-	{as}
-	{base}
+	{bond}
 	{...rootProps}
 >
 	{@render children?.({ input: bond })}
diff --git a/src/lib/components/input/input-value.svelte b/src/lib/components/input/input-value.svelte
index df59202..6aec439 100644
--- a/src/lib/components/input/input-value.svelte
+++ b/src/lib/components/input/input-value.svelte
@@ -9,6 +9,7 @@
 		checked?: boolean;
 		class?: string;
 		type?: HTMLInputTypeAttribute | null;
+		preset?: PresetModuleName | (string & {});
 		children?: Snippet<[]>;
 	};
 </script>
@@ -16,15 +17,14 @@
 <script>
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputTypeAttribute } from 'svelte/elements';
-	import { InputBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { on } from '$svelte-atoms/core/attachments/event.svelte';
 	import { getPreset } from '$svelte-atoms/core/context';
+	import { toClassValue } from '$svelte-atoms/core/utils';
+	import type { PresetModuleName } from '$svelte-atoms/core/context/preset.svelte';
+	import { InputBond } from './bond.svelte';
 
 	const bond = InputBond.get();
 
-	const preset = getPreset('input.value');
-
 	let {
 		value = $bindable(),
 		files = $bindable(),
@@ -33,11 +33,14 @@
 		checked = $bindable(),
 		class: klass = '',
 		type = 'text',
+		preset: presetKey = 'input.value',
 		onchange = undefined,
 		oninput = undefined,
 		...restProps
 	}: InputProps = $props();
 
+	const preset = getPreset(presetKey as PresetModuleName);
+
 	const valueProps = $derived({
 		...(bond?.input?.() ?? {}),
 		...restProps
@@ -81,11 +84,6 @@
 </script>
 
 <input
-	class={[
-		'h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
 	{type}
 	bind:value={
 		() => value,
@@ -96,6 +94,11 @@
 			}
 		}
 	}
+	class={[
+		'h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
+		toClassValue.bind(bond, preset?.class),
+		toClassValue.bind(bond, klass)
+	]}
 	onchange={handleChange}
 	oninput={handleInput}
 	{...valueProps}
diff --git a/src/lib/components/label/label.svelte b/src/lib/components/label/label.svelte
index 7908aac..1f3d1ac 100644
--- a/src/lib/components/label/label.svelte
+++ b/src/lib/components/label/label.svelte
@@ -17,23 +17,25 @@
 		type HtmlAtomProps,
 		type Base
 	} from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	type Element = ElementType<E>;
 
-	const preset = getPreset('label');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'label',
-		base = preset?.base as B,
+		as = 'label' as E,
 		for: labelfor = null,
 		children,
 		...restProps
 	}: LabelProps<E, B> & HTMLAttributes<Element> = $props();
 </script>
 
-<HtmlAtom class={['font-medium', klass]} for={labelfor} {as} {base} {...restProps}>
+<HtmlAtom
+	{as}
+	preset="label"
+	class={['font-medium', '$preset', klass]}
+	for={labelfor}
+	{...restProps}
+>
 	{@render children?.()}
 </HtmlAtom>
diff --git a/src/lib/components/layer/layer-inner.svelte b/src/lib/components/layer/layer-inner.svelte
index e393865..9f63ed9 100644
--- a/src/lib/components/layer/layer-inner.svelte
+++ b/src/lib/components/layer/layer-inner.svelte
@@ -1,25 +1,19 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { LayerBond } from './bond.svelte';
-	import { toClassValue, cn } from '$svelte-atoms/core/utils';
 	import {
 		HtmlAtom,
 		type ElementType,
 		type HtmlAtomProps,
 		type Base
 	} from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	type Element = ElementType<E>;
 
 	const bond = LayerBond.get();
 
-	const preset = getPreset('layer.inner');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -37,13 +31,8 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'relative size-full',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	preset="layer.inner"
+	class={['relative size-full', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/layer/layer-root.svelte b/src/lib/components/layer/layer-root.svelte
index d95dd5a..aeed935 100644
--- a/src/lib/components/layer/layer-root.svelte
+++ b/src/lib/components/layer/layer-root.svelte
@@ -19,8 +19,6 @@
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		factory = _factory,
 		children = undefined,
 		onmount = undefined,
@@ -56,13 +54,7 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'pointer-events-none absolute inset-0',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	class={['pointer-events-none absolute inset-0', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/link/link.svelte b/src/lib/components/link/link.svelte
index d1e8636..df25cd4 100644
--- a/src/lib/components/link/link.svelte
+++ b/src/lib/components/link/link.svelte
@@ -1,26 +1,17 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	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';
 
-	const preset = getPreset('link');
-
-	let {
-		class: klass = '',
-		base = preset?.base as B,
-		children,
-		...restProps
-	}: HtmlAtomProps<E, B> = $props();
+	let { class: klass = '', children, ...restProps }: HtmlAtomProps<E, B> = $props();
 </script>
 
 <HtmlAtom
+	preset="link"
 	class={[
 		'hover:text-primary/80 active:text-primary/100 cursor-pointer underline transition-colors duration-200',
-		toClassValue.apply(null, [preset?.class, {}]),
-		toClassValue.apply(null, [klass, {}])
+		'$preset',
+		klass
 	]}
 	as="a"
-	{base}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/list/list-divider.svelte b/src/lib/components/list/list-divider.svelte
index 3d9753d..cec9def 100644
--- a/src/lib/components/list/list-divider.svelte
+++ b/src/lib/components/list/list-divider.svelte
@@ -1,29 +1,19 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { Divider } from '$svelte-atoms/core/components/divider';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { toClassValue } from '$svelte-atoms/core/utils';
 	import type { Base } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('list.divider');
-
-	let {
-		class: klass = '',
-		as = preset?.as ?? 'div',
-		vertical = false,
-		children = undefined,
-		...restProps
-	} = $props();
+	let { class: klass = '', vertical = false, children = undefined, ...restProps } = $props();
 </script>
 
 <Divider
+	preset="list.divider"
 	class={[
-		'list-divider',
 		!vertical && 'my-1',
 		vertical && 'mx-1',
-		toClassValue.apply(null, [preset?.class, {}]),
+		'$preset',
 		toClassValue.apply(null, [klass, {}])
 	]}
-	{as}
 	{vertical}
 	{...restProps}
 />
diff --git a/src/lib/components/list/list-group.svelte b/src/lib/components/list/list-group.svelte
index 5ed2d16..d10b42e 100644
--- a/src/lib/components/list/list-group.svelte
+++ b/src/lib/components/list/list-group.svelte
@@ -1,25 +1,15 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { toClassValue } from '$svelte-atoms/core/utils';
 
-	const preset = getPreset('list.group');
-
-	let {
-		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
-		children = undefined,
-		...restProps
-	} = $props();
+	let { class: klass = '', children = undefined, ...restProps } = $props();
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
+	preset="list.group"
 	class={[
-		'atoms-ui list-group rounded-b-inherit rounded-t-inherit flex flex-col',
-		toClassValue.apply(null, [preset?.class, {}]),
+		'rounded-b-inherit rounded-t-inherit flex flex-col',
+		'$preset',
 		toClassValue.apply(null, [klass, {}])
 	]}
 	{...restProps}
diff --git a/src/lib/components/list/list-item.svelte b/src/lib/components/list/list-item.svelte
index 6efb60d..a640752 100644
--- a/src/lib/components/list/list-item.svelte
+++ b/src/lib/components/list/list-item.svelte
@@ -1,14 +1,10 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'li', B extends Base = Base">
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-
-	const preset = getPreset('list.item');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'li',
-		base = preset?.base as B,
+		as = 'li' as T,
+		preset: presetKey = 'list.item',
 		children = undefined,
 		...restProps
 	} = $props();
@@ -16,12 +12,8 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[
-		'flex w-full gap-2 px-4 py-1',
-		toClassValue.apply(null, [preset?.class, {}]),
-		toClassValue.apply(null, [klass, {}])
-	]}
+	preset={presetKey}
+	class={['flex w-full gap-2 px-4 py-1', '$preset', klass]}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/list/list-root.svelte b/src/lib/components/list/list-root.svelte
index c1b143e..d0f5bc9 100644
--- a/src/lib/components/list/list-root.svelte
+++ b/src/lib/components/list/list-root.svelte
@@ -1,28 +1,9 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'ul', B extends Base = Base">
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 
-	const preset = getPreset('list.item');
-
-	let {
-		class: klass = '',
-		as = preset?.as ?? 'ul',
-		base = preset?.base as B,
-		children = undefined,
-		...restProps
-	} = $props();
+	let { class: klass = '', as = 'ul' as T, children = undefined, ...restProps } = $props();
 </script>
 
-<HtmlAtom
-	{as}
-	{base}
-	class={[
-		'atoms-ui atom-list flex flex-col',
-		toClassValue.apply(null, [preset?.class, {}]),
-		toClassValue.apply(null, [klass, {}])
-	]}
-	{...restProps}
->
+<HtmlAtom {as} preset="list.root" class={['flex flex-col', '$preset', klass]} {...restProps}>
 	{@render children?.()}
 </HtmlAtom>
diff --git a/src/lib/components/list/list-title.svelte b/src/lib/components/list/list-title.svelte
index 545def1..bd36685 100644
--- a/src/lib/components/list/list-title.svelte
+++ b/src/lib/components/list/list-title.svelte
@@ -1,28 +1,13 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('list.item');
-
-	let {
-		class: klass = '',
-		as = preset?.as ?? 'h3',
-		base = preset?.base as B,
-		children = undefined,
-		...restProps
-	} = $props();
+	let { class: klass = '', as = 'h3' as T, children = undefined, ...restProps } = $props();
 </script>
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[
-		'atoms-ui list-title',
-		'mb-1 flex w-full px-6 py-1 font-medium',
-		toClassValue.apply(null, [preset?.class, {}]),
-		toClassValue.apply(null, [klass, {}])
-	]}
+	preset="list.title"
+	class={['mb-1 flex w-full px-6 py-1 font-medium', '$preset', klass]}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/menu/menu-item.svelte b/src/lib/components/menu/menu-item.svelte
index 54e4beb..97ed8de 100644
--- a/src/lib/components/menu/menu-item.svelte
+++ b/src/lib/components/menu/menu-item.svelte
@@ -1,18 +1,13 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { List } from '../list';
 	import { PopoverBond } from '$svelte-atoms/core/components/popover/bond.svelte';
 	import type { Base } from '$svelte-atoms/core/components/atom';
+	import { List } from '../list';
 
 	const bond = PopoverBond.get();
 
-	const preset = getPreset('dropdown.item');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
+		preset: presetKey = 'menu.item',
 		children = undefined,
 		onclick = undefined,
 		onmount = undefined,
@@ -36,10 +31,12 @@
 </script>
 
 <List.Item
+	{bond}
+	preset={presetKey}
 	class={[
 		'border-border last:border-b-none hover:bg-foreground/5 active:bg-foreground/10 cursor-pointer border-b',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
@@ -47,8 +44,6 @@
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
-	{as}
-	{base}
 	onclick={_onclick}
 	{...restProps}
 >
diff --git a/src/lib/components/menu/menu-list.svelte b/src/lib/components/menu/menu-list.svelte
index 1661d33..502f7c1 100644
--- a/src/lib/components/menu/menu-list.svelte
+++ b/src/lib/components/menu/menu-list.svelte
@@ -1,18 +1,15 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { List } from '../list';
 	import { Content } from '$svelte-atoms/core/components/popover/atoms';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import type { Base } from '$svelte-atoms/core/components/atom';
 	import { PopoverBond } from '$svelte-atoms/core/components/popover';
 
 	const bond = PopoverBond.get();
-	const preset = getPreset('menu.body');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'ul',
-		base = preset?.base ?? List.Root,
+		as = 'ul' as T,
+		base = List.Root as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -25,19 +22,17 @@
 </script>
 
 <Content
-	class={[
-		'bg-background overflow-hidden p-0',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{as}
+	{base}
+	{bond}
+	preset="menu.list"
+	class={['bg-background overflow-hidden p-0', '$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)}
-	{as}
-	{base}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/popover/popover-arrow.svelte b/src/lib/components/popover/popover-arrow.svelte
index 25e39da..1a5e675 100644
--- a/src/lib/components/popover/popover-arrow.svelte
+++ b/src/lib/components/popover/popover-arrow.svelte
@@ -8,8 +8,6 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { animate as motion } from 'motion';
-	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';
 	import { PopoverBond } from './bond.svelte';
 
@@ -21,12 +19,8 @@
 		throw new Error('');
 	}
 
-	const preset = getPreset('popover.arrow');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as const),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -42,6 +36,11 @@
 	const isReady = $derived(!!middlewareArrowData);
 	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
 
+	const arrowProps = $derived({
+		...bond.arrow(),
+		...restProps
+	});
+
 	// Rotation based on placement side
 	const rotation = $derived.by(() => {
 		switch (side) {
@@ -89,11 +88,9 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'text-border pointer-events-none absolute opacity-0',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="popover.arrow"
+	class={['text-border pointer-events-none absolute opacity-0', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
@@ -101,8 +98,7 @@
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
 	style="{side}: 100%;"
-	{as}
-	{...bond.arrow(restProps)}
+	{...arrowProps}
 >
 	{#if children}
 		{@render children({ popover: bond })}
diff --git a/src/lib/components/popover/popover-content.svelte b/src/lib/components/popover/popover-content.svelte
index d4b19df..3c9de85 100644
--- a/src/lib/components/popover/popover-content.svelte
+++ b/src/lib/components/popover/popover-content.svelte
@@ -25,10 +25,8 @@
 	import { type Snippet } from 'svelte';
 	import { animate as motion } from 'motion';
 	import { PortalBond, Teleport } from '$svelte-atoms/core/components/portal';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 	import type { HtmlElementTagName, HtmlElementType } from '$svelte-atoms/core/components/element';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { PopoverBond } from './bond.svelte';
 
 	type Element = HtmlElementType<E>;
@@ -40,12 +38,8 @@
 		throw new Error('<PopoverOverlay /> must be used within a <Popover />');
 	}
 
-	const preset = getPreset('popover.content');
-
 	let {
 		class: klass = '',
-		base = preset?.base as B,
-		as = preset?.as ?? ('div' as E),
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -133,10 +127,12 @@
 	{...bond.content({ onchange: _containerInitial })}
 >
 	<HtmlAtom
+		{bond}
+		preset="popover.content"
 		class={[
 			'popover-content border-border bg-background rounded-md border p-2 opacity-0 shadow-lg',
-			toClassValue.apply(bond, [preset?.class]),
-			toClassValue.apply(bond, [klass])
+			'$preset',
+			klass
 		]}
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}
@@ -144,8 +140,6 @@
 		animate={animate?.bind(bond.state)}
 		onmount={onmount?.bind(bond.state)}
 		ondestroy={ondestroy?.bind(bond.state)}
-		{as}
-		{base}
 		{...restProps}
 	>
 		{@render children?.({ popover: bond })}
diff --git a/src/lib/components/popover/popover-indicator.svelte b/src/lib/components/popover/popover-indicator.svelte
index 1e566bd..8932d08 100644
--- a/src/lib/components/popover/popover-indicator.svelte
+++ b/src/lib/components/popover/popover-indicator.svelte
@@ -2,13 +2,10 @@
 	import { animate as motion } from 'motion';
 	import { Icon } from '$svelte-atoms/core/components/icon';
 	import IconArrowDown from '$svelte-atoms/core/icons/icon-arrow-down.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
 	import { PopoverBond } from './bond.svelte';
 
 	const bond = PopoverBond.get();
-	const preset = getPreset('popover.indicator');
 
 	let {
 		class: klass = '',
@@ -25,11 +22,9 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'flex items-center justify-center',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="popover.indicator"
+	class={['flex items-center justify-center', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/components/popover/popover-trigger.svelte b/src/lib/components/popover/popover-trigger.svelte
index 3653500..da265fe 100644
--- a/src/lib/components/popover/popover-trigger.svelte
+++ b/src/lib/components/popover/popover-trigger.svelte
@@ -2,17 +2,15 @@
 	export type PopoverTriggerProps<
 		T extends keyof HTMLElementTagNameMap,
 		B extends Base = Base
-	> = HtmlAtomProps<T, S> & {
+	> = HtmlAtomProps<T, B> & {
 		children?: Snippet<[{ popover?: PopoverBond }]>;
 	};
 </script>
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { PopoverBond } from './bond.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { PopoverBond } from './bond.svelte';
 
 	const bond = PopoverBond.get();
 
@@ -20,12 +18,10 @@
 		throw new Error('');
 	}
 
-	const preset = getPreset('popover.trigger');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('button' as E),
-		base = preset?.base as B,
+		as = 'button' as E,
+		preset = 'popover.trigger',
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -43,11 +39,10 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'flex w-fit cursor-pointer rounded-md p-2',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{as}
+	{bond}
+	{preset}
+	class={['flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
@@ -55,8 +50,6 @@
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
 	type={as === 'button' ? 'button' : undefined}
-	{as}
-	{base}
 	{...triggerProps}
 >
 	{@render children?.({ popover: bond })}
diff --git a/src/lib/components/popover/popover.stories.svelte b/src/lib/components/popover/popover.stories.svelte
index e774eb0..7844fbb 100644
--- a/src/lib/components/popover/popover.stories.svelte
+++ b/src/lib/components/popover/popover.stories.svelte
@@ -4,6 +4,7 @@
 	import Root from '$svelte-atoms/core/components/root/root.svelte';
 	import { clickoutPopover } from './attachments.svelte';
 	import { animate } from 'motion';
+	import { Button } from '../button';
 
 	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 	const { Story } = defineMeta({
@@ -31,7 +32,7 @@
 						<RenderScan duration={400} />
 					{/if} -->
 
-					<Popover_.Trigger class="items-center gap-4">
+					<Popover_.Trigger base={Button} class="items-center gap-4">
 						<div>Open Popover</div>
 						<Popover_.Indicator />
 					</Popover_.Trigger>
diff --git a/src/lib/components/portal/portal-inner.svelte b/src/lib/components/portal/portal-inner.svelte
index 56d3f17..6f0680c 100644
--- a/src/lib/components/portal/portal-inner.svelte
+++ b/src/lib/components/portal/portal-inner.svelte
@@ -1,24 +1,19 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { PortalBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import {
 		HtmlAtom,
 		type ElementType,
 		type HtmlAtomProps,
 		type Base
 	} from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 
 	type Element = ElementType<E>;
 
 	const bond = PortalBond.get();
-	const preset = getPreset('portal.inner');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -36,13 +31,9 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'relative size-full',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
-	{as}
-	{base}
+	{bond}
+	preset="portal.inner"
+	class={['relative size-full', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/portal/portal-root.svelte b/src/lib/components/portal/portal-root.svelte
index 96c92c2..adad5b7 100644
--- a/src/lib/components/portal/portal-root.svelte
+++ b/src/lib/components/portal/portal-root.svelte
@@ -30,8 +30,6 @@
 	let {
 		class: klass = '',
 		id,
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		factory = _factory,
 		children = undefined,
 		onmount = undefined,
@@ -78,13 +76,8 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'pointer-events-none',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
-	{as}
-	{base}
+	{bond}
+	class={['pointer-events-none', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/radio/radio-group.svelte b/src/lib/components/radio/radio-group.svelte
index 11dd072..ec7fefb 100644
--- a/src/lib/components/radio/radio-group.svelte
+++ b/src/lib/components/radio/radio-group.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { setRadioGroupContext, type RadioGroupContext } from './context';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
-	import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils';
-
-	const preset = getPreset('radio.group');
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 
 	let {
 		class: klass = '',
@@ -12,7 +9,6 @@
 		readonly = false,
 		required = false,
 		name = undefined,
-		base = preset?.base as B,
 		value = $bindable(),
 		children,
 		oninput = undefined,
@@ -40,14 +36,6 @@
 	});
 </script>
 
-<HtmlAtom
-	class={[
-		'flex flex-col gap-1',
-		toClassValue.apply(null, [preset?.class, {}]),
-		toClassValue.apply(null, [klass, {}])
-	]}
-	{base}
-	{...restProps}
->
+<HtmlAtom preset="radio.group" class={['flex flex-col gap-1', '$preset', klass]} {...restProps}>
 	{@render children?.()}
 </HtmlAtom>
diff --git a/src/lib/components/radio/radio.svelte b/src/lib/components/radio/radio.svelte
index ae87f92..8e204d9 100644
--- a/src/lib/components/radio/radio.svelte
+++ b/src/lib/components/radio/radio.svelte
@@ -2,11 +2,8 @@
 	import { getRadioGroupContext } from './context';
 	import { Stack } from '../stack';
 	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('radio');
-
 	const radioGroupContext = getRadioGroupContext();
 
 	let {
@@ -15,7 +12,6 @@
 		group = $bindable(),
 		id = undefined,
 		name = undefined,
-		base = preset?.base as B,
 		disabled = false,
 		required = false,
 		readonly = false,
@@ -74,27 +70,27 @@
 </script>
 
 <Stack.Root
+	preset="radio"
 	class={[
 		'text-foreground box-border inline-flex aspect-square size-4 max-w-fit cursor-pointer place-items-center rounded-full border p-[3px]',
 		isDisabled && 'pointer-events-none opacity-50',
-		toClassValue.apply(null, [preset?.class, {}]),
+		'$preset',
 		toClassValue.apply(null, [klass, {}])
 	]}
 	as="label"
-	{base}
 	{...restProps}
 >
 	<Stack.Item class="pointer-events-none flex size-full">
 		<input
 			bind:group={proxy.current}
+			{id}
+			{value}
 			class="pointer-events-auto size-0 opacity-0"
 			type="radio"
 			name={_name ?? name}
 			disabled={isDisabled}
 			required={isRequired}
 			readonly={isReadonly}
-			{id}
-			{value}
 			onchange={handleChange}
 			oninput={handleInput}
 		/>
diff --git a/src/lib/components/root/root.svelte b/src/lib/components/root/root.svelte
index 90dfe0f..23182d3 100644
--- a/src/lib/components/root/root.svelte
+++ b/src/lib/components/root/root.svelte
@@ -3,17 +3,13 @@
 </script>
 
 <script lang="ts">
-	import { toClassValue, cn, defineState, defineProperty } from '$svelte-atoms/core/utils';
+	import { cn, defineState, defineProperty } from '$svelte-atoms/core/utils';
 	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
 	import { Portal, ActivePortal, Portals } from '$svelte-atoms/core/components/portal';
 	import { Stack } from '../stack';
-	import { getPreset } from '$svelte-atoms/core/context/preset.svelte';
 	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
 	import { HtmlElement, MathmlElement, SvgElement } from '$svelte-atoms/core/components/element';
 
-	const rootPreset = getPreset('root');
-	const portalsPreset = getPreset('root.portals');
-
 	let { class: klass = '', children = undefined, portals = undefined, ...restProps } = $props();
 
 	let html: typeof HtmlElement | undefined = HtmlElement;
@@ -66,10 +62,11 @@
 	{@attach (node) => {
 		bond.rootElement = node;
 	}}
+	preset="root"
 	class={cn(
 		'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start font-sans',
-		toClassValue.apply(bond, [rootPreset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	)}
 	{...restProps}
 >
@@ -78,10 +75,8 @@
 			{@render portals?.()}
 		{:else}
 			<Stack.Root
-				class={[
-					'portals pointer-events-none absolute inset-0 z-1 overflow-hidden',
-					toClassValue.apply(bond, [portalsPreset?.class])
-				]}
+				preset="root.portals"
+				class={['portals pointer-events-none absolute inset-0 z-1 overflow-hidden', '$preset']}
 			>
 				<Portal.Outer base={Stack.Item} id="root.l0">
 					<Portal.Inner />
diff --git a/src/lib/components/scrollable/scrollable-container.svelte b/src/lib/components/scrollable/scrollable-container.svelte
index 94b03b5..f585b2c 100644
--- a/src/lib/components/scrollable/scrollable-container.svelte
+++ b/src/lib/components/scrollable/scrollable-container.svelte
@@ -13,14 +13,9 @@
 	import type { Override } from '$svelte-atoms/core/types';
 	import { resizeObserver } from '$svelte-atoms/core/attachments/resize-observer.svelte';
 	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
-
-	const preset = getPreset('scrollable.content');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -49,9 +44,13 @@
 			bond.state.props.scrollHeight = node.scrollHeight;
 		})(node);
 	}}
-	{as}
-	{base}
-	class={['scrollable-container border-border h-full max-h-full w-full overflow-auto', klass]}
+	{bond}
+	preset="scrollable.container"
+	class={[
+		'scrollable-container border-border h-full max-h-full w-full overflow-auto',
+		'$preset',
+		klass
+	]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/scrollable/scrollable-content.svelte b/src/lib/components/scrollable/scrollable-content.svelte
index 64580bc..78ce4fc 100644
--- a/src/lib/components/scrollable/scrollable-content.svelte
+++ b/src/lib/components/scrollable/scrollable-content.svelte
@@ -11,17 +11,13 @@
 	import type { Snippet } from 'svelte';
 	import { ScrollableBond } from './bond.svelte';
 	import type { Override } from '$svelte-atoms/core/types';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
 	import { getPreset } from '$svelte-atoms/core/context';
 
 	const bond = ScrollableBond.get();
-	const preset = getPreset('scrollable.content');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -38,13 +34,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'scrollable-content border-border h-full max-h-full',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="scrollable.content"
+	class={['scrollable-content border-border h-full max-h-full', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/scrollable/scrollable-root.svelte b/src/lib/components/scrollable/scrollable-root.svelte
index 010499e..1bd5852 100644
--- a/src/lib/components/scrollable/scrollable-root.svelte
+++ b/src/lib/components/scrollable/scrollable-root.svelte
@@ -20,7 +20,7 @@
 	import type { Snippet } from 'svelte';
 	import { ScrollableBond, ScrollableState, type ScrollableStateProps } from './bond.svelte';
 	import type { Override } from '$svelte-atoms/core/types';
-	import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
 
@@ -111,11 +111,9 @@
 
 <HtmlAtom
 	{as}
-	class={[
-		'scrollable-root border-border relative box-content overflow-hidden',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="scrollable"
+	class={['scrollable-root border-border relative box-content overflow-hidden', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/scrollable/scrollable-thumb.svelte b/src/lib/components/scrollable/scrollable-thumb.svelte
index af7c000..423cf56 100644
--- a/src/lib/components/scrollable/scrollable-thumb.svelte
+++ b/src/lib/components/scrollable/scrollable-thumb.svelte
@@ -12,16 +12,10 @@
 	import type { Snippet } from 'svelte';
 	import { ScrollableBond } from './bond.svelte';
 	import type { Override } from '$svelte-atoms/core/types';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('scrollable.thumb');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children = undefined,
 		orientation,
 		onmount = undefined,
@@ -70,13 +64,14 @@
 </script>
 
 <HtmlAtom
-	{as}
+	{bond}
+	preset="scrollable.thumb"
 	class={[
 		'scrollable-thumb border-border bg-foreground/10 hover:bg-foreground/20 absolute cursor-grab rounded-md active:cursor-grabbing',
 		orientation === 'horizontal' ? 'scrollable-thumb-x' : 'scrollable-thumb-y',
 		{ horizontal: 'h-full', vertical: 'w-full' }[orientation],
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
diff --git a/src/lib/components/scrollable/scrollable-track.svelte b/src/lib/components/scrollable/scrollable-track.svelte
index 8c97b21..4b0399b 100644
--- a/src/lib/components/scrollable/scrollable-track.svelte
+++ b/src/lib/components/scrollable/scrollable-track.svelte
@@ -12,16 +12,11 @@
 	import type { Snippet } from 'svelte';
 	import { ScrollableBond } from './bond.svelte';
 	import type { Override } from '$svelte-atoms/core/types';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
 
-	const preset = getPreset('scrollable.track');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
+
 		orientation = undefined,
 		children = undefined,
 		onmount = undefined,
@@ -53,13 +48,13 @@
 
 {#if (isOpen || isScrolling) && hasScroll}
 	<HtmlAtom
-		{as}
-		{base}
+		{bond}
+		preset="scrollable.track"
 		class={[
 			'scrollable-track bg-foreground/10 hover:bg-foreground/15 border-border absolute z-10 rounded transition-opacity',
 			{ vertical: 'inset-y-0 right-0 w-2', horizontal: 'inset-x-0 bottom-0 h-2' }[orientation],
-			toClassValue.apply(bond, [preset?.class]),
-			toClassValue.apply(bond, [klass])
+			'$preset',
+			klass
 		]}
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}
diff --git a/src/lib/components/sidebar/sidebar-content.svelte b/src/lib/components/sidebar/sidebar-content.svelte
index 16946c4..a12463e 100644
--- a/src/lib/components/sidebar/sidebar-content.svelte
+++ b/src/lib/components/sidebar/sidebar-content.svelte
@@ -14,18 +14,13 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { SidebarBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import type { Override } from '$svelte-atoms/core/types';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 
 	const bond = SidebarBond.get();
-	const preset = getPreset('sidebar.content');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -43,13 +38,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'bg-card border-border',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="sidebar.content"
+	class={['bg-card border-border', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/sidebar/sidebar-root.svelte b/src/lib/components/sidebar/sidebar-root.svelte
index f5313bb..d925d29 100644
--- a/src/lib/components/sidebar/sidebar-root.svelte
+++ b/src/lib/components/sidebar/sidebar-root.svelte
@@ -19,19 +19,14 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
-	import { toClassValue, defineProperty, defineState } 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';
 	import type { Override } from '$svelte-atoms/core/types';
 
-	const preset = getPreset('sidebar');
-
 	let {
 		open = $bindable(false),
 		class: klass = '',
 		disabled = false,
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		factory = _factory,
 		children = undefined,
 		onmount = undefined,
@@ -77,13 +72,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[
-		'flex min-h-full w-full flex-1 flex-nowrap',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="sidebar"
+	class={['flex min-h-full w-full flex-1 flex-nowrap', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/stack/stack-item.svelte b/src/lib/components/stack/stack-item.svelte
index b649c47..5ff2bbf 100644
--- a/src/lib/components/stack/stack-item.svelte
+++ b/src/lib/components/stack/stack-item.svelte
@@ -1,28 +1,9 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
 
-	const preset = getPreset('stack.item');
-
-	let {
-		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
-		children,
-		...restProps
-	} = $props();
+	let { class: klass = '', children, ...restProps } = $props();
 </script>
 
-<HtmlAtom
-	class={[
-		'stack-item flex flex-1',
-		toClassValue.apply(null, [preset?.class, {}]),
-		toClassValue.apply(null, [klass, {}])
-	]}
-	{as}
-	{base}
-	{...restProps}
->
+<HtmlAtom preset="stack.item" class={['stack-item flex flex-1', '$preset', klass]} {...restProps}>
 	{@render children?.()}
 </HtmlAtom>
diff --git a/src/lib/components/stack/stack-root.svelte b/src/lib/components/stack/stack-root.svelte
index 71aab08..560848e 100644
--- a/src/lib/components/stack/stack-root.svelte
+++ b/src/lib/components/stack/stack-root.svelte
@@ -6,32 +6,18 @@
 		type HtmlAtomProps,
 		type Base
 	} from '$svelte-atoms/core/components/atom';
-	import { toClassValue } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
+
 	import './stack.css';
 
 	type Element = ElementType<E>;
 
-	const preset = getPreset('stack.root');
-
 	let {
 		class: klass = '',
-		as = preset?.as,
-		base = preset?.base as B,
 		children,
 		...restProps
 	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
 </script>
 
-<HtmlAtom
-	class={[
-		'stack-root flex flex-1',
-		toClassValue.apply(null, [preset?.class, {}]),
-		toClassValue.apply(null, [klass, {}])
-	]}
-	{as}
-	{base}
-	{...restProps}
->
+<HtmlAtom preset="stack.root" class={['stack-root flex flex-1', '$preset', klass]} {...restProps}>
 	{@render children?.()}
 </HtmlAtom>
diff --git a/src/lib/components/tabs/tab/tab-body.svelte b/src/lib/components/tabs/tab/tab-body.svelte
index f223178..17a3da5 100644
--- a/src/lib/components/tabs/tab/tab-body.svelte
+++ b/src/lib/components/tabs/tab/tab-body.svelte
@@ -9,10 +9,8 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
-	import { TabBond } 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';
+	import { TabBond } from './bond.svelte';
 
 	const bond = TabBond.get();
 
@@ -20,12 +18,8 @@
 		throw new Error('TabBody must be used within a Tab');
 	}
 
-	const preset = getPreset('tab.body');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -49,10 +43,11 @@
 </script>
 
 <HtmlAtom
+	preset="tab.body"
 	class={[
 		'tab-body pointer-events-auto flex h-auto w-full min-w-full flex-1 flex-col',
-		toClassValue.apply(bond, [preset?.class, { bond: bond }]),
-		toClassValue.apply(bond, [klass, { bond: bond }])
+		'$preset',
+		klass
 	]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
@@ -60,8 +55,6 @@
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
-	{as}
-	{base}
 	{...bodyProps}
 >
 	{@render children?.({ tab: bond })}
diff --git a/src/lib/components/tabs/tab/tab-description.svelte b/src/lib/components/tabs/tab/tab-description.svelte
index 13fb155..3423a6d 100644
--- a/src/lib/components/tabs/tab/tab-description.svelte
+++ b/src/lib/components/tabs/tab/tab-description.svelte
@@ -9,18 +9,14 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
 	import type { Snippet } from 'svelte';
-	import { TabBond } from './bond.svelte';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
+	import { TabBond } from './bond.svelte';
 
 	const bond = TabBond.get();
-	const preset = getPreset('tab.description');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('p' as E),
-		base = preset?.base as B,
+		as = 'p' as E,
 		children,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -38,7 +34,9 @@
 </script>
 
 <HtmlAtom
-	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="tab.description"
+	class={['$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
@@ -46,7 +44,6 @@
 	initial={initial?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
 	{as}
-	{base}
 	{...descriptionProps}
 >
 	{@render children?.({ tab: bond })}
diff --git a/src/lib/components/tabs/tab/tab-header.svelte b/src/lib/components/tabs/tab/tab-header.svelte
index b3f0be4..c0526b3 100644
--- a/src/lib/components/tabs/tab/tab-header.svelte
+++ b/src/lib/components/tabs/tab/tab-header.svelte
@@ -14,21 +14,16 @@
 >
 	import type { Snippet } from 'svelte';
 	import { TabBond } 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';
 
 	const bond = TabBond.get();
 
 	const isActive = $derived(bond?.state.isActive);
 	const isDisabled = $derived(bond?.state.props.disabled);
 
-	const preset = getPreset('tab.header');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'button',
-		base = preset?.base as B,
+		as = 'button' as E,
 		children,
 		onpointerdown,
 		onmount = undefined,
@@ -59,13 +54,15 @@
 </script>
 
 <HtmlAtom
+	{bond}
+	preset="tab.header"
 	as="button"
 	class={[
 		'text-foreground/60 hover:text-foreground/80 active:text-foreground/100 flex cursor-pointer items-center px-2 py-2 text-sm font-medium transition-colors duration-100',
 		isActive && 'text-primary',
 		isDisabled && 'opacity-50',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
+		'$preset',
+		klass
 	]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
diff --git a/src/lib/components/tabs/tab/tab-root.svelte b/src/lib/components/tabs/tab/tab-root.svelte
index b851f9c..b77a244 100644
--- a/src/lib/components/tabs/tab/tab-root.svelte
+++ b/src/lib/components/tabs/tab/tab-root.svelte
@@ -5,22 +5,17 @@
 	import { nanoid } from 'nanoid';
 	import { animate as motion } from 'motion';
 	import { TabBond, TabBondState, type TabBondProps } from './bond.svelte';
-	import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import { TabsBond } from '../bond.svelte';
 	import { type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import { Stack } from '$svelte-atoms/core/components/stack';
 
-	const tabsBond = TabsBond.get<D>();
+	const tabsBond = TabsBond.get();
 
 	const headerElement = $derived(tabsBond?.elements.header);
 
-	const preset = getPreset('tab');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		value = nanoid(),
 		disabled = false,
 		data = undefined,
@@ -70,20 +65,15 @@
 
 {#if headerElement && children}
 	<Stack.Item
-		class={[
-			'tab-root flex flex-col',
-			!isActive && 'pointer-events-none',
-			toClassValue.apply(bond, [preset?.class]),
-			toClassValue.apply(bond, [klass])
-		]}
+		{bond}
+		preset="tab"
+		class={['tab-root flex flex-col', !isActive && 'pointer-events-none', '$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)}
-		{as}
-		{base}
 		{...rootProps}
 	>
 		{@render children?.({ tab: bond })}
diff --git a/src/lib/components/tabs/tabs-body.svelte b/src/lib/components/tabs/tabs-body.svelte
index 292eb6c..f74f98d 100644
--- a/src/lib/components/tabs/tabs-body.svelte
+++ b/src/lib/components/tabs/tabs-body.svelte
@@ -1,17 +1,13 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { Stack } from '../stack';
-	import { TabsBond } from './bond.svelte';
-	import { getPreset } from '$svelte-atoms/core/context';
 	import type { Base } from '$svelte-atoms/core/components/atom';
-	import { toClassValue } from '$lib/utils';
+	import { TabsBond } from './bond.svelte';
+	import { Stack } from '../stack';
 
 	const bond = TabsBond.get();
-	const preset = getPreset('tabs.body');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
+		as = 'div' as E,
 		children,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -29,11 +25,9 @@
 </script>
 
 <Stack.Root
-	class={[
-		'tabs-body relative flex-1',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="tabs.body"
+	class={['tabs-body relative flex-1', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}
@@ -41,7 +35,6 @@
 	initial={initial?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
 	{as}
-	{base}
 	{...bodyProps}
 >
 	{@render children?.({ tabs: bond })}
diff --git a/src/lib/components/tabs/tabs-header.svelte b/src/lib/components/tabs/tabs-header.svelte
index 6a7bc3c..dc9ffb0 100644
--- a/src/lib/components/tabs/tabs-header.svelte
+++ b/src/lib/components/tabs/tabs-header.svelte
@@ -1,16 +1,11 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { TabsBond } from './bond.svelte';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
+	import { TabsBond } from './bond.svelte';
 
 	const bond = TabsBond.get();
-	const preset = getPreset('tabs.header');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -28,19 +23,15 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'border-border relative flex min-w-full',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="tabs.header"
+	class={['border-border relative flex min-w-full', '$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)}
-	{as}
-	{base}
 	{...headerProps}
 >
 	{#if children}
diff --git a/src/lib/components/tabs/tabs-root.svelte b/src/lib/components/tabs/tabs-root.svelte
index d667715..690554d 100644
--- a/src/lib/components/tabs/tabs-root.svelte
+++ b/src/lib/components/tabs/tabs-root.svelte
@@ -3,16 +3,11 @@
 	generics="D extends string, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
 >
 	import { TabsBond, TabsBondState, type TabsBondProps } from './bond.svelte';
-	import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
-	import { getPreset } from '$svelte-atoms/core/context';
-
-	const preset = getPreset('tabs');
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		value = $bindable(undefined),
 		factory = _factory,
 		children,
@@ -56,19 +51,15 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'flex w-full flex-1 flex-col gap-2',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="tabs"
+	class={['flex w-full flex-1 flex-col gap-2', '$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)}
-	{as}
-	{base}
 	{...rootProps}
 >
 	{@render children?.({ tabs: bond })}
diff --git a/src/lib/components/textarea/textarea-input.svelte b/src/lib/components/textarea/textarea-input.svelte
index d3041a2..963e3a6 100644
--- a/src/lib/components/textarea/textarea-input.svelte
+++ b/src/lib/components/textarea/textarea-input.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { cn } from '$svelte-atoms/core/utils';
-
 	let { class: klass = '', value = $bindable(), ...restProps } = $props();
 </script>
 
-<textarea class={['w-full outline-none', klass]} bind:value {...restProps}></textarea>
+<textarea class={['w-full outline-none', '$preset', klass]} bind:value {...restProps}></textarea>
diff --git a/src/lib/components/textarea/textarea-root.svelte b/src/lib/components/textarea/textarea-root.svelte
index 7ec7c2a..cc10d05 100644
--- a/src/lib/components/textarea/textarea-root.svelte
+++ b/src/lib/components/textarea/textarea-root.svelte
@@ -4,6 +4,6 @@
 	let { children, ...restProps } = $props();
 </script>
 
-<Input.Root {...restProps}>
+<Input.Root preset="textarea" {...restProps}>
 	{@render children?.()}
 </Input.Root>
diff --git a/src/lib/components/toast/toast-description.svelte b/src/lib/components/toast/toast-description.svelte
index 089a055..e9e6449 100644
--- a/src/lib/components/toast/toast-description.svelte
+++ b/src/lib/components/toast/toast-description.svelte
@@ -9,14 +9,12 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { ToastBond } from './bond';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
 
 	const bond = ToastBond.get();
 
 	let {
 		as = 'p' as T,
-		base = undefined,
 		class: klass = '',
 		children = undefined,
 		onmount = undefined,
@@ -31,8 +29,9 @@
 
 <HtmlAtom
 	{as}
-	{base}
-	class={[toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="toast.description"
+	class={['$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/toast/toast-root.svelte b/src/lib/components/toast/toast-root.svelte
index 97c9f31..44244aa 100644
--- a/src/lib/components/toast/toast-root.svelte
+++ b/src/lib/components/toast/toast-root.svelte
@@ -20,8 +20,6 @@
 
 	let {
 		open = $bindable(false),
-		as = 'div' as T,
-		base = undefined,
 		class: klass = '',
 		disabled = false,
 		extend = {},
@@ -62,9 +60,8 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[toClassValue.apply(bond, [klass])]}
+	{bond}
+	class={['$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/toast/toast-title.svelte b/src/lib/components/toast/toast-title.svelte
index d002b05..731d605 100644
--- a/src/lib/components/toast/toast-title.svelte
+++ b/src/lib/components/toast/toast-title.svelte
@@ -10,15 +10,12 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { ToastBond } from './bond';
-	import { toClassValue } from '$svelte-atoms/core/utils';
 	import { HtmlAtom, type HtmlAtomProps } from '$svelte-atoms/core/components/atom';
 
 	const bond = ToastBond.get();
 
 	let {
-		as = 'div' as T,
 		class: klass = '',
-		base = undefined,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -31,9 +28,9 @@
 </script>
 
 <HtmlAtom
-	{as}
-	{base}
-	class={[toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="toast.title"
+	class={['$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
diff --git a/src/lib/components/tooltip/tooltip-trigger.svelte b/src/lib/components/tooltip/tooltip-trigger.svelte
index 8bab424..2afde6a 100644
--- a/src/lib/components/tooltip/tooltip-trigger.svelte
+++ b/src/lib/components/tooltip/tooltip-trigger.svelte
@@ -32,6 +32,6 @@
 	}
 </script>
 
-<Trigger onmount={tooltip} {...restProps}>
+<Trigger preset="tooltip.trigger" onmount={tooltip} {...restProps}>
 	{@render children?.()}
 </Trigger>
diff --git a/src/lib/components/tree/tree-body.svelte b/src/lib/components/tree/tree-body.svelte
index 084686b..6b4e9b1 100644
--- a/src/lib/components/tree/tree-body.svelte
+++ b/src/lib/components/tree/tree-body.svelte
@@ -12,18 +12,12 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { TreeBond } 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';
 
 	const bond = TreeBond.get();
 
-	const preset = getPreset('tree.body');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -41,15 +35,15 @@
 </script>
 
 <HtmlAtom
-	class={['pl-4', toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	{bond}
+	preset="tree.body"
+	class={['pl-4', '$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}
 	{...bodyProps}
 >
 	{@render children?.({ tree: bond })}
diff --git a/src/lib/components/tree/tree-header.svelte b/src/lib/components/tree/tree-header.svelte
index ef61de2..82b78e5 100644
--- a/src/lib/components/tree/tree-header.svelte
+++ b/src/lib/components/tree/tree-header.svelte
@@ -13,21 +13,15 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { TreeBond } 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';
+	import { TreeBond } from './bond.svelte';
 
 	type Element = HTMLElementTagNameMap[E];
 
 	const bond = TreeBond.get();
 
-	const preset = getPreset('tree.header');
-
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children = undefined,
 		onpointerdown = undefined,
 		onmount = undefined,
@@ -56,11 +50,9 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'cursor-pointer',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="tree.header"
+	class={['cursor-pointer', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
@@ -68,8 +60,6 @@
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
 	onpointerdown={handlePointerDown}
-	{as}
-	{base}
 	{...headerProps}
 >
 	{@render children?.({ tree: bond })}
diff --git a/src/lib/components/tree/tree-indicator.svelte b/src/lib/components/tree/tree-indicator.svelte
index 44ff1f9..eed9e3c 100644
--- a/src/lib/components/tree/tree-indicator.svelte
+++ b/src/lib/components/tree/tree-indicator.svelte
@@ -11,19 +11,13 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { TreeBond, type TreeBondProps } 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';
 
 	const bond = TreeBond.get();
 
-	const preset = getPreset('tree.indicator');
-
 	let {
 		open = $bindable(false),
 		class: klass = '',
-		as = preset?.as ?? ('div' as E),
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -41,19 +35,15 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'aspect-square h-fit',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="tree.indicator"
+	class={['aspect-square h-fit', '$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}
 >
 	{@render children?.({ tree: bond })}
diff --git a/src/lib/components/tree/tree-root.svelte b/src/lib/components/tree/tree-root.svelte
index 0ce7137..f65dabc 100644
--- a/src/lib/components/tree/tree-root.svelte
+++ b/src/lib/components/tree/tree-root.svelte
@@ -16,7 +16,7 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { TreeBond, TreeBondState, type TreeBondProps } 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';
 
@@ -70,11 +70,9 @@
 </script>
 
 <HtmlAtom
-	class={[
-		'flex flex-col',
-		toClassValue.apply(bond, [preset?.class]),
-		toClassValue.apply(bond, [klass])
-	]}
+	{bond}
+	preset="tree"
+	class={['flex flex-col', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	animate={animate?.bind(bond.state)}
diff --git a/src/lib/context/index.ts b/src/lib/context/index.ts
index 5f1ff37..1a21314 100644
--- a/src/lib/context/index.ts
+++ b/src/lib/context/index.ts
@@ -1,5 +1,5 @@
 export {
-	type ModuleName,
+	type PresetModuleName as ModuleName,
 	type Preset,
 	type PresetEntry,
 	getPreset,
diff --git a/src/lib/context/preset.svelte.ts b/src/lib/context/preset.svelte.ts
index c8b612c..4b6d5cf 100644
--- a/src/lib/context/preset.svelte.ts
+++ b/src/lib/context/preset.svelte.ts
@@ -3,7 +3,7 @@ import { merge } from 'es-toolkit';
 import type { ClassValue } from '$svelte-atoms/core/utils';
 import type { Base } from '$svelte-atoms/core/components/atom';
 
-export type ModuleName =
+export type PresetModuleName =
 	| 'accordion'
 	| 'accordion.item.body'
 	| 'accordion.item.header'
@@ -50,7 +50,7 @@ export type ModuleName =
 	| 'field'
 	| 'form'
 	| 'icon'
-	| 'input.root'
+	| 'input'
 	| 'input.value'
 	| 'input.placeholder'
 	| 'label'
@@ -126,16 +126,16 @@ export type PresetEntry = {
 	as?: string;
 	base?: Base;
 };
-export type Preset = Record<ModuleName, PresetEntry>;
+export type Preset = Record<PresetModuleName, PresetEntry>;
 
 const CONTEXT_KEY = '@svelte-atoms/context/preset';
 
-export function getPreset<K extends ModuleName>(key: K): PresetEntry | undefined;
+export function getPreset<K extends PresetModuleName>(key: K): PresetEntry | undefined;
 export function getPreset(): Partial<Preset> | undefined;
 export function getPreset(...args: unknown[]) {
 	const context = getContext<Partial<Preset> | undefined>(CONTEXT_KEY);
 	if (args.length) {
-		const key = args[0] as ModuleName;
+		const key = args[0] as PresetModuleName;
 
 		return context?.[key];
 	}
diff --git a/src/stories/Theme.svelte b/src/stories/Theme.svelte
index 6df840b..4f6f253 100644
--- a/src/stories/Theme.svelte
+++ b/src/stories/Theme.svelte
@@ -12,14 +12,17 @@
 		},
 		accordion: {
 			as: 'ul',
-			class: 'w-full max-w-md rounded-md p-4'
+			class: 'w-full max-w-md rounded-md p-4 accordion-preset'
 		},
 		'accordion.item': {
 			as: 'li',
 			class: 'mb-2 last:mb-0 rounded-md border border-border bg-popover px-2 py-2'
 		},
 		'accordion.item.header': {
-			class: ({ bond }) => [bond.state.isActive ? 'text-foreground/100' : 'text-foreground/50']
+			class: function () {
+				const bond = this;
+				return [bond.state.isActive ? 'text-foreground/100' : 'text-foreground/50'];
+			}
 		},
 		'accordion.item.body': {
 			class: 'overflow-hidden'
@@ -42,9 +45,6 @@
 		'collapsible.body': {
 			class: 'text-sm px-4'
 		},
-		'popover.trigger': {
-			class: 'bg-foreground/5 hover:bg-foreground/10 active:bg-foreground/20 rounded-md p-2 px-4'
-		},
 		'popover.content': {
 			class: ''
 		}

From e75a6ffda3f84043637b84779ea92b16e10ba563 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Thu, 23 Oct 2025 07:00:27 +0800
Subject: [PATCH 03/10] fix: correct binding syntax for class value

---
 src/lib/components/input/input-value.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/input/input-value.svelte b/src/lib/components/input/input-value.svelte
index 6aec439..63b3657 100644
--- a/src/lib/components/input/input-value.svelte
+++ b/src/lib/components/input/input-value.svelte
@@ -96,8 +96,8 @@
 	}
 	class={[
 		'h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
-		toClassValue.bind(bond, preset?.class),
-		toClassValue.bind(bond, klass)
+		toClassValue(bond, preset?.class),
+		toClassValue(bond, klass)
 	]}
 	onchange={handleChange}
 	oninput={handleInput}

From c263149d516c8686f8e26939f7b7c934acef5255 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Thu, 23 Oct 2025 07:00:45 +0800
Subject: [PATCH 04/10] refactor: remove unused props 'as' and 'base'

---
 src/lib/components/combobox/compobox-item.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/lib/components/combobox/compobox-item.svelte b/src/lib/components/combobox/compobox-item.svelte
index c081b71..19da818 100644
--- a/src/lib/components/combobox/compobox-item.svelte
+++ b/src/lib/components/combobox/compobox-item.svelte
@@ -17,8 +17,6 @@
 
 	let {
 		class: klass = '',
-		as = preset?.as ?? 'div',
-		base = preset?.base as B,
 		children = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -55,8 +53,6 @@
 			bond?.state.close();
 		})(node);
 	}}
-	{as}
-	{base}
 	{bond}
 	preset="combobox.item"
 	class={['$preset', klass]}

From 342c946fcc991a380c71f95dfbf7e85296307ab0 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Thu, 23 Oct 2025 07:01:14 +0800
Subject: [PATCH 05/10] fix: simplify binding in accordion item header class
 function

---
 src/stories/Theme.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/stories/Theme.svelte b/src/stories/Theme.svelte
index 4f6f253..537ce8d 100644
--- a/src/stories/Theme.svelte
+++ b/src/stories/Theme.svelte
@@ -20,8 +20,7 @@
 		},
 		'accordion.item.header': {
 			class: function () {
-				const bond = this;
-				return [bond.state.isActive ? 'text-foreground/100' : 'text-foreground/50'];
+				return [this.state.isActive ? 'text-foreground/100' : 'text-foreground/50'];
 			}
 		},
 		'accordion.item.body': {

From 4a6496536b2cde0515e306fc124c681c7ed94661 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Thu, 23 Oct 2025 07:07:33 +0800
Subject: [PATCH 06/10] refactor: reorder imports and update animation handling
 for checkbox indicator

---
 src/lib/components/checkbox/checkbox.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/checkbox/checkbox.svelte b/src/lib/components/checkbox/checkbox.svelte
index a3158e1..96a0fcf 100644
--- a/src/lib/components/checkbox/checkbox.svelte
+++ b/src/lib/components/checkbox/checkbox.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { circOut } from 'svelte/easing';
 	import { scale } from 'svelte/transition';
 	import type { CheckboxProps } from './types';
 	import { Icon } from '$svelte-atoms/core/components/icon';
-	import { DURATION } from '$svelte-atoms/core/shared';
 	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
 	import CheckmarkRegularIcon from '$svelte-atoms/core/icons/icon-checkmark.svelte';
 	import './checkbox.css';
+	import { DURATION } from '$svelte-atoms/core/shared';
+	import { circOut } from 'svelte/easing';
 
 	let {
 		class: klass = '',
@@ -136,8 +136,8 @@
 				class={[
 					'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5'
 				]}
-				enter={scale}
-				enterConfig={{ duration: DURATION.fast, easing: circOut, start: 0.6 }}
+				enter={(node) => scale(node, { duration: DURATION.fast, easing: circOut, start: 0.6 })}
+				exit={(node) => scale(node, { duration: DURATION.fast, easing: circOut, start: 0.6 })}
 			>
 				<Icon class="h-full p-0" src={CheckmarkRegularIcon} />
 			</HtmlAtom>

From 731336458e4853567e08b32a7864a2e27261e391 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Thu, 23 Oct 2025 07:07:42 +0800
Subject: [PATCH 07/10] fix: add base prop to ACombobox.Trigger for proper
 functionality

---
 src/lib/components/combobox/compobox.stories.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/combobox/compobox.stories.svelte b/src/lib/components/combobox/compobox.stories.svelte
index 3c13ad3..56cbb17 100644
--- a/src/lib/components/combobox/compobox.stories.svelte
+++ b/src/lib/components/combobox/compobox.stories.svelte
@@ -34,7 +34,8 @@
 		<ACombobox.Root bind:open bind:value>
 			{#snippet children({ combobox })}
 				<ACombobox.Trigger
-					class="hover:bg-foreground/5 active:bg-foreground/10 h-10 min-w-sm items-center gap-0 rounded-sm p-1 transition-colors duration-200"
+					base={Input.Root}
+					class="h-10 min-w-sm items-center gap-0 rounded-sm p-1 transition-colors duration-200"
 				>
 					<Input.Icon class="text-foreground/50">$</Input.Icon>
 					<Divider class="mx-1" vertical />

From 1194bea476ace275e504cdb8127f13e15d277a55 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Thu, 23 Oct 2025 07:09:57 +0800
Subject: [PATCH 08/10] fix: bind bond to Teleport component for improved
 functionality

---
 src/lib/components/drawer/drawer-root.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/drawer/drawer-root.svelte b/src/lib/components/drawer/drawer-root.svelte
index 6e4e739..69b2165 100644
--- a/src/lib/components/drawer/drawer-root.svelte
+++ b/src/lib/components/drawer/drawer-root.svelte
@@ -94,6 +94,7 @@
 
 <Teleport
 	{as}
+	{bond}
 	portal="root.l1"
 	class={[
 		'pointer-events-auto h-full w-full overflow-hidden bg-transparent',

From 32d6fc506dcc4058df52948e7264fbab7f2d5208 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Thu, 23 Oct 2025 07:16:48 +0800
Subject: [PATCH 09/10] fix: add preset prop to HtmlAtom in drawer-header and
 layer-root components

---
 src/lib/components/drawer/drawer-header.svelte | 1 +
 src/lib/components/layer/layer-root.svelte     | 6 ++----
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/drawer/drawer-header.svelte b/src/lib/components/drawer/drawer-header.svelte
index a904a0f..1ee254b 100644
--- a/src/lib/components/drawer/drawer-header.svelte
+++ b/src/lib/components/drawer/drawer-header.svelte
@@ -41,6 +41,7 @@
 
 <HtmlAtom
 	{bond}
+	preset="drawer.header"
 	class={['$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
diff --git a/src/lib/components/layer/layer-root.svelte b/src/lib/components/layer/layer-root.svelte
index aeed935..a3aad9d 100644
--- a/src/lib/components/layer/layer-root.svelte
+++ b/src/lib/components/layer/layer-root.svelte
@@ -8,15 +8,12 @@
 		type HtmlAtomProps,
 		type Base
 	} from '$svelte-atoms/core/components/atom';
-	import { toClassValue, cn, defineState } from '$svelte-atoms/core/utils';
-	import { getPreset } from '$svelte-atoms/core/context';
+	import { defineState } from '$svelte-atoms/core/utils';
 
 	type Element = ElementType<E>;
 
 	const rootAtom = RootBond.get();
 
-	const preset = getPreset('layer');
-
 	let {
 		class: klass = '',
 		factory = _factory,
@@ -54,6 +51,7 @@
 </script>
 
 <HtmlAtom
+	preset="layer"
 	class={['pointer-events-none absolute inset-0', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}

From 12ab00e7c4fa421fd4ec49287550d1faf02787a8 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Thu, 23 Oct 2025 07:17:19 +0800
Subject: [PATCH 10/10] feat: fix spelling issue in container module name

---
 src/lib/components/contaiener/index.ts                          | 0
 .../{contaiener => container}/container.stories.svelte          | 0
 src/lib/components/{contaiener => container}/container.svelte   | 0
 src/lib/components/container/index.ts                           | 1 +
 src/lib/components/{contaiener => container}/types.ts           | 2 +-
 src/lib/components/index.ts                                     | 1 +
 6 files changed, 3 insertions(+), 1 deletion(-)
 delete mode 100644 src/lib/components/contaiener/index.ts
 rename src/lib/components/{contaiener => container}/container.stories.svelte (100%)
 rename src/lib/components/{contaiener => container}/container.svelte (100%)
 create mode 100644 src/lib/components/container/index.ts
 rename src/lib/components/{contaiener => container}/types.ts (85%)

diff --git a/src/lib/components/contaiener/index.ts b/src/lib/components/contaiener/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/contaiener/container.stories.svelte b/src/lib/components/container/container.stories.svelte
similarity index 100%
rename from src/lib/components/contaiener/container.stories.svelte
rename to src/lib/components/container/container.stories.svelte
diff --git a/src/lib/components/contaiener/container.svelte b/src/lib/components/container/container.svelte
similarity index 100%
rename from src/lib/components/contaiener/container.svelte
rename to src/lib/components/container/container.svelte
diff --git a/src/lib/components/container/index.ts b/src/lib/components/container/index.ts
new file mode 100644
index 0000000..d1b1f7b
--- /dev/null
+++ b/src/lib/components/container/index.ts
@@ -0,0 +1 @@
+export { default as Container } from './container.svelte';
diff --git a/src/lib/components/contaiener/types.ts b/src/lib/components/container/types.ts
similarity index 85%
rename from src/lib/components/contaiener/types.ts
rename to src/lib/components/container/types.ts
index 3a46a5e..ec4cdca 100644
--- a/src/lib/components/contaiener/types.ts
+++ b/src/lib/components/container/types.ts
@@ -1,5 +1,5 @@
-import type { HtmlAtomProps } from '$lib/helpers';
 import type { Snippet } from 'svelte';
+import type { HtmlAtomProps } from '../atom';
 
 export type ContainerProps = HtmlAtomProps<'button'> & {
 	type?: 'inline-size' | 'size';
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 4c81b3a..9bb5a78 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -34,3 +34,4 @@ export * from './dropdown';
 export * from './stack';
 export * from './element';
 export * from './atom';
+export * from './container';