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

package/dist/components/scrollable/scrollable-content.svelte

@@ -8,12 +8,6 @@
 	let {
 		class: klass = '',
 		children,
-		onmount,
-		ondestroy,
-		animate,
-		enter,
-		exit,
-		initial,
 		...restProps
 	}: ScrollableContentProps<E, B> = $props();
 
@@ -32,12 +26,6 @@
 	as="div"
 	preset="scrollable.content"
 	class={['scrollable-content border-border h-full max-h-full', '$preset', klass]}
-	{enter}
-	{exit}
-	{initial}
-	{animate}
-	{onmount}
-	{ondestroy}
 	{...contentProps}
 >
 	{#if children}

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

@@ -16,12 +16,6 @@
 		open = true,
 		factory = _factory,
 		children,
-		onmount,
-		ondestroy,
-		animate,
-		enter,
-		exit,
-		initial,
 		...restProps
 	}: ScrollableRootProps<E, B> = $props();
 
@@ -94,12 +88,6 @@
 	as="div"
 	preset="scrollable"
 	class={['scrollable-root border-border relative box-content overflow-hidden', '$preset', klass]}
-	{enter}
-	{exit}
-	{initial}
-	{animate}
-	{onmount}
-	{ondestroy}
 	{...rootProps}
 >
 	{@render children?.({ scrollable: bond })}

package/dist/components/scrollable/scrollable-thumb.svelte

@@ -7,12 +7,7 @@
 		class: klass = '',
 		children,
 		orientation = 'vertical',
-		onmount,
-		ondestroy,
-		animate,
-		enter,
-		exit,
-		initial,
+
 		...restProps
 	}: ScrollableThumbProps<E, B> = $props();
 
@@ -39,12 +34,6 @@
 		'$preset',
 		klass
 	]}
-	{enter}
-	{exit}
-	{initial}
-	{animate}
-	{onmount}
-	{ondestroy}
 	{...thumbProps}
 >
 	{@render children?.()}

package/dist/components/scrollable/scrollable-track.svelte

@@ -7,12 +7,6 @@
 		class: klass = '',
 		orientation = 'vertical',
 		children,
-		onmount,
-		ondestroy,
-		animate,
-		enter,
-		exit,
-		initial,
 		...restProps
 	}: ScrollableTrackProps<E, B> = $props();
 
@@ -45,12 +39,6 @@
 			'$preset',
 			klass
 		]}
-		{enter}
-		{exit}
-		{initial}
-		{animate}
-		{onmount}
-		{ondestroy}
 		{...trackProps}
 	>
 		{@render children?.()}

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

@@ -21,10 +21,6 @@ declare class SelectContentAtom extends DropdownMenuContentAtom {
         'aria-multiselectable': boolean;
         'aria-activedescendant': string | undefined;
         'aria-orientation': "vertical";
-        'aria-modal': boolean;
-        'aria-labelledby': string;
-        inert: boolean | undefined;
-        tabindex: number;
         'data-active': boolean;
     };
 }

package/dist/components/select/index.d.ts

@@ -7,5 +7,5 @@ export { filterSelectData } from './runes.svelte';
  */
 export { filterSelectData as filter } from './runes.svelte';
 export * from './types';
-export type { AnimatePopoverContentParams as AnimateSelectContentParams, animatePopoverContent as animateSelectContent } from '../popover/motion';
+export type { AnimatePopoverContentParams as AnimateSelectContentParams, animatePopoverContent as animateSelectContent } from '../popover/motion.svelte';
 export { select } from './attachments.svelte';

package/dist/components/select/select-placeholder.svelte

@@ -7,12 +7,6 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	} = $props();
 

package/dist/components/select/select-placeholder.svelte.d.ts

@@ -3,12 +3,6 @@ declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B exten
     props: {
         class?: string;
         children?: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
     } & Record<string, any>;
     exports: {};
     bindings: "";

package/dist/components/sidebar/sidebar-content.svelte

@@ -9,12 +9,10 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = animateSidebarContent({ '0': '0px', '1': 'auto' }),
-		enter = undefined,
-		exit = undefined,
-		initial = animateSidebarContent({ '0': '0px', '1': 'auto', duration: 0 }),
+		fallback = {
+			animate: animateSidebarContent({ '0': '0px', '1': 'auto' }),
+			initial: animateSidebarContent({ '0': '0px', '1': 'auto', duration: 0 })
+		},
 		...restProps
 	}: SidebarRootProps<E, B> = $props();
 
