fix: improve animation handling & collapsible story (#11)

* fix: streamline animation handling and remove unused transition states

* fix: remove unused 'as' prop from CollapsibleRoot component

* fix: enhance accessibility and interaction handling in CollapsibleBond header

* fix: replace GSAP with motion for animation handling in Collapsible stories

* fix: remove debug console log from accordion.item.header preset

* fix: remove dynamic state display from Collapsible header

* fix: adjust padding for collapsible components for better spacing

* fix: update composable section header emoji for consistency

* bump version to 1.0.0-alpha.21

* fix: update dev&build commands

* fix: remove npm commands

Author: ryu-man

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.
 
@@ -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 storybook
-   # or
-   npm run storybook
+   bun run storybook:dev
    ```
 
 ### Building
@@ -548,7 +542,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
 ```
 
 ---

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",

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;

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 })}

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({
@@ -35,33 +33,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.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">

src/lib/components/element/html-element.svelte

@@ -23,46 +23,38 @@
 
 	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!);
 		};
 	});
 
 	$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({
 		[createAttachmentKey()]: (n: Element) => {
 			node = n;
 		},
 		class: cn(toClassValue(klass)),
-		onintrostart: () => {
-			hasIntroTransitionStarted = true;
-		},
-		onintroend: () => {
-			hasIntroTransitionStarted = false;
-		},
 		...restProps
 	});
 

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'
@@ -39,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: ''