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

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

@@ -1,30 +1,31 @@
-import type { HTMLAttributes } from 'svelte/elements';
+import { type Base } from '../atom';
+import { ToastBond, ToastBondState, type ToastBondProps } from './bond.svelte';
 import type { ToastRootProps } from './types';
-declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
-    props: ToastRootProps<T, import("../atom").ComponentBase | import("../atom").SnippetBase> & HTMLAttributes<HTMLElementTagNameMap[T]>;
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: ToastRootProps<E, B>;
     exports: {
-        getBond: () => any;
+        getBond: () => ToastBond<ToastBondState<ToastBondProps>>;
     };
     bindings: "open";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', 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(): "open";
     exports(): {
-        getBond: () => any;
+        getBond: () => ToastBond<ToastBondState<ToastBondProps>>;
     };
 }
 interface $$IsomorphicComponent {
-    new <T extends keyof HTMLElementTagNameMap>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends keyof HTMLElementTagNameMap>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <E extends keyof HTMLElementTagNameMap = 'div', 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 = 'div', 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 ToastRoot: $$IsomorphicComponent;
-type ToastRoot<T extends keyof HTMLElementTagNameMap> = InstanceType<typeof ToastRoot<T>>;
+type ToastRoot<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof ToastRoot<E, B>>;
 export default ToastRoot;

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

@@ -1,35 +1,30 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom } from '../atom';
-	import { ToastBond } from './bond';
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { ToastBond } from './bond.svelte';
 	import type { ToastTitleProps } from './types';
 
-	const bond = ToastBond.get();
-
 	let {
 		class: klass = '',
+		as = 'p' as E,
+		preset = 'toast.title',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
-	}: ToastTitleProps<T> & HTMLAttributes<HTMLElementTagNameMap[T]> = $props();
+	}: ToastTitleProps<E, B> = $props();
+
+	const bond = ToastBond.get();
+
+	const titleProps = $derived({
+		...(bond?.title().spread ?? {}),
+		...restProps
+	});
 </script>
 
 <HtmlAtom
+	{as}
 	{bond}