@@ -28,12 +26,7 @@
 	{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)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
+	{fallback}
 	{...contentProps}
 >
 	{@render children?.({ sidebar: bond })}

package/dist/components/stack/bond.svelte.js

@@ -53,6 +53,12 @@ export class StackState extends BondState {
     #order = $state([]);
     constructor(props) {
         super(props);
+        $effect(() => {
+            const value = this.props.value;
+            if (value) {
+                untrack(() => this.bringToFront(value));
+            }
+        });
     }
     register(value) {
         const order = untrack(() => this.#order);

package/dist/components/stack/stack-item.svelte

@@ -38,11 +38,15 @@
 		// Merge user style with z-index from atom
 		style: userStyle ? `${userStyle}; z-index: ${zIndex}` : `z-index: ${zIndex}`
 	});
+
+	const isActive = $derived(bond?.state.props.value === value);
 </script>
 
 <HtmlAtom
 	preset="stack.item"
 	class={['stack-item', '$preset', klass]}
+	data-value={value}
+	data-active={isActive}
 	{...itemProps}
 >
 	{@render children?.()}

package/dist/components/switch/switch.svelte

@@ -43,6 +43,7 @@
 	role="switch"
 	aria-checked={checked}
 	aria-disabled={disabled || undefined}
+	data-checked={checked}
 	onclick={handleClick}
 	{...restProps}
 >
@@ -68,6 +69,7 @@
 			checked ? 'translate-x-6' : 'translate-x-1',
 			'$preset'
 		]}
+		data-checked={checked}
 	/>
 </HtmlAtom>
 

package/dist/components/tabs/tab/tab-header.svelte

@@ -19,7 +19,7 @@
 		class: klass = '',
 		as = 'button' as E,
 		children,
-		onpointerdown,
+		onclick,
 		...restProps
 	}: TabHeaderProps<E, B> = $props();
 
@@ -28,10 +28,10 @@
 		...restProps
 	});
 
