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

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

@@ -1,27 +1,34 @@
 import { SvelteMap } from 'svelte/reactivity';
-import { createAttachmentKey } from 'svelte/attachments';
-import { Bond, BondState } from '../../shared/bond.svelte';
-import { getContext, setContext } from 'svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
+import { getContext, setContext, untrack } from 'svelte';
+export class AccordionRootAtom 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 isMultiple = props?.multiple ?? false;
+        return {
+            ...super.attrs,
+            'aria-expand': isOpen,
+            'aria-disabled': isDisabled,
+            'aria-multiselectable': isMultiple
+        };
+    }
+}
 export class AccordionBond extends Bond {
     static CONTEXT_KEY = '@atomic-sv/context/accordion';
     constructor(s) {
-        super(s);
+        super(s, 'accordion');
     }
     share() {
         return AccordionBond.set(this);
     }
+    /** Handle for granular access to root attrs and attachment */
     root() {
-        return {
-            'aria-expand': this.state?.props?.open ?? false,
-            'aria-disabled': this.state?.props?.disabled ?? false,
-            'aria-multiselectable': this.state?.props?.multiple ?? false,
-            'data-atom': this.id ?? '',
-            'data-kind': 'accordion',
-            id: `accordion-${this.id}`,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
+        return this.atom('root', () => new AccordionRootAtom(this));
     }
     static get() {
         return getContext(AccordionBond.CONTEXT_KEY);
@@ -40,6 +47,7 @@ export class AccordionState extends BondState {
     }
     open(vals) {
         if (this.props.multiple) {
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
             const sequence = new Set(this.props.values ?? []);
             for (const val of vals) {
                 sequence.add(val);
@@ -47,11 +55,12 @@ export class AccordionState extends BondState {
             this.props.values = [...sequence];
         }
         else {
-            this.props.values = [vals[0]];
+            this.props.values = [vals[0]].filter(Boolean);
         }
     }
     close(vals) {
         if (this.props.multiple) {
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
             const sequence = new Set(this.props.values ?? []);
             for (const val of vals) {
                 sequence.delete(val);
@@ -63,6 +72,7 @@ export class AccordionState extends BondState {
         }
     }
     toggle(id) {
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
         const sequence = new Set(this.props.values);
         if (sequence.has(id)) {
             sequence.delete(id);

package/dist/components/accordion/item/accordion-item-body.svelte

@@ -21,11 +21,13 @@
 	}: AccordionItemBodyProps<E, B> = $props();
 
 	const bodyProps = $derived({
-		...bond?.body(),
+		...bond?.body().spread,
 		...restProps
 	});
 </script>
 
+<!-- TODO: refactor conditional rendering using snippet based -->
+ 
 {#if isOpen}
 	<HtmlAtom
 		{preset}

package/dist/components/accordion/item/accordion-item-header.svelte

@@ -21,7 +21,7 @@
 	const bond = AccordionItemBond.get();
 
 	const headerProps = $derived({
-		...bond?.header(),
+		...bond?.header().spread,
 		...restProps
 	});
 </script>

package/dist/components/accordion/item/accordion-item-indicator.svelte

@@ -23,7 +23,7 @@
 	}: AccordionItemIndicatorProps<E, B> = $props();
 
 	const indicatorProps = $derived({
-		...bond?.indicator(),
+		...bond?.indicator().spread,
 		...restProps
 	});
 

package/dist/components/accordion/item/accordion-item-root.svelte

@@ -8,6 +8,7 @@
 		type AccordionItemBondProps
 	} from './bond.svelte';
 	import type { AccordionItemRootProps } from './types';
+	import { untrack } from 'svelte';
 
 	let {
 		class: klass = '',
@@ -31,12 +32,12 @@
 		defineProperty('disabled', () => disabled),
 		defineProperty('value', () => value)
 	]);
-	const bond = factory(accordionItemProps).share();
+	const bond = untrack(()=> factory(accordionItemProps)).share();
 
 	bond.state.mount();
 
 	const rootProps = $derived({
-		...bond.root(),
+		...bond.root().spread,
 		...restProps
 	});
 

package/dist/components/accordion/item/bond.svelte.d.ts

@@ -1,5 +1,5 @@
-import { AccordionState } from '../bond.svelte.js';
-import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte.js';
+import { AccordionState } from '../bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../../shared/bond.svelte';
 export type AccordionItemBondProps = BondStateProps & {
     value: string;
     disabled: boolean;
@@ -12,15 +12,15 @@ export type AccordionItemBondElements = {
     body: HTMLElement;
     indicator: HTMLElement;
 };
-export declare class AccordionItemBond extends Bond<AccordionItemBondProps, AccordionItemBondState, AccordionItemBondElements> {
-    constructor(state: AccordionItemBondState);
-    share(): this;
-    root(props?: Record<string, unknown>): {
-        'data-accordion': string;
-        'data-atom': string;
-        'data-kind': string;
+export declare class AccordionItemRootAtom extends BondAtom<AccordionItemBond> {
+    constructor(bond: AccordionItemBond);
+    get attrs(): {
+        [x: string]: unknown;
     };
-    header(props?: Record<string, unknown>): {
+}
+export declare class AccordionItemHeaderAtom extends BondAtom<AccordionItemBond> {
+    constructor(bond: AccordionItemBond);
+    get attrs(): {
         'aria-controls': string;
         'data-kind': string;
         'aria-disabled': boolean;
@@ -28,23 +28,37 @@ export declare class AccordionItemBond extends Bond<AccordionItemBondProps, Acco
         'aria-selected': boolean;
         role: string | undefined;
         tabindex: number;
-        id: string;
-        'data-atom': string;
         disabled: boolean | undefined;
+    };
+    get handlers(): {
         onpointerdown: (ev: PointerEvent) => void;
     };
-    body(props?: Record<string, unknown>): {
+}
+export declare class AccordionItemBodyAtom extends BondAtom<AccordionItemBond> {
+    constructor(bond: AccordionItemBond);
+    get attrs(): {
         'aria-labelledby': string;
         'aria-hidden': boolean;
         role: string;
-        'data-atom': string;
-        'data-kind': string;
-        id: string;
     };
-    indicator(props?: Record<string, unknown>): {
+}
+export declare class AccordionItemIndicatorAtom extends BondAtom<AccordionItemBond> {
+    constructor(bond: AccordionItemBond);
+    get attrs(): {
         'data-controled-by': string;
-        'data-kind': string;
     };
+}
+export declare class AccordionItemBond extends Bond<AccordionItemBondProps, AccordionItemBondState, AccordionItemBondElements> {
+    constructor(state: AccordionItemBondState);
+    share(): this;
+    /** Handle for granular access to root attrs and attachment */
+    root(): AccordionItemRootAtom;
+    /** Handle for granular access to header attrs, handlers, and attachment */
+    header(): AccordionItemHeaderAtom;
+    /** Handle for granular access to body attrs and attachment */
+    body(): AccordionItemBodyAtom;
+    /** Handle for granular access to indicator attrs and attachment */
+    indicator(): AccordionItemIndicatorAtom;
     static get(): AccordionItemBond | undefined;
     static set(bond: AccordionItemBond): AccordionItemBond;
 }

package/dist/components/accordion/item/bond.svelte.js

@@ -1,93 +1,117 @@
-import { createAttachmentKey } from 'svelte/attachments';
-import { getContext, setContext } from 'svelte';
-import { AccordionBond, AccordionState } from '../bond.svelte.js';
-import { Bond, BondState } from '../../../shared/bond.svelte.js';
-import { isBrowser } from '../../../utils/dom.svelte.js';
-export class AccordionItemBond extends Bond {
-    constructor(state) {
-        super(state);
-    }
-    share() {
-        return AccordionItemBond.set(this);
-    }
-    root(props = {}) {
+import { getContext, setContext, untrack } from 'svelte';
+import { AccordionBond, AccordionState } from '../bond.svelte';
+import { Bond, BondState, BondAtom } from '../../../shared/bond.svelte';
+import { isBrowser } from '../../../utils/dom.svelte';
+export class AccordionItemRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
         return {
-            'data-accordion': this.state?.accordionId ?? '',
-            'data-atom': this.id ?? '',
-            'data-kind': 'accordion-item',
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
+            ...super.attrs
         };
     }
-    header(props = {}) {
-        const isButtonElement = isBrowser() ? this.elements.header instanceof HTMLButtonElement : false;
+}
+export class AccordionItemHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
+    }
+    get attrs() {
+        const isButtonElement = isBrowser() ? this.element instanceof HTMLButtonElement : false;
+        const props = untrack(() => this.bond.state?.props);
+        const isDisabled = props?.disabled ?? false;
+        const isOpen = this.bond.state?.isOpen ?? false;
+        const isActive = this.bond.state?.isActive ?? false;
         return {
-            'aria-controls': `accordion-body-${this.id}`,
+            ...super.attrs,
+            'aria-controls': `accordion-body-${this.bond.id}`,
             'data-kind': 'accordion-header',
-            'aria-disabled': this.state?.props?.disabled ?? false,
-            'aria-expanded': this.state?.isOpen ?? false,
-            'aria-selected': this.state?.isActive ?? false,
+            'aria-disabled': isDisabled,
+            'aria-expanded': isOpen,
+            'aria-selected': isActive,
             role: isButtonElement ? undefined : 'button',
-            tabindex: this.state?.isActive ? 0 : -1, // Make focusable if active
-            id: `accordion-header-${this.id}`,
-            'data-atom': this.id ?? '',
-            disabled: isButtonElement ? this.state?.props.disabled : undefined,
+            tabindex: isActive ? 0 : -1,
+            disabled: isButtonElement ? isDisabled : undefined
+        };
+    }
+    get handlers() {
+        const props = untrack(() => this.bond.state?.props);
+        const isDisabled = props?.disabled ?? false;
+        const isMultiple = props?.multiple ?? false;
+        const isCollapsible = props?.collapsible ?? false;
+        return {
             onpointerdown: (ev) => {
-                if (this.state.props.disabled)
+                if (isDisabled)
                     return;
-                props?.onpointerdown?.(ev, { accordionItem: this });
-                if (ev.defaultPrevented) {
+                if (ev.defaultPrevented)
                     return;
-                }
-                if (this.state.accordion?.props.multiple) {
-                    this?.state.toggle();
+                if (isMultiple) {
+                    this.bond.state.toggle();
                 }
                 else {
-                    if (this.state.accordion?.props.collapsible) {
-                        const isActive = this.state.isActive;
-                        // accordionAtom?.state.close(accordionAtom.state.props.values);
-                        this.state.accordion.close(this.state.accordion.props.values ?? []);
+                    if (isCollapsible) {
+                        const values = untrack(() => this.bond.state.accordion?.props)?.values ?? [];
+                        const isActive = this.bond.state.isActive;
+                        this.bond.state.accordion?.close(values);
                         if (!isActive) {
-                            this?.state.open();
+                            this.bond.state.open();
                         }
                     }
                     else {
-                        this?.state.open();
+                        this.bond.state.open();
                     }
                 }
-            },
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.header = node;
             }
         };
     }
-    body(props = {}) {
+}
+export class AccordionItemBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+    get attrs() {
         return {
-            'aria-labelledby': `accordion-header-${this.id}`,
-            'aria-hidden': !this.state?.isOpen, // Hide when closed
-            role: 'region', // Announce as a region
-            'data-atom': this.id ?? '',
-            'data-kind': 'accordion-body',
-            id: `accordion-body-${this.id}`,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.body = node;
-            }
+            ...super.attrs,
+            'aria-labelledby': `accordion-header-${this.bond.id}`,
+            'aria-hidden': !this.bond.state?.isOpen,
+            role: 'region'
         };
     }
-    indicator(props = {}) {
+}
+export class AccordionItemIndicatorAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'indicator');
+    }
+    get attrs() {
         return {
-            'data-controled-by': this.state?.accordionId ?? '',
-            'data-kind': 'accordion-indicator',
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.indicator = node;
-            }
+            ...super.attrs,
+            'data-controled-by': this.bond.state?.accordionId ?? ''
         };
     }
+}
+export class AccordionItemBond extends Bond {
+    constructor(state) {
+        super(state, 'accordion-item');
+    }
+    share() {
+        return AccordionItemBond.set(this);
+    }
+    /** Handle for granular access to root attrs and attachment */
+    root() {
+        return this.atom('root', () => new AccordionItemRootAtom(this));
+    }
+    /** Handle for granular access to header attrs, handlers, and attachment */
+    header() {
+        return this.atom('header', () => new AccordionItemHeaderAtom(this));
+    }
+    /** Handle for granular access to body attrs and attachment */
+    body() {
+        return this.atom('body', () => new AccordionItemBodyAtom(this));
+    }
+    /** Handle for granular access to indicator attrs and attachment */
+    indicator() {
+        return this.atom('indicator', () => new AccordionItemIndicatorAtom(this));
+    }
     static get() {
         return getContext(AccordionItemBond.CONTEXT_KEY);
     }

package/dist/components/accordion/item/types.d.ts

@@ -1,35 +1,15 @@
 import type { HtmlAtomProps, Base } from '../../atom';
 import type { Factory } from '../../../types';
 import type { AccordionItemBond } from './bond.svelte';
-/**
- * Extend this interface to add custom accordion item root properties in your application.
- */
-export interface AccordionItemRootExtendProps {
-}
-/**
- * Extend this interface to add custom accordion item header properties in your application.
- */
-export interface AccordionItemHeaderExtendProps {
-}
-/**
- * Extend this interface to add custom accordion item body properties in your application.
- */
-export interface AccordionItemBodyExtendProps {
-}
-/**
- * Extend this interface to add custom accordion item indicator properties in your application.
- */
-export interface AccordionItemIndicatorExtendProps {
-}
-export interface AccordionItemRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AccordionItemRootExtendProps {
+export interface AccordionItemRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
     value?: string;
     data?: any;
     disabled?: boolean;
     factory?: Factory<AccordionItemBond>;
 }
-export interface AccordionItemHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AccordionItemHeaderExtendProps {
+export interface AccordionItemHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
 }
-export interface AccordionItemBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AccordionItemBodyExtendProps {
+export interface AccordionItemBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
 }
-export interface AccordionItemIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AccordionItemIndicatorExtendProps {
+export interface AccordionItemIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
 }

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

@@ -1,13 +1,12 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { Factory } from '../../types';
 import type { AccordionBond } from './bond.svelte';
-/**
- * Extend this interface to add custom accordion properties in your application.
- */
-export interface AccordionExtendProps {
+export interface AccordionSnippetProps extends SnippetProps {
+    accordion: AccordionBond;
 }
-export interface AccordionRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, AccordionExtendProps {
+export type AccordionChildren = Snippet<[AccordionSnippetProps]>;
+export interface AccordionRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, AccordionChildren> {
     value?: string;
     values?: string[];
     data?: unknown;
@@ -15,7 +14,4 @@ export interface AccordionRootProps<E extends keyof HTMLElementTagNameMap = 'div
     collapsible?: boolean;
     disabled?: boolean;
     factory?: Factory<AccordionBond>;
-    children?: Snippet<[{
-        accordion: AccordionBond;
-    }]>;
 }

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

@@ -1,68 +1,68 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { AlertBond, AlertBondState, type AlertBondProps } from './bond.svelte';
-	import type { AlertRootProps } from './types';
-	import './alert.css';
-
-	let {
-		class: klass = '',
-		preset = 'alert',
-		disabled = false,
-		extend = {},
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: AlertRootProps<E, B> = $props();
-
-	const bondProps = defineState<AlertBondProps>(
-		[defineProperty('disabled', () => disabled), defineProperty('rest', () => restProps)],
-		() => ({ disabled, extend })
-	);
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new AlertBondState(() => props);
-		return new AlertBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{preset}
-	class={[
-		'alert border-border relative flex gap-1 rounded-md border p-4 transition-all duration-200',
-		// Base styles
-		'bg-background text-foreground',
-		// State styles
-		{
-			'pointer-events-none opacity-50': disabled
-		},
-		'$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)}
-	{...rootProps}
->
-	{@render children?.({ alert: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AlertBond, AlertBondState, type AlertBondProps } from './bond.svelte';
+	import type { AlertRootProps } from './types';
+	import './alert.css';
+
+	let {
+		class: klass = '',
+		preset = 'alert',
+		disabled = false,
+		extend = {},
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AlertRootProps<E, B> = $props();
+
+	const bondProps = defineState<AlertBondProps>(
+		[defineProperty('disabled', () => disabled), defineProperty('rest', () => restProps)],
+		() => ({ disabled, extend })
+	);
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new AlertBondState(() => props);
+		return new AlertBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{preset}
+	class={[
+		'alert border-border relative flex gap-1 rounded-md border p-4 transition-all duration-200',
+		// Base styles
+		'bg-background text-foreground',
+		// State styles
+		{
+			'pointer-events-none opacity-50': disabled
+		},
+		'$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)}
+	{...rootProps}
+>
+	{@render children?.({ alert: bond })}
+</HtmlAtom>