-	preset="toast.title"
-	class={['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)}
-	{...bond?.title(restProps)}
+	{preset}
+	class={['$preset', klass]}
+	{...titleProps}
 >
 	{@render children?.({ toast: bond })}
 </HtmlAtom>

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

@@ -1,26 +1,26 @@
-import type { HTMLAttributes } from 'svelte/elements';
+import { type Base } from '../atom';
 import type { ToastTitleProps } from './types';
-declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
-    props: ToastTitleProps<T, import("../atom").ComponentBase | import("../atom").SnippetBase> & HTMLAttributes<HTMLElementTagNameMap[T]>;
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base>(): {
+    props: ToastTitleProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'p', 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 <T extends keyof HTMLElementTagNameMap>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends keyof HTMLElementTagNameMap>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <E extends keyof HTMLElementTagNameMap = 'p', 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 = 'p', 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 ToastTitle: $$IsomorphicComponent;
-type ToastTitle<T extends keyof HTMLElementTagNameMap> = InstanceType<typeof ToastTitle<T>>;
+type ToastTitle<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> = InstanceType<typeof ToastTitle<E, B>>;
 export default ToastTitle;

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

@@ -0,0 +1,38 @@
+import { type Component } from 'svelte';
+export type ToastType = 'info' | 'success' | 'error' | 'warning' | 'default';
+export interface ToastItem<T = unknown> {
+    id: string;
+    type: ToastType;
+    duration: number;
+    dismissible: boolean;
+    component?: Component<{
+        item: ToastItem<T>;
+    }> | undefined;
+    data?: T | undefined;
+}
+export interface ToastOptions<T = unknown> {
+    id?: string;
+    duration?: number;
+    dismissible?: boolean;
+    /** Arbitrary payload accessible from a custom toast component via `item.data`. */
+    data?: T;
+    /** Custom component to render in place of the default toast layout. Receives `{ item }`. */
+    component?: Component<{
+        item: ToastItem<T>;
+    }>;
+}
+export declare class Toaster {
+    #private;
+    get toasts(): ToastItem[];
+    add<T = unknown>(type?: ToastType, options?: ToastOptions<T>): string;
+    dismiss(...ids: string[]): void;
+    /** Pause auto-dismiss timer (e.g. on pointerenter). */
+    pause(...ids: string[]): void;
+    /** Resume previously paused auto-dismiss timer. */
+    resume(...ids: string[]): void;
+    remove(...ids: string[]): void;
+    clear(): void;
+    share(): Toaster;
+    static get: () => Toaster;
+    static set: (context: Toaster) => Toaster;
+}

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

@@ -0,0 +1,107 @@
+import { createContext } from 'svelte';
+import { nanoid } from 'nanoid';
+import { SvelteMap } from 'svelte/reactivity';
+const DEFAULT_DURATION = 4000;
+const [get, set] = createContext();
+export class Toaster {
+    #toasts = new SvelteMap();
+    #toastsArray = $derived([...this.#toasts.values()]);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    #timers = new Map();
+    get toasts() {
+        return this.#toastsArray;
+    }
+    add(type = 'default', options = {}) {
+        const id = options.id ?? nanoid(8);
+        // If a toast with this id already exists, update it in place
+        const existing = this.#toasts.get(id);
+        if (existing) {
+            existing.type = type;
+            if (options.dismissible !== undefined)
+                existing.dismissible = options.dismissible;
+            if (options.data !== undefined)
+                existing.data = options.data;
+            if (options.component !== undefined)
+                existing.component = options.component;
+            if (options.duration !== undefined) {
+                existing.duration = options.duration;
+                if (options.duration > 0)
+                    this.#startTimer(id, options.duration);
+                else
+                    this.#clearTimer(id);
+            }
+            // Re-open if it was in the middle of closing
+            // if (!existing.bond.state.isOpen) existing.bond.state.open();
+            return id;
+        }
+        const duration = options.duration ?? DEFAULT_DURATION;
+        const dismissible = options.dismissible ?? true;
+        const item = {
+            id,
+            type,
+            duration,
+            dismissible,
+            data: options.data,
+            component: options.component
+        };
+        this.#toasts.set(id, item);
+        if (duration > 0)
+            this.#startTimer(id, duration);
+        return id;
+    }
+    dismiss(...ids) {
+        for (const id of ids) {
+            this.#clearTimer(id);
+            this.#toasts.delete(id);
+        }
+    }
+    /** Pause auto-dismiss timer (e.g. on pointerenter). */
+    pause(...ids) {
+        for (const id of ids) {
+            const t = this.#timers.get(id);
+            if (!t || t.handle === null)
+                continue;
+            clearTimeout(t.handle);
+            const elapsed = Date.now() - t.start;
+            t.remaining = Math.max(0, t.remaining - elapsed);
+            t.handle = null;
+        }
+    }
+    /** Resume previously paused auto-dismiss timer. */
+    resume(...ids) {
+        for (const id of ids) {
+            const t = this.#timers.get(id);
+            if (!t || t.handle !== null || t.remaining <= 0)
+                continue;
+            t.start = Date.now();
+            t.handle = setTimeout(() => this.dismiss(id), t.remaining);
+        }
+    }
+    remove(...ids) {
+        for (const id of ids) {
+            this.#clearTimer(id);
+            this.#toasts.delete(id);
+        }
+    }
+    clear() {
+        for (const id of [...this.#timers.keys()])
+            this.#clearTimer(id);
+        this.#toasts.clear();
+    }
+    #startTimer(id, ms) {
+        this.#clearTimer(id);
+        const handle = setTimeout(() => this.dismiss(id), ms);
+        this.#timers.set(id, { handle, start: Date.now(), remaining: ms });
+    }
+    #clearTimer(id) {
+        const t = this.#timers.get(id);
+        if (t?.handle != null)
+            clearTimeout(t.handle);
+        this.#timers.delete(id);
+    }
+    share() {
+        return Toaster.set(this);
+    }
+    static get = get;
+    static set = set;
+}

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

@@ -1,40 +1,23 @@
 import type { Snippet } from 'svelte';
 import type { HtmlAtomProps, Base } from '../atom';
-import type { Override } from '../../types';
-import type { ToastBond } from './bond';
-/**
- * Extend this interface to add custom toast root properties in your application.
- */
-export interface ToastRootExtendProps {
+import type { ToastBond, ToastBondProps } from './bond.svelte';
+export interface ToastSnippetProps {
+    toast: ToastBond | undefined;
 }
-/**
- * Extend this interface to add custom toast title properties in your application.
- */
-export interface ToastTitleExtendProps {
-}
-/**
- * Extend this interface to add custom toast description properties in your application.
- */
-export interface ToastDescriptionExtendProps {
-}
-export interface ToastRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        toast?: ToastBond;
-    }]>;
-}>, ToastRootExtendProps {
+export type ToastChildren = Snippet<[ToastSnippetProps]>;
+export interface ToastRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, ToastChildren> {
+    open?: boolean;
+    disabled?: boolean;
     dismissible?: boolean;
+    /** Auto-dismiss duration in ms. Set to 0 to disable auto-dismiss. Default: 0. */
     duration?: number;
     onclose?: () => void;
+    /** Optional factory to construct a custom bond. */
+    factory?: (props: ToastBondProps) => ToastBond;
+}
+export interface ToastTitleProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B, ToastChildren> {
 }
-export interface ToastTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        toast: ToastBond;
-    }]>;
-}>, ToastTitleExtendProps {
+export interface ToastDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B, ToastChildren> {
 }
-export interface ToastDescriptionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        toast?: ToastBond;
-    }]>;
-}>, ToastDescriptionExtendProps {
+export interface ToastCloseProps<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> extends HtmlAtomProps<E, B, ToastChildren> {
 }

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

@@ -1 +1,2 @@
 export * as Tooltip from './atoms';
+export type { TooltipSnippetProps, TooltipChildren } from './types';

package/dist/components/tooltip/tooltip-trigger.svelte

@@ -1,39 +1,39 @@
-<script lang="ts">
-	import { PopoverBond } from '../popover/bond.svelte';
-	import { Trigger } from '../popover/atoms';
-
-	const popoverBond = PopoverBond.get();
-
-	let { preset = 'tooltip.trigger', onmount, children, onclick = undefined, ...restProps } = $props();
-
-	function tooltip(node: HTMLElement) {
-		const onpointerenter = async () => {
-			requestAnimationFrame(() => {
-				popoverBond?.state.open();
-			});
-			node.addEventListener('pointerleave', onpointerleave);
-		};
-		const onpointerleave = () => {
-			popoverBond?.state.close();
-			node.removeEventListener('pointerleave', onpointerleave);
-		};
-
-		node.addEventListener('pointerenter', onpointerenter, { passive: true });
-
-		const cleanup = () => {
-			node.removeEventListener('pointerenter', onpointerenter);
-			node.removeEventListener('pointerleave', onpointerleave);
-		};
-
-		const unmount = onmount?.(node);
-
-		return () => {
-			cleanup?.();
-			unmount?.();
-		};
-	}
-</script>
-
-<Trigger preset={preset} onmount={tooltip} {onclick} {...restProps}>
-	{@render children?.()}
-</Trigger>
+<script lang="ts">
+	import { PopoverBond } from '../popover/bond.svelte';
+	import { Trigger } from '../popover/atoms';
+
+	const popoverBond = PopoverBond.get();
+
+	let { preset = 'tooltip.trigger', onmount, children, onclick = undefined, ...restProps } = $props();
+
+	function tooltip(node: HTMLElement) {
+		const onpointerenter = async () => {
+			requestAnimationFrame(() => {
+				popoverBond?.state.open();
+			});
+			node.addEventListener('pointerleave', onpointerleave);
+		};
+		const onpointerleave = () => {
+			popoverBond?.state.close();
+			node.removeEventListener('pointerleave', onpointerleave);
+		};
+
+		node.addEventListener('pointerenter', onpointerenter, { passive: true });
+
+		const cleanup = () => {
+			node.removeEventListener('pointerenter', onpointerenter);
+			node.removeEventListener('pointerleave', onpointerleave);
+		};
+
+		const unmount = onmount?.(node);
+
+		return () => {
+			cleanup?.();
+			unmount?.();
+		};
+	}
+</script>
+
+<Trigger preset={preset} onmount={tooltip} {onclick} {...restProps}>
+	{@render children?.()}
+</Trigger>

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

@@ -1,13 +1,10 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom tooltip properties in your application.
- */
-export interface TooltipExtendProps {
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
+export interface TooltipSnippetProps extends SnippetProps {
 }
-export interface TooltipTriggerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, TooltipExtendProps {
-    content?: string | Snippet<[]>;
+export type TooltipChildren = Snippet<[TooltipSnippetProps]>;
+export interface TooltipTriggerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, TooltipChildren> {
+    content?: string | Snippet<[TooltipSnippetProps]>;
     placement?: 'top' | 'bottom' | 'left' | 'right';
     delay?: number;
-    children?: Snippet<[]>;
 }

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

@@ -1,4 +1,4 @@
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
 export type TreeBondProps = BondStateProps & {
     open: boolean;
     disabled: boolean;
@@ -10,34 +10,42 @@ export type TreeBondElements = {
     body: HTMLElement;
     indicator: HTMLElement;
 };
-export declare class TreeBond<Props extends TreeBondProps = TreeBondProps, State extends TreeBondState<Props> = TreeBondState<Props>, Elements extends TreeBondElements = TreeBondElements> extends Bond<TreeBondProps, State, Elements> {
-    #private;
-    static CONTEXT_KEY: string;
-    constructor(s: State);
-    get parent(): this | undefined;
-    share(): this;
-    root(props?: Record<string, unknown>): {
-        id: string;
+declare class TreeRootAtom extends BondAtom<TreeBond, HTMLElement> {
+    constructor(bond: TreeBond);
+    get attrs(): {
         'aria-labelledby': string;
         'aria-expanded': boolean;
         'aria-disabled': boolean;
-        'aria-label': unknown;
-        'data-kind': string;
     };
-    header(props?: Record<string, unknown>): {
-        id: string;
+}
+declare class TreeHeaderAtom extends BondAtom<TreeBond, HTMLElement> {
+    constructor(bond: TreeBond);
+    get attrs(): {
         'aria-controls': string;
-        'data-kind': string;
         role: string;
         tabindex: number;
     };
-    body(props?: Record<string, unknown>): {
-        id: string;
-        'data-kind': string;
-        role: string;
+}
+declare class TreeBodyAtom extends BondAtom<TreeBond, HTMLElement> {
+    constructor(bond: TreeBond);
+    get attrs(): {
+        role: "group";
         'aria-controlled-by': string;
     };
-    indicator(props?: Record<string, unknown>): {};
+}
+declare class TreeIndicatorAtom extends BondAtom<TreeBond, HTMLElement> {
+    constructor(bond: TreeBond);
+}
+export declare class TreeBond<Props extends TreeBondProps = TreeBondProps, State extends TreeBondState<Props> = TreeBondState<Props>, Elements extends TreeBondElements = TreeBondElements> extends Bond<TreeBondProps, State, Elements> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(s: State);
+    get parent(): this | undefined;
+    share(): this;
+    root(): TreeRootAtom;
+    header(): TreeHeaderAtom;
+    body(): TreeBodyAtom;
+    indicator(): TreeIndicatorAtom;
     static get(): TreeBond | undefined;
     static set(bond: TreeBond): TreeBond;
 }
@@ -47,3 +55,4 @@ export declare class TreeBondState<Props extends TreeBondProps> extends BondStat
     close(): void;
     toggle(): void;
 }
+export {};

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

@@ -1,13 +1,64 @@
-import { createAttachmentKey } from 'svelte/attachments';
 import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
 import { untrack } from 'svelte';
 import { isBrowser } from '../../utils/dom.svelte';
+class TreeRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const props = untrack(() => bond.state?.props);
+        const isOpen = props?.open ?? false;
+        const isDisabled = props?.disabled ?? false;
+        return {
+            ...super.attrs,
+            'aria-labelledby': `tree-header-${bond.id}`,
+            'aria-expanded': isOpen,
+            'aria-disabled': isDisabled
+        };
+    }
+}
+class TreeHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
+    }
+    get attrs() {
+        const bond = this.bond;
+        const isButtonElement = isBrowser() ? bond.elements.header instanceof HTMLButtonElement : false;
+        const role = untrack(() => (isButtonElement ? '' : 'button'));
+        const tabindex = !isButtonElement || bond.state.props.disabled ? -1 : 0;
+        return {
+            ...super.attrs,
+            'aria-controls': `tree-body-${bond.id}`,
+            role,
+            tabindex
+        };
+    }
+}
+class TreeBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+    get attrs() {
+        const bond = this.bond;
+        return {
+            ...super.attrs,
+            role: 'group',
+            'aria-controlled-by': `tree-header-${bond.id}`
+        };
+    }
+}
+class TreeIndicatorAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'indicator');
+    }
+}
 export class TreeBond extends Bond {
     static CONTEXT_KEY = '@atoms/context/tree';
     #parent;
     constructor(s) {
-        super(s);
+        super(s, 'tree');
         this.#parent = TreeBond.get();
     }
     get parent() {
@@ -16,59 +67,17 @@ export class TreeBond extends Bond {
     share() {
         return TreeBond.set(this);
     }
-    root(props = {}) {
-        const isOpen = this.state.props.open ?? false;
-        const isDisabled = this.state.props.disabled ?? false;
-        return {
-            id: `tree-${this.id}`,
-            'aria-labelledby': `tree-header-${this.id}`,
-            'aria-expanded': isOpen,
-            'aria-disabled': isDisabled,
-            'aria-label': props['aria-label'],
-            'data-kind': 'tree',
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
+    root() {
+        return this.atom('root', () => new TreeRootAtom(this));
     }
-    header(props = {}) {
-        const isButtonElement = isBrowser() ? this.elements.header instanceof HTMLButtonElement : false;
-        const role = untrack(() => {
-            return isButtonElement ? '' : 'button';
-        });
-        const tabindex = !isButtonElement || this.state.props.disabled ? -1 : 0;
-        return {
-            id: `tree-header-${this.id}`,
-            'aria-controls': `tree-body-${this.id}`,
-            'data-kind': 'tree-header',
-            role: role,
-            tabindex: tabindex,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.header = node;
-            }
-        };
+    header() {
+        return this.atom('header', () => new TreeHeaderAtom(this));
     }
-    body(props = {}) {
-        return {
-            id: `tree-body-${this.id}`,
-            'data-kind': 'tree-body',
-            role: 'group',
-            'aria-controlled-by': `tree-header-${this.id}`,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.body = node;
-            }
-        };
+    body() {
+        return this.atom('body', () => new TreeBodyAtom(this));
     }
-    indicator(props = {}) {
-        return {
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.indicator = node;
-            }
-        };
+    indicator() {
+        return this.atom('indicator', () => new TreeIndicatorAtom(this));
     }
     static get() {
         return getContext(TreeBond.CONTEXT_KEY);