-	function handlePointerDown(ev: PointerEvent) {
+	function handleClick(ev: PointerEvent) {
 		if (isDisabled) return;
 
-		onpointerdown?.(ev, { ...(bond ? { tab: bond } : {}) });
+		onclick?.(ev, { ...(bond ? { tab: bond } : {}) });
 
 		if (ev.defaultPrevented) {
 			return;
@@ -54,7 +54,7 @@
 	]}  
 	type="button"
 	disabled={isDisabled}
-	onpointerdown={handlePointerDown}
+	onclick={handleClick}
 	{...headerProps}
 >
 	{@render children?.({ ...(bond ? { tab: bond } : {}) })}

package/dist/components/tabs/tabs-body.svelte

@@ -1,8 +1,6 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { type Base } from '../atom';
-	import { tick } from 'svelte';
 	import { Stack } from '../stack';
-	import { StackBond } from '../stack/bond.svelte';
 	import { TabsBond } from './bond.svelte';
 	import type { TabsBodyProps } from './types';
 

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

@@ -9,18 +9,26 @@
 
 	let {
 		class: klass = '',
-		value = $bindable(undefined),
+		value = $bindable(),
 		children,
 		onchange,
 		preset = 'tabs' as const,
 		...restProps
 	}: TabsRootProps<D, E, B> = $props();
 
+	let revision = $state(0);
+
 	const bondProps = defineState<TabsBondProps>([
 		defineProperty(
 			'value',
-			() => value,
-			(v) => (value = v)
+			() => {
+				void revision; // Ensure reactivity in uncontrolled mode
+				return value;
+			},
+			(v) => {
+				value = v as D | undefined;
+				revision++; // Trigger reactivity in uncontrolled mode
+			}
 		),
 		defineProperty('rest', () => restProps)
 	]);

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

@@ -1,4 +1,4 @@
 export { default as Root } from './toast-root.svelte';
 export { default as Title } from './toast-title.svelte';
 export { default as Description } from './toast-description.svelte';
-export { default as Toaster } from './toast-toaster.svelte';
+export { default as Close } from './toast-close.svelte';

package/dist/components/toast/atoms.js

@@ -1,4 +1,4 @@
 export { default as Root } from './toast-root.svelte';
 export { default as Title } from './toast-title.svelte';
 export { default as Description } from './toast-description.svelte';
-export { default as Toaster } from './toast-toaster.svelte';
+export { default as Close } from './toast-close.svelte';

package/dist/components/toast/attachments.svelte.d.ts

@@ -1,2 +1,10 @@
-import { ToastBond } from './bond';
-export declare function toast(callback: (node: HTMLElement, bond?: ToastBond) => any): (node: HTMLElement) => any;
+import { ToastBond } from './bond.svelte';
+/**
+ * Attachment helper for accessing the nearest ToastBond inside a custom node.
+ *
+ * @example
+ * ```svelte
+ * <div {@attach toast((node, bond) => bond?.state.close())} />
+ * ```
+ */
+export declare function toast<T>(callback: (node: HTMLElement, bond: ToastBond | undefined) => T): (node: HTMLElement) => T;

package/dist/components/toast/attachments.svelte.js

@@ -1,4 +1,12 @@
-import { ToastBond } from './bond';
+import { ToastBond } from './bond.svelte';
+/**
+ * Attachment helper for accessing the nearest ToastBond inside a custom node.
+ *
+ * @example
+ * ```svelte
+ * <div {@attach toast((node, bond) => bond?.state.close())} />
+ * ```
+ */
 export function toast(callback) {
     const bond = ToastBond.get();
     return (node) => callback(node, bond);

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

@@ -0,0 +1,73 @@
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
+export type ToastBondProps = BondStateProps & {
+    open: boolean;
+    disabled: boolean;
+    readonly rest?: Record<string, unknown>;
+};
+export type ToastBondElements = {
+    root: HTMLElement;
+    title: HTMLElement;
+    description: HTMLElement;
+    close: HTMLElement;
+};
+export declare class ToastRootAtom extends BondAtom<ToastBond> {
+    constructor(bond: ToastBond);
+    get attrs(): {
+        role: string;
+        'aria-live': string;
+        'aria-atomic': string;
+        'aria-labelledby': string;
+        'aria-describedby': string;
+        'aria-disabled': string;
+        'data-open': boolean;
+        'data-state': string;
+    };
+}
+export declare class ToastTitleAtom extends BondAtom<ToastBond> {
+    constructor(bond: ToastBond);
+    get attrs(): {
+        id: string;
+    };
+}
+export declare class ToastDescriptionAtom extends BondAtom<ToastBond> {
+    constructor(bond: ToastBond);
+    get attrs(): {
+        id: string;
+    };
+}
+export declare class ToastCloseAtom extends BondAtom<ToastBond> {
+    constructor(bond: ToastBond);
+    get attrs(): {
+        type: string | undefined;
+        role: string | undefined;
+        tabindex: number | undefined;
+        'aria-label': string;
+    };
+    get handlers(): {
+        onclick: (ev: MouseEvent) => void;
+        onkeydown: (ev: KeyboardEvent) => void;
+    };
+}
+export declare class ToastBond<State extends ToastBondState<ToastBondProps> = ToastBondState<ToastBondProps>> extends Bond<ToastBondProps, State, ToastBondElements> {
+    static CONTEXT_KEY: string;
+    constructor(s: State);
+    share(): this;
+    /** Handle for granular access to root attrs and attachment */
+    root(): ToastRootAtom;
+    /** Handle for granular access to title attrs and attachment */
+    title(): ToastTitleAtom;
+    /** Handle for granular access to description attrs and attachment */
+    description(): ToastDescriptionAtom;
+    /** Handle for granular access to close button attrs, handlers, and attachment */
+    dismiss(): ToastCloseAtom;
+    static get(): ToastBond | undefined;
+    static set(bond: ToastBond): ToastBond;
+}
+export declare class ToastBondState<Props extends ToastBondProps> extends BondState<Props> {
+    constructor(props: () => Props);
+    get isOpen(): boolean;
+    get isDisabled(): boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+}

package/dist/components/toast/bond.svelte.js

@@ -0,0 +1,132 @@
+import { getContext, setContext, untrack } from 'svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
+import { getElementId } from '../../utils/dom.svelte';
+export class ToastRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        const props = untrack(() => this.bond.state?.props);
+        const isOpen = props?.open ?? false;
+        const isDisabled = props?.disabled ?? false;
+        const titleId = getElementId(this.bond.id, 'toast-title');
+        const descriptionId = getElementId(this.bond.id, 'toast-description');
+        return {
+            ...super.attrs,
+            role: 'status',
+            'aria-live': 'polite',
+            'aria-atomic': 'true',
+            'aria-labelledby': titleId,
+            'aria-describedby': descriptionId,
+            'aria-disabled': isDisabled ? 'true' : 'false',
+            'data-open': isOpen,
+            'data-state': isOpen ? 'open' : 'closed'
+        };
+    }
+}
+export class ToastTitleAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'title');
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            id: getElementId(this.bond.id, 'toast-title')
+        };
+    }
+}
+export class ToastDescriptionAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'description');
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            id: getElementId(this.bond.id, 'toast-description')
+        };
+    }
+}
+export class ToastCloseAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'close');
+    }
+    get attrs() {
+        const isButton = this.element?.tagName?.toLowerCase() === 'button';
+        return {
+            ...super.attrs,
+            type: isButton ? 'button' : undefined,
+            role: isButton ? undefined : 'button',
+            tabindex: isButton ? undefined : 0,
+            'aria-label': 'Dismiss notification'
+        };
+    }
+    get handlers() {
+        return {
+            onclick: (ev) => {
+                ev.stopPropagation();
+                this.bond.state.close();
+            },
+            onkeydown: (ev) => {
+                if (ev.key === 'Enter' || ev.key === ' ') {
+                    ev.preventDefault();
+                    this.bond.state.close();
+                }
+            }
+        };
+    }
+}
+export class ToastBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/toast';
+    constructor(s) {
+        super(s, 'toast');
+    }
+    share() {
+        return ToastBond.set(this);
+    }
+    /** Handle for granular access to root attrs and attachment */
+    root() {
+        return this.atom('root', () => new ToastRootAtom(this));
+    }
+    /** Handle for granular access to title attrs and attachment */
+    title() {
+        return this.atom('title', () => new ToastTitleAtom(this));
+    }
+    /** Handle for granular access to description attrs and attachment */
+    description() {
+        return this.atom('description', () => new ToastDescriptionAtom(this));
+    }
+    /** Handle for granular access to close button attrs, handlers, and attachment */
+    dismiss() {
+        return this.atom('close', () => new ToastCloseAtom(this));
+    }
+    static get() {
+        return getContext(ToastBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(ToastBond.CONTEXT_KEY, bond);
+    }
+}
+export class ToastBondState extends BondState {
+    constructor(props) {
+        super(props);
+    }
+    get isOpen() {
+        return this.props.open;
+    }
+    get isDisabled() {
+        return this.props.disabled;
+    }
+    open() {
+        if (this.props.disabled)
+            return;
+        this.props.open = true;
+    }
+    close() {
+        this.props.open = false;
+    }
+    toggle() {
+        if (this.props.disabled)
+            return;
+        this.props.open = !this.props.open;
+    }
+}

