From 6d25f254f746889379a68cc9242cf6ca33ccb01c Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 07:45:23 +0800
Subject: [PATCH 01/11] fix: streamline animation handling and remove unused
 transition states

---
 .../components/element/html-element.svelte    | 20 ++++++-------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/element/html-element.svelte b/src/lib/components/element/html-element.svelte
index c7108b1..0dc51a5 100644
--- a/src/lib/components/element/html-element.svelte
+++ b/src/lib/components/element/html-element.svelte
@@ -23,18 +23,13 @@
 
 	let node = $state<Element>();
 
-	let hasIntroTransitionStarted: boolean | undefined = $state(undefined);
-	let skipFirstAnimate = true;
+	let skipFirstAnimate = $state(!!enter);
 
 	$effect(() => {
 		if (!node) return;
 
 		const unmount = untrack(() => onmount?.(node!));
 
-		if (!enter || typeof hasIntroTransitionStarted === 'undefined') {
-			skipFirstAnimate = false;
-		}
-
 		return () => {
 			if (typeof unmount === 'function') unmount(node!);
 			ondestroy?.(node!);
@@ -42,14 +37,17 @@
 	});
 
 	$effect(() => {
+		const fn = animate;
+
 		if (!node) return;
+		const shouldSkip = untrack(() => skipFirstAnimate);
 
-		if (skipFirstAnimate) {
+		if (shouldSkip) {
 			skipFirstAnimate = false;
 			return;
 		}
 
-		animate?.(node);
+		fn?.(node);
 	});
 
 	const elementProps = $derived({
@@ -57,12 +55,6 @@
 			node = n;
 		},
 		class: cn(toClassValue(klass)),
-		onintrostart: () => {
-			hasIntroTransitionStarted = true;
-		},
-		onintroend: () => {
-			hasIntroTransitionStarted = false;
-		},
 		...restProps
 	});
 

From b2f177fdef82a06dbcd8279655f0a75b7c114e0d Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 07:45:39 +0800
Subject: [PATCH 02/11] fix: remove unused 'as' prop from CollapsibleRoot
 component

---
 src/lib/components/collapsible/collapsible-root.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/components/collapsible/collapsible-root.svelte b/src/lib/components/collapsible/collapsible-root.svelte
index f9137e2..1ea283f 100644
--- a/src/lib/components/collapsible/collapsible-root.svelte
+++ b/src/lib/components/collapsible/collapsible-root.svelte
@@ -30,7 +30,6 @@
 		value = nanoid(),
 		data = undefined,
 		disabled = false,
-		as = 'div' as E,
 		factory = _factory,
 		children = undefined,
 		onmount = undefined,
@@ -71,16 +70,15 @@
 </script>
 
 <HtmlAtom
+	{bond}
 	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)}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}
-	{as}
 	{...rootProps}
 >
 	{@render children?.({ collapsible: bond })}

From d3f32406d53e2904cbfe18710c059d78ee3ea173 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 07:50:24 +0800
Subject: [PATCH 03/11] fix: enhance accessibility and interaction handling in
 CollapsibleBond header

---
 src/lib/components/collapsible/bond.svelte.ts | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/collapsible/bond.svelte.ts b/src/lib/components/collapsible/bond.svelte.ts
