@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

package/dist/components/drawer/drawer-root.svelte

@@ -1,87 +1,97 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap='dialog', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { defineProperty, defineState } from '../../utils';
-	import Teleport from '../portal/teleport.svelte';
-	import type { Base } from '../atom';
-	import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
-	import type { SlideoverRootProps } from './types';
-	import { ActivePortal } from '../portal';
-	import { animateDrawerRoot } from './motion';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	let {
-		open = $bindable(false),
-		children = undefined,
-		class: klass = '',
-		as = 'div',
-		disabled = false,
-		portal = undefined,
-		onclose = undefined,
-		initial = animateDrawerRoot({ duration: 0 }),
-		animate = animateDrawerRoot({}),
-		factory = _factory,
-		...restProps
-	}: SlideoverRootProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const bondProps = defineState<DrawerBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty('disabled', () => disabled),
-			defineProperty('rest', () => restProps)
-		],
-		() => ({})
-	);
-	const bond = _factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
-
-	$effect(() => {
-		if (bond.elements.root instanceof HTMLDialogElement) {
-			if (open) {
-				bond.elements.root?.show?.();
-			}
-		}
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new DrawerBondState(() => props);
-		const bond = new DrawerBond(bondState);
-
-		return bond;
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<Teleport
-	{as}
-	{bond}
-	portal={portal ?? 'root.l1'}
-	preset="drawer"
-	class={[
-		'border-border pointer-events-none fixed inset-0 h-full w-full overflow-hidden bg-transparent',
-		!open && 'pointer-events-none',
-		'$preset',
-		klass
-	]}
-	closeby="none"
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...rootProps}
->
-	<ActivePortal portal={portal ?? 'root.l1'}>
-		{@render children?.({ drawer: bond })}
-	</ActivePortal>
-</Teleport>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap='dialog', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { defineProperty, defineState } from '../../utils';
+	import Teleport from '../portal/teleport.svelte';
+	import type { Base } from '../atom';
+	import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
+	import type { SlideoverRootProps } from './types';
+	import { ActivePortal, ZLayer } from '../portal';
+	import { animateDrawerRoot } from './motion';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	let {
+		open = $bindable(false),
+		side = 'right',
+		children = undefined,
+		class: klass = '',
+		as = 'div',
+		disabled = false,
+		portal = undefined,
+		"z-index": zindex = 1,
+		onclose = undefined,
+		factory = _factory,
+		fallback = {
+			animate: animateDrawerRoot({}),
+			initial: animateDrawerRoot({ duration: 0 }),
+		},
+		...restProps
+	}: SlideoverRootProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const normalizedZIndex = $derived(
+		typeof zindex === 'number' && Number.isFinite(zindex) ? zindex : undefined
+	);
+	const layer = new ZLayer('drawer', () => normalizedZIndex ?? 0).share();
+
+	const bondProps = defineState<DrawerBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty('disabled', () => disabled),
+			defineProperty('side', () => side),
+			defineProperty('rest', () => restProps)
+		],
+		() => ({})
+	);
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond?.root().spread,
+		...restProps
+	});
+
+	$effect(() => {
+		if (bond.elements.root instanceof HTMLDialogElement) {
+			if (open) {
+				bond.elements.root?.show?.();
+			}
+		}
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new DrawerBondState(() => props);
+		const bond = new DrawerBond(bondState);
+
+		return bond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<Teleport
+	{as}
+	{bond}
+	portal={portal ?? 'root.l0'}
+	preset="drawer"
+	class={[
+		'border-border pointer-events-none fixed inset-0 h-full w-full overflow-hidden bg-transparent',
+		!open && 'pointer-events-none',
+		'$preset',
+		klass
+	]}
+	style="z-index: {layer.get()};"
+	closeby="none"
+	{fallback}
+	{...rootProps}
+>
+	<ActivePortal portal={portal ?? 'root.l0'}>
+		{@render children?.({ drawer: bond })}
+	</ActivePortal>
+</Teleport>

package/dist/components/drawer/drawer-title.svelte

@@ -12,17 +12,11 @@
 		class: klass = '',
 		as = 'h3' as E,
 		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: SlideoverTitleProps<E, B> & HTMLAttributes<Element> = $props();
 
 	const titleProps = $derived({
-		...bond?.title(),
+		...bond?.title().spread,
 		...restProps
 	});
 </script>
@@ -32,12 +26,6 @@
 	{bond}
 	preset="drawer.title"
 	class={['border-border', '$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)}
 	{...titleProps}
 >
 	{@render children?.({ drawer: bond })}

package/dist/components/drawer/motion.d.ts

@@ -1,15 +1,69 @@
-import { type Easing } from 'motion';
+import { type Easing, type Spring } from 'motion';
+export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+type EasingOption = Easing | Easing[] | Spring;
 type AnimateDrawerContentParams = {
+    /** Animation duration in seconds (default: 0.3) */
     duration?: number;
+    /** Delay before animation starts in seconds (default: 0) */
     delay?: number;
-    ease?: Easing | Easing[];
-    side?: 'left' | 'right' | 'top' | 'bottom';
+    /** Easing for open animation (default: smooth deceleration) */
+    easeOpen?: EasingOption;
+    /** Easing for close animation (default: snappy acceleration) */
+    easeClose?: EasingOption;
+    /** Easing override for both open/close */
+    ease?: EasingOption;
+    /** Use spring physics for natural motion (default: false) */
+    spring?: boolean;
+    /** Spring stiffness (default: 300) */
+    stiffness?: number;
+    /** Spring damping (default: 30) */
+    damping?: number;
+    /** Disable pointer events during animation (default: true) */
+    inert?: boolean;
 };
-export declare function animateDrawerContent(params: AnimateDrawerContentParams): (node: HTMLElement) => void;
+/**
+ * Modern drawer animation with smooth sliding and subtle fade
+ *
+ * Features:
+ * - Smooth directional slide from edge
+ * - Subtle opacity fade (0.3 → 1) for depth
+ * - Optimized easing curves for natural feel
+ * - Optional spring physics
+ * - Proper inert handling during animation
+ * - Reads 'side' from Drawer.Root bond automatically
+ *
+ * Improvements over old version:
+ * - Added opacity fade for better visual hierarchy
+ * - Smoother easing curves (custom cubic-bezier)
+ * - Optional spring physics for bouncy feel
+ * - Better duration defaults (0.3s vs 0.5s)
+ * - Cleaner inert management
+ * - Auto-detects side from bond (no manual prop needed)
+ *
+ * @example
+ * ```svelte
+ * <Drawer.Root side="right">
+ *   <Drawer.Content animate={animateDrawerContent()}>
+ * </Drawer.Root>
+ *
+ * <Drawer.Root side="left">
+ *   <Drawer.Content animate={animateDrawerContent({ spring: true })}>
+ * </Drawer.Root>
+ * ```
+ */
+export declare function animateDrawerContent(params?: AnimateDrawerContentParams): (node: HTMLElement) => () => void;
 type AnimateDrawerRootParams = {
+    /** Animation duration in seconds (default: 0.3) */
     duration?: number;
+    /** Delay before animation starts in seconds (default: 0) */
     delay?: number;
-    ease?: Easing | Easing[];
+    /** Easing function (default: smooth in-out) */
+    ease?: EasingOption;
 };
+/**
+ * Backdrop/overlay fade animation for drawer
+ *
+ * Fades the backdrop in/out smoothly when drawer opens/closes
+ */
 export declare function animateDrawerRoot(params?: AnimateDrawerRootParams): (node: HTMLElement) => void;
 export {};

package/dist/components/drawer/motion.js

@@ -1,25 +1,143 @@
-import { animate } from 'motion';
+import { animate, spring } from 'motion';
 import { DURATION } from '../../shared';
 import { DrawerBond } from '.';
-export function animateDrawerContent(params) {
-    const { duration = DURATION.fast / 1000, delay = 0, ease = 'easeInOut', side = 'left' } = params;
-    const bond = DrawerBond.get();
-    const mainProp = side === 'left' || side === 'right' ? 'x' : 'y';
-    const crossProp = mainProp === 'x' ? 'y' : 'x';
-    const d = side === 'left' || side === 'top' ? -1 : 1;
+import { untrack } from 'svelte';
+/**
+ * Modern drawer animation with smooth sliding and subtle fade
+ *
+ * Features:
+ * - Smooth directional slide from edge
+ * - Subtle opacity fade (0.3 → 1) for depth
+ * - Optimized easing curves for natural feel
+ * - Optional spring physics
+ * - Proper inert handling during animation
+ * - Reads 'side' from Drawer.Root bond automatically
+ *
+ * Improvements over old version:
+ * - Added opacity fade for better visual hierarchy
+ * - Smoother easing curves (custom cubic-bezier)
+ * - Optional spring physics for bouncy feel
+ * - Better duration defaults (0.3s vs 0.5s)
+ * - Cleaner inert management
+ * - Auto-detects side from bond (no manual prop needed)
+ *
+ * @example
+ * ```svelte
+ * <Drawer.Root side="right">
+ *   <Drawer.Content animate={animateDrawerContent()}>
+ * </Drawer.Root>
+ *
+ * <Drawer.Root side="left">
+ *   <Drawer.Content animate={animateDrawerContent({ spring: true })}>
+ * </Drawer.Root>
+ * ```
+ */
+export function animateDrawerContent(params = {}) {
+    const { duration = 0.3, delay = 0, ease, easeOpen = [0.16, 1, 0.3, 1], // Smooth deceleration (similar to popover)
+    easeClose = [0.4, 0, 0.6, 1], // Quick acceleration out
+    spring: useSpring = false, stiffness = 280, damping = 28, inert = true } = params;
+    const bond = untrack(() => DrawerBond.get());
+    // Read side from bond (set in Drawer.Root)
+    const side = bond?.state.props.side ?? 'right';
+    const position = getSidePosition(side);
+    const hidden = getHiddenTransform(side);
+    let animated = false;
     return (node) => {
         const isOpen = bond?.state.props.open ?? false;
-        animate(node, {
-            [mainProp]: isOpen ? 0 : d * 100 + '%',
-            [crossProp]: 0,
-            left: 'unset',
-            right: 'unset',
-            [side]: 0
-        }, { duration, ease, delay });
+        // Apply initial hidden state immediately (before any animation)
+        // This prevents FOUC (flash of unstyled content)
+        if (!animated) {
+            node.style.transform = `translate(${hidden.x}, ${hidden.y})`;
+            node.style.opacity = '0.3';
+            Object.assign(node.style, position);
+        }
+        // Disable interactions during animation
+        if (inert) {
+            node.style.pointerEvents = 'none';
+        }
+        let controller;
+        // Initial mount (closed state)
+        if (!animated && !isOpen) {
+            controller = animate(node, {
+                x: hidden.x,
+                y: hidden.y,
+                opacity: 0.3,
+                ...position
+            }, {
+                duration: 0,
+                onComplete: () => {
+                    if (inert)
+                        node.style.pointerEvents = 'auto';
+                }
+            });
+            animated = true;
+        }
+        else {
+            // Animated open/close transition
+            const resolvedEase = ease ?? (isOpen ? easeOpen : easeClose);
+            const keyframes = {
+                x: isOpen ? '0%' : hidden.x,
+                y: isOpen ? '0%' : hidden.y,
+                opacity: isOpen ? 1 : 0.3,
+                ...position
+            };
+            const animationOptions = useSpring
+                ? { easing: spring({ stiffness, damping }), delay }
+                : { duration, ease: resolvedEase, delay };
+            controller = animate(node, keyframes, {
+                ...animationOptions,
+                onComplete: () => {
+                    if (inert) {
+                        node.style.pointerEvents = isOpen ? 'auto' : 'none';
+                    }
+                }
+            });
+        }
+        return () => {
+            controller?.stop();
+            if (inert)
+                node.style.pointerEvents = 'auto';
+        };
     };
 }
+/**
+ * Returns the hidden (offscreen) translate values for each side.
+ * The panel slides in from its edge — e.g. left panel starts at -100% x.
+ */
+function getHiddenTransform(side) {
+    switch (side) {
+        case 'left':
+            return { x: '-100%', y: '0%' };
+        case 'right':
+            return { x: '100%', y: '0%' };
+        case 'top':
+            return { x: '0%', y: '-100%' };
+        case 'bottom':
+            return { x: '0%', y: '100%' };
+    }
+}
+/**
+ * Returns the CSS positioning properties to anchor the panel to its side.
+ */
+function getSidePosition(side) {
+    switch (side) {
+        case 'left':
+            return { top: '0', bottom: '0', left: '0', right: 'unset' };
+        case 'right':
+            return { top: '0', bottom: '0', right: '0', left: 'unset' };
+        case 'top':
+            return { top: '0', left: '0', right: '0', bottom: 'unset' };
+        case 'bottom':
+            return { bottom: '0', left: '0', right: '0', top: 'unset' };
+    }
+}
+/**
+ * Backdrop/overlay fade animation for drawer
+ *
+ * Fades the backdrop in/out smoothly when drawer opens/closes
+ */
 export function animateDrawerRoot(params = {}) {
-    const { duration = DURATION.fast / 1000, delay = 0, ease = 'easeInOut' } = params;
+    const { duration = 0.3, delay = 0, ease = [0.16, 1, 0.3, 1] } = params;
     return (node) => {
         const bond = DrawerBond.get();
         const isOpen = bond?.state.props.open ?? false;

package/dist/components/drawer/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { Override, Factory } from '../../types';
 import type { TransitionFunction } from '../element';
 import type { PortalBond } from '../portal';
@@ -44,43 +44,34 @@ export interface DrawerDescriptionExtendProps {
  */
 export interface DrawerBackdropExtendProps {
 }
-export interface SlideoverRootProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        drawer: DrawerBond;
-    }]>;
+export interface DrawerSnippetProps extends SnippetProps {
+    drawer: DrawerBond;
+}
+export type DrawerChildren = Snippet<[DrawerSnippetProps]>;
+export interface SlideoverRootProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> extends Override<HtmlAtomProps<E, B, DrawerChildren>, {
     initial?: (node: HTMLElement, bond: DrawerBond) => void;
     enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
     exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
 }>, DrawerExtendProps {
+    "z-index"?: number;
     open?: boolean;
     disabled?: boolean;
+    side?: 'left' | 'right' | 'top' | 'bottom';
     portal?: string | PortalBond;
     onclose?: (event: Event, bond: DrawerBond) => void;
     factory?: Factory<DrawerBond>;
 }
-export interface SlideoverContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, DrawerContentExtendProps {
+export interface SlideoverContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DrawerChildren> {
 }
-export interface SlideoverHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        drawer?: DrawerBond;
-    }]>;
-}>, DrawerHeaderExtendProps {
+export interface SlideoverHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DrawerChildren> {
 }
-export interface DrawerBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        drawer?: DrawerBond;
-    }]>;
-}>, DrawerBodyExtendProps {
+export interface DrawerBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DrawerChildren> {
 }
-export interface SlideoverFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        drawer?: DrawerBond;
-    }]>;
-}>, DrawerFooterExtendProps {
+export interface SlideoverFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DrawerChildren> {
 }
-export interface SlideoverTitleProps<E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base> extends HtmlAtomProps<E, B>, DrawerTitleExtendProps {
+export interface SlideoverTitleProps<E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base> extends HtmlAtomProps<E, B, DrawerChildren> {
 }
-export interface SlideoverDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B>, DrawerDescriptionExtendProps {
+export interface SlideoverDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B, DrawerChildren> {
 }
-export interface SlideoverBackdropProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, DrawerBackdropExtendProps {
+export interface SlideoverBackdropProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DrawerChildren> {
 }

package/dist/components/dropdown/atoms.d.ts

@@ -1,8 +1,4 @@
-export { default as Root } from './dropdown-root.svelte';
-export { default as Item } from './item/dropdown-item.svelte';
-export { default as Trigger } from './dropdown-trigger.svelte';
-export { default as Placeholder } from './dropdown-placeholder.svelte';
-export { default as Selection } from './dropdown-selection.svelte';
-export { default as Selections } from './dropdown-selections.svelte';
-export { Arrow, Indicator } from '../popover/atoms';
-export { Content, List, Divider, Title, Group } from '../menu/atoms';
+/**
+ * @deprecated Import from `select` instead. This module will be removed in a future version.
+ */
+export * from '../select/atoms';

package/dist/components/dropdown/atoms.js

@@ -1,9 +1,4 @@
-export { default as Root } from './dropdown-root.svelte';
-export { default as Item } from './item/dropdown-item.svelte';
-export { default as Trigger } from './dropdown-trigger.svelte';
-export { default as Placeholder } from './dropdown-placeholder.svelte';
-// export { default as Query } from './dropdown-query.svelte';
-export { default as Selection } from './dropdown-selection.svelte';
-export { default as Selections } from './dropdown-selections.svelte';
-export { Arrow, Indicator } from '../popover/atoms';
-export { Content, List, Divider, Title, Group } from '../menu/atoms';
+/**
+ * @deprecated Import from `select` instead. This module will be removed in a future version.
+ */
+export * from '../select/atoms';

package/dist/components/dropdown/bond.svelte.d.ts

@@ -1,53 +1,4 @@
-import { MenuBond, MenuBondState, type MenuBondElements, type MenuBondProps } from '../menu/bond.svelte';
-import type { DropdownItemController } from './item/controller.svelte';
-export type DropdownStateProps = MenuBondProps & {
-    values?: string[];
-    value?: string;
-    labels?: string[];
-    label?: string;
-    multiple?: boolean;
-    keys?: string[];
-    readonly rest?: Record<string, unknown>;
-};
-export type DropdownBondElements = MenuBondElements & {
-    placeholder?: HTMLElement;
-};
-export declare class DropdownBond<Props extends DropdownStateProps = DropdownStateProps, State extends DropdownBondState<Props> = DropdownBondState<Props>, Elements extends DropdownBondElements = DropdownBondElements> extends MenuBond<Props, State, Elements> {
-    constructor(state: State);
-    content(): {
-        role: string;
-        'aria-multiselectable': boolean;
-        'aria-activedescendant': string | undefined;
-        'aria-orientation': "vertical";
-        onkeydown: (ev: KeyboardEvent) => void;
-        id: string;
-        'aria-modal': boolean;
-        'aria-labelledby': string;
-        inert: boolean | undefined;
-        tabindex: number;
-        'data-atom': string;
-        'data-kind': string;
-        'data-active': boolean;
-    };
-    item(): {
-        role: string;
-        onkeyup: (ev: KeyboardEvent) => void;
-    };
-    placeholder(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        id: string;
-        role: string;
-        'data-atom': string;
-        'data-kind': string;
-    };
-    static get<Props extends DropdownStateProps = DropdownStateProps, State extends DropdownBondState<Props> = DropdownBondState<Props>, Elements extends DropdownBondElements = DropdownBondElements>(): DropdownBond<Props, State, Elements> | undefined;
-    static set<Props extends DropdownStateProps = DropdownStateProps, State extends DropdownBondState<Props> = DropdownBondState<Props>, Elements extends DropdownBondElements = DropdownBondElements>(context: DropdownBond<Props, State, Elements>): DropdownBond<Props, State, Elements>;
-}
-export declare class DropdownBondState<Props extends DropdownStateProps = DropdownStateProps> extends MenuBondState<Props> {
-    #private;
-    constructor(props: () => Props);
-    get selections(): DropdownItemController<unknown>[];
-    select(ids: string[]): void;
-    unselect(ids: string[]): void;
-    protected updateLabels(): void;
-}
+/**
+ * @deprecated Import from `select/bond.svelte` instead. This module will be removed in a future version.
+ */
+export { SelectBond as DropdownBond, SelectBondState as DropdownBondState, type SelectBondElements as DropdownBondElements, type SelectStateProps as DropdownStateProps } from '../select/bond.svelte';