package/dist/components/toast/index.d.ts

@@ -1,3 +1,3 @@
 export * as Toast from './atoms';
 export * from './types';
-export { toast, toastManager, type ToastPosition, type ToastType, type ToastOptions, type ToastItem } from './manager.svelte';
+export { Toaster, type ToastType, type ToastOptions, type ToastItem } from './toaster.svelte';

package/dist/components/toast/index.js

@@ -1,3 +1,3 @@
 export * as Toast from './atoms';
 export * from './types';
-export { toast, toastManager } from './manager.svelte';
+export { Toaster } from './toaster.svelte';

package/dist/components/toast/toast-close.svelte

@@ -0,0 +1,47 @@
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
+	import { Icon } from '../icon';
+	import Close from '../../icons/icon-close.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+	import { ToastBond } from './bond.svelte';
+	import type { ToastCloseProps } from './types';
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		preset = 'toast.close',
+		children = undefined,
+		onclick = undefined,
+		...restProps
+	}: ToastCloseProps<E, B> = $props();
+
+	const bond = ToastBond.get();
+
+	const closeProps = $derived({
+		...(bond?.dismiss().spread ?? {}),
+		...restProps
+	});
+
+	function onclick_(ev: MouseEvent) {
+		(onclick as ((ev: MouseEvent) => void) | undefined)?.(ev);
+		if (ev.defaultPrevented) return;
+		bond?.state.close();
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	{preset}
+	class={['cursor-pointer text-current h-6', '$preset', klass]}
+	{...closeProps}
+	onclick={onclick_}
+>
+	{#if children}
+		{@render children({ toast: bond })}
+	{:else}
+		<Icon class="h-full" src={Close} />
+	{/if}
+</HtmlAtom>

package/dist/components/toast/toast-close.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Base } from '../atom';
+import type { ToastCloseProps } from './types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(): {
+    props: ToastCloseProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ToastClose: $$IsomorphicComponent;
+type ToastClose<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> = InstanceType<typeof ToastClose<E, B>>;
+export default ToastClose;