index 9f015ab..2fc792c 100644
--- a/src/lib/components/collapsible/bond.svelte.ts
+++ b/src/lib/components/collapsible/bond.svelte.ts
@@ -50,19 +50,31 @@ export class CollapsibleBond extends Bond<
 	}
 
 	header(props: Record<string, unknown> = {}) {
+		const isDisabled = this.state?.props?.disabled ?? false;
+		const isOpen = this.state?.props?.open ?? false;
+		const isButton = this.elements.header instanceof HTMLButtonElement;
+
 		return {
-			'aria-disabled': this.state?.props?.disabled ?? false,
-			'aria-expanded': this.state?.props?.open ?? false,
+			'aria-disabled': isDisabled ? 'true' : 'false',
+			'aria-expanded': isOpen ? 'true' : 'false',
 			'aria-controls': `collapsible-body-${this.id}`,
-			disabled: this.elements.header instanceof HTMLButtonElement ? this.state?.props.disabled : '',
-			role: this.elements.header instanceof HTMLButtonElement ? undefined : 'button',
-			tabindex: this.state?.props?.open ? 0 : -1, // Make focusable if open
+			disabled: isButton ? isDisabled : undefined,
+			role: isButton ? undefined : 'button',
+			tabindex: isButton ? undefined : isDisabled ? -1 : 0,
 			id: `collapsible-header-${this.id}`,
 			'data-atom': this.id ?? '',
 			'data-kind': 'collapsible-header',
 			...props,
 			onclick: () => {
-				this.state.toggle();
+				if (!isDisabled) {
+					this.state.toggle();
+				}
+			},
+			onkeydown: (e: KeyboardEvent) => {
+				if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
+					e.preventDefault();
+					this.state.toggle();
+				}
 			},
 			[createAttachmentKey()]: (node: HTMLElement) => {
 				this.elements.header = node;
@@ -71,13 +83,15 @@ export class CollapsibleBond extends Bond<
 	}
 
 	body(props: Record<string, unknown> = {}) {
+		const isOpen = this.state?.props?.open ?? false;
+
 		return {
 			'aria-labelledby': `collapsible-header-${this.id}`,
-			'aria-hidden': !this.state?.props?.open, // Hide when closed
-			role: 'region', // Announce as a region
+			role: 'region',
 			id: `collapsible-body-${this.id}`,
 			'data-atom': this.id ?? '',
 			'data-kind': 'collapsible-body',
+			inert: isOpen ? undefined : true,
 			...props,
 			[createAttachmentKey()]: (node: HTMLElement) => {
 				this.elements.body = node;

From a3397c88f1e99de3589908e250ebb0778dbe5d1a Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 07:51:00 +0800
Subject: [PATCH 04/11] fix: replace GSAP with motion for animation handling in
 Collapsible stories

---
 .../collapsible/collapsible.stories.svelte    | 146 +++++++++---------
 1 file changed, 72 insertions(+), 74 deletions(-)

diff --git a/src/lib/components/collapsible/collapsible.stories.svelte b/src/lib/components/collapsible/collapsible.stories.svelte
index b8977b8..cd9eb5c 100644
--- a/src/lib/components/collapsible/collapsible.stories.svelte
+++ b/src/lib/components/collapsible/collapsible.stories.svelte
@@ -1,11 +1,9 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import { Collapsible as ACollapsible } from '.';
-	import { Root as CoolapsibleRoot } from './atoms';
 	import Root from '$svelte-atoms/core/components/root/root.svelte';
-	import gsap from 'gsap';
-	import { linear } from 'svelte/easing';
-	import { toTransitionConfig } from '$svelte-atoms/core/utils/gsap';
+
+	import { animate as motion } from 'motion';
 
 	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 	const { Story } = defineMeta({
@@ -30,38 +28,39 @@
 				{@const isOpen = collapsible.state.props.open}
 
 				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 1</div>
+					<div>Hello Atoms UI 1 {isOpen}</div>
 					<ACollapsible.Indicator />
 				</ACollapsible.Header>
 
 				<ACollapsible.Body
-					initial={(node) => {
-						gsap.set(node, {
-							opacity: 0,
-							height: 0,
-							pointerEvents: isOpen ? 'all' : 'none'
-						});
-					}}
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
 					enter={(node) => {
-						const tween = gsap.to(node, {
-							opacity: +isOpen,
-							height: isOpen ? 'auto' : 0,
-							duration: 0.2,
-							ease: linear
-						});
-						return toTransitionConfig(tween);
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
 					}}
 					exit={(node) => {
-						const tween = gsap.to(node, { opacity: 0, height: 0, duration: 0.2, ease: linear });
-						return toTransitionConfig(tween);
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
 					}}
 					animate={(node) => {
-						gsap.to(node, {
-							opacity: +isOpen,
-							height: isOpen ? 'auto' : 0,
-							pointerEvents: isOpen ? 'all' : 'none',
-							duration: 0.1
-						});
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.2, ease: 'linear' }
+						);
 					}}
 				>
 					<div class="py-2">
@@ -83,35 +82,34 @@
 				</ACollapsible.Header>
 
 				<ACollapsible.Body
-					initial={(node) => {
-						gsap.set(node, {
-							opacity: 0,
-							height: 0,
-							pointerEvents: isOpen ? 'all' : 'none'
-						});
-					}}
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
 					enter={(node) => {
-						const tween = gsap.to(node, {
-							opacity: +isOpen,
-							height: isOpen ? 'auto' : 0,
-							duration: 0.2,
-							ease: linear
-						});
-
-						return toTransitionConfig(tween);
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
 					}}
 					exit={(node) => {
-						const tween = gsap.to(node, { opacity: 0, height: 0, duration: 0.2, ease: linear });
-
-						return toTransitionConfig(tween);
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
 					}}
 					animate={(node) => {
-						gsap.to(node, {
-							opacity: +isOpen,
-							height: isOpen ? 'auto' : 0,
-							pointerEvents: isOpen ? 'all' : 'none',
-							duration: 0.1
-						});
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.1, ease: 'linear' }
+						);
 					}}
 				>
 					<div class="py-2">
@@ -133,34 +131,34 @@
 				</ACollapsible.Header>
 
 				<ACollapsible.Body
-					initial={(node) => {
-						gsap.set(node, {
-							opacity: +isOpen,
-							height: isOpen ? 'auto' : 0,
-							pointerEvents: isOpen ? 'all' : 'none'
-						});
-					}}
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
 					enter={(node) => {
-						const tween = gsap.to(node, {
-							opacity: +isOpen,
-							height: 'auto',
-							duration: 0.2,
-							ease: linear
-						});
-
-						return toTransitionConfig(tween);
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
 					}}
 					exit={(node) => {
-						const tween = gsap.to(node, { opacity: 0, height: 0, duration: 0.2, ease: linear });
-						return toTransitionConfig(tween);
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
 					}}
 					animate={(node) => {
-						gsap.to(node, {
-							opacity: +isOpen,
-							height: isOpen ? 'auto' : 0,
-							pointerEvents: isOpen ? 'all' : 'none',
-							duration: 0.1
-						});
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.1, ease: 'linear' }
+						);
 					}}
 				>
 					<div class="py-2">

