From 105fc6ee60fb6e4e724145783fab843105ed54c4 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 05:26:39 +0800
Subject: [PATCH 1/8] fix: update value type in InputProps to ClassValue and
 improve class binding

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

diff --git a/src/lib/components/input/input-value.svelte b/src/lib/components/input/input-value.svelte
index 21bdb46..93f5b7d 100644
--- a/src/lib/components/input/input-value.svelte
+++ b/src/lib/components/input/input-value.svelte
@@ -2,7 +2,7 @@
 	export type InputPortals = 'input.l0' | 'input.l1' | 'input.l2' | 'input.l3';
 
 	export type InputProps = {
-		value?: string;
+		value?: ClassValue;
 		files?: File[];
 		date?: Date | null;
 		number?: number;
@@ -19,7 +19,7 @@
 	import type { HTMLInputTypeAttribute } from 'svelte/elements';
 	import { on } from '$svelte-atoms/core/attachments/event.svelte';
 	import { getPreset } from '$svelte-atoms/core/context';
-	import { toClassValue } from '$svelte-atoms/core/utils';
+	import { cn, toClassValue, type ClassValue } from '$svelte-atoms/core/utils';
 	import type { PresetModuleName } from '$svelte-atoms/core/context/preset.svelte';
 	import { InputBond } from './bond.svelte';
 
@@ -94,11 +94,11 @@
 			}
 		}
 	}
-	class={[
+	class={cn(
 		'h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
 		preset?.class,
-		toClassValue(bond, klass)
-	]}
+		toClassValue(klass, bond)
+	)}
 	onchange={handleChange}
 	oninput={handleInput}
 	{...valueProps}

From 374a43143a30e58bfc26db073c46217352b88b78 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 05:27:04 +0800
Subject: [PATCH 2/8] fix: ensure proper binding in toClassValue calls for
 class handling

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

diff --git a/src/lib/components/atom/html-atom.svelte b/src/lib/components/atom/html-atom.svelte
index b958d72..483ef6f 100644
--- a/src/lib/components/atom/html-atom.svelte
+++ b/src/lib/components/atom/html-atom.svelte
@@ -38,11 +38,11 @@
 					return cls.replace('$preset', cn(preset?.class));
 				}
 
-				return toClassValue.apply(bond, [cls]);
+				return toClassValue.apply(bond, [cls, bond]);
 			});
 		}
 
-		return [preset?.class ?? '', toClassValue.apply(bond, [klass])];
+		return [preset?.class ?? '', toClassValue.apply(bond, [klass, bond])];
 	});
 
 	const _base = $derived(base ?? preset?.base);

From 1560cbca069c8d25a5bb591c28d00e2c8fd25a4d Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 05:29:08 +0800
Subject: [PATCH 3/8] fix: refine class binding in dropdown query component and
 remove unused imports

---
 src/lib/components/dropdown/dropdown-query.svelte | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/dropdown/dropdown-query.svelte b/src/lib/components/dropdown/dropdown-query.svelte
index fd7b5c0..b2ddf7d 100644
--- a/src/lib/components/dropdown/dropdown-query.svelte
+++ b/src/lib/components/dropdown/dropdown-query.svelte
@@ -1,8 +1,7 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', S extends Shell = Shell">
-	import { onMount, type Component } from 'svelte';
+	import { onMount } from 'svelte';
 	import { DropdownBond } from './bond.svelte';
 	import { Input } from '$svelte-atoms/core/components/input';
-	import { toClassValue, cn } from '$svelte-atoms/core/utils';
 
 	const bond = DropdownBond.get() as DropdownBond;
 
@@ -41,14 +40,9 @@
 
 <Input.Value
 	bind:value={bond.state.query}
-	preset="dropdown.query"
-	class={['inline-flex w-min flex-1 py-1', '$preset', klass]}
 	{bond}