From 4d118c4b9e132108811858e039e518098c5ad644 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 07:51:48 +0800
Subject: [PATCH 05/11] fix: remove debug console log from
 accordion.item.header preset

---
 src/stories/Theme.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/stories/Theme.svelte b/src/stories/Theme.svelte
index 40b01f0..d045c53 100644
--- a/src/stories/Theme.svelte
+++ b/src/stories/Theme.svelte
@@ -19,7 +19,6 @@
 			class: 'mb-2 last:mb-0 rounded-md border border-border bg-popover px-2 py-2'
 		}),
 		'accordion.item.header': (bond) => {
-			console.log('bond in preset:', bond);
 			return defineState([
 				defineProperty('class', () => [
 					bond?.state?.isActive ? 'text-foreground/100' : 'text-foreground/50'

From 79a436575226c17276ce87b4bb14329c87e8cce3 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 07:54:17 +0800
Subject: [PATCH 06/11] fix: remove dynamic state display from Collapsible
 header

---
 src/lib/components/collapsible/collapsible.stories.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/collapsible/collapsible.stories.svelte b/src/lib/components/collapsible/collapsible.stories.svelte
index cd9eb5c..f06ce9c 100644
--- a/src/lib/components/collapsible/collapsible.stories.svelte
+++ b/src/lib/components/collapsible/collapsible.stories.svelte
@@ -28,7 +28,7 @@
 				{@const isOpen = collapsible.state.props.open}
 
 				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 1 {isOpen}</div>
+					<div>Hello Atoms UI 1</div>
 					<ACollapsible.Indicator />
 				</ACollapsible.Header>
 

From 714557a85e2734d6e7313cbbd765cfd74a907fe3 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 07:55:44 +0800
Subject: [PATCH 07/11] fix: adjust padding for collapsible components for
 better spacing

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

diff --git a/src/stories/Theme.svelte b/src/stories/Theme.svelte
index d045c53..38e1661 100644
--- a/src/stories/Theme.svelte
+++ b/src/stories/Theme.svelte
@@ -38,13 +38,13 @@
 			class: 'pr-2 pl-4'
 		}),
 		collapsible: () => ({
-			class: 'max-w-md rounded-md border border-border'
+			class: 'max-w-md rounded-md border border-border p-2'
 		}),
 		'collapsible.header': () => ({
-			class: 'px-4 py-2 hover:bg-foreground/5 active:bg-foreground/10 flex cursor-pointer'
+			class: 'px-2 py-2 hover:bg-foreground/5 active:bg-foreground/10 flex cursor-pointer rounded'
 		}),
 		'collapsible.body': () => ({
-			class: 'text-sm px-4'
+			class: 'text-sm px-2'
 		}),
 		'popover.content': () => ({
 			class: ''

From ba7261ee29b00bb2c597bb49e947f773cfc20213 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 07:56:32 +0800
Subject: [PATCH 08/11] fix: update composable section header emoji for
 consistency

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7a9bbf4..b4b01da 100644
--- a/README.md
+++ b/README.md
@@ -40,7 +40,7 @@ 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**
+### 🧩 **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.
 

From 3216113a081eb3de8000a59944b9fe24fd0c12d7 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 07:57:41 +0800
Subject: [PATCH 09/11] bump version to 1.0.0-alpha.21

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

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

From 1ab3b90752bfee0f633b7d7ddfa506a0b52992be Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 08:00:09 +0800
Subject: [PATCH 10/11] fix: update dev&build commands

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index b4b01da..dc1bcf6 100644
--- a/README.md
+++ b/README.md
@@ -536,9 +536,9 @@ This example demonstrates the power of component composition by combining `Dropd
 
 4. **Run Storybook:**
    ```bash
-   bun storybook
+   bun run storybook:dev
    # or
-   npm run storybook
+   npm run storybook:dev
    ```
 
 ### Building
@@ -548,7 +548,7 @@ This example demonstrates the power of component composition by combining `Dropd
 bun run build
 
 # Build Storybook
-bun run build-storybook
+bun run storybook:build
 ```
 
 ---

From bda261767c98db07c9685f8448713437d0007d1b Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 24 Oct 2025 08:00:58 +0800
Subject: [PATCH 11/11] fix: remove npm commands

---
 README.md | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/README.md b/README.md
index dc1bcf6..1341bbb 100644
--- a/README.md
+++ b/README.md
@@ -522,23 +522,17 @@ This example demonstrates the power of component composition by combining `Dropd
 
    ```bash
    bun install
-   # or
-   npm install
    ```
 
 3. **Start development server:**
 
    ```bash
    bun dev
-   # or
-   npm run dev
    ```
 
 4. **Run Storybook:**
    ```bash
    bun run storybook:dev
-   # or
-   npm run storybook:dev
    ```
 
 ### Building