-	onpointerdown={(ev) => {
-		ev.stopPropagation();
-
-		bond.state.open();
-	}}
+	preset="dropdown.query"
+	class={['inline-flex h-auto w-auto flex-1 py-1', '$preset', klass]}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
 	enter={enter?.bind(bond.state)}

From 3f3c161e8e0868c2d6b7c3b225bef101e638f3ba Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 05:30:11 +0800
Subject: [PATCH 4/8] fix: update dropdown story with new data and improve
 trigger functionality

---
 .../dropdown/dropdown.stories.svelte          | 71 +++++++++++--------
 1 file changed, 42 insertions(+), 29 deletions(-)

diff --git a/src/lib/components/dropdown/dropdown.stories.svelte b/src/lib/components/dropdown/dropdown.stories.svelte
index b20e3c2..b84ac13 100644
--- a/src/lib/components/dropdown/dropdown.stories.svelte
+++ b/src/lib/components/dropdown/dropdown.stories.svelte
@@ -1,7 +1,6 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import { Dropdown as ADropdown } from '.';
-	import { Root as DropdownRoot } from './atoms';
 	import Root from '$svelte-atoms/core/components/root/root.svelte';
 	import { Input } from '$svelte-atoms/core/components/input';
 	import { flip } from 'svelte/animate';
@@ -24,10 +23,11 @@
 	let open = $state(false);
 
 	const data = $state([
-		{ id: '1', value: 'ar', text: 'Arabic' },
-		{ id: '2', value: 'en', text: 'English' },
-		{ id: '3', value: 'sp', text: 'Spanish' },
-		{ id: '4', value: 'it', text: 'Italian' }
+		{ id: 1, value: 'apple', text: 'Apple' },
+		{ id: 2, value: 'banana', text: 'Banana' },
+		{ id: 3, value: 'cherry', text: 'Cherry' },
+		{ id: 4, value: 'date', text: 'Date' },
+		{ id: 5, value: 'elderberry', text: 'Elderberry' }
 	]);
 
 	const dd = filter(
@@ -38,37 +38,50 @@
 
 <Story name="Dropdown" args={{}}>
 	<Root class="items-center justify-center p-4">
+		<!-- Multi-select dropdown with search functionality -->
 		<ADropdown.Root
 			bind:open
 			keys={data.map((item) => item.value)}
 			multiple
 			onquerychange={(q) => (dd.query = q)}
 		>
-			<ADropdown.Trigger
-				base={Input.Root}
-				class="hover:bg-foreground/5 active:bg-foreground/10 max-w-sm min-w-sm items-center gap-2 rounded-sm px-4 transition-colors duration-200"
-			>
-				<ADropdown.Values>
-					{#snippet children({ items })}
-						{#each items as item (item.id)}
-							<div animate:flip={{ duration: 200 }}>
-								<ADropdown.Value value={item.value} class="text-foreground/80"
-									>{item.text} - {item.value}</ADropdown.Value
-								>
-							</div>
-						{/each}
-					{/snippet}
-				</ADropdown.Values>
+			{#snippet children({ dropdown })}
+				<!-- Compose ADropdown.Trigger with Input.Root for a custom trigger -->
+				<ADropdown.Trigger
+					base={Input.Root}
+					class="h-auto min-h-12 max-w-sm min-w-sm items-center gap-2 rounded-sm px-4 transition-colors duration-200"
+					onclick={(ev) => {
+						ev.preventDefault();
 
-				<ADropdown.Query class="flex-1 px-1" placeholder={'Search for items'} />
-			</ADropdown.Trigger>
-			<ADropdown.List>
-				{#each dd.current as item (item.id)}
-					<div animate:flip={{ duration: 200 }}>
-						<ADropdown.Item value={item.value}>{item.text}</ADropdown.Item>
-					</div>
-				{/each}
-			</ADropdown.List>
+						dropdown.state.open();
+					}}
+				>
+					<!-- Display selected values with animation -->
+					<ADropdown.Values>
+						{#snippet children({ items })}
+							{#each items as item (item.id)}
+								<div animate:flip={{ duration: 200 }}>
+									<ADropdown.Value value={item.value} class="text-foreground/80">
+										{item.text}
+									</ADropdown.Value>
+								</div>
+							{/each}
+						{/snippet}
+					</ADropdown.Values>
+
+					<!-- Inline search input within the trigger -->
+					<ADropdown.Query class="flex-1 px-1" placeholder="Search for fruits..." />
+				</ADropdown.Trigger>
+
+				<!-- ADropdown list with filtered items -->
+				<ADropdown.List>
+					{#each dd.current as item (item.id)}
+						<div animate:flip={{ duration: 200 }}>
+							<ADropdown.Item value={item.value}>{item.text}</ADropdown.Item>
+						</div>
+					{/each}
+				</ADropdown.List>
+			{/snippet}
 		</ADropdown.Root>
 	</Root>
 </Story>

From 28fec2ea40b31ed2d71a312c19f9bd7128115a2c Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 05:35:38 +0800
Subject: [PATCH 5/8] fix: add missing line breaks for improved readability in
 dropdown index file

---
 src/lib/components/dropdown/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/components/dropdown/index.ts b/src/lib/components/dropdown/index.ts
index 95e3f6e..c9c7f67 100644
--- a/src/lib/components/dropdown/index.ts
+++ b/src/lib/components/dropdown/index.ts
@@ -1,7 +1,10 @@
 export * as Dropdown from './atoms';
+
 export {
 	DropdownBond,
 	type DropdownBondElements,
 	DropdownBondState,
 	type DropdownStateProps
 } from './bond.svelte';
+
+export { filter } from './runes.svelte';

From 7a5d2414d64a83ec9b8a47dea0bd87f3747bb78d Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 05:40:46 +0800
Subject: [PATCH 6/8] fix: simplify selected items rendering in dropdown
 trigger

---
 .../dropdown/dropdown.stories.svelte           | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/dropdown/dropdown.stories.svelte b/src/lib/components/dropdown/dropdown.stories.svelte
index b84ac13..877eb98 100644
--- a/src/lib/components/dropdown/dropdown.stories.svelte
+++ b/src/lib/components/dropdown/dropdown.stories.svelte
@@ -57,17 +57,13 @@
 					}}
 				>
 					<!-- Display selected values with animation -->
-					<ADropdown.Values>
-						{#snippet children({ items })}
-							{#each items as item (item.id)}
-								<div animate:flip={{ duration: 200 }}>
-									<ADropdown.Value value={item.value} class="text-foreground/80">
-										{item.text}
-									</ADropdown.Value>
-								</div>
-							{/each}
-						{/snippet}
-					</ADropdown.Values>
+					{#each dropdown?.state?.selectedItems ?? [] as item (item.id)}
+						<div animate:flip={{ duration: 200 }}>
+							<ADropdown.Value value={item.value} class="text-foreground/80">
+								{item.text}
+							</ADropdown.Value>
+						</div>
+					{/each}
 
 					<!-- Inline search input within the trigger -->
 					<ADropdown.Query class="flex-1 px-1" placeholder="Search for fruits..." />

From bd4ce52ff526b153dbb45a3b284e6415833a8e20 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 05:41:00 +0800
Subject: [PATCH 7/8] docs: enhance README with composability section and
 advanced usage example

---
 README.md | 83 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)

diff --git a/README.md b/README.md
index 317a885..7a9bbf4 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,10 @@ Leverages Svelte's fine-grained reactivity system for optimal performance and sm
 
 Components are headless by default, giving you complete control over styling while providing sensible defaults.
 
+### 🎨 **Composable**
+
+Build complex UIs by combining simple, reusable components. Each component is designed to work seamlessly with others through the Bond pattern and context API. Create sophisticated features like multi-level dropdowns, nested accordions, or custom form controls by composing atomic components together.
+
 ---
 
 ## 📦 Available Components
@@ -268,6 +272,85 @@ For more control, you can use the Bond system directly:
 </div>
 ```
 
+### Advanced Usage With Composition
+
+This example demonstrates the power of component composition by combining `Dropdown`, `Input`, and animation capabilities to create a searchable multi-select dropdown with smooth transitions:
+
+```svelte
+<script lang="ts">
+	import { Dropdown, Input, Root, filter } from '@svelte-atoms/core';
+	import { flip } from 'svelte/animate';
+
+	// Sample data
+	let data = [
+		{ id: 1, value: 'apple', text: 'Apple' },
+		{ id: 2, value: 'banana', text: 'Banana' },
+		{ id: 3, value: 'cherry', text: 'Cherry' },
+		{ id: 4, value: 'date', text: 'Date' },
+		{ id: 5, value: 'elderberry', text: 'Elderberry' }
+	];
+
+	let open = $state(false);
+	// Filter items based on search query
+	const dd = filter(
+		() => data,
+		(query, item) => item.text.toLowerCase().includes(query.toLowerCase())
+	);
+</script>
+
+<Root class="items-center justify-center p-4">
+	<!-- Multi-select dropdown with search functionality -->
+	<Dropdown.Root
+		bind:open
+		multiple
+		keys={data.map((item) => item.value)}
+		onquerychange={(q) => (dd.query = q)}
+	>
+		{#snippet children({ dropdown })}
+			<!-- Compose Dropdown.Trigger with Input.Root for a custom trigger -->
+			<Dropdown.Trigger
+				base={Input.Root}
+				class="h-auto min-h-12 max-w-sm min-w-sm items-center gap-2 rounded-sm px-4 transition-colors duration-200"
+				onclick={(ev) => {
+					ev.preventDefault();
+
+					dropdown.state.open();
+				}}
+			>
+				<!-- Display selected values with animation -->
+				{#each dropdown?.state?.selectedItems ?? [] as item (item.id)}
+					<div animate:flip={{ duration: 200 }}>
+						<ADropdown.Value value={item.value} class="text-foreground/80">
+							{item.text}
+						</ADropdown.Value>
+					</div>
+				{/each}
+
+				<!-- Inline search input within the trigger -->
+				<Dropdown.Query class="flex-1 px-1" placeholder="Search for fruits..." />
+			</Dropdown.Trigger>
+
+			<!-- Dropdown list with filtered items -->
+			<Dropdown.List>
+				{#each dd.current as item (item.id)}
+					<div animate:flip={{ duration: 200 }}>
+						<Dropdown.Item value={item.value}>{item.text}</Dropdown.Item>
+					</div>
+				{/each}
+			</Dropdown.List>
+		{/snippet}
+	</Dropdown.Root>
+</Root>
+```
+
+**Key composition features demonstrated:**
+
+- **Component Fusion**: Using `base={Input.Root}` to compose Dropdown.Trigger with Input styling and behavior
+- **Snippet Patterns**: Accessing internal state through snippets for custom rendering
+- **Reactive Filtering**: Combining search query state with reactive effects for real-time filtering
+- **Smooth Animations**: Using Svelte's `flip` animation for seamless list transitions
+- **Multi-Select State**: Managing complex selection state through the Bond pattern
+
 ---
 
 ## 📖 Documentation

From 9f14f7142d50cf7e5e5c226bb3ad47e7099f9279 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 05:46:31 +0800
Subject: [PATCH 8/8] bump version to 1.0.0-alpha.20

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a5b4111..c7ad7bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@svelte-atoms/core",
-	"version": "1.0.0-alpha.19",
+	"version": "1.0.0-alpha.20",
 	"description": "A modular, accessible, and extensible Svelte UI component library.",
 	"repository": {
 		"